fix: embed UI assets into JS bundle at build time

Replaces runtime fs.readFileSync with build-time embedding via
scripts/embed-ui.js. The UI CSS and JS are now string constants
in the bundle, making it work in serverless environments (Vercel,
Lambda, Cloudflare Workers) where filesystem access is unavailable.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: sayefdeen

.gitignore

@@ -11,4 +11,5 @@ coverage
 *.log
 .next
 .trpc-studio.json
+packages/server/src/ui-assets.ts
 plan.md

examples/nextjs/next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    serverComponentsExternalPackages: ["@srawad/trpc-studio"],
-  },
-};
+const nextConfig = {};
 
 module.exports = nextConfig;

packages/server/package.json

@@ -28,7 +28,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "node scripts/embed-ui.js && tsup",
     "dev": "tsup --watch",
     "lint": "eslint src --ext .ts",
     "lint:fix": "eslint src --ext .ts --fix",

packages/server/scripts/embed-ui.js

@@ -0,0 +1,33 @@
+// This script runs after the UI build and before the server build.
+// It reads the built UI assets and writes them as a TypeScript module
+// so they get bundled directly into the server JS — no fs.readFileSync needed.
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const uiDir = path.join(__dirname, "..", "dist", "ui", "assets");
+const outFile = path.join(__dirname, "..", "src", "ui-assets.ts");
+
+let jsContent = "";
+let cssContent = "";
+
+try {
+  jsContent = fs.readFileSync(path.join(uiDir, "index.js"), "utf-8");
+  cssContent = fs.readFileSync(path.join(uiDir, "index.css"), "utf-8");
+} catch {
+  console.error("Warning: UI assets not found at", uiDir);
+  console.error("Make sure @trpc-studio/ui is built first.");
+}
+
+// Escape backticks and ${} in the content for template literals
+const escapeTemplate = (s) => s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+
+const output = `// AUTO-GENERATED — do not edit. Run "node scripts/embed-ui.js" to regenerate.
+export const UI_JS = \`${escapeTemplate(jsContent)}\`;
+export const UI_CSS = \`${escapeTemplate(cssContent)}\`;
+`;
+
+fs.writeFileSync(outFile, output, "utf-8");
+console.log(`Embedded UI assets into ${outFile} (JS: ${jsContent.length} bytes, CSS: ${cssContent.length} bytes)`);

packages/server/src/render.ts

@@ -1,8 +1,5 @@
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
 import { introspectRouter } from "./introspect";
+import { UI_CSS, UI_JS } from "./ui-assets";
 
 import type { JsonSchema } from "@trpc-studio/core";
 
@@ -30,51 +27,6 @@ function safeInlineJson(json: string): string {
   return json.replace(/<\//g, "<\\/");
 }
 
-// Load UI assets — try multiple resolution strategies
-let cachedJs: string | null = null;
-let cachedCss: string | null = null;
-let assetsLoaded = false;
-
-function loadAssets(): void {
-  if (assetsLoaded) return;
-  assetsLoaded = true;
-
-  const tryPaths: string[] = [];
-
-  // Strategy 1: __dirname (CJS, standard Node.js)
-  if (typeof __dirname !== "undefined") {
-    tryPaths.push(path.join(__dirname, "ui", "assets"));
-  }
-
-  // Strategy 2: import.meta.url (ESM)
-  try {
-    const esmDir = path.dirname(fileURLToPath(import.meta.url));
-    tryPaths.push(path.join(esmDir, "ui", "assets"));
-  } catch {
-    // import.meta.url not available
-  }
-
-  // Strategy 3: resolve from the package itself
-  try {
-    const pkgDir = path.dirname(require.resolve("@srawad/trpc-studio/package.json"));
-    tryPaths.push(path.join(pkgDir, "dist", "ui", "assets"));
-  } catch {
-    // package not resolvable this way
-  }
-
-  for (const dir of tryPaths) {
-    try {
-      const js = fs.readFileSync(path.join(dir, "index.js"), "utf-8");
-      const css = fs.readFileSync(path.join(dir, "index.css"), "utf-8");
-      cachedJs = js;
-      cachedCss = css;
-      return;
-    } catch {
-      // try next path
-    }
-  }
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function renderTrpcStudio(router: any, options: RenderOptions): string {
   const manifest = introspectRouter(router);
@@ -108,27 +60,24 @@ export function renderTrpcStudio(router: any, options: RenderOptions): string {
   const safeOptions = safeInlineJson(optionsJson);
   const scriptTag = `<script>window.__TRPC_STUDIO_MANIFEST__=${safeManifest};window.__TRPC_STUDIO_OPTIONS__=${safeOptions};</script>`;
 
-  // Load and cache UI assets
-  loadAssets();
-
-  if (cachedJs) {
+  if (UI_JS) {
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>${title}</title>
-  ${cachedCss ? `<style>${cachedCss}</style>` : ""}
+  ${UI_CSS ? `<style>${UI_CSS}</style>` : ""}
   ${scriptTag}
 </head>
 <body>
   <div id="root"></div>
-  <script type="module">${cachedJs}</script>
+  <script type="module">${UI_JS}</script>
 </body>
 </html>`;
   }
 
-  // Fallback if UI assets not found
+  // Fallback if UI assets were not embedded
   return `<!DOCTYPE html>
 <html lang="en">
 <head>