importmap-rails 0.7.1 → 0.7.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f178f76220fe01a13e2d79033cabc5261f790102abdd8d0209741cb8c7a6b17
-  data.tar.gz: 450c1fd3351c4caf38a88e58ad9c3d9cd25b919c3cafab86e5acbcf977ab6e38
+  metadata.gz: 38c3083184e97d6df1566c84b82011280e8ebc5b68d59daeac2eff60b8264bf6
+  data.tar.gz: 705e1989000dbae9d04e18555de12ad968f3fa557a65de7ca5eb87f6adbdf335
 SHA512:
-  metadata.gz: e119612311447feb13be274fb897a44f1a25d08d12287a66ecd8661638e4884c4f79b6d275e630c0e1661f70a5b9753d57c1e33d8dcbc605a5470fb2add8bc0b
-  data.tar.gz: b647688c8a0f634d97d9a3204673cb43eab80086ab3313debce1faee335d0f1abc0e22aada01552fc6f756a9a6233bd64c7dd949933b14fe5beaaa9312679fd4
+  metadata.gz: 9a7181a347eb789eb72d3f14d76a11004d1683c5e9dc7e8ddb9810a37445ad66f392105874c4a663ac939df55052f9184e33200d7ec27b458bf176de3ad225e5
+  data.tar.gz: 994fefc659e8b26a50ac3382f16c14436f2aa7343d4d9c6a7679b0044dafa5a3dac082a2818a4c9ee41ed6922b52a4d9e4668771d605763e34f92d8b6e687230

data/README.md

