importmap-rails 0.3.0 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35f2f43892e0e51811094caf1cc3239ff50cc84d6c25343ac462b77f284797a6
-  data.tar.gz: 0f91507c1daf180e40744350b7335cb1a24a5bc063963cc7df88b71695de5a35
+  metadata.gz: 29a1e2ec6414bcdbd4b6cd4c9726c838ea2f6b0179797f35c23ed0e9769495c1
+  data.tar.gz: 760b8781cf2c0a60ee4603440f183e6786c3147f537000b5ff0dd653fef3c754
 SHA512:
-  metadata.gz: 96a9a8b0bc81dc2f1f7ea085c9fa9cb765cfaf4545a643f5dac80e299ea9c12c6b3c7597361f67e79f9261c28298c68d0c06aea582efa8736ee79afcf5e0ad68
-  data.tar.gz: b82ae667a77b3b96665bcf053388b2a2573926c4920d44c2c69316929fbacb7f034dbdd6f11b71fefc2965deb59e954925b5289323e7498328d7ac86a3338c68
+  metadata.gz: 7a30aba12a32f3399b6d6e1c2853012866ba9720cf49e8ec4306932f3a0835478aac88a014e95bfda052d7415e5f1a37afb34404edbfd8b8df00e0aa6ffcfd1b
+  data.tar.gz: fba823c13bd453195561a892ac36e4855fb4d147b4c5b14099e6ad840b282184927e0496e89506d536e9af56eb93a8e3b267e83a699d46f4f76427230f9c51be

data/app/assets/javascripts/es-module-shims.js

@@ -1 +1 @@
-//= require ./es-module-shims@0.12.2.js
+//= require ./es-module-shims@0.12.8.js

data/app/assets/javascripts/{es-module-shims@0.12.2.js → es-module-shims@0.12.8.js}

