Changes related to RoR 5.1 optionable Webpacker

[foton]

HI, Rails 5.1 give ability to use webpacker gem to manage javascript libraries. But this management is completely out of Rails so it cannot see gem cocoon.

Can You, please, add package.json file and build an NPM package of cocoon?

Related Issues in other project https://github.com/ifad/data-confirm-modal/pull/53 and https://github.com/rails/webpacker/issues/57#issuecomment-327533578

[nathanvda]

We can still use regular gems with assets together with the webpacker option in rails 5.1? Let me check. I am not sure it makes no sense to package cocoon.js in npm? (imho cocoon is not a javascript library, it makes no sense without the rails/ruby interaction).

[foton]

Yes, assets pipeline can be run together with webpacker. I found outdated NPM package https://www.npmjs.com/package/cocoon-rails. But just by name, not sure if it does what is expected.

[KurtPreston]

Asset pipeline can be run together with webpacker, but many people (myself included) are trying to migrate entirely to webpack from sprockets.

It'd be great provide a way to use cocoon without relying on the asset pipeline.

[iainbeeston]

@nathanvda I've just tried to get cocoon working with webpacker but in the end I had to give up.

1. First I tried loading cocoon using a sprockets//= require cocoon from my webpacker pack file. That didn't work. I think that's because sprockets doesn't get run on webpacker files.
2. Then I tried import 'cocoon' from my pack file. I suspect if I could find the right path to add to resolved_paths in config/webpacker.yml this might work (or maybe not... see below)
3. Next I copied cocoon.js directly into my project, and loaded it using import 'cocoon' from my pack file. That worked, but unfortunately cocoon.js cannot access the jQuery object which it needs, because it doesn't explicitly import it (nothing can be used without being required with webpacker).
4. I tried a few ways to make jQuery a global, in order to access it from cocoon.js but had no luck (it still couldn't find the jQuery object).

I could go through and rewrite cocoon.js to use import statements, but it feels like that would outweigh the advantages of using cocoon rather than rolling my own. I also suspect I could add a sprockets application.js file, and //=require cocoon from there, and load both that and my webpacker application.js but that feels rather messy, not least because I could end up having to load jQuery twice (once in sprockets and once in webpacker)

Hopefully this is helpful to someone!

[mikavilpas]

Thanks @iainbeeston , I managed to import cocoon by just copying it to my project at work, and having a global jquery object present. Seems to work well.

I have this hack to have a global jquery object, which seems to be a requirement of many libraries by the way:

window.$ = window.jQuery = require("jquery")

There are other ways to do this too, but I found this the simplest to understand.

[vill]

Rails 5.2.0
Webpacker 3.4.3

rails webpacker:install:erb

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const erb             = require('./loaders/erb')
const webpack         = require('webpack')

environment.loaders.append('erb', erb)

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = environment

# config/webpacker.yml
default: &default
  # Search jQuery in node_modules of the application and not in the cocoon directory
  resolved_paths: ['node_modules/jquery/dist']

// app/javascript/packs/application.js.erb
import "<%= File.join(Gem.loaded_specs['cocoon'].full_gem_path, 'app', 'assets', 'javascripts', 'cocoon') %>"

[diman0o1999]

@vill Looks like right solution, but I still have unresolved jquery.

I had everything by your instruction

[xrnm]

This was clean and worked well for us: https://github.com/joerodrig/cocoon-js (https://www.npmjs.com/package/cocoon-js) It would probably be good to publish an officially supported version and add doc to that.

[nathanvda]

Yes indeed probably a good idea. There are now already two packages on npm for cocoon cocoon-rails and cocoon-js. I will have to look into how I can deploy from one repository to both npm and rubygems.

[xrnm]

If I get a moment this weekend I’ll try to investigate

[thedanbob]

This is how the rails-ujs package handles it:

// package.json
{
  "main": "lib/assets/compiled/rails-ujs.js",
  "files": [
    "lib/assets/compiled/*.js"
  ]
}

Looks like files specifies which files get published to npm, and main is what gets imported.

FWIW, here's how I solved loading javascript from gems that aren't available on npm (applicable to more than just cocoon):

// config/webpack/environment.js
environment.plugins.prepend('GemAssetsPlugin', require('./plugins/gem-assets'))

// config/webpack/plugins/gem-assets.js
const { exec } = require('child_process')

module.exports = {
  apply(compiler) {
    compiler.hooks.beforeRun.tap('GemAssetsPlugin', (compilation) => {
      exec('mkdir -p vendor/frontend/js')
      exec('cp $(env -u DEBUG bundle show cocoon)/app/assets/javascripts/cocoon.js vendor/js')
      return true
    })
  }
}

# config/webpacker.yml
resolved_paths: ['vendor/js']

[McRipper]

This is how the rails-ujs package handles it:

// package.json
{
  "main": "lib/assets/compiled/rails-ujs.js",
  "files": [
    "lib/assets/compiled/*.js"
  ]
}

Looks like files specifies which files get published to npm, and main is what gets imported.

FWIW, here's how I solved loading javascript from gems that aren't available on npm (applicable to more than just cocoon):

// config/webpack/environment.js
environment.plugins.prepend('GemAssetsPlugin', require('./plugins/gem-assets'))

// config/webpack/plugins/gem-assets.js
const { exec } = require('child_process')

module.exports = {
  apply(compiler) {
    compiler.hooks.beforeRun.tap('GemAssetsPlugin', (compilation) => {
      exec('mkdir -p vendor/frontend/js')
      exec('cp $(env -u DEBUG bundle show cocoon)/app/assets/javascripts/cocoon.js vendor/js')
      return true
    })
  }
}

# config/webpacker.yml
resolved_paths: ['vendor/js']

It works, but I want to point out:

exec('mkdir -p vendor/frontend/js')

must be:

exec('mkdir -p vendor/js')

Then you can:

// /javascripts/packs/application.js
import 'cocoon-js'

[datty258]

Yes indeed probably a good idea. There are now already two packages on npm for cocoon cocoon-rails and cocoon-js. I will have to look into how I can deploy from one repository to both npm and rubygems.

in /javascript/packs/application.js import 'cocoon-js'

[Petercopter]

As the latest person to stumble through this, let me post what appears to be working for me, based on what everyone else is doing. I've got jQuery mixed in here, since obviously that's used by Cocoon.

Should I gitignore that vendor folder that gets created? I feel like that shouldn't be committed...

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('GemAssetsPlugin', require('./plugins/gem-assets'))
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

// config/webpack/environment.js

environment.plugins.prepend('GemAssetsPlugin', require('./plugins/gem-assets'))

// config/webpack/plugins/gem-assets.js

const { exec } = require('child_process')

module.exports = {
  apply(compiler) {
    compiler.hooks.beforeRun.tap('GemAssetsPlugin', compilation => {
      exec('mkdir -p vendor/js')
      exec(
        'cp $(env -u DEBUG bundle info cocoon --path)/app/assets/javascripts/cocoon.js vendor/js'
      )
      return true
    })
  }
}

# config/webpacker.yml

additional_paths: ['vendor/js']

[thedanbob]

In principle it should be, but I didn't bother to .gitignore it myself. The cocoon JS hasn't changed in over a year so it doesn't really matter one way the other.