Skip to content

Commit

Permalink
A few more things
Browse files Browse the repository at this point in the history 
- Tweaks to <script> element stuff
- Add example
- Add Myles to acks for raising #4315.
- Tighten definition of JS and JSON module script a bit
  • Loading branch information
@domenic
domenic committed May 7, 2019
1 parent 888fe2b commit 78f7c40
Showing 1 changed file with 73 additions and 38 deletions.
111 changes: 73 additions & 38 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2778,7 +2778,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#requestcredentials"><code>RequestCredentials</code></dfn> enumeration</li>
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#requestdestination"><code>RequestDestination</code></dfn> enumeration</li>
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#dom-global-fetch"><code>fetch()</code></dfn> method</li>
<li><dfn data-x-href="https://fetch.spec.whatwg.org/#concept-body-consume-body">consume body</dfn></li>
<li>
<dfn data-x="concept-response"
data-x-href="https://fetch.spec.whatwg.org/#concept-response">response</dfn> and its
Expand Down Expand Up @@ -57772,13 +57771,14 @@ interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
redundantly setting it.</p></li>

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

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

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

<p>The external script resource of <span data-x="JSON module script">JSON module scripts</span>
must conform to the requirements of the JSON specification <ref spec=JSON>.</p>
script">JavaScript module scripts</span> can be embedded inline, or be imported from an external
file using the <dfn data-export="" data-dfn-for="script" data-dfn-type="element-attr"><code
data-x="attr-script-src">src</code></dfn> attribute, which if specified gives the <span>URL</span>
of the external script resource to use. If <code data-x="attr-script-src">src</code> is specified,
it must be a <span>valid non-empty URL potentially surrounded by spaces</span>.</p>

<p>The contents of inline <code>script</code> elements, or the external script resource, must
conform with the requirements of the JavaScript specification's <i
data-x="js-prod-Script">Script</i> or <i data-x="js-prod-Module">Module</i> productions, for <span
data-x="classic script">classic scripts</span> and <span data-x="JavaScript module
script">JavaScript module scripts</span> respectively. <ref spec="JAVASCRIPT"></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>
Expand Down Expand Up @@ -58132,6 +58132,24 @@ o............A....e

</div>

<div class="example" id="json-module-script-example">

<p>The following sample shows how to you can import a <span>JSON module script</span> 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";

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>

</div>

<div w-nodev>

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

<ul>
<li><p>a <span>script record</span>, for <span data-x="classic script">classic
scripts</span></p></li>
scripts</span>;</p></li>

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

<li><p>a <span>Synthetic Module Record</span>, for <span data-x="JSON module script">JSON module
scripts</span></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>
Expand Down Expand Up @@ -86752,18 +86770,33 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
data-x="concept-script">script</span>. It has no additional <span data-x="struct
item">items</span>.</p>

<p>This specification defines multiple types of module scripts. None of these have 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>

<ul>
<li><p>A <dfn data-export="">JavaScript module script</dfn> represents a JavaScript <span>Source
Text Module Record</span>.</p></li>

<li><p>A <dfn data-export="">JSON module script</dfn> represents a parsed JSON document.
As JSON documents do import dependent modules and do not throw exceptions on execution,
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></li>
<li><p>A <span>module script</span> is a <dfn data-export="">JavaScript module script</dfn> if
its <span data-x="concept-script-record">record</span> is a <span>Source Text Module
Record</span>.</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. 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
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>
</li>
</ul>

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

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

<li>
Expand Down Expand Up @@ -87790,7 +87824,7 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
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>JSON module script</span> that this algorithm will
<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>
Expand Down Expand Up @@ -123083,6 +123117,7 @@ INSERT INTERFACES HERE
Ms2ger,
Mukilan Thiyagarajan,
Mustaq Ahmed,
Myles Borins,
Nadia Heninger,
NARUSE Yui,
Navid Zolghadr,
Expand Down

0 comments on commit 78f7c40

Please sign in to comment.