feat(tools): allow consumers to specify additional packages to bundle

Author: bennypowers

.changeset/calm-apes-tie.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": minor
+---
+
+Add `additionalPackages` option to `singleFileBundle`

tools/pfe-tools/11ty/plugins/pfe-assets.cjs

@@ -10,42 +10,62 @@ function exists(x) {
   }
 }
 
-/** Generate a map of files per package which should be copied to the site dir */
-function getFilesToCopy() {
+/**
+ * Generate a map of files per package which should be copied to the site dir
+ * @param {object} [options]
+ * @param {string} [options.prefix='pfe'] element prefix e.g. 'pfe' for 'pfe-button'
+ */
+function getFilesToCopy(options) {
   /** best guess at abs-path to repo root */
   const repoRoot = path.join(__dirname, '..', '..', '..', '..').replace(/node_modules\/?$/g, '');
 
+  const prefix = `${(options?.prefix ?? 'pfe').replace(/-$/, '')}-`;
+
+  const hasElements = exists(path.join(repoRoot, 'elements'));
+  const hasCore = exists(path.join(repoRoot, 'core'));
+
+  if (!hasElements && !hasCore) {
+    return null;
+  }
+
+  const files = {};
+
   // Copy all component and core files to _site
-  const files = Object.fromEntries(fs.readdirSync(path.join(repoRoot, 'elements')).map(dir => [
-    `elements/${dir}`,
-    `components/${dir.replace('pfe-', '')}`,
-  ]));
+  if (hasElements) {
+    Object.assign(files, Object.fromEntries(fs.readdirSync(path.join(repoRoot, 'elements')).map(dir => [
+      `elements/${dir}`,
+      `components/${dir.replace(prefix, '')}`,
+    ])));
+  }
 
-  if (exists(path.join(repoRoot, 'core'))) {
+  if (hasCore) {
     Object.assign(files, Object.fromEntries(fs.readdirSync(path.join(repoRoot, 'core')).map(dir => [
       `core/${dir}`,
-      `core/${dir.replace('pfe-', '')}`,
+      `core/${dir.replace(prefix, '')}`,
     ])));
   }
 
   return files;
 }
 
 let didFirstBuild = false;
-/** Generate a single-file bundle of all pfe components and their dependencies */
-async function bundle() {
+
+/** Generate a single-file bundle of all the repo's components and their dependencies */
+async function bundle(options) {
   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({
+      additionalPackages: options?.additionalPackages,
       minify: process.env.NODE_ENV === 'production' || process.env.ELEVENTY_ENV?.startsWith?.('prod'),
       outfile: 'docs/pfe.min.js',
       conditions: ['esbuild'],
       plugins: [
         pfeEnvPlugin(),
       ]
     }).catch(() => void 0);
+
     didFirstBuild = true;
   }
 }
@@ -71,19 +91,24 @@ function demoPaths(content) {
 }
 
 module.exports = {
-  configFunction(eleventyConfig) {
+  configFunction(eleventyConfig, options) {
     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/**/*');
-    eleventyConfig.addPassthroughCopy(getFilesToCopy());
+    const filesToCopy = getFilesToCopy(options);
+    if (filesToCopy) {
+      eleventyConfig.addPassthroughCopy(filesToCopy);
+    }
 
     // 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', demoPaths);
 
     // create /docs/pfe.min.js
-    eleventyConfig.on('eleventy.before', bundle);
+    eleventyConfig.on('eleventy.before', () => bundle(options));
   },
 };
+
+

tools/pfe-tools/demo/components.ts

@@ -15,9 +15,7 @@ import { nodeExternalsPlugin } from 'esbuild-node-externals';
 import { readdirSync } from 'fs';
 import { resolve, join, dirname } from 'path';
 import { fileURLToPath } from 'url';
-import { mkdtemp, readdir, writeFile } from 'fs/promises';
-
-import os from 'os';
+import { mkdtemp, readdir, readFile, stat, writeFile } from 'fs/promises';
 
 export interface PfeEsbuildOptions {
   /** Extra esbuild plugins */
@@ -39,6 +37,8 @@ export interface PfeEsbuildOptions {
 }
 
 export interface PfeEsbuildSingleFileOptions {
+  /** list of NPM package names to bundle alongside the repo's components */
+  additionalPackages?: string[];
   outfile?: string;
   plugins?: Plugin[];
   minify?: boolean;
@@ -66,6 +66,8 @@ const ALWAYS_EXCLUDE = [
   'pfe-styles',
 ];
 
+const exists = (filePath: string) => stat(filePath).then(() => true, () => false);
+
 /** lit-css transform plugin to process `.scss` files on-the-fly */
 export async function transformSass(
   source: string,
@@ -106,36 +108,56 @@ export function getBasePlugins({ minify }: { minify?: boolean } = {}) {
 }
 
 /** Generate a temporary file containing namespace exports of all pfe components */
-export async function componentsEntryPoint(options?: { prefix: string }) {
-  const componentDirs = await readdir(join(REPO_ROOT, 'elements'));
+export async function componentsEntryPoint(options?: { additionalPackages?: string[] }) {
+  const componentDirs = await readdir(join(REPO_ROOT, 'elements')).catch(() => [] as string[]);
   const cacheKey = componentDirs.join('--');
+
+  const additionalImports =
+    options?.additionalPackages
+      ?.reduce((acc, specifier) => `${acc}\nexport * from '${specifier}';`, '') ?? '';
+
+  if (!cacheKey) {
+    return additionalImports;
+  }
+
   if (!COMPONENT_ENTRYPOINTS_CACHE.get(cacheKey)) {
     try {
-      const outdir =
-          options?.prefix ? join(REPO_ROOT, options?.prefix)
-        : await mkdtemp(join(os.tmpdir(), 'pfe'));
-      const tmpfile = join(outdir, 'components.ts');
-      const imports = await Promise.all(componentDirs.reduce((acc, dir) =>
-        `${acc}\nexport * from '@patternfly/${dir}';`, ''));
-      await writeFile(tmpfile, imports, 'utf8');
-      COMPONENT_ENTRYPOINTS_CACHE.set(cacheKey, tmpfile);
-      return tmpfile;
+      const imports = await componentDirs.reduce(async (last, dir) => {
+        const acc = await last;
+        const elementPath = join(REPO_ROOT, 'elements', dir);
+        const packageJsonPath = join(elementPath, 'package.json');
+        const isPackage = await exists(packageJsonPath);
+        if (isPackage) {
+          const { name } = JSON.parse(await readFile(packageJsonPath, 'utf8'));
+          return `${acc}\nexport * from '${name}';`;
+        } else {
+          return `${acc}\nexport * from '${elementPath.replace(REPO_ROOT, './')}/${dir}.js';`;
+        }
+      }, Promise.resolve(additionalImports));
+
+      COMPONENT_ENTRYPOINTS_CACHE.set(cacheKey, imports);
+      return imports;
     } catch (error) {
       console.error(error);
     }
   }
+
   return COMPONENT_ENTRYPOINTS_CACHE.get(cacheKey);
 }
 
 /** 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 })],
+      stdin: {
+        contents: await componentsEntryPoint({ additionalPackages: options?.additionalPackages }),
+        resolveDir: REPO_ROOT,
+        sourcefile: 'components.ts',
+        loader: 'ts',
+      },
       format: 'esm',
       keepNames: true,
       legalComments: 'linked',