@@ -1,6 +1,6 @@
-/* ES Module Shims 0.12.2 */
+/* ES Module Shims 0.12.8 */
 (function () {
-  // Temporary hack around https://github.com/guybedford/es-module-shims/issues/148
+  // Bail on all shimming for Chrome until https://github.com/guybedford/es-module-shims/issues/150
   if (navigator.userAgent.match("Chrome")) return
 
   const resolvedPromise = Promise.resolve();
@@ -16,6 +16,7 @@
   // support browsers without dynamic import support (eg Firefox 6x)
   let supportsDynamicImport = false;
   let supportsJsonAssertions = false;
+  let supportsCssAssertions = false;
   let dynamicImport;
   try {
     dynamicImport = (0, eval)('u=>import(u)');
@@ -53,6 +54,7 @@
   let supportsImportMaps = false;
 
   const featureDetectionPromise = Promise.all([
+    dynamicImport(createBlob('import"data:text/css,{}"assert{type:"css"}')).then(() => supportsCssAssertions = true, () => {}),
     dynamicImport(createBlob('import"data:text/json,{}"assert{type:"json"}')).then(() => supportsJsonAssertions = true, () => {}),
     dynamicImport(createBlob('import.meta')).then(() => supportsImportMeta = true, () => {}),
     supportsDynamicImport && hasDocument && new Promise(resolve => {
@@ -263,9 +265,13 @@
       load.n = load.d.some(dep => dep.n);
   }
 
+  let importMap = { imports: {}, scopes: {} };
+  let importMapSrcOrLazy = false;
+  let importMapPromise = resolvedPromise;
+
   let waitingForImportMapsInterval;
   let firstTopLevelProcess = true;
-  async function topLevelLoad (url, fetchOpts, source, nativelyLoaded) {
+  async function topLevelLoad (url, fetchOpts, source, nativelyLoaded, lastStaticLoadPromise) {
     // no need to even fetch if we have feature support
     await featureDetectionPromise;
     if (waitingForImportMapsInterval > 0) {
@@ -278,8 +284,8 @@
     }
     await importMapPromise;
     // early analysis opt-out
-    if (nativelyLoaded && supportsDynamicImport && supportsImportMeta && supportsImportMaps && !importMapSrcOrLazy) {
-      // dont reexec inline for polyfills -> just return null
+    if (nativelyLoaded && supportsDynamicImport && supportsImportMeta && supportsImportMaps && supportsJsonAssertions && supportsCssAssertions && !importMapSrcOrLazy) {
+      // dont reexec inline for polyfills -> just return null (since no module id for executed inline module scripts)
       return source && nativelyLoaded ? null : dynamicImport(source ? createBlob(source) : url);
     }
     await init;
@@ -288,17 +294,30 @@
     await loadAll(load, seen);
     lastLoad = undefined;
     resolveDeps(load, seen);
-    if (source && !nativelyLoaded && !shimMode && !load.n) {
+    await lastStaticLoadPromise;
+    if (source && !shimMode && !load.n) {
+      if (lastStaticLoadPromise) {
+        didExecForReadyPromise = true;
+        if (domContentLoaded)
+          didExecForDomContentLoaded = true;
+      }
       const module = dynamicImport(createBlob(source));
       if (shouldRevokeBlobURLs) revokeObjectURLs(Object.keys(seen));
       return module;
     }
     const module = await dynamicImport(load.b);
+    if (lastStaticLoadPromise && (!nativelyLoaded || load.b !== load.u)) {
+      didExecForReadyPromise = true;
+      if (domContentLoaded)
+        didExecForDomContentLoaded = true;
+    }
     // if the top-level load is a shell, run its update function
     if (load.s) {
       (await dynamicImport(load.s)).u$_(module);
     }
     if (shouldRevokeBlobURLs) revokeObjectURLs(Object.keys(seen));
+    // when tla is supported, this should return the tla promise as an actual handle
+    // so readystate can still correspond to the sync subgraph exec completions
     return module;
   }
 
@@ -323,7 +342,8 @@
     await featureDetectionPromise;
     // Make sure all the "in-flight" import maps are loaded and applied.
     await importMapPromise;
-    return topLevelLoad(resolve(id, parentUrl).r || throwUnresolved(id, parentUrl), { credentials: 'same-origin' });
+    const resolved = await resolve(id, parentUrl);
+    return topLevelLoad(resolved.r || throwUnresolved(id, parentUrl), { credentials: 'same-origin' });
   }
 
   self.importShim = importShim;
@@ -334,7 +354,8 @@
 
   async function importMetaResolve (id, parentUrl = this.url) {
     await importMapPromise;
-    return resolve(id, `${parentUrl}`).r || throwUnresolved(id, parentUrl);
+    const resolved = await resolve(id, `${parentUrl}`);
+    return resolved.r || throwUnresolved(id, parentUrl);
   }
 
   self._esmsm = meta;
@@ -346,6 +367,7 @@
   const skip = esmsInitOptions.skip || /^https?:\/\/(cdn\.skypack\.dev|jspm\.dev)\//;
   const onerror = esmsInitOptions.onerror || ((e) => { throw e; });
   const shouldRevokeBlobURLs = esmsInitOptions.revokeBlobURLs;
+  const noLoadEventRetriggers = esmsInitOptions.noLoadEventRetriggers;
 
   function urlJsString (url) {
     return `'${url.replace(/'/g, "\\'")}'`;
@@ -374,7 +396,7 @@
     const source = load.S;
 
     // edge doesnt execute sibling in order, so we fix this up by ensuring all previous executions are explicit dependencies
-    let resolvedSource = edge && lastLoad ? `import '${lastLoad}';` : '';  
+    let resolvedSource = edge && lastLoad ? `import '${lastLoad}';` : '';
 
     if (!imports.length) {
       resolvedSource += source;
@@ -449,7 +471,26 @@
   const cssContentType = /^text\/css(;|$)/;
   const wasmContentType = /^application\/wasm(;|$)/;
 
-  const fetchOptsMap = new Map();
+  const cssUrlRegEx = /url\(\s*(?:(["'])((?:\\.|[^\n\\"'])+)\1|((?:\\.|[^\s,"'()\\])+))\s*\)/g;
+
+  async function doFetch (url, fetchOpts) {
+    const res = await fetchHook(url, fetchOpts);
+    if (!res.ok)
+      throw new 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' };
+    else if (jsonContentType.test(contentType))
+      return { r: res.url, s: `export default ${await res.text()}`, t: 'json' };
+    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})`))
+    });export default s;`, t: 'css' };
+    else if (wasmContentType.test(contentType))
+      throw new Error('WASM modules not yet supported');
+    else
+      throw new Error(`Unknown Content-Type "${contentType}"`);
+  }
 
   function getOrCreateLoad (url, fetchOpts, source) {
     let load = registry[url];
@@ -476,27 +517,18 @@
       // shellUrl
       s: undefined,
       // needsShim
-      n: false
+      n: false,
+      // type
+      t: null
     };
 
     load.f = (async () => {
       if (!source) {
         // preload fetch options override fetch options (race)
-        const res = await fetchHook(url, fetchOptsMap.get(url) || fetchOpts);
-        if (!res.ok)
-          throw new Error(`${res.status} ${res.statusText} ${res.url}`);
-        load.r = res.url;
-        const contentType = res.headers.get('content-type');
-        if (jsContentType.test(contentType))
-          source = await res.text();
-        else if (jsonContentType.test(contentType))
-          source = `export default ${await res.text()}`;
-        else if (cssContentType.test(contentType))
-          throw new Error('CSS modules not yet supported');
-        else if (wasmContentType.test(contentType))
-          throw new Error('WASM modules not yet supported');
-        else
-          throw new Error(`Unknown Content-Type "${contentType}"`);
+        let t;
+        ({ r: load.r, s: source, t } = await (fetchCache[url] || doFetch(url, fetchOpts)));
+        if (t === 'css' && !supportsCssAssertions || t === 'json' && !supportsJsonAssertions)
+          load.n = true;
       }
       try {
         load.a = parse(source, load.u);
@@ -511,13 +543,12 @@
 
     load.L = load.f.then(async () => {
       let childFetchOpts = fetchOpts;
-      load.d = await Promise.all(load.a[0].map(({ n, d, a }) => {
+      load.d = (await Promise.all(load.a[0].map(async ({ n, d, a }) => {
         if (d >= 0 && !supportsDynamicImport ||
-            d === 2 && (!supportsImportMeta || source.slice(end, end + 8) === '.resolve') ||
-            a && !supportsJsonAssertions)
+            d === 2 && (!supportsImportMeta || source.slice(end, end + 8) === '.resolve'))
           load.n = true;
         if (!n) return;
-        const { r, m } = resolve(n, load.r || load.u);
+        const { r, m } = await resolve(n, load.r || load.u);
         if (m && (!supportsImportMaps || importMapSrcOrLazy))
           load.n = true;
         if (d !== -1) return;
@@ -527,22 +558,13 @@
         if (childFetchOpts.integrity)
           childFetchOpts = Object.assign({}, childFetchOpts, { integrity: undefined });
         return getOrCreateLoad(r, childFetchOpts).f;
-      }).filter(l => l));
+      }))).filter(l => l);
     });
 
     return load;
   }
 
-  let importMap = { imports: {}, scopes: {} };
-  let importMapSrcOrLazy = false;
-  let importMapPromise = resolvedPromise;
-
-  if (hasDocument) {
-    processScripts();
-    waitingForImportMapsInterval = setInterval(processScripts, 20);
-  }
-
-  async function processScripts () {
+  function processScripts () {
     if (waitingForImportMapsInterval > 0 && document.readyState !== 'loading') {
       clearTimeout(waitingForImportMapsInterval);
       waitingForImportMapsInterval = 0;
@@ -550,29 +572,9 @@
     for (const link of document.querySelectorAll('link[rel="modulepreload"]'))
       processPreload(link);
     for (const script of document.querySelectorAll('script[type="module-shim"],script[type="importmap-shim"],script[type="module"],script[type="importmap"]'))
-      await processScript(script);
+      processScript(script);
   }
 
-  new MutationObserver(mutations => {
-    for (const mutation of mutations) {
-      if (mutation.type !== 'childList') continue;
-      for (const node of mutation.addedNodes) {
-        if (node.tagName === 'SCRIPT' && node.type)
-          processScript(node, !firstTopLevelProcess);
-        else if (node.tagName === 'LINK' && node.rel === 'modulepreload')
-          processPreload(node);
-        else if (node.querySelectorAll) {
-          for (const script of node.querySelectorAll('script[type="module-shim"],script[type="importmap-shim"],script[type="module"],script[type="importmap"]')) {
-            processScript(script, !firstTopLevelProcess);
-          }
-          for (const link of node.querySelectorAll('link[rel=modulepreload]')) {
-            processPreload(link);
-          }
-        }
-      }
-    }
-  }).observe(document, { childList: true, subtree: true });
-
   function getFetchOpts (script) {
     const fetchOpts = {};
     if (script.integrity)
@@ -588,12 +590,29 @@
     return fetchOpts;
   }
 
-  async function processScript (script, dynamic) {
+  let staticLoadCnt = 0;
+  let didExecForReadyPromise = false;
+  let didExecForDomContentLoaded = false;
+  let lastStaticLoadPromise = Promise.resolve();
+  let domContentLoaded = false;
+  document.addEventListener('DOMContentLoaded', () => domContentLoaded = true);
+  function staticLoadCheck () {
+    staticLoadCnt--;
+    if (staticLoadCnt === 0 && !noLoadEventRetriggers) {
+      if (didExecForDomContentLoaded)
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+      if (didExecForReadyPromise && document.readyState === 'complete')
+        document.dispatchEvent(new Event('readystatechange'));
+    }
+  }
+
+  function processScript (script, dynamic) {
     if (script.ep) // ep marker = script processed
       return;
     const shim = script.type.endsWith('-shim');
     if (shim) shimMode = true;
-    const type = shim ? script.type.slice(0, -5) : script.type;
+    const type = shimMode ? script.type.slice(0, -5) : script.type;
+    // dont process module scripts in shim mode or noshim module scripts in polyfill mode
     if (!shim && shimMode || script.getAttribute('noshim') !== null)
       return;
     // empty inline scripts sometimes show before domready
@@ -601,7 +620,14 @@
       return;
     script.ep = true;
     if (type === 'module') {
-      await topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shim).catch(onerror);
+      const isReadyScript = document.readyState !== 'complete';
+      if (isReadyScript) staticLoadCnt++;
+      const p = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, isReadyScript && lastStaticLoadPromise);
+      p.catch(onerror);
+      if (isReadyScript) {
+        lastStaticLoadPromise = p.catch(staticLoadCheck);
+        p.then(staticLoadCheck);
+      }
     }
     else if (type === 'importmap') {
       importMapPromise = importMapPromise.then(async () => {
@@ -612,20 +638,51 @@
     }
   }
 
+  const fetchCache = {};
   function processPreload (link) {
     if (link.ep) // ep marker = processed
       return;
     link.ep = true;
-    // prepopulate the load record
-    const fetchOpts = getFetchOpts(link);
-    // save preloaded fetch options for later load  
-    fetchOptsMap.set(link.href, fetchOpts);
-    fetch(link.href, fetchOpts);
+    if (fetchCache[link.href])
+      return;
+    fetchCache[link.href] = doFetch(link.href, getFetchOpts(link));
   }
 
-  function resolve (id, parentUrl) {
-    const urlResolved = resolveIfNotPlainOrUrl(id, parentUrl);
-    const resolved = resolveImportMap(importMap, urlResolved || id, parentUrl);
+  new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      if (mutation.type !== 'childList') continue;
+      for (const node of mutation.addedNodes) {
+        if (node.tagName === 'SCRIPT' && node.type)
+          processScript(node, !firstTopLevelProcess);
+        else if (node.tagName === 'LINK' && node.rel === 'modulepreload')
+          processPreload(node);
+        else if (node.querySelectorAll) {
+          for (const script of node.querySelectorAll('script[type="module-shim"],script[type="importmap-shim"],script[type="module"],script[type="importmap"]')) {
+            processScript(script, !firstTopLevelProcess);
+          }
+          for (const link of node.querySelectorAll('link[rel=modulepreload]')) {
+            processPreload(link);
+          }
+        }
+      }
+    }
+  }).observe(document, { childList: true, subtree: true });
+
+  async function defaultResolve (id, parentUrl) {
+    return resolveImportMap(importMap, resolveIfNotPlainOrUrl(id, parentUrl) || id, parentUrl);
+  }
+
+  async function resolve (id, parentUrl) {
+    let urlResolved = resolveIfNotPlainOrUrl(id, parentUrl);
+
+    let resolved;
+    if (esmsInitOptions.resolve) {
+      resolved = await esmsInitOptions.resolve(id, parentUrl, defaultResolve);
+    }
+    else {
+      resolved = resolveImportMap(importMap, urlResolved || id, parentUrl);
+    }
+
     return { r: resolved, m: urlResolved !== resolved };
   }
 
@@ -633,4 +690,9 @@
     throw Error("Unable to resolve specifier '" + id + (parentUrl ? "' from " + parentUrl : "'"));
   }
 
+  if (hasDocument) {
+    processScripts();
+    waitingForImportMapsInterval = setInterval(processScripts, 20);
+  }
+
 }());

data/lib/importmap/map.rb

@@ -76,20 +76,11 @@ class Importmap::Map
     end
 
     def module_name_from(filename, mapping)
-      filename_without_ext_and_version = filename.to_s.remove(filename.extname).split("@").first
-
-      case
-      when filename_without_ext_and_version == "index" && mapping.under
-        mapping.under
-      when mapping.under
-        "#{mapping.under}/#{filename_without_ext_and_version}"
-      else
-        module_name
-      end
+      [ mapping.under, filename.to_s.remove(filename.extname).remove(/\/?index$/).presence ].compact.join("/")
     end
 
     def module_path_from(filename, mapping)
-      [ mapping.path || mapping.under, filename.to_s ].join("/")
+      [ mapping.path || mapping.under, filename.to_s ].compact.join("/")
     end
 
     def find_javascript_files_in_tree(path)

data/lib/importmap/version.rb

@@ -1,3 +1,3 @@
 module Importmap
-  VERSION = "0.3.0"
+  VERSION = "0.3.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: importmap-rails
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.4
 platform: ruby
 authors:
 - David Heinemeier Hansson
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-20 00:00:00.000000000 Z
+date: 2021-08-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,7 +24,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 6.0.0
-description: 
+description:
 email: david@loudthinking.com
 executables: []
 extensions: []
@@ -34,7 +34,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/es-module-shims.js
-- app/assets/javascripts/es-module-shims@0.12.2.js
+- app/assets/javascripts/es-module-shims@0.12.8.js
 - app/helpers/importmap/importmap_tags_helper.rb
 - lib/importmap-rails.rb
 - lib/importmap/engine.rb
@@ -50,7 +50,7 @@ licenses:
 metadata:
   homepage_uri: https://github.com/rails/importmap-rails
   source_code_uri: https://github.com/rails/importmap-rails
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -66,7 +66,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.4
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Use ESM with importmap to manage modern JavaScript in Rails without transpiling
   or bundling.