es-module-shims 1.4.0 → 1.4.4

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+ES Module Shims 1.4.4
+* Fix: import.meta.resolve support for inline scripts (https://github.com/guybedford/es-module-shims/pull/251)
+* Fix: CSS imports unquoted URL normalization (https://github.com/guybedford/es-module-shims/pull/252)
+* Fix: Reword polyfill info message (https://github.com/guybedford/es-module-shims/pull/253)
+
+ES Module Shims 1.4.3 (2022/01/25)
+* Feature: Support import map overrides when existing resolution matches new resolution (https://github.com/guybedford/es-module-shims/pull/249, @vovacodes)
+* Fix: Import assertions support with dynamic imports (https://github.com/guybedford/es-module-shims/pull/248)
+
+ES Module Shims 1.4.2 (2022/01/24)
+* Fix: optional catch binding in `isUrl` function (@thepassle, https://github.com/guybedford/es-module-shims/pull/246)
+
+ES Module Shims 1.4.1 (2021/12/15)
+* Fix: Firefox parse error stacks (https://github.com/guybedford/es-module-shims/pull/239)
+
 ES Module Shims 1.4.0 (2021/12/14)
 * Feature: "enforceIntegrity" option and "modulepreload-shim" support for secure shim mode with integrity (https://github.com/guybedford/es-module-shims/pull/236)
 * Fix: Safari parse error stacks (https://github.com/guybedford/es-module-shims/pull/238)

package/README.md

@@ -4,7 +4,7 @@ Shims modern ES Modules features like import maps on top of the baseline modules
 
 When running in polyfill mode, [the 67% of users](https://caniuse.com/import-maps) with import maps entirely bypass the shim code entirely.
 
-In for the remaining 30% of users, the highly performant (see [benchmarks](#benchmarks)) production and [CSP-compatible](#csp-support) shim kicks in to rewrite module specifiers driven by the [Web Assembly ES Module Lexer](https://github.com/guybedford/es-module-lexer).
+For the remaining 30% of users, the highly performant (see [benchmarks](#benchmarks)) production and [CSP-compatible](#csp-support) shim kicks in to rewrite module specifiers driven by the [Web Assembly ES Module Lexer](https://github.com/guybedford/es-module-lexer).
 
 The following modules features are polyfilled:
 
@@ -27,7 +27,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.3.6/dist/es-module-shims.js"></script>
+<script async src="https://ga.jspm.io/npm:es-module-shims@1.4.4/dist/es-module-shims.js"></script>
 
 <!-- https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9Az0C1K1jMAAKFS5w0gAA -->
 <script type="importmap">
@@ -287,7 +287,7 @@ import sheet from 'https://site.com/sheet.css' assert { type: 'css' };
 To support the polyfill or shim of this feature, the [Constructable Stylesheets polyfill](https://github.com/calebdwilliams/construct-style-sheets#readme) must be separately included in browsers not supporting [Constructable Stylesheets](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet) eg via:
 
 ```html
-<script async src="https://unpkg.com/construct-style-sheets-polyfill@3.0.0/dist/adoptedStyleSheets.js"></script>
+<script async src="https://unpkg.com/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.js"></script>
 ```
 
 For more information see the [web.dev article](https://web.dev/css-module-scripts/).
@@ -431,7 +431,7 @@ window.esmsInitOptions = {
   resolve: (id, parentUrl, resolve) => resolve(id, parentUrl), // default is spec resolution
   fetch: (url, options) => fetch(url, options), // default is native
   revokeBlobURLs: true, // default false
-  enforceIntegrity: true, // default true
+  enforceIntegrity: true, // default false
 }
 </script>
 <script async src="es-module-shims.js"></script>

package/dist/es-module-shims.js

@@ -1,9 +1,10 @@
-/* ES Module Shims 1.4.0 */
+/* ES Module Shims 1.4.4 */
 (function () {
 
-  const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
+  const edge = !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
+  const safari = !!window.safari;
 
-  let baseUrl;
+  const baseUrl = document.baseURI;
 
   function createBlob (source, type = 'text/javascript') {
     return URL.createObjectURL(new Blob([source], { type }));
@@ -11,23 +12,12 @@
 
   const noop = () => {};
 
-  const baseEl = document.querySelector('base[href]');
-  if (baseEl)
-    baseUrl = baseEl.href;
-
-  if (!baseUrl && typeof location !== 'undefined') {
-    baseUrl = location.href.split('#')[0].split('?')[0];
-    const lastSepIndex = baseUrl.lastIndexOf('/');
-    if (lastSepIndex !== -1)
-      baseUrl = baseUrl.slice(0, lastSepIndex + 1);
-  }
-
   function isURL (url) {
     try {
       new URL(url);
       return true;
     }
-    catch {
+    catch(_) {
       return false;
     }
   }
@@ -85,28 +75,25 @@
             output.push(segmented.slice(segmentIndex, i + 1));
             segmentIndex = -1;
           }
+          continue;
         }
-
         // new segment - check if it is relative
         else if (segmented[i] === '.') {
           // ../ segment
           if (segmented[i + 1] === '.' && (segmented[i + 2] === '/' || i + 2 === segmented.length)) {
             output.pop();
             i += 2;
+            continue;
           }
           // ./ segment
           else if (segmented[i + 1] === '/' || i + 1 === segmented.length) {
             i += 1;
-          }
-          else {
-            // the start of a new segment as below
-            segmentIndex = i;
+            continue;
           }
         }
         // it is the start of a new segment
-        else {
-          segmentIndex = i;
-        }
+        while (segmented[i] === '/') i++;
+        segmentIndex = i; 
       }
       // finish reading out the last segment
       if (segmentIndex !== -1)
@@ -129,7 +116,7 @@
   function resolveAndComposePackages (packages, outPackages, baseUrl, parentMap) {
     for (let p in packages) {
       const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
-      if (outPackages[resolvedLhs]) {
+      if (outPackages[resolvedLhs] && (outPackages[resolvedLhs] !== packages[resolvedLhs])) {
         throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
       }
       let target = packages[p];
@@ -208,7 +195,7 @@
   }
 
   const onerror = globalHook(esmsInitOptions.onerror || noop);
-  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: "Uncaught TypeError" module failure has been polyfilled`);
+  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: ^ TypeError module failure has been polyfilled`);
 
   const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
 
@@ -313,7 +300,6 @@
 
   const resolve = resolveHook ? async (id, parentUrl) => ({ r: await resolveHook(id, parentUrl, defaultResolve), b: false }) : _resolve;
 
-  let id = 0;
   const registry = {};
 
   async function loadAll (load, seen) {
@@ -484,7 +470,7 @@
       // once all deps have loaded we can inline the dependency resolution blobs
       // and define this blob
       let lastIndex = 0, depIndex = 0;
-      for (const { s: start, se: end, d: dynamicImportIndex } of imports) {
+      for (const { s: start, e: end, se: statementEnd, d: dynamicImportIndex } of imports) {
         // dependency source replacements
         if (dynamicImportIndex === -1) {
           const depLoad = load.d[depIndex++];
@@ -505,31 +491,30 @@
           }
           // circular shell execution
           else if (depLoad.s) {
-            resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, end)}*/${urlJsString(blobUrl)};import*as m$_${depIndex} from'${depLoad.b}';import{u$_ as u$_${depIndex}}from'${depLoad.s}';u$_${depIndex}(m$_${depIndex})`;
-            lastIndex = end;
+            resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, statementEnd)}*/${urlJsString(blobUrl)};import*as m$_${depIndex} from'${depLoad.b}';import{u$_ as u$_${depIndex}}from'${depLoad.s}';u$_${depIndex}(m$_${depIndex})`;
+            lastIndex = statementEnd;
             depLoad.s = undefined;
             continue;
           }
-          resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, end)}*/${urlJsString(blobUrl)}`;
-          lastIndex = end;
+          resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, statementEnd)}*/${urlJsString(blobUrl)}`;
+          lastIndex = statementEnd;
         }
         // import.meta
         else if (dynamicImportIndex === -2) {
           meta[load.r] = { url: load.r, resolve: importMetaResolve };
           resolvedSource += `${source.slice(lastIndex, start)}self._esmsm[${urlJsString(load.r)}]`;
-          lastIndex = end;
+          lastIndex = statementEnd;
         }
         // dynamic import
         else {
-          resolvedSource += `${source.slice(lastIndex, dynamicImportIndex + 6)}Shim(${source.slice(start, end)}, ${load.r && urlJsString(load.r)}`;
-          lastIndex = end;
+          resolvedSource += `${source.slice(lastIndex, dynamicImportIndex + 6)}Shim(${source.slice(start, end)}, ${urlJsString(load.r)}${source.slice(end, statementEnd)}`;
+          lastIndex = statementEnd;
         }
       }
 
       resolvedSource += source.slice(lastIndex);
     }
 
-    // ; and // trailer support added for Ruby 7 source maps compatibility
     let hasSourceURL = false;
     resolvedSource = resolvedSource.replace(sourceMapURLRegEx, (match, isMapping, url) => (hasSourceURL = !isMapping, match.replace(url, () => new URL(url, load.r))));
     if (!hasSourceURL)
@@ -539,6 +524,8 @@
     load.S = undefined;
   }
 
+  // ; and // trailer support added for Ruby on Rails 7 source maps compatibility
+  // https://github.com/guybedford/es-module-shims/issues/228
   const sourceMapURLRegEx = /\n\/\/# source(Mapping)?URL=([^\n]+)\s*((;|\/\/[^#][^\n]*)\s*)*$/;
 
   const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
@@ -578,24 +565,25 @@
       return { r: res.url, s: await res.text(), t: 'js' };
     else if (jsonContentType.test(contentType))
       return { r: res.url, s: `export default ${await res.text()}`, t: 'json' };
-    else if (cssContentType.test(contentType))
+    else if (cssContentType.test(contentType)) {
       return { r: res.url, s: `var s=new CSSStyleSheet();s.replaceSync(${
-      JSON.stringify((await res.text()).replace(cssUrlRegEx, (_match, quotes, relUrl1, relUrl2) => `url(${quotes}${resolveUrl(relUrl1 || relUrl2, url)}${quotes})`))
+      JSON.stringify((await res.text()).replace(cssUrlRegEx, (_match, quotes = '', relUrl1, relUrl2) => `url(${quotes}${resolveUrl(relUrl1 || relUrl2, url)}${quotes})`))
     });export default s;`, t: 'css' };
+    }
     else
       throw Error(`Unsupported Content-Type "${contentType}"`);
   }
 
   function getOrCreateLoad (url, fetchOpts, source) {
     let load = registry[url];
-    if (load)
+    if (load && !source)
       return load;
 
-    load = registry[url] = {
+    load = {
       // url
       u: url,
       // response url
-      r: undefined,
+      r: source ? url : undefined,
       // fetchPromise
       f: undefined,
       // source
@@ -615,6 +603,12 @@
       // type
       t: null
     };
+    if (registry[url]) {
+      let i = 0;
+      while (registry[load.u + ++i]);
+      load.u += i;
+    }
+    registry[load.u] = load;
 
     load.f = (async () => {
       if (!source) {
@@ -761,9 +755,13 @@
     if (isReadyScript) readyStateCompleteCnt++;
     if (isDomContentLoadedScript) domContentLoadedCnt++;
     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 => {
-      // This used to be a setTimeout(() => { throw e }) but this breaks Safari stacks
-      console.error(e);
+    const loadPromise = topLevelLoad(script.src || baseUrl, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, blocks && lastStaticLoadPromise).catch(e => {
+      // Safari only gives error via console.error
+      if (safari)
+        console.error(e);
+      // Firefox only gives error stack via setTimeout
+      else
+        setTimeout(() => { throw e});
       onerror(e);
     });
     if (blocks)

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

@@ -1,9 +1,10 @@
-/* ES Module Shims Wasm 1.4.0 */
+/* ES Module Shims Wasm 1.4.4 */
 (function () {
 
-  const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
+  const edge = !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
+  const safari = !!window.safari;
 
-  let baseUrl;
+  const baseUrl = document.baseURI;
 
   function createBlob (source, type = 'text/javascript') {
     return URL.createObjectURL(new Blob([source], { type }));
@@ -11,23 +12,12 @@
 
   const noop = () => {};
 
-  const baseEl = document.querySelector('base[href]');
-  if (baseEl)
-    baseUrl = baseEl.href;
-
-  if (!baseUrl && typeof location !== 'undefined') {
-    baseUrl = location.href.split('#')[0].split('?')[0];
-    const lastSepIndex = baseUrl.lastIndexOf('/');
-    if (lastSepIndex !== -1)
-      baseUrl = baseUrl.slice(0, lastSepIndex + 1);
-  }
-
   function isURL (url) {
     try {
       new URL(url);
       return true;
     }
-    catch {
+    catch(_) {
       return false;
     }
   }
@@ -85,28 +75,25 @@
             output.push(segmented.slice(segmentIndex, i + 1));
             segmentIndex = -1;
           }
+          continue;
         }
-
         // new segment - check if it is relative
         else if (segmented[i] === '.') {
           // ../ segment
           if (segmented[i + 1] === '.' && (segmented[i + 2] === '/' || i + 2 === segmented.length)) {
             output.pop();
             i += 2;
+            continue;
           }
           // ./ segment
           else if (segmented[i + 1] === '/' || i + 1 === segmented.length) {
             i += 1;
-          }
-          else {
-            // the start of a new segment as below
-            segmentIndex = i;
+            continue;
           }
         }
         // it is the start of a new segment
-        else {
-          segmentIndex = i;
-        }
+        while (segmented[i] === '/') i++;
+        segmentIndex = i; 
       }
       // finish reading out the last segment
       if (segmentIndex !== -1)
@@ -129,7 +116,7 @@
   function resolveAndComposePackages (packages, outPackages, baseUrl, parentMap) {
     for (let p in packages) {
       const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
-      if (outPackages[resolvedLhs]) {
+      if (outPackages[resolvedLhs] && (outPackages[resolvedLhs] !== packages[resolvedLhs])) {
         throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
       }
       let target = packages[p];
@@ -208,7 +195,7 @@
   }
 
   const onerror = globalHook(esmsInitOptions.onerror || noop);
-  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: "Uncaught TypeError" module failure has been polyfilled`);
+  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: ^ TypeError module failure has been polyfilled`);
 
   const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
 
@@ -311,7 +298,6 @@
 
   const resolve = resolveHook ? async (id, parentUrl) => ({ r: await resolveHook(id, parentUrl, defaultResolve), b: false }) : _resolve;
 
-  let id = 0;
   const registry = {};
 
   async function loadAll (load, seen) {
@@ -482,7 +468,7 @@
       // once all deps have loaded we can inline the dependency resolution blobs
       // and define this blob
       let lastIndex = 0, depIndex = 0;
-      for (const { s: start, se: end, d: dynamicImportIndex } of imports) {
+      for (const { s: start, e: end, se: statementEnd, d: dynamicImportIndex } of imports) {
         // dependency source replacements
         if (dynamicImportIndex === -1) {
           const depLoad = load.d[depIndex++];
@@ -503,31 +489,30 @@
           }
           // circular shell execution
           else if (depLoad.s) {
-            resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, end)}*/${urlJsString(blobUrl)};import*as m$_${depIndex} from'${depLoad.b}';import{u$_ as u$_${depIndex}}from'${depLoad.s}';u$_${depIndex}(m$_${depIndex})`;
-            lastIndex = end;
+            resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, statementEnd)}*/${urlJsString(blobUrl)};import*as m$_${depIndex} from'${depLoad.b}';import{u$_ as u$_${depIndex}}from'${depLoad.s}';u$_${depIndex}(m$_${depIndex})`;
+            lastIndex = statementEnd;
             depLoad.s = undefined;
             continue;
           }
-          resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, end)}*/${urlJsString(blobUrl)}`;
-          lastIndex = end;
+          resolvedSource += `${source.slice(lastIndex, start - 1)}/*${source.slice(start - 1, statementEnd)}*/${urlJsString(blobUrl)}`;
+          lastIndex = statementEnd;
         }
         // import.meta
         else if (dynamicImportIndex === -2) {
           meta[load.r] = { url: load.r, resolve: importMetaResolve };
           resolvedSource += `${source.slice(lastIndex, start)}self._esmsm[${urlJsString(load.r)}]`;
-          lastIndex = end;
+          lastIndex = statementEnd;
         }
         // dynamic import
         else {
-          resolvedSource += `${source.slice(lastIndex, dynamicImportIndex + 6)}Shim(${source.slice(start, end)}, ${load.r && urlJsString(load.r)}`;
-          lastIndex = end;
+          resolvedSource += `${source.slice(lastIndex, dynamicImportIndex + 6)}Shim(${source.slice(start, end)}, ${urlJsString(load.r)}${source.slice(end, statementEnd)}`;
+          lastIndex = statementEnd;
         }
       }
 
       resolvedSource += source.slice(lastIndex);
     }
 
-    // ; and // trailer support added for Ruby 7 source maps compatibility
     let hasSourceURL = false;
     resolvedSource = resolvedSource.replace(sourceMapURLRegEx, (match, isMapping, url) => (hasSourceURL = !isMapping, match.replace(url, () => new URL(url, load.r))));
     if (!hasSourceURL)
@@ -537,6 +522,8 @@
     load.S = undefined;
   }
 
+  // ; and // trailer support added for Ruby on Rails 7 source maps compatibility
+  // https://github.com/guybedford/es-module-shims/issues/228
   const sourceMapURLRegEx = /\n\/\/# source(Mapping)?URL=([^\n]+)\s*((;|\/\/[^#][^\n]*)\s*)*$/;
 
   const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
@@ -576,24 +563,25 @@
       return { r: res.url, s: await res.text(), t: 'js' };
     else if (jsonContentType.test(contentType))
       return { r: res.url, s: `export default ${await res.text()}`, t: 'json' };
-    else if (cssContentType.test(contentType))
+    else if (cssContentType.test(contentType)) {
       return { r: res.url, s: `var s=new CSSStyleSheet();s.replaceSync(${
-      JSON.stringify((await res.text()).replace(cssUrlRegEx, (_match, quotes, relUrl1, relUrl2) => `url(${quotes}${resolveUrl(relUrl1 || relUrl2, url)}${quotes})`))
+      JSON.stringify((await res.text()).replace(cssUrlRegEx, (_match, quotes = '', relUrl1, relUrl2) => `url(${quotes}${resolveUrl(relUrl1 || relUrl2, url)}${quotes})`))
     });export default s;`, t: 'css' };
+    }
     else
       throw Error(`Unsupported Content-Type "${contentType}"`);
   }
 
   function getOrCreateLoad (url, fetchOpts, source) {
     let load = registry[url];
-    if (load)
+    if (load && !source)
       return load;
 
-    load = registry[url] = {
+    load = {
       // url
       u: url,
       // response url
-      r: undefined,
+      r: source ? url : undefined,
       // fetchPromise
       f: undefined,
       // source
@@ -613,6 +601,12 @@
       // type
       t: null
     };
+    if (registry[url]) {
+      let i = 0;
+      while (registry[load.u + ++i]);
+      load.u += i;
+    }
+    registry[load.u] = load;
 
     load.f = (async () => {
       if (!source) {
@@ -759,9 +753,13 @@
     if (isReadyScript) readyStateCompleteCnt++;
     if (isDomContentLoadedScript) domContentLoadedCnt++;
     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 => {
-      // This used to be a setTimeout(() => { throw e }) but this breaks Safari stacks
-      console.error(e);
+    const loadPromise = topLevelLoad(script.src || baseUrl, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, blocks && lastStaticLoadPromise).catch(e => {
+      // Safari only gives error via console.error
+      if (safari)
+        console.error(e);
+      // Firefox only gives error stack via setTimeout
+      else
+        setTimeout(() => { throw e});
       onerror(e);
     });
     if (blocks)

package/package.json

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