Expose engine js as npm package

[fiedl]

To manage dependencies and to import the js from the main app without the asset pipeline, provide a package.json for the engine's js code.

https://docs.npmjs.com/creating-node-js-modules

[fiedl]

Where does the package.json live in actioncable?

Just in the directory root at the same level as the *gemspec.

[fiedl]

[2020-01-26 14:22:55] fiedl@fiedl-mbp ~/rails/webpacker-engine-test/my_engine master ⚡
▶ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my_engine)
version: (1.0.0) 0.1.0
description: Test engine
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC) MIT
About to write to /Users/fiedl/rails/webpacker-engine-test/my_engine/package.json:

{
  "name": "my_engine",
  "version": "0.1.0",
  "description": "Test engine",
  "main": "index.js",
  "directories": {
    "lib": "lib",
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

[fiedl]

The big question is how to add this npm package to the main app's dependencies.

At first sight, I was thinking to use erb to access the engine's path as suggested by https://medium.com/michelada-io/from-the-asset-pipeline-to-webpack-ce5a4bc323a9:

$ rails webpacker:install:erb

Then inside the main app's pack:

import MyEngine from  '<%= MyEngine::Engine.root %>';

This would allow to import the js module itself, but would ignore the dependencies specified in the engine's package.json. See: rails/webpacker#21 (comment)

Looks like, with actioncable they publish a separate npm package for each release. rails/webpacker#21 (comment):

dhh: I don't think we have a good path for doing this given that such inclusion wouldn't be able to resolve any dependencies. I don't see a way out of having NPM packages for the plugins. That's how we've gone with Action Cable and Active Storage for now.

➝ rails/webpacker#348 (comment)

[fiedl]

One way would be just to publish the npm package to a npm package repository.

But could we publish it through the gem itself?

I'm trying it locally:

[2020-01-26 15:14:51] fiedl@fiedl-mbp ~/rails/webpacker-engine-test/main_app_with_webpacker master ⚡
▶ yarn add ../my_engine

This adds the dependency the the app's package.json:

{
  "name": "main_app_with_webpacker",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.2.2",
    "my_engine": "../my_engine",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.8.3",
    "vue-template-compiler": "^2.6.11"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.1"
  }
}

[fiedl]

If we don't find a way here, like rails/webpacker#348 (comment), we just have to go with publishing a npm package to a separate repo.

[fiedl]

Possible approaches:

• Publish npm package to separate npm repository in a rake task
• Specify the git repository as dependency location in package.json
• Something dynamic from How to use this gem from within rails engines? rails/webpacker#348 (comment)
• Use preinstall and postinstall in package.json to inject something dynamic (https://stackoverflow.com/a/46724823/2066546)
• Use npm link in an automated way to override the npm package location to the gem's npm location