feat(tools): move dev SPA wholly into tools

bennypowers · bennypowers · commit 9a9576834bd9 · 2022-03-29T16:42:13.000-04:00
diff --git a/.changeset/poor-birds-do.md b/.changeset/poor-birds-do.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": minor
+---
+
+Moves development server wholly into pfe-tools, and exposes some customization properties so daughter repos can customize the page
diff --git a/package-lock.json b/package-lock.json
diff --git a/tools/pfe-tools/demo/bundle.ts b/tools/pfe-tools/demo/bundle.ts
diff --git a/tools/pfe-tools/demo/components.ts b/tools/pfe-tools/demo/components.ts
@@ -0,0 +1,30 @@
+
+export * from '@patternfly/pfe-accordion';
+export * from '@patternfly/pfe-autocomplete';
+export * from '@patternfly/pfe-avatar';
+export * from '@patternfly/pfe-badge';
+export * from '@patternfly/pfe-band';
+export * from '@patternfly/pfe-button';
+export * from '@patternfly/pfe-card';
+export * from '@patternfly/pfe-clipboard';
+export * from '@patternfly/pfe-codeblock';
+export * from '@patternfly/pfe-collapse';
+export * from '@patternfly/pfe-cta';
+export * from '@patternfly/pfe-datetime';
+export * from '@patternfly/pfe-dropdown';
+export * from '@patternfly/pfe-health-index';
+export * from '@patternfly/pfe-icon';
+export * from '@patternfly/pfe-icon-panel';
+export * from '@patternfly/pfe-jump-links';
+export * from '@patternfly/pfe-label';
+export * from '@patternfly/pfe-markdown';
+export * from '@patternfly/pfe-modal';
+export * from '@patternfly/pfe-number';
+export * from '@patternfly/pfe-page-status';
+export * from '@patternfly/pfe-primary-detail';
+export * from '@patternfly/pfe-progress-indicator';
+export * from '@patternfly/pfe-progress-steps';
+export * from '@patternfly/pfe-readtime';
+export * from '@patternfly/pfe-select';
+export * from '@patternfly/pfe-tabs';
+export * from '@patternfly/pfe-toast';
diff --git a/tools/pfe-tools/demo/demo.css b/tools/pfe-tools/demo/demo.css
diff --git a/tools/pfe-tools/demo/demo.ts b/tools/pfe-tools/demo/demo.ts
@@ -1,3 +1,5 @@
+import type { HTMLIncludeElement } from 'html-include-element';
+
 import 'html-include-element';
 import 'api-viewer-element';
 import '@vaadin/split-layout';
@@ -84,8 +86,7 @@ const linkLoaded = async function linkLoaded(link: HTMLLinkElement) {
   });
 };
 
