es-module-shims 2.5.1 → 2.6.1

package/README.md

@@ -14,6 +14,7 @@ The following modules features are polyfilled:
 * [Import defer](#import-defer) via syntax stripping to allow usage in modern browsers with a polyfill fallback, when enabled.
 * [TypeScript](#typescript-type-stripping) type stripping.
 * [Hot Reloading](#hot-reloading) with a Vite-style `import.meta.hot` API.
+* [Loader Hooks](#hooks) custom loader hooks for customizing module resolution and sources, including support for [virtual module sources](#source-hook).
 
 When running in shim mode, module rewriting is applied for all users and custom [resolve](#resolve-hook) and [fetch](#fetch-hook) hooks can be implemented allowing for custom resolution and streaming in-browser transform workflows.
 
@@ -30,7 +31,7 @@ Because we are still using the native module loader the edge cases work out comp
 Include ES Module Shims with a `async` attribute on the script, then include an import map and module scripts normally:
 
 ```html
-<script async src="https://ga.jspm.io/npm:es-module-shims@2.5.1/dist/es-module-shims.js"></script>
+<script async src="https://ga.jspm.io/npm:es-module-shims@2.6.1/dist/es-module-shims.js"></script>
 
 <!-- https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9Az0C1K1jMAAKFS5w0gAA -->
 <script type="importmap">
@@ -215,7 +216,7 @@ Shim mode is an alternative to polyfill mode and doesn't rely on native modules
 
 In shim mode, only the above `importmap-shim` and `module-shim` tags will be parsed and executed by ES Module Shims.
 
-Shim mode also provides some additional features that aren't yet natively supported such as supporting multiple import maps, [external import maps](#external-import-maps) with a `"src"` attribute, [dynamically injecting import maps](#dynamic-import-maps), and [reading current import map state](#reading-current-import-map-state), which can be useful in certain applications.
+Shim mode also provides some additional features that aren't yet natively supported such as [external import maps](#external-import-maps) with a `"src"` attribute and [reading current import map state](#reading-current-import-map-state), which can be useful in certain applications.
 
 ## Benchmarks
 
@@ -231,7 +232,7 @@ Benchmark summary:
 
 ### Browser Support
 
-Works in all browsers with [baseline ES module support](https://caniuse.com/#feat=es6-module).
+Works in all browsers with [ES module dynamic import support](https://caniuse.com/es6-module-dynamic-import).
 
 Browser Compatibility on baseline ES modules support **with** ES Module Shims:
 
@@ -252,8 +253,8 @@ Browser compatibility **without** ES Module Shims:
 | --------------------------------------------- | ------------------ | ------------------ | ------------------ |
 | [modulepreload](#modulepreload)               | 66+                | 115+               | 17.5+              |
 | [Import Maps](#import-maps)                   | 89+                | 108+               | 16.4+              |
-| [Import Map Integrity](#import-map-integrity) | 127+               | :x:                | :x:                |
-| [Multiple Import Maps](#multiple-import-maps) | 135+               | :x:                | :x:                |
+| [Import Map Integrity](#import-map-integrity) | 127+               | 138+               | 18+                |
+| [Multiple Import Maps](#multiple-import-maps) | 135+               | :x:                | 18.4+              |
 | [JSON Modules](#json-modules)                 | 123+               | :x:                | 17.2+              |
 | [CSS Modules](#css-modules)                   | 123+               | :x:                | :x:                |
 | [Wasm Modules](#wasm-modules)                 | Pending            | :x:                | :x:                |
@@ -686,7 +687,8 @@ const worker = new Worker(getWorkerScriptURL('myEsModule.js'));
 
 Provide a `esmsInitOptions` on the global scope before `es-module-shims` is loaded to configure various aspects of the module loading process:
 
-* [polyfillEnable](#polyfill-enable)
+* [polyfillEnable](#polyfill-enable-option)
+* [polyfillDisable](#polyfill-disable-option)
 * [enforceIntegrity](#enforce-integrity)
 * [fetch](#fetch-hook)
 * [mapOverrides](#overriding-import-map-entries)
@@ -697,7 +699,7 @@ Provide a `esmsInitOptions` on the global scope before `es-module-shims` is load
 * [onerror](#error-hook)
 * [onpolyfill](#polyfill-hook)
 * [resolve](#resolve-hook)
-* [revokeBlobURLs](#revoke-blob-urls)
+* [source](#source-hook)
 * [shimMode](#shim-mode-option)
 * [skip](#skip)
 * [version](#version)
@@ -709,14 +711,14 @@ window.esmsInitOptions = {
   shimMode: true, // default false
   // Enable newer modules features
   polyfillEnable: ['wasm-module-sources'], // default empty
+  // Disable features that are unused
+  polyfillDisable: ['css-modules'], // default empty
   // Custom CSP nonce
   nonce: 'n0nce', // default is automatic detection
   // Don't retrigger load events on module scripts (DOMContentLoaded, domready, window 'onload')
   noLoadEventRetriggers: true, // default false
   // Skip source analysis of certain URLs for full native passthrough
   skip: /^https:\/\/cdn\.com/, // defaults to null
-  // Clean up blob URLs after execution
-  revokeBlobURLs: true, // default false
   // Secure mode to not support loading modules without integrity
   // (integrity is always verified even when disabled though)
   enforceIntegrity: true, // default false
@@ -733,6 +735,8 @@ window.esmsInitOptions = {
   onpolyfill: () => {}, // default logs to the console
   // Hook all module resolutions
   resolve: (id, parentUrl, resolve) => resolve(id, parentUrl), // default is spec resolution
+  // Hook module source loading
+  source: (url, options, parentUrl, defaultSourceHook) => ({ type: 'js', source: 'export var p = 5' }),
   // Hook source fetch function
   fetch: (url, options) => fetch(url, options), // default is native
   // Hook import.meta construction
@@ -793,15 +797,27 @@ In adddition, the `"all"` option will enable all features.
 </script>
 ```
 
-The above is necessary to enable CSS modules and JSON modules alongside TypeScript type stripping support.
+The reason the `polyfillEnable` option is needed is because ES Module Shims implements a performance optimization where if a browser supports modern modules features to an expected baseline of import maps support, it will skip all polyfill source analysis resulting in full native passthrough performance.
 
-#### Baseline Support Analysis Opt-Out
+### Pollyfill Disable Option
 
-The reason the `polyfillEnable` option is needed is because ES Module Shims implements a performance optimization where if a browser supports modern modules features to an expected baseline of import maps support, it will skip all polyfill source analysis resulting in full native passthrough performance.
+Conversely to `polyfillEnable` it can be beneficial to dissable unused features where excluding those features from the baseline allows avoiding unnecessary feature detections or unnecessary analysis of module graphs.
+
+This option effectively lowers the baseline support allowing wider passthrough cases.
 
-If the application code then tries to use modern features like CSS modules beyond this baseline it won't support those features. As a result all modules features which are considered newer or beyond the recommended baseline require explicit enabling. This common baseline itself will change to track the common future modules baseline supported by this project for each release cycle.
+The supported options currently are just `css-modules` and `json-modules`.
+
+For example:
+
+```html
+<script type="esms-options">
+{
+  "polyfillDisable": ["css-modules", "json-modules"]
+}
+</script>
+```
 
-This option can also be set to `true` to entirely disable the native passthrough system and ensure all sources are fetched and analyzed through ES Module Shims. This will still avoid duplicate execution since module graphs are still only reexecuted when they use unsupported native features, but there is a small extra cost in doing the analysis.
+will disable the CSS and JSON feature detections, and lower the baseline passthrough modules support from Chrome 123, Firefox 138 and Safari 17.2 down to Chrome 64, Safari 11.1 and Firefox 67.
 
 ### Enforce Integrity
 
@@ -988,6 +1004,8 @@ Overriding this hook with an empty function will disable the default polyfill lo
 
 In the above, running in latest Chromium browsers, nothing will be logged, while running in an older browser that does not support newer features like import maps the console log will be output.
 
+> As this hook does not affect execution, it is recommended for use in polyfill mode.
+
 #### Error hook
 
 You can provide a function to handle errors during the module loading process by providing an `onerror` option:
@@ -1001,6 +1019,8 @@ You can provide a function to handle errors during the module loading process by
 <script async src="es-module-shims.js"></script>
 ```
 
+> As this hook does not affect execution, it is recommended for use in polyfill mode.
+
 #### Import Hook
 
 The import hook is supported for both shim and polyfill modes and provides an async hook which can ensure any necessary work is done before a top-level module import or dynamic `import()` starts further processing.
@@ -1018,15 +1038,12 @@ The import hook is supported for both shim and polyfill modes and provides an as
 </script>
 ```
 
+> It is usually recommended to use shim mode with module customization hooks. When the resolve hook is enabled in polyfill mode (or any other hooks), native passthrough will be disabled and modules may be executed twice if they correctly execute without the hook.
+
 #### Resolve Hook
 
 The resolve hook is supported for both shim and polyfill modes and allows full customization of the resolver, while still having access to the original resolve function.
 
-Note that in polyfill mode the resolve hook may not be called for all modules when native passthrough is occurring and that it still will not affect
-the native passthrough executions.
-
-If the resolve hook should apply for all modules in the entire module graph, make sure to set `polyfillEnable: true` to [disable the baseline support analysis opt-out](#baseline-support-analysis-opt-out).
-
 ```js
 <script>
   window.esmsInitOptions = {
@@ -1042,6 +1059,59 @@ If the resolve hook should apply for all modules in the entire module graph, mak
 </script>
 ```
 
+> It is usually recommended to use shim mode with module customization hooks. When the resolve hook is enabled in polyfill mode (or any other hooks), native passthrough will be disabled and modules may be executed twice if they correctly execute without the hook.
+
+#### Source Hook
+
+The source hook used to obtain the module source for a given URL, allowing for the implementation
+of virtual module sources.
+
+Note that only valid fetch scheme URLs are supported - `http:` / `https:` / `data:` / `blob:` / `file:`.
+`https:` or `file:` is therefore recommended for virtual module paths.
+
+For example:
+
+```html
+<script>
+const virtualFs = {
+  'index.js': `import './src/dep.js';`,
+  'src/dep.js': 'console.log("virtual source execution!")'
+};
+esmsInitOptions = {
+  source (url, fetchOpts, parent, defaultSourceHook) {
+    // Only virtualize sources under the URL file:///virtual-pkg/ (i.e. via
+    // `import 'file:///virtual-pkg/index.js'`.
+    if (!url.startsWith('file:///virtual-pkg/')) return defaultSourceHook(url, fetchOpts, parent);
+
+    // Strip the query string prefix for hot reloading workflow support
+    const versionQueryParam = url.match(/\?v=\d+$/);
+    if (versionQueryParam) url = url.slice(0, -versionQueryParam[0].length);
+
+    // Lookup the virtual source from the virtual filesystem and return if found
+    const virtualSource = virtualFs[url.slice('file:///virtual-pkg/'.length)];
+    if (!virtualSource) throw new Error(`Virtual module ${url} not found, imported from ${parent}`);
+    return {
+      type: 'js',
+      source: virtualSource
+    };
+  }
+};
+</script>
+```
+
+For support in hot reloading workflows, note that the ?v={Number} version query
+string suffix will be passed so needs to be checked and removed if applicable.
+
+For JS, CSS, JSON and TypeScript, it provides the source text string.
+For WebAssembly, it provides the compiled WebAssembly.Module record.
+
+The default implementation uses globalThis.fetch to obtain the response and then
+the 'content-type' MIME type header to infer the module type, per HTML semantics.
+
+URL may be returned differently from the request URL because responseURL
+is allowed to be distinct from requestURL in the module system even thoough
+requestURL is used as the registry key only.
+
 #### Meta Hook
 
 The meta hook allows customizing the `import.meta` object in each module scope.
@@ -1068,6 +1138,8 @@ import assert from 'assert';
 assert.ok(import.meta.custom.startsWith('custom value'));
 ```
 
+> It is usually recommended to use shim mode with module customization hooks. When the resolve hook is enabled in polyfill mode (or any other hooks), native passthrough will be disabled and modules may be executed twice if they correctly execute without the hook.
+
 #### Fetch Hook
 
 The fetch hook is supported for shim mode only.
@@ -1125,6 +1197,8 @@ window.esmsInitOptions = {
 }
 ```
 
+> It is usually recommended to use shim mode with module customization hooks. When the resolve hook is enabled in polyfill mode (or any other hooks), native passthrough will be disabled and modules may be executed twice if they correctly execute without the hook.
+
 ## Implementation Details
 
 ### Import Rewriting