RubyGems - importmap-rails - Versions diffs - 0.1.2 → 0.2.2 - Mend

importmap-rails 0.1.2 → 0.2.2

Files changed (8) hide show

checksums.yaml +4 -4
data/README.md +25 -3
data/app/helpers/importmap/importmap_tags_helper.rb +4 -4
data/lib/importmap/engine.rb +3 -4
data/lib/importmap/{paths.rb → map.rb} +19 -9
data/lib/importmap/version.rb +1 -1
data/lib/install/install.rb +21 -12
metadata +3 -3

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cffa11ad049d46f3ef56fab7da90f3af2327a939798919d99a5947c686182c62
-  data.tar.gz: c5e5e51d1b31390d829eb3597d0edb6baa1b2f47a6927819be7010f5051902bf
+  metadata.gz: 5193a35b0581011cda86209dc8d5999fb9014b31f2bda311bbaffd1a2859dcff
+  data.tar.gz: 2ca482f5d6d97214b30308b869439ba2e5c3a61759ae6da20ae424ad1c88d3c3
 SHA512:
-  metadata.gz: 616fde8d62bf12df6a978db064d6a0dfa6df81738952fab605edf5642d860b555e9f2e533fc0a3856dffd4342cc76e6223b1c66174fbdcb3f56c045e041a3478
-  data.tar.gz: 44080fa546f79169abbc7fde3717df239e5cc0c7765d238762710cb1c62eb9ddb6f8cf33d63cc4abd69c750297714ae42e04ddb29ac44637fe2f27b83cc227e0
+  metadata.gz: 5e8847248c55d406f8c2b49fa233711e1aa5c3d1de5119fba36f957f1723b1000740f2cf89010fef077e2693ed48e4b4234ba14e6b36330a67fa2291bec479a9
+  data.tar.gz: b523ecac3ecc3b0dd3a232b2b3917e6c116c4a2dc8e5954af2c6d79fae19d4d635af0d763ecdba0a0cc12797dae6f907e09d025fe84ff97cc858c6ff5f1ad00f

data/README.md CHANGED Viewed

@@ -13,12 +13,14 @@ There's [native support for import maps in Chrome/Edge 89+](https://caniuse.com/
 2. Run `./bin/bundle install`
 3. Run `./bin/rails importmap:install`
-By default, all the files in `app/assets/javascripts` and the three major Rails JavaScript libraries are already mapped. You can add more mappings in `config/initializers/assets.rb`.
+By default, all the files in `app/assets/javascripts` and the three major Rails JavaScript libraries are already mapped. You can add more mappings in `config/initializers/importmap.rb`.
+Note: In order to use JavaScript from Rails frameworks like Action Cable, Action Text, and Active Storage, you must be running Rails 7.0+. This was the first version that shipped with ESM compatible builds of these libraries.
 ## Usage
-The import map is configured programmatically through the `Rails.application.config.importmap.paths` assignment, which by default is setup in `config/initializers/assets.rb` after running the installer. (Note that since this is a config initializer, you must restart your development server after making any changes.)
+The import map is configured programmatically through the `Rails.application.config.importmap` assignment, which by default is setup in `config/initializers/importmap.rb` after running the installer. (Note that since this is a config initializer, you must restart your development server after making any changes.)
 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.
@@ -29,7 +31,7 @@ It makes sense to use logical names that match the package names used by NPM, su
 ## Use with Hotwire
