Ship prebuilt js with gem

.gitignore

@@ -7,3 +7,9 @@ test/dummy/tmp/
 *~
 node_modules
 gemfiles/*.lock
+
+dist/**
+!dist/.keep
+
+app/assets/javascripts/**
+!app/assets/javascripts/.keep

README.md

@@ -251,8 +251,27 @@ $ bin/rails futurism:install
 ### Manual Installation
 After `bundle`, install the Javascript library:
 
-```bash
-$ bin/yarn add @stimulus_reflex/futurism
+There are a few ways to install the Futurism JavaScript client, depending on your application setup.
+
+#### ESBuild / Webpacker
+
+```sh
+yarn add @stimulus_reflex/futurism
+```
+
+#### Import maps:
+
+```ruby
+# config/importmap.rb
+# ...
+pin '@stimulus_reflex/futurism', to: 'futurism.min.js', preload: true
+```
+
+#### Rails Asset pipeline (Sprockets):
+
+```html+erb
+<!-- app/views/layouts/application.html.erb -->
+<%= javascript_include_tag "futurism.umd.min.js", "data-turbo-track": "reload" %>
 ```
 
 In your `app/javascript/channels/index.js`, add the following
@@ -357,11 +376,11 @@ yarn install --force
 
 ### Release
 
-1. Update the version numbers in `javascript/package.json` and `lib/futurism/version.rb`
+1. Update the version numbers in `package.json` and `lib/futurism/version.rb`
 2. `git commit -m "Bump version to x.x.x"`
-3. Run `bundle exec rake build`
+3. Run `bundle exec rake build` and `yarn build`
 4. Run `bundle exec rake release`
-5. `cd javascript && npm publish --access public`
+5. `npm publish --access public`
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

lib/futurism/engine.rb

@@ -1,4 +1,23 @@
 module Futurism
   class Engine < ::Rails::Engine
+    initializer "futurism.assets" do |app|
+      if app.config.respond_to?(:assets)
+        app.config.assets.precompile += %w[
+          futurism.js
+          futurism.min.js
+          futurism.min.js.map
+          futurism.umd.js
+          futurism.umd.min.js
+          futurism.umd.min.js.map
+        ]
+      end
+    end
+
+    initializer "futurism.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << Engine.root.join("lib/futurism/importmap.rb")
+        app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascripts")
+      end
+    end
   end
 end

lib/futurism/importmap.rb

@@ -0,0 +1,2 @@
+pin "cable_ready", to: "cable_ready.min.js", preload: true
+pin "futurism", to: "futurism.min.js", preload: true

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@stimulus_reflex/futurism",
+  "version": "1.2.0-pre9",
+  "description": "Lazy-load Rails partials via CableReady",
+  "main": "./dist/futurism.umd.min.js",
+  "module": "./dist/futurism.min.js",
+  "files": [
+    "dist/*",
+    "javascript/*"
+  ],
+  "scripts": {
+    "test": "yarn run mocha",
+    "lint": "yarn run prettier-standard:check",
+    "format": "yarn run prettier-standard:format",
+    "prettier-standard:check": "yarn run prettier-standard --check ./javascript/**/*.js rollup.config.js",
+    "prettier-standard:format": "yarn run prettier-standard ./javascript/**/*.js rollup.config.js",
+    "build": "yarn rollup -c",
+    "watch": "yarn rollup -wc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stimulusreflex/futurism.git"
+  },
+  "keywords": [
+    "cable_ready",
+    "lazy",
+    "loading"
+  ],
+  "author": "Julian Rubisch <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stimulusreflex/futurism/issues"
+  },
+  "homepage": "https://github.com/stimulusreflex/futurism#readme",
+  "dependencies": {
+    "cable_ready": "5.0.0-pre8"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "mocha": "^8.0.1",
+    "prettier-standard": "^16.4.1",
+    "rollup": "^2.70.1",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

rollup.config.js

@@ -0,0 +1,77 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+
+const pretty = () => {
+  return terser({
+    mangle: false,
+    compress: false,
+    format: {
+      beautify: true,
+      indent_level: 2
+    }
+  })
+}
+
+const minify = () => {
+  return terser({
+    mangle: true,
+    compress: true
+  })
+}
+
+const esConfig = {
+  format: 'es',
+  inlineDynamicImports: true
+}
+
+const umdConfig = {
+  name: 'Futurism',
+  format: 'umd',
+  exports: 'named',
+  globals: {
+    cable_ready: 'CableReady'
+  }
+}
+
+const distFolders = ['dist/', 'app/assets/javascripts/']
+
+const output = distFolders
+  .map(distFolder => [
+    {
+      ...esConfig,
+      file: `${distFolder}/futurism.js`,
+      plugins: [pretty()]
+    },
+    {
+      ...esConfig,
+      file: `${distFolder}/futurism.min.js`,
+      sourcemap: true,
+      plugins: [minify()]
+    },
+    {
+      ...umdConfig,
+      file: `${distFolder}/futurism.umd.js`,
+      plugins: [pretty()]
+    },
+    {
+      ...umdConfig,
+      file: `${distFolder}/futurism.umd.min.js`,
+      sourcemap: true,
+      plugins: [minify()]
+    }
+  ])
+  .flat()
+
+export default [
+  {
+    external: ['cable_ready'],
+    input: 'javascript/index.js',
+    output,
+    plugins: [commonjs(), resolve(), json()],
+    watch: {
+      include: 'javascript/**'
+    }
+  }
+]