Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.

Overview

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.

Comments
  • Javascript errors after running rails importmap:install on fresh Rails app.

    Javascript errors after running rails importmap:install on fresh Rails app.

    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.

    opened by tubsandcans 20
  • Popper.js not working when --download is used

    Popper.js not working when --download is used

    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
    
    opened by AleksandarJeftic 19
  • /bin/importmap outdated

    /bin/importmap outdated

    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?)

    opened by xdmx 16
  • NoMethodError: private method `importmap=' called

    NoMethodError: private method `importmap=' called

    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>'
    
    • importmap-rails 0.7.6
    • stimulus-rails 0.6.0
    • turbo-rails 0.8.1
    • rails 6.1.4.1
    # 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'
    
    opened by javierav 15
  • importmap json does not include a package in package.json

    importmap json does not include a package in package.json

    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,

    opened by phanhaiquang 14
  • Bad Import Statement in Stimulus Controller Doesn't Raise an Error

    Bad Import Statement in Stimulus Controller Doesn't Raise an Error

    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" ...
    
    opened by chadrschroeder 11
  • Proposal to facilitate multiple import maps

    Proposal to facilitate multiple import maps

    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:

    • how should multiple config/importmap.rb files be named and where should they exist?
    • how to deal with 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.

    opened by zzeligg 11
  • Asset precompilation is broken when using uglifier

    Asset precompilation is broken when using uglifier

    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 :)

    opened by MrBananaLord 10
  • Upgraded es-module-shims to v1.5.5

    Upgraded es-module-shims to v1.5.5

    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:

    • https://github.com/guybedford/es-module-shims/pull/265
    • https://github.com/guybedford/es-module-shims/pull/290
    opened by iainbeeston 9
  • Idiomatic Sass processing in Rails 7

    Idiomatic Sass processing in Rails 7

    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 your Gemfile, 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?

    opened by dumbledad 9
  • asset file digest in importmap script tag doesn't refresh after change since version 0.6

    asset file digest in importmap script tag doesn't refresh after change since version 0.6

    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.

    opened by meceo 8
  • Recovering from unpinned libraries

    Recovering from unpinned libraries

    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

    opened by dvodvo 0
  • hotwired/stimulus disabling html target

    hotwired/stimulus disabling html target

    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]

    opened by dvodvo 0
  • Allow passing server side data to JS

    Allow passing server side data to JS

    Is there a best practice on how to pass server side data, like the Rails.env to the JS code with the new importmap? Perhaps pass it as argument to javascript_importmap_tags ?

    opened by glampr 0
  • importmap pin material-components-web --download did not download all dependencies

    importmap pin material-components-web --download did not download all dependencies

    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.

    opened by pedz 0
  • Single-quoted strings in importmap.rb

    Single-quoted strings in importmap.rb

    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.

    opened by nsilva-ta 0
  • Bug: rails new --force flag is ignored

    Bug: rails new --force flag is ignored

    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
    

    Actual:

    Prompt:

    Overwrite /Users/me/name/config/importmap.rb? (enter "h" for help) [Ynaqdhm] Y

    Expected:

    No prompt

    Reproduce

    rails new name -j importmap -f.

    opened by wscourge 0
