adding rollup in order to build esm module for rails 7 importmap support

Author: jonasjabari

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/

dist/matestack-ui-vuejs.esm.js

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 import eventHub from './event_hub'
 const matestackEventHub = eventHub // for compatibility with 1.x
 

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

@@ -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,14 @@
     "mitt": "^3.0.0",
     "vue": "^3.2.26"
   },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "rollup": "^2.35.1",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "scripts": {
+    "build": "rollup --config rollup.config.js"
+  },
   "exports": {
     ".": "./lib/matestack/ui/vue_js/index.js"
   }

package.json

@@ -0,0 +1,25 @@
+import resolve from "@rollup/plugin-node-resolve"
+import { terser } from "rollup-plugin-terser"
+
+const terserOptions = {
+  mangle: true,
+  compress: true
+}
+
+export default [
+  {
+    input: "./lib/matestack/ui/vue_js/index.js",
+    external: ['vue', 'axios'],
+    output: [
+      {
+        file: "./dist/matestack-ui-vuejs.esm.js",
+        format: "es",
+        globals: { vue: 'Vue', axios: 'axios' },
+      }
+    ],
+    plugins: [
+      resolve(),
+      terser(terserOptions)
+    ]
+  }
+]