RubyGems - importmap-rails - Versions diffs - 0.7.6 → 0.8.0 - Mend

importmap-rails 0.7.6 → 0.8.0

Files changed (13) hide show

checksums.yaml +4 -4
data/README.md +40 -11
data/app/assets/javascripts/es-module-shims.js +2 -2
data/app/assets/javascripts/es-module-shims.min.js +1 -0
data/app/helpers/importmap/importmap_tags_helper.rb +3 -3
data/lib/importmap/commands.rb +21 -5
data/lib/importmap/engine.rb +5 -2
data/lib/importmap/map.rb +2 -2
data/lib/importmap/packager.rb +82 -9
data/lib/importmap/version.rb +1 -1
data/lib/install/config/importmap.rb +2 -5
data/lib/install/install.rb +2 -1
metadata +4 -3

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7218dabe6d049d329f32dcb432172a8dbfcb392e300e786001443ad8c1614fb
-  data.tar.gz: 2411983863b5a6353677ade633a0f85878d7f4eefa82c188d493502ff6a63f21
+  metadata.gz: 5ff9e12c3e3daaf05a7de52415d5147fc030efd2ad0cd170eb60a13c0227bb72
+  data.tar.gz: '09d07386cd7f80d6f34d369e530276125e6a5361577896bc847d7968a9f158a6'
 SHA512:
-  metadata.gz: 85e0cf2e07054028ef9b7ee605b8d08bc88b011bf8afbaab3d050f2cccd667bea164d82d25c208e2a3251c1f351c0679fffee56a50d922a99a8b156bd79f0c74
-  data.tar.gz: c6ce2f8be78e4816e3111e2666de3ec1cee55ecf40b8efc3a283e7fa5a91fb29f3e4795396b4ee9232f47fec4fd5230305343793e68db67f3d7f4a27e853304e
+  metadata.gz: 5be65a22e79a2d7bff6b317d1a162dbdc9be2f0fb05449c7675a6c9583a2b578e2e07265bf9fefa1a404a92053dd02f019d705b5b2793184f5e35f28b48a1235
+  data.tar.gz: 32875269eb69d4b1fed15d6d93831dae419354b13e46b2a0edb26b041b403f6e77f4f95169955aa8cda540c8d3d253f49ab0fd2a1a6b8b43e8313a947943ae12

data/README.md CHANGED Viewed

@@ -110,28 +110,46 @@ pin "react", to: "https://cdn.skypack.dev/react"
 ```
-## What if I don't like to use a JavaScript CDN?
+## Downloading vendor files from the JavaScript CDN
-You always have the option to simply download the compiled JavaScript packages from the CDNs, and saving them locally in your application. You can put such files in app/javascript/vendor, and then reference them with local pins, like:
+If you don't want to use a JavaScript CDN in production, you can also download vendored files from the CDN when you're setting up your pins:
+```bash
+./bin/importmap pin react --download
+Pinning "react" to vendor/react.js via download from https://ga.jspm.io/npm:react@17.0.2/index.js
+Pinning "object-assign" to vendor/object-assign.js via download from https://ga.jspm.io/npm:object-assign@4.1.1/index.js
+```
+This will produce pins in your `config/importmap.rb` like so:
 ```ruby
-# config/importmap.rb
-pin "react", to: "vendor/react@17.0.2.js"
+pin "react", to: "vendor/react.js" # https://ga.jspm.io/npm:react@17.0.2/index.js
+pin "object-assign", to: "vendor/object-assign.js" # https://ga.jspm.io/npm:object-assign@4.1.1/index.js
+```
+The packages are downloaded to `app/javascript/vendor`, which you can check into your source control, and they'll be available through your application's own asset pipeline serving.
+If you later wish to remove a downloaded pin, you again pass `--download`:
+```bash
+./bin/importmap unpin react --download
+Unpinning and removing "react"
+Unpinning and removing "object-assign"
 ```
-But using a JavaScript CDN is fast, secure, and easier to deal with. Start there.
+Just like with a normal pin, you can also update a pin by running the `pin --download` command again.
 ## Preloading pinned modules
-To avoid the waterfall effect where the browser has to load one file after another before it can get to the deepest nested import, we use [modulepreload links](https://developers.google.com/web/updates/2017/12/modulepreload). Pinned modules are preloaded by default, but you can turn this off with `preload: false`.
+To avoid the waterfall effect where the browser has to load one file after another before it can get to the deepest nested import, importmap-rails supports [modulepreload links](https://developers.google.com/web/updates/2017/12/modulepreload). Pinned modules can be preloaded by appending `preload: true` to the pin.
 Example:
 ```ruby
 # config/importmap.rb
