diff --git a/images/ircfog-modules.svg b/images/ircfog-modules.svg new file mode 100644 index 00000000000..b08460d5d07 --- /dev/null +++ b/images/ircfog-modules.svg @@ -0,0 +1,59 @@ + + + + + + + + + + +app.mjs + + +irc.mjs + + +fog-machine.js + + +helpers.mjs + + + + + + + diff --git a/source b/source index 0b66c9cebc1..ab479eb5373 100755 --- a/source +++ b/source @@ -2804,6 +2804,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • destination
  • potential destination
  • translating a potential destination
    • +
  • script-like destinations
  • priority
  • origin
  • referrer
    • @@ -6966,6 +6967,28 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute data-x="attr-crossorigin-anonymous-keyword">anonymous keyword. The missing value default, used when the attribute is omitted, is the No CORS state.

    +

    The majority of fetches governed by CORS settings + attributes will be done via the create a potential-CORS request algorithm.

    + +

    For module scripts, certain CORS settings attributes have been repurposed to have a slightly different + meaning, wherein they only impact the request's credentials mode (since the mode is always "cors"). To perform + this translation, we define the module script credentials mode for a given CORS + settings attribute to be determined by switching on the attribute's state:

    + +
    +
    No CORS
    +
    "omit"
    + +
    Anonymous
    +
    "same-origin"
    + +
    Use Credentials
    +
    "include"
    +
    +

    Referrer policy attributes

    @@ -13184,6 +13207,7 @@ interface HTMLLinkElement : HTMLElement { alternate, dns-prefetch, icon, + modulepreload, next, pingback, preconnect, @@ -13331,15 +13355,24 @@ interface HTMLLinkElement : HTMLElement { destination is a keyword for this attribute, mapping to a state of the same name. The attribute must be specified on link elements that have a rel attribute that contains the preload keyword, but must not be specified on link - elements which do not. The processing model for how the as attribute is used is given in the steps to obtain the resource.

    + data-x="rel-preload">preload keyword. It may be specified on link elements + that have a rel attribute that contains the modulepreload keyword; in such cases it must have a value which + is a script-like destination. For other + link elements, it must not be specified.

    + +

    The processing model for how the as attribute is + used is given in the steps to obtain the resource, for for + preload links and for modulepreload + links, respectively.

    The attribute does not have a missing value default or invalid value default, meaning that invalid or missing values for the attribute map to no state. This is accounted for in the processing - model.

    + model. For preload links, both conditions are an error; for + modulepreload links, a missing value will be treated as + "script".

    @@ -23378,6 +23411,7 @@ interface HTMLHyperlinkElementUtils { allowed in the body. The body-ok keywords defined by this specification are dns-prefetch, + modulepreload, pingback, preconnect, prefetch, @@ -23468,6 +23502,16 @@ interface HTMLHyperlinkElementUtils { Imports an icon to represent the current document. + + modulepreload + External Resource + not allowed + Yes + Specifies that the user agent must preemptively fetch the module + script and store it in the document's module map for later + evaluation. Optionally, the module's dependencies can be fetched as well. + + license Hyperlink @@ -24061,6 +24105,179 @@ interface HTMLHyperlinkElementUtils { +
    Link type "modulepreload"
    + +

    The modulepreload keyword may be used with + link elements. This keyword creates an external resource link. This + keyword is body-ok.

    + +

    The modulepreload keyword is a specialized alternative + to the preload keyword, with a processing model geared toward + preloading module scripts. In particular, it uses the specific + fetch behavior for module scripts (including, e.g., a different interpretation of the crossorigin attribute), and places the result into the + appropriate module map for later evaluation. In + contrast, a similar external resource link using the preload keyword would place the result in the preload cache, without + affecting the document's module map.

    + +

    Additionally, implementations can take advantage of the fact that module scripts declare their dependencies in order to fetch the specified module's + dependency as well. This is intended as an optimization opportunity, since the user agent knows + that, in all likelihood, those dependencies will also be needed later. It will not generally be + observable without using technology such as service workers, or monitoring on the server side. + Notably, the appropriate load or error events will occur after the specified module is fetched, and + will not wait for any dependencies.

    + +
    + +

    The appropriate times to fetch the resource for such a link are:

    + + + +
    + +

    Unlike some other link relations, changing the relevant attributes (such as as, crossorigin, and + referrerpolicy) of such a link + attribute does not trigger a new fetch. This is because the document's module map has already been populated by a previous + fetch, and so re-fetching would be pointless.

    + +
    + +

    To obtain the resource for such a link:

    + +
      +

    1. If the href attribute's value is the empty string, + then return.

      2. + +

    2. Let destination be the current state of the as attribute (a destination), or "script" if + it is in no state.

      3. + +

    3. If destination is not script-like, then queue a task on + the networking task source to fire an event + named error at the link element, and + return.

      4. + +

    4. Parse the URL given by the href attribute, relative to the element's node + document. If that fails, then return. Otherwise, let url be the resulting + URL record.

      5. + +

    5. Let settings object be the link element's node + document's relevant settings object.

      6. + +

    6. Let credentials mode be the module script credentials mode for the + crossorigin attribute.

      7. + +

    7. Let cryptographic nonce be the current value of the element's + [[CryptographicNonce]] internal slot.

      8. + +

    8. Let integrity metadata be the value of the integrity attribute, if it is specified, or the empty string + otherwise.

      9. + +

    9. Let referrer policy be the current state of the element's referrerpolicy attribute.

      10. + +

    10. Let options be a script fetch options whose cryptographic nonce is cryptographic + nonce, integrity metadata is + integrity metadata, parser + metadata is "not-parser-inserted", credentials mode is credentials + mode, and referrer + policy is referrer policy.

      11. + +

    11. Fetch a single module script given url, settings + object, destination, options, settings object, "client", and with the top-level module fetch flag set. Wait until + algorithm asynchronously completes with result.

      12. + +

    12. If result is null, fire an event + named error at the link element, and + return.

      13. + +

    13. Fire an event named load at the link element.

      14. + +
    14. +

      Optionally, perform the following steps:

      + +
        +

      1. Let visited set be « url ».

        2. + +

      2. Fetch the + descendants of and instantiate result given destination and + visited set.

        3. +
      + +

      Generally, performing these steps will be beneficial for performance, as it + allows pre-loading the modules that will invariably be requested later, when fetch a + module script graph is called. However, user agents might wish to skip them in + bandwidth-constrained situations, or situations where the relevant fetches are already in + flight.

      +
      15. +
    + +
    + +
    +

    The following snippet shows the top part of an application with several modules preloaded:

    + + 
    <!DOCTYPE html>
+<html lang="en">
+<title>IRCFog</title>
+
+<link rel="modulepreload" href="app.mjs">
+<link rel="modulepreload" href="helpers.mjs">
+<link rel="modulepreload" href="irc.mjs">
+<link rel="modulepreload" href="fog-machine.mjs">
+
+<script type="module" src="app.mjs">
+...
    + +

    Assume that the module graph for the application is as follows:

    + + The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs. + +

    Here we see the application developer has used modulepreload all of the modules in their module graph, + ensuring that the user agent initiates fetches for them all. Without such preloading, the user + agent might need to go through multiple network roundtrips before discovering helpers.mjs, if technologies such as HTTP/2 Server Push are not in play. In + this way, modulepreload link elements can be + used as a sort of "manifest" of the application's modules.

    +
    + +
    +

    The following code shows how modulepreload links can + be used in conjunction with import() to ensure network fetching is done ahead of + time, so that when import() is called, the module is already ready (but not + evaluated) in the module map:

    + + 
    <link rel="modulepreload" href="awesome-viewer.js">
+
+<button onclick="import('./awesome-viewer.js').then(m => m.view())">
+  View awesome thing
+</button>
    +
    +
    Link type "nofollow"

    The nofollow keyword may be used with a and @@ -57613,24 +57830,12 @@ o............A....e -

  • Let CORS setting be the current state of the element's

    Let classic script CORS setting be the current state of the element's crossorigin content attribute.

    • -
  • -

    Let module script credentials mode be determined by switching on CORS - setting:

    - -
    -
    No CORS
    -
    "omit"
    - -
    Anonymous
    -
    "same-origin"
    - -
    Use Credentials
    -
    "include"
    -
    -
    • +

  • Let module script credentials mode be the module script credentials + mode for the element's crossorigin content + attribute.

  • Let cryptographic nonce be the element's [[CryptographicNonce]] internal slot's value.

    • @@ -57649,13 +57854,21 @@ o............A....e script element has been flagged as "parser-inserted", and "not-parser-inserted" otherwise.

    -

  • Let options be a script fetch options whose cryptographic nonce is cryptographic - nonce, integrity metadata is - integrity metadata, parser - metadata is parser metadata, and credentials mode is module script - credentials mode.

    +
  • +

    Let options be a script fetch options whose cryptographic nonce is cryptographic + nonce, integrity metadata is + integrity metadata, parser + metadata is parser metadata, credentials mode is module script + credentials mode, and referrer + policy is the empty string.

    + +

    See w3c/webappsec-referrer-policy#96 + for future plans to add a referrerpolicy attribute to script + elements. +

  • Let settings object be the element's node document's Window object's environment settings object.

    • @@ -57691,7 +57904,7 @@ o............A....e
    "classic"

    Fetch a classic script given url, settings object, - options, CORS setting, and encoding.

    + options, classic script CORS setting, and encoding.

    "module"
    @@ -86246,6 +86459,11 @@ interface NavigatorOnLine { initial fetch (for module scripts) and for fetching any imported modules (for both module scripts and classic scripts)

    + +
    referrer policy
    + +

    The referrer policy used for the + initial fetch and for fetching any imported modules

    Recall that via the import() feature, cryptographic nonce is the empty string, integrity metadata is the empty string, parser metadata is "not-parser-inserted", and not-parser-inserted", credentials mode is "omit".

    + data-x="">omit", and referrer + policy is the empty string.

    Given a request request and a script fetch options options, we define:

    @@ -86268,9 +86487,11 @@ interface NavigatorOnLine { metadata to options's cryptographic nonce, its integrity metadata to options's - integrity metadata, and its integrity metadata, its parser metadata to options's parser metadata.

    + data-x="concept-script-fetch-options-parser">parser metadata, and its referrer policy to options's referrer policy.

    set up the module script request

    Set request's cryptographic nonce @@ -86279,9 +86500,11 @@ interface NavigatorOnLine { data-x="concept-request-integrity-metadata">integrity metadata to options's integrity metadata, its parser metadata to options's parser metadata, and its parser metadata, its credentials mode to options's credentials mode.

    + data-x="concept-script-fetch-options-credentials">credentials mode, and its referrer policy to options's referrer policy.

    For any given script fetch options options, the descendant script @@ -86524,9 +86747,10 @@ interface NavigatorOnLine { data-x="concept-script-fetch-options-nonce">cryptographic nonce is the empty string, integrity metadata is the empty string, parser metadata is "not-parser-inserted", and not-parser-inserted", credentials mode is credentials - mode.

    + mode, and referrer + policy is the empty string.

  • Perform the internal module script graph fetching procedure given url, fetch client settings object, destination, @@ -117325,8 +117549,8 @@ interface External { as link - Potential destination for a preload request (for rel="preload") - Potential destination + Potential destination for a preload request (for rel="preload" and rel="modulepreload") + Potential destination, for rel="preload"; script-like destination, for rel="modulepreload" async script