Add bundled example for Angular Material

* Add rollup config to bundle the angular material example * Add to examples app Part of #1706
eclipsesource · Jan 10, 2023 · bfc55b0 · bfc55b0
1 parent 36e3732
commit bfc55b0
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 1 deletion.
diff --git a/packages/angular-material/example/index.bundled.html b/packages/angular-material/example/index.bundled.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>JSON Forms Angular Material RendererSet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="indigo-pink.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100' rel='stylesheet' type='text/css'>
+</head>
+<body>
+  <app-root></app-root>
+</body>
+<script src="bundle.js"></script>
+</html>
+
+<!--
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json
@@ -35,6 +35,7 @@
   "typings": "./lib/esm/index.d.ts",
   "scripts": {
     "build": "ngc && ngc -p tsconfig.cjs.json",
+    "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",
     "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
@@ -88,6 +89,10 @@
     "@jsonforms/angular-test": "^3.1.0-alpha.0",
     "@jsonforms/core": "^3.1.0-alpha.0",
     "@jsonforms/examples": "^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/node": "^10.10.0",
     "angular2-template-loader": "^0.6.2",
     "copy-webpack-plugin": "^5.0.5",
@@ -108,6 +113,12 @@
     "protractor": "^5.4.1",
     "request": "^2.88.0",
     "rimraf": "^3.0.2",
+    "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",
     "rxjs": "^6.5.3",
     "ts-loader": "^6.2.1",
     "tslint": "^5.20.1",

diff --git a/packages/angular-material/rollup.example.config.js b/packages/angular-material/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/main.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: '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+          dest: 'example/dist'
+        },
+        {
+          src: 'example/index.bundled.html',
+          dest: 'example/dist',
+          rename: () => 'index.html'
+        }
+      ]
+    }),
+  ]
+}
+
+export default config;
diff --git a/packages/examples-app/index.html b/packages/examples-app/index.html
@@ -12,6 +12,7 @@ <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>
+    <li><a href="angular-material">Angular Material Renderers</a></li>
   </ul>
 </body>
 </html>
diff --git a/packages/examples-app/prepare-examples-app.js b/packages/examples-app/prepare-examples-app.js
@@ -12,7 +12,8 @@ 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')
+  'react-material': join(packagesDir, 'material-renderers', 'example', 'dist'),
+  'angular-material': join(packagesDir, 'angular-material', 'example', 'dist')
 }
 
 // Clean and recreate dist dir