-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
+pin "@github/hotkey", to: "https://ga.jspm.io/npm:@github/hotkey@1.4.4/dist/index.js", preload: true
+pin "md5", to: "https://cdn.jsdelivr.net/npm/md5@2.3.0/md5.js"
 # app/views/layouts/application.html.erb
 <%= javascript_importmap_tags %>
@@ -153,8 +171,8 @@ You can combine multiple import maps by drawing their definitions onto the `Rail
 module MyEngine
   class Engine < ::Rails::Engine
     # ...
-    initializer "my-engine.importmap" do |app|
-      app.config.importmap.draw(Engine.root.join("config/importmap.rb"))
+    initializer "my-engine.importmap", after: "importmap" do |app|
+      app.importmap.draw(Engine.root.join("config/importmap.rb"))
     end
   end
 end
@@ -182,13 +200,24 @@ 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 to those external files.
+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 add them to the cache sweeper configuration or restart your development server upon changes to those external files. To add them to the configuration to clear the cache on changes, for instance when locally developing an engine, use an initializer like the following sample `config/initializers/importmap-caching.rb`:
+```ruby
+if Rails.env.development?
+  Rails.application.importmap.cache_sweeper watches: [
+    Rails.application.root.join("app/javascript"),
+    MyEngine::Engine.root.join("app/assets/javascripts"),
+  ]
+end
+```
 ## Expected errors from using the es-module-shim
 While import maps are native in Chrome and Edge, they need a shim in other browsers that'll produce a JavaScript console error like `TypeError: Module specifier, 'application' does not start with "/", "./", or "../".`. This error is normal and does not have any user-facing consequences.
+In Firefox. when opening the browser console, the asm.js module lexer build will run in unoptimized mode due to the debugger attaching. This gives a warning message `"asm.js type error: Disabled because no suitable wasm compiler is available"` which is as expected. When the console is closed again, the asm.js optimizations are fully applied, and this can even be verified with the console open by disabling the debugger in `about:config` and reloading the page.
 ## Turning off the shim

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

@@ -1,4 +1,4 @@
-/* ES Module Shims 1.1.0 */
+/* ES Module Shims 1.2.0 */
 (function () {
   const edge = navigator.userAgent.match(/Edge\/\d\d\.\d+$/);
@@ -216,7 +216,7 @@
   const { revokeBlobURLs, noLoadEventRetriggers } = esmsInitOptions$1;
-  const fetchHook = esmsInitOptions$1.fetchHook ? globalHook(esmsInitOptions$1.fetchHook) : fetch;
+  const fetchHook = esmsInitOptions$1.fetch ? globalHook(esmsInitOptions$1.fetch) : fetch;
   function globalHook (name) {
     return typeof name === 'string' ? self[name] : name;

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

@@ -0,0 +1 @@

data/app/helpers/importmap/importmap_tags_helper.rb CHANGED Viewed

@@ -26,9 +26,9 @@ module Importmap::ImportmapTagsHelper
   end
   # Include the es-modules-shim needed to make importmaps work in browsers without native support (like Firefox + Safari).
-  def javascript_importmap_shim_tag
-    javascript_include_tag "es-module-shims", async: true, "data-turbo-track": "reload",
-      nonce: content_security_policy_nonce
+  def javascript_importmap_shim_tag(minimized: true)
+    javascript_include_tag minimized ? "es-module-shims.min.js" : "es-module-shims.js",
+      async: true, "data-turbo-track": "reload", nonce: content_security_policy_nonce
   end
   # Import a named JavaScript module(s) using a script-module tag.

data/lib/importmap/commands.rb CHANGED Viewed

@@ -3,16 +3,26 @@ require "importmap/packager"
 class Importmap::Commands < Thor
   include Thor::Actions
+  def self.exit_on_failure?
+    false
+  end
   desc "pin [*PACKAGES]", "Pin new packages"
   option :env, type: :string, aliases: :e, default: "production"
   option :from, type: :string, aliases: :f, default: "jspm"
+  option :download, type: :boolean, aliases: :d, default: false
   def pin(*packages)
     if imports = packager.import(*packages, env: options[:env], from: options[:from])
       imports.each do |package, url|
-        puts %(Pinning "#{package}" to #{url})
-        pin = packager.pin_for(package, url)
+        if options[:download]
+          puts %(Pinning "#{package}" to vendor/#{package}.js via download from #{url})
+          packager.download(package, url)
+          pin = packager.vendored_pin_for(package, url)
+        else
+          puts %(Pinning "#{package}" to #{url})
+          pin = packager.pin_for(package, url)
+        end
         if packager.packaged?(package)
           gsub_file("config/importmap.rb", /^pin "#{package}".*$/, pin, verbose: false)
@@ -28,12 +38,18 @@ class Importmap::Commands < Thor
   desc "unpin [*PACKAGES]", "Unpin existing packages"
   option :env, type: :string, aliases: :e, default: "production"
   option :from, type: :string, aliases: :f, default: "jspm"
+  option :download, type: :boolean, aliases: :d, default: false
   def unpin(*packages)
     if imports = packager.import(*packages, env: options[:env], from: options[:from])
       imports.each do |package, url|
         if packager.packaged?(package)
-          puts %(Unpinning "#{package}")
-          remove_line_from_file "config/importmap.rb", /pin "#{package}"/
+          if options[:download]
+            puts %(Unpinning and removing "#{package}")
+          else
+            puts %(Unpinning "#{package}")
+          end
+          packager.remove(package)
         end
       end
     else

data/lib/importmap/engine.rb CHANGED Viewed

@@ -26,7 +26,9 @@ module Importmap
     initializer "importmap.cache_sweeper" do |app|
       if app.config.importmap.sweep_cache
-        app.importmap.cache_sweeper watches: app.root.join("app/javascript")
+        app.importmap.cache_sweeper watches: [
+          app.root.join("app/javascript"), app.root.join("vendor/javascript")
+        ]
         ActiveSupport.on_load(:action_controller_base) do
           before_action { Rails.application.importmap.cache_sweeper.execute_if_updated }
@@ -36,8 +38,9 @@ module Importmap
     initializer "importmap.assets" do
       if Rails.application.config.respond_to?(:assets)
-        Rails.application.config.assets.precompile += %w( es-module-shims.js )
+        Rails.application.config.assets.precompile += %w( es-module-shims.js es-module-shims.min.js )
         Rails.application.config.assets.paths << Rails.root.join("app/javascript")
+        Rails.application.config.assets.paths << Rails.root.join("vendor/javascript")
       end
     end

data/lib/importmap/map.rb CHANGED Viewed

@@ -22,12 +22,12 @@ class Importmap::Map
     self
   end
-  def pin(name, to: nil, preload: true)
+  def pin(name, to: nil, preload: false)
     clear_cache
     @packages[name] = MappedFile.new(name: name, path: to || "#{name}.js", preload: preload)
   end
-  def pin_all_from(dir, under: nil, to: nil, preload: true)
+  def pin_all_from(dir, under: nil, to: nil, preload: false)
     clear_cache
     @directories[dir] = MappedDir.new(dir: dir, under: under, path: to, preload: preload)
   end

data/lib/importmap/packager.rb CHANGED Viewed

@@ -10,8 +10,9 @@ class Importmap::Packager
   singleton_class.attr_accessor :endpoint
   self.endpoint = URI("https://api.jspm.io/generate")
-  def initialize(importmap_path = "config/importmap.rb")
-    @importmap_path = importmap_path
+  def initialize(importmap_path = "config/importmap.rb", vendor_path: "vendor/javascript")
+    @importmap_path = Pathname.new(importmap_path)
+    @vendor_path    = Pathname.new(vendor_path)
   end
   def import(*packages, env: "production", from: "jspm")
@@ -33,15 +34,43 @@ class Importmap::Packager
     %(pin "#{package}", to: "#{url}")
   end
+  def vendored_pin_for(package, url)
+    filename = package_filename(package)
+    version  = extract_package_version_from(url)
+    if "#{package}.js" == filename
+      %(pin "#{package}" # #{version})
+    else
+      %(pin "#{package}", to: "#{filename}" # #{version})
+    end
+  end
   def packaged?(package)
     importmap.match(/^pin "#{package}".*$/)
   end
+  def download(package, url)
+    ensure_vendor_directory_exists
+    remove_existing_package_file(package)
+    download_package_file(package, url)
+  end
+  def remove(package)
+    remove_existing_package_file(package)
+    remove_package_from_importmap(package)
+  end
   private
+    def post_json(body)
+      Net::HTTP.post(self.class.endpoint, body.to_json, "Content-Type" => "application/json")
+    rescue => error
+      raise HTTPError, "Unexpected transport error (#{error.class}: #{error.message})"
+    end
     def extract_parsed_imports(response)
       JSON.parse(response.body).dig("map", "imports")
     end
     def handle_failure_response(response)
       if error_message = parse_service_error(response)
         raise ServiceError, error_message
@@ -56,13 +85,57 @@ class Importmap::Packager
       nil
     end
-    def post_json(body)
-      Net::HTTP.post(self.class.endpoint, body.to_json, { "Content-Type" => "application/json" })
-    rescue => error
-      raise HTTPError, "Unexpected transport error (#{error.class}: #{error.message})"
-    end
     def importmap
       @importmap ||= File.read(@importmap_path)
     end
+    def ensure_vendor_directory_exists
+      FileUtils.mkdir_p @vendor_path
+    end
+    def remove_existing_package_file(package)
+      FileUtils.rm_rf vendored_package_path(package)
+    end
+    def remove_package_from_importmap(package)
+      all_lines = File.readlines(@importmap_path)
+      with_lines_removed = all_lines.select { |line| line !~ /pin "#{package}"/ }
+      File.open(@importmap_path, "w") do |file|
+        with_lines_removed.each { |line| file.write(line) }
+      end
+    end
+    def download_package_file(package, url)
+      response = Net::HTTP.get_response(URI(url))
+      if response.code == "200"
+        save_vendored_package(package, response.body)
+      else
+        handle_failure_response(response)
+      end
+    end
+    def save_vendored_package(package, source)
+      File.open(vendored_package_path(package), "w+") do |vendored_package|
+        vendored_package.write remove_sourcemap_comment_from(source).force_encoding("UTF-8")
+      end
+    end
+    def remove_sourcemap_comment_from(source)
+      source.gsub(/^\/\/# sourceMappingURL=.*/, "")
+    end
+    def vendored_package_path(package)
+      @vendor_path.join(package_filename(package))
+    end
+    def package_filename(package)
+      package.gsub("/", "--") + ".js"
+    end
+    def extract_package_version_from(url)
+      url.match(/@\d+\.\d+\.\d+/)&.to_a&.first
+    end
 end

data/lib/importmap/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module Importmap
-  VERSION = "0.7.6"
+  VERSION = "0.8.0"
 end

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

@@ -1,6 +1,3 @@
-# Use direct uploads for Active Storage (remember to import "@rails/activestorage" in your application.js)
-# pin "@rails/activestorage", to: "activestorage.esm.js"
+# Pin npm packages by running ./bin/importmap
-# Use npm packages from a JavaScript CDN by running ./bin/importmap
-pin "application"
+pin "application", preload: true

data/lib/install/install.rb CHANGED Viewed

@@ -16,7 +16,8 @@ end
 if (sprockets_manifest_path = Rails.root.join("app/assets/config/manifest.js")).exist?
   say "Ensure JavaScript files are in the Sprocket manifest"
-  append_to_file sprockets_manifest_path, %(//= link_tree ../../javascript .js\n)
+  append_to_file sprockets_manifest_path,
+    %(//= link_tree ../../javascript .js\n//= link_tree ../../../vendor/javascript .js\n)
 end
 say "Configure importmap paths in config/importmap.rb"

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: importmap-rails
 version: !ruby/object:Gem::Version
-  version: 0.7.6
+  version: 0.8.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-29 00:00:00.000000000 Z
+date: 2021-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -34,6 +34,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/es-module-shims.js
+- app/assets/javascripts/es-module-shims.min.js
 - app/helpers/importmap/importmap_tags_helper.rb
 - lib/importmap-rails.rb
 - lib/importmap/commands.rb
@@ -61,7 +62,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="