README.md in importmap-rails-0.8.2 vs README.md in importmap-rails-0.9.0

- old
+ new

@@ -7,11 +7,11 @@ There's [native support for import maps in Chrome/Edge 89+](https://caniuse.com/?search=importmap), and [a shim available](https://github.com/guybedford/es-module-shims) for any browser with basic ESM support. So your app will be able to work with all the evergreen browsers. ## Installation -Importmap for Rails is automatically included in Rails 7+ for new applications, but you can also install it manually in existing applications: +Importmap for Rails is automatically included in Rails 7+ for new applications, but you can also install it manually in existing applications: 1. Add `importmap-rails` to your Gemfile with `gem 'importmap-rails'` 2. Run `./bin/bundle install` 3. Run `./bin/rails importmap:install` @@ -41,11 +41,11 @@ For example: ```rb # config/importmaps.rb -pin "react" to "https://ga.jspm.io/npm:react@17.0.2/index.js" +pin "react", to: "https://ga.jspm.io/npm:react@17.0.2/index.js" ``` means "everytime you see `import React from "react"` change it to `import React from "https://ga.jspm.io/npm:react@17.0.2/index.js"`" @@ -186,31 +186,32 @@ # config/importmap.rb 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 %> +<%= javascript_importmap_tags %> # will include the following link before the importmap is setup: <link rel="modulepreload" href="https://ga.jspm.io/npm:@github/hotkey@1.4.4/dist/index.js"> ... ``` ## Composing import maps By default, Rails loads import map definition from the application's `config/importmap.rb` to the `Importmap::Map` object available at `Rails.application.importmap`. -You can combine multiple import maps by drawing their definitions onto the `Rails.application.importmap`. For example, appending import maps defined in Rails engines: +You can combine multiple import maps by adding paths to additional import map configs to `Rails.application.config.importmap.paths`. For example, appending import maps defined in Rails engines: ```ruby # my_engine/lib/my_engine/engine.rb module MyEngine class Engine < ::Rails::Engine # ... - initializer "my-engine.importmap", after: "importmap" do |app| - app.importmap.draw(Engine.root.join("config/importmap.rb")) + initializer "my-engine.importmap", before: "importmap" do |app| + app.config.importmap.paths << Engine.root.join("config/importmap.rb") + # ... end end end ``` @@ -236,17 +237,22 @@ ## 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 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`: +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. For example, here's how you can do it for Rails engine: ```ruby -if Rails.env.development? - Rails.application.importmap.cache_sweeper watches: [ - Rails.application.root.join("app/javascript"), - MyEngine::Engine.root.join("app/assets/javascripts"), - ] +# my_engine/lib/my_engine/engine.rb + +module MyEngine + class Engine < ::Rails::Engine + # ... + initializer "my-engine.importmap", before: "importmap" do |app| + # ... + app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascripts") + end + end end ``` ## Expected errors from using the es-module-shim