Merge pull request #15 from julianrubisch/ship-prebuilt-js-with-gem

Ship prebuilt js with gem

.gitignore

@@ -15,3 +15,9 @@
 .dir-locals.el
 gemfiles/*.lock
 /vendor/
+
+dist/**
+!dist/.keep
+
+app/assets/javascripts/**
+!app/assets/javascripts/.keep 

README.md

@@ -71,10 +71,27 @@ And then execute:
 $ bundle
 ```
 
-After `bundle`, install the Javascript library:
+There are a few ways to install the Cubism JavaScript client, depending on your application setup.
 
-```bash
-$ bin/yarn add @minthesize/cubism
+#### ESBuild / Webpacker
+
+```sh
+yarn add @minthesize/cubism
+```
+
+#### Import maps:
+
+```ruby
+# config/importmap.rb
+# ...
+pin '@minthesize/cubism', to: 'cubism.min.js', preload: true
+```
+
+#### Rails Asset pipeline (Sprockets):
+
+```html+erb
+<!-- app/views/layouts/application.html.erb -->
+<%= javascript_include_tag "cubism.umd.min.js", "data-turbo-track": "reload" %>
 ```
 
 ### Kredis
@@ -146,7 +163,7 @@ yarn link # set the local machine's cubism npm package's lookup to this local pa
 
 # Setup a sample project and edit Gemfile to point to local gem
 # (e.g. `gem "cubism", path: "../cubism"`)
-# yarn link @stimulus_reflex/cubism
+# yarn link @minthesize/cubism
 
 
 # Do your work, Submit PR, Profit!
@@ -163,14 +180,17 @@ cd path/to/project
 yarn install --force
 ```
 
-### Release
-
-1. Update the version numbers in `javascript/package.json` and `lib/cubism/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. Run `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/cubism/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/julianrubisch/cubism/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).
 

cubism.gemspec

@@ -14,11 +14,19 @@ Gem::Specification.new do |spec|
   spec.metadata["source_code_uri"] = "https://github.com/julianrubisch/cubism.git"
   # spec.metadata["changelog_uri"] = "TODO: Put your gem's CHANGELOG.md URL here."
 
-  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_dependency "rails", ">= 6.0"
   spec.add_dependency "kredis", ">= 0.4"
-  spec.add_dependency "cable_ready", "= 5.0.0.pre8"
+  spec.add_dependency "cable_ready", "= 5.0.0.pre9"
 
   spec.add_development_dependency "standard"
   spec.add_development_dependency "nokogiri"

lib/cubism/engine.rb

@@ -4,5 +4,25 @@ class Engine < ::Rails::Engine
       Cubism.block_store = Cubism::CubicleStore.new("cubism-blocks")
       Cubism.source_store = Cubism::CubicleStore.new("cubism-source")
     end
+
+    initializer "cubism.assets" do |app|
+      if app.config.respond_to?(:assets)
+        app.config.assets.precompile += %w[
+          cubism.js
+          cubism.min.js
+          cubism.min.js.map
+          cubism.umd.js
+          cubism.umd.min.js
+          cubism.umd.min.js.map
+        ]
+      end
+    end
+
+    initializer "cubism.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << Engine.root.join("lib/cubism/importmap.rb")
+        app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascripts")
+      end
+    end
   end
 end

lib/cubism/importmap.rb

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

lib/cubism/version.rb

@@ -1,3 +1,3 @@
 module Cubism
-  VERSION = "0.1.0.pre12"
+  VERSION = "0.1.0.pre13"
 end

package.json

@@ -1,15 +1,20 @@
 {
   "name": "@minthesize/cubism",
-  "version": "0.1.0-pre12",
+  "version": "0.1.0-pre13",
   "description": "Lightweight Resource-Based Presence Solution with CableReady.",
-  "main": "./javascript/index.js",
-  "module": "./javascript/index.js",
-  "files": ["javascript/**/*.js"],
+  "main": "./dist/cubism.umd.min.js",
+  "module": "./dist/cubism.min.js",
+  "files": [
+    "dist/*",
+    "javascript/*"
+  ],
   "scripts": {
     "lint": "yarn run prettier-standard:check",
     "format": "yarn run prettier-standard:format",
-    "prettier-standard:check": "yarn run prettier-standard --check ./javascript/**/*.js",
-    "prettier-standard:format": "yarn run prettier-standard ./javascript/**/*.js"
+    "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",
@@ -25,9 +30,14 @@
   },
   "homepage": "https://github.com/julianrubisch/cubism#readme",
   "devDependencies": {
-    "prettier-standard": "^16.4.1"
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "prettier-standard": "^16.4.1",
+    "rollup": "^2.70.1",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "dependencies": {
-    "cable_ready": "5.0.0-pre8"
+    "cable_ready": "^5.0.0-pre9"
   }
 }

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: 'Cubism',
+  format: 'umd',
+  exports: 'named',
+  globals: {
+    cable_ready: 'CableReady'
+  }
+}
+
+const distFolders = ['dist/', 'app/assets/javascripts/']
+
+const output = distFolders
+  .map(distFolder => [
+    {
+      ...esConfig,
+      file: `${distFolder}/cubism.js`,
+      plugins: [pretty()]
+    },
+    {
+      ...esConfig,
+      file: `${distFolder}/cubism.min.js`,
+      sourcemap: true,
+      plugins: [minify()]
+    },
+    {
+      ...umdConfig,
+      file: `${distFolder}/cubism.umd.js`,
+      plugins: [pretty()]
+    },
+    {
+      ...umdConfig,
+      file: `${distFolder}/cubism.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/**'
+    }
+  }
+]