RubyGems - importmap-rails - Versions diffs - 0.3.1 → 0.4.0 - Mend

importmap-rails 0.3.1 → 0.4.0

Files changed (15) hide show

checksums.yaml +4 -4
data/README.md +34 -17
data/app/assets/javascripts/es-module-shims.js +1 -1
data/app/assets/javascripts/{es-module-shims@0.12.2.js → es-module-shims@0.12.8.js} +135 -73
data/lib/importmap/commands.rb +24 -0
data/lib/importmap/engine.rb +4 -7
data/lib/importmap/map.rb +26 -13
data/lib/importmap/pinner.rb +32 -0
data/lib/importmap/reloader.rb +1 -1
data/lib/importmap/version.rb +1 -1
data/lib/install/bin/importmap +4 -0
data/lib/install/config/importmap.rb +20 -0
data/lib/install/install.rb +5 -21
data/lib/tasks/importmap_tasks.rake +6 -0
metadata +21 -3

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b87e83df8630c47a117ee7a9a854a8d34bd65112e547c27a5ae9133fb62f3c8a
-  data.tar.gz: b6c77a31b534440c7a6a3132e1f88d14f658ed350fcd95d446bba9d58df11bc5
+  metadata.gz: 8e3127a8154739158fd8b7feea069b5ae6e8d353d36ba16fa446095f26b70ae0
+  data.tar.gz: c6d7e65df38a98e5c31b5195ee298651c6550cb97e3c438ebf46c8a5290a17b6
 SHA512:
-  metadata.gz: 40f0955bde9ab6792c5b1e0b5f0fa4eed8701aa09f2b71c69dd1fe1f6b088131d2dd0089e4bd68b14172e4042a49959a7de609adc9f711bbd6e819552ec6fb11
-  data.tar.gz: 471bc782818dc139c3a46fb8c1896784069b8d8c8ff777cdc2880d462f5efa207021292079d7b9de127af58cd916901153f8a7981944fc52e81ad80b418907fb
+  metadata.gz: 2e186a8e9785fc7da247ddf1c459d005977a8ce21fb2403aa3e3b63c2b938b9ffa682df1742292633dd9afcae0f7a7f68582af2cafc642afd04195564fd5c2a1
+  data.tar.gz: fc85e86b9d747e9e84e8e009bcca8e4746f6477f25d6355b705958fb917818872005127c5ad9ac8e9f9f7594d1ac06b68013038ab351cd072d45c0d4dc76b7ce

data/README.md CHANGED Viewed

@@ -22,30 +22,49 @@ Note: In order to use JavaScript from Rails frameworks like Action Cable, Action
 The import map is configured programmatically through the `Rails.application.config.importmap` assignment, which by default is setup in `config/importmap.rb` after running the installer. This file is automatically reloaded in development upon changes, but note that you must restart the server if you remove pins and need them gone from the rendered importmap or list of preloads.
