Importmap for Rails
Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
Installation
...
Usage
...
License
Importmap for Rails is released under the MIT License.
Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
...
...
Importmap for Rails is released under the MIT License.
After adding the importmap-rails gem to a freshly generated Rails app's Gemfile and running rails importmap:install
, I'm seeing the following javascript console error messages:
An import map is added after module script load was triggered.
Uncaught TypeError: Failed to resolve module specifier "application". Relative references must start with either "/", "./", or "../".
I have tested this with fresh Rails 6.1 and 7.0a apps in Chrome and Safari.
I apologize in advance if this is not a importmap problem, I am still learning to use it.
I have problem with bootstrap configuration through importmaps, for some reason when I run bin/importmap pin bootstrap --download
I am getting these errors in chrome console (jsdelivr, unpkg) cdn providers
GET http://localhost:3000/assets/modifiers/index.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:1 GET http://localhost:3000/assets/enums.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:6 GET http://localhost:3000/assets/popper.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:8 GET http://localhost:3000/assets/popper-lite.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-ce872054c46039b8d5939756969a7a008e8d1ab3907e72b141e9e4650641b9ea.js:4 GET http://localhost:3000/assets/createPopper.js net::ERR_ABORTED 404 (Not Found)
when I use command without download option like this bin/importmap pin bootstrap
it works properly...not sure what is the problem in both commands it uses same cdn link
errors below are from JSPM cdn provider
GET http://localhost:3000/_/40866a73.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/enums.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/index.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/eventListeners.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/popperOffsets.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/offset.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/applyStyles.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/flip.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/preventOverflow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/arrow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/hide.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/popper-lite.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/detectOverflow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getBoundingClientRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getCompositeRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getNodeScroll.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getWindowScroll.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getWindow.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/instanceOf.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getHTMLElementScroll.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getNodeName.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getWindowScrollBarX.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getDocumentElement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/isScrollParent.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getComputedStyle.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getLayoutRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/listScrollParents.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getParentNode.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getOffsetParent.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/08d18af5.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/03a0b0f1.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/5328de10.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/getMainAxisFromPlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/8937ec25.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/getOppositePlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/computeAutoPlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/utils/getOppositeVariationPlacement.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/ea19fa71.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/8d8f2f4c.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/c591086d.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/_/6e98d37c.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/modifiers/computeStyles.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getDocumentRect.js net::ERR_ABORTED 404 (Not Found)
@popperjs--core-139c8b1356b983f829b396b480ea4fa4e5205f8045a1c02bccb5024bda4fded6.js:1 GET http://localhost:3000/assets/dom-utils/getViewportRect.js 404 (Not Found)
javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "@popperjs/core"
import "bootstrap"
config/importmap.rb
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.js"
pin "@hotwired/stimulus", to: "stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap" # @5.1.3
pin "@popperjs/core", to: "@popperjs--core.js" # @2.10.2
Given the new bin
command to pin and unpin dependencies, what do you think about adding a new outdated
command to check what needs to be updated (like bundler / yarn / etc) in order to make it easier and not having to check each single dependency (given that integrations like dependabot wouldn't support that... at least initially, maybe at some point?)
I'm updating importmap-rails
from 0.6.1 to 0.7.6 and I get the following error:
NoMethodError: private method `importmap=' called for #<XXXX::Application:0x000056001ecded98>
/home/runner/work/xxxx/xxxx/vendor/bundle/ruby/2.6.0/gems/importmap-rails-0.7.6/lib/importmap/engine.rb:14:in `block in <class:Engine>'
# config/importmap.rb
pin 'bootstrap', to: 'https://cdn.skypack.dev/bootstrap'
pin '@hotwired/turbo-rails', to: 'turbo.js'
pin '@hotwired/stimulus', to: 'stimulus.js'
pin '@hotwired/stimulus-autoloader', to: 'stimulus-autoloader.js'
pin '@hotwired/stimulus-importmap-autoloader', to: 'stimulus-importmap-autoloader.js'
pin '@rails/activestorage', to: 'https://cdn.skypack.dev/@rails/activestorage'
pin '@rails/actioncable', to: 'https://cdn.skypack.dev/@rails/actioncable'
pin 'trix', to: 'https://cdn.skypack.dev/trix'
pin '@rails/actiontext', to: 'https://cdn.skypack.dev/@rails/actiontext'
pin_all_from 'app/assets/javascripts/channels', under: 'channels'
pin_all_from 'app/assets/javascripts/controllers', under: 'controllers'
pin 'application'
Hi,
I am using "face-api.js" package (https://github.com/justadudewhohacks/face-api.js).
When I use "./bin/importmap pin face-api.js", there are packages added to config/importmap.rb and I have a problem with tslib because it does not provide default export. It seems that this is common issue with ES6 tslib.
So that I want to use package.json to manage this lib. yarn add face-api.js
Then, I "pin" this inside config/importmap.rb pin 'face-api.js'
Add it to application.js import "face-api.js";
And, use it in my js component import * as faceapi from "face-api.js";
After restart rails server, i got this error ---- error on my browser's console ---- Uncaught TypeError: Failed to resolve module specifier "face-api.js". Relative references must start with either "/", "./", or "../".
Rails server reports some more warning in console ---- rails server ---- Rendered logins/index.html.erb within layouts/application (Duration: 7.4ms | Allocations: 2177) Importmap skipped missing path: face-api.js.js
I tried to change "face-api.js" to "face-api", but it does not work.
Using "importmap json" does not show this package in my import map
I am not sure what is missing. Could you please give a support ?
Thanks,
In Webpacker, if I made a mistake in an import
statement within a Stimulus controller like:
import { Controller } from 'bad_name_here'
Then I'd get an error in the JavaScript console or when compiling that would show:
Module not found: Error: Can't resolve 'bad_name_here' in ...
If I make a mistake in an import
statement in a Stimulus controller when I'm using importmap-rails
, then I don't get any error. The JavaScript for that controller just doesn't run. Could this be changed so that we continue to get a warning for import mistakes?
I can see that if I have a bad import
statement up in my application.js
file that I do get an error like this which is good:
Uncaught TypeError: Failed to resolve module specifier "bad_name_here" ...
Being in the process of upgrading and modernizing a Rails application, I plan to use import maps. However, my app has 3 definite scopes which each have their own functionality and layout (public, admin and the actual application scope, where authenticated users perform their activities).
A single 'application' import map shared between scopes and layouts does not cut it for my application (for performance reasons and for eventual security concerns).
My proposal is therefore to add such functionality to importmap-rails.
This PR is rather light and represents the minimum changeset to this gem that allow to use it with more than a single import map (i.e. these changes would allow to use the helpers as is).
The changes are to the helpers module, simply adding the ImportMap::Map
instance as a parameter in 2 of its methods. The added parameter value defaults to Rails.application.importmap
, therefore it does not break the existing usage, but does allow to use the helpers methods with different ImportMap::Map
instances (instead of having to rewrite complete helpers in the application that reproduce the same thing with another importmap instance).
That being said, as it is, one still has to go against the grain when defining multiple import maps instances, for example:
config/importmap.rb
files be named and where should they exist?app.config.importmap.paths
for multiple import maps?If there is interest for more functionality to be added to importmap-rails to support multiple import maps, I will gladly contribute towards it. Otherwise, at least the changes in this PR make it still possible to use the gem without having to redefine custom helpers in the application.
I have tried to use Uglifier in harmony mode and one of the es-shims
dependencies (es-module-lexer
) is breaking the asset precompilation. It's working when using Terser.
I hope to have it fixed with https://github.com/guybedford/es-module-lexer/pull/84 but for now Terser seem to be the solution :)
The current version of es-module-shims provided
by importmap-rails (v1.4.6) requires allowing
frame-src: blob:
in an app's CSP policy (it
creates an iframe with a blob as it's source
in order to perform feature detection). This is
quite a permissive thing to allow in csp and
I wouldn't recommend it if there is an alternative.
Since v1.4.7 es-module-shims no longer uses a
blob and it will work with script-src: 'self'
instead. I've upgraded to the latest version,
which is v1.5.5. For more details about the
CSP issue and it's fix see:
I'm confused about the idiomatic way to process Sass in Rails 7.
The README.md for this repo says:
This frees you from needing Webpack, Yarn, npm, or any other part of the JavaScript toolchain. All you need is the asset pipeline that's already included in Rails.
and The Rails Guide to The Asset Pipeline states that:
Rails [7] can easily work with Sass by adding the
sassc-rails
gem to yourGemfile
, which is used by Sprockets for Sass compilation
But in October 2020 we learned that LibSass is Deprecated, and that we should be using Dart Sass instead.
The sassc-rails gem is based on LibSass.
Hence should we be using something else to process Sass? And if so is the documentation on the Rails 7 asset pipeline misleading?
I'm relatively new to Rails and my naive reading of The README.md and The Asset Pipeline Guide led me to think that we should be using "the asset pipeline that's already included in Rails" to compile Sass and did not need "Yarn, npm, or any other part of the JavaScript toolchain".
What is the Rails 7 idiomatic way to process Sass?
While developing, changes in js files are properly noticed by listen gem. New digest for changed file is generated. However, the script tag of importmap still contains old digest. Multiple refreshes don't help. Only after server restart the new digests are noticed and used by importmap.
The issue does not exists on version to 0.5.3.
The default installation of a new rails 7 application has this importmap
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
Adding libraries, particularly true with each of the stimulus-components, and the stimulus-library may alter the default reference (to stimulus in these cases). One notices overwriting, whether downloaded or not, and no preloading attribute, as:
pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.1.1
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/dist/stimulus.js"
Remove the library (or component)
bin/importmap unpin stimulus-password-visibility
[...]
bin/importmap unpin stimulus-library
now hotwired/stimulus is out of the importmap...
Recovering from this is not transparent. The readMe installation instructions appear to be necessary to try and re-set to the default situation. Faced with the problem of the importmap being altered in what would be a non-standard situation,
1. Run ./bin/bundle add importmap-rails
2. Run ./bin/rails importmap:install
but this results in a different importmap.rb file:
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/app/javascript/turbo/index.js"
pin "@hotwired/turbo", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/dist/turbo.es2017-esm.js"
pin "@rails/actioncable/src", to: "https://ga.jspm.io/npm:@rails/[email protected]/src/index.js"
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/dist/stimulus.js"
turbo is added, stimulus loading is not. No preload defined. Conclusion: Not an avenue.
Having kept track of the importmap and is evolution (that was not done with application.js) the hope is a fallback situation of:
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
When set this way, getting the json version of the importmap
bin/importmap json
{
"imports": {
"application": "/assets/application-3897b39d0f7fe7e947af9b84a1e1304bb30eb1dadb983104797d0a5e26a08736.js",
"@hotwired/turbo-rails": "/assets/turbo.min-7ab2ea9f35bae4a4d65b552f9b93524099f267a8ba3a2e07002aaa7bff8ae4cf.js",
"@hotwired/stimulus": "/assets/stimulus.min-2dae3fdcdb1a5ee8172d3dc02a2a10cd6d5f022cc7782b3888cedc06bab7388a.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
"trix": "/assets/trix-1563ff9c10f74e143b3ded40a8458497eaf2f87a648a5cbbfebdb7dec3447a5e.js",
"@rails/actiontext": "/assets/actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/autogrow_controller": "/assets/controllers/autogrow_controller-cafab272b622b393bcc0400ee928b349b974c0ad4cb3d2e7ec6d6c219d91044c.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js"
}
}
appears to have proper digest hashes. But can this be asserted/verified aside from the browser console error messages?
Note: at one point I reverted to duplicating and commenting out the importmap lines, but even the security blanket within the file of:
# pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
got removed. I literally had to spin up a new application to ensure I was getting things right (and fortunately allow me to stumble into another issue.. #160).
Possible expectations • a non-manual recovery mechanism to default situation • disallow dependencies to touch basic installations
The following importmap is almost stock default for rails 7, with the addition of trix.
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
This configuration however, will disable the functionality of targets. inserting the following in a show view
<div class="thumb-wrapper">
<a href="#img1">
<img src="https://unsplash.it/800/400?image=17" class="thumbnail_lb">
</a>
<a href="#img2">
<img src="https://unsplash.it/800/400?image=13" class="thumbnail_lb">
</a>
<a href="#img3">
<img src="https://unsplash.it/800/400?image=3" class="thumbnail_lb">
</a>
</div>
<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
<img src="https://unsplash.it/800/400?image=17">
</a>
<a href="#" class="lightbox" id="img2">
<img src="https://unsplash.it/800/400?image=13">
</a>
<a href="#" class="lightbox" id="img3">
<img src="https://unsplash.it/800/400?image=2">
</a>
and consulting the console's inspector will highlight the hidden lightbox container when the thumbnail is clicked upon, but nothing happens in the browser window.
By commenting out the stimulus line (removing preload has no visible impact)
# pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
the targetting functionality of "#" returns.
Expected behaviour:
having bothaccess to hotwired/stimulus and html targets.
[please forgive the cross-posting]
General disclaimer: I don't pretend to know what I'm doing but I think this isn't pilot error.
I had my page working. I then reset my config/importmap.rb
back to its original state and did importmap pin material-components-web --download
. Then I restarted the server and hit reload on the browser. I got these errors in the development log as well as similar errors in the browser's console.
ActionController::RoutingError (No route matches [GET] "/assets/_/0de2e5df.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/11149786.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/22618647.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/3b218f63.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/5e4511d6.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/68e6cd11.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/6cbdd747.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/78320754.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/8d64af94.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/9346910f.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/94ad6608.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/961b8fcc.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/e38018b4.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/ed910571.js"):
ActionController::RoutingError (No route matches [GET] "/assets/_/f69e15dd.js"):
ActionController::RoutingError (No route matches [GET] "/assets/character-counter/index.js"):
ActionController::RoutingError (No route matches [GET] "/assets/component.js"):
ActionController::RoutingError (No route matches [GET] "/assets/constants.js"):
ActionController::RoutingError (No route matches [GET] "/assets/foundation.js"):
ActionController::RoutingError (No route matches [GET] "/assets/helper-text/index.js"):
ActionController::RoutingError (No route matches [GET] "/assets/icon/constants.js"):
ActionController::RoutingError (No route matches [GET] "/assets/icon/foundation.js"):
ActionController::RoutingError (No route matches [GET] "/assets/icon/index.js"):
Aside from not working, I couldn't figure out a simple work around.
Again... not knowing what I'm doing or talking about, the /assets/component.js
type paths trouble me. This particular set of errors comes from mdc-textfield and looking at the file, the paths are relative such as ./component.js
so I'm assuming that is suppose to be relative to the mdc-textfield subdirectory since many components have a component.ts
file in the git repository. But in vendor/javascripts, there are no subdirectories for each of the components. Rather, everything is just flat files so simply creating a local component.js
file might get mdc-textfield working but will break on all the other MDC components.
I'm using Rails 7.0.4.
For now, I'll just go back to pulling it down from JSPM but I thought I would mention it. Eventually I want to be able to have all of the assets local so the app I'm working on can operate off line if necessary.
Shouldn't we use single-quoted strings inside importmap.rb by default?
When there is a single-quoted string inside importmap.rb, as following example:
pin 'jquery' # @3.4.1
the entry will be ignored when the command ./bin/importmap audit
is executed, and the vulnerability in the version of jquery is not reported.
When using rails new name --javascript importmap --force
, the instalator still prompts about conflicts:
rails importmap:install
Add Importmap include tags in application layout
insert app/views/layouts/application.html.erb
Create application.js module as entrypoint
conflict app/javascript/application.js
Overwrite /Users/me/name/app/javascript/application.js? (enter "h" for help) [Ynaqdhm] Y
force app/javascript/application.js
Use vendor/javascript for downloaded pins
exist vendor/javascript
identical vendor/javascript/.keep
Ensure JavaScript files are in the Sprocket manifest
append app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
conflict config/importmap.rb
Overwrite /Users/me/name/config/importmap.rb? (enter "h" for help) [Ynaqdhm] Y
force config/importmap.rb
Prompt:
Overwrite /Users/me/name/config/importmap.rb? (enter "h" for help) [Ynaqdhm] Y
No prompt
rails new name -j importmap -f
.
I need to have chart.js
in my application, if I pin it without the download option, it works fine:
$ bin/importmap pin chart.js
Pinning "chart.js" to https://ga.jspm.io/npm:[email protected]/dist/chart.mjs
It will load the following URLs at runtime:
However, if I run:
$ bin/importmap pin --download chart.js
Pinning "chart.js" to vendor/javascript/chart.js.js via download from https://ga.jspm.io/npm:[email protected]/dist/chart.mjs
It does not work because dependent files are not downloaded. I get the following exception in rails:
Asset `chart.js/dist/Chart.js` was not declared to be precompiled in production.
Declare links to your assets in `app/assets/config/manifest.js`.
//= link chart.js/dist/Chart.js
and restart your server
However, I'd still like to serve the dependency locally
Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.4...v1.1.5
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.3...v1.1.4
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.2...v1.1.3
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.1...v1.1.2
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.0...v1.1.1
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v1.0.3...v1.1.0
Source code(tar.gz)asset_path
clashing with route definition in a rails app by @ollie-nye in https://github.com/rails/importmap-rails/pull/105Full Changelog: https://github.com/rails/importmap-rails/compare/v1.0.2...v1.0.3
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v1.0.0...v1.0.2
Source code(tar.gz)Nothing. But we're promote 0.9.5 to 1.0.0 to go along with the final release of Rails 7.0. Because as a new sanctioned default option of Rails 7, we should stick to the API, and this communicates that 🚀🥳
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.4...v0.9.5
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.3...v0.9.4
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.2...v0.9.3
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.1...v0.9.2
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.0...v0.9.1
Source code(tar.gz)Full Changelog: https://github.com/rails/importmap-rails/compare/v0.8.2...v0.9.0
Source code(tar.gz)--download
or -d
to bin/importmap
to download pinned packages from the CDN into vendor/javascript
. This removes a runtime dependency on the CDN. Note that you must add //= link_tree ../../../vendor/javascript .js
to your app/assets/config/manifest.js
file when using Sprockets (this is automatically done on new installations).preload: true
to have them be preloaded.Full Changelog: https://github.com/rails/importmap-rails/compare/v0.7.6...v0.8.0
Source code(tar.gz)jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.
Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co
Magik ?? ✨ A Teachable Machine based Google Chrome extension Teachable machine is an amazing tool developed by Google that makes basic ML accessible f
Godolog Blog template to use Google Docs as article editor. Usage Set up Create a new repository from Use this template button above with Include all
Gialog Blog template to use GitHub Issues as article editor. Usage Set up Create a new repository from Use this template button above with Include all
myreadme Customize your README.md file with ready-to-use sections in a simple way with the web editor Docker version Docker Hub docker run -p 7000:300
Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (
⚠️ DEPRECATION WARNING This repository is no longer actively maintained. An Embeddable JavaScript Markdown Editor EpicEditor is an embeddable JavaScri
Vim.js : JavaScript port of Vim A Tool/Toy for Non-Beginners by Lu Wang Try it online Variations NW.js Firefox extension Asyncify Streamline.js Recomm
TinyMCE TinyMCE is the world's most advanced open source core rich text editor. Trusted by millions of developers, and used by some of the world's lar
Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and
SimpleMDE - Markdown Editor A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allo
Hygienic Macros for JavaScript! Macros allow you to build the language of your dreams. Sweeten JavaScript by defining new syntax for your code. Curren
Overview Every frontend developer has written his own utils library, and we often write methods that are easily forgotten and highly used. ppo is a su
KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,
IMPORTANT: this current version of jsbin (v4.x.x) is no longer actively maintained and the new version of jsbin (v5) is currently in active developmen
Adivinha-número Opa oi oi! Trago aqui um projeto que fiz visando aplicar e testar meus conhecimentos de manipulação da árvore DOM via JavaScript. Você
SunEditor Pure javscript based WYSIWYG web editor, with no dependencies Demo : suneditor.com The Suneditor is a lightweight, flexible, customizable WY
babel-plugin-node-cjs-interop and node-cjs-interop: fix the default import interoperability issue in Node.js The problem to solve Consider the followi
First, you install npm and Java SE. Then, you install eolang package: $ npm install eolang Then, you write a simple EO program in hello.eo file in th