-This gem was designed for use with [Hotwire](https://hotwired.dev) in mind. The Hotwire gems, like [turbo-rails](https://github.com/hotwired/turbo-rails) and [stimulus-rails](https://github.com/hotwired/stimulus-rails) (both bundled as [hotwire-rails](https://github.com/hotwired/hotwire-rails)), are automatically configured for use with `importmap-rails`. This means you won't have to manually setup the path mapping in `config/initializers/assets.rb`, and instead can simply refer to the logical names directly in your `app/assets/javascripts/application.js`, like so:
+This gem was designed for use with [Hotwire](https://hotwired.dev) in mind. The Hotwire gems, like [turbo-rails](https://github.com/hotwired/turbo-rails) and [stimulus-rails](https://github.com/hotwired/stimulus-rails) (both bundled as [hotwire-rails](https://github.com/hotwired/hotwire-rails)), are automatically configured for use with `importmap-rails`. This means you won't have to manually setup the path mapping in `config/initializers/importmap.rb`, and instead can simply refer to the logical names directly in your `app/assets/javascripts/application.js`, like so:
 ```js
 import "@hotwired/turbo-rails"
@@ -37,6 +39,26 @@ import "@hotwired/stimulus-autoloader"
 ```
+## Use with Skypack (and other 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/initializers/importmap.rb` with the URL instead of the local path:
+```ruby
+Rails.application.config.importmap.draw do
+  pin "trix", to: "https://cdn.skypack.dev/trix"
+  pin "md5", to: "https://cdn.skypack.dev/md5"
+end
+```
+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"))
+```
 ## 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.

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

@@ -8,10 +8,10 @@ module Importmap::ImportmapTagsHelper
     ], "\n"
   end
-  # Generate an inline importmap tag using the passed `importmap_paths` object to produce the JSON map.
-  # By default, `Rails.application.config.importmap.paths` is used for this object,
-  def javascript_inline_importmap_tag(importmap_paths = Rails.application.config.importmap.paths)
-    tag.script(importmap_paths.to_json(self).html_safe, type: "importmap", "data-turbo-track": "reload")
+  # Generate an inline importmap tag using the passed `importmap` object to produce the JSON map.
+  # By default, `Rails.application.config.importmap` is used for this object.
+  def javascript_inline_importmap_tag(importmap = Rails.application.config.importmap)
+    tag.script(importmap.to_json(self).html_safe, type: "importmap", "data-turbo-track": "reload")
   end
   # Include the es-module-shim needed to make importmaps work in browsers without native support (like Firefox + Safari).

data/lib/importmap/engine.rb CHANGED Viewed

@@ -1,15 +1,14 @@
-require "importmap/paths"
+require "importmap/map"
 module Importmap
   class Engine < ::Rails::Engine
-    config.importmap = ActiveSupport::OrderedOptions.new
-    config.importmap.paths = Importmap::Paths.new.tap { |paths| paths.assets_in "app/assets/javascripts" }
+    config.importmap = Importmap::Map.new
     config.autoload_once_paths = %W( #{root}/app/helpers )
     initializer "importmap.assets" do
       if Rails.application.config.respond_to?(:assets)
-        Rails.application.config.assets.precompile += %w( es-module-shims )
+        Rails.application.config.assets.precompile += %w( es-module-shims.js )
       end
     end

data/lib/importmap/{paths.rb → map.rb} RENAMED Viewed

@@ -1,26 +1,36 @@
-class Importmap::Paths
+class Importmap::Map
   attr_reader :files, :directories
   def initialize
-    @files = {}
-    @directories = {}
+    @files, @directories = {}, {}
   end
-  def asset(name, path: nil)
-    @files[name] = path || "#{name}.js"
+  def draw(&block)
+    instance_eval(&block)
   end
-  def assets_in(path, append_base_path: false)
+  def pin(name, to:)
+    @files[name] = to
+  end
+  def pin_all_from(path, append_base_path: false)
     @directories[path] = append_base_path
   end
   def to_json(resolver)
-    { "imports" => map_to_asset_paths(resolver) }.to_json
+    { "imports" => resolve_asset_paths(resolver) }.to_json
   end
   private
-    def map_to_asset_paths(resolver)
-      expanded_files_and_directories.transform_values { |path| resolver.asset_path(path) }
+    def resolve_asset_paths(resolver)
+      expanded_files_and_directories.transform_values do |path|
+        begin
+          resolver.asset_path(path)
+        rescue Sprockets::Rails::Helper::AssetNotFound
+          Rails.logger.warn "Importmap skipped missing path: #{path}"
+          nil
+        end
+      end.compact
     end
     def expanded_files_and_directories

data/lib/importmap/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module Importmap
-  VERSION = "0.1.2"
+  VERSION = "0.2.2"
 end

data/lib/install/install.rb CHANGED Viewed

@@ -10,28 +10,37 @@ end
 say "Create application.js module as entrypoint"
 create_file Rails.root.join("app/assets/javascripts/application.js") do <<-JS
+// Configure your import map in config/initializers/importmap.rb
 // import "@rails/actioncable"
-// import "@rails/actiontext"
 // import "@rails/activestorage"
 JS
 end
 say "Ensure JavaScript files are in the asset pipeline manifest"
-append_to_file Rails.root.join("app/assets/config/manifest.js"), %(//= link_tree ../javascripts)
+append_to_file Rails.root.join("app/assets/config/manifest.js"), %(//= link_tree ../javascripts .js\n)
-say "Configure importmap paths in config/initializers/assets.rb"
-append_to_file Rails.root.join("config/initializers/assets.rb") do <<-RUBY
+say "Configure importmap paths in config/initializers/importmap.rb"
+create_file Rails.root.join("config/initializers/importmap.rb") do <<-RUBY
+# Configure import map to be used for ESM
+Rails.application.config.importmap.draw do
+  # All JavaScript files in the tree are mapped to their name
+  pin_all_from "app/assets/javascripts"
-# Configure importmap paths in addition to having all files in app/assets/javascripts mapped.
-Rails.application.config.importmap.paths.tap do |paths|
-  # Match libraries with their NPM package names for possibility of easy later porting.
+  # Match libraries with their NPM package names for possibility of later porting.
   # Ensure that libraries listed in the path have been linked in the asset pipeline manifest or precompiled.
-  paths.asset "@rails/actioncable", path: "actioncable.esm.js"
-  paths.asset "@rails/actiontext", path: "actiontext.js"
-  paths.asset "@rails/activestorage", path: "activestorage.esm.js"
+  pin "@rails/actioncable", to: "actioncable.esm.js"
+  pin "@rails/activestorage", to: "activestorage.esm.js"
+  pin "@rails/actiontext", to: "actiontext.js"
+  pin "trix", to: "trix.js"
+  # Use libraries directly from JavaScript CDNs
+  # pin "vue", to: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js"
+  # pin "d3", to: "https://cdn.skypack.dev/pin/d3@v7.0.0-03vFl9bie0TSesDkWTJV/mode=imports/optimized/d3.js"
-  # Make all files in directory available as my_channel => channels/my_channel-$digest.js
-  # paths.assets_in "lib/assets/javascripts/channels", append_base_path: true
+  # 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

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: importmap-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.2
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-12 00:00:00.000000000 Z
+date: 2021-08-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -38,7 +38,7 @@ files:
 - app/helpers/importmap/importmap_tags_helper.rb
 - lib/importmap-rails.rb
 - lib/importmap/engine.rb
-- lib/importmap/paths.rb
+- lib/importmap/map.rb
 - lib/importmap/version.rb
 - lib/install/install.rb
 - lib/shim.js