-/** @this {import('html-include-element').HTMLIncludeElement} */
-async function loadPartial() {
+async function loadPartial(this: HTMLIncludeElement) {
   let text = '';
   try {
     const mode = this.mode || 'cors';
diff --git a/tools/pfe-tools/demo/index.html b/tools/pfe-tools/demo/index.html
@@ -4,26 +4,23 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description"
-    content="PatternFly Elements: A set of community-created web components based on PatternFly design.">
+  <meta name="description" content="{{ description }}">
   <meta name="pfe-track-performance" content="true">
   <link href="/brand/logo/svg/pfe-icon-blue.svg" rel="shortcut icon">
-  <title>PatternFly Elements</title>
-  <link rel="stylesheet" href="/docs/demo/demo.css">
-  <link rel="stylesheet" href="/docs/main.css" />
-  <link rel="stylesheet" href="/core/pfe-styles/pfe.min.css">
-  <link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.min.css">
-  <link rel="stylesheet" href="/core/pfe-styles/red-hat-font.min.css">
-  <script type="module">
-    import '/docs/demo/demo.ts';
-  </script>
+  <title>{{ title }}</title>
+  <link rel="stylesheet" href="/node_modules/@patternfly/pfe-styles/pfe.min.css">
+  <link rel="stylesheet" href="/node_modules/@patternfly/pfe-styles/pfe-layouts.min.css">
+  <link rel="stylesheet" href="/node_modules/@patternfly/pfe-styles/red-hat-font.min.css">
+  <link rel="stylesheet" href="/node_modules/@patternfly/pfe-tools/demo/demo.css">
+  <link rel="stylesheet" href="/docs/main.css">
+  <script type="module" src="/node_modules/@patternfly/pfe-tools/demo/demo.ts"></script>
 </head>
 
 <body>
   <header class="logo-bar">
     <button id="hamburger" aria-label="Expand Main Navigation">&#9776;</button>
-    <a href="/"><img src="/brand/logo/svg/pfe-icon-white-shaded.svg" alt="" />PatternFly Elements</a>
-    <a id="github-link" href="https://github.com/patternfly/patternfly-elements/">
+    <a href="/"><img src="{{ logoUrl }}" alt="" />{{ title }}</a>
+    <a id="github-link" href="{{ githubUrl }}">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
         <title>GitHub</title>
         <!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
diff --git a/tools/pfe-tools/dev-server.ts b/tools/pfe-tools/dev-server.ts
@@ -1,32 +1,47 @@
 import type { Plugin } from '@web/dev-server-core';
 import type { DevServerConfig } from '@web/dev-server';
 import type { InjectSetting } from '@web/dev-server-import-maps/dist/importMapsPlugin';
+import type { Context, Middleware, Next } from 'koa';
 
 import { readdir, stat } from 'fs/promises';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 
 import litcssRollup from 'rollup-plugin-lit-css';
 import rollupReplace from '@rollup/plugin-replace';
+import nunjucks from 'nunjucks';
 
 import { fromRollup } from '@web/dev-server-rollup';
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { importMapsPlugin } from '@web/dev-server-import-maps';
 import { transformSass } from './esbuild.js';
 import { createRequire } from 'module';
 
-const require = createRequire(import.meta.url);
-const exists = (x: string) => stat(x).then(() => true, () => false);
-
 export interface PfeDevServerConfigOptions extends DevServerConfig {
   /** Extra dev server plugins */
   plugins?: Plugin[];
   importMap?: InjectSetting['importMap'];
   hostname?: string;
+  site?: {
+    title: string;
+    logoUrl: string;
+    githubUrl: string;
+    description: string;
+  };
 }
 
+const require = createRequire(import.meta.url);
+const exists = (x: string) => stat(x).then(() => true, () => false);
 const litcss = fromRollup(litcssRollup);
 const replace = fromRollup(rollupReplace);
+const env = nunjucks.configure(fileURLToPath(new URL('./demo', import.meta.url)));
+
+const SITE_DEFAULTS = {
+  title: 'PatternFly Elements',
+  logoUrl: '/brand/logo/svg/pfe-icon-white-shaded.svg',
+  githubUrl: 'https://github.com/patternfly/patternfly-elements/',
+  description: 'PatternFly Elements: A set of community-created web components based on PatternFly design.',
+};
 
 function appendLines(body: string, ...lines: string[]): string {
   return [body, ...lines].join('\n');
@@ -127,6 +142,24 @@ export function resolveLocalFilesFromTypeScriptSources(options: PfeDevServerConf
   };
 }
 
+function nunjucksSPAMiddleware(options: PfeDevServerConfigOptions): Middleware {
+  return function(ctx, next) {
+    if (ctx.method !== 'HEAD' && ctx.method !== 'GET' || ctx.path.match(/\./)) {
+      return next();
+    } else {
+      const transformed = env.render('index.html', { ...SITE_DEFAULTS, ...options?.site });
+      ctx.body = transformed;
+      ctx.type = 'html';
+      ctx.status = 200;
+    }
+  };
+}
+
+function cors(context: Context, next: Next) {
+  context.set('Access-Control-Allow-Origin', '*');
+  return next();
+}
+
 /**
  * Creates a default config for PFE's dev server.
  */
@@ -147,19 +180,15 @@ export function pfeDevServerConfig(_options?: PfeDevServerConfigOptions): DevSer
     .replace('//', '/');
 
   return {
-    appIndex: 'index.html',
+    rootDir,
 
     nodeResolve: true,
 
-    rootDir,
-
     ...options ?? {},
 
     middleware: [
-      function cors(context, next) {
-        context.set('Access-Control-Allow-Origin', '*');
-        return next();
-      },
+      nunjucksSPAMiddleware(options),
+      cors,
       ...options?.middleware ?? [],
     ],
 
@@ -187,7 +216,7 @@ export function pfeDevServerConfig(_options?: PfeDevServerConfigOptions): DevSer
       litcss({ include: ['**/*.scss'], transform: transformSass }),
       replace({
         'preventAssignment': true,
-        'process.env.NODE_ENV': JSON.stringify( 'production' )
+        'process.env.NODE_ENV': JSON.stringify('production'),
       }),
       // Ensure .scss files are loaded as js modules, as `litcss` plugin transforms them to such
       scssMimeType(),
diff --git a/tools/pfe-tools/esbuild.ts b/tools/pfe-tools/esbuild.ts
@@ -130,11 +130,12 @@ export async function componentsEntryPoint(options?: { prefix: string }) {
 /** Create a single-file production bundle of all elements */
 export async function singleFileBuild(options?: PfeEsbuildSingleFileOptions) {
   try {
+    const prefix = fileURLToPath(new URL('./demo', import.meta.url)).replace(REPO_ROOT, '');
     const result = await esbuild.build({
       absWorkingDir: REPO_ROOT,
       allowOverwrite: true,
       bundle: true,
-      entryPoints: [await componentsEntryPoint({ prefix: 'docs/demo' })],
+      entryPoints: [await componentsEntryPoint({ prefix })],
       format: 'esm',
       keepNames: true,
       legalComments: 'linked',
diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json
@@ -93,6 +93,7 @@
     "eslint": "^8.11.0",
     "glob": "^7.2.0",
     "html-include-element": "^0.3.0",
+    "koa-send": "^5.0.1",
     "lit": "^2.1.2",
     "markdown-it-anchor": "^8.4.1",
     "npm-run-all": "^4.1.5",
@@ -111,6 +112,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.20.0",
     "@types/dedent": "^0.7.0",
+    "@types/koa-send": "^4.1.3",
     "patch-package": "^6.4.7"
   }
 }
diff --git a/tools/pfe-tools/tsconfig.json b/tools/pfe-tools/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.settings.json",
   "include": ["./**/*"],
+  "exclude": ["demo"],
   "compilerOptions": {
     "allowJs": false,
     "checkJs": false,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@patternfly/pfe-tools": minor
 +---
++
 +Moves development server wholly into pfe-tools, and exposes some customization properties so daughter repos can customize the page