feat(tools): generate single-file entrypoint at runtime

Author: bennypowers

.changeset/yellow-dingos-heal.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/create-element": patch
+"@patternfly/pfe-tools": patch
+---
+
+Generate the single-file bundle entrypoint at runtime

.eslintignore

@@ -26,6 +26,7 @@ package-lock.json
 _site
 docs/_data/todos.json
 docs/demo.js
+docs/pfe.min.js
 docs/bundle.js
 docs/core
 docs/components

.gitignore

@@ -128,6 +128,7 @@ core/pfe-core/demo/*
 /docs/demo/**/*.js.map
 /docs/demo/demo.js.LEGAL.txt
 !/docs/demo/demo.css
+!/docs/demo/components.ts
 !/docs/core/styles/demo.njk
 
 

docs/_includes/_head.njk

@@ -21,5 +21,5 @@
   <link rel="stylesheet" href="/core/styles/pfe-layouts.min.css">
   <link rel="stylesheet" href="/main.css">
 
-  <script type="module" src="/bundle.js"></script>
+  <script type="module" src="/pfe.min.js"></script>
 </head>

docs/_plugins/bundle.cjs

@@ -1,53 +1,79 @@
 const fs = require('fs');
 const { join } = require('path');
-const { bundle } = require('./bundle.cjs');
+
+/** Generate a map of files per package which should be copied to the site dir */
+function getFilesToCopy() {
+  const repoRoot = join(__dirname, '..', '..');
+
+  // Copy all component and core files to _site
+  const files = Object.fromEntries([
+    ...fs.readdirSync(join(repoRoot, 'elements')).map(dir => [
+      `elements/${dir}`,
+      `components/${dir.replace('pfe-', '')}`,
+    ]),
+    ...fs.readdirSync(join(repoRoot, 'core')).map(dir => [
+      `core/${dir}`,
+      `core/${dir.replace('pfe-', '')}`,
+    ]),
+  ]);
+
+  return files;
+}
 
 let didFirstBuild = false;
