Move to Yarn?

[bo-oz]

As Rails 6 is moving towards Webpacker, it would be really nice if the javascript for cocoon would be available through Yarn. Any plans for this? Thanks.

[nathanvda]

Yes definitely. There are a few pull requests already, I just need to investigate that myself a little more. I always make these things harder then they need to be. I started refactoring the js a while ago, to write it more "contemporary", but then it is too big a job to just deploy quickly. Anyway it is my intention to work on cocoon this weekend:

• update the demo-project cocoon-simple-form-demo to rails 6 and webpacker
• and then make sure cocoon works and we can import the js

For now you could already check out #454 ?

[bo-oz]

Cool, thanks!

[jrochkind]

Ah found this. I don't think you need to refactor the JS at all, I think you should be able to publish as an npm package with the JS just as it is (possibly very few changes), and it will work.

The only potentially tricky thing is things like the jQuery dependency. But to avoid being a blocker, you can even not change that, not actually import the jQuery the 'right' way, and just document that jQuery needs to be available at window.jQuery. It should work! It's not "right", but I'm not totally sure what the "right" way to do it is, that will work for the actual ways people are going to be setting things up in their Rails projects (we still may not know for sure), and I don't think figuring it out needs to be a blocker for having an npm package!

[jrochkind]

Rails 6.0 is out, and with a newly generated Rails 6.0 app, there is no way by default to use JS from a gem via the sprockets asset pipeline. (There should be some way to hack it back in, I haven't tried yet).

For cocoon to keep being used in a Rails 6 world, it really needs it's JS released as an npm package.

[alejandrodevs]

I make it works doing the following:

Create a file in app/javascript/src/cocoon.js with content in: https://github.com/nathanvda/cocoon/blob/master/app/assets/javascripts/cocoon.js

After that, add to your app/javascript/packs/application.js:

require("src/cocoon")

I hope this helps you while we find a better solution.

[apocolyptic]

@alejandrodevs when you added the js to the src did you still include the gem in the gem file?

[alejandrodevs]

@apocolyptic Yes, the gem has to be included in the Gemfile to have the whole functionality and the view helpers.

[pedrofurtado]

https://github.com/nathanvda/cocoon/pull/454

[IsolatePy]

Just add this Yarn add cocoon-js then add this to your application.js import 'cocoon-js';

[irfanahm3d]

Being new to Ruby and Rails I had been raking my brain as to why the add/remove links hadn't been working. Thank you @IsolatePy for your suggestion which made it work!!
I thought I'd also try out the recommendation in #454 of using yarn add github:nathanvda/cocoon#c24ba53 and import 'cocoon'; in the application.js. That however broke the add/remove links again, making them non-functional (i.e. new fields are no longer added). I'm not sure why that would be the case though, and since I'm new to all this, I don't quite know how to debug the javascript loading/calls. Any pointers would be welcome :)

[IsolatePy]

@irfanahm3d If you want to debug javascript you should head to the browser console, Otherwise knowing about javascript for rails is not required but, you should know a little about JS . For this, you can head to Udemy. You can find a bunch of good course about javascript that help you to build your website

[nathanielread]

Until webpacker is supported, I think one of these two workarounds should be more obvious in the Cocoon documentation: https://github.com/nathanvda/cocoon/issues/555#issuecomment-530192116 https://github.com/nathanvda/cocoon/issues/555#issuecomment-568077305

I used the first one. Maybe I missed it, but I spent a decent amount of time wondering why Cocoon in my Rails 6 app wasn't completely working. Or link to this in the documentation: https://stackoverflow.com/questions/57974863/how-to-use-cocoon-gem-in-rails-6

[pedrofurtado]

Suggestion, until a oficial release solution: https://github.com/kollegorna/cocoon-vanilla-js

[yshmarov]

@nathanvda 11 months have passed since this thread was opened. It would be really great to finally have an official release for Rails 6

[estafaa]

Hi!

This worked for me (rails 6.0.3.1, 'webpacker', '~> 5.1', '>= 5.1.1', but this maybe not important ):

1. add gem "cocoon"
2. run yarn add github:nathanvda/cocoon#c24ba53
3. in ~/app/javascript/packs/application.js add require("cocoon")

[jrochkind]

oh wow I had no idea you could add packages in yarn from github! not as good as an actual release, but especially with cocoon being very very stable, that is a great workaround, thanks!

The ability to add packages from github in yarn is actually HUGE, if this works it will make a lot of things so much easier, I'm going to look into it!

[elissonmichael]

@estafaa thanks for sharing this. It Worked! :)