Skip to content
Permalink
Browse files

Add <script type="module"> and module resolution/fetching/evaluation

This adds support for <script type="module"> for loading JavaScript modules, as well as all the infrastructure necessary for resolving, fetching, parsing, and evaluating module graphs rooted at such <script type="module">s.

Some decisions encoded here include:

- Always use the UTF-8 decoder, ignoring the charset="" attribute or the Content-Type header parameter.
- Always use the "cors" fetch mode, and use the crossorigin="" attribute to decide between "omit"/"same-origin"/"include" for the credentials mode.
- Require that the response be served with a JavaScript MIME type for its Content-Type header.
- Use <script defer>-like semantics by default: do not execute until parsing is finished, and execute in order. The async="" attribute can be used to opt in to an "execute as soon as possible, in any order" semantic. Unlike for classic scripts, in no cases do we block further parsing or script execution until the module tree is finished loading. This applies to both inline and external scripts.
- For module resolution, allow absolute URLs and anything that starts with "./", "../", or "/", with this latter set being interpreted as relative URLs. Everything else (e.g. bare specifiers like "jquery") fails for now. No automatic ".js" is appended.
- Modules are memoized based on their request URL, whereas import specifiers inside the module are resolved based on the module's response URL.

In the course of adding this functionality, large parts of script execution, fetching, and creation were refactored, including moving around some sections and reorganizing others. Conceptually, scripts are now either "classic scripts", "module scripts", or "data blocks". The result should generally be clearer and easier to follow.
  • Loading branch information...
domenic committed Dec 22, 2015
1 parent ea7b6e9 commit cd1a9fb1e83f7d0bc30be8b34ecdaf444a0b19a4
Showing with 1,293 additions and 656 deletions.
  1. +94 −37 images/asyncdefer.svg
  2. +1,199 −619 source
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 690 115" width="690" height="115">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 200" width="820" height="200">
<style><![CDATA[
.dividers {
stroke: rgb(106, 148, 0);
@@ -69,12 +69,16 @@
]]></style>

<g class="dividers">
<line x1="0" x2="690" y1="33.5" y2="33.5" />
<line x1="0" x2="690" y1="67.5" y2="67.5" />

<line x1="135.5" x2="135.5" y1="1" y2="29" />
<line x1="135.5" x2="135.5" y1="38" y2="63" />
<line x1="135.5" x2="135.5" y1="71" y2="99" />
<line x1="0" x2="820" y1="33.5" y2="33.5" />
<line x1="0" x2="820" y1="66.5" y2="66.5" />
<line x1="0" x2="820" y1="99.5" y2="99.5" />
<line x1="0" x2="820" y1="132.5" y2="132.5" />

<line x1="245.5" x2="245.5" y1="1" y2="29" />
<line x1="245.5" x2="245.5" y1="38" y2="62" />
<line x1="245.5" x2="245.5" y1="68" y2="95" />
<line x1="245.5" x2="245.5" y1="104" y2="128" />
<line x1="245.5" x2="245.5" y1="137" y2="165" />
</g>

<defs>
@@ -89,35 +93,88 @@
</marker>
</defs>

<text x="12" y="16.75" class="tag">&lt;script&gt;</text>
<text x="142" y="9" class="label">Scripting:</text>
<text x="142" y="24" class="label">HTML Parser:</text>
<line x1="399" x2="399" y1="9" y2="24" class="connector" />
<line x1="546" x2="546" y1="9" y2="24" class="connector" />
<line x1="248" x2="399" y1="24" y2="24" class="parser progress first" />
<line x1="399" x2="496" y1="9" y2="9" class="fetch progress" />
<line x1="496" x2="546" y1="9" y2="9" class="execution progress" />
<line x1="546" x2="674" y1="24" y2="24" class="parser progress last" />

<text x="12" y="50.25" class="tag">&lt;script defer&gt;</text>
<text x="142" y="42" class="label">Scripting:</text>
<text x="142" y="57" class="label">HTML Parser:</text>
<line x1="626" x2="626" y1="42" y2="57" class="connector" />
<line x1="248" x2="626" y1="57" y2="57" class="parser progress first" />
<line x1="399" x2="496" y1="42" y2="42" class="fetch progress" />
<line x1="626" x2="674" y1="42" y2="42" class="execution progress last" />

<text x="12" y="84.25" class="tag">&lt;script async&gt;</text>
<text x="142" y="76" class="label">Scripting:</text>
<text x="142" y="91" class="label">HTML Parser:</text>
<line x1="496" x2="496" y1="76" y2="91" class="connector" />
<line x1="546" x2="546" y1="76" y2="91" class="connector" />
<line x1="248" x2="496" y1="91" y2="91" class="parser progress first" />
<line x1="399" x2="496" y1="76" y2="76" class="fetch progress" />
<line x1="496" x2="546" y1="76" y2="76" class="execution progress" />
<line x1="546" x2="674" y1="91" y2="91" class="parser progress last" />

<g class="legend" transform="translate(247.5,105.5)">
<g>
<text x="12" y="16.75" class="tag">&lt;script&gt;</text>

<g transform="translate(252,0)">
<text x="0" y="9" class="label">Scripting:</text>
<text x="0" y="24" class="label">HTML Parser:</text>
<line x1="257" x2="257" y1="9" y2="24" class="connector" />
<line x1="404" x2="404" y1="9" y2="24" class="connector" />
<line x1="106" x2="257" y1="24" y2="24" class="parser progress first" />
<line x1="257" x2="354" y1="9" y2="9" class="fetch progress" />
<line x1="354" x2="404" y1="9" y2="9" class="execution progress" />
<line x1="404" x2="532" y1="24" y2="24" class="parser progress last" />
</g>
</g>

<g transform="translate(0,33)">
<text x="12" y="16.75" class="tag">&lt;script defer&gt;</text>

<g transform="translate(252,0)">
<text x="0" y="9" class="label">Scripting:</text>
<text x="0" y="24" class="label">HTML Parser:</text>
<line x1="484" x2="484" y1="9" y2="24" class="connector" />
<line x1="106" x2="484" y1="24" y2="24" class="parser progress first" />
<line x1="257" x2="354" y1="9" y2="9" class="fetch progress" />
<line x1="484" x2="532" y1="9" y2="9" class="execution progress last" />
</g>
</g>

<g transform="translate(0,66)">
<text x="12" y="16.75" class="tag">&lt;script async&gt;</text>

<g transform="translate(252,0)">
<text x="0" y="9" class="label">Scripting:</text>
<text x="0" y="24" class="label">HTML Parser:</text>
<line x1="354" x2="354" y1="9" y2="24" class="connector" />
<line x1="404" x2="404" y1="9" y2="24" class="connector" />
<line x1="106" x2="354" y1="24" y2="24" class="parser progress first" />
<line x1="257" x2="354" y1="9" y2="9" class="fetch progress" />
<line x1="354" x2="404" y1="9" y2="9" class="execution progress" />
<line x1="404" x2="532" y1="24" y2="24" class="parser progress last" />
</g>
</g>

<g transform="translate(0,99)">
<text x="12" y="16.75" class="tag">&lt;script type="module"&gt;</text>

<g transform="translate(252,0)">
<text x="0" y="9" class="label">Scripting:</text>
<text x="0" y="24" class="label">HTML Parser:</text>
<line x1="484" x2="484" y1="9" y2="24" class="connector" />
<line x1="106" x2="484" y1="24" y2="24" class="parser progress first" />
<line x1="257" x2="354" y1="9" y2="9" class="fetch progress" />
<line x1="354" x2="374" y1="9" y2="9" class="fetch progress" />
<line x1="354" x2="374" y1="9" y2="16.5" class="fetch progress" />
<line x1="374" x2="394" y1="16.5" y2="16.5" class="fetch progress" />
<line x1="394" x2="414" y1="16.5" y2="16.5" class="fetch progress" />
<line x1="394" x2="414" y1="16.5" y2="9" class="fetch progress" />
<line x1="484" x2="532" y1="9" y2="9" class="execution progress last" />
</g>
</g>

<g transform="translate(0,132)">
<text x="12" y="16.75" class="tag">&lt;script type="module" async&gt;</text>

<g transform="translate(252,0)">
<text x="0" y="9" class="label">Scripting:</text>
<text x="0" y="24" class="label">HTML Parser:</text>
<line x1="414" x2="414" y1="9" y2="24" class="connector" />
<line x1="464" x2="464" y1="9" y2="24" class="connector" />
<line x1="106" x2="414" y1="24" y2="24" class="parser progress first" />
<line x1="257" x2="354" y1="9" y2="9" class="fetch progress" />
<line x1="354" x2="374" y1="9" y2="9" class="fetch progress" />
<line x1="354" x2="374" y1="9" y2="16.5" class="fetch progress" />
<line x1="374" x2="394" y1="16.5" y2="16.5" class="fetch progress" />
<line x1="394" x2="414" y1="16.5" y2="16.5" class="fetch progress" />
<line x1="394" x2="414" y1="16.5" y2="9" class="fetch progress" />
<line x1="414" x2="464" y1="9" y2="9" class="execution progress" />
<line x1="464" x2="532" y1="24" y2="24" class="parser progress last" />
</g>
</g>

<g class="legend" transform="translate(357.5,172)">
<circle cx="3" cy="3" r="3" class="parser" />
<text x="9" y="3" class="label">parser</text>

@@ -128,5 +185,5 @@
<text x="96" y="3" class="label">execution</text>
</g>

<text x="674" y="108.5" text-anchor="end" class="label">runtime →</text>
<text x="782" y="175" text-anchor="end" class="label">runtime →</text>
</svg>
Oops, something went wrong.

0 comments on commit cd1a9fb

Please sign in to comment.
You can’t perform that action at this time.