Merge pull request #139 from stimulusreflex/ship-prebuilt-js-with-gem

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

Gemfile.lock

@@ -1,8 +1,8 @@
 PATH
   remote: .
   specs:
-    futurism (1.2.0.pre9)
-      cable_ready (= 5.0.0.pre8)
+    futurism (1.2.0.pre10)
+      cable_ready (= 5.0.0.pre9)
       rack (~> 2.0)
       rails (>= 5.2)
 
@@ -80,20 +80,24 @@ GEM
       thor (>= 0.14.0)
     ast (2.4.1)
     builder (3.2.4)
-    cable_ready (5.0.0.pre8)
-      rails (>= 5.2)
+    cable_ready (5.0.0.pre9)
+      actioncable (>= 5.2)
+      actionpack (>= 5.2)
+      actionview (>= 5.2)
+      activerecord (>= 5.2)
+      activesupport (>= 5.2)
+      railties (>= 5.2)
       thread-local (>= 1.1.0)
     coderay (1.1.3)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
     crass (1.0.6)
     digest (3.1.0)
     erubi (1.10.0)
     globalid (1.0.0)
       activesupport (>= 5.0)
     i18n (1.10.0)
       concurrent-ruby (~> 1.0)
-    io-wait (0.2.1)
-    loofah (2.14.0)
+    loofah (2.16.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -111,8 +115,7 @@ GEM
       digest
       net-protocol
       timeout
-    net-protocol (0.1.2)
-      io-wait
+    net-protocol (0.1.3)
       timeout
     net-smtp (0.3.1)
       digest

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
@@ -355,13 +374,17 @@ cd path/to/project
 yarn install --force
 ```
 
-### Release
-
-1. Update the version numbers in `javascript/package.json` and `lib/futurism/version.rb`
-2. `git commit -m "Bump version to x.x.x"`
-3. Run `bundle exec rake build`
-4. Run `bundle exec rake release`
-5. `cd javascript && npm publish --access public`
+### 📦 Releasing
+
+1. Make sure that you run `yarn` and `bundle` to pick up the latest.
+2. Bump version number at `lib/futurism/version.rb`. Pre-release versions use `.preN`
+3. Run `rake build` and `yarn build`
+4. Commit and push changes to github `git commit -m "Bump version to x.x.x"`
+5. Run `rake release`
+6. Run `yarn publish --no-git-tag-version`
+7. Yarn will prompt you for the new version. Pre-release versions use `-preN`
+8. Commit and push changes to GitHub
+9. Create a new release on GitHub ([here](https://github.com/stimulusreflex/futurism/releases)) and generate the changelog for the stable release for it
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

futurism.gemspec

@@ -14,7 +14,15 @@ Gem::Specification.new do |spec|
   spec.description = "Uses custom html elements with attached IntersectionObserver to automatically lazy load partials via websockets"
   spec.license = "MIT"
 
-  spec.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
+  spec.files = Dir[
+    "lib/**/*.rb",
+    "app/**/*.rb",
+    "app/assets/javascripts/*",
+    "bin/*",
+    "[A-Z]*"
+  ]
+
+  spec.test_files = Dir["test/**/*.rb"]
 
   spec.add_development_dependency "appraisal"
   spec.add_development_dependency "bundler", "~> 2.0"
@@ -26,5 +34,5 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency "rack", "~> 2.0"
   spec.add_dependency "rails", ">= 5.2"
-  spec.add_dependency "cable_ready", "= 5.0.0.pre8"
+  spec.add_dependency "cable_ready", "= 5.0.0.pre9"
 end

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

lib/futurism/version.rb

@@ -1,3 +1,3 @@
 module Futurism
-  VERSION = "1.2.0.pre9"
+  VERSION = "1.2.0.pre10"
 end

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@stimulus_reflex/futurism",
+  "version": "1.2.0-pre10",
+  "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-pre9"
+  },
+  "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/**'
+    }
+  }
+]