Skip to content

Commit 78f7c40

Browse files
committed
A few more things
- Tweaks to <script> element stuff - Add example - Add Myles to acks for raising whatwg#4315. - Tighten definition of JS and JSON module script a bit
1 parent 888fe2b commit 78f7c40

1 file changed

Lines changed: 73 additions & 38 deletions

File tree

‎source‎

Lines changed: 73 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2778,7 +2778,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
27782778
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#requestcredentials"><code>RequestCredentials</code></dfn> enumeration</li>
27792779
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#requestdestination"><code>RequestDestination</code></dfn> enumeration</li>
27802780
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#dom-global-fetch"><code>fetch()</code></dfn> method</li>
2781-
<li><dfn data-x-href="https://fetch.spec.whatwg.org/#concept-body-consume-body">consume body</dfn></li>
27822781
<li>
27832782
<dfn data-x="concept-response"
27842783
data-x-href="https://fetch.spec.whatwg.org/#concept-response">response</dfn> and its
@@ -57772,13 +57771,14 @@ interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
5777257771
redundantly setting it.</p></li>
5777357772

5777457773
<li><p>Setting the attribute to an <span>ASCII case-insensitive</span> match for the string
57775-
"<code data-x="">module</code>" means that the script is a <span>module script</span>.
57776-
If it has a <span>JavaScript MIME type</span>, or if the script is embedded inline, then it will
57777-
be interpreted as a <span>JavaScript module script</span> according to the JavaScript <i
57778-
data-x="js-prod-Module">Module</i> top-level production. Module scripts are not affected by
57779-
the <code data-x="attr-script-defer">defer</code> attribute, but are affected by the <code
57780-
data-x="attr-script-async">async</code> attribute (regardless of the state of the <code
57781-
data-x="attr-script-src">src</code> attribute).</p></li>
57774+
"<code data-x="">module</code>" means that the script is a <span>module script</span>. If it has
57775+
a <span>JavaScript MIME type</span>, or if the script is embedded inline, then it will be
57776+
interpreted as a <span>JavaScript module script</span> according to the JavaScript <i
57777+
data-x="js-prod-Module">Module</i> top-level production; if it has a <span>JSON MIME
57778+
type</span>, then it will be interpreted as a <span>JSON module script</span>. Module scripts
57779+
are not affected by the <code data-x="attr-script-defer">defer</code> attribute, but are
57780+
affected by the <code data-x="attr-script-async">async</code> attribute (regardless of the state
57781+
of the <code data-x="attr-script-src">src</code> attribute).</p></li>
5778257782