+/** Generate a single-file bundle of all pfe components and their dependencies */
+async function bundle() {
+  if (!didFirstBuild) {
+    const { singleFileBuild } = await import('@patternfly/pfe-tools/esbuild.js');
+    const { pfeEnvPlugin } = await import('@patternfly/pfe-tools/esbuild-plugins/pfe-env.js');
+
+    await singleFileBuild({
+      minify: process.env.NODE_ENV === 'production',
+      outfile: 'docs/pfe.min.js',
+      conditions: ['esbuild'],
+      plugins: [
+        pfeEnvPlugin(),
+      ]
+    }).catch(() => void 0);
+    didFirstBuild = true;
+  }
+}
+
+/**
+ * @typedef {object} EleventyTransformContext
+ * @property {string} outputPath path this file will be written to
+ */
+
+/**
+ * Replace paths in demo files from the dev SPA's format to 11ty's format
+ * @this {EleventyTransformContext}
+ */
+function demoPaths(content) {
+  if (this.outputPath.match(/(components|core|tools)\/.*\/demo\/index\.html$/)) {
+    return content.replace(/(?<attr>href|src)="\/(?<workspace>elements|core)\/pfe-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g, (...args) => {
+      const [{ attr, workspace, unprefixed, filename, extension }] = args.reverse();
+      return `${attr}="/${workspace === 'elements' ? 'components' : workspace}/${unprefixed}/${filename}.${extension}"`;
+    });
+  } else {
+    return content;
+  }
+}
 
 module.exports = {
   configFunction(eleventyConfig) {
     eleventyConfig.addWatchTarget('tools/pfe-tools/11ty/**/*.{js,njk}');
     eleventyConfig.addPassthroughCopy('docs/bundle.{js,map,ts}');
+    eleventyConfig.addPassthroughCopy('docs/pfe.min.{map,css}');
     eleventyConfig.addPassthroughCopy('docs/demo.{js,map,ts}');
     eleventyConfig.addPassthroughCopy('docs/main.mjs');
     eleventyConfig.addPassthroughCopy('brand/**/*');
-
-    const repoRoot = join(__dirname, '..', '..');
-
-    // Copy all component and core files to _site
-    const files = Object.fromEntries([
-      ...fs.readdirSync(join(repoRoot, 'elements')).map(dir => [
-        `elements/${dir}`,
-        `components/${dir.replace('pfe-', '')}`,
-      ]),
-      ...fs.readdirSync(join(repoRoot, 'core')).map(dir => [
-        `core/${dir}`,
-        `core/${dir.replace('pfe-', '')}`,
-      ]),
-    ]);
-
-    eleventyConfig.addPassthroughCopy(files);
+    eleventyConfig.addPassthroughCopy(getFilesToCopy());
 
     // The demo files are written primarily for the dev SPA (`npm start`),
     // so here we transform the paths found in those files to match the docs site's file structure
-    eleventyConfig.addTransform('demo-paths', function(content) {
-      // eslint-disable-next-line no-invalid-this
-      if (this.outputPath.match(/(components|core|tools)\/.*\/demo\/index\.html$/)) {
-        return content.replace(/(?<attr>href|src)="\/(?<workspace>elements|core)\/pfe-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g, (...args) => {
-          const [{ attr, workspace, unprefixed, filename, extension }] = args.reverse();
-          return `${attr}="/${workspace === 'elements' ? 'components' : workspace}/${unprefixed}/${filename}.${extension}"`;
-        });
-      } else {
-        return content;
-      }
-    });
+    eleventyConfig.addTransform('demo-paths', demoPaths);
 
-    eleventyConfig.on('beforeBuild', async () => {
-      if (!didFirstBuild) {
-        // create /docs/bundle.js
-        await bundle();
-        didFirstBuild = true;
-      }
-    });
+    // create /docs/pfe.min.js
+    eleventyConfig.on('eleventy.before', bundle);
   },
 };

docs/_plugins/pfe-assets.cjs

@@ -23,7 +23,7 @@
     {# <link type="text/css" rel="stylesheet" href="/core/styles/pfe-vars-as-px.min.css" media="all"/> #}
     {# <link type="text/css" rel="stylesheet" href="/core/styles/pfe-vars.min.css" media="all"/> #}
     <link type="text/css" rel="stylesheet" href="/core/styles/red-hat-font.min.css" media="all"/>
-    <script type="module" src="/bundle.js"></script>
+    <script type="module" src="/pfe.min.js"></script>
     <noscript><link href="/core/core/pfe--noscript.min.css" rel="stylesheet"></noscript>
     <style>
       /* Replicate styles from /sites/ and static.redhat.com */

docs/demo/components.ts

@@ -1,4 +1,4 @@
-import { PfeIcon } from '/bundle.js';
+import { PfeIcon } from '/pfe.min.js';
 
 PfeIcon.addIconSet(
   'fas',

docs/kitchen-sink.njk

@@ -235,14 +235,6 @@ async function updateTsconfig(options: GenerateElementOptions): Promise<void> {
   await execaCommand(`npx eslint --fix ${configPath}`);
 }
 
-async function updateDocsBundle(options: GenerateElementOptions): Promise<void> {
-  const pathname = join(process.cwd(), 'docs', 'demo', 'components.ts');
-  const content = await readFile(pathname, 'utf8');
-
-  await writeFile(pathname, `${content}\nimport '@patternfly/${options.tagName}';`, 'utf8');
-  await execaCommand(`npx eslint --fix ${pathname}`);
-}
-
 /**
  * Generate an Element
  */
@@ -259,7 +251,6 @@ export async function generateElement(options: GenerateElementOptions): Promise<
     await writeElementFiles(options);
     await analyzeElement(options);
     await updateTsconfig(options);
-    await updateDocsBundle(options);
     await execaCommand('npm install');
   }
 }