es-module-shims 1.4.2 → 1.4.6

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+ES Module Shims 1.4.6 (2022/02/15)
+* Feat: Improve fetch content type error failure context (https://github.com/guybedford/es-module-shims/pull/263)
+* Feat: Refactor error handling paths, use `reportError` when possible (https://github.com/guybedford/es-module-shims/pull/264)
+
+ES Module Shims 1.4.5 (2022/02/12)
+* Feat: Allow import map overrides with option (https://github.com/guybedford/es-module-shims/pull/257, @lewisl@9029)
+* Feat: Additional fetch error context (https://github.com/guybedford/es-module-shims/pull/256)
+* Fix: dynamic import context with import assertions (https://github.com/guybedford/es-module-shims/pull/260, @ICodeMyOwnLife)
+* Docs: Clarify modulepreload-shim (https://github.com/guybedford/es-module-shims/pull/261, @LarsDenBakker)
+
+ES Module Shims 1.4.4 (2022/02/03)
+* 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)
 

package/README.md

@@ -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.4.2/dist/es-module-shims.js"></script>
+<script async src="https://ga.jspm.io/npm:es-module-shims@1.4.6/dist/es-module-shims.js"></script>
 
 <!-- https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9Az0C1K1jMAAKFS5w0gAA -->
 <script type="importmap">
@@ -227,6 +227,10 @@ This tag just initiates a fetch request in the browser and thus works equally as
 Unlike the browser specification, the modulepreload polyfill does not request dependency modules by default, in order to avoid unnecessary
 code analysis in the polyfill scenarios. **It is recommended to preload deep imports anyway so that this feature shouldn't be necessary.**
 
+#### Preload shim
+
+When in shim mode, `<link rel="modulepreload-shim" href="/module.js" />` must be used to properly cache the preloaded modules.
+
 ### CSP Support
 
 By default ES Module Shims provides full support for CSP by using the asm.js ES Module Lexer build. This is absolutely identical in performance to the Wasm version in Firefox and Chrome, while in Safari the asm.js version is actually faster than Wasm making this build preferable.
@@ -287,7 +291,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/).
@@ -417,6 +421,7 @@ Provide a `esmsInitOptions` on the global scope before `es-module-shims` is load
 * [resolve](#resolve-hook)
 * [fetch](#fetch-hook)
 * [revokeBlobURLs](#revoke-blob-urls)
+* [mapOverrides](#overriding-import-map-entries)
 
 ```html
 <script>
@@ -432,6 +437,7 @@ window.esmsInitOptions = {
   fetch: (url, options) => fetch(url, options), // default is native
   revokeBlobURLs: true, // default false
   enforceIntegrity: true, // default false
+  mapOverrides: true, // default false
 }
 </script>
 <script async src="es-module-shims.js"></script>
@@ -687,6 +693,37 @@ You can do that by enabling the `revokeBlobURLs` init option:
 NOTE: revoking object URLs is not entirely free, while we are trying to be smart about it and make sure it doesn't
 cause janks, we recommend enabling this option only if you have done the measurements and identified that you really need it.
 
+### Overriding import map entries
+
+When [dynamically injecting import maps](#dynamic-import-maps), an error will be thrown in both polyfill and shim modes if the new import map would override existing entries with a different value.
+
+It is possible to disable this behavior in shim mode by setting the `mapOverrides` option:
+
+```js
+<script type="esms-options">
+{
+  "shimMode": true,
+  "mapOverrides": true
+}
+</script>
+<script type="importmap-shim">
+{
+  "imports": {
+    "x": "/x.js"
+  }
+}
+</script>
+<script>
+// No error will be thrown here
+document.body.appendChild(Object.assign(document.createElement('script'), {
+  type: 'importmap',
+  innerHTML: JSON.stringify({ imports: { x: './y.js' } }),
+}));
+</script>
+```
+
+This can be useful for HMR workflows.
+
 ## Implementation Details
 
 ### Import Rewriting

package/dist/es-module-shims.js

@@ -1,40 +1,81 @@
-/* ES Module Shims 1.4.2 */
+/* ES Module Shims 1.4.6 */
 (function () {
 
-  const uaMatch = navigator.userAgent.match(/(Edge|Safari)\/\d+\.\d+/);
-  const edge = uaMatch && uaMatch[1] === 'Edge';
-  const safari = uaMatch && uaMatch[1] === 'Safari';
+  const noop = () => {};
 
-  let baseUrl;
+  const optionsScript = document.querySelector('script[type=esms-options]');
 
-  function createBlob (source, type = 'text/javascript') {
-    return URL.createObjectURL(new Blob([source], { type }));
+  const esmsInitOptions = optionsScript ? JSON.parse(optionsScript.innerHTML) : self.esmsInitOptions ? self.esmsInitOptions : {};
+
+  let shimMode = !!esmsInitOptions.shimMode;
+  const resolveHook = globalHook(shimMode && esmsInitOptions.resolve);
+
+  const skip = esmsInitOptions.skip ? new RegExp(esmsInitOptions.skip) : null;
+
+  let nonce = esmsInitOptions.nonce;
+
+  const mapOverrides = esmsInitOptions.mapOverrides;
+
+  if (!nonce) {
+    const nonceElement = document.querySelector('script[nonce]');
+    if (nonceElement)
+      nonce = nonceElement.nonce || nonceElement.getAttribute('nonce');
   }
 
-  const noop = () => {};
+  const onerror = globalHook(esmsInitOptions.onerror || noop);
+  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: ^ TypeError module failure has been polyfilled`);
+
+  const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
+
+  const fetchHook = esmsInitOptions.fetch ? globalHook(esmsInitOptions.fetch) : fetch;
+
+  function globalHook (name) {
+    return typeof name === 'string' ? self[name] : name;
+  }
+
+  const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
+  const cssModulesEnabled = enable.includes('css-modules');
+  const jsonModulesEnabled = enable.includes('json-modules');
+
+  function setShimMode () {
+    shimMode = true;
+  }
+
+  const edge = !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
 
-  const baseEl = document.querySelector('base[href]');
-  if (baseEl)
-    baseUrl = baseEl.href;
+  const baseUrl = document.baseURI;
 
-  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 createBlob (source, type = 'text/javascript') {
+    return URL.createObjectURL(new Blob([source], { type }));
   }
 
+  const eoop = err => setTimeout(() => { throw err });
+
+  const throwError = err => { (window.reportError || window.safari && console.error || eoop)(err), void onerror(err); };
+
   function isURL (url) {
     try {
       new URL(url);
       return true;
     }
-    catch(_) {
+    catch (_) {
       return false;
     }
+  }
+
+  const backslashRegEx = /\\/g;
+
+  /*
+   * Import maps implementation
+   *
+   * To make lookups fast we pre-resolve the entire import map
+   * and then match based on backtracked hash lookups
+   *
+   */
+  function resolveUrl (relUrl, parentUrl) {
+    return resolveIfNotPlainOrUrl(relUrl, parentUrl) || (relUrl.indexOf(':') !== -1 ? relUrl : resolveIfNotPlainOrUrl('./' + relUrl, parentUrl));
   }
 
-  const backslashRegEx = /\\/g;
   function resolveIfNotPlainOrUrl (relUrl, parentUrl) {
     // strip off any trailing query params or hashes
     parentUrl = parentUrl && parentUrl.split('#')[0].split('?')[0];
@@ -87,28 +128,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)
@@ -117,35 +155,6 @@
     }
   }
 
-  /*
-   * Import maps implementation
-   *
-   * To make lookups fast we pre-resolve the entire import map
-   * and then match based on backtracked hash lookups
-   *
-   */
-  function resolveUrl (relUrl, parentUrl) {
-    return resolveIfNotPlainOrUrl(relUrl, parentUrl) || (relUrl.indexOf(':') !== -1 ? relUrl : resolveIfNotPlainOrUrl('./' + relUrl, parentUrl));
-  }
-
-  function resolveAndComposePackages (packages, outPackages, baseUrl, parentMap) {
-    for (let p in packages) {
-      const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
-      if (outPackages[resolvedLhs]) {
-        throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
-      }
-      let target = packages[p];
-      if (typeof target !== 'string')
-        continue;
-      const mapped = resolveImportMap(parentMap, resolveIfNotPlainOrUrl(target, baseUrl) || target, baseUrl);
-      if (mapped) {
-        outPackages[resolvedLhs] = mapped;
-        continue;
-      }
-      console.warn(`Mapping "${p}" -> "${packages[p]}" does not resolve`);
-    }
-  }
-
   function resolveAndComposeImportMap (json, baseUrl, parentMap) {
     const outMap = { imports: Object.assign({}, parentMap.imports), scopes: Object.assign({}, parentMap.scopes) };
 
@@ -181,6 +190,7 @@
     }
   }
 
+
   function resolveImportMap (importMap, resolvedOrPlain, parentUrl) {
     let scopeUrl = parentUrl && getMatch(parentUrl, importMap.scopes);
     while (scopeUrl) {
@@ -190,42 +200,24 @@
       scopeUrl = getMatch(scopeUrl.slice(0, scopeUrl.lastIndexOf('/')), importMap.scopes);
     }
     return applyPackages(resolvedOrPlain, importMap.imports) || resolvedOrPlain.indexOf(':') !== -1 && resolvedOrPlain;
-  }
-
-  const optionsScript = document.querySelector('script[type=esms-options]');
-
-  const esmsInitOptions = optionsScript ? JSON.parse(optionsScript.innerHTML) : self.esmsInitOptions ? self.esmsInitOptions : {};
-
-  let shimMode = !!esmsInitOptions.shimMode;
-  const resolveHook = globalHook(shimMode && esmsInitOptions.resolve);
-
-  const skip = esmsInitOptions.skip ? new RegExp(esmsInitOptions.skip) : null;
-
-  let nonce = esmsInitOptions.nonce;
-
-  if (!nonce) {
-    const nonceElement = document.querySelector('script[nonce]');
-    if (nonceElement)
-      nonce = nonceElement.nonce || nonceElement.getAttribute('nonce');
   }
 
-  const onerror = globalHook(esmsInitOptions.onerror || noop);
-  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: "Uncaught TypeError" module failure has been polyfilled`);
-
-  const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
-
-  const fetchHook = esmsInitOptions.fetch ? globalHook(esmsInitOptions.fetch) : fetch;
-
-  function globalHook (name) {
-    return typeof name === 'string' ? self[name] : name;
-  }
-
-  const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
-  const cssModulesEnabled = enable.includes('css-modules');
-  const jsonModulesEnabled = enable.includes('json-modules');
-
-  function setShimMode () {
-    shimMode = true;
+  function resolveAndComposePackages (packages, outPackages, baseUrl, parentMap) {
+    for (let p in packages) {
+      const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
+      if ((!shimMode || !mapOverrides) && outPackages[resolvedLhs] && (outPackages[resolvedLhs] !== packages[resolvedLhs])) {
+        throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
+      }
+      let target = packages[p];
+      if (typeof target !== 'string')
+        continue;
+      const mapped = resolveImportMap(parentMap, resolveIfNotPlainOrUrl(target, baseUrl) || target, baseUrl);
+      if (mapped) {
+        outPackages[resolvedLhs] = mapped;
+        continue;
+      }
+      console.warn(`Mapping "${p}" -> "${packages[p]}" does not resolve`);
+    }
   }
 
   let err;
@@ -315,7 +307,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) {
@@ -390,7 +381,7 @@
       await lastStaticLoadPromise;
       return dynamicImport(source ? createBlob(source) : url, { errUrl: url || source });
     }
-    const load = getOrCreateLoad(url, fetchOpts, source);
+    const load = getOrCreateLoad(url, fetchOpts, null, source);
     const seen = {};
     await loadAll(load, seen);
     lastLoad = undefined;
@@ -432,7 +423,12 @@
     }
   }
 
-  async function importShim (id, parentUrl = baseUrl, _assertion) {
+  async function importShim (id, ...args) {
+    // parentUrl if present will be the last argument
+    let parentUrl = args[args.length - 1];
+    if (typeof parentUrl !== 'string') {
+      parentUrl = baseUrl;
+    }
     // needed for shim check
     await initPromise;
     if (acceptingImportMaps || shimMode || !baselinePassthrough) {
@@ -486,7 +482,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++];
@@ -507,24 +503,24 @@
           }
           // 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, statementEnd)}, ${urlJsString(load.r)}`;
+          lastIndex = statementEnd;
         }
       }
 
@@ -563,42 +559,56 @@
       p.shift()();
   }
 
-  async function doFetch (url, fetchOpts) {
+  function fromParent (parent) {
+    return parent ? ` imported from ${parent}` : '';
+  }
+
+  async function doFetch (url, fetchOpts, parent) {
     if (enforceIntegrity && !fetchOpts.integrity)
-      throw Error(`No integrity for ${url}`);
+      throw Error(`No integrity for ${url}${fromParent(parent)}.`);
     const poolQueue = pushFetchPool();
     if (poolQueue) await poolQueue;
     try {
       var res = await fetchHook(url, fetchOpts);
     }
+    catch (e) {
+      e.message = `Unable to fetch ${url}${fromParent(parent)} - see network log for details.\n` + e.message;
+      throw e;
+    }
     finally {
       popFetchPool();
     }
     if (!res.ok)
-      throw Error(`${res.status} ${res.statusText} ${res.url}`);
+      throw Error(`${res.status} ${res.statusText} ${res.url}${fromParent(parent)}`);
+    return res;
+  }
+
+  async function fetchModule (url, fetchOpts, parent) {
+    const res = await doFetch(url, fetchOpts, parent);
     const contentType = res.headers.get('content-type');
     if (jsContentType.test(contentType))
       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}"`);
+      throw Error(`Unsupported Content-Type "${contentType}" loading ${url}${fromParent(parent)}. Modules must be served with a valid MIME type like application/javascript.`);
   }
 
-  function getOrCreateLoad (url, fetchOpts, source) {
+  function getOrCreateLoad (url, fetchOpts, parent, 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
@@ -618,12 +628,18 @@
       // 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) {
         // preload fetch options override fetch options (race)
         let t;
-        ({ r: load.r, s: source, t } = await (fetchCache[url] || doFetch(url, fetchOpts)));
+        ({ r: load.r, s: source, t } = await (fetchCache[url] || fetchModule(url, fetchOpts, parent)));
         if (t && !shimMode) {
           if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
             throw Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
@@ -657,7 +673,7 @@
         if (skip && skip.test(r)) return { b: r };
         if (childFetchOpts.integrity)
           childFetchOpts = Object.assign({}, childFetchOpts, { integrity: undefined });
-        return getOrCreateLoad(r, childFetchOpts).f;
+        return getOrCreateLoad(r, childFetchOpts, load.r).f;
       }))).filter(l => l);
     });
 
@@ -740,9 +756,9 @@
     if (acceptingImportMaps) {
       importMapPromise = importMapPromise
         .then(async () => {
-          importMap = resolveAndComposeImportMap(script.src ? await (await fetchHook(script.src)).json() : JSON.parse(script.innerHTML), script.src || baseUrl, importMap);
+          importMap = resolveAndComposeImportMap(script.src ? await (await doFetch(script.src, getFetchOpts(script))).json() : JSON.parse(script.innerHTML), script.src || baseUrl, importMap);
         })
-        .catch(error => setTimeout(() => { throw error }));
+        .catch(throwError);
       if (!shimMode)
         acceptingImportMaps = false;
     }
@@ -764,15 +780,7 @@
     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 => {
-      // 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);
-    });
+    const loadPromise = topLevelLoad(script.src || baseUrl, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, blocks && lastStaticLoadPromise).catch(throwError);
     if (blocks)
       lastStaticLoadPromise = loadPromise.then(readyStateCompleteCheck);
     if (isDomContentLoadedScript)
@@ -786,11 +794,11 @@
     link.ep = true;
     if (fetchCache[link.href])
       return;
-    fetchCache[link.href] = doFetch(link.href, getFetchOpts(link));
+    fetchCache[link.href] = fetchModule(link.href, getFetchOpts(link));
   }
 
   function throwUnresolved (id, parentUrl) {
-    throw Error("Unable to resolve specifier '" + id + (parentUrl ? "' from " + parentUrl : "'"));
+    throw Error(`Unable to resolve specifier '${id}'${fromParent(parentUrl)}`);
   }
 
 })();

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

