Merge pull request #1 from matestack/rails_7_importmap_support

v3.1.0.rc1 release: Rails 7 fixes and importmap support

Author: jonasjabari

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v3.1.0.rc1 Release - 2022-04-08
+
+- supporting Rails 7 importmaps via rollup building an esm module while still supporting webpacker
+
 ## v3.0.0 Release - 2022-03-04
 
 - same as v3.0.0.rc3

Dockerfile.dev

@@ -6,6 +6,8 @@ RUN apk update --no-cache && \
     apk add build-base postgresql-dev git nodejs yarn tzdata bash sqlite-dev npm && \
     mkdir -p /app
 
+RUN npm install --global rollup
+
 WORKDIR /app
 
 COPY ./lib/ /app/lib/

Dockerfile.test

@@ -6,6 +6,8 @@ RUN apk update --no-cache && \
     apk add build-base postgresql-dev git nodejs yarn tzdata bash sqlite-dev npm && \
     mkdir -p /app
 
+npm install --global rollup
+
 WORKDIR /app
 
 COPY ./lib/ /app/lib/

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    matestack-ui-vuejs (3.0.0.rc2)
+    matestack-ui-vuejs (3.1.0.rc1)
       matestack-ui-core (~> 3.0.0.rc1)
       rails (>= 5.2)
 

dist/matestack-ui-vuejs.esm.js

@@ -1,5 +1,4 @@
-import Vue from 'vue'
-
+import axios from 'axios'
 import eventHub from './event_hub'
 const matestackEventHub = eventHub // for compatibility with 1.x
 
@@ -70,14 +69,18 @@ const registerComponents = function(appInstance){
 }
 
 const mount = function(appInstance, elementId='#matestack-ui'){
-  registerComponents(appInstance)
+  if (window.matestackAppMounted != true){
+    window.matestackAppMounted = true
+    registerComponents(appInstance)
 
-  appInstance.mount(elementId)
+    appInstance.mount(elementId)
+  }
 
   return appInstance
 }
 
 const MatestackUiVueJs = {
+  axios,
   eventHub,
   matestackEventHub, // for compatibility with 1.x
   componentMixin,

lib/matestack/ui/vue_js/index.js

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module VueJs
-      VERSION = '3.0.0'
+      VERSION = '3.1.0.rc1'
     end
   end
 end

lib/matestack/ui/vue_js/version.rb

@@ -0,0 +1 @@
+require "matestack/ui/vue_js"

lib/matestack/ui/vuejs.rb

@@ -1,7 +1,7 @@
 {
   "name": "matestack-ui-vuejs",
-  "version": "3.0.0",
-  "main": "./lib/matestack/ui/vue_js/index.js",
+  "version": "3.1.0-rc1",
+  "module": "./dist/matestack-ui-vuejs.esm.js",
   "files": [
     "lib/**/*.js",
     "README",
@@ -14,6 +14,16 @@
     "mitt": "^3.0.0",
     "vue": "^3.2.26"
   },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-json": "^4.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup": "^2.35.1"
+  },
+  "scripts": {
+    "build": "rollup --config rollup.config.js"
+  },
   "exports": {
     ".": "./lib/matestack/ui/vue_js/index.js"
   }

package.json

@@ -0,0 +1,29 @@
+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 terserOptions = {
+  mangle: true,
+  compress: true
+}
+
+export default [
+  {
+    input: "./lib/matestack/ui/vue_js/index.js",
+    external: ['vue'],
+    output: [
+      {
+        file: "./dist/matestack-ui-vuejs.esm.js",
+        format: "es",
+        globals: { vue: 'Vue', axios: 'axios' },
+      }
+    ],
+    plugins: [
+      resolve({ browser: true }),
+      json(),
+      commonjs(),
+      terser(terserOptions)
+    ]
+  }
+]

rollup.config.js

@@ -7,7 +7,7 @@ def response
       plain "play around! --> spec/dummy/app/matestack/demo/vue_js/pages/first_page.rb"
     end
 
-    # you can call components on pages:
+    # you can call components on pages!
     Demo::VueJs::Components::StaticComponent.call(foo: "bar")
 
     onclick emit: "foo" do