@@ -48,7 +48,7 @@ Pinning "scheduler" to https://ga.jspm.io/npm:scheduler@0.20.2/index.js
 
 {
   "imports": {
-    "application": "/application.js",
+    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
     "react": "https://ga.jspm.io/npm:react@17.0.2/index.js",
     "react-dom": "https://ga.jspm.io/npm:react-dom@17.0.2/index.js",
     "object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js",
@@ -169,9 +169,9 @@ pin_all_from File.expand_path("../app/assets/javascripts", __dir__)
 ```
 
 
-## Include a digest of the import map in your etag
+## Include a digest of the import map in your ETag
 
-If you're using etags generated by Rails helpers like `stale?` or `fresh_when`, you need to include the digest of the import map into this calculation. Otherwise your application will return 302 cache responses even when your JavaScript assets have changed. You can avoid this with something like:
+If you're using [ETags](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag) generated by Rails helpers like `stale?` or `fresh_when`, you need to include the digest of the import map into this calculation. Otherwise your application will return 302 cache responses even when your JavaScript assets have changed. You can avoid this with something like:
 
 ```ruby
 class ApplicationController < ActionController::Base
@@ -182,7 +182,7 @@ end
 
 ## Sweeping the cache in development and test
 
-Generating the import map json and modulepreloads may require resolving hundreds of assets. This can take a while, so these operations are cached, but in development and test, we watch for changes to both `config/importmap.rb` and files in `app/javascript` to clear this cache. This feature can be controlled in an environment configuration file via the boolean `config.importmap.sweep_cache`. If you're pinning local files from outside of `app/javascript`, you'll need to restart your development server upon changes.
+Generating the import map json and modulepreloads may require resolving hundreds of assets. This can take a while, so these operations are cached, but in development and test, we watch for changes to both `config/importmap.rb` and files in `app/javascript` to clear this cache. This feature can be controlled in an environment configuration file via the boolean `config.importmap.sweep_cache`. If you're pinning local files from outside of `app/javascript`, you'll need to restart your development server upon changes to those external files.
 
 
 ## Expected errors from using the es-module-shim
@@ -192,12 +192,12 @@ While import maps are native in Chrome and Edge, they need a shim in other brows
 
 ## Turning off the shim
 
-Under certain circumstances, like running system tests using chromedriver under CI (which may be resource constrained and trigger errors in certain cases), you may want to explicitly turn off including the shim. If can do this by calling the bulk tag helper with `javascript_importmap_tags("application", shim: false)`. Thus you can pass in something like `shim: !ENV["CI"]`. If you want, and are sure you're not doing any full-page caching, you can also connect this directive to a user agent check (using a gem like `useragent`) to check whether the browser is chrome/edge 89+. But you really shouldn't have to, as the shim is designed to gracefully work with natively compatible drivers.
+Under certain circumstances, like running system tests using chromedriver under CI (which may be resource constrained and trigger errors in certain cases), you may want to explicitly turn off including the shim. You can do this by calling the bulk tag helper with `javascript_importmap_tags("application", shim: false)`. Thus you can pass in something like `shim: !ENV["CI"]`. If you want, and are sure you're not doing any full-page caching, you can also connect this directive to a user agent check (using a gem like `useragent`) to check whether the browser is chrome/edge 89+. But you really shouldn't have to, as the shim is designed to gracefully work with natively compatible drivers.
 
 
 ## A note about browser extensions
 
-Certain extensions that also load Javascript modules may block import maps from being loaded (for instance, the Apollo Client Devtools extension). If you see a console message like `An import map is added after module script load was triggered`, browser extensions are likely the culprit. 
+Certain extensions that also load JavaScript modules may block import maps from being loaded (for instance, the Apollo Client Devtools extension). If you see a console message like `An import map is added after module script load was triggered`, browser extensions are likely the culprit. 
 
 
 ## License

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

@@ -1,8 +1,6 @@
-/* ES Module Shims CSP 0.15.1 */
+/* ES Module Shims 1.0.4 */
 (function () {
 
-  Promise.resolve();
-
   const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
 
   let baseUrl;
@@ -203,7 +201,7 @@
   let shimMode = !!esmsInitOptions$1.shimMode;
   const resolveHook = shimMode && esmsInitOptions$1.resolve;
 
-  const skip = esmsInitOptions$1.skip ? new RegExp(esmsInitOptions$1.skip) : /^https:\/\/(cdn\.skypack\.dev|jspm\.dev)\//;
+  const skip = esmsInitOptions$1.skip ? new RegExp(esmsInitOptions$1.skip) : null;
 
   let nonce = esmsInitOptions$1.nonce;
 
@@ -331,7 +329,35 @@
 
   let importMap = { imports: {}, scopes: {} };
   let importMapSrcOrLazy = false;
-  let importMapPromise = featureDetectionPromise;
+  let baselinePassthrough;
+
+  const initPromise = featureDetectionPromise.then(() => {
+    baselinePassthrough = supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy && !false;
+    // shim mode is determined on initialization, no late shim mode
+    if (!shimMode && document.querySelectorAll('script[type="module-shim"],script[type="importmap-shim"]').length)
+      setShimMode();
+    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')
+                processScript(node);
+              if (!shimMode && node.type === 'importmap' || shimMode && node.type === 'importmap-shim')
+                processImportMap(node);
+            }
+            else if (node.tagName === 'LINK' && node.rel === 'modulepreload')
+              processPreload(node);
+          }
+        }
+      }).observe(document, { childList: true, subtree: true });
+      processImportMaps();
+      processScriptsAndPreloads();
+      return undefined;
+    }
+  });
+  let importMapPromise = initPromise;
 
   let acceptingImportMaps = true;
   let nativeAcceptingImportMaps = true;
@@ -346,21 +372,20 @@
     }
     await importMapPromise;
     // early analysis opt-out - no need to even fetch if we have feature support
-    if (!shimMode && supportsDynamicImport && supportsImportMeta && supportsImportMaps && (!jsonModulesEnabled || supportsJsonAssertions) && (!cssModulesEnabled || supportsCssAssertions) && !importMapSrcOrLazy) {
+    if (!shimMode && baselinePassthrough) {
       // for polyfill case, only dynamic import needs a return value here, and dynamic import will never pass nativelyLoaded
       if (nativelyLoaded)
         return null;
       await lastStaticLoadPromise;
       return dynamicImport(source ? createBlob(source) : url, { errUrl: url || source });
     }
-    await undefined;
     const load = getOrCreateLoad(url, fetchOpts, source);
     const seen = {};
     await loadAll(load, seen);
     lastLoad = undefined;
     resolveDeps(load, seen);
     await lastStaticLoadPromise;
-    if (source && !shimMode && !load.n) {
+    if (source && !shimMode && !load.n && !false) {
       const module = await dynamicImport(createBlob(source), { errUrl: source });
       if (revokeBlobURLs) revokeObjectURLs(Object.keys(seen));
       return module;
@@ -393,7 +418,17 @@
   }
 
   async function importShim (id, parentUrl = baseUrl, _assertion) {
-    processScripts();
+    // needed for shim check
+    await initPromise;
+    if (acceptingImportMaps || shimMode || !baselinePassthrough) {
+      processImportMaps();
+      if (!shimMode) {
+        acceptingImportMaps = false;
+      }
+      else {
+        nativeAcceptingImportMaps = false;
+      }
+    }
     await importMapPromise;
     return topLevelLoad((await resolve(id, parentUrl)).r || throwUnresolved(id, parentUrl), { credentials: 'same-origin' });
   }
@@ -403,7 +438,6 @@
   const meta = {};
 
   async function importMetaResolve (id, parentUrl = this.url) {
-    await importMapPromise;
     return (await resolve(id, `${parentUrl}`)).r || throwUnresolved(id, parentUrl);
   }
 
@@ -490,17 +524,11 @@
       resolvedSource += source.slice(lastIndex);
     }
 
-    resolvedSource = resolvedSource.replace(/\/\/# sourceMappingURL=(.*)\s*$/, (match, url) => {
-      return match.replace(url, new URL(url, load.r));
-    });
+    resolvedSource = resolvedSource.replace(/\/\/# sourceMappingURL=(.*)\s*$/, (match, url) => match.replace(url, () => new URL(url, load.r)));
     let hasSourceURL = false;
-    resolvedSource = resolvedSource.replace(/\/\/# sourceURL=(.*)\s*$/, (match, url) => {
-      hasSourceURL = true;
-      return match.replace(url, new URL(url, load.r));
-    });
-    if (!hasSourceURL) {
+    resolvedSource = resolvedSource.replace(/\/\/# sourceURL=(.*)\s*$/, (match, url) => (hasSourceURL = true, match.replace(url, () => new URL(url, load.r))));
+    if (!hasSourceURL)
       resolvedSource += '\n//# sourceURL=' + load.r;
-    }
 
     load.b = lastLoad = createBlob(resolvedSource);
     load.S = undefined;
@@ -617,7 +645,7 @@
         if (d !== -1) return;
         if (!r)
           throwUnresolved(n, load.r || load.u);
-        if (skip.test(r)) return { b: r };
+        if (skip && skip.test(r)) return { b: r };
         if (childFetchOpts.integrity)
           childFetchOpts = Object.assign({}, childFetchOpts, { integrity: undefined });
         return getOrCreateLoad(r, childFetchOpts).f;
@@ -627,22 +655,16 @@
     return load;
   }
 
-  const scriptQuery = 'script[type="module-shim"],script[type="importmap-shim"],script[type="module"],script[type="importmap"]';
-  const preloadQuery = 'link[rel="modulepreload"]';
-
-  function processScripts () {
-    for (const link of document.querySelectorAll(preloadQuery))
-      processPreload(link);
-    const scripts = document.querySelectorAll(scriptQuery);
-    // early shim mode opt-in
-    if (!shimMode) {
-      for (const script of scripts) {
-        if (script.type.endsWith('-shim'))
-          setShimMode();
-      }
-    }
-    for (const script of scripts)
+  function processScriptsAndPreloads () {
+    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"]'))
+      processPreload(link);
+  }
+
+  function processImportMaps () {
+    for (const script of document.querySelectorAll(shimMode ? 'script[type="importmap-shim"]' : 'script[type="importmap"]'))
+      processImportMap(script);
   }
 
   function getFetchOpts (script) {
@@ -668,73 +690,74 @@
       document.dispatchEvent(new Event('DOMContentLoaded'));
   }
   // this should always trigger because we assume es-module-shims is itself a domcontentloaded requirement
-  document.addEventListener('DOMContentLoaded', domContentLoadedCheck);
+  document.addEventListener('DOMContentLoaded', async () => {
+    await initPromise;
+    domContentLoadedCheck();
+    if (shimMode || !baselinePassthrough) {
+      processImportMaps();
+      processScriptsAndPreloads();
+    }
+  });
 
   let readyStateCompleteCnt = 1;
   if (document.readyState === 'complete')
     readyStateCompleteCheck();
   else
-    document.addEventListener('readystatechange', readyStateCompleteCheck);
+    document.addEventListener('readystatechange', async () => {
+      await initPromise;
+      readyStateCompleteCheck();
+    });
   function readyStateCompleteCheck () {
     if (--readyStateCompleteCnt === 0 && !noLoadEventRetriggers)
       document.dispatchEvent(new Event('readystatechange'));
   }
 
-  function processScript (script) {
-    if (script.ep) // ep marker = script processed
+  function processImportMap (script) {
+    if (!acceptingImportMaps)
       return;
-    const shim = script.type.endsWith('-shim');
-    if (shim && !shimMode) setShimMode();
-    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)
+    if (script.ep) // ep marker = script processed
       return;
     // empty inline scripts sometimes show before domready
     if (!script.src && !script.innerHTML)
       return;
     script.ep = true;
-    if (type === 'module') {
-      // does this load block readystate complete
-      const isReadyScript = readyStateCompleteCnt > 0;
-      // does this load block DOMContentLoaded
-      const isDomContentLoadedScript = domContentLoadedCnt > 0;
-      if (isReadyScript) readyStateCompleteCnt++;
-      if (isDomContentLoadedScript) domContentLoadedCnt++;
-      const loadPromise = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, isReadyScript && lastStaticLoadPromise).then(() => {
-        if (!noLoadEventRetriggers)
-          triggerLoadEvent(script);
-      }).catch(e => {
-        if (!noLoadEventRetriggers)
-          triggerLoadEvent(script);
-        // setTimeout(() => { throw e; });
-        onerror(e);
-      });
-      if (isReadyScript)
-        lastStaticLoadPromise = loadPromise.then(readyStateCompleteCheck);
-      if (isDomContentLoadedScript)
-        loadPromise.then(domContentLoadedCheck);
+    // we dont currently support multiple, external or dynamic imports maps in polyfill mode to match native
+    if (script.src || !nativeAcceptingImportMaps) {
+      if (!shimMode)
+        return;
+      importMapSrcOrLazy = true;
     }
-    else if (acceptingImportMaps && type === 'importmap') {
-      // we dont currently support multiple, external or dynamic imports maps in polyfill mode to match native
-      if (script.src || !nativeAcceptingImportMaps) {
-        if (!shimMode)
-          return;
-        importMapSrcOrLazy = true;
-      }
-      if (!shimMode) {
-        acceptingImportMaps = false;
-      }
-      else {
-        nativeAcceptingImportMaps = false;
-      }
-      importMapPromise = importMapPromise.then(async () => {
-        importMap = resolveAndComposeImportMap(script.src ? await (await fetchHook(script.src)).json() : JSON.parse(script.innerHTML), script.src || baseUrl, importMap);
-      });
+    if (!shimMode) {
+      acceptingImportMaps = false;
+    }
+    else {
+      nativeAcceptingImportMaps = false;
     }
+    importMapPromise = importMapPromise.then(async () => {
+      importMap = resolveAndComposeImportMap(script.src ? await (await fetchHook(script.src)).json() : JSON.parse(script.innerHTML), script.src || baseUrl, importMap);
+    });
   }
 
-  function triggerLoadEvent (script) {
-    script.dispatchEvent(new Event('load'));
+  function processScript (script) {
+    if (script.ep) // ep marker = script processed
+      return;
+    if (script.getAttribute('noshim') !== null)
+      return;
+    // empty inline scripts sometimes show before domready
+    if (!script.src && !script.innerHTML)
+      return;
+    script.ep = true;
+    // does this load block readystate complete
+    const isReadyScript = readyStateCompleteCnt > 0;
+    // does this load block DOMContentLoaded
+    const isDomContentLoadedScript = domContentLoadedCnt > 0;
+    if (isReadyScript) readyStateCompleteCnt++;
+    if (isDomContentLoadedScript) domContentLoadedCnt++;
+    const loadPromise = topLevelLoad(script.src || `${baseUrl}?${id++}`, getFetchOpts(script), !script.src && script.innerHTML, !shimMode, isReadyScript && lastStaticLoadPromise).catch(onerror);
+    if (isReadyScript)
+      lastStaticLoadPromise = loadPromise.then(readyStateCompleteCheck);
+    if (isDomContentLoadedScript)
+      loadPromise.then(domContentLoadedCheck);
   }
 
   const fetchCache = {};
@@ -747,22 +770,8 @@
     fetchCache[link.href] = doFetch(link.href, getFetchOpts(link));
   }
 
-  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);
-        else if (node.tagName === 'LINK' && node.rel === 'modulepreload')
-          processPreload(node);
-      }
-    }
-  }).observe(document, { childList: true, subtree: true });
-
   function throwUnresolved (id, parentUrl) {
     throw Error("Unable to resolve specifier '" + id + (parentUrl ? "' from " + parentUrl : "'"));
   }
 
-  processScripts();
-
-}());
+}());

data/lib/importmap/commands.rb

@@ -43,6 +43,7 @@ class Importmap::Commands < Thor
 
   desc "json", "Show the full importmap in json"
   def json
+    require Rails.root.join("config/environment")
     puts Rails.application.importmap.to_json(resolver: ActionController::Base.helpers)
   end
 

data/lib/importmap/map.rb

@@ -1,5 +1,4 @@
 require "pathname"
-require "active_support/evented_file_update_checker"
 
 class Importmap::Map
   attr_reader :packages, :directories
@@ -63,11 +62,11 @@ class Importmap::Map
   def cache_sweeper(watches: nil)
     if watches
       @cache_sweeper =
-        ActiveSupport::EventedFileUpdateChecker.new([], Array(watches).collect { |dir| [ dir, "js"] }.to_h) do
+        Rails.application.config.file_watcher.new([], Array(watches).collect { |dir| [ dir.to_s, "js"] }.to_h) do
           clear_cache
         end
     else
-      @cache_sweeper  
+      @cache_sweeper
     end
   end
 

data/lib/importmap/version.rb

@@ -1,3 +1,3 @@
 module Importmap
-  VERSION = "0.7.1"
+  VERSION = "0.7.5"
 end

data/lib/tasks/importmap_tasks.rake

@@ -3,10 +3,4 @@ namespace :importmap do
   task :install do
     system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/install.rb",  __dir__)}"
   end
-
-  desc "Show the importmap"
-  task :pins do
-    require Rails.root.join("config/environment")
-    puts Rails.application.importmap.to_json(resolver: ActionController::Base.helpers)
-  end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: importmap-rails
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.7.5
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-09-20 00:00:00.000000000 Z
+date: 2021-09-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,20 +24,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 6.0.0
-- !ruby/object:Gem::Dependency
-  name: listen
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.7'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.7'
 description: 
 email: david@loudthinking.com
 executables: []