@@ -1,40 +1,81 @@
-/* ES Module Shims Wasm 1.4.2 */
+/* ES Module Shims Wasm 1.4.6 */
 (function () {
 
-  const uaMatch = navigator.userAgent.match(/(Edge|Safari)\/\d+\.\d+/);
-  const edge = uaMatch && uaMatch[1] === 'Edge';
-  const safari = uaMatch && uaMatch[1] === 'Safari';
+  const noop = () => {};
 
-  let baseUrl;
+  const optionsScript = document.querySelector('script[type=esms-options]');
 
-  function createBlob (source, type = 'text/javascript') {
-    return URL.createObjectURL(new Blob([source], { type }));
+  const esmsInitOptions = optionsScript ? JSON.parse(optionsScript.innerHTML) : self.esmsInitOptions ? self.esmsInitOptions : {};
+
+  let shimMode = !!esmsInitOptions.shimMode;
+  const resolveHook = globalHook(shimMode && esmsInitOptions.resolve);
+
+  const skip = esmsInitOptions.skip ? new RegExp(esmsInitOptions.skip) : null;
+
+  let nonce = esmsInitOptions.nonce;
+
+  const mapOverrides = esmsInitOptions.mapOverrides;
+
+  if (!nonce) {
+    const nonceElement = document.querySelector('script[nonce]');
+    if (nonceElement)
+      nonce = nonceElement.nonce || nonceElement.getAttribute('nonce');
   }
 
-  const noop = () => {};
+  const onerror = globalHook(esmsInitOptions.onerror || noop);
+  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: ^ TypeError module failure has been polyfilled`);
+
+  const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
+
+  const fetchHook = esmsInitOptions.fetch ? globalHook(esmsInitOptions.fetch) : fetch;
+
+  function globalHook (name) {
+    return typeof name === 'string' ? self[name] : name;
+  }
+
+  const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
+  const cssModulesEnabled = enable.includes('css-modules');
+  const jsonModulesEnabled = enable.includes('json-modules');
+
+  function setShimMode () {
+    shimMode = true;
+  }
+
+  const edge = !!navigator.userAgent.match(/Edge\/\d+\.\d+/);
 
-  const baseEl = document.querySelector('base[href]');
-  if (baseEl)
-    baseUrl = baseEl.href;
+  const baseUrl = document.baseURI;
 
-  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 createBlob (source, type = 'text/javascript') {
+    return URL.createObjectURL(new Blob([source], { type }));
   }
 
+  const eoop = err => setTimeout(() => { throw err });
+
+  const throwError = err => { (window.reportError || window.safari && console.error || eoop)(err), void onerror(err); };
+
   function isURL (url) {
     try {
       new URL(url);
       return true;
     }
-    catch(_) {
+    catch (_) {
       return false;
     }
+  }
+
+  const backslashRegEx = /\\/g;
+
+  /*
+   * Import maps implementation
+   *
+   * To make lookups fast we pre-resolve the entire import map
+   * and then match based on backtracked hash lookups
+   *
+   */
+  function resolveUrl (relUrl, parentUrl) {
+    return resolveIfNotPlainOrUrl(relUrl, parentUrl) || (relUrl.indexOf(':') !== -1 ? relUrl : resolveIfNotPlainOrUrl('./' + relUrl, parentUrl));
   }
 
-  const backslashRegEx = /\\/g;
   function resolveIfNotPlainOrUrl (relUrl, parentUrl) {
     // strip off any trailing query params or hashes
     parentUrl = parentUrl && parentUrl.split('#')[0].split('?')[0];
@@ -87,28 +128,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)
@@ -117,35 +155,6 @@
     }
   }
 
-  /*
-   * Import maps implementation
-   *
-   * To make lookups fast we pre-resolve the entire import map
-   * and then match based on backtracked hash lookups
-   *
-   */
-  function resolveUrl (relUrl, parentUrl) {
-    return resolveIfNotPlainOrUrl(relUrl, parentUrl) || (relUrl.indexOf(':') !== -1 ? relUrl : resolveIfNotPlainOrUrl('./' + relUrl, parentUrl));
-  }
-
-  function resolveAndComposePackages (packages, outPackages, baseUrl, parentMap) {
-    for (let p in packages) {
-      const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
-      if (outPackages[resolvedLhs]) {
-        throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
-      }
-      let target = packages[p];
-      if (typeof target !== 'string')
-        continue;
-      const mapped = resolveImportMap(parentMap, resolveIfNotPlainOrUrl(target, baseUrl) || target, baseUrl);
-      if (mapped) {
-        outPackages[resolvedLhs] = mapped;
-        continue;
-      }
-      console.warn(`Mapping "${p}" -> "${packages[p]}" does not resolve`);
-    }
-  }
-
   function resolveAndComposeImportMap (json, baseUrl, parentMap) {
     const outMap = { imports: Object.assign({}, parentMap.imports), scopes: Object.assign({}, parentMap.scopes) };
 
@@ -181,6 +190,7 @@
     }
   }
 
+
   function resolveImportMap (importMap, resolvedOrPlain, parentUrl) {
     let scopeUrl = parentUrl && getMatch(parentUrl, importMap.scopes);
     while (scopeUrl) {
@@ -190,42 +200,24 @@
       scopeUrl = getMatch(scopeUrl.slice(0, scopeUrl.lastIndexOf('/')), importMap.scopes);
     }
     return applyPackages(resolvedOrPlain, importMap.imports) || resolvedOrPlain.indexOf(':') !== -1 && resolvedOrPlain;
-  }
-
-  const optionsScript = document.querySelector('script[type=esms-options]');
-
-  const esmsInitOptions = optionsScript ? JSON.parse(optionsScript.innerHTML) : self.esmsInitOptions ? self.esmsInitOptions : {};
-
-  let shimMode = !!esmsInitOptions.shimMode;
-  const resolveHook = globalHook(shimMode && esmsInitOptions.resolve);
-
-  const skip = esmsInitOptions.skip ? new RegExp(esmsInitOptions.skip) : null;
-
-  let nonce = esmsInitOptions.nonce;
-
-  if (!nonce) {
-    const nonceElement = document.querySelector('script[nonce]');
-    if (nonceElement)
-      nonce = nonceElement.nonce || nonceElement.getAttribute('nonce');
-  }
-
-  const onerror = globalHook(esmsInitOptions.onerror || noop);
-  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: "Uncaught TypeError" module failure has been polyfilled`);
-
-  const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
-
-  const fetchHook = esmsInitOptions.fetch ? globalHook(esmsInitOptions.fetch) : fetch;
-
-  function globalHook (name) {
-    return typeof name === 'string' ? self[name] : name;
   }
 
-  const enable = Array.isArray(esmsInitOptions.polyfillEnable) ? esmsInitOptions.polyfillEnable : [];
-  const cssModulesEnabled = enable.includes('css-modules');
-  const jsonModulesEnabled = enable.includes('json-modules');
-
-  function setShimMode () {
-    shimMode = true;
+  function resolveAndComposePackages (packages, outPackages, baseUrl, parentMap) {
+    for (let p in packages) {
+      const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
+      if ((!shimMode || !mapOverrides) && outPackages[resolvedLhs] && (outPackages[resolvedLhs] !== packages[resolvedLhs])) {
+        throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
+      }
+      let target = packages[p];
+      if (typeof target !== 'string')
+        continue;
+      const mapped = resolveImportMap(parentMap, resolveIfNotPlainOrUrl(target, baseUrl) || target, baseUrl);
+      if (mapped) {
+        outPackages[resolvedLhs] = mapped;
+        continue;
+      }
+      console.warn(`Mapping "${p}" -> "${packages[p]}" does not resolve`);
+    }
   }
 
   let supportsDynamicImportCheck = false;
@@ -313,7 +305,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) {
@@ -388,7 +379,7 @@
       await lastStaticLoadPromise;
       return dynamicImport(source ? createBlob(source) : url, { errUrl: url || source });
     }
-    const load = getOrCreateLoad(url, fetchOpts, source);
+    const load = getOrCreateLoad(url, fetchOpts, null, source);
     const seen = {};
     await loadAll(load, seen);
     lastLoad = undefined;
@@ -430,7 +421,12 @@
     }
   }
 
