mason: ship precompiled TUI loader

Co-authored-by: Alfonso [Magic Context] <288211368+alfonso-magic-context@users.noreply.github.com>

Author: ualtinok

packages/plugin/.gitignore

@@ -0,0 +1 @@
+src/tui-compiled/

packages/plugin/package.json

@@ -25,19 +25,21 @@
   "files": [
     "dist",
     "src/tui",
+    "src/tui-compiled",
     "src/shared",
     "README.md"
   ],
   "scripts": {
     "build": "bun build src/index.ts --outdir dist --target node --format esm --external @opencode-ai/plugin --external @huggingface/transformers --external onnxruntime-web --external bun:sqlite --external node:sqlite && tsc --emitDeclarationOnly",
+    "build:tui": "bun scripts/build-tui.ts",
     "typecheck": "tsc --noEmit && tsc -p tsconfig.scripts.json",
     "test": "bun test",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",
     "format": "biome format --write .",
     "format:check": "biome format .",
     "clean": "rm -rf dist",
-    "prepublishOnly": "bun run build"
+    "prepublishOnly": "bun run build && bun run build:tui"
   },
   "dependencies": {
     "@huggingface/transformers": "^4.1.0",
@@ -67,7 +69,7 @@
     },
     "./tui": {
       "types": "./src/tui/index.tsx",
-      "import": "./src/tui/index.tsx"
+      "import": "./src/tui/entry.mjs"
     }
   },
   "oc-plugin": [

packages/plugin/scripts/build-tui.ts

@@ -0,0 +1,151 @@
+import { copyFile, mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { basename, dirname, join, relative } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const pluginRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
+const sourceRoot = join(pluginRoot, "src/tui");
+const outputRoot = join(pluginRoot, "src/tui-compiled");
+const runtimeSpecifiers = new Set([
+    "@opentui/core",
+    "@opentui/core/testing",
+    "@opentui/solid",
+    "@opentui/solid/components",
+    "@opentui/solid/jsx-runtime",
+    "@opentui/solid/jsx-dev-runtime",
+    "solid-js",
+    "solid-js/store",
+]);
+
+type TransformSolidSource = (
+    code: string,
+    options: {
+        filename: string;
+        moduleName: string;
+        resolvePath: (specifier: string) => string | null;
+    },
+) => Promise<string>;
+
+type SolidTransformModule = {
+    transformSolidSource?: TransformSolidSource;
+};
+
+function runtimeModuleId(specifier: string): string {
+    return `opentui:runtime-module:${encodeURIComponent(specifier)}`;
+}
+
+function asTransformSolidSource(mod: SolidTransformModule, from: string): TransformSolidSource {
+    if (typeof mod.transformSolidSource !== "function") {
+        throw new Error(`@opentui/solid transform loaded from ${from} without transformSolidSource`);
+    }
+    return mod.transformSolidSource;
+}
+
+async function importTransformModule(specifier: string): Promise<SolidTransformModule> {
+    return (await import(specifier)) as SolidTransformModule;
+}
+
+async function resolveSolidTransformPath(): Promise<string> {
+    const packageJsonSpecifier = "@opentui/solid/package.json";
+    const errors: string[] = [];
+
+    try {
+        const packageJsonUrl = import.meta.resolve(packageJsonSpecifier);
+        return join(dirname(fileURLToPath(packageJsonUrl)), "scripts/solid-transform.js");
+    } catch (error) {
+        errors.push(`import.meta.resolve: ${error instanceof Error ? error.message : String(error)}`);
+    }
+
+    try {
+        const require = createRequire(import.meta.url);
+        return join(dirname(require.resolve(packageJsonSpecifier)), "scripts/solid-transform.js");
+    } catch (error) {
+        errors.push(`require.resolve: ${error instanceof Error ? error.message : String(error)}`);
+    }
+
+    throw new Error(`Unable to resolve @opentui/solid transform (${errors.join("; ")})`);
+}
+
+async function loadTransformSolidSource(): Promise<TransformSolidSource> {
+    const bareTransformSpecifier = "@opentui/solid/scripts/solid-transform.js";
+
+    try {
+        return asTransformSolidSource(
+            await importTransformModule(bareTransformSpecifier),
+            bareTransformSpecifier,
+        );
+    } catch {
+        const transformPath = await resolveSolidTransformPath();
+        return asTransformSolidSource(
+            await importTransformModule(pathToFileURL(transformPath).href),
+            transformPath,
+        );
+    }
+}
+
+function isShippedSourceFile(filePath: string): boolean {
+    if (/\.test\.tsx?$/.test(basename(filePath))) return false;
+    return filePath.endsWith(".tsx") || filePath.endsWith(".ts");
+}
+
+async function listSourceFiles(dir: string): Promise<string[]> {
+    const entries = await readdir(dir, { withFileTypes: true });
+    entries.sort((a, b) => a.name.localeCompare(b.name));
+
+    const files: string[] = [];
+    for (const entry of entries) {
+        const entryPath = join(dir, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...(await listSourceFiles(entryPath)));
+        } else if (entry.isFile() && isShippedSourceFile(entryPath)) {
+            files.push(entryPath);
+        }
+    }
+    return files;
+}
+
+async function copyPlainTypeScript(sourceFile: string, outputFile: string): Promise<void> {
+    await mkdir(dirname(outputFile), { recursive: true });
+    await copyFile(sourceFile, outputFile);
+}
+
+async function compileTsx(
+    transformSolidSource: TransformSolidSource,
+    sourceFile: string,
+    outputFile: string,
+): Promise<void> {
+    const code = await readFile(sourceFile, "utf8");
+    const compiled = await transformSolidSource(code, {
+        filename: sourceFile,
+        moduleName: runtimeModuleId("@opentui/solid"),
+        resolvePath: (specifier: string) =>
+            runtimeSpecifiers.has(specifier) ? runtimeModuleId(specifier) : null,
+    });
+
+    await mkdir(dirname(outputFile), { recursive: true });
+    await writeFile(outputFile, compiled);
+}
+
+const transformSolidSource = await loadTransformSolidSource();
+const files = await listSourceFiles(sourceRoot);
+
+await rm(outputRoot, { recursive: true, force: true });
+
+for (const sourceFile of files) {
+    const relativePath = relative(sourceRoot, sourceFile);
+    const outputFile = join(outputRoot, relativePath);
+
+    if (sourceFile.endsWith(".tsx")) {
+        // OpenTUI skips the Solid compile-time transform for packages loaded from
+        // node_modules. Without this precompiled copy, JSX children such as
+        // signal-derived counts are evaluated once during element creation and
+        // the sidebar freezes on its first paint. The virtual ids are required so
+        // the compiled package binds the host process's single OpenTUI/Solid
+        // runtime instead of loading a second copy from the plugin package.
+        await compileTsx(transformSolidSource, sourceFile, outputFile);
+    } else {
+        await copyPlainTypeScript(sourceFile, outputFile);
+    }
+}
+
+console.log(`build-tui: wrote ${files.length} file(s) to ${relative(pluginRoot, outputRoot)}`);

packages/plugin/scripts/smoke-tui-import.ts

@@ -1,19 +1,16 @@
-// Import smoke test for the raw-TSX TUI entry (`./tui` export).
+// Import smoke test for the bare-Bun TUI loader fallback.
 //
-// The TUI entry (src/tui/index.tsx) uses `/** @jsxImportSource @opentui/solid */`,
-// so loading it requires @opentui/solid + solid-js to resolve from the plugin
-// package itself. When those weren't declared as deps, OpenCode 1.17.10's
-// OpenTUI 0.4.2 bump surfaced an immediate load failure:
-//   Cannot find module '@opentui/solid/jsx-dev-runtime'
-// `bun test` doesn't catch this because no suite imports the TSX entry. This
-// script imports it exactly like OpenCode loads the `./tui` export, so a missing
-// or version-mismatched OpenTUI/Solid runtime fails the smoke instead of shipping
-// a TUI that won't load. Run: bun packages/plugin/scripts/smoke-tui-import.ts
+// The published `./tui` export points at src/tui/entry.mjs. When the host does
+// not provide OpenTUI's virtual runtime-module registry, the loader falls back
+// to src/tui/index.tsx, which still needs @opentui/solid + solid-js to resolve
+// from the plugin package itself. `bun test` does not import that entry, so this
+// catches missing or version-mismatched OpenTUI/Solid runtime deps before a TUI
+// that cannot load is shipped. Run: bun packages/plugin/scripts/smoke-tui-import.ts
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const here = dirname(fileURLToPath(import.meta.url));
-const entry = join(here, "../src/tui/index.tsx");
+const entry = join(here, "../src/tui/entry.mjs");
 
 let failures = 0;
 function check(name: string, cond: boolean, detail?: string): void {
@@ -26,18 +23,18 @@ function check(name: string, cond: boolean, detail?: string): void {
 }
 
 try {
-    // Resolving the OpenTUI JSX runtime the TSX entry compiles against is the
-    // exact thing that broke; importing the entry exercises it end to end.
+    // With no virtual runtime-module registry installed, the loader must catch the
+    // virtual import failure and load the raw TSX fallback end to end.
     const mod = (await import(entry)) as { default?: { id?: string; tui?: unknown } };
-    check("TUI entry imports without a missing-runtime error", true);
+    check("TUI loader imports through the raw-TSX fallback", true);
     check(
         "exports the { id, tui } plugin shape",
         mod.default?.id === "opencode-magic-context" && typeof mod.default?.tui === "function",
         `got id=${mod.default?.id} tui=${typeof mod.default?.tui}`,
     );
 } catch (error) {
     check(
-        "TUI entry imports without a missing-runtime error",
+        "TUI loader imports through the raw-TSX fallback",
         false,
         error instanceof Error ? error.message : String(error),
     );