@timbal-ai/timbal-react 0.5.5 → 0.6.1

package/scripts/dev-linked.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+/**
+ * Run `bun run build:watch` in timbal-react, then a consumer dev server.
+ *
+ * Usage:
+ *   node scripts/dev-linked.mjs [consumerDir] [devCommand ...]
+ *
+ * Examples:
+ *   node scripts/dev-linked.mjs vite
+ *   node scripts/dev-linked.mjs examples/app-kit vite
+ */
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const timbalReactRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "..",
+);
+
+const args = process.argv.slice(2);
+let consumerDir = process.cwd();
+let devArgs = args;
+
+if (args[0]) {
+  const candidate = path.resolve(timbalReactRoot, args[0]);
+  if (existsSync(path.join(candidate, "package.json"))) {
+    consumerDir = candidate;
+    devArgs = args.slice(1);
+  }
+}
+
+const devCmd = devArgs[0] ?? "vite";
+const devCmdArgs = devArgs.slice(1);
+
+function run(cmd, args, opts) {
+  return spawn(cmd, args, {
+    cwd: opts.cwd,
+    stdio: "inherit",
+    shell: process.platform === "win32",
+    env: process.env,
+  });
+}
+
+console.log("[timbal-react] building + watching dist…");
+const watch = run("bun", ["run", "build:watch"], { cwd: timbalReactRoot });
+
+console.log(`[consumer] (${consumerDir}) ${devCmd} ${devCmdArgs.join(" ")}`.trim());
+const app = run(devCmd, devCmdArgs, { cwd: consumerDir });
+
+let exiting = false;
+function shutdown(code = 0) {
+  if (exiting) return;
+  exiting = true;
+  watch.kill("SIGTERM");
+  app.kill("SIGTERM");
+  process.exit(code);
+}
+
+process.on("SIGINT", () => shutdown(0));
+process.on("SIGTERM", () => shutdown(0));
+watch.on("exit", (code) => {
+  if (code) shutdown(code);
+});
+app.on("exit", (code) => shutdown(code ?? 0));

package/vite/local-dev.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from "vite";
+
+/** Use in Vite apps that link `@timbal-ai/timbal-react` via `file:../timbal-react`. */
+export function timbalReactLocalDev(): Plugin;

package/vite/local-dev.mjs

@@ -0,0 +1,115 @@
+/**
+ * Vite plugin for apps that depend on `@timbal-ai/timbal-react` via `file:../timbal-react`.
+ *
+ * - Skips pre-bundling so `dist/` updates are not stuck in `node_modules/.vite/deps`
+ * - Watches the linked package `dist/` and triggers a full reload when it changes
+ *
+ * IMPORTANT: this is a no-op for normal npm installs. Excluding the package from
+ * `optimizeDeps` only makes sense when it is `file:`-linked (a symlink in
+ * `node_modules`). For published installs Vite must pre-bundle the package so its
+ * CJS-only transitive deps (e.g. `use-sync-external-store/shim` reached via
+ * `radix-ui` -> `@radix-ui/react-use-is-hydrated`) are converted to ESM instead of
+ * leaking to the browser.
+ */
+import { createRequire } from "node:module";
+import fs from "node:fs";
+import path from "node:path";
+
+const TIMBAL_REACT_EXPORTS = [
+  "@timbal-ai/timbal-react",
+  "@timbal-ai/timbal-react/chat",
+  "@timbal-ai/timbal-react/studio",
+  "@timbal-ai/timbal-react/ui",
+  "@timbal-ai/timbal-react/app",
+];
+
+/**
+ * CJS-only transitive deps that must be pre-bundled even when the package itself
+ * is excluded, so their `useSyncExternalStore` named imports resolve as ESM.
+ */
+const CJS_INTEROP_DEPS = [
+  "radix-ui",
+  "@radix-ui/react-use-is-hydrated",
+  "use-sync-external-store/shim",
+  "use-sync-external-store/shim/with-selector",
+  "zustand",
+];
+
+function resolveLinkedPackageRoot() {
+  try {
+    const require = createRequire(import.meta.url);
+    const pkgJson = require.resolve("@timbal-ai/timbal-react/package.json");
+    return path.dirname(pkgJson);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Only treat the install as "linked" when the `node_modules` entry is a symlink,
+ * i.e. installed via `file:../timbal-react` (or a workspace link). Normal npm
+ * installs are real directories and must be left to Vite's pre-bundler.
+ *
+ * @param {string} [root] consuming project root
+ */
+function isLinkedInstall(root) {
+  const base = root || process.cwd();
+  const entry = path.join(
+    base,
+    "node_modules",
+    "@timbal-ai",
+    "timbal-react",
+  );
+  try {
+    return fs.lstatSync(entry).isSymbolicLink();
+  } catch {
+    return false;
+  }
+}
+
+/** @returns {import('vite').Plugin} */
+export function timbalReactLocalDev() {
+  /** @type {string | null} */
+  let distDir = null;
+
+  return {
+    name: "timbal-react-local-dev",
+    enforce: "pre",
+    config(config) {
+      if (!isLinkedInstall(config.root)) return {};
+
+      const pkgRoot = resolveLinkedPackageRoot();
+      if (!pkgRoot) return {};
+
+      distDir = path.join(pkgRoot, "dist");
+      const distGlob = `${distDir.replace(/\\/g, "/")}/**`;
+
+      return {
+        optimizeDeps: {
+          exclude: TIMBAL_REACT_EXPORTS,
+          include: CJS_INTEROP_DEPS,
+        },
+        server: {
+          watch: {
+            ignored: ["**/.git/**", "**/node_modules/**", `!${distGlob}`],
+          },
+        },
+      };
+    },
+    handleHotUpdate({ file, server }) {
+      if (!distDir || !file.startsWith(distDir)) return;
+
+      for (const mod of server.moduleGraph.idToModuleMap.values()) {
+        if (
+          mod.id?.includes("@timbal-ai/timbal-react") ||
+          mod.id?.includes(`${path.sep}timbal-react${path.sep}dist`)
+        ) {
+          server.moduleGraph.invalidateModule(mod);
+        }
+      }
+
+      server.ws.send({ type: "full-reload" });
+      return [];
+    },
+  };
+}