Add examples app with bundled react vanilla, material examples

lucas-koehler · lucas-koehler · commit 2147d8a8d368 · 2022-12-05T14:41:19.000+01:00
This introduces a new private package `examples-app` to create a simple web page that ultimately has child pages for every example. In this initial commit, only the react vanilla and material examples are added. Therefore, they are bundled with rollup to be able to run as standalone pages. - Add rollup configs to bundle react vanilla and material examples - Add required dev deps and upgrade rollup dev dep to ^2.78.0 for all packages - change material deps to ~5.2.2 because latest 5.x versions break api for Autocomplete - Add private package `examples-app` with a script to aggregate the examples - Add root level npm script to create the examples app - regenerate package-lock.json Part of #1706
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "clean": "lerna run clean",
     "test": "lerna run test",
     "test-cov": "lerna run test-cov",
-    "lint": "tslint 'packages/**/*.{ts,tsx}' -c ./tslint.json"
+    "lint": "tslint 'packages/**/*.{ts,tsx}' -c ./tslint.json",
+    "examples-app": "lerna run build && lerna run example:bundle && node packages/examples-app/prepare-examples-app.js"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -78,7 +78,7 @@
     "redux": "^4.0.4",
     "redux-mock-store": "1.5.3",
     "rimraf": "^3.0.2",
-    "rollup": "^2.7.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.4.1",
diff --git a/packages/examples-app/README.md b/packages/examples-app/README.md
@@ -0,0 +1,12 @@
+# JSON Forms - More Forms. Less Code
+
+*Complex forms in the blink of an eye*
+
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+
+## Examples App
+
+This package aggregates JSON Forms examples and makes them reachable via single `index.html` file.
+
+Aggregating the examples assumes that packages were built and their e examples bundled.
+Afterwards, the examples app can be aggregated with [prepare-examples-app.js](./prepare-examples-app.js) into folder `dist`.
diff --git a/packages/examples-app/index.html b/packages/examples-app/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>JSON Forms Examples</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <h1>JSON Forms Examples</h1>
+  <ul>
+    <li><a href="react-vanilla">React Vanilla Renderers</a></li>
+    <li><a href="react-material">React Material Renderers</a></li>
+  </ul>
+</body>
+</html>
diff --git a/packages/examples-app/package.json b/packages/examples-app/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@jsonforms/examples-app",
+  "version": "3.1.0-alpha.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^9.0.13",
+    "fs-extra": "^11.1.0"
+  }
+}
diff --git a/packages/examples-app/prepare-examples-app.js b/packages/examples-app/prepare-examples-app.js
@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+import { copySync } from 'fs-extra/esm';
+import { copyFileSync, mkdirSync, rmdirSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const distDir = join(__dirname, 'dist');
+const packagesDir = join(__dirname, '..');
+const examples = {
+  'react-vanilla': join(packagesDir, 'vanilla', 'example', 'dist'),
+  'react-material': join(packagesDir, 'material', 'example', 'dist')
+}
+
+// Clean and recreate dist dir
+console.log('Clean and recreate dist dir...');
+rmdirSync(distDir, { recursive: true, force: true });
+mkdirSync(distDir, { recursive: true });
+
+// Copy index and built examples
+console.log('Copy index.html...');
+console.log('Copy example apps...');
+copyFileSync(join(__dirname, 'index.html'), join(distDir, 'index.html'));
+Object.keys(examples).forEach(key => {
+  console.log(`Copying example ${key}...`);
+  const path = examples[key];
+  copySync(path, join(distDir, key));
+});
+
+console.log('...finished');
diff --git a/packages/examples-react/package.json b/packages/examples-react/package.json
@@ -6,7 +6,7 @@
     "@jsonforms/core": "^3.1.0-alpha.0",
     "@jsonforms/examples": "^3.1.0-alpha.0",
     "@jsonforms/react": "^3.1.0-alpha.0",
-    "@mui/material": "^5.2.2",
+    "@mui/material": "~5.2.2",
     "@types/react-highlight": "^0.12.5",
     "@types/react-tabs": "^2.3.3",
     "highlight.js": "^11.3.1",
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@jsonforms/core": "^3.1.0-alpha.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.7.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.4.1",
diff --git a/packages/material-renderers/example/index.bundled.html b/packages/material-renderers/example/index.bundled.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>JSON Forms React Material RendererSet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="bundle.css">
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+<script src="bundle.js"></script>
+
+</html>
diff --git a/packages/material-renderers/example/index.html b/packages/material-renderers/example/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>ReactiveForms Material RendererSet</title>
+  <title>JSON Forms React Material RendererSet</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
diff --git a/packages/material-renderers/package.json b/packages/material-renderers/package.json
@@ -34,7 +34,8 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
-    "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
+    "example:bundle": "rollup -c rollup.example.config.js",
+    "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
     "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
     "test": "jest --no-cache",
     "test-cov": "jest --no-cache --coverage",
@@ -78,18 +79,22 @@
     "@emotion/styled": "^11.3.0",
     "@jsonforms/core": "3.1.0-alpha.0",
     "@jsonforms/react": "3.1.0-alpha.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.0.0",
+    "@mui/icons-material": "~5.2.2",
+    "@mui/material": "~5.2.2",
     "@mui/x-date-pickers": "^5.0.0-beta.5"
   },
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@jsonforms/core": "^3.1.0-alpha.0",
     "@jsonforms/react": "^3.1.0-alpha.0",
-    "@mui/icons-material": "^5.2.0",
-    "@mui/material": "^5.2.2",
+    "@mui/icons-material": "~5.2.0",
+    "@mui/material": "~5.2.2",
     "@mui/x-date-pickers": "^5.0.0-beta.5",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-json": "^5.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
     "@types/enzyme": "^3.10.3",
     "@types/react-dom": "^17.0.9",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
@@ -99,8 +104,10 @@
     "nyc": "^15.1.0",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.7.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-import-css": "^3.1.0",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.4.1",
     "source-map-loader": "^0.2.4",
diff --git a/packages/material-renderers/rollup.example.config.js b/packages/material-renderers/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';
+
+/**
+ * @type {import('rollup').RollupOptions}
+*/
+const config = {
+  input: 'example/index.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
+    }),
+    nodeResolve({ browser: true }),
+    // Transform mixed because some JsonForms modules use import and require
+    commonjs({ transformMixedEsModules: true }),
+    css(),
+    json(),
+    typescript({
+      tsconfigOverride: {
+        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'
+        },
+        {
+          src: '../example/src/logo.svg',
+          dest: 'example/dist/assets'
+        }
+      ]
+    }),
+  ]
+}
+
+export default config;
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -104,7 +104,7 @@
     "redux": "^4.0.4",
     "redux-mock-store": "1.5.3",
     "rimraf": "^3.0.2",
-    "rollup": "^2.7.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.4.1",
diff --git a/packages/vanilla-renderers/example/index.bundled.html b/packages/vanilla-renderers/example/index.bundled.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>JSON Forms React Vanilla RendererSet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="example.css">
+  <link rel="stylesheet" href="example.dark.css">
+  <link rel="stylesheet" href="bundle.css">
+  <style type="text/css">
+    #theme {
+      position: absolute;
+      color: whitesmoke;
+      top: 0.25em;
+      left: 0.25em;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="theme"></div>
+  <div id="root"></div>
+</body>
+<script src="bundle.js"></script>
+
+</html>
diff --git a/packages/vanilla-renderers/example/index.html b/packages/vanilla-renderers/example/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>ReactiveForms Default RendererSet</title>
+  <title>JSON Forms React Vanilla RendererSet</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="assets/example.css">
diff --git a/packages/vanilla-renderers/package.json b/packages/vanilla-renderers/package.json
@@ -12,7 +12,8 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "dev": "webpack --config ./webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
-    "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
+    "example:bundle": "rollup -c rollup.example.config.js",
+    "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
     "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
     "report": "nyc report --reporter=html",
     "test": "jest --no-cache",
@@ -44,6 +45,10 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@jsonforms/core": "^3.1.0-alpha.0",
     "@jsonforms/react": "^3.1.0-alpha.0",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-json": "^5.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
     "@types/enzyme": "^3.10.3",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "copy-webpack-plugin": "^5.0.5",
@@ -54,8 +59,10 @@
     "nyc": "^15.1.0",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.7.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-import-css": "^3.1.0",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.4.1",
     "source-map-loader": "^0.2.4",
diff --git a/packages/vanilla-renderers/rollup.example.config.js b/packages/vanilla-renderers/rollup.example.config.js
@@ -0,0 +1,56 @@
+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';
+
+/**
+ * @type {import('rollup').RollupOptions}
+*/
+const config = {
+  input: 'example/index.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
+    }),
+    nodeResolve({ browser: true }),
+    // Transform mixed because some JsonForms modules use import and require
+    commonjs({ transformMixedEsModules: true }),
+    css(),
+    json(),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          // Do not emit typescript declarations for our bundled example app
+          declaration: false
+        }
+    }}),
+    copy({
+      targets: [
+        {
+          src: 'example/example*.css',
+          dest: 'example/dist'
+        },
+        {
+          src: 'example/index.bundled.html',
+          dest: 'example/dist',
+          rename: () => 'index.html'
+        },
+        {
+          src: '../example/src/logo.svg',
+          dest: 'example/dist/assets'
+        }
+      ]
+    }),
+  ]
+}
+
+export default config;
diff --git a/packages/vue/vue-vanilla/package.json b/packages/vue/vue-vanilla/package.json
@@ -70,7 +70,7 @@
     "cross-env": "^7.0.2",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "rollup": "^2.7.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-typescript2": "^0.31.1",
diff --git a/packages/vue/vue/package.json b/packages/vue/vue/package.json
diff --git a/packages/vue2/vue2-vanilla/package.json b/packages/vue2/vue2-vanilla/package.json
diff --git a/packages/vue2/vue2/package.json b/packages/vue2/vue2/package.json
