chore: Initial cut of refactoring esbuild to a generic function with our plugins extracted to their own files

Author: MaximusHaximus

packages/libs/lit-action-bundler/src/lib/esbuild/esbuild.ts

@@ -0,0 +1,55 @@
+import type { BuildResult } from 'esbuild';
+
+import path from 'path';
+
+import esbuild from 'esbuild';
+
+import type { BuildLitActionOptions } from './types';
+
+import { aliasFetch } from './plugins/aliasFetch';
+import { createBundledFile } from './plugins/createBundledFile';
+import { wrapIIFEInStringPlugin } from './plugins/wrapIIFEInString';
+import { assertOutputFiles } from './utils';
+
+/** Builds a Lit Action
+ */
+export async function buildLitAction({
+  entryPoint,
+  outdir,
+  tsconfigPath,
+  getLitActionHandler,
+}: BuildLitActionOptions) {
+  const sourceDir = path.dirname(entryPoint);
+
+  await esbuild
+    .build({
+      outdir,
+      tsconfig: tsconfigPath,
+      entryPoints: [entryPoint],
+      bundle: true,
+      minify: false,
+      sourcemap: false,
+      treeShaking: true,
+      metafile: true,
+      plugins: [
+        aliasFetch(),
+        await wrapIIFEInStringPlugin(),
+        await createBundledFile({ sourceDir: sourceDir, getLitActionHandler: getLitActionHandler }),
+      ],
+      platform: 'browser',
+      write: false,
+    })
+    .then((result: BuildResult) => {
+      assertOutputFiles(result);
+
+      result.outputFiles.forEach((file) => {
+        const bytes = file.text.length;
+        const mbInDecimal = (bytes / 1_000_000).toFixed(4);
+
+        const filePathArr = file.path.split('/');
+        console.log(
+          `✅ ${filePathArr.slice(filePathArr.length - 2, filePathArr.length - 1)} - ${mbInDecimal} MB`,
+        );
+      });
+    });
+}

packages/libs/lit-action-bundler/src/lib/esbuild/plugins/aliasFetch.ts

@@ -0,0 +1,13 @@
+import type { Plugin } from 'esbuild';
+
+const DENO_FETCH_SHIM = './deno-fetch-shim.js';
+
+export function aliasFetch(): Plugin {
+  return {
+    name: 'alias-fetch',
+    setup(build) {
+      build.onResolve({ filter: /^node-fetch$/ }, () => ({ path: DENO_FETCH_SHIM }));
+      build.onResolve({ filter: /^cross-fetch(\/.*)?$/ }, () => ({ path: DENO_FETCH_SHIM }));
+    },
+  };
+}

packages/libs/lit-action-bundler/src/lib/esbuild/plugins/createBundledFile.ts

@@ -0,0 +1,65 @@
+import type { Plugin } from 'esbuild';
+
+import fs from 'fs';
+import path from 'path';
+
+/** @ts-expect-error No types for this pkg */
+import Hash from 'ipfs-only-hash';
+
+import type { GetLitActionHandlerFunc } from '../types';
+
+import { getMetadataJsonFileContent } from '../templates';
+import { assertOutputFiles, ensureDirectoryExistence } from '../utils';
+
+export async function createBundledFile({
+  sourceDir,
+  getLitActionHandler,
+}: {
+  sourceDir: string;
+  getLitActionHandler: GetLitActionHandlerFunc;
+}): Promise<Plugin> {
+  return {
+    name: `create-bundled-lit-action-file`,
+    setup(build) {
+      build.initialOptions.write = false;
+
+      build.onEnd(async (result) => {
+        if (result.errors.length > 0) {
+          console.error('Build failed with errors:', result.errors);
+          return;
+        }
+
+        assertOutputFiles(result);
+
+        const outputFile = result.outputFiles[0];
+        const content = outputFile.text;
+        const ipfsCid = await Hash.of(content);
+
+        const outputPath = path.dirname(path.resolve(outputFile.path));
+
+        // Calculate the relative path from the output directory to the source directory so we can codegen the wrapper
+        // using the passed `getLitActionHandler()` method
+        const relativePathToSourceDir = path.relative(outputPath, sourceDir);
+
+        // Construct the path to the lit-action.ts file relative to the output directory
+        const sourcePath = path.join(relativePathToSourceDir, `lit-action`);
+
+        // Generate the bundled source code with the computed relative path
+        const bundledSource = getLitActionHandler({ outputPath, ipfsCid, sourcePath });
+
+        // Use the output path to determine the bundled path
+        const bundledPath = path.join(outputPath, `bundled-lit-action.ts`);
+
+        ensureDirectoryExistence(bundledPath);
+        fs.writeFileSync(bundledPath, bundledSource);
+
+        // Write metadata JSON
+        // Use the directory of the generated output file
+        const metadataPath = path.join(outputPath, `lit-action-metadata.json`);
+        const metadataContent = getMetadataJsonFileContent({ ipfsCid });
+        ensureDirectoryExistence(metadataPath);
+        fs.writeFileSync(metadataPath, metadataContent);
+      });
+    },
+  };
+}

packages/libs/lit-action-bundler/src/scripts/deno-fetch-shim.js renamed to packages/libs/lit-action-bundler/src/lib/esbuild/plugins/deno-fetch-shim.js

@@ -0,0 +1,40 @@
+import type { Plugin } from 'esbuild';
+
+import fs from 'fs';
+import path from 'path';
+
+/** @ts-expect-error No types for this pkg */
+import Hash from 'ipfs-only-hash';
+
+import { getLitActionModuleFileContent } from '../templates';
+import { assertOutputFiles, ensureDirectoryExistence } from '../utils';
+
+export async function wrapIIFEInStringPlugin(): Promise<Plugin> {
+  return {
+    name: 'wrap-iife-in-string',
+    setup(build) {
+      build.initialOptions.write = false;
+
+      build.onEnd(async (result) => {
+        if (result.errors.length > 0) {
+          console.error('Build failed with errors:', result.errors);
+          return;
+        }
+
+        assertOutputFiles(result);
+
+        const outputFile = result.outputFiles[0];
+        const content = outputFile.text;
+        const ipfsCid = await Hash.of(content);
+
+        const wrapped = getLitActionModuleFileContent({ content, ipfsCid });
+
+        // Use the path from the generated output file
+        const outputPath = path.resolve(outputFile.path);
+
+        ensureDirectoryExistence(outputPath);
+        fs.writeFileSync(outputPath, wrapped);
+      });
+    },
+  };
+}

packages/libs/lit-action-bundler/src/lib/esbuild/plugins/wrapIIFEInString.ts

@@ -0,0 +1,25 @@
+export function getLitActionModuleFileContent({
+  ipfsCid,
+  content,
+}: {
+  ipfsCid: string;
+  content: string;
+}) {
+  return `/**
+* DO NOT EDIT THIS FILE. IT IS GENERATED ON BUILD.
+* @type {string}
+*/
+const code = ${JSON.stringify(content)};
+module.exports = {
+  "code": code,
+  "ipfsCid": "${ipfsCid}",
+};
+`;
+}
+
+export function getMetadataJsonFileContent({ ipfsCid }: { ipfsCid: string }) {
+  return `{
+  "ipfsCid": "${ipfsCid}"
+}
+`;
+}

packages/libs/lit-action-bundler/src/lib/esbuild/templates.ts

@@ -0,0 +1,16 @@
+export type GetLitActionHandlerFunc = ({
+  outputPath,
+  ipfsCid,
+  sourcePath,
+}: {
+  outputPath: string;
+  ipfsCid: string;
+  sourcePath: string;
+}) => string;
+
+export type BuildLitActionOptions = {
+  entryPoint: string;
+  outdir: string;
+  tsconfigPath: string;
+  getLitActionHandler: GetLitActionHandlerFunc;
+};

packages/libs/lit-action-bundler/src/lib/esbuild/types.ts

@@ -0,0 +1,19 @@
+import type { BuildResult, OutputFile } from 'esbuild';
+
+import fs from 'fs';
+import path from 'path';
+
+export const ensureDirectoryExistence = (filePath: string) => {
+  const dirname = path.dirname(filePath);
+  if (!fs.existsSync(dirname)) {
+    fs.mkdirSync(dirname, { recursive: true });
+  }
+};
+
+export function assertOutputFiles(
+  result: BuildResult,
+): asserts result is BuildResult & { outputFiles: OutputFile[] } {
+  if (!result.outputFiles) {
+    throw new Error('No output files found');
+  }
+}