-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to include JS from gems? #57
Comments
In your case you can require |
yep, now always sit at npmjs.com. |
And in other cases? Like |
@foton You can send a PR to Cocoon to include a package.json, you can use this as example: ifad/data-confirm-modal#53 |
Hi, I maintain the cocoon gem. I am a bit confused, so maybe a silly question, but since webpacker coexists with the normal asset pipeline, why should a gem containing javascript "sprinkles" move those to npm where they make no sense? |
Yes, that's another way so you could require cocoon gem JS into your sprockets application.js but I guess it might not make sense for people who don't want to use asset pipeline at all since that's totally possible with Webpacker. @nathanvda Webpacker co-exists with asset pipeline but can also be used alone, since Rails also supports yarn for installing npm packages it would make sense to publish the JS counterpart to npm for future, since that's where everything is moving. I understand it's a bit more work though :) i.e. publishing two packages. |
I made it work by
Of course, no npm package is then needed. |
Hi, how to import assets from a gem for example such as https://github.com/estum/growlyflash? This gem adds both assets and some Ruby code. What do I set in resolved_paths without unpacking the gem into the vendor directory? Thanks. |
Is there are an easier way to import javascript rather than unpacking a gem? |
Looks like the best would be convert gems to npm packages: #488 |
I agree with @dmitry, My problem is because I'm work in a old project with old front end gems, and the version from theses gems dont exist in npm because is so old like 2014. In the last opition I will up this gems in npm packages. |
For anyone looking for context, the idea is to move all assets over to Webpacker, rather than having to maintain say, jQuery in both the asset pipeline and the package manager. https://medium.com/@coorasse/goodbye-sprockets-welcome-webpacker-3-0-ff877fb8fa79 |
I solved it by enabling erb like this comment describes: nathanvda/cocoon#452 (comment) Once you have access to the JS via ERB you can make a shim, this is what I did for the best_in_place gem:
|
Seems be a good solution @qwertme |
I think we can add an helper to wrap that logic making easier to load assets from gems. |
@guilleiguaran Is there anything available yet for this use case? |
I was also struggling with this and I got a solution that worked for me that I wanted to share. If you follow the instructions in link that @qwertme shared, you can write a ruby class helper in your lib folder and include it with This is how I'm currently using this:
# lib/webpack_helper.rb
class WebpackHelper
class << self
def my_gem_js(path)
File.join(Gem.loaded_specs['my_gem'].full_gem_path, 'app/assets/javascripts/my_gem/', path)
end
def my_gem_css(path)
File.join(Gem.loaded_specs['my_gem'].full_gem_path, 'app/assets/stylesheets/my_gem/', path)
end
end
end // app/javascript/packs/application.js.erb
/* rails-erb-loader-dependencies ../lib/webpack_helper */
import "<%= WebpackHelper.my_gem_js('path-to-my-file.js') %>";
import "<%= WebpackHelper.my_gem_js('path-to-another-file.coffee') %>"; May not be much, but it helps me DRY things up and I can add more class methods for other gems I may need. Hope this helps! |
This setup worked for me. I made a few tweaks to get it doing what I needed: https://github.com/projectblacklight/blacklight/wiki/Using-Webpacker-to-compile-javascript-assets Feel free to hit me up if you're running into issues and want more details. |
I solved it using the idea of a separate pack file for gems.
The key one for me was the second import - without that I was getting autosize not found. In packs/application.js:
|
I could not make any of these work, but (for Rails 6) the asset pipeline still works, so I did this
and in my erb file
|
From what I understand, the pre-Rails 6 behavior (with JavaScript assets being handled by Sprockets) was such that the assets pipeline could access any JavaScript files in a Gem's Naively, it would seem that the Webpacker Gem could just solve this by making files under a Gem's |
I think others have shared this opinion here but just to extend this concept, Webpacker is designed to be a wrapper around Webpack, a tool widely used in the JavaScript community. The JavaScript community uses NPM to keep and distribute packages and has done so for several years now. In my opinion, people who've made Ruby gems which wrap JavaScript libraries should be encouraged to publish those libraries to NPM. Webpacker should embrace the future, and any behavior supporting Ruby wrappers should stay in Sprockets and not get ported over into Webpacker. |
Thank you for the explanation @mcmire. As I am new to all this, I am definitely still missing a lot of context and grateful for all the bits of information I get. I think any solution that forces a package to be maintained in two separate places (say as a Gem and as an NPM module) is something to be avoided. I think in the example case of libraries such as Bootstrap or Semantic UI, which combine CSS and JS, the problem is that Rails 6 uses two quite different solutions to serve JS and CSS assets. I hope this will be cleaned up at some point. |
@infogrind You can (and probably should, if you depend on easy to install & modern/up-to-date packages) use Webpacker for both JS and CSS assets. |
Thanks @cseelus , I wasn't aware this was possible but now I am 😀 |
Specifically I would like to require the
action_cable
javascript into my packs. Anyone try this yet?The text was updated successfully, but these errors were encountered: