eclipsesource · sdirix · Jan 4, 2023 · Dec 5, 2022 · Jan 3, 2023 · Jan 3, 2023
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",
+    "build:examples-app": "lerna run build:examples-app && 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 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-renderers', 'example', 'dist'),
+  'react-material': join(packagesDir, 'material-renderers', '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
@@ -33,8 +33,9 @@
   "typings": "lib/index.d.ts",
   "scripts": {
     "build": "rollup -c rollup.config.js",
+    "build:examples-app": "rollup -c rollup.example.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",
+    "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: '../examples-react/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
@@ -11,8 +11,9 @@
   "typings": "lib/index.d.ts",
   "scripts": {
     "build": "rollup -c rollup.config.js",
+    "build:examples-app": "rollup -c rollup.example.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",
+    "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: '../examples-react/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",