Releases(v1.1.5)
  • v1.1.5(Jul 15, 2022)

    What's Changed

    • Fix nonce attributes that were accidentally broken in PR #139 by @rmacklin in https://github.com/rails/importmap-rails/pull/143

    Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.4...v1.1.5

    Source code(tar.gz)
    Source code(zip)
  • v1.1.4(Jul 15, 2022)

    What's Changed

    • Fix using javascript_importmap_tag in console by @skipkayhil in https://github.com/rails/importmap-rails/pull/139

    Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.3...v1.1.4

    Source code(tar.gz)
    Source code(zip)
  • v1.1.3(Jul 13, 2022)

  • v1.1.2(Jun 20, 2022)

  • v1.1.1(Jun 18, 2022)

    What's Changed

    • Upgraded es-module-shims to v1.5.6 by @dhh
    • Fix net http request on ruby 2.7 by @cover in https://github.com/rails/importmap-rails/pull/130

    Full Changelog: https://github.com/rails/importmap-rails/compare/v1.1.0...v1.1.1

    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(May 22, 2022)

    What's Changed

    • Add outdated and audit commands by @cover in https://github.com/rails/importmap-rails/pull/109
    • Upgraded es-module-shims to v1.5.5 by @iainbeeston in https://github.com/rails/importmap-rails/pull/128
    • Use bundle add instead by @glaucocustodio in https://github.com/rails/importmap-rails/pull/114
    • Use a Hash for caching things by @tenderlove in https://github.com/rails/importmap-rails/pull/126

    Full Changelog: https://github.com/rails/importmap-rails/compare/v1.0.3...v1.1.0

    Source code(tar.gz)
    Source code(zip)
  • v1.0.3(Feb 19, 2022)

    What's Changed

    • Test invalid importmap file by @AndyStabler in https://github.com/rails/importmap-rails/pull/101
    • Prevent asset_path clashing with route definition in a rails app by @ollie-nye in https://github.com/rails/importmap-rails/pull/105
    • Update to ES Module Shims 1.4.6 by @dhh

    Full Changelog: https://github.com/rails/importmap-rails/compare/v1.0.2...v1.0.3

    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Jan 16, 2022)

    What's Changed

    • Allow for custom cache keys for Importmap::Map#preloaded_module_paths and Importmap::Map#to_json by @dhh in https://github.com/rails/importmap-rails/pull/88
    • Update to ES Module Shims 1.4.1 by @dhh

    Full Changelog: https://github.com/rails/importmap-rails/compare/v1.0.0...v1.0.2

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Dec 14, 2021)

    What's Changed

    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)
    Source code(zip)
  • v0.9.5(Dec 14, 2021)

    What's Changed

    • Cut down on the necessary dependencies by @dhh in https://github.com/rails/importmap-rails/pull/84

    Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.4...v0.9.5

    Source code(tar.gz)
    Source code(zip)
  • v0.9.4(Dec 14, 2021)

  • v0.9.3(Dec 3, 2021)

    What's Changed

    • Update to ES Module Shims 1.3.5 (fixes source map loading in Safari #79)

    Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.2...v0.9.3

    Source code(tar.gz)
    Source code(zip)
  • v0.9.2(Dec 1, 2021)

  • v0.9.1(Nov 24, 2021)

    What's Changed

    • Fix the minified version of es-module-shims 1.3.2 (closing #74) by @dhh

    Full Changelog: https://github.com/rails/importmap-rails/compare/v0.9.0...v0.9.1

    Source code(tar.gz)
    Source code(zip)
  • v0.9.0(Nov 23, 2021)

    What's Changed

    • Make importmap paths configurable by @kirillplatonov in https://github.com/rails/importmap-rails/pull/62
    • Add default support for the Propshaft asset pipeline by @rmacklin in https://github.com/rails/importmap-rails/pull/61
    • Upgrade to es-module-shims 1.3.2 by @dhh in https://github.com/rails/importmap-rails/commit/2489baea7dd7cb3020cc4a7ec794fe6e2d5297c2
    • Add sourcemap to minified default of es-module-shims by @dhh in https://github.com/rails/importmap-rails/commit/4e21177235b2281dffb1ec2e671820eacdbb1dab

    Full Changelog: https://github.com/rails/importmap-rails/compare/v0.8.2...v0.9.0

    Source code(tar.gz)
    Source code(zip)
  • v0.8.0(Oct 12, 2021)

    • NEW: Added --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).
    • UPDATE: Upgraded to ES Module Shims 1.2.0
    • CHANGE: Pins are no longer preloaded by default. You most explicitly add preload: true to have them be preloaded.
    • CHANGE: Demand a minimum Ruby version of 2.7, in line with Rails 7.
    • CHANGE: Use a minimized version of ES Module Shims by default.

    Full Changelog: https://github.com/rails/importmap-rails/compare/v0.7.6...v0.8.0

    Source code(tar.gz)
    Source code(zip)
Owner
Ruby on Rails
Ruby on Rails
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Nov 20, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Quill 34.1k Nov 27, 2022
Use teachable machine to operate Google Meet

Magik ?? ✨ A Teachable Machine based Google Chrome extension Teachable machine is an amazing tool developed by Google that makes basic ML accessible f

Shashank Pathak 17 Sep 17, 2022
Blog template to use Google Docs as article editor.

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

Ryo Nakamura 13 Oct 4, 2022
Blog template to use GitHub Issues as article editor.

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

Ryo Nakamura 38 Nov 16, 2022
Customize your README.md file with ready-to-use sections in a simple way with the web editor

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

Nelson Hernández 7 Jul 25, 2022
The next generation Javascript WYSIWYG HTML Editor.

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 (

Froala 5k Nov 29, 2022
JavaScript port of Vim

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

Lu Wang 4.4k Nov 20, 2022
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

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

Tiny 12.2k Nov 28, 2022
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Nov 23, 2022
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

SimpleMDE - Markdown Editor A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allo

Sparksuite 9.2k Nov 19, 2022
Sweeten your JavaScript.

Hygienic Macros for JavaScript! Macros allow you to build the language of your dreams. Sweeten JavaScript by defining new syntax for your code. Curren

null 4.6k Nov 20, 2022
ppo is a super small and useful utils library for JavaScript 🐝🐜

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

anonymous namespace 105 Jul 21, 2022
A powerful WYSIWYG rich text web editor by pure javascript

KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,

Kothing 34 Oct 26, 2022
Collaborative JavaScript Debugging App

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

Dave, The Bin Bot 4.3k Nov 22, 2022
Projeto voltado para aplicação de conhecimentos referente a manipulação da árvore DOM via JavaScript.

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ê

Gabriel Rodrigues 0 May 7, 2022
Pure javascript based WYSIWYG html editor, with no dependencies.

SunEditor Pure javscript based WYSIWYG web editor, with no dependencies Demo : suneditor.com The Suneditor is a lightweight, flexible, customizable WY

Yi JiHong 1k Nov 21, 2022
Babel plugin and helper functions for interoperation between Node.js native ESM and Babel ESM

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

Masaki Hara 15 Nov 6, 2022
Command-line toolkit for parsing, compiling, transpiling, optimizing, linking, dataizing, and running EOLANG programs

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

objectionary 17 Nov 17, 2022