From ebdd2a03de44c6a51e837dbb2dbe6400d8bc6b40 Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Mon, 10 Dec 2018 06:23:20 -0500 Subject: [PATCH] Dev edition: improve the "Scripting" subsection This adds a domintro for the developer-facing import() and import.meta integrations, as well as cutting and including content more appropriately for the module, event loop, runtime script errors, unhandled promise rejections, and event handlers sections. https://github.com/whatwg/html/pull/4183#issuecomment-439999771 discusses potential further improvements. --- source | 79 +++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 65 insertions(+), 14 deletions(-) diff --git a/source b/source index 5af18751cc0..98dca3123bb 100644 --- a/source +++ b/source @@ -3101,6 +3101,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute spec=JSIMPORTMETA>

@@ -88378,6 +88379,8 @@ document.querySelector("button").addEventListener("click", bound); + +
Integration with the JavaScript module system

The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts @@ -88391,12 +88394,41 @@ document.querySelector("button").addEventListener("click", bound); scripts versus module scripts, since both of them use the script element.

-

A module map is a map of URL records to values that are either a module script, null (used to - represent failed fetches), or a placeholder value "fetching". Module maps are used to ensure that imported JavaScript modules are - only fetched, parsed, and evaluated once per Document or worker.

+
+
modulePromise = import(specifier)
+ +
+

Returns a promise for the module namespace object for the module script + identified by specifier. This allows dynamic importing of module scripts at runtime, + instead of statically using the import statement form. The specifier will + be resolved relative to the active + script's base URL.

+ +

The returned promise will be rejected if an invalid specifier is given, or if a failure is + encountered while fetching or evaluating the resulting module graph.

+ +

This syntax can be used inside both classic and module scripts. It thus provides a bridge into the module-script + world, from the classic-script world.

+
+ +
url = import . meta . url
+ +
+

Returns the active module script's base URL.

+ +

This syntax can only be used inside module scripts.

+
+
+ +

A module map is a map of URL records to values that are either a module script, + null (used to represent failed fetches), or a placeholder value "fetching". Module maps are used to ensure + that imported JavaScript modules are only fetched, parsed, and evaluated once per + Document or worker.

Since module maps are keyed by URL, the following code will @@ -88428,6 +88460,8 @@ import "https://example.com/foo/../module2.mjs"; data-x="concept-SharedWorkerGlobalScope-constructor-url">constructor url.

+
+

To resolve a module specifier given a URL base URL and a JavaScript string specifier, perform the following steps. It will return either a URL record or failure.

@@ -88452,14 +88486,18 @@ import "https://example.com/foo/../module2.mjs"; base URL as the base URL.

+
+
-

The following are valid module specifiers according to the above algorithm:

+

The following are valid module specifiers according to the above + algorithm:

+
+
HostResolveImportedModule(referencingScriptOrModule, specifier)
@@ -88829,6 +88869,10 @@ import "https://example.com/foo/../module2.mjs";
Runtime script errors
+

In various scenarios, the user agent can report an exception by firing an error event at the Window. If this event is not canceled, + then the error is considered not handled, and can be reported to the developer console.

+

When the user agent is required to report an error for a @@ -88919,11 +88963,8 @@ import "https://example.com/foo/../module2.mjs"; data-x="concept-error-nothandled">not handled after this, then the error may be reported to a developer console.

-
The ErrorEvent interface
-
- 
[Constructor(DOMString type, optional ErrorEventInit eventInitDict), Exposed=(Window,Worker)]
 interface ErrorEvent : Event {
   readonly attribute DOMString message;
@@ -88959,6 +89000,8 @@ dictionary ErrorEventInit : EventInit {
   it was initialized to. Where appropriate, it is set to the object representing the error (e.g.,
   the exception object in the case of an uncaught DOM exception).

 
+
+
Unhandled promise rejections

In addition to synchronous runtime script errors, scripts @@ -88966,6 +89009,8 @@ dictionary ErrorEventInit : EventInit { data-x="event-unhandledrejection">unhandledrejection and rejectionhandled events.

+
+

When the user agent is to notify about rejected promises on a given environment settings object settings object, it must run these steps:

@@ -89111,11 +89156,11 @@ dictionary PromiseRejectionEventInit : EventInit { -
+

Event loops

-
Definitions
+
Definitions

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as @@ -89141,6 +89186,8 @@ dictionary PromiseRejectionEventInit : EventInit { event loop, and the worker processing model manages the event loop's lifetime.

+
+

An event loop has one or more task queues. A @@ -89942,8 +89989,10 @@ dictionary PromiseRejectionEventInit : EventInit { specified. These act as non-capture event listeners for the object on which they are specified.

+
+

An event handler is a struct with two items: + data-x="struct item">items:

  • a value, which is either nullPromiseRejectionEventInit : EventInit { set to null.

+
+

Event handlers are exposed in two ways.

The first way, common to all event handlers, is as an