es-module-shims 1.3.0 → 1.3.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+ES Module Shims 1.3.4 (2021/12/02)
+* Support source mapping normalization with trailing comments (https://github.com/guybedford/es-module-shims/pull/229)
+
+ES Module Shims 1.3.3 (2021/11/30))
+* Remove use of document.write (https://github.com/guybedford/es-module-shims/pull/227, @lewisl9029)
+
+ES Module Shims 1.3.2 (2021/11/16)
+* Fix CSP nonce detection (https://github.com/guybedford/es-module-shims/pull/223, @MathiasWP)
+
+ES Module Shims 1.3.1 (2021/11/04)
+* Feature: Support "async" attribute ordering on polyfill and shim scripts (https://github.com/guybedford/es-module-shims/pull/221)
+* Fix: Sourcemap regex fix (https://github.com/guybedford/es-module-shims/pull/218)
+* Fix: Polyfill duplicate instance bug (https://github.com/guybedford/es-module-shims/pull/220)
+
 ES Module Shims 1.3.0 (2021/10/14)
 * Feature: Shim mode function to get import map, dynamic map overrides now throw (https://github.com/guybedford/es-module-shims/pull/213, @lewisl9029)
 * Feature: Upgrade to es-module-lexer@0.9.3 with import / export strings support (https://github.com/guybedford/es-module-shims/pull/210)

package/README.md

@@ -47,8 +47,8 @@ ES Module Shims is designed for production performance. A [comprehensive benchma
 
 Benchmark summary:
 
-* [ES Module Shims Chrome Passthrough](bench/README.md#chrome-passthrough-performance) results in ~5ms extra initialization time over native for ES Module Shims fetching, execution and initialization, and on a slow connection the additional non-blocking bandwidth cost of its 10KB compressed download as expected.
-* [ES Module Shims Polyfilling](bench/README.md#native-v-polyfill-performance) is on average 1.4x - 1.5x slower than native module loading, and up to 1.8x slower on slow networks (most likely due to the browser preloader), both for cached and uncached loads, and this result scales linearly up to 10MB and 20k modules loaded executing on the fastest connection in just over 2 seconds in Firefox.
+* [ES Module Shims Chrome Passthrough](bench/README.md#chrome-passthrough-performance) (for [70% of users](https://caniuse.com/import-maps)) results in ~5ms extra initialization time over native for ES Module Shims fetching, execution and initialization, and on a slow connection the additional non-blocking bandwidth cost of its 10KB compressed download as expected.
+* [ES Module Shims Polyfilling](bench/README.md#native-v-polyfill-performance) (for the remaining [30% of users](https://caniuse.com/import-maps)) is on average 1.4x - 1.5x slower than native module loading, and up to 1.8x slower on slow networks (most likely due to the browser preloader), both for cached and uncached loads, and this result scales linearly up to 10MB and 20k modules loaded executing on the fastest connection in just over 2 seconds in Firefox.
 * [Very large import maps](bench/README.md#large-import-maps-performance) (100s of entries) cost only a few extra milliseconds upfront for the additional loading cost.
 
 ### Polyfill Mode
@@ -85,7 +85,7 @@ If using CSS modules or JSON modules, since these features are relatively new, t
 
 ```html
 <script>
-window.esmsInitOptions = { enable: ['css-modules', 'json-modules'] }
+window.esmsInitOptions = { polyfillEnable: ['css-modules', 'json-modules'] }
 </script>
 ```
 
@@ -120,10 +120,12 @@ Works in all browsers with [baseline ES module support](https://caniuse.com/#fea
 | [JSON Modules](#json-modules)      | :heavy_check_mark:                   | :heavy_check_mark:                   | :heavy_check_mark:                   | :heavy_check_mark:                   |
 | [CSS Modules](#css-modules)        | :heavy_check_mark:<sup>3</sup>       | :heavy_check_mark:<sup>3</sup>       | :heavy_check_mark:<sup>3</sup>       | :heavy_check_mark:<sup>3</sup>       |
 | [import.meta.resolve](#resolve)    | :heavy_check_mark:                   | :heavy_check_mark:                   | :heavy_check_mark:                   | :heavy_check_mark:                   |
+| [Top-Level Await](#tla)            | :heavy_check_mark: 89+               | :heavy_check_mark: 89+               | :x:<sup>4</sup>                      | :x:<sup>4</sup>                       |
 
 * 1: _The Edge parallel execution ordering bug is corrected by ES Module Shims with an execution chain inlining approach._
 * 2: _Module worker support cannot be implemented without dynamic import support in web workers._
 * 3: _CSS module support requires a separate [Constructable Stylesheets polyfill](https://github.com/calebdwilliams/construct-style-sheets#readme)._
+* 4: _Top-level await support is possible for ES Module Shims to implement, with the feature request tracking in https://github.com/guybedford/es-module-shims/issues/5._
 
 #### Current browser compatibility of modules features without ES module shims:
 
@@ -138,6 +140,7 @@ Works in all browsers with [baseline ES module support](https://caniuse.com/#fea
 | [JSON Modules](#json-modules)      | :heavy_check_mark: 91+               | :x:                                  | :x:                                  | :x:                                  |
 | [CSS Modules](#css-modules)        | :heavy_check_mark: 95+               | :x:                                  | :x:                                  | :x:                                  |
 | [import.meta.resolve](#resolve)    | :x:                                  | :x:                                  | :x:                                  | :x:                                  |
+| [Top-Level Await](#tla)            | :heavy_check_mark: 89+               | :heavy_check_mark: 89+               | :x:                                  | :x:                                  |
 
 * 1: _Edge executes parallel dependencies in non-deterministic order. ([ChakraCore bug](https://github.com/microsoft/ChakraCore/issues/6261))._
 * ~: _Indicates the exact first version support has not yet been determined (PR's welcome!)._

package/dist/es-module-shims.js

@@ -1,4 +1,4 @@
-/* ES Module Shims 1.3.0 */
+/* ES Module Shims 1.3.4 */
 (function () {
 
   const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
@@ -211,7 +211,7 @@
   if (!nonce) {
     const nonceElement = document.querySelector('script[nonce]');
     if (nonceElement)
-      nonce = nonceElement.getAttribute('nonce');
+      nonce = nonceElement.nonce || nonceElement.getAttribute('nonce');
   }
 
   const onerror = globalHook(esmsInitOptions$1.onerror || noop);
@@ -298,8 +298,7 @@
         const iframe = document.createElement('iframe');
         iframe.style.display = 'none';
         document.head.appendChild(iframe);
-        // we use document.write here because eg Weixin built-in browser doesn't support setting srcdoc
-        iframe.contentWindow.document.write(`<script type=importmap nonce="${nonce}">{"imports":{"x":"data:text/javascript,"}}<${''}/script><script nonce="${nonce}">import('x').then(()=>1,()=>0).then(v=>parent._$s(v))<${''}/script>`);
+        iframe.src = createBlob(`<script type=importmap nonce="${nonce}">{"imports":{"x":"data:text/javascript,"}}<${''}/script><script nonce="${nonce}">import('x').then(()=>1,()=>0).then(v=>parent._$s(v))<${''}/script>`, 'text/html');
       })
     ]);
   });
@@ -404,7 +403,7 @@
       if (revokeBlobURLs) revokeObjectURLs(Object.keys(seen));
       return module;
     }
-    const module = await dynamicImport((shimMode || load.n) ? load.b : load.u, { errUrl: load.u });
+    const module = await dynamicImport(!shimMode && !load.n && nativelyLoaded ? load.u : load.b, { errUrl: load.u });
     // if the top-level load is a shell, run its update function
     if (load.s)
       (await dynamicImport(load.s)).u$_(module);
@@ -530,9 +529,9 @@
       resolvedSource += source.slice(lastIndex);
     }
 
-    resolvedSource = resolvedSource.replace(/\/\/# sourceMappingURL=(.*)\s*$/, (match, url) => match.replace(url, () => new URL(url, load.r)));
+    // ; and // trailer support added for Ruby 7 source maps compatibility
     let hasSourceURL = false;
-    resolvedSource = resolvedSource.replace(/\/\/# sourceURL=(.*)\s*$/, (match, url) => (hasSourceURL = true, match.replace(url, () => new URL(url, load.r))));
+    resolvedSource = resolvedSource.replace(sourceMapURLRegEx, (match, isMapping, url) => (hasSourceURL = !isMapping, match.replace(url, () => new URL(url, load.r))));
     if (!hasSourceURL)
       resolvedSource += '\n//# sourceURL=' + load.r;
 
@@ -540,6 +539,8 @@
     load.S = undefined;
   }
 
+  const sourceMapURLRegEx = /\n\/\/# source(Mapping)?URL=([^\n]+)\s*((;|\/\/[^#][^\n]+)\s*)*$/;
+
   const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
   const jsonContentType = /^(text|application)\/json(;|$)/;
   const cssContentType = /^(text|application)\/css(;|$)/;
@@ -760,11 +761,12 @@
     const isDomContentLoadedScript = domContentLoadedCnt > 0;
     if (isReadyScript) readyStateCompleteCnt++;
     if (isDomContentLoadedScript) domContentLoadedCnt++;
-    const loadPromise = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, isReadyScript && lastStaticLoadPromise).catch(e => {
+    const blocks = script.getAttribute('async') === null && isReadyScript;
+    const loadPromise = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, blocks && lastStaticLoadPromise).catch(e => {
       setTimeout(() => { throw e });
       onerror(e);
     });
-    if (isReadyScript)
+    if (blocks)
       lastStaticLoadPromise = loadPromise.then(readyStateCompleteCheck);
     if (isDomContentLoadedScript)
       loadPromise.then(domContentLoadedCheck);

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

@@ -1,4 +1,4 @@
-/* ES Module Shims Wasm 1.3.0 */
+/* ES Module Shims Wasm 1.3.4 */
 (function () {
 
   const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
@@ -211,7 +211,7 @@
   if (!nonce) {
     const nonceElement = document.querySelector('script[nonce]');
     if (nonceElement)
-      nonce = nonceElement.getAttribute('nonce');
+      nonce = nonceElement.nonce || nonceElement.getAttribute('nonce');
   }
 
   const onerror = globalHook(esmsInitOptions$1.onerror || noop);
@@ -295,8 +295,7 @@
         const iframe = document.createElement('iframe');
         iframe.style.display = 'none';
         document.head.appendChild(iframe);
-        // we use document.write here because eg Weixin built-in browser doesn't support setting srcdoc
-        iframe.contentWindow.document.write(`<script type=importmap nonce="${nonce}">{"imports":{"x":"data:text/javascript,"}}<${''}/script><script nonce="${nonce}">import('x').then(()=>1,()=>0).then(v=>parent._$s(v))<${''}/script>`);
+        iframe.src = createBlob(`<script type=importmap nonce="${nonce}">{"imports":{"x":"data:text/javascript,"}}<${''}/script><script nonce="${nonce}">import('x').then(()=>1,()=>0).then(v=>parent._$s(v))<${''}/script>`, 'text/html');
       })
     ]);
   });
@@ -402,7 +401,7 @@
       if (revokeBlobURLs) revokeObjectURLs(Object.keys(seen));
       return module;
     }
-    const module = await dynamicImport((shimMode || load.n) ? load.b : load.u, { errUrl: load.u });
+    const module = await dynamicImport(!shimMode && !load.n && nativelyLoaded ? load.u : load.b, { errUrl: load.u });
     // if the top-level load is a shell, run its update function
     if (load.s)
       (await dynamicImport(load.s)).u$_(module);
@@ -528,9 +527,9 @@
       resolvedSource += source.slice(lastIndex);
     }
 
-    resolvedSource = resolvedSource.replace(/\/\/# sourceMappingURL=(.*)\s*$/, (match, url) => match.replace(url, () => new URL(url, load.r)));
+    // ; and // trailer support added for Ruby 7 source maps compatibility
     let hasSourceURL = false;
-    resolvedSource = resolvedSource.replace(/\/\/# sourceURL=(.*)\s*$/, (match, url) => (hasSourceURL = true, match.replace(url, () => new URL(url, load.r))));
+    resolvedSource = resolvedSource.replace(sourceMapURLRegEx, (match, isMapping, url) => (hasSourceURL = !isMapping, match.replace(url, () => new URL(url, load.r))));
     if (!hasSourceURL)
       resolvedSource += '\n//# sourceURL=' + load.r;
 
@@ -538,6 +537,8 @@
     load.S = undefined;
   }
 
+  const sourceMapURLRegEx = /\n\/\/# source(Mapping)?URL=([^\n]+)\s*((;|\/\/[^#][^\n]+)\s*)*$/;
+
   const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
   const jsonContentType = /^(text|application)\/json(;|$)/;
   const cssContentType = /^(text|application)\/css(;|$)/;
@@ -758,11 +759,12 @@
     const isDomContentLoadedScript = domContentLoadedCnt > 0;
     if (isReadyScript) readyStateCompleteCnt++;
     if (isDomContentLoadedScript) domContentLoadedCnt++;
-    const loadPromise = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, isReadyScript && lastStaticLoadPromise).catch(e => {
+    const blocks = script.getAttribute('async') === null && isReadyScript;
+    const loadPromise = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, blocks && lastStaticLoadPromise).catch(e => {
       setTimeout(() => { throw e });
       onerror(e);
     });
-    if (isReadyScript)
+    if (blocks)
       lastStaticLoadPromise = loadPromise.then(readyStateCompleteCheck);
     if (isDomContentLoadedScript)
       loadPromise.then(domContentLoadedCheck);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-module-shims",
-  "version": "1.3.0",
+  "version": "1.3.4",
   "description": "Shims for the latest ES module features",
   "main": "dist/es-module-shims.js",
   "exports": {
@@ -11,12 +11,13 @@
     "build": "rollup -c",
     "bench": "bash bench/bench.sh",
     "bench:clear": "rm -rf bench/results",
-    "footprint": "npm run build && cat dist/es-module-shims.js | brotli | wc -c",
-    "footprint:csp": "npm run build && cat dist/es-module-shims.csp.js | brotli | wc -c",
+    "footprint": "npm run build ; cat dist/es-module-shims.js | brotli | wc -c",
+    "footprint:csp": "npm run build ; cat dist/es-module-shims.csp.js | brotli | wc -c",
     "prepublishOnly": "npm run build",
-    "test": "npm run test:test-base-href && npm run test:test-csp && npm run test:test-early-module-load && npm run test:test-polyfill && npm run test:test-polyfill-wasm && npm run test:test-preload-case && npm run test:test-revoke-blob-urls && npm run test:test-shim",
+    "test": "npm run test:test-base-href ; npm run test:test-csp ; npm run test:test-dom-order ; npm run test:test-early-module-load ; npm run test:test-polyfill ; npm run test:test-polyfill-wasm ; npm run test:test-preload-case ; npm run test:test-revoke-blob-urls ; npm run test:test-shim",
     "test:test-base-href": "cross-env TEST_NAME=test-base-href node test/server.mjs",
     "test:test-csp": "cross-env TEST_NAME=test-csp node test/server.mjs",
+    "test:test-dom-order": "cross-env TEST_NAME=test-dom-order node test/server.mjs",
     "test:test-early-module-load": "cross-env TEST_NAME=test-early-module-load node test/server.mjs",
     "test:test-polyfill": "cross-env TEST_NAME=test-polyfill node test/server.mjs",
     "test:test-polyfill-wasm": "cross-env TEST_NAME=test-polyfill-wasm node test/server.mjs",