setup html build pipeline

.babelrc

@@ -8,7 +8,8 @@
       "@babel/typescript" 
     ],
     "plugins": [
-      "@babel/proposal-class-properties",
+      ["@babel/plugin-proposal-decorators", {"legacy": true}],
+      ["@babel/proposal-class-properties", {"loose": true}],
       "@babel/proposal-object-rest-spread"
     ]
   }

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "jest",
     "build": "rollup -c",
-    "start": "npm run build && node ./dist/app.js"
+    "start": "rollup -c -w"
   },
   "repository": {
     "type": "git",
@@ -21,16 +21,24 @@
   "devDependencies": {
     "@babel/core": "^7.11.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-babel": "^5.2.0",
     "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-html": "^0.2.3",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/jest": "^26.0.12",
     "core-js": "^3.8.2",
     "jest": "^26.4.2",
+    "lit-element": "^2.4.0",
     "rollup": "^2.26.9",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-dev": "^1.1.3",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-terser": "^7.0.2",
+    "router-slot": "^1.5.4",
     "ts-jest": "^26.3.0",
     "typescript": "^4.0.2"
   }

rollup.config.js

@@ -1,27 +1,58 @@
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
+import minifyHTML from 'rollup-plugin-minify-html-literals';
+import { terser } from 'rollup-plugin-terser';
+import html from '@rollup/plugin-html';
+import copy from 'rollup-plugin-copy';
+import { indexHtml } from './src/indexHtml.js';
+import dev from 'rollup-plugin-dev';
 
 const extensions = ['.js', '.ts'];
 
+/** @type {import('rollup-plugin-copy').CopyOptions} */
+const copyConfig = {};
+
 /** @type {import('rollup').RollupOptions} */
 const config = {
-    input: 'src/app.ts',
-    output: {
-        dir: 'dist',
-        format: 'iife',
-        name: 'Cardinal'
-    },
-
-    plugins: [
-        resolve({ extensions }),
-        commonjs(),
-        babel({
-          extensions,
-          babelHelpers: 'bundled',
-          include: ['src/**/*'],
-        }),
-      ],
+	input: 'src/app.ts',
+	output: {
+		dir: 'dist',
+		format: 'es',
+		name: 'Oriole',
+		entryFileNames: '[name]-[hash].js',
+		chunkFileNames: '[name]-[hash].js',
+	},
+
+	plugins: [
+		html({
+			template: indexHtml,
+		}),
+		minifyHTML(),
+		copy(copyConfig),
+		resolve({ extensions }),
+		commonjs(),
+		babel({
+			extensions,
+			babelHelpers: 'bundled',
+			include: ['src/**/*'],
+		}),
+	],
+};
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+if (isDevelopment) {
+	config.watch = {};
+}
+
+if (!isDevelopment) {
+	config.output.sourcemap = true;
+	config.plugins = [
+		...config.plugins,
+		terser({}),
+		dev({ dirs: ['dist'], host: 'localhost', spa: true }),
+	];
 }
 
-export default config;
+export default config;

src/app.spec.ts

@@ -1,5 +0,0 @@
-import { app } from "./app";
-
-test('App works', () => {
-    expect(app()).toEqual('4');
-});

src/app.ts

@@ -1,8 +1,32 @@
+import {
+	LitElement,
+	html,
+	customElement,
+	PropertyValues,
+	query,
+	css,
+} from 'lit-element';
+import { RouterSlot, IRoute } from 'router-slot';
+import { flexHostStyles, globalStyles } from './globalStyles';
 
-export function app() {
-    var res: string = `4`;
-    console.log(res);
-    return res;
-}
+const routes: Array<IRoute> = [];
+
+@customElement('ori-app')
+export default class AppElement extends LitElement {
+	@query('router-slot') routerSlotRef!: RouterSlot;
 
-app();
+	firstUpdated(props: PropertyValues) {
+		super.firstUpdated(props);
+		this.routerSlotRef.add(routes);
+	}
+	render() {
+		return html`<div class="app ori-flex">
+			<h1>I Work!</h1>
+			<router-slot class="ori-flex"></router-slot>
+		</div>`;
+	}
+
+	static get styles() {
+		return [globalStyles, flexHostStyles, css``];
+	}
+}

src/globalStyles.ts

@@ -0,0 +1,33 @@
+import { css } from 'lit-element';
+
+export const flexHostStyles = css`
+	:host {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0px;
+	}
+`;
+
+export const globalStyles = css`
+	.bn-flex,
+	html,
+	body {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0px;
+	}
+`;
+
+export const fadeinAnimation = css`
+	@keyframes fadein {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+`;

src/indexHtml.js

@@ -0,0 +1,104 @@
+const makeHtmlAttributes = (attributes) => {
+	if (!attributes) {
+		return '';
+	}
+	const keys = Object.keys(attributes);
+	// eslint-disable-next-line no-param-reassign
+	return keys.reduce(
+		(result, key) => (result += ` ${key}="${attributes[key]}"`),
+		''
+	);
+};
+
+/** @type {(options: import('@rollup/plugin-html').RollupHtmlOptions) => string} */
+export const indexHtml = ({
+	attributes,
+	meta,
+	title,
+	files,
+	publicPath,
+	fileName,
+}) => {
+	const scripts = (files.js || [])
+		.map(({ fileName }) => {
+			const attrs = makeHtmlAttributes(attributes.script);
+			return `<script src="${publicPath}${fileName}"${attrs}></script>`;
+		})
+		.join('\n');
+	const links = (files.css || [])
+		.map(({ fileName }) => {
+			const attrs = makeHtmlAttributes(attributes.link);
+			return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
+		})
+		.join('\n');
+	const metas = meta
+		.map((input) => {
+			const attrs = makeHtmlAttributes(input);
+			return `<meta${attrs}>`;
+		})
+		.join('\n');
+
+	return `
+    <!DOCTYPE html>
+    <html ${makeHtmlAttributes(attributes.html)}>
+      <head>
+        <base href="/">
+        ${metas}
+        <title>${title}</title>
+        ${links}
+        <style>
+          body {  
+            --on: inherit;
+            --off: ;
+            
+            --light: var(--on);
+            --dark: var(--off);
+            
+            --oriLightShade: var(--light, var(--ori2)) var(--dark, var(--ori0));
+            --oriLightAccent: var(--light, var(--ori3)) var(--dark, var(--ori1));
+            --oriMain: var(--light, var(--ori7)) var(--dark, var(--ori7));
+            --oriDarkAccent: var(--light, var(--ori4)) var(--dark, var(--ori0));
+            --oriDarkShade: var(--light, var(--ori5)) var(--dark, var(--ori1));
+            
+            /* Dark colors. */
+            --ori0: #4A4B51;
+            --ori1: #56575E;
+            --ori2: #333438;
+            --ori3: #393C40;
+
+            /* Light colors. */
+            --ori4: #E3F2FF;
+            --ori5: #CCDAE6;
+            --ori6: #AAB5BF;
+
+            /* Primary colors. */
+            --ori7: #F29422;
+            --ori8: #F2BE22;
+            --ori9: #F24F13;
+            --ori10: #F24F13;
+            
+            /* Action colors. */
+            --ori11: #E6C567;
+            --ori12: #447EB3;
+            --ori13: #A1CD44;
+            --ori14: #D93830;
+            --ori15: #F5857F;
+            
+            background-color: var(--oriLightShade);
+            color: var(--oriMain);
+          }
+          
+          @media (prefers-color-scheme: dark) {
+            body {
+              --light: var(--off);
+              --dark: var(--on);
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <ori-app></ori-app>
+        ${scripts}
+      </body>
+    </html>`;
+};