5778357783
<li><p>Setting the attribute to any other value means that the script is a <dfn>data
5778457784
block</dfn>, which is not processed. None of the <code>script</code> attributes (except <code
@@ -57797,20 +57797,20 @@ interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
5779757797
ever be reinterpreted as a different script type, even in future user agents.</p>
5779857798

5779957799
<p><span data-x="classic script">Classic scripts</span> and <span data-x="JavaScript module
57800-
script">JavaScript module scripts</span> may be embedded inline, and all script types may be
57801-
imported from an external file using the <dfn data-export="" data-dfn-for="script"
57802-
data-dfn-type="element-attr"><code data-x="attr-script-src">src</code></dfn> attribute, which if
57803-
specified gives the <span>URL</span> of the external script resource to use. If <code
57804-
data-x="attr-script-src">src</code> is specified, it must be a <span>valid non-empty URL
57805-
potentially surrounded by spaces</span>. The contents of inline <code>script</code> elements,
57806-
or the external script resource, must conform with the requirements of the JavaScript
57807-
specification's <i data-x="js-prod-Script">Script</i> or <i data-x="js-prod-Module">Module</i>
57808-
productions, for <span data-x="classic script">classic scripts</span> and
57809-
<span data-x="JavaScript module script">JavaScript module scripts</span> respectively.
57810-
<ref spec="JAVASCRIPT"></p>
57811-
57812-
<p>The external script resource of <span data-x="JSON module script">JSON module scripts</span>
57813-
must conform to the requirements of the JSON specification <ref spec=JSON>.</p>
57800+
script">JavaScript module scripts</span> can be embedded inline, or be imported from an external
57801+
file using the <dfn data-export="" data-dfn-for="script" data-dfn-type="element-attr"><code
57802+
data-x="attr-script-src">src</code></dfn> attribute, which if specified gives the <span>URL</span>
57803+
of the external script resource to use. If <code data-x="attr-script-src">src</code> is specified,
57804+
it must be a <span>valid non-empty URL potentially surrounded by spaces</span>.</p>
57805+
57806+
<p>The contents of inline <code>script</code> elements, or the external script resource, must
57807+
conform with the requirements of the JavaScript specification's <i
57808+
data-x="js-prod-Script">Script</i> or <i data-x="js-prod-Module">Module</i> productions, for <span
57809+
data-x="classic script">classic scripts</span> and <span data-x="JavaScript module
57810+
script">JavaScript module scripts</span> respectively. <ref spec="JAVASCRIPT"></p>
57811+
57812+
<p>The contents of the external script resource for <span data-x="JSON module script">JSON module
57813+
scripts</span> must conform to the requirements of the JSON specification <ref spec=JSON>.</p>
5781457814

5781557815
<p>When used to include <span data-x="data block">data blocks</span>, the data must be embedded
5781657816
inline, the format of the data must be given using the <code data-x="attr-script-type">type</code>
@@ -58132,6 +58132,24 @@ o............A....e
5813258132

5813358133
</div>
5813458134

58135+
<div class="example" id="json-module-script-example">
58136+
58137+
<p>The following sample shows how to you can import a <span>JSON module script</span> from inside
58138+
a <span>JavaScript module script</span>:</p>
58139+
58140+
<pre><code class="html" data-x="">&lt;script type="module">
58141+
import peopleInSpace from "http://api.open-notify.org/astros.json";
58142+
58143+
const list = document.querySelector("#people-in-space");
58144+
for (const { craft, name } of peopleInSpace.people) {
58145+
const li = document.createElement("li");
58146+
li.textContent = `${name} / ${craft}`;
58147+
list.append(li);
58148+
}
58149+
&lt;/script></code></pre>
58150+
58151+
</div>
58152+
5813558153
<div w-nodev>
5813658154

5813758155
<h5 id="script-processing-model">Processing model</h5>
@@ -86690,13 +86708,13 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
8669086708

8669186709
<ul>
8669286710
<li><p>a <span>script record</span>, for <span data-x="classic script">classic
86693-
scripts</span></p></li>
86711+
scripts</span>;</p></li>
8669486712

8669586713
<li><p>a <span>Source Text Module Record</span>, for <span data-x="JavaScript module
86696-
script">JavaScript module scripts</span></p></li>
86714+
script">JavaScript module scripts</span>;</p></li>
8669786715

86698-
<li><p>a <span>Synthetic Module Record</span>, for <span data-x="JSON module script">JSON module
86699-
scripts</span></p></li>
86716+
<li><p>a <span>Synthetic Module Record</span>, for <span data-x="JSON module script">JSON
86717+
module scripts</span>; or</p></li>
8670086718

8670186719
<li><p>null, representing a parsing failure.</p></li>
8670286720
</ul>
@@ -86752,18 +86770,33 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
8675286770
data-x="concept-script">script</span>. It has no additional <span data-x="struct
8675386771
item">items</span>.</p>
8675486772

86755-
<p>This specification defines multiple types of module scripts. None of these have additional
86756-
<span data-x="struct item">items</span>.</p>
86773+
<p><span data-x="module script">Module scripts</span> can be classified into two types:</p>
8675786774

8675886775
<ul>
86759-
<li><p>A <dfn data-export="">JavaScript module script</dfn> represents a JavaScript <span>Source
86760-
Text Module Record</span>.</p></li>
86761-
86762-
<li><p>A <dfn data-export="">JSON module script</dfn> represents a parsed JSON document.
86763-
As JSON documents do import dependent modules and do not throw exceptions on execution,
86764-
the <span data-x="concept-script-script-fetch-options">fetch options</span> and <span
86765-
data-x="concept-script-base-url">base URL</span> of a <span>JSON module script</span>
86766-
are always null.</p></li>
86776+
<li><p>A <span>module script</span> is a <dfn data-export="">JavaScript module script</dfn> if
86777+
its <span data-x="concept-script-record">record</span> is a <span>Source Text Module
86778+
Record</span>.</p></li>
86779+
86780+
<li>
86781+
<p>A <span>module script</span> is a <dfn data-export="">JSON module script</dfn> if its <span
86782+
data-x="concept-script-record">record</span> is a <span>Synthetic Module Record</span>, and it
86783+
was created via the <span data-x="creating a JSON module script">create a JSON module
86784+
script</span> algorithm. JSON module scripts represent a parsed JSON document.</p>
86785+
<!--
86786+
This definition is not super-rigorous, but it doesn't need to be for now. Technically, the
86787+
"it was created via..." requirement is redundant, since there are no other Synthetic Module
86788+
Record users.
86789+
86790+
If we ever: (a) get more Synthetic Module Record Users; or (b) start testing if something is a
86791+
JSON module script in algorithms, instead of just referring to the concept, then we should
86792+
consider adding a type item to the module script struct.
86793+
-->
86794+
86795+
<p class="note">As JSON documents do not import dependent modules, and do not throw exceptions
86796+
on evaluation, the <span data-x="concept-script-script-fetch-options">fetch options</span> and
86797+
<span data-x="concept-script-base-url">base URL</span> of a <span>JSON module script</span> are
86798+
always null.</p>
86799+
</li>
8676786800
</ul>
8676886801

8676986802
<p>The <dfn>active script</dfn> is determined by the following algorithm:</p>
@@ -87422,7 +87455,8 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
8742287455
<p>Let <var>module script</var> be null.</p>
8742387456

8742487457
<p class="note">If the resource does not have a MIME type which HTML knows how to handle
87425-
as a module, then <var>module script</var> will be null, which is interpreted as failure.</p>
87458+
as a module, then <var>module script</var> will remain null, which is interpreted as
87459+
failure.</p>
8742687460
</li>
8742787461

8742887462
<li>
@@ -87790,7 +87824,7 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
8779087824
string <var>source</var> and an <span>environment settings object</span> <var>settings</var>:</p>
8779187825

8779287826
<ol>
87793-
<li><p>Let <var>script</var> be a new <span>JSON module script</span> that this algorithm will
87827+
<li><p>Let <var>script</var> be a new <span>module script</span> that this algorithm will
8779487828
subsequently initialize.</p></li>
8779587829

8779687830
<li><p>Set <var>script</var>'s <span>settings object</span> to <var>settings</var>.</p></li>
@@ -123083,6 +123117,7 @@ INSERT INTERFACES HERE
123083123117
Ms2ger,
123084123118
Mukilan Thiyagarajan,
123085123119
Mustaq Ahmed,
123120+
Myles Borins,
123086123121
Nadia Heninger,
123087123122
NARUSE Yui,
123088123123
Navid Zolghadr,

0 commit comments

Comments
 (0)