Introduce Rollup for production builds

.github/workflows/prettier-standard.yml

@@ -14,10 +14,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@master
-    - name: Setup Node
-      uses: actions/setup-node@v1
+    - name: Setup node
+      uses: actions/setup-node@v2
       with:
-        version: '12.x'
+        node-version: '12'
+        cache: 'yarn'
     - run: yarn
       working-directory: javascript/
     - run: yarn lint

.github/workflows/tests.yml

@@ -14,23 +14,31 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        ruby-version: [2.6.6, 2.7.2, '3.0']
+        ruby-version: [2.6, 2.7, 3.0]
     steps:
     - uses: actions/checkout@master
     - name: Set up Ruby ${{ matrix.ruby-version }}
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: ${{ matrix.ruby-version }}
-    - uses: actions/cache@v1
-      with:
-        path: vendor/bundle
-        key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-gems-
-    - name: Bundle install
-      run: |
-        gem install bundler
-        bundle config path vendor/bundle
-        bundle install --jobs 4 --retry 3
+        bundler-cache: true
     - name: Run ruby tests
       run: bundle exec rake test
+
+  javascript_build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [ '12', '14', '16' ]
+    name: Node v${{ matrix.node }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+      - name: Build javascript package
+        run: |
+          yarn install
+          yarn build

.gitignore

@@ -12,3 +12,4 @@ node_modules/
 .byebug_history
 *.log
 /.dir-locals.el
+/dist

javascript/cable_ready.js

@@ -2,8 +2,6 @@ import { xpathToElement, dispatch } from './utils'
 import activeElement from './active_element'
 import OperationStore from './operation_store'
 import actionCable from './action_cable'
-import StreamFromElement from './elements/stream_from_element'
-import UpdatesForElement from './elements/updates_for_element'
 
 const perform = (
   operations,
@@ -72,17 +70,6 @@ const performAsync = (
   })
 }
 
-const initialize = (initializeOptions = {}) => {
-  const { consumer } = initializeOptions
-  actionCable.setConsumer(consumer)
-
-  if (!customElements.get('stream-from'))
-    customElements.define('stream-from', StreamFromElement)
-
-  if (!customElements.get('updates-for'))
-    customElements.define('updates-for', UpdatesForElement)
-}
-
-export { perform, performAsync, initialize }
+export { perform, performAsync }
 
 export const consumer = actionCable.getConsumer()

javascript/elements/stream_from_element.js

@@ -1,10 +1,13 @@
-import CableReady from '..'
+import {
+  consumer as CableReadyConsumer,
+  perform as CableReadyPerform
+} from '../cable_ready'
 import SubscribingElement from './subscribing_element'
 
 export default class StreamFromElement extends SubscribingElement {
   async connectedCallback () {
     if (this.preview) return
-    const consumer = await CableReady.consumer
+    const consumer = await CableReadyConsumer
     if (consumer) {
       this.createSubscription(
         consumer,
@@ -19,6 +22,6 @@ export default class StreamFromElement extends SubscribingElement {
   }
 
   performOperations (data) {
-    if (data.cableReady) CableReady.perform(data.operations)
+    if (data.cableReady) CableReadyPerform(data.operations)
   }
 }

javascript/elements/subscribing_element.js

@@ -1,5 +1,3 @@
-import CableReady from '..'
-
 export default class SubscribingElement extends HTMLElement {
   disconnectedCallback () {
     if (this.channel) this.channel.unsubscribe()

javascript/elements/updates_for_element.js

@@ -1,6 +1,6 @@
 import morphdom from 'morphdom'
 
-import CableReady from '..'
+import { consumer as CableReadyConsumer } from '../cable_ready'
 import SubscribingElement from './subscribing_element'
 import { shouldMorph } from '../morph_callbacks'
 import activeElement from '../active_element'
@@ -30,7 +30,7 @@ export default class UpdatesForElement extends SubscribingElement {
     if (this.preview) return
     this.update = debounce(this.update.bind(this), this.debounce)
 
-    const consumer = await CableReady.consumer
+    const consumer = await CableReadyConsumer
     if (consumer) {
       this.createSubscription(consumer, 'CableReady::Stream', this.update)
     } else {

javascript/index.js

@@ -2,10 +2,22 @@ import * as MorphCallbacks from './morph_callbacks'
 import { shouldMorphCallbacks, didMorphCallbacks } from './morph_callbacks'
 import * as Utils from './utils'
 import OperationStore, { addOperation, addOperations } from './operation_store'
-import { perform, performAsync, initialize, consumer } from './cable_ready'
+import { perform, performAsync, consumer } from './cable_ready'
 import StreamFromElement from './elements/stream_from_element'
 import UpdatesForElement from './elements/updates_for_element'
 import SubscribingElement from './elements/subscribing_element'
+import actionCable from './action_cable'
+
+const initialize = (initializeOptions = {}) => {
+  const { consumer } = initializeOptions
+  actionCable.setConsumer(consumer)
+
+  if (!customElements.get('stream-from'))
+    customElements.define('stream-from', StreamFromElement)
+
+  if (!customElements.get('updates-for'))
+    customElements.define('updates-for', UpdatesForElement)
+}
 
 export {
   Utils,

package.json

@@ -23,18 +23,27 @@
   },
   "license": "MIT",
   "author": "Nathan Hopkins <[email protected]>",
-  "main": "./javascript/index.js",
-  "module": "./javascript/index.js",
+  "main": "./dist/cable_ready.umd.js",
+  "module": "./dist/cable_ready.module.js",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
   "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:format": "yarn run prettier-standard ./javascript/**/*.js",
+    "build": "yarn rollup -c",
+    "watch": "yarn rollup -wc"
   },
   "dependencies": {
     "morphdom": "^2.6.1"
   },
   "devDependencies": {
-    "prettier-standard": "^16.4.1"
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "prettier-standard": "^16.4.1",
+    "rollup": "^2.60.0"
   }
 }

rollup.config.js

@@ -0,0 +1,33 @@
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from '@rollup/plugin-commonjs';
+
+const basePlugins = [
+  resolve(),
+  commonjs()
+]
+
+export default [
+  {
+    external: ["morphdom"],
+    input: "javascript/index.js",
+    output: [
+      {
+        name: "CableReady",
+        file: "dist/cable_ready.umd.js",
+        format: "umd",
+        sourcemap: true,
+        exports: "named",
+        globals: {morphdom: "morphdom"}, // UMD build wants a global...annoying.
+      },
+      {
+        file: "dist/cable_ready.module.js",
+        format: "es",
+        sourcemap: true,
+      }
+    ],
+    plugins: basePlugins,
+    watch: {
+      include: "javascript/**"
+    }
+  },
+]