build w/ bun to avoid internal deps hell

build.bun.ts

@@ -0,0 +1,27 @@
+#!/usr/bin/env bun
+import { $ } from "bun";
+
+// Run TypeScript compiler for type declarations
+await $`tsc`;
+
+const isDevelopment = Bun.env.NODE_ENV === "development";
+
+// Build all JavaScript/TypeScript files
+function buildJs(entrypoint: string, opts: Record<string, string> = {}) {
+    return Bun.build({
+        entrypoints: [entrypoint],
+        outdir: "dist",
+        target: "browser",
+        minify: !isDevelopment,
+        ...(isDevelopment ? {
+            sourcemap: "inline",
+        } : {}),
+        ...opts
+    })
+}
+
+await Promise.all([
+  buildJs("src/app.ts", { outdir: "dist/src" }),
+  buildJs("src/app-bridge.ts", { outdir: "dist/src" }),
+  buildJs("src/react/index.tsx", { outdir: "dist/src/react" }),
+])

build.esbuild.ts

@@ -0,0 +1,30 @@
+#!/usr/bin/env tsx
+import { execSync } from "child_process";
+import * as esbuild from "esbuild";
+
+// Run TypeScript compiler for type declarations
+execSync("tsc", { stdio: "inherit" });
+
+const isDevelopment = process.env.NODE_ENV === "development";
+
+// Build all JavaScript/TypeScript files
+async function buildJs(
+  entrypoint: string,
+  opts: { outdir?: string; target?: "browser" | "node" } = {},
+) {
+  return esbuild.build({
+    entryPoints: [entrypoint],
+    outdir: opts.outdir ?? "dist",
+    platform: opts.target === "node" ? "node" : "browser",
+    format: "esm",
+    bundle: true,
+    minify: !isDevelopment,
+    sourcemap: isDevelopment ? "inline" : false,
+  });
+}
+
+await Promise.all([
+  buildJs("src/app.ts", { outdir: "dist/src" }),
+  buildJs("src/app-bridge.ts", { outdir: "dist/src" }),
+  buildJs("src/react/index.tsx", { outdir: "dist/src/react" }),
+]);

build.ts

@@ -1,70 +0,0 @@
-#!/usr/bin/env tsx
-import { execSync } from "child_process";
-import * as esbuild from "esbuild";
-import { readFile, writeFile } from "fs/promises";
-
-// Run TypeScript compiler for type declarations
-execSync("tsc", { stdio: "inherit" });
-
-const isDevelopment = process.env.NODE_ENV === "development";
-
-// Build all JavaScript/TypeScript files
-async function buildJs(
-  entrypoint: string,
-  opts: { outdir?: string; target?: "browser" | "node" } = {},
-) {
-  return esbuild.build({
-    entryPoints: [entrypoint],
-    outdir: opts.outdir ?? "dist",
-    platform: opts.target === "node" ? "node" : "browser",
-    format: "esm",
-    bundle: true,
-    minify: !isDevelopment,
-    sourcemap: isDevelopment ? "inline" : false,
-  });
-}
-
-await Promise.all([
-  buildJs("src/app.ts", { outdir: "dist/src" }),
-  buildJs("src/app-bridge.ts", { outdir: "dist/src" }),
-  buildJs("src/react/index.tsx", { outdir: "dist/src/react" }),
-  // buildJs("examples/example-ui-react.tsx", { outdir: "dist/examples" }),
-  // buildJs("examples/example-ui.ts", { outdir: "dist/examples" }),
-  // buildJs("examples/example-server.ts", {
-  //   target: "node",
-  //   outdir: "dist/examples",
-  // }),
-]);
-
-// async function inlineHtml(htmlFilePath: string, outputFilePath: string) {
-//   let html = await readFile(htmlFilePath, "utf-8");
-//   // Find all src sources, then fetch them, then replace them
-//   const files = html.matchAll(
-//     /<script src="((?:\.\/)?dist\/.*?\.js)"><\/script>/g,
-//   );
-//   const fileContent = Object.fromEntries(
-//     await Promise.all(
-//       Array.from(files, async ([, filename]) => {
-//         const scriptContent = await readFile(filename, "utf-8");
-//         return [filename, scriptContent];
-//       }),
-//     ),
-//   );
-//   html = html.replace(
-//     /<script src="((?:\.\/)?dist\/.*?\.js)"><\/script>/g,
-//     (_, filename) => {
-//       let scriptContent = fileContent[filename];
-//       // Escape </script> to prevent premature script tag closing
-//       // This is the standard way to inline scripts safely
-//       scriptContent = scriptContent.replace(/<\/script>/gi, "<\\/script>");
-//       return `<script>${scriptContent}</script>`;
-//     },
-//   );
-//   await writeFile(outputFilePath, html);
-// }
-
-// await inlineHtml("examples/example-ui.html", "dist/examples/example-ui.html");
-// await inlineHtml(
-//   "examples/example-ui-react.html",
-//   "dist/examples/example-ui-react.html",
-// );

package.json

@@ -28,7 +28,7 @@
     "start:sandbox-proxy": "python3 sandbox_proxy.py",
     "start": "npm run build && npm run start:example-server",
     "start:dev": "NODE_ENV=development npm start",
-    "build": "tsc && tsx build.ts",
+    "build": "bun build.bun.ts",
     "prepare": "npm run build",
     "prettier:base-cmd": "prettier -u --ignore-path ./.gitignore --ignore-path ./.prettierignore",
     "prettier": "yarn prettier:base-cmd \"$(pwd)/**/*.{js,jsx,ts,tsx,mjs,json,md,yml,yaml}\" --check",
@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.20.1",
+    "bun": "^1.3.2",
     "esbuild": "~0.19.10",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",