Reland JSON module scripts

source

@@ -2891,13 +2891,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x="js-HostGetSupportedImportAssertions" data-x-href="https://tc39.es/proposal-import-assertions/#sec-hostgetsupportedimportassertions">HostGetSupportedImportAssertions</dfn> abstract operation</li>
     </ul>
 
-    <p>The following terms are defined in the <cite>JSON modules</cite> proposal and used in this
-    specification: <ref spec=JSJSONMODULES></p>
+    <p>User agents that support JavaScript must also implement the <cite>JSON modules</cite>
+    proposal. The following terms are defined there, and used in this specification: <ref
+    spec=JSJSONMODULES></p>
 
     <ul class="brief">
-     <li><dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-createsyntheticmodule">CreateSyntheticModule</dfn></li>
-     <li><dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-setsyntheticmoduleexport">SetSyntheticModuleExport</dfn></li>
-     <li><dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-synthetic-module-records">Synthetic Module Record</dfn></li>
+     <li>The <dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-createsyntheticmodule">CreateSyntheticModule</dfn> abstract operation</li>
+     <li>The <dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-setsyntheticmoduleexport">SetSyntheticModuleExport</dfn> abstract operation</li>
+     <li>The <dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-synthetic-module-records">Synthetic Module Record</dfn> specification type</li>
+     <li>The <dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-parse-json-module">ParseJSONModule</dfn> abstract operation</li>
     </ul>
    </dd>
 
@@ -58472,6 +58474,9 @@ interface <dfn interface>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
   <p>The contents of the external script resource for <span data-x="CSS module script">CSS module
   scripts</span> must conform to the requirements of the CSS specification. <ref spec=CSS></p>
 
+  <p>The contents of the external script resource for <span data-x="JSON module script">JSON module
+  scripts</span> must conform to the requirements of the JSON specification <ref spec=JSON>.</p>
+
   <p>When used to include <span data-x="data block">data blocks</span>, the data must be embedded
   inline, the format of the data must be given using the <code data-x="attr-script-type">type</code>
   attribute, and the contents of the <code>script</code> element must conform to the requirements
@@ -58791,7 +58796,29 @@ o............A....e
    where this <code>script</code> element appears in the document, it will not be evaluated until
    both document parsing has complete and its dependency (<code data-x="">dom-utils.mjs</code>) has
    been fetched and evaluated.</p>
+  </div>
+
+  <div class="example" id="json-module-script-example">
+   <p>The following sample shows how a <span>JSON module script</span> can be imported from inside
+   a <span>JavaScript module script</span>:</p>
 
+   <pre><code class="html" data-x="">&lt;script type="module">
+ import peopleInSpace from "http://api.open-notify.org/astros.json" assert { type: "json" };
+
+ const list = document.querySelector("#people-in-space");
+ for (const { craft, name } of peopleInSpace.people) {
+   const li = document.createElement("li");
+   li.textContent = `${name} / ${craft}`;
+   list.append(li);
+ }
+&lt;/script></code></pre>
+
+   <p>MIME type checking for module scripts is strict. In order for the fetch of the <span>JSON
+   module script</span> to succeed, the HTTP reponse must have a <span>JSON MIME type</span>, for
+   example <code data-x="">Content-Type: text/json</code>. On the other hand, if the <code
+   data-x="">assert { type: "json" }</code> part of the statement is omitted, it is assumed that the
+   intent is to import a <span>JavaScript module script</span>, and the fetch will fail if the HTTP
+   response has a MIME type that is not a <span>JavaScript MIME type</span>.</p>
   </div>
 
   <div w-nodev>
@@ -90366,6 +90393,9 @@ document.querySelector("button").addEventListener("click", bound);
      <li><p>a <span>Synthetic Module Record</span>, for <span data-x="CSS module script">CSS
      module scripts</span>; or</p></li>
 
+     <li><p>a <span>Synthetic Module Record</span>, for <span data-x="JSON module script">JSON
+     module scripts</span>; or</p></li>
+
      <li><p>null, representing a parsing failure.</p></li>
     </ul>
    </dd>
