Add bundled example app for Vue Vanilla

* Add rollup config to bundle the Vue Vanilla example * Add to examples app Part of #1706
eclipsesource · Jan 25, 2023 · 1b22f55 · 1b22f55
1 parent ce4ec0f
commit 1b22f55
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 2 deletions.
diff --git a/packages/examples-app/index.html b/packages/examples-app/index.html
@@ -13,6 +13,7 @@ <h1>JSON Forms Examples</h1>
     <li><a href="react-vanilla">React Vanilla Renderers</a></li>
     <li><a href="react-material">React Material Renderers</a></li>
     <li><a href="angular-material">Angular Material Renderers</a></li>
+    <li><a href="vue-vanilla">Vue Vanilla Renderers</a></li>
   </ul>
 </body>
 </html>
diff --git a/packages/examples-app/prepare-examples-app.js b/packages/examples-app/prepare-examples-app.js
@@ -13,7 +13,8 @@ const packagesDir = join(__dirname, '..');
 const examples = {
   'react-vanilla': join(packagesDir, 'vanilla-renderers', 'example', 'dist'),
   'react-material': join(packagesDir, 'material-renderers', 'example', 'dist'),
-  'angular-material': join(packagesDir, 'angular-material', 'example', 'dist')
+  'angular-material': join(packagesDir, 'angular-material', 'example', 'dist'),
+  'vue-vanilla': join(packagesDir, 'vue', 'vue-vanilla', 'example', 'dist')
 }
 
 // Clean and recreate dist dir

diff --git a/packages/vue/vue-vanilla/example/index.bundled.html b/packages/vue/vue-vanilla/example/index.bundled.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>JSON Forms Vue Vanilla RendererSet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="bundle.css">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+<script src="bundle.js"></script>
+
+</html>
diff --git a/packages/vue/vue-vanilla/package.json b/packages/vue/vue-vanilla/package.json
@@ -44,7 +44,8 @@
     "build:do": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "build": "run-s --continue-on-error build:pre build:do build:after",
     "build:after": "symlink-dir ../../core ../vue/node_modules/@jsonforms/core",
-    "clean": "rimraf lib",
+    "build:examples-app": "rollup -c rollup.example.config.js",
+    "clean": "rimraf lib example/dist",
     "doc": "typedoc --name 'JSON Forms Vue Vanilla Renderers' --mode file --out docs src --ignoreCompilerErrors",
     "test": "vue-cli-service test:unit"
   },

diff --git a/packages/vue/vue-vanilla/rollup.example.config.js b/packages/vue/vue-vanilla/rollup.example.config.js
@@ -0,0 +1,52 @@
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import copy from 'rollup-plugin-copy';
+import css from 'rollup-plugin-import-css';
+import typescript from 'rollup-plugin-typescript2';
+import vue from 'rollup-plugin-vue';
+
+/**
+ * @type {import('rollup').RollupOptions}
+*/
+const config = {
+  input: 'dev/serve.ts',
+  output: {
+    file: 'example/dist/bundle.js',
+    format: 'iife',
+    sourcemap: true
+  },
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      preventAssignment: true, // recommended to be set by library to be forward compatible
+    }),
+    vue(),
+    nodeResolve({ browser: true }),
+    // Transform mixed because some JsonForms modules use import and require
+    commonjs({ transformMixedEsModules: true }),
+    css(),
+    json(),
+    typescript({
+      tsconfigOverride: {
+        include: null,
+        compilerOptions: {
+          // Do not emit typescript declarations for our bundled example app
+          declaration: false
+        }
+      }
+    }),
+    copy({
+      targets: [
+        {
+          src: 'example/index.bundled.html',
+          dest: 'example/dist',
+          rename: () => 'index.html'
+        },
+      ]
+    }),
+  ]
+}
+
+export default config;