importmap-rails 0.1.1 → 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +23 -1
- 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 +20 -10
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: cbd2170db15c02ccf1f860205163effe77dc5ede4c0196cbc424e09484740a71
|
|
4
|
+
data.tar.gz: be12a543aa3ce6950551d3044114e19adbcaadfb4c25bc3adbad45cad2dd0c9b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 69d4ba2a8c5dcacfc2afe7111c8806da5d2a845590cebc4cf15338ac2f8a913af8f95d32910df142476b039fd91325b9a3157f72904c921d85207966269d776a
|
|
7
|
+
data.tar.gz: 2483d8791a05f12f19cb6e09b9372a254da9c60f9586c78d9470e9d57521848452590ebc66c16aca51dff19f4b71df35478c87b4c9ae6bbbf30a238e398a2dd3
|
data/README.md
CHANGED
|
@@ -15,10 +15,12 @@ There's [native support for import maps in Chrome/Edge 89+](https://caniuse.com/
|
|
|
15
15
|
|
|
16
16
|
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`.
|
|
17
17
|
|
|
18
|
+
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.
|
|
19
|
+
|
|
18
20
|
|
|
19
21
|
## Usage
|
|
20
22
|
|
|
21
|
-
The import map is configured programmatically through the `Rails.application.config.importmap
|
|
23
|
+
The import map is configured programmatically through the `Rails.application.config.importmap` 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.)
|
|
22
24
|
|
|
23
25
|
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.
|
|
24
26
|
|
|
@@ -37,6 +39,26 @@ import "@hotwired/stimulus-autoloader"
|
|
|
37
39
|
```
|
|
38
40
|
|
|
39
41
|
|
|
42
|
+
## Use with Skypack (and other CDNs)
|
|
43
|
+
|
|
44
|
+
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/assets.rb` with the URL instead of the local path:
|
|
45
|
+
|
|
46
|
+
```ruby
|
|
47
|
+
Rails.application.config.importmap.draw do
|
|
48
|
+
pin "trix", to: "https://cdn.skypack.dev/trix"
|
|
49
|
+
pin "md5", to: "https://cdn.skypack.dev/md5"
|
|
50
|
+
end
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Now you can use these in your application.js entrypoint like you would any other module:
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
import "trix"
|
|
57
|
+
import md5 from "md5"
|
|
58
|
+
console.log(md5("Hash it out"))
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
|
|
40
62
|
## Expected errors from using the es-module-shim
|
|
41
63
|
|
|
42
64
|
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.
|
|
@@ -8,10 +8,10 @@ module Importmap::ImportmapTagsHelper
|
|
|
8
8
|
], "\n"
|
|
9
9
|
end
|
|
10
10
|
|
|
11
|
-
# Generate an inline importmap tag using the passed `
|
|
12
|
-
# By default, `Rails.application.config.importmap
|
|
13
|
-
def javascript_inline_importmap_tag(
|
|
14
|
-
tag.script(
|
|
11
|
+
# Generate an inline importmap tag using the passed `importmap` object to produce the JSON map.
|
|
12
|
+
# By default, `Rails.application.config.importmap` is used for this object.
|
|
13
|
+
def javascript_inline_importmap_tag(importmap = Rails.application.config.importmap)
|
|
14
|
+
tag.script(importmap.to_json(self).html_safe, type: "importmap", "data-turbo-track": "reload")
|
|
15
15
|
end
|
|
16
16
|
|
|
17
17
|
# Include the es-module-shim needed to make importmaps work in browsers without native support (like Firefox + Safari).
|
data/lib/importmap/engine.rb
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
require "importmap/
|
|
1
|
+
require "importmap/map"
|
|
2
2
|
|
|
3
3
|
module Importmap
|
|
4
4
|
class Engine < ::Rails::Engine
|
|
5
|
-
config.importmap =
|
|
6
|
-
config.importmap.paths = Importmap::Paths.new.tap { |paths| paths.assets_in "app/assets/javascripts" }
|
|
5
|
+
config.importmap = Importmap::Map.new
|
|
7
6
|
|
|
8
7
|
config.autoload_once_paths = %W( #{root}/app/helpers )
|
|
9
8
|
|
|
10
9
|
initializer "importmap.assets" do
|
|
11
10
|
if Rails.application.config.respond_to?(:assets)
|
|
12
|
-
Rails.application.config.assets.precompile += %w( es-module-shims )
|
|
11
|
+
Rails.application.config.assets.precompile += %w( es-module-shims.js )
|
|
13
12
|
end
|
|
14
13
|
end
|
|
15
14
|
|
|
@@ -1,26 +1,36 @@
|
|
|
1
|
-
class Importmap::
|
|
1
|
+
class Importmap::Map
|
|
2
2
|
attr_reader :files, :directories
|
|
3
3
|
|
|
4
4
|
def initialize
|
|
5
|
-
@files = {}
|
|
6
|
-
@directories = {}
|
|
5
|
+
@files, @directories = {}, {}
|
|
7
6
|
end
|
|
8
7
|
|
|
9
|
-
def
|
|
10
|
-
|
|
8
|
+
def draw(&block)
|
|
9
|
+
instance_eval(&block)
|
|
11
10
|
end
|
|
12
11
|
|
|
13
|
-
def
|
|
12
|
+
def pin(name, to:)
|
|
13
|
+
@files[name] = to
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
def pin_all_from(path, append_base_path: false)
|
|
14
17
|
@directories[path] = append_base_path
|
|
15
18
|
end
|
|
16
19
|
|
|
17
20
|
def to_json(resolver)
|
|
18
|
-
{ "imports" =>
|
|
21
|
+
{ "imports" => resolve_asset_paths(resolver) }.to_json
|
|
19
22
|
end
|
|
20
23
|
|
|
21
24
|
private
|
|
22
|
-
def
|
|
23
|
-
expanded_files_and_directories.transform_values
|
|
25
|
+
def resolve_asset_paths(resolver)
|
|
26
|
+
expanded_files_and_directories.transform_values do |path|
|
|
27
|
+
begin
|
|
28
|
+
resolver.asset_path(path)
|
|
29
|
+
rescue Sprockets::Rails::Helper::AssetNotFound
|
|
30
|
+
Rails.logger.warn "Importmap skipped missing path: #{path}"
|
|
31
|
+
nil
|
|
32
|
+
end
|
|
33
|
+
end.compact
|
|
24
34
|
end
|
|
25
35
|
|
|
26
36
|
def expanded_files_and_directories
|
data/lib/importmap/version.rb
CHANGED
data/lib/install/install.rb
CHANGED
|
@@ -10,28 +10,38 @@ end
|
|
|
10
10
|
|
|
11
11
|
say "Create application.js module as entrypoint"
|
|
12
12
|
create_file Rails.root.join("app/assets/javascripts/application.js") do <<-JS
|
|
13
|
+
// Configure your import map in config/initializers/assets.rb
|
|
14
|
+
|
|
13
15
|
// import "@rails/actioncable"
|
|
14
|
-
// import "@rails/actiontext"
|
|
15
16
|
// import "@rails/activestorage"
|
|
16
17
|
JS
|
|
17
18
|
end
|
|
18
19
|
|
|
19
20
|
say "Ensure JavaScript files are in the asset pipeline manifest"
|
|
20
|
-
append_to_file Rails.root.join("app/assets/config/manifest.js"), %(//= link_tree ../javascripts)
|
|
21
|
+
append_to_file Rails.root.join("app/assets/config/manifest.js"), %(//= link_tree ../javascripts .js\n)
|
|
21
22
|
|
|
22
23
|
say "Configure importmap paths in config/initializers/assets.rb"
|
|
23
24
|
append_to_file Rails.root.join("config/initializers/assets.rb") do <<-RUBY
|
|
24
25
|
|
|
25
|
-
# Configure
|
|
26
|
-
Rails.application.config.importmap.
|
|
27
|
-
#
|
|
26
|
+
# Configure import map to be used for ESM
|
|
27
|
+
Rails.application.config.importmap.draw do
|
|
28
|
+
# All JavaScript files in the tree are mapped to their name
|
|
29
|
+
pin_all_from "app/assets/javascripts"
|
|
30
|
+
|
|
31
|
+
# Match libraries with their NPM package names for possibility of later porting.
|
|
28
32
|
# Ensure that libraries listed in the path have been linked in the asset pipeline manifest or precompiled.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
pin "@rails/actioncable", to: "actioncable.esm.js"
|
|
34
|
+
pin "@rails/activestorage", to: "activestorage.esm.js"
|
|
35
|
+
pin "@rails/actiontext", to: "actiontext.js"
|
|
36
|
+
pin "trix", to: "trix.js"
|
|
37
|
+
|
|
38
|
+
# Use libraries directly from JavaScript CDNs
|
|
39
|
+
# pin "vue", to: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js"
|
|
40
|
+
# pin "d3", to: "https://cdn.skypack.dev/pin/d3@v7.0.0-03vFl9bie0TSesDkWTJV/mode=imports/optimized/d3.js"
|
|
32
41
|
|
|
33
|
-
#
|
|
34
|
-
#
|
|
42
|
+
# Pin vendored modules by first adding the following to app/assets/config/manifest.js:
|
|
43
|
+
# //= link_tree ../../../vendor/assets/javascripts .js
|
|
44
|
+
# pin_all_from "vendor/assets/javascripts"
|
|
35
45
|
end
|
|
36
46
|
RUBY
|
|
37
47
|
end
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: importmap-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- David Heinemeier Hansson
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-08-
|
|
11
|
+
date: 2021-08-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -38,7 +38,7 @@ files:
|
|
|
38
38
|
- app/helpers/importmap/importmap_tags_helper.rb
|
|
39
39
|
- lib/importmap-rails.rb
|
|
40
40
|
- lib/importmap/engine.rb
|
|
41
|
-
- lib/importmap/
|
|
41
|
+
- lib/importmap/map.rb
|
|
42
42
|
- lib/importmap/version.rb
|
|
43
43
|
- lib/install/install.rb
|
|
44
44
|
- lib/shim.js
|