@@ -90430,7 +90460,7 @@ document.querySelector("button").addEventListener("click", bound);
   data-x="concept-script">script</span>. It has no additional <span data-x="struct
   item">items</span>.</p>
 
-  <p><span data-x="module script">Module scripts</span> can be classified into two types:</p>
+  <p><span data-x="module script">Module scripts</span> can be classified into three types:</p>
 
   <ul>
    <li><p>A <span>module script</span> is a <dfn data-export="">JavaScript module script</dfn> if
@@ -90442,21 +90472,35 @@ document.querySelector("button").addEventListener("click", bound);
     data-x="concept-script-record">record</span> is a <span>Synthetic Module Record</span>, and it
     was created via the <span data-x="creating a CSS module script">create a CSS module
     script</span> algorithm. CSS module scripts represent a parsed CSS stylesheet.</p>
-    <!--
-     This definition is not super-rigorous, but it doesn't need to be for now. Technically, the
-     "it was created via..." requirement is redundant, since there are no other Synthetic Module
-     Record users.
 
-     If we ever: (a) get more Synthetic Module Record Users; or (b) start testing if something is a
-     CSS module script in algorithms, instead of just referring to the concept, then we should
-     consider adding a type item to the module script struct.
+    <!--
+     This definition is not super-rigorous, but it doesn't need to be for now. If we ever start
+     testing if something is a CSS module script in algorithms, instead of just referring to the
+     concept, then we should consider adding a type item to the module script struct.
     -->
 
     <p class="note">As CSS stylesheets do not import dependent modules, and do not throw exceptions
     on evaluation, the <span data-x="concept-script-script-fetch-options">fetch options</span> and
     <span data-x="concept-script-base-url">base URL</span> of a <span>CSS module script</span> are
     always null.</p>
    </li>
+
+   <li>
+    <p>A <span>module script</span> is a <dfn data-export="">JSON module script</dfn> if its <span
+    data-x="concept-script-record">record</span> is a <span>Synthetic Module Record</span>, and it
+    was created via the <span data-x="creating a JSON module script">create a JSON module
+    script</span> algorithm. JSON module scripts represent a parsed JSON document.</p>
+
+    <!--
+     This definition is not super-rigorous, but it doesn't need to be for now. If we ever start
+     testing if something is a JSON module script in algorithms, instead of just referring to the
+     concept, then we should consider adding a type item to the module script struct.
+    -->
+
+    <p class="note">As JSON documents do not import dependent modules, and do not throw exceptions
+    on evaluation, the <span data-x="concept-script-script-fetch-options">fetch options</span> and
+    <span data-x="concept-script-base-url">base URL</span> of a <span>JSON module script</span> are
+    always null.</p>
   </ul>
 
   <p>The <dfn>active script</dfn> is determined by the following algorithm:</p>
@@ -90857,8 +90901,9 @@ document.querySelector("button").addEventListener("click", bound);
    type</var> be <var>entry</var>.[[Value]]. Otherwise let <var>module type</var> be "<code
    data-x="">javascript</code>".</p></li>
 
-   <li><p>If <var>module type</var> is neither "<code data-x="">javascript</code>" nor "<code
-   data-x="">css</code>", then asynchronously complete this algorithm with null, and return.</p></li>
+   <li><p>If <var>module type</var> is neither "<code data-x="">javascript</code>", "<code
+   data-x="">css</code>", nor "<code data-x="">json</code>", then asynchronously complete this
+   algorithm with null, and return.</p></li>
 
    <li><p><span>Fetch a single module script</span> given <var>url</var>, <var>settings
    object</var>, "<code data-x="">script</code>", <var>options</var>, <var>settings object</var>,
@@ -91335,11 +91380,11 @@ document.querySelector("button").addEventListener("click", bound);
     </ol>
    </li>
 