-  async function importShim (id, parentUrl = baseUrl, _assertion) {
+  async function importShim (id, ...args) {
+    // parentUrl if present will be the last argument
+    let parentUrl = args[args.length - 1];
+    if (typeof parentUrl !== 'string') {
+      parentUrl = baseUrl;
+    }
     // needed for shim check
     await initPromise;
     if (acceptingImportMaps || shimMode || !baselinePassthrough) {
@@ -484,7 +480,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,24 +501,24 @@
           }
           // 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, statementEnd)}, ${urlJsString(load.r)}`;
+          lastIndex = statementEnd;
         }
       }
 
@@ -561,42 +557,56 @@
       p.shift()();
   }
 
-  async function doFetch (url, fetchOpts) {
+  function fromParent (parent) {
+    return parent ? ` imported from ${parent}` : '';
+  }
+
+  async function doFetch (url, fetchOpts, parent) {
     if (enforceIntegrity && !fetchOpts.integrity)
-      throw Error(`No integrity for ${url}`);
+      throw Error(`No integrity for ${url}${fromParent(parent)}.`);
     const poolQueue = pushFetchPool();
     if (poolQueue) await poolQueue;
     try {
       var res = await fetchHook(url, fetchOpts);
     }
+    catch (e) {
+      e.message = `Unable to fetch ${url}${fromParent(parent)} - see network log for details.\n` + e.message;
+      throw e;
+    }
     finally {
       popFetchPool();
     }
     if (!res.ok)
-      throw Error(`${res.status} ${res.statusText} ${res.url}`);
+      throw Error(`${res.status} ${res.statusText} ${res.url}${fromParent(parent)}`);
+    return res;
+  }
+
+  async function fetchModule (url, fetchOpts, parent) {
+    const res = await doFetch(url, fetchOpts, parent);
     const contentType = res.headers.get('content-type');
     if (jsContentType.test(contentType))
       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}"`);
+      throw Error(`Unsupported Content-Type "${contentType}" loading ${url}${fromParent(parent)}. Modules must be served with a valid MIME type like application/javascript.`);
   }
 
-  function getOrCreateLoad (url, fetchOpts, source) {
+  function getOrCreateLoad (url, fetchOpts, parent, 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
@@ -616,12 +626,18 @@
       // 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) {
         // preload fetch options override fetch options (race)
         let t;
-        ({ r: load.r, s: source, t } = await (fetchCache[url] || doFetch(url, fetchOpts)));
+        ({ r: load.r, s: source, t } = await (fetchCache[url] || fetchModule(url, fetchOpts, parent)));
         if (t && !shimMode) {
           if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
             throw Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
@@ -655,7 +671,7 @@
         if (skip && skip.test(r)) return { b: r };
         if (childFetchOpts.integrity)
           childFetchOpts = Object.assign({}, childFetchOpts, { integrity: undefined });
-        return getOrCreateLoad(r, childFetchOpts).f;
+        return getOrCreateLoad(r, childFetchOpts, load.r).f;
       }))).filter(l => l);
     });
 
@@ -738,9 +754,9 @@
     if (acceptingImportMaps) {
       importMapPromise = importMapPromise
         .then(async () => {
-          importMap = resolveAndComposeImportMap(script.src ? await (await fetchHook(script.src)).json() : JSON.parse(script.innerHTML), script.src || baseUrl, importMap);
+          importMap = resolveAndComposeImportMap(script.src ? await (await doFetch(script.src, getFetchOpts(script))).json() : JSON.parse(script.innerHTML), script.src || baseUrl, importMap);
         })
-        .catch(error => setTimeout(() => { throw error }));
+        .catch(throwError);
       if (!shimMode)
         acceptingImportMaps = false;
     }
@@ -762,15 +778,7 @@
     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 => {
-      // 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);
-    });
+    const loadPromise = topLevelLoad(script.src || baseUrl, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, blocks && lastStaticLoadPromise).catch(throwError);
     if (blocks)
       lastStaticLoadPromise = loadPromise.then(readyStateCompleteCheck);
     if (isDomContentLoadedScript)
@@ -784,11 +792,11 @@
     link.ep = true;
     if (fetchCache[link.href])
       return;
-    fetchCache[link.href] = doFetch(link.href, getFetchOpts(link));
+    fetchCache[link.href] = fetchModule(link.href, getFetchOpts(link));
   }
 
   function throwUnresolved (id, parentUrl) {
-    throw Error("Unable to resolve specifier '" + id + (parentUrl ? "' from " + parentUrl : "'"));
+    throw Error(`Unable to resolve specifier '${id}'${fromParent(parentUrl)}`);
   }
 
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-module-shims",
-  "version": "1.4.2",
+  "version": "1.4.6",
   "description": "Shims for the latest ES module features",
   "main": "dist/es-module-shims.js",
   "exports": {
@@ -14,7 +14,7 @@
     "footprint": "npm run build ; cat dist/es-module-shims.js | terser -mc | brotli | wc -c",
     "footprint:wasm": "npm run build ; cat dist/es-module-shims.wasm.js | terser -mc | brotli | wc -c",
     "prepublishOnly": "npm run build",
-    "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": "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 ; npm run test:test-shim-map-overrides",
     "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",
@@ -23,7 +23,8 @@
     "test:test-polyfill-wasm": "cross-env TEST_NAME=test-polyfill-wasm node test/server.mjs",
     "test:test-preload-case": "cross-env TEST_NAME=test-preload-case node test/server.mjs",
     "test:test-revoke-blob-urls": "cross-env TEST_NAME=test-revoke-blob-urls node test/server.mjs",
-    "test:test-shim": "cross-env TEST_NAME=test-shim node test/server.mjs"
+    "test:test-shim": "cross-env TEST_NAME=test-shim node test/server.mjs",
+    "test:test-shim-map-overrides": "cross-env TEST_NAME=test-shim-map-overrides node test/server.mjs"
   },
   "types": "index.d.ts",
   "type": "module",
@@ -49,7 +50,8 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.58.0",
     "speed-limiter": "^1.0.2",
-    "tachometer": "^0.5.10"
+    "tachometer": "^0.5.10",
+    "terser": "^5.10.0"
   },
   "directories": {
     "test": "test"