es-module-shims 1.3.6 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+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)
+* Note: Polyfill mode console note when expected native errors are present (https://github.com/guybedford/es-module-shims/pull/237)
+
 ES Module Shims 1.3.6 (2021/12/07)
 * Fix resolve hook via esms options (#233, @ffortier)
 

package/README.md

@@ -1,21 +1,20 @@
 # ES Module Shims
 
-[Release Notes](CHANGELOG.md)
+Shims modern ES Modules features like import maps on top of the baseline modules support in browsers supported by [95% of users](https://caniuse.com/#feat=es6-module).
 
-[93% of users](https://caniuse.com/#feat=es6-module) are now running browsers with baseline support for ES modules. At the same time Chromium ships modern native module features and import maps support to [67% of users](https://caniuse.com/import-maps).
+When running in polyfill mode, [the 67% of users](https://caniuse.com/import-maps) with import maps entirely bypass the shim code entirely.
 
-_It turns out that we can actually polyfill import maps and other new modules features on top of these baseline implementations in a performant 12KB shim._
+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).
 
-This includes support for:
+The following modules features are polyfilled:
 
 * [Import Maps](#import-maps) support.
 * 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.
+* [JSON](#json-modules) and [CSS modules](#css-modules) with import assertions (when enabled).
 * [`<link rel="modulepreload">` polyfill](#modulepreload) in non Chromium browsers for both shimmed and unshimmed preloading scenarios.
-* Comprehensive [CSP support](#csp-support) using nonces, no `unsafe-eval` or `blob:` policy being necessary.
 
-In addition custom [resolve](#resolve-hook) and [fetch](#fetch-hook) hooks can be implemented allowing for streaming in-browser transform workflows to support custom module types.
+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.
 
 Because we are still using the native module loader the edge cases work out comprehensively, including:
 
@@ -23,54 +22,34 @@ Because we are still using the native module loader the edge cases work out comp
 * Dynamic import expressions (`import('src/' + varname')`)
 * Circular references, with the execption that live bindings are disabled for the first unexecuted circular parent.
 
-Due to the use of a tiny [JS tokenizer for ES module syntax only](https://github.com/guybedford/es-module-lexer), with very simple rewriting rules, transformation is very fast.
-
 ## Usage
 
-Include ES Module Shims with a `async` attribute on the script:
-
-For example, from CDN:
+Include ES Module Shims with a `async` attribute on the script, then include an import map and module scripts normally:
 
 ```html
-<!-- UNPKG -->
-<script async src="https://unpkg.com/es-module-shims@1.3.0/dist/es-module-shims.js"></script>
-
-<!-- JSPM.IO -->
-<script async src="https://ga.jspm.io/npm:es-module-shims@1.3.0/dist/es-module-shims.js"></script>
-```
-
-Then there are two ways to use ES Module Shims: Polyfill Mode and [Shim Mode](#shim-mode).
-
-### Benchmarks
-
-ES Module Shims is designed for production performance. A [comprehensive benchmark suite](bench/README.md) tracks multiple loading scenarios for the project.
-
-Benchmark summary:
-
-* [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
+<script async src="https://ga.jspm.io/npm:es-module-shims@1.3.6/dist/es-module-shims.js"></script>
 
-Write your HTML modules like you would in the latest Chrome:
-
-```html
+<!-- https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9Az0C1K1jMAAKFS5w0gAA -->
 <script type="importmap">
 {
   "imports": {
-    "app": "./src/app.js"
+    "react": "https://ga.jspm.io/npm:react@18.0.0-rc.0/index.js"
+  },
+  "scopes": {
+    "https://ga.jspm.io/npm:react@18.0.0-rc.0/": {
+      "object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js"
+    }
   }
 }
 </script>
-<script type="module">import 'app'</script>
-```
 
-and ES Module Shims will make it work in [all browsers with any ES Module Support](#browser-support).
-
-> `<script type="importmap">` should always be placed before any `<script type="module">` as per native support in browsers.
+<script type="module">
+  import react from 'react';
+  console.log(react);
+</script>
+```
 
-You will see a console error in browsers without import maps support like:
+In browsers without import maps support, a console error will be given:
 
 ```
 Uncaught TypeError: Failed to resolve module specifier "app". Relative references must start with either "/", "./", or "../".
@@ -81,25 +60,23 @@ This execution failure is a feature - it avoids the polyfill causing double exec
 
 This is because the polyfill cannot disable the native loader - instead it will only execute modules that would otherwise fail resolving or parsing to avoid duplicate fetches or executions that would cause performance and reliability issues.
 
-If using CSS modules or JSON modules, since these features are relatively new, they require manually enabling using the initialization option:
+### Shim Mode
 
-```html
-<script>
-window.esmsInitOptions = { polyfillEnable: ['css-modules', 'json-modules'] }
-</script>
-```
+Shim mode is an alternative to polyfill mode and doesn't rely on native modules erroring - instead it is triggered by the existence of any `<script type="importmap-shim">` or `<script type="module-shim">`, or when explicitly setting the [`shimMode` init option](#shim-mode-option).
 
-To verify when the polyfill is actively engaging as opposed to relying on the native loader, [a `polyfill` hook](#polyfill-hook) is provided.
+In shim mode, only the above `importmap-shim` and `module-shim` tags will be parsed and executed by ES Module Shims.
 
-See the [Polyfill Mode Details](#polyfill-mode-details) section for more information about how the polyfill works and what options are available.
+Shim mode also provides some additional features that aren't yet natively supported such as supporting multiple import maps, [external import maps](#external-import-maps) with a `"src"` attribute, [dynamically injecting import maps](#dynamic-import-maps), and [reading current import map state](#reading-current-import-map-state), which can be useful in certain applications.
 
-### Shim Mode
+## Benchmarks
 
-Shim mode is an alternative to polyfill mode and doesn't rely on native modules erroring - instead it is triggered by the existence of any `<script type="importmap-shim">` or `<script type="module-shim">`, or when explicitly setting the [`shimMode` init option](#shim-mode-option).
+ES Module Shims is designed for production performance. A [comprehensive benchmark suite](bench/README.md) tracks multiple loading scenarios for the project.
 
-In shim mode, normal module scripts and import maps are entirely ignored and only the above shim tags will be parsed and executed by ES Module Shims instead.
+Benchmark summary:
 
-Shim mode also provides some additional features that aren't yet natively supported such as supporting multiple import maps, [external import maps](#external-import-maps) with a `"src"` attribute, [dynamically injecting import maps](#dynamic-import-maps), and [reading current import map state](#reading-current-import-map-state), which can be useful in certain applications.
+* [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.
 
 ## Features
 
@@ -107,7 +84,7 @@ Shim mode also provides some additional features that aren't yet natively suppor
 
 Works in all browsers with [baseline ES module support](https://caniuse.com/#feat=es6-module).
 
-#### Browser Compatibility with ES Module Shims:
+Browser Compatibility **with ES Module Shims**:
 
 | ES Modules Features                | Chrome (61+)                         | Firefox (60+)                        | Safari (10.1+)                       | Edge (17+)                           |
 | ---------------------------------- | ------------------------------------ | ------------------------------------ | ------------------------------------ | ------------------------------------ |
@@ -127,7 +104,7 @@ Works in all browsers with [baseline ES module support](https://caniuse.com/#fea
 * 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:
+Browser compatibility **without ES module shims**:
 
 | ES Modules Features                | Chrome (61+)                         | Firefox (60+)                        | Safari (10.1+)                       | Edge (17+)                           |
 | ---------------------------------- | ------------------------------------ | ------------------------------------ | ------------------------------------ | ------------------------------------ |
@@ -351,7 +328,15 @@ In browsers with variable feature support, sources are analyzed with module spec
 
 The current default native baseline for the ES module shims polyfill mode is browsers supporting import maps.
 
-If using more modern features like CSS Modules or JSON Modules, these need to be manually enabled via the [`polyfillEnable` init option](#polyfill-enable-option) to raise the native baseline to only browsers supporting these features.
+If using more modern features like CSS Modules or JSON Modules, these need to be manually enabled via the [`polyfillEnable` init option](#polyfill-enable-option) to raise the native baseline to only browsers supporting these features:
+
+```html
+<script>
+window.esmsInitOptions = { polyfillEnable: ['css-modules', 'json-modules'] }
+</script>
+```
+
+To verify when the polyfill is actively engaging as opposed to relying on the native loader, [a `polyfill` hook](#polyfill-hook) is also provided.
 
 #### Polyfill Edge Case: Dynamic Import
 
@@ -421,6 +406,18 @@ Adding the `"noshim"` attribute to the script tag will also ensure that ES Modul
 
 Provide a `esmsInitOptions` on the global scope before `es-module-shims` is loaded to configure various aspects of the module loading process:
 
+* [shimMode](#shim-mode-option)
+* [polyfillEnable](#polyfill-enable-option)
+* [enforceIntegrity](#enforce-integrity)
+* [nonce](#nonce)
+* [noLoadEventRetriggers](#no-load-event-retriggers)
+* [skip](#skip-processing)
+* [onerror](#error-hook)
+* [onpolyfill](#polyfill-hook)
+* [resolve](#resolve-hook)
+* [fetch](#fetch-hook)
+* [revokeBlobURLs](#revoke-blob-urls)
+
 ```html
 <script>
 window.esmsInitOptions = {
@@ -430,10 +427,11 @@ window.esmsInitOptions = {
   noLoadEventRetriggers: true, // default false
   skip: /^https:\/\/cdn\.com/, // defaults to null
   onerror: (e) => { /*...*/ }, // default noop
-  onpolyfill: () => {},
+  onpolyfill: () => {}, // default logs to the console
   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
 }
 </script>
 <script async src="es-module-shims.js"></script>
@@ -488,6 +486,26 @@ Currently this option supports just `"css-modules"` and `"json-modules"`.
 </script>
 ```
 
+### Enforce Integrity
+
+When enabled, `enforceIntegrity` will ensure that all modules loaded through ES Module Shims must have integrity defined either on a `<link rel="modulepreload" integrity="...">` or on
+a `<link rel="modulepreload-shim" integrity="...">` preload tag in shim mode. Modules without integrity will throw at fetch time.
+
+For example in the following, only the listed `app.js` and `dep.js` modules will be able to execute with the provided integrity:
+
+```html
+<script type="esms-options">{ "enforceIntegrity": true }</script>
+<link rel="modulepreload-shim" href="/app.js" integrity="sha384-..." />\
+<link rel="modulepreload-shim" href="/dep.js" integrity="sha384-..." />
+<script type="module-shim">
+  import '/app.js';
+</script>
+```
+
+Strong execution guarantees are only possible in shim mode since in polyfill mode it is not possible to stop the native loader from executing code without an integrity.
+
+Future versions of this option may provide support for origin-specific allow lists.
+
 ### Nonce
 
 The `nonce` option allows setting a CSP nonce to be used with all script injections for full CSP compatibility supported by the [CSP build](#csp-build) of ES Module Shims.
@@ -552,6 +570,8 @@ window.polyfilling = () => console.log('The polyfill is actively applying');
 </script>
 ```
 
+The default hook will log a message to the console with `console.info` noting that polyfill mode is enabled and that the native error can be ignored.
+
 In the above, running in latest Chromium browsers, nothing will be logged, while running in an older browser that does not support newer features
 like import maps the console log will be output.
 

package/dist/es-module-shims.js

@@ -1,4 +1,4 @@
-/* ES Module Shims 1.3.6 */
+/* ES Module Shims 1.4.0 */
 (function () {
 
   const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
@@ -130,17 +130,17 @@
     for (let p in packages) {
       const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
       if (outPackages[resolvedLhs]) {
-        throw new Error(`Dynamic import map rejected: Overrides entry "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
+        throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
       }
       let target = packages[p];
-      if (typeof target !== 'string') 
+      if (typeof target !== 'string')
         continue;
       const mapped = resolveImportMap(parentMap, resolveIfNotPlainOrUrl(target, baseUrl) || target, baseUrl);
       if (mapped) {
         outPackages[resolvedLhs] = mapped;
         continue;
       }
-      targetWarning(p, packages[p], 'bare specifier did not resolve');
+      console.warn(`Mapping "${p}" -> "${packages[p]}" does not resolve`);
     }
   }
 
@@ -175,17 +175,10 @@
     if (pkgName) {
       const pkg = packages[pkgName];
       if (pkg === null) return;
-      if (id.length > pkgName.length && pkg[pkg.length - 1] !== '/')
-        targetWarning(pkgName, pkg, "should have a trailing '/'");
-      else
-        return pkg + id.slice(pkgName.length);
+      return pkg + id.slice(pkgName.length);
     }
   }
 
-  function targetWarning (match, target, msg) {
-    console.warn("Package target " + msg + ", resolving target '" + target + "' for " + match);
-  }
-
   function resolveImportMap (importMap, resolvedOrPlain, parentUrl) {
     let scopeUrl = parentUrl && getMatch(parentUrl, importMap.scopes);
     while (scopeUrl) {
@@ -215,9 +208,9 @@
   }
 
   const onerror = globalHook(esmsInitOptions.onerror || noop);
-  const onpolyfill = globalHook(esmsInitOptions.onpolyfill || noop);
+  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: "Uncaught TypeError" module failure has been polyfilled`);
 
-  const { revokeBlobURLs, noLoadEventRetriggers } = esmsInitOptions;
+  const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
 
   const fetchHook = esmsInitOptions.fetch ? globalHook(esmsInitOptions.fetch) : fetch;
 
@@ -340,34 +333,36 @@
   const initPromise = featureDetectionPromise.then(() => {
     // shim mode is determined on initialization, no late shim mode
     if (!shimMode) {
-      let seenScript = false;
-      for (const script of document.querySelectorAll('script[type="module-shim"],script[type="importmap-shim"],script[type="module"],script[type="importmap"]')) {
-        if (!seenScript && script.type === 'module')
-          seenScript = true;
-        if (script.type.endsWith('-shim')) {
-          setShimMode();
-          break;
-        }
-        if (seenScript && script.type === 'importmap') {
-          importMapSrcOrLazy = true;
-          break;
+      if (document.querySelectorAll('script[type=module-shim],script[type=importmap-shim],link[rel=modulepreload-shim]').length) {
+        setShimMode();
+      }
+      else {
+        let seenScript = false;
+        for (const script of document.querySelectorAll('script[type=module],script[type=importmap]')) {
+          if (!seenScript) {
+            if (script.type === 'module')
+              seenScript = true;
+          }
+          else if (script.type === 'importmap') {
+            importMapSrcOrLazy = true;
+            break;
+          }
         }
       }
     }
     baselinePassthrough = supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy && !false;
-    if (!baselinePassthrough) onpolyfill();
     if (shimMode || !baselinePassthrough) {
       new MutationObserver(mutations => {
         for (const mutation of mutations) {
           if (mutation.type !== 'childList') continue;
           for (const node of mutation.addedNodes) {
             if (node.tagName === 'SCRIPT') {
-              if (!shimMode && node.type === 'module' || shimMode && node.type === 'module-shim')
+              if (node.type === (shimMode ? 'module-shim' : 'module'))
                 processScript(node);
-              if (!shimMode && node.type === 'importmap' || shimMode && node.type === 'importmap-shim')
+              if (node.type === (shimMode ? 'importmap-shim' : 'importmap'))
                 processImportMap(node);
             }
-            else if (node.tagName === 'LINK' && node.rel === 'modulepreload')
+            else if (node.tagName === 'LINK' && node.rel === (shimMode ? 'modulepreload-shim' : 'modulepreload'))
               processPreload(node);
           }
         }
@@ -378,8 +373,9 @@
     }
   });
   let importMapPromise = initPromise;
-
+  let firstPolyfillLoad = true;
   let acceptingImportMaps = true;
+
   async function topLevelLoad (url, fetchOpts, source, nativelyLoaded, lastStaticLoadPromise) {
     if (!shimMode)
       acceptingImportMaps = false;
@@ -403,6 +399,10 @@
       if (revokeBlobURLs) revokeObjectURLs(Object.keys(seen));
       return module;
     }
+    if (firstPolyfillLoad && !shimMode && load.n && nativelyLoaded) {
+      onpolyfill();
+      firstPolyfillLoad = false;
+    }
     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)
@@ -544,7 +544,6 @@
   const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
   const jsonContentType = /^(text|application)\/json(;|$)/;
   const cssContentType = /^(text|application)\/css(;|$)/;
-  const wasmContentType = /^application\/wasm(;|$)/;
 
   const cssUrlRegEx = /url\(\s*(?:(["'])((?:\\.|[^\n\\"'])+)\1|((?:\\.|[^\s,"'()\\])+))\s*\)/g;
 
@@ -562,6 +561,8 @@
   }
 
   async function doFetch (url, fetchOpts) {
+    if (enforceIntegrity && !fetchOpts.integrity)
+      throw Error(`No integrity for ${url}`);
     const poolQueue = pushFetchPool();
     if (poolQueue) await poolQueue;
     try {
@@ -571,7 +572,7 @@
       popFetchPool();
     }
     if (!res.ok)
-      throw new Error(`${res.status} ${res.statusText} ${res.url}`);
+      throw Error(`${res.status} ${res.statusText} ${res.url}`);
     const contentType = res.headers.get('content-type');
     if (jsContentType.test(contentType))
       return { r: res.url, s: await res.text(), t: 'js' };
@@ -581,10 +582,8 @@
       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})`))
     });export default s;`, t: 'css' };
-    else if (wasmContentType.test(contentType))
-      throw new Error('WASM modules not supported');
     else
-      throw new Error(`Unknown Content-Type "${contentType}"`);
+      throw Error(`Unsupported Content-Type "${contentType}"`);
   }
 
   function getOrCreateLoad (url, fetchOpts, source) {
@@ -624,7 +623,7 @@
         ({ r: load.r, s: source, t } = await (fetchCache[url] || doFetch(url, fetchOpts)));
         if (t && !shimMode) {
           if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
-            throw new Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
+            throw Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
           if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions)
             load.n = true;
         }
@@ -663,9 +662,9 @@
   }
 
   function processScriptsAndPreloads () {
-    for (const script of document.querySelectorAll(shimMode ? 'script[type="module-shim"]' : 'script[type="module"]'))
+    for (const script of document.querySelectorAll(shimMode ? 'script[type=module-shim]' : 'script[type=module]'))
       processScript(script);
-    for (const link of document.querySelectorAll('link[rel="modulepreload"]'))
+    for (const link of document.querySelectorAll(shimMode ? 'link[rel=modulepreload-shim]' : 'link[rel=modulepreload]'))
       processPreload(link);
   }
 
@@ -763,7 +762,8 @@
     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 => {
-      setTimeout(() => { throw e });
+      // This used to be a setTimeout(() => { throw e }) but this breaks Safari stacks
+      console.error(e);
       onerror(e);
     });
     if (blocks)

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

@@ -1,4 +1,4 @@
-/* ES Module Shims Wasm 1.3.6 */
+/* ES Module Shims Wasm 1.4.0 */
 (function () {
 
   const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
@@ -130,17 +130,17 @@
     for (let p in packages) {
       const resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;
       if (outPackages[resolvedLhs]) {
-        throw new Error(`Dynamic import map rejected: Overrides entry "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
+        throw Error(`Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`);
       }
       let target = packages[p];
-      if (typeof target !== 'string') 
+      if (typeof target !== 'string')
         continue;
       const mapped = resolveImportMap(parentMap, resolveIfNotPlainOrUrl(target, baseUrl) || target, baseUrl);
       if (mapped) {
         outPackages[resolvedLhs] = mapped;
         continue;
       }
-      targetWarning(p, packages[p], 'bare specifier did not resolve');
+      console.warn(`Mapping "${p}" -> "${packages[p]}" does not resolve`);
     }
   }
 
@@ -175,17 +175,10 @@
     if (pkgName) {
       const pkg = packages[pkgName];
       if (pkg === null) return;
-      if (id.length > pkgName.length && pkg[pkg.length - 1] !== '/')
-        targetWarning(pkgName, pkg, "should have a trailing '/'");
-      else
-        return pkg + id.slice(pkgName.length);
+      return pkg + id.slice(pkgName.length);
     }
   }
 
-  function targetWarning (match, target, msg) {
-    console.warn("Package target " + msg + ", resolving target '" + target + "' for " + match);
-  }
-
   function resolveImportMap (importMap, resolvedOrPlain, parentUrl) {
     let scopeUrl = parentUrl && getMatch(parentUrl, importMap.scopes);
     while (scopeUrl) {
@@ -215,9 +208,9 @@
   }
 
   const onerror = globalHook(esmsInitOptions.onerror || noop);
-  const onpolyfill = globalHook(esmsInitOptions.onpolyfill || noop);
+  const onpolyfill = esmsInitOptions.onpolyfill ? globalHook(esmsInitOptions.onpolyfill) : () => console.info(`OK: "Uncaught TypeError" module failure has been polyfilled`);
 
-  const { revokeBlobURLs, noLoadEventRetriggers } = esmsInitOptions;
+  const { revokeBlobURLs, noLoadEventRetriggers, enforceIntegrity } = esmsInitOptions;
 
   const fetchHook = esmsInitOptions.fetch ? globalHook(esmsInitOptions.fetch) : fetch;
 
@@ -338,34 +331,36 @@
   const initPromise = featureDetectionPromise.then(() => {
     // shim mode is determined on initialization, no late shim mode
     if (!shimMode) {
-      let seenScript = false;
-      for (const script of document.querySelectorAll('script[type="module-shim"],script[type="importmap-shim"],script[type="module"],script[type="importmap"]')) {
-        if (!seenScript && script.type === 'module')
-          seenScript = true;
-        if (script.type.endsWith('-shim')) {
-          setShimMode();
-          break;
-        }
-        if (seenScript && script.type === 'importmap') {
-          importMapSrcOrLazy = true;
-          break;
+      if (document.querySelectorAll('script[type=module-shim],script[type=importmap-shim],link[rel=modulepreload-shim]').length) {
+        setShimMode();
+      }
+      else {
+        let seenScript = false;
+        for (const script of document.querySelectorAll('script[type=module],script[type=importmap]')) {
+          if (!seenScript) {
+            if (script.type === 'module')
+              seenScript = true;
+          }
+          else if (script.type === 'importmap') {
+            importMapSrcOrLazy = true;
+            break;
+          }
         }
       }
     }
     baselinePassthrough = supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy && !false;
-    if (!baselinePassthrough) onpolyfill();
     if (shimMode || !baselinePassthrough) {
       new MutationObserver(mutations => {
         for (const mutation of mutations) {
           if (mutation.type !== 'childList') continue;
           for (const node of mutation.addedNodes) {
             if (node.tagName === 'SCRIPT') {
-              if (!shimMode && node.type === 'module' || shimMode && node.type === 'module-shim')
+              if (node.type === (shimMode ? 'module-shim' : 'module'))
                 processScript(node);
-              if (!shimMode && node.type === 'importmap' || shimMode && node.type === 'importmap-shim')
+              if (node.type === (shimMode ? 'importmap-shim' : 'importmap'))
                 processImportMap(node);
             }
-            else if (node.tagName === 'LINK' && node.rel === 'modulepreload')
+            else if (node.tagName === 'LINK' && node.rel === (shimMode ? 'modulepreload-shim' : 'modulepreload'))
               processPreload(node);
           }
         }
@@ -376,8 +371,9 @@
     }
   });
   let importMapPromise = initPromise;
-
+  let firstPolyfillLoad = true;
   let acceptingImportMaps = true;
+
   async function topLevelLoad (url, fetchOpts, source, nativelyLoaded, lastStaticLoadPromise) {
     if (!shimMode)
       acceptingImportMaps = false;
@@ -401,6 +397,10 @@
       if (revokeBlobURLs) revokeObjectURLs(Object.keys(seen));
       return module;
     }
+    if (firstPolyfillLoad && !shimMode && load.n && nativelyLoaded) {
+      onpolyfill();
+      firstPolyfillLoad = false;
+    }
     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)
@@ -542,7 +542,6 @@
   const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
   const jsonContentType = /^(text|application)\/json(;|$)/;
   const cssContentType = /^(text|application)\/css(;|$)/;
-  const wasmContentType = /^application\/wasm(;|$)/;
 
   const cssUrlRegEx = /url\(\s*(?:(["'])((?:\\.|[^\n\\"'])+)\1|((?:\\.|[^\s,"'()\\])+))\s*\)/g;
 
@@ -560,6 +559,8 @@
   }
 
   async function doFetch (url, fetchOpts) {
+    if (enforceIntegrity && !fetchOpts.integrity)
+      throw Error(`No integrity for ${url}`);
     const poolQueue = pushFetchPool();
     if (poolQueue) await poolQueue;
     try {
@@ -569,7 +570,7 @@
       popFetchPool();
     }
     if (!res.ok)
-      throw new Error(`${res.status} ${res.statusText} ${res.url}`);
+      throw Error(`${res.status} ${res.statusText} ${res.url}`);
     const contentType = res.headers.get('content-type');
     if (jsContentType.test(contentType))
       return { r: res.url, s: await res.text(), t: 'js' };
@@ -579,10 +580,8 @@
       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})`))
     });export default s;`, t: 'css' };
-    else if (wasmContentType.test(contentType))
-      throw new Error('WASM modules not supported');
     else
-      throw new Error(`Unknown Content-Type "${contentType}"`);
+      throw Error(`Unsupported Content-Type "${contentType}"`);
   }
 
   function getOrCreateLoad (url, fetchOpts, source) {
@@ -622,7 +621,7 @@
         ({ r: load.r, s: source, t } = await (fetchCache[url] || doFetch(url, fetchOpts)));
         if (t && !shimMode) {
           if (t === 'css' && !cssModulesEnabled || t === 'json' && !jsonModulesEnabled)
-            throw new Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
+            throw Error(`${t}-modules require <script type="esms-options">{ "polyfillEnable": ["${t}-modules"] }<${''}/script>`);
           if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions)
             load.n = true;
         }
@@ -661,9 +660,9 @@
   }
 
   function processScriptsAndPreloads () {
-    for (const script of document.querySelectorAll(shimMode ? 'script[type="module-shim"]' : 'script[type="module"]'))
+    for (const script of document.querySelectorAll(shimMode ? 'script[type=module-shim]' : 'script[type=module]'))
       processScript(script);
-    for (const link of document.querySelectorAll('link[rel="modulepreload"]'))
+    for (const link of document.querySelectorAll(shimMode ? 'link[rel=modulepreload-shim]' : 'link[rel=modulepreload]'))
       processPreload(link);
   }
 
@@ -761,7 +760,8 @@
     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 => {
-      setTimeout(() => { throw e });
+      // This used to be a setTimeout(() => { throw e }) but this breaks Safari stacks
+      console.error(e);
       onerror(e);
     });
     if (blocks)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-module-shims",
-  "version": "1.3.6",
+  "version": "1.4.0",
   "description": "Shims for the latest ES module features",
   "main": "dist/es-module-shims.js",
   "exports": {
@@ -11,8 +11,8 @@
     "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 | 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:test-base-href": "cross-env TEST_NAME=test-base-href node test/server.mjs",