From 913dee3a1c0f60af8c630bf9809c86412527e5cd Mon Sep 17 00:00:00 2001
From: Guy Bedford <guybedford@gmail.com>
Date: Sun, 18 Feb 2024 20:40:37 -0800
Subject: [PATCH] add wasm esm integration polyfill (#408)

---
 README.md                    |  25 ++++++++++++++++++++++++-
 src/env.js                   |   1 +
 src/es-module-shims.js       |  11 ++++++-----
 src/features.js              |  14 ++++++++------
 test/fixtures/test.wasm      | Bin 0 -> 56 bytes
 test/fixtures/wasm-import.js |   2 ++
 test/polyfill.js             |  24 +++++++++++++++++++++---
 test/test-csp.html           |   6 ++----
 test/test-polyfill-wasm.html |   4 +---
 test/test-polyfill.html      |   4 +---
 10 files changed, 66 insertions(+), 25 deletions(-)
 create mode 100644 test/fixtures/test.wasm
 create mode 100644 test/fixtures/wasm-import.js

diff --git a/README.md b/README.md
index aeffd95a..eccc2000 100644
--- a/README.md
+++ b/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.
@@ -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
diff --git a/src/env.js b/src/env.js
index 4110623d..3717f0ea 100644
--- a/src/env.js
+++ b/src/env.js
@@ -38,6 +38,7 @@ function globalHook (name) {
 const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
 export const cssModulesEnabled = enable.includes('css-modules');
 export const jsonModulesEnabled = enable.includes('json-modules');
+export const wasmModulesEnabled = enable.includes('wasm-modules');
 
 export const edge = !navigator.userAgentData && !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
 
diff --git a/src/es-module-shims.js b/src/es-module-shims.js
index b4ce8b98..2127b49c 100755
--- a/src/es-module-shims.js
+++ b/src/es-module-shims.js
@@ -20,6 +20,7 @@ import {
   noLoadEventRetriggers,
   cssModulesEnabled,
   jsonModulesEnabled,
+  wasmModulesEnabled,
   onpolyfill,
   enforceIntegrity,
   fromParent,
@@ -34,6 +35,7 @@ import {
   supportsImportMaps,
   supportsCssAssertions,
   supportsJsonAssertions,
+  supportsWasmModules,
   featureDetectionPromise,
 } from './features.js';
 import * as lexer from '../node_modules/es-module-lexer/dist/lexer.asm.js';
@@ -121,7 +123,7 @@ let importMap = { imports: {}, scopes: {} };
 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 (self.ESMS_DEBUG) console.info(`es-module-shims: init ${shimMode ? 'shim mode' : 'polyfill mode'}, ${baselinePassthrough ? 'baseline passthrough' : 'polyfill engaged'}`);
   if (hasDocument) {
     if (!supportsImportMaps) {
@@ -409,8 +411,7 @@ async function fetchModule (url, fetchOpts, parent) {
     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' };
   }
@@ -469,9 +470,9 @@ function getOrCreateLoad (url, fetchOpts, parent, source) {
       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;
       }
     }
diff --git a/src/features.js b/src/features.js
index 277c0f3c..1e0cadbf 100644
--- a/src/features.js
+++ b/src/features.js
@@ -1,5 +1,5 @@
 import { dynamicImport, supportsDynamicImport, dynamicImportCheck } from './dynamic-import.js';
-import { createBlob, noop, nonce, cssModulesEnabled, jsonModulesEnabled, hasDocument } from './env.js';
+import { createBlob, noop, nonce, cssModulesEnabled, jsonModulesEnabled, wasmModulesEnabled, hasDocument } from './env.js';
 
 // support browsers without dynamic import support (eg Firefox 6x)
 export let supportsJsonAssertions = false;
@@ -9,20 +9,22 @@ const supports = hasDocument && HTMLScriptElement.supports;
 
 export let supportsImportMaps = supports && supports.name === 'supports' && supports('importmap');
 export let supportsImportMeta = supportsDynamicImport;
+export 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"}`;
 
 export 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 => {
diff --git a/test/fixtures/test.wasm b/test/fixtures/test.wasm
new file mode 100644
index 0000000000000000000000000000000000000000..e8ceef8252a70b8e768bfc559513c30979468ed8
GIT binary patch
literal 56
zcmZQbEY4+QU|?WmXG~zKuV<`hW@2Pu=VD|_Oi2kT&u3uZ;$&oJP+(AC%;IL?V#!O)
KO=V&RY5)NC<OnkW

literal 0
HcmV?d00001

diff --git a/test/fixtures/wasm-import.js b/test/fixtures/wasm-import.js
new file mode 100644
index 00000000..50c44b71
--- /dev/null
+++ b/test/fixtures/wasm-import.js
@@ -0,0 +1,2 @@
+import { addTwo } from './test.wasm';
+export { addTwo as add }
\ No newline at end of file
diff --git a/test/polyfill.js b/test/polyfill.js
index fca75e43..808169aa 100644
--- a/test/polyfill.js
+++ b/test/polyfill.js
@@ -1,3 +1,14 @@
+const supportsTlaPromise = (async () => {
+  let supportsTla = false;
+  try {
+    await import('data:text/javascript,await 0');
+    supportsTla = true;
+  } catch (e) {
+    console.log(e);
+  }
+  return supportsTla;
+})();
+
 suite('Polyfill tests', () => {
   test('should support dynamic import with an import map', async function () {
     const p = new Promise(resolve => window.done = resolve);
@@ -21,7 +32,7 @@ suite('Polyfill tests', () => {
     throw new Error('Should fail');
   });
 
-  test.skip('should support json imports', async function () {
+  test('should support json imports', async function () {
     const { m } = await importShim('./fixtures/json-assertion.js');
     assert.equal(m, 'module');
   });
@@ -36,6 +47,13 @@ suite('Polyfill tests', () => {
     assert.equal(Boolean(window.dynamic && window.dynamicUrlMap), false);
   });
 
+  test('should support wasm imports', async function () {
+    const supportsTla = await supportsTlaPromise;
+    if (!supportsTla) return;
+    const { add } = await importShim('./fixtures/wasm-import.js');
+    assert.equal(typeof add, 'function');
+  });
+
   test('import maps passthrough polyfill mode', async function () {
     await importShim('test');
   });
@@ -52,7 +70,7 @@ suite('Polyfill tests', () => {
     assert.equal(window.cnt, 1);
   });
 
-  test('DOMContentLoaded fires only once', async function () {
-    assert.equal(window.domLoad, 1);
+  test('DOMContentLoaded fires at least once', async function () {
+    assert.ok(window.domLoad === 1 || window.domLoad === 2);
   });
 });
diff --git a/test/test-csp.html b/test/test-csp.html
index c78f2065..38386ab0 100644
--- a/test/test-csp.html
+++ b/test/test-csp.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-asdf' unpkg.com;" />
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-asdf' 'unsafe-eval' unpkg.com;" />
 <link rel="stylesheet" type="text/css" href="../node_modules/mocha/mocha.css"/>
 <script src="../node_modules/mocha/mocha.js"></script>
 <script src="https://unpkg.com/construct-style-sheets-polyfill@3.0.0/dist/adoptedStyleSheets.js"></script>
@@ -27,9 +27,7 @@
 
 <script nonce="asdf">
   window.esmsInitOptions = {
-    onpolyfill () {
-      window.domLoad = 0;
-    }
+    polyfillEnable: ['css-modules', 'json-modules', 'wasm-modules']
   };
   window.domLoad = 0;
   document.addEventListener('DOMContentLoaded', () => {
diff --git a/test/test-polyfill-wasm.html b/test/test-polyfill-wasm.html
index c85ca73e..ae721371 100644
--- a/test/test-polyfill-wasm.html
+++ b/test/test-polyfill-wasm.html
@@ -25,9 +25,7 @@
 
 <script>
   window.esmsInitOptions = {
-    onpolyfill () {
-      window.domLoad = 0;
-    }
+    polyfillEnable: ['css-modules', 'json-modules', 'wasm-modules']
   };
   window.domLoad = 0;
   document.addEventListener('DOMContentLoaded', () => {
diff --git a/test/test-polyfill.html b/test/test-polyfill.html
index 1ca9d513..76ced7c9 100644
--- a/test/test-polyfill.html
+++ b/test/test-polyfill.html
@@ -28,9 +28,7 @@
 
 <script>
   window.esmsInitOptions = {
-    onpolyfill () {
-      window.domLoad = 0;
-    }
+    polyfillEnable: ['css-modules', 'json-modules', 'wasm-modules'],
   };
   window.domLoad = 0;
   document.addEventListener('DOMContentLoaded', () => {