-   <li><p>Assert: <var>module type</var> is either "<code data-x="">javascript</code>" or "<code
-   data-x="">css</code>". Otherwise we would not have reached this point because a failure would
-   have been raised when inspecting <var>moduleRequest</var>.[[Assertions]] in <a
-   href="#validate-requested-module-specifiers">create a JavaScript module script</a> or <span>fetch
-   an import() module script graph</span>.</p></li>
+   <li><p>Assert: <var>module type</var> is either "<code data-x="">javascript</code>", "<code
+   data-x="">css</code>", or "<code data-x="">json</code>". Otherwise we would not have reached this
+   point because a failure would have been raised when inspecting
+   <var>moduleRequest</var>.[[Assertions]] in <a href="#validate-requested-module-specifiers">create
+   a JavaScript module script</a> or <span>fetch an import() module script graph</span>.</p></li>
 
    <li><p>Let <var>moduleMap</var> be <var>module map settings object</var>'s <span
    data-x="concept-settings-object-module-map">module map</span>.</p></li>
@@ -91424,6 +91469,11 @@ document.querySelector("button").addEventListener("click", bound);
    result of <span>creating a CSS module script</span> given <var>source text</var> and <var>module
    map settings object</var>.</p></li>
 
+   <li><p>If <var>MIME type essence</var> is a <span>JSON MIME type</span> and <var>module
+   type</var> is "<code data-x="">json</code>", then set <var>module script</var> to the result of
+   <span>creating a JSON module script</span> given <var>source text</var> and <var>module map
+   settings object</var>.</p></li>
+
    <li>
     <p><span data-x="map set">Set</span> <var>moduleMap</var>[(<var>url</var>, <var>module
     type</var>)] to <var>module script</var>, and asynchronously complete this algorithm with
@@ -91627,7 +91677,8 @@ document.querySelector("button").addEventListener("click", bound);
 
      <li>
       <p>If <var>url</var> is failure, or if <var>module type</var> is neither "<code
-      data-x="">javascript</code>" nor "<code data-x="">css</code>", then:</p>
+      data-x="">javascript</code>", "<code data-x="">css</code>", nor "<code data-x="">json</code>",
+      then:</p>
       <ol>
        <li><p>Let <var>error</var> be a new <code>TypeError</code> exception.</p></li>
 
@@ -91712,6 +91763,35 @@ document.querySelector("button").addEventListener("click", bound);
    </li>
   </ol>
 
+  <p>To <dfn data-x="creating a JSON module script">create a JSON module script</dfn>, given a
+  string <var>source</var> and an <span>environment settings object</span> <var>settings</var>:</p>
+
+  <ol>
+   <li><p>Let <var>script</var> be a new <span>module script</span> that this algorithm will
+   subsequently initialize.</p></li>
+
+   <li><p>Set <var>script</var>'s <span>settings object</span> to <var>settings</var>.</p></li>
+
+   <li><p>Set <var>script</var>'s <span data-x="concept-script-base-url">base URL</span> and
+   <span data-x="concept-script-script-fetch-options">fetch options</span> to null.</p></li>
+
+   <li><p>Set <var>script</var>'s <span data-x="concept-script-parse-error">parse error</span> and
+   <span data-x="concept-script-error-to-rethrow">error to rethrow</span> to null.</p></li>
+
+   <li>
+    <p>Let <var>result</var> be <span>ParseJSONModule</span>(<var>source</var>).
+
+    <p>If this throws an exception, set <var>script</var>'s <span
+    data-x="concept-script-parse-error">parse error</span> to that exception, and return
+    <var>script</var>.</p>
+   </li>
+
+   <li><p>Set <var>script</var>'s <span data-x="concept-script-record">record</span> to
+   <var>result</var>.
+
+   <li><p>Return <var>script</var>.</p></li>
+  </ol>
+
   <h5 id="calling-scripts">Calling scripts</h5>
 
   <p>To <dfn export>run a classic script</dfn> given a <span>classic script</span> <var>script</var>