feat(mcp-server): canvas shell bundled from the web app's canvas with esbuild

The shell (packages/mcp-server/shell) renders DrawioFrame inside the shared providers without the chat: its config comes from window.__MCP_CONFIG__, the four dictionaries ship in the bundle, the theme is kept under an mcp: localStorage key, and system fonts stand in for the web fonts. scripts/build-shell.mjs bundles it into dist/shell with the root's esbuild and Tailwind; check-package caps shell.js at 1.5 MB and shell.css at 300 KB.
2026-10-12 20:49:53 +08:00 · 2026-10-11 20:56:07 +09:00
parent 7e2edbf8a1
commit 77c6a2d807
19 changed files with 585 additions and 1 deletions
@@ -0,0 +1,80 @@
+// Build the canvas shell (shell/, the web app's canvas without the chat)
+// into dist/shell: shell.js with esbuild, shell.css with Tailwind, and the
+// page template. Needs the repository checked out with its root
+// devDependencies installed (esbuild, Tailwind, React and the shared
+// components come from there), like copy-assets.mjs needs ../../docs.
+import { cpSync, mkdirSync, readFileSync, writeFileSync } from "node:fs"
+import { createRequire } from "node:module"
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const pkg = join(dirname(fileURLToPath(import.meta.url)), "..")
+const root = join(pkg, "../..")
+const shell = join(pkg, "shell")
+const out = join(pkg, "dist/shell")
+
+// The root's copies: the shell's React must be the one the shared
+// components import, and the MCP core's pako and saxes should not be
+// bundled twice (packages/mcp-server has its own node_modules)
+const rootRequire = createRequire(join(root, "package.json"))
+const rootPackage = (name) =>
+    dirname(rootRequire.resolve(`${name}/package.json`))
+const { build } = await import(rootRequire.resolve("esbuild"))
+const postcss = (await import(rootRequire.resolve("postcss"))).default
+const tailwindcss = (await import(rootRequire.resolve("@tailwindcss/postcss")))
+    .default
+
+mkdirSync(out, { recursive: true })
+
+const result = await build({
+    entryPoints: [join(shell, "main.tsx")],
+    outfile: join(out, "shell.js"),
+    bundle: true,
+    minify: true,
+    format: "esm",
+    target: "es2022",
+    platform: "browser",
+    jsx: "automatic",
+    legalComments: "none",
+    metafile: true,
+    absWorkingDir: root,
+    alias: {
+        "@": root,
+        pako: rootPackage("pako"),
+        saxes: rootPackage("saxes"),
+    },
+    define: {
+        "process.env.NODE_ENV": '"production"',
+        // The shell has no base path and takes its draw.io from the config
+        // the server writes into the page, not from the web app's build
+        // settings
+        "process.env.NEXT_PUBLIC_BASE_PATH": '""',
+        "process.env.NEXT_PUBLIC_DRAWIO_BASE_URL": '""',
+    },
+})
+const js = readFileSync(join(out, "shell.js"), "utf8")
+// A reference that the defines above missed would throw in the browser
+// ("process is not defined")
+const leftover = js.match(/process\.env\.[A-Z_]+/)
+if (leftover) {
+    throw new Error(`shell.js still reads ${leftover[0]}; define it above`)
+}
+
+const cssFile = join(shell, "shell.css")
+const css = await postcss([
+    // Tailwind scans the shell directory on its own; shell.css names the
+    // shared component directories with @source
+    tailwindcss({ base: shell, optimize: { minify: true } }),
+]).process(readFileSync(cssFile, "utf8"), {
+    from: cssFile,
+    to: join(out, "shell.css"),
+})
+writeFileSync(join(out, "shell.css"), css.css)
+
+cpSync(join(shell, "index.html"), join(out, "index.html"))
+
+const kb = (n) => `${(n / 1024).toFixed(0)} KB`
+const bundled = Object.values(result.metafile.outputs).find((o) => o.entryPoint)
+console.log(
+    `shell: shell.js ${kb(bundled.bytes)}, shell.css ${kb(Buffer.byteLength(css.css))} -> ${out}`,
+)