fix(producer): embed font data at build time instead of runtime require.resolve

The CLI bundle uses tsup to inline @hyperframes/producer, but the deterministicFonts module used require.resolve('@fontsource/*/package.json') at runtime to find woff2 files on disk. When installed via npx, these @fontsource packages don't exist, causing "Cannot find module" errors. Replace runtime filesystem lookups with a build-time generator that reads all @fontsource woff2 files and produces a TypeScript module with base64 data URIs. The generator runs before both producer and CLI builds, making the bundle fully self-contained with zero @fontsource runtime dependencies. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-09-03 04:38:33 +00:00 · 2026-03-26 20:59:11 +00:00
parent e1c1c6fb30
commit 7e059e15f9
5 changed files with 154 additions and 57 deletions
@@ -0,0 +1,141 @@
+/**
+ * Generate embedded font data for deterministic font injection.
+ *
+ * Reads woff2 files from @fontsource/* packages at build time and produces
+ * a TypeScript module with base64 data URIs. This eliminates the runtime
+ * dependency on @fontsource packages, making the CLI self-contained when
+ * bundled via tsup.
+ *
+ * Usage: tsx scripts/generate-font-data.ts
+ */
+
+import { readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+type FontFaceSpec = { weight: string; style?: "normal" | "italic" };
+type CanonicalFontSpec = { packageName: string; faces: FontFaceSpec[] };
+
+// Mirror of CANONICAL_FONTS from deterministicFonts.ts — single source of truth
+const CANONICAL_FONTS: Record<string, CanonicalFontSpec> = {
+  inter: {
+    packageName: "@fontsource/inter",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  montserrat: {
+    packageName: "@fontsource/montserrat",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  outfit: {
+    packageName: "@fontsource/outfit",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  nunito: {
+    packageName: "@fontsource/nunito",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  oswald: {
+    packageName: "@fontsource/oswald",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "league-gothic": {
+    packageName: "@fontsource/league-gothic",
+    faces: [{ weight: "400" }],
+  },
+  "archivo-black": {
+    packageName: "@fontsource/archivo-black",
+    faces: [{ weight: "400" }],
+  },
+  "space-mono": {
+    packageName: "@fontsource/space-mono",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "ibm-plex-mono": {
+    packageName: "@fontsource/ibm-plex-mono",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "jetbrains-mono": {
+    packageName: "@fontsource/jetbrains-mono",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "eb-garamond": {
+    packageName: "@fontsource/eb-garamond",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+};
+
+function packageRoot(packageName: string): string {
+  const packageJsonPath = require.resolve(`${packageName}/package.json`);
+  return dirname(packageJsonPath);
+}
+
+function resolveFontFile(
+  packageName: string,
+  weight: string,
+  style: "normal" | "italic" = "normal",
+): string {
+  const root = packageRoot(packageName);
+  const filesDir = join(root, "files");
+  const slug = packageName.replace("@fontsource/", "");
+  const files = readdirSync(filesDir);
+
+  const exact = `${slug}-latin-${weight}-${style}.woff2`;
+  if (files.includes(exact)) {
+    return join(filesDir, exact);
+  }
+
+  const relaxed = files.find((file) => {
+    return file.endsWith(`-${weight}-${style}.woff2`) && file.includes("-latin-");
+  });
+  if (relaxed) {
+    return join(filesDir, relaxed);
+  }
+
+  throw new Error(`No font asset found for ${packageName} weight=${weight} style=${style}`);
+}
+
+function main() {
+  const entries: Array<{ key: string; dataUri: string }> = [];
+  let totalBytes = 0;
+
+  for (const [, spec] of Object.entries(CANONICAL_FONTS)) {
+    for (const face of spec.faces) {
+      const style = face.style || "normal";
+      const key = `${spec.packageName}:${face.weight}:${style}`;
+      const fontPath = resolveFontFile(spec.packageName, face.weight, style);
+      const content = readFileSync(fontPath);
+      totalBytes += content.length;
+      const dataUri = `data:font/woff2;base64,${content.toString("base64")}`;
+      entries.push({ key, dataUri });
+    }
+  }
+
+  const lines = [
+    "/**",
+    " * AUTO-GENERATED — do not edit manually.",
+    ` * Generated by: scripts/generate-font-data.ts`,
+    ` * ${entries.length} font faces, ${Math.round(totalBytes / 1024)}KB raw woff2`,
+    " */",
+    "",
+    "export const EMBEDDED_FONT_DATA: ReadonlyMap<string, string> = new Map([",
+  ];
+
+  for (const entry of entries) {
+    lines.push(`  ["${entry.key}", "${entry.dataUri}"],`);
+  }
+
+  lines.push("]);");
+  lines.push("");
+
+  const outputPath = resolve(__dirname, "../src/services/fontData.generated.ts");
+  writeFileSync(outputPath, lines.join("\n"), "utf8");
+  console.log(
+    `[generate-font-data] Wrote ${entries.length} font faces (${Math.round(totalBytes / 1024)}KB) → ${outputPath}`,
+  );
+}
+
+main();