importmap-rails 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +22 -0
- data/lib/importmap/paths.rb +8 -1
- data/lib/importmap/version.rb +1 -1
- data/lib/install/install.rb +14 -7
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e9569cf8ada42f3b40596da6bbb24565237a45f3f49108b91470d18715d6fe55
|
4
|
+
data.tar.gz: 682592d777e3fffa178e4b0f74fc97c83564f4222a881532376a26890faa12da
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6ff7b0f6d2f5510281a6f540096b03dd7dc760927edf229425c1b5032b93e88ae17276fc9b348c7777cff0eacf39b58e944db26169d11db44c35c75185b89384
|
7
|
+
data.tar.gz: 9456a86bc8264595860b0e0e03690c82f9fb739f1a5a4ea7850f59f7570daec22c42ba18d6fde9fd5bc5cc76d4b310c6d4e172c4a5dfe8b18ef98d0a7e597dae
|
data/README.md
CHANGED
@@ -15,6 +15,8 @@ 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
|
|
@@ -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.paths.tap do |paths|
|
48
|
+
paths.asset "trix", path: "https://cdn.skypack.dev/trix"
|
49
|
+
paths.asset "md5", path: "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.
|
data/lib/importmap/paths.rb
CHANGED
@@ -20,7 +20,14 @@ class Importmap::Paths
|
|
20
20
|
|
21
21
|
private
|
22
22
|
def map_to_asset_paths(resolver)
|
23
|
-
expanded_files_and_directories.transform_values
|
23
|
+
expanded_files_and_directories.transform_values do |path|
|
24
|
+
begin
|
25
|
+
resolver.asset_path(path)
|
26
|
+
rescue Sprockets::Rails::Helper::AssetNotFound
|
27
|
+
Rails.logger.warn "Importmap skipped missing asset: #{path}"
|
28
|
+
nil
|
29
|
+
end
|
30
|
+
end.compact
|
24
31
|
end
|
25
32
|
|
26
33
|
def expanded_files_and_directories
|
data/lib/importmap/version.rb
CHANGED
data/lib/install/install.rb
CHANGED
@@ -10,28 +10,35 @@ 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
|
+
# Configure import map beyond the default of having all files in app/assets/javascripts mapped.
|
26
27
|
Rails.application.config.importmap.paths.tap do |paths|
|
27
|
-
# Match libraries with their NPM package names for possibility of
|
28
|
+
# Match libraries with their NPM package names for possibility of later porting.
|
28
29
|
# Ensure that libraries listed in the path have been linked in the asset pipeline manifest or precompiled.
|
29
30
|
paths.asset "@rails/actioncable", path: "actioncable.esm.js"
|
30
|
-
paths.asset "@rails/actiontext", path: "actiontext.js"
|
31
31
|
paths.asset "@rails/activestorage", path: "activestorage.esm.js"
|
32
|
+
paths.asset "@rails/actiontext", path: "actiontext.js"
|
33
|
+
paths.asset "trix"
|
34
|
+
|
35
|
+
# Use libraries directly from JavaScript CDNs
|
36
|
+
# paths.asset "vue", path: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js"
|
37
|
+
# paths.asset "d3", path: "https://cdn.skypack.dev/pin/d3@v7.0.0-03vFl9bie0TSesDkWTJV/mode=imports/optimized/d3.js"
|
32
38
|
|
33
|
-
#
|
34
|
-
#
|
39
|
+
# Map vendored modules by first adding the following to app/assets/config/manifest.js:
|
40
|
+
# //= link_tree ../../../vendor/assets/javascripts .js
|
41
|
+
# paths.assets_in "vendor/assets/javascripts"
|
35
42
|
end
|
36
43
|
RUBY
|
37
44
|
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.1.
|
4
|
+
version: 0.1.3
|
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
|