es-module-shims 1.8.2 → 1.8.3

package/README.md

@@ -12,6 +12,7 @@ The following modules features are polyfilled:
 * Dynamic `import()` shimming when necessary in eg older Firefox versions.
 * `import.meta` and `import.meta.url`.
 * [JSON](#json-modules) and [CSS modules](#css-modules) with import assertions (when enabled).
+* [Wasm modules](#wasm-modules) when enabled.
 * [`<link rel="modulepreload">` is shimmed](#modulepreload) in browsers without import maps support.
 
 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.
@@ -29,7 +30,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@1.8.2/dist/es-module-shims.js"></script>
+<script async src="https://ga.jspm.io/npm:es-module-shims@1.8.3/dist/es-module-shims.js"></script>
 
 <!-- https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9Az0C1K1jMAAKFS5w0gAA -->
 <script type="importmap">
@@ -182,7 +183,7 @@ If using more modern features like CSS Modules or JSON Modules, these need to be
 
 ```html
 <script>
-window.esmsInitOptions = { polyfillEnable: ['css-modules', 'json-modules'] }
+window.esmsInitOptions = { polyfillEnable: ['css-modules', 'json-modules', 'wasm-modules'] }
 </script>
 ```
 
@@ -222,6 +223,7 @@ Browser Compatibility on baseline ES modules support **with** ES Module Shims:
 | [Import Maps](#import-maps)                     | :heavy_check_mark:                   | :heavy_check_mark:                   | :heavy_check_mark:                   |
 | [JSON Modules](#json-modules)                   | :heavy_check_mark:                   | :heavy_check_mark:                   | :heavy_check_mark:                   |
 | [CSS Modules](#css-modules)                     | :heavy_check_mark:<sup>1</sup>       | :heavy_check_mark:<sup>1</sup>       | :heavy_check_mark:<sup>1</sup>       |
+| [Wasm Modules](#wasm-modules)                   | 89+                                  | 89+                                  | 15+                                  |
 | [import.meta.resolve](#resolve)                 | :heavy_check_mark:                   | :heavy_check_mark:                   | :heavy_check_mark:                   |
 | [Module Workers](#module-workers) (via wrapper) | 63+                                  | :x:<sup>2</sup>                      | 15+                                  |
 | Top-Level Await (unpolyfilled<sup>3</sup>)      | 89+                                  | 89+                                  | 15+                                  |
@@ -240,6 +242,7 @@ Browser compatibility **without** ES Module Shims:
 | [Import Maps](#import-maps)        | 89+                | 108+               | 16.4+              |
 | [JSON Modules](#json-modules)      | 91+                | :x:                | :x:                |
 | [CSS Modules](#css-modules)        | 95+                | :x:                | :x:                |
+| [Wasm Modules](#wasm-modules)      | :x:                | :x:                | :x:                |
 | [import.meta.resolve](#resolve)    | :x:                | :x:                | :x:                |
 | [Module Workers](#module-workers)  | ~68+               | :x:                | :x:                |
 | Top-Level Await                    | 89+                | 89+                | 15+                |
@@ -436,6 +439,26 @@ In addition CSS modules need to be served with a valid CSS content type.
 
 Checks for assertion failures are not currently included.
 
+### Wasm Modules
+
+> Stability: WebAssembly Standard, Unimplemented
+
+Implements the [WebAssembly ESM Integration](https://github.com/WebAssembly/esm-integration) spec (source phase imports omitted currently, tracking in https://github.com/guybedford/es-module-shims/issues/410).
+
+In shim mode, Wasm modules are always supported. In polyfill mode, Wasm modules require the `polyfillEnable: ['wasm-modules']` [init option](#polyfill-enable-option).
+
+WebAssembly module exports are made available as module exports and WebAssembly module imports will be resolved using the browser module loader.
+
+WebAssembly modules require native top-level await support to be polyfilled, see the [compatibility table](#browser-support) above.
+
+```html
+<script type="module">
+import { fn } from './app.wasm';
+</script>
+```
+
+If using CSP, make sure to add `'unsafe-wasm-eval'` to `script-src` which is needed when the shim or polyfill engages, note this policy is much much safer than eval due to the Wasm secure sandbox. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_webassembly_execution.
+
 ### Resolve
 
 > Stability: Draft HTML PR

package/dist/es-module-shims.debug.js

@@ -1,4 +1,4 @@
-/* ES Module Shims DEBUG BUILD 1.8.2 */
+/* ES Module Shims DEBUG BUILD 1.8.3 */
 (function () {
 
   const hasWindow = typeof window !== 'undefined';
@@ -41,6 +41,7 @@
   const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
   const cssModulesEnabled = enable.includes('css-modules');
   const jsonModulesEnabled = enable.includes('json-modules');
+  const wasmModulesEnabled = enable.includes('wasm-modules');
 
   const edge = !navigator.userAgentData && !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
 
@@ -314,20 +315,22 @@
 
   let supportsImportMaps = supports && supports.name === 'supports' && supports('importmap');
   let supportsImportMeta = supportsDynamicImport;
+  let supportsWasmModules = false;
 
   const importMetaCheck = 'import.meta';
-  const cssModulesCheck = `import"x"assert{type:"css"}`;
-  const jsonModulesCheck = `import"x"assert{type:"json"}`;
+  const moduleCheck = 'import"x"';
+  const cssModulesCheck = `assert{type:"css"}`;
+  const jsonModulesCheck = `assert{type:"json"}`;
 
   let featureDetectionPromise = Promise.resolve(dynamicImportCheck).then(() => {
     if (!supportsDynamicImport)
       return;
-
     if (!hasDocument)
       return Promise.all([
         supportsImportMaps || dynamicImport(createBlob(importMetaCheck)).then(() => supportsImportMeta = true, noop),
-        cssModulesEnabled && dynamicImport(createBlob(cssModulesCheck.replace('x', createBlob('', 'text/css')))).then(() => supportsCssAssertions = true, noop),
-        jsonModulesEnabled && dynamicImport(createBlob(jsonModulescheck.replace('x', createBlob('{}', 'text/json')))).then(() => supportsJsonAssertions = true, noop),
+        cssModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob('', 'text/css')) + cssModulesCheck)).then(() => supportsCssAssertions = true, noop),
+        jsonModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob('{}', 'text/json')) + jsonModulesCheck)).then(() => supportsJsonAssertions = true, noop),
+        wasmModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob(new Uint8Array([0,97,115,109,1,0,0,0]), 'application/wasm')))).then(() => supportsWasmModules = true, noop),
       ]);
 
     return new Promise(resolve => {
@@ -481,7 +484,7 @@
   let baselinePassthrough;
 
   const initPromise = featureDetectionPromise.then(() => {
-    baselinePassthrough = esmsInitOptions.polyfillEnable !== true && supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy;
+    baselinePassthrough = esmsInitOptions.polyfillEnable !== true && supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && (!wasmModulesEnabled || supportsWasmModules) && !importMapSrcOrLazy;
     console.info(`es-module-shims: init ${shimMode ? 'shim mode' : 'polyfill mode'}, ${baselinePassthrough ? 'baseline passthrough' : 'polyfill engaged'}`);
     if (hasDocument) {
       if (!supportsImportMaps) {
@@ -769,8 +772,7 @@
       i = 0;
       s += `const instance = await WebAssembly.instantiate(importShim._w['${url}'], {${importObj}});\n`;
       for (const expt of WebAssembly.Module.exports(module)) {
-        s += `const expt${i} = instance['${expt.name}'];\n`;
-        s += `export { expt${i++} as "${expt.name}" };\n`;
+        s += `export const ${expt.name} = instance.exports['${expt.name}'];\n`;
       }
       return { r: res.url, s, t: 'wasm' };
     }
@@ -829,9 +831,9 @@
         let t;
         ({ r: load.r, s: source, t } = await (fetchCache[url] || fetchModule(url, fetchOpts, parent)));
         if (t && !shimMode) {
-          if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
+          if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled || t === 'wasm' && !wasmModulesEnabled)
             throw Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
-          if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions)
+          if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions || t === 'wasm' && !supportsWasmModules)
             load.n = true;
         }
       }
@@ -884,6 +886,8 @@
       fetchOpts.integrity = script.integrity;
     if (script.referrerPolicy)
       fetchOpts.referrerPolicy = script.referrerPolicy;
+    if (script.fetchPriority)
+      fetchOpts.priority = script.fetchPriority;
     if (script.crossOrigin === 'use-credentials')
       fetchOpts.credentials = 'include';
     else if (script.crossOrigin === 'anonymous')

package/dist/es-module-shims.js

@@ -1,4 +1,4 @@
-/* ES Module Shims 1.8.2 */
+/* ES Module Shims 1.8.3 */
 (function () {
 
   const hasWindow = typeof window !== 'undefined';
@@ -41,6 +41,7 @@
   const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
   const cssModulesEnabled = enable.includes('css-modules');
   const jsonModulesEnabled = enable.includes('json-modules');
+  const wasmModulesEnabled = enable.includes('wasm-modules');
 
   const edge = !navigator.userAgentData && !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
 
@@ -314,20 +315,22 @@
 
   let supportsImportMaps = supports && supports.name === 'supports' && supports('importmap');
   let supportsImportMeta = supportsDynamicImport;
+  let supportsWasmModules = false;
 
   const importMetaCheck = 'import.meta';
-  const cssModulesCheck = `import"x"assert{type:"css"}`;
-  const jsonModulesCheck = `import"x"assert{type:"json"}`;
+  const moduleCheck = 'import"x"';
+  const cssModulesCheck = `assert{type:"css"}`;
+  const jsonModulesCheck = `assert{type:"json"}`;
 
   let featureDetectionPromise = Promise.resolve(dynamicImportCheck).then(() => {
     if (!supportsDynamicImport)
       return;
-
     if (!hasDocument)
       return Promise.all([
         supportsImportMaps || dynamicImport(createBlob(importMetaCheck)).then(() => supportsImportMeta = true, noop),
-        cssModulesEnabled && dynamicImport(createBlob(cssModulesCheck.replace('x', createBlob('', 'text/css')))).then(() => supportsCssAssertions = true, noop),
-        jsonModulesEnabled && dynamicImport(createBlob(jsonModulescheck.replace('x', createBlob('{}', 'text/json')))).then(() => supportsJsonAssertions = true, noop),
+        cssModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob('', 'text/css')) + cssModulesCheck)).then(() => supportsCssAssertions = true, noop),
+        jsonModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob('{}', 'text/json')) + jsonModulesCheck)).then(() => supportsJsonAssertions = true, noop),
+        wasmModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob(new Uint8Array([0,97,115,109,1,0,0,0]), 'application/wasm')))).then(() => supportsWasmModules = true, noop),
       ]);
 
     return new Promise(resolve => {
@@ -476,7 +479,7 @@
   let baselinePassthrough;
 
   const initPromise = featureDetectionPromise.then(() => {
-    baselinePassthrough = esmsInitOptions.polyfillEnable !== true && supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy;
+    baselinePassthrough = esmsInitOptions.polyfillEnable !== true && supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && (!wasmModulesEnabled || supportsWasmModules) && !importMapSrcOrLazy;
     if (hasDocument) {
       if (!supportsImportMaps) {
         const supports = HTMLScriptElement.supports || (type => type === 'classic' || type === 'module');
@@ -762,8 +765,7 @@
       i = 0;
       s += `const instance = await WebAssembly.instantiate(importShim._w['${url}'], {${importObj}});\n`;
       for (const expt of WebAssembly.Module.exports(module)) {
-        s += `const expt${i} = instance['${expt.name}'];\n`;
-        s += `export { expt${i++} as "${expt.name}" };\n`;
+        s += `export const ${expt.name} = instance.exports['${expt.name}'];\n`;
       }
       return { r: res.url, s, t: 'wasm' };
     }
@@ -822,9 +824,9 @@
         let t;
         ({ r: load.r, s: source, t } = await (fetchCache[url] || fetchModule(url, fetchOpts, parent)));
         if (t && !shimMode) {
-          if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
+          if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled || t === 'wasm' && !wasmModulesEnabled)
             throw Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
-          if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions)
+          if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions || t === 'wasm' && !supportsWasmModules)
             load.n = true;
         }
       }
@@ -876,6 +878,8 @@
       fetchOpts.integrity = script.integrity;
     if (script.referrerPolicy)
       fetchOpts.referrerPolicy = script.referrerPolicy;
+    if (script.fetchPriority)
+      fetchOpts.priority = script.fetchPriority;
     if (script.crossOrigin === 'use-credentials')
       fetchOpts.credentials = 'include';
     else if (script.crossOrigin === 'anonymous')

package/dist/es-module-shims.wasm.js

@@ -1,4 +1,4 @@
-/* ES Module Shims Wasm 1.8.2 */
+/* ES Module Shims Wasm 1.8.3 */
 (function () {
 
   const hasWindow = typeof window !== 'undefined';
@@ -41,6 +41,7 @@
   const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
   const cssModulesEnabled = enable.includes('css-modules');
   const jsonModulesEnabled = enable.includes('json-modules');
+  const wasmModulesEnabled = enable.includes('wasm-modules');
 
   const edge = !navigator.userAgentData && !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
 
@@ -314,20 +315,22 @@
 
   let supportsImportMaps = supports && supports.name === 'supports' && supports('importmap');
   let supportsImportMeta = supportsDynamicImport;
+  let supportsWasmModules = false;
 
   const importMetaCheck = 'import.meta';
-  const cssModulesCheck = `import"x"assert{type:"css"}`;
-  const jsonModulesCheck = `import"x"assert{type:"json"}`;
+  const moduleCheck = 'import"x"';
+  const cssModulesCheck = `assert{type:"css"}`;
+  const jsonModulesCheck = `assert{type:"json"}`;
 
   let featureDetectionPromise = Promise.resolve(dynamicImportCheck).then(() => {
     if (!supportsDynamicImport)
       return;
-
     if (!hasDocument)
       return Promise.all([
         supportsImportMaps || dynamicImport(createBlob(importMetaCheck)).then(() => supportsImportMeta = true, noop),
-        cssModulesEnabled && dynamicImport(createBlob(cssModulesCheck.replace('x', createBlob('', 'text/css')))).then(() => supportsCssAssertions = true, noop),
-        jsonModulesEnabled && dynamicImport(createBlob(jsonModulescheck.replace('x', createBlob('{}', 'text/json')))).then(() => supportsJsonAssertions = true, noop),
+        cssModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob('', 'text/css')) + cssModulesCheck)).then(() => supportsCssAssertions = true, noop),
+        jsonModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob('{}', 'text/json')) + jsonModulesCheck)).then(() => supportsJsonAssertions = true, noop),
+        wasmModulesEnabled && dynamicImport(createBlob(moduleCheck.replace('x', createBlob(new Uint8Array([0,97,115,109,1,0,0,0]), 'application/wasm')))).then(() => supportsWasmModules = true, noop),
       ]);
 
     return new Promise(resolve => {
@@ -476,7 +479,7 @@
   let baselinePassthrough;
 
   const initPromise = featureDetectionPromise.then(() => {
-    baselinePassthrough = esmsInitOptions.polyfillEnable !== true && supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy;
+    baselinePassthrough = esmsInitOptions.polyfillEnable !== true && supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && (!wasmModulesEnabled || supportsWasmModules) && !importMapSrcOrLazy;
     if (hasDocument) {
       if (!supportsImportMaps) {
         const supports = HTMLScriptElement.supports || (type => type === 'classic' || type === 'module');
@@ -762,8 +765,7 @@
       i = 0;
       s += `const instance = await WebAssembly.instantiate(importShim._w['${url}'], {${importObj}});\n`;
       for (const expt of WebAssembly.Module.exports(module)) {
-        s += `const expt${i} = instance['${expt.name}'];\n`;
-        s += `export { expt${i++} as "${expt.name}" };\n`;
+        s += `export const ${expt.name} = instance.exports['${expt.name}'];\n`;
       }
       return { r: res.url, s, t: 'wasm' };
     }
@@ -822,9 +824,9 @@
         let t;
         ({ r: load.r, s: source, t } = await (fetchCache[url] || fetchModule(url, fetchOpts, parent)));
         if (t && !shimMode) {
-          if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
+          if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled || t === 'wasm' && !wasmModulesEnabled)
             throw Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
-          if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions)
+          if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions || t === 'wasm' && !supportsWasmModules)
             load.n = true;
         }
       }
@@ -876,6 +878,8 @@
       fetchOpts.integrity = script.integrity;
     if (script.referrerPolicy)
       fetchOpts.referrerPolicy = script.referrerPolicy;
+    if (script.fetchPriority)
+      fetchOpts.priority = script.fetchPriority;
     if (script.crossOrigin === 'use-credentials')
       fetchOpts.credentials = 'include';
     else if (script.crossOrigin === 'anonymous')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-module-shims",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Shims for the latest ES module features",
   "main": "dist/es-module-shims.js",
   "exports": {