-This programmatically configured import map is inlined in the `<head>` of your application layout using `<%= javascript_importmap_tags %>`, which will setup the JSON configuration inside a `<script type="importmap">` tag. After that, the [es-module-shim](https://github.com/guybedford/es-module-shims) is loaded, and then finally the application entrypoint is imported via `<script type="module">import "application"</script>`. That logical entrypoint, `application`, is mapped in the importmap script tag to the file `app/assets/javascripts/application.js`, which is copied and digested by the asset pipeline.
+This programmatically configured import map is inlined in the `<head>` of your application layout using `<%= javascript_importmap_tags %>`, which will setup the JSON configuration inside a `<script type="importmap">` tag. After that, the [es-module-shim](https://github.com/guybedford/es-module-shims) is loaded, and then finally the application entrypoint is imported via `<script type="module">import "application"</script>`. That logical entrypoint, `application`, is mapped in the importmap script tag to the file `app/javascript/application.js`, which is copied and digested by the asset pipeline.
-It's in `app/assets/javascripts/application.js` you setup your application by importing any of the modules that have been defined in the import map. You can use the full ESM functionality of importing any particular export of the modules or everything.
+It's in `app/javascript/application.js` you setup your application by importing any of the modules that have been defined in the import map. You can use the full ESM functionality of importing any particular export of the modules or everything.
 It makes sense to use logical names that match the package names used by NPM, such that if you later want to start transpiling or bundling your code, you'll not have to change any module imports.
-## Use with Skypack (and other CDNs)
+## Using node modules via JavaScript CDNs
-Instead of mapping JavaScript modules to files in your application's path, you can also reference them directly from JavaScript CDNs like Skypack. Simply add them to the `config/importmap.rb` with the URL instead of the local path:
+Importmap for Rails is designed to be used with JavaScript CDNs for your node package dependencies. The CDNs provide pre-compiled distribution versions ready to use, and offer a fast, efficient way of serving them.
-```ruby
-Rails.application.config.importmap.draw do
-  pin "trix", to: "https://cdn.skypack.dev/trix"
-  pin "md5", to: "https://cdn.skypack.dev/md5"
-end
+You can use the bin/importmap command that's added as part of the install to pin additional packages to your importmap. This command uses an API from JSPM.org to resolve your package dependencies most efficiently, and then add the pins to your config/importmap.rb file. It can resolve these dependencies from JSPM itself, but also from other CDNs, like unpkg.com, jsdelivr.com, skypack.dev, etc.
+It works like so:
+```bash
+./bin/importmap pin react react-dom
+Pinned 'react' to https://ga.jspm.io/npm:react@17.0.2/index.js
+Pinned 'react-dom' to https://ga.jspm.io/npm:react-dom@17.0.2/index.js
+Pinned 'object-assign' to https://ga.jspm.io/npm:object-assign@4.1.1/index.js
+Pinned 'scheduler' to https://ga.jspm.io/npm:scheduler@0.20.2/index.js
+./bin/importmap json
+{
+  "imports": {
+    "application": "/application.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",
+    "scheduler": "https://ga.jspm.io/npm:scheduler@0.20.2/index.js"
+  }
+}
 ```
+As you can see, the two packages react and react-dom resolve to a total of four dependencies, when resolved via the jspm default.
 Now you can use these in your application.js entrypoint like you would any other module:
 ```js
-import "trix"
-import md5 from "md5"
-console.log(md5("Hash it out"))
+import React from "react"
+import ReactDOM from "react-dom"
 ```
@@ -57,16 +76,14 @@ Example:
 ```ruby
 # config/importmap.rb
-Rails.application.config.importmap.draw do
-  pin "trix", to: "https://cdn.skypack.dev/trix"
-  pin "md5", to: "https://cdn.skypack.dev/md5", preload: false
-end
+pin "@github/hotkey", to: "https://ga.jspm.io/npm:@github/hotkey@1.4.4/dist/index.js"
+pin "md5", to: "https://cdn.jsdelivr.net/npm/md5@2.3.0/md5.js", preload: false
 # app/views/layouts/application.html.erb
 <%= javascript_importmap_tags %>
 # will include the following link before the importmap is setup:
-<link rel="modulepreload" href="https://cdn.skypack.dev/trix">
+<link rel="modulepreload" href="https://ga.jspm.io/npm:@github/hotkey@1.4.4/dist/index.js">
 ...
 ```

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

	@@ -1 +1 @@
1	- //= require ./es-module-shims@0.12.2.js
1	+ //= 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} RENAMED Viewed

@@ -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/commands.rb ADDED Viewed

@@ -0,0 +1,24 @@
+require "thor"
+require "importmap/pinner"
+class Importmap::Commands < Thor
+  desc "pin [*PACKAGES]", "Pin new packages"
+  option :env, type: :string, aliases: :e, default: "production"
+  option :from, type: :string, aliases: :f, default: "jspm"
+  def pin(*packages)
+    if imports = Importmap::Pinner.new.pin(*packages, env: options[:env], from: options[:from])
+      imports.each do |package, url|
+        puts "Pinned '#{package}' to #{url}"
+      end
+    else
+      puts "Couldn't find any packages in #{packages.inspect} on #{options[:provider]}"
+    end
+  end
+  desc "json", "Show the full importmap in json"
+  def json
+    puts Rails.application.config.importmap.to_json(resolver: ActionController::Base.helpers)
+  end
+end
+Importmap::Commands.start(ARGV)

data/lib/importmap/engine.rb CHANGED Viewed

@@ -2,19 +2,16 @@ require "importmap/map"
 module Importmap
   class Engine < ::Rails::Engine
-    config.importmap = Importmap::Map.new
+    config.importmap = Importmap::Map.new.draw("config/importmap.rb")
     config.autoload_once_paths = %W( #{root}/app/helpers )
     initializer "importmap.reloader" do |app|
       app.config.paths.add "config/importmap.rb"
-      reloader = Importmap::Reloader.new
-      reloader.execute
-      app.reloaders << reloader
-      app.reloader.to_run do
+      Importmap::Reloader.new.tap do |reloader|
         reloader.execute
+        app.reloaders << reloader
+        app.reloader.to_run { reloader.execute }
       end
     end

data/lib/importmap/map.rb CHANGED Viewed

@@ -1,17 +1,30 @@
+require "pathname"
 class Importmap::Map
-  attr_reader :files, :directories
+  attr_reader :packages, :directories
   attr_accessor :cached
   def initialize
-    @files, @directories = {}, {}
+    @packages, @directories = {}, {}
   end
-  def draw(&block)
-    instance_eval(&block)
+  def draw(path = nil, &block)
+    if path
+      begin
+        instance_eval(File.read(path))
+      rescue Exception => e
+        Rails.logger.error "Unable to parse import map from #{path}: #{e.message}"
+        raise "Unable to parse import map from #{path}: #{e.message}"
+      end
+    else
+      instance_eval(&block)
+    end
+    self
   end
   def pin(name, to: nil, preload: true)
-    @files[name] = MappedFile.new(name: name, path: to || "#{name}.js", preload: preload)
+    @packages[name] = MappedFile.new(name: name, path: to || "#{name}.js", preload: preload)
   end
   def pin_all_from(dir, under: nil, to: nil, preload: true)
@@ -20,19 +33,19 @@ class Importmap::Map
   def preloaded_module_paths(resolver:)
     cache_as(:preloaded_module_paths) do
-      resolve_asset_paths(expanded_preloading_files_and_directories, resolver: resolver).values
+      resolve_asset_paths(expanded_preloading_packages_and_directories, resolver: resolver).values
     end
   end
   def to_json(resolver:)
     cache_as(:json) do
-      { "imports" => resolve_asset_paths(expanded_files_and_directories, resolver: resolver) }.to_json
+      JSON.pretty_generate({ "imports" => resolve_asset_paths(expanded_packages_and_directories, resolver: resolver) })
     end
   end
   private
-    MappedFile = Struct.new(:name, :path, :preload, keyword_init: true)
     MappedDir  = Struct.new(:dir, :path, :under, :preload, keyword_init: true)
+    MappedFile = Struct.new(:name, :path, :preload, keyword_init: true)
     def cache_as(name)
       if (cached && result = instance_variable_get("@cached_#{name}"))
@@ -53,12 +66,12 @@ class Importmap::Map
       end.compact
     end
-    def expanded_preloading_files_and_directories
-      expanded_files_and_directories.select { |name, mapping| mapping.preload }
+    def expanded_preloading_packages_and_directories
+      expanded_packages_and_directories.select { |name, mapping| mapping.preload }
     end
-    def expanded_files_and_directories
-      @files.dup.tap { |expanded| expand_directories_into expanded }
+    def expanded_packages_and_directories
+      @packages.dup.tap { |expanded| expand_directories_into expanded }
     end
     def expand_directories_into(paths)
@@ -80,7 +93,7 @@ class Importmap::Map
     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/pinner.rb ADDED Viewed

@@ -0,0 +1,32 @@
+require "httparty"
+class Importmap::Pinner
+  include HTTParty
+  base_uri "https://api.jspm.io"
+  def pin(*packages, env: "production", from: "jspm")
+    fetch_imports(*packages, env: env, provider: from)&.tap do |imports|
+      imports.each do |package, url|
+        append_to_importmap package, url
+      end
+    end
+  end
+  private
+    def append_to_importmap(package, url)
+      Rails.root.join("config/importmap.rb").open("a") do |config|
+        config.puts %(pin "#{package}", to: "#{url}")
+      end
+    end
+    def fetch_imports(*packages, env:, provider:)
+      response = self.class.post("/generate", body: {
+        "install"      => Array(packages),
+        "flattenScope" => true,
+        "env"          => [ "browser", env ],
+        "provider"     => provider.to_s
+      }.to_json)
+      response.dig("map", "imports")
+    end
+end

data/lib/importmap/reloader.rb CHANGED Viewed

@@ -2,7 +2,7 @@ class Importmap::Reloader
   delegate :execute_if_updated, :execute, :updated?, to: :updater
   def reload!
-    import_map_paths.each { |path| load path }
+    import_map_paths.each { |path| config.importmap.draw(path) }
   end
   private

data/lib/importmap/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module Importmap
-  VERSION = "0.3.1"
+  VERSION = "0.4.0"
 end

data/lib/install/bin/importmap ADDED Viewed

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative "../config/application"
+require "importmap/commands"

data/lib/install/config/importmap.rb ADDED Viewed

@@ -0,0 +1,20 @@
+# Use Action Cable channels (remember to import "@rails/actionable" in your application.js)
+# pin "@rails/actioncable", to: "actioncable.esm.js"
+# pin_all_from "app/javascript/channels", under: "channels"
+# Use direct uploads for Active Storage (remember to import "@rails/activestorage" in your application.js)
+# pin "@rails/activestorage", to: "activestorage.esm.js"
+# Pin vendored modules by first adding the following to app/assets/config/manifest.js:
+# //= link_tree ../../../vendor/assets/javascripts .js
+# pin_all_from "vendor/assets/javascripts"
+# JavaScript CDN provider. Also available: :jsdelivr, :esmsh, :unpkg, :skypack
+provider :jspm
+# Use NPM libraries from CDN
+# pin "local-time", version: "2.1.0", file: "app/assets/javascripts/local-time.js"
+# pin "vue", version: "2.6.14", file: "dist/vue.esm.browser.js", from: :jsdelivr
+# pin "d3", version: "7.0.1", file: "?bundle", from: :esmsh
+pin "application"

data/lib/install/install.rb CHANGED Viewed

@@ -10,10 +10,7 @@ end
 say "Create application.js module as entrypoint"
 create_file Rails.root.join("app/javascript/application.js") do <<-JS
-// Configure your import map in config/importmap.rb
-// import "@rails/actioncable"
-// import "@rails/activestorage"
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 JS
 end
@@ -21,21 +18,8 @@ say "Ensure JavaScript files are in the asset pipeline manifest"
 append_to_file Rails.root.join("app/assets/config/manifest.js"), %(//= link_tree ../../javascript .js\n)
 say "Configure importmap paths in config/importmap.rb"
-create_file Rails.root.join("config/importmap.rb") do <<-RUBY
-Rails.application.config.importmap.draw do
-  pin "application"
-  # Use libraries available via the asset pipeline (locally or via gems).
-  # pin "@rails/actioncable", to: "actioncable.esm.js"
-  # pin "@rails/activestorage", to: "activestorage.esm.js"
-  # Use libraries directly from JavaScript CDNs (see https://www.skypack.dev, https://esm.sh, https://www.jsdelivr.com/esm)
-  # pin "vue", to: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js"
-  # pin "d3", to: "https://esm.sh/d3?bundle"
+copy_file "#{__dir__}/config/importmap.rb", "config/importmap.rb"
-  # Pin vendored modules by first adding the following to app/assets/config/manifest.js:
-  # //= link_tree ../../../vendor/assets/javascripts .js
-  # pin_all_from "vendor/assets/javascripts"
-end
-RUBY
-end
+say "Copying binstub"
+copy_file "#{__dir__}/bin/importmap", "bin/importmap"
+chmod "bin", 0755 & ~File.umask, verbose: false

data/lib/tasks/importmap_tasks.rake CHANGED Viewed

@@ -3,4 +3,10 @@ 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.config.importmap.to_json(resolver: ActionController::Base.helpers)
+  end
 end

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: importmap-rails
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-22 00:00:00.000000000 Z
+date: 2021-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,6 +24,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 6.0.0
+- !ruby/object:Gem::Dependency
+  name: httparty
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.16'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.16'
 description:
 email: david@loudthinking.com
 executables: []
@@ -34,13 +48,17 @@ 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/commands.rb
 - lib/importmap/engine.rb
 - lib/importmap/map.rb
+- lib/importmap/pinner.rb
 - lib/importmap/reloader.rb
 - lib/importmap/version.rb
+- lib/install/bin/importmap
+- lib/install/config/importmap.rb
 - lib/install/install.rb
 - lib/shim.js
 - lib/tasks/importmap_tasks.rake