From 3e50a51b7970a57650e699a89c9aab23073d3fd8 Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Tue, 21 Jan 2025 14:36:55 +0100 Subject: [PATCH 1/9] Cover multiple import maps --- .../html/element/script/type/importmap/index.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/html/element/script/type/importmap/index.md b/files/en-us/web/html/element/script/type/importmap/index.md index 9e6e536b92641fa..5a43b47408539be 100644 --- a/files/en-us/web/html/element/script/type/importmap/index.md +++ b/files/en-us/web/html/element/script/type/importmap/index.md @@ -28,8 +28,6 @@ For more information, see the [Importing modules using import maps](/en-US/docs/ The `src`, `async`, `nomodule`, `defer`, `crossorigin`, `integrity`, and `referrerpolicy` attributes must not be specified. -Only the first import map in the document with an inline definition is processed; any additional import maps and external import maps are ignored. - ### Exceptions - `TypeError` @@ -37,9 +35,6 @@ Only the first import map in the document with an inline definition is processed Browsers generate console warnings for other cases where the import map JSON does not conform to the [import map](#import_map_json_representation) schema. -An [`error` event](/en-US/docs/Web/API/HTMLElement/error_event) is fired at script elements with `type="importmap"` that are not processed. -This might occur, for example, if module loading has already started when an import map is processed, or if multiple import maps are defined in the page. - ## Description When importing a [JavaScript module](/en-US/docs/Web/JavaScript/Guide/Modules), both the [`import` statement](/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`import()` operator](/en-US/docs/Web/JavaScript/Reference/Operators/import) have a "module specifier" that indicates the module to be imported. @@ -213,6 +208,18 @@ The import map must be a valid JSON object that can define any of the optional k Note that the scope does not change how an address is resolved; relative addresses are always resolved to the import map base URL. +## Merging multiple import maps + + + +Internally, browsers maintain a single global import map representation. + +When an import map is registered, its contents are merged into the global import map. + +Module specifiers in the registered map that were already resolved before are dropped. Future resolution of these specifiers will provide the same results as their previous resolution. + +Module specifiers in the registered map that were already mapped to URLs in the global map are similarly dropped and their previous mapping prevails. + ## Specifications {{Specifications}} From f2a09d717ca96a14b7c7e80411f620bbdc7a595a Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Wed, 22 Jan 2025 11:28:45 +0100 Subject: [PATCH 2/9] Addressed some review comments --- .../element/script/type/importmap/index.md | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/html/element/script/type/importmap/index.md b/files/en-us/web/html/element/script/type/importmap/index.md index 5a43b47408539be..f83d9e1b83bcb51 100644 --- a/files/en-us/web/html/element/script/type/importmap/index.md +++ b/files/en-us/web/html/element/script/type/importmap/index.md @@ -164,6 +164,17 @@ For example, the map below defines integrity metadata for the `square.js` module ``` +### Merging multiple import maps + +Internally, browsers maintain a single global import map representation, and merge the contents of registered import maps into it. + +Module specifiers in each registered map that were already resolved before it was registered are dropped. Future resolution of these specifiers will provide the same results as their previous resolution. + +Similarly, module specifiers in a registered map that were already mapped to URLs in the global map are dropped and their previous mapping prevails. + +[!NOTE] +In non-supporting browsers (check the [compatibility data](#browser_compatibility)), a [polyfill](https://github.com/guybedford/es-module-shims) can be used to avoid issues related to module resolution. + ## Import map JSON representation The following is a "formal" definition of the import map JSON representation. @@ -208,18 +219,6 @@ The import map must be a valid JSON object that can define any of the optional k Note that the scope does not change how an address is resolved; relative addresses are always resolved to the import map base URL. -## Merging multiple import maps - - - -Internally, browsers maintain a single global import map representation. - -When an import map is registered, its contents are merged into the global import map. - -Module specifiers in the registered map that were already resolved before are dropped. Future resolution of these specifiers will provide the same results as their previous resolution. - -Module specifiers in the registered map that were already mapped to URLs in the global map are similarly dropped and their previous mapping prevails. - ## Specifications {{Specifications}} From 09642387e7d7ccb8310e28f5ec1ddb24616d5614 Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Thu, 23 Jan 2025 12:17:24 +0100 Subject: [PATCH 3/9] Added examples --- .../element/script/type/importmap/index.md | 113 +++++++++++++++++- 1 file changed, 110 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/html/element/script/type/importmap/index.md b/files/en-us/web/html/element/script/type/importmap/index.md index f83d9e1b83bcb51..75cec864d89c4ea 100644 --- a/files/en-us/web/html/element/script/type/importmap/index.md +++ b/files/en-us/web/html/element/script/type/importmap/index.md @@ -166,14 +166,121 @@ For example, the map below defines integrity metadata for the `square.js` module ### Merging multiple import maps -Internally, browsers maintain a single global import map representation, and merge the contents of registered import maps into it. +Internally, browsers maintain a single global import map representation. When multiple import maps are included in the Document, their contents are merged into the global import map when they are registered. + + +For example, the following two import maps: + +```html + +``` + +```html + +``` + +Would be equivalent to the following single import map: + +```html + +``` Module specifiers in each registered map that were already resolved before it was registered are dropped. Future resolution of these specifiers will provide the same results as their previous resolution. + +For example, if the module specifier "/app/helper.js" was already resolved, the following new import map: + +```html + +``` +Would be equivalent to the following one: + +```html + +``` + Similarly, module specifiers in a registered map that were already mapped to URLs in the global map are dropped and their previous mapping prevails. -[!NOTE] -In non-supporting browsers (check the [compatibility data](#browser_compatibility)), a [polyfill](https://github.com/guybedford/es-module-shims) can be used to avoid issues related to module resolution. +For example, the following two import maps: + +```html + +``` +```html + +``` +Would be equivalent to the following single import map: + +```html + +``` + +You can notice that the `/app/helper/` rule was dropped from the second map. + +> [!NOTE] +> In non-supporting browsers (check the [compatibility data](#browser_compatibility)), a [polyfill](https://github.com/guybedford/es-module-shims) can be used to avoid issues related to module resolution. ## Import map JSON representation From 4959a1527eb94e1c2b92fb9a8355d66df79dd555 Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Thu, 23 Jan 2025 12:23:22 +0100 Subject: [PATCH 4/9] Bot suggestions --- .../element/script/type/importmap/index.md | 91 ++++++++++--------- 1 file changed, 46 insertions(+), 45 deletions(-) diff --git a/files/en-us/web/html/element/script/type/importmap/index.md b/files/en-us/web/html/element/script/type/importmap/index.md index 75cec864d89c4ea..8ffa6861d03c6fd 100644 --- a/files/en-us/web/html/element/script/type/importmap/index.md +++ b/files/en-us/web/html/element/script/type/importmap/index.md @@ -168,31 +168,30 @@ For example, the map below defines integrity metadata for the `square.js` module Internally, browsers maintain a single global import map representation. When multiple import maps are included in the Document, their contents are merged into the global import map when they are registered. - For example, the following two import maps: ```html ``` ```html ``` @@ -200,17 +199,17 @@ Would be equivalent to the following single import map: ```html ``` @@ -221,59 +220,61 @@ For example, if the module specifier "/app/helper.js" was already resolved, the ```html ``` Would be equivalent to the following one: ```html ``` +You may notice that the `/app/helper.js` rule was ignored and not incorporated into the map. + Similarly, module specifiers in a registered map that were already mapped to URLs in the global map are dropped and their previous mapping prevails. For example, the following two import maps: ```html ``` ```html ``` Would be equivalent to the following single import map: ```html ``` From c6827a1d842bd5ac97477150c34f65cc96ec9416 Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Thu, 23 Jan 2025 12:25:34 +0100 Subject: [PATCH 5/9] more bot suggestions --- files/en-us/web/html/element/script/type/importmap/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/script/type/importmap/index.md b/files/en-us/web/html/element/script/type/importmap/index.md index 8ffa6861d03c6fd..13c21eabd7debcb 100644 --- a/files/en-us/web/html/element/script/type/importmap/index.md +++ b/files/en-us/web/html/element/script/type/importmap/index.md @@ -215,7 +215,6 @@ Would be equivalent to the following single import map: Module specifiers in each registered map that were already resolved before it was registered are dropped. Future resolution of these specifiers will provide the same results as their previous resolution. - For example, if the module specifier "/app/helper.js" was already resolved, the following new import map: ```html @@ -265,6 +264,7 @@ For example, the following two import maps: } ``` + Would be equivalent to the following single import map: ```html From 1f2ec70b16912c35960494af35e60fca39675cab Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Thu, 23 Jan 2025 12:27:56 +0100 Subject: [PATCH 6/9] even more bot suggestions --- .../en-us/web/html/element/script/type/importmap/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/html/element/script/type/importmap/index.md b/files/en-us/web/html/element/script/type/importmap/index.md index 13c21eabd7debcb..7bd3a3c969d17c6 100644 --- a/files/en-us/web/html/element/script/type/importmap/index.md +++ b/files/en-us/web/html/element/script/type/importmap/index.md @@ -220,13 +220,14 @@ For example, if the module specifier "/app/helper.js" was already resolved, the ```html ``` + Would be equivalent to the following one: ```html @@ -248,13 +249,14 @@ For example, the following two import maps: ```html ``` + ```html From c806ce352c2d897807911ff6d48661d5ee253ff5 Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Thu, 23 Jan 2025 12:32:32 +0100 Subject: [PATCH 7/9] prettier --- files/en-us/web/html/element/script/type/importmap/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/script/type/importmap/index.md b/files/en-us/web/html/element/script/type/importmap/index.md index 7bd3a3c969d17c6..270be817402bd26 100644 --- a/files/en-us/web/html/element/script/type/importmap/index.md +++ b/files/en-us/web/html/element/script/type/importmap/index.md @@ -173,7 +173,7 @@ For example, the following two import maps: ```html ``` -Would be equivalent to the following single import map: +These are equivalent to the following single import map: ```html ``` -Module specifiers in each registered map that were already resolved before it was registered are dropped. Future resolution of these specifiers will provide the same results as their previous resolution. +Module specifiers in each registered map that were already resolved beforehand are dropped. Subsequent resolutions of these specifiers will provide the same results as their previous resolutions. -For example, if the module specifier "/app/helper.js" was already resolved, the following new import map: +For example, if the module specifier `/app/helper.js` was already resolved, the following new import map: ```html ``` -Would be equivalent to the following one: +Would be equivalent to: ```html ``` -You may notice that the `/app/helper.js` rule was ignored and not incorporated into the map. +The `/app/helper.js` rule was ignored and not incorporated into the map. -Similarly, module specifiers in a registered map that were already mapped to URLs in the global map are dropped and their previous mapping prevails. +Similarly, module specifiers in a registered map that were already mapped to URLs in the global map are dropped; their previous mapping prevails. For example, the following two import maps: @@ -267,7 +267,7 @@ For example, the following two import maps: ``` -Would be equivalent to the following single import map: +Are equivalent to the following single import map: ```html ``` -You can notice that the `/app/helper/` rule was dropped from the second map. +The `/app/helper/` rule was dropped from the second map. > [!NOTE] > In non-supporting browsers (check the [compatibility data](#browser_compatibility)), a [polyfill](https://github.com/guybedford/es-module-shims) can be used to avoid issues related to module resolution.