@rainbow-robotics/plugin-ui 1.10.1-dev.1 → 1.10.2-dev.0

package/src/viteHost.ts

@@ -1,309 +1,309 @@
-/**
- * Vite plugins for a HOST app previewing locally-developed plugins.
- * Host-agnostic — paths are parameters.
- *
- *   import {
- *     pluginPreviewRuntimePlugin,
- *     pluginPreviewAssetsPlugin,
- *     isPluginPreviewMode,
- *   } from "@rainbow-robotics/plugin-ui/vite-host";
- *
- * A built plugin's bare imports (react, rb-components, plugin-ui/*) resolve via
- * the import map this file injects, to the host's already-loaded instances.
- * See ./host.tsx.
- */
-import type { Plugin } from "vite";
-import { createReadStream, existsSync, readFileSync, statSync } from "node:fs";
-import { createRequire } from "node:module";
-import { extname, resolve } from "node:path";
-
-const require = createRequire(import.meta.url);
-
-export const defaultPreviewAssetPrefixes = [
-  "/imgs/",
-  "/fonts/",
-  "/models/",
-  "/sounds/",
-  "/data/",
-];
-
-export const contentTypeByExt: Record<string, string> = {
-  ".avif": "image/avif",
-  ".css": "text/css; charset=utf-8",
-  ".gif": "image/gif",
-  ".glb": "model/gltf-binary",
-  ".jpeg": "image/jpeg",
-  ".jpg": "image/jpeg",
-  ".js": "text/javascript; charset=utf-8",
-  ".json": "application/json; charset=utf-8",
-  ".mp3": "audio/mpeg",
-  ".png": "image/png",
-  ".svg": "image/svg+xml",
-  ".wasm": "application/wasm",
-  ".webp": "image/webp",
-  ".woff": "font/woff",
-  ".woff2": "font/woff2",
-};
-
-export const isPluginPreviewMode = (mode: string) => mode === "plugin-preview";
-
-/* -------------------------------------------------------------------------- */
-/* Shared-runtime import map (plugins reuse the host's loaded instances)       */
-/* -------------------------------------------------------------------------- */
-
-const SHARED_BASE = "/plugin-shared";
-
-// Each shared specifier → the named exports its shim re-exports from
-// window.__RB_SHARED__[specifier] (set by the host, e.g. nexus/src/pluginShared).
-//
-// `names`: hardcoded list (small, stable modules).
-// `parseNamesFrom`: parse the export names out of a source file's text — used
-// for react.tsx, which re-exports the whole rb-components barrel (100+ names).
-// We text-parse rather than import it: the barrel is .ts source, which plain
-// Node can't execute.
-const SHARED_MODULES: Record<
-  string,
-  {
-    file: string;
-    names?: string[];
-    parseNamesFrom?: { specifier: string; extraNames?: string[] };
-    hasDefault?: boolean;
-  }
-> = {
-  react: {
-    file: "react",
-    hasDefault: true,
-    names: [
-      "Children", "Component", "Fragment", "Profiler", "PureComponent",
-      "StrictMode", "Suspense", "cloneElement", "createContext",
-      "createElement", "createRef", "forwardRef", "isValidElement", "lazy",
-      "memo", "startTransition", "useCallback", "useContext", "useDebugValue",
-      "useDeferredValue", "useEffect", "useId", "useImperativeHandle",
-      "useInsertionEffect", "useLayoutEffect", "useMemo", "useReducer",
-      "useRef", "useState", "useSyncExternalStore", "useTransition", "version",
-    ],
-  },
-  "react/jsx-runtime": {
-    file: "react_jsx-runtime",
-    names: ["Fragment", "jsx", "jsxs"],
-  },
-  "react/jsx-dev-runtime": {
-    file: "react_jsx-dev-runtime",
-    names: ["Fragment", "jsxDEV"],
-  },
-  "react-dom": {
-    file: "react-dom",
-    hasDefault: true,
-    names: [
-      "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
-      "createPortal",
-      "createRoot",
-      "findDOMNode",
-      "flushSync",
-      "hydrate",
-      "hydrateRoot",
-      "render",
-      "unmountComponentAtNode",
-      "unstable_batchedUpdates",
-      "unstable_renderSubtreeIntoContainer",
-      "version",
-    ],
-  },
-  "react-dom/client": {
-    file: "react-dom_client",
-    names: ["createRoot", "hydrateRoot"],
-  },
-  "@rainbow-robotics/plugin-ui/react": {
-    file: "plugin-ui_react",
-    // react.tsx re-exports the full rb-components barrel (export *) plus the sdk
-    // hooks.
-    parseNamesFrom: {
-      specifier: "@repo/rb-components/new_components",
-      extraNames: ["useRb", "useRbFormData", "useRbSave"],
-    },
-  },
-  "@rainbow-robotics/plugin-ui/sdk": {
-    file: "plugin-ui_sdk",
-    names: ["RbContext", "useRb", "useRbFormData", "useRbSave"],
-  },
-  "@rainbow-robotics/plugin-ui/host-ui": {
-    file: "plugin-ui_host-ui",
-    names: [
-      "alert",
-      "confirm",
-      "getHostServices",
-      "prompt",
-      "setHostServices",
-      "toast",
-    ],
-  },
-  "@rainbow-robotics/plugin-ui/ws": {
-    file: "plugin-ui_ws",
-    names: ["RbWs", "createLazyRbSdk"],
-  },
-};
-
-// Parses `export { a, b as c, ... }` value names out of a source file's text
-// (skips `export type { ... }` blocks and individual `type X` entries within
-// a mixed block — types don't exist as runtime module properties). Static
-// text parsing, not module execution, so it works for .ts source files with
-// no loader and has no ESM-resolution footguns.
-function parseExportedValueNames(source: string): string[] {
-  const names = new Set<string>();
-  const blockRe = /export\s+(type\s+)?\{([^}]*)\}/g;
-  let match: RegExpExecArray | null;
-  while ((match = blockRe.exec(source))) {
-    if (match[1]) continue; // whole `export type { ... }` block
-    for (const rawEntry of match[2].split(",")) {
-      const entry = rawEntry.trim();
-      if (!entry || entry.startsWith("type ")) continue;
-      const asMatch = entry.match(/^\S+\s+as\s+(\S+)$/);
-      names.add(asMatch ? asMatch[1] : entry);
-    }
-  }
-  return [...names];
-}
-
-const nameCache = new Map<string, string[]>();
-
-function resolveNames(spec: string): string[] {
-  const mod = SHARED_MODULES[spec];
-  if (mod.names) return mod.names;
-  if (!mod.parseNamesFrom) {
-    throw new Error(`[plugin-ui] ${spec} has neither "names" nor "parseNamesFrom"`);
-  }
-  if (!nameCache.has(spec)) {
-    const { specifier, extraNames = [] } = mod.parseNamesFrom;
-    const sourcePath = require.resolve(specifier);
-    const parsed = parseExportedValueNames(readFileSync(sourcePath, "utf8"));
-    nameCache.set(spec, [...new Set([...parsed, ...extraNames])]);
-  }
-  return nameCache.get(spec)!;
-}
-
-function shimSource(spec: string): string {
-  const mod = SHARED_MODULES[spec];
-  const names = resolveNames(spec);
-  const g = `(globalThis.__RB_SHARED__||{})[${JSON.stringify(spec)}]`;
-  return (
-    `const m = ${g};\n` +
-    `if (!m) throw new Error("[plugin-ui] host shared module not registered: ${spec}");\n` +
-    `export const { ${names.join(", ")} } = m;\n` +
-    (mod.hasDefault ? `export default (m.default ?? m);\n` : "")
-  );
-}
-
-const fileToSpec = Object.fromEntries(
-  Object.entries(SHARED_MODULES).map(([spec, { file }]) => [file, spec]),
-);
-
-function importMapScript(): string {
-  const imports: Record<string, string> = {};
-  for (const [spec, { file }] of Object.entries(SHARED_MODULES)) {
-    imports[spec] = `${SHARED_BASE}/${file}.js`;
-  }
-  return `<script type="importmap">${JSON.stringify({ imports })}</script>`;
-}
-
-/**
- * Serves the shared-runtime shim modules at /plugin-shared/*.js and injects the
- * import map so a dynamically-imported plugin's bare `import "react"` /
- * `import "@rainbow-robotics/plugin-ui/react"` etc. resolve to the host's OWN
- * instances (via window.__RB_SHARED__). Applied in all modes — any nexus build
- * that can host plugins needs it.
- */
-export const pluginSharedRuntimePlugin = (): Plugin => ({
-  name: "plugin-ui-shared-runtime",
-  transformIndexHtml(html) {
-    return html.replace("</head>", `    ${importMapScript()}\n  </head>`);
-  },
-  configureServer(server) {
-    server.middlewares.use((req, res, next) => {
-      const url = req.url?.split("?")[0];
-      if (!url?.startsWith(`${SHARED_BASE}/`)) return next();
-      const file = url.slice(`${SHARED_BASE}/`.length).replace(/\.js$/, "");
-      const spec = fileToSpec[file];
-      if (!spec) return next();
-      res.setHeader("Content-Type", "text/javascript; charset=utf-8");
-      res.setHeader("Access-Control-Allow-Origin", "*");
-      res.end(shimSource(spec));
-    });
-  },
-  generateBundle() {
-    for (const [spec, { file }] of Object.entries(SHARED_MODULES)) {
-      this.emitFile({
-        type: "asset",
-        fileName: `plugin-shared/${file}.js`,
-        source: shimSource(spec),
-      });
-    }
-  },
-});
-
-/** Inject the preview-host runtime flags into index.html (plugin-preview only). */
-export const pluginPreviewRuntimePlugin = (): Plugin => ({
-  name: "plugin-ui-preview-runtime",
-  apply: (_config, { mode }) => isPluginPreviewMode(mode),
-  transformIndexHtml(html) {
-    return html.replace(
-      "</head>",
-      [
-        "    <script>",
-        "      window.__RB_PLUGIN_PREVIEW_HOST__ = true;",
-        "      window.__RB_ASSETS_BASE_URL__ = window.location.origin;",
-        "    </script>",
-        "  </head>",
-      ].join("\n"),
-    );
-  },
-});
-
-/** Serve the host's static assets (imgs/fonts/...) in plugin-preview dev mode. */
-export const pluginPreviewAssetsPlugin = (opts: {
-  assetsDir: string;
-  prefixes?: string[];
-}): Plugin => {
-  const { assetsDir, prefixes = defaultPreviewAssetPrefixes } = opts;
-  return {
-    name: "plugin-ui-preview-assets",
-    apply: (_config, { command, mode }) =>
-      command === "serve" && isPluginPreviewMode(mode),
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        const url = req.url?.split("?")[0];
-        if (!url || !prefixes.some((prefix) => url.startsWith(prefix)))
-          return next();
-
-        const decodedUrl = decodeURIComponent(url);
-        const filePath = resolve(assetsDir, `.${decodedUrl}`);
-        if (!filePath.startsWith(assetsDir)) return next();
-        if (!existsSync(filePath) || !statSync(filePath).isFile()) return next();
-
-        const contentType = contentTypeByExt[extname(filePath)];
-        if (contentType) res.setHeader("Content-Type", contentType);
-        res.setHeader("Access-Control-Allow-Origin", "*");
-        createReadStream(filePath).pipe(res);
-      });
-    },
-  };
-};
-
-/**
- * All host-side plugin-ui Vite plugins in one call. Each self-gates by mode, so
- * a host just spreads this into its `plugins` array.
- *
- *   plugins: [muscatVitePlugin({ previewAssetsDir: resolve(here, "../assets/public") })]
- */
-export const muscatVitePlugin = (opts: {
-  /** Host static assets dir served in plugin-preview dev mode. */
-  previewAssetsDir: string;
-  /** Override preview asset URL prefixes. */
-  previewAssetPrefixes?: string[];
-}): Plugin[] => [
-  pluginSharedRuntimePlugin(),
-  pluginPreviewRuntimePlugin(),
-  pluginPreviewAssetsPlugin({
-    assetsDir: opts.previewAssetsDir,
-    prefixes: opts.previewAssetPrefixes,
-  }),
-];
+/**
+ * Vite plugins for a HOST app previewing locally-developed plugins.
+ * Host-agnostic — paths are parameters.
+ *
+ *   import {
+ *     pluginPreviewRuntimePlugin,
+ *     pluginPreviewAssetsPlugin,
+ *     isPluginPreviewMode,
+ *   } from "@rainbow-robotics/plugin-ui/vite-host";
+ *
+ * A built plugin's bare imports (react, rb-components, plugin-ui/*) resolve via
+ * the import map this file injects, to the host's already-loaded instances.
+ * See ./host.tsx.
+ */
+import type { Plugin } from "vite";
+import { createReadStream, existsSync, readFileSync, statSync } from "node:fs";
+import { createRequire } from "node:module";
+import { extname, resolve } from "node:path";
+
+const require = createRequire(import.meta.url);
+
+export const defaultPreviewAssetPrefixes = [
+  "/imgs/",
+  "/fonts/",
+  "/models/",
+  "/sounds/",
+  "/data/",
+];
+
+export const contentTypeByExt: Record<string, string> = {
+  ".avif": "image/avif",
+  ".css": "text/css; charset=utf-8",
+  ".gif": "image/gif",
+  ".glb": "model/gltf-binary",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".mp3": "audio/mpeg",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".wasm": "application/wasm",
+  ".webp": "image/webp",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+};
+
+export const isPluginPreviewMode = (mode: string) => mode === "plugin-preview";
+
+/* -------------------------------------------------------------------------- */
+/* Shared-runtime import map (plugins reuse the host's loaded instances)       */
+/* -------------------------------------------------------------------------- */
+
+const SHARED_BASE = "/plugin-shared";
+
+// Each shared specifier → the named exports its shim re-exports from
+// window.__RB_SHARED__[specifier] (set by the host, e.g. nexus/src/pluginShared).
+//
+// `names`: hardcoded list (small, stable modules).
+// `parseNamesFrom`: parse the export names out of a source file's text — used
+// for react.tsx, which re-exports the whole rb-components barrel (100+ names).
+// We text-parse rather than import it: the barrel is .ts source, which plain
+// Node can't execute.
+const SHARED_MODULES: Record<
+  string,
+  {
+    file: string;
+    names?: string[];
+    parseNamesFrom?: { specifier: string; extraNames?: string[] };
+    hasDefault?: boolean;
+  }
+> = {
+  react: {
+    file: "react",
+    hasDefault: true,
+    names: [
+      "Children", "Component", "Fragment", "Profiler", "PureComponent",
+      "StrictMode", "Suspense", "cloneElement", "createContext",
+      "createElement", "createRef", "forwardRef", "isValidElement", "lazy",
+      "memo", "startTransition", "useCallback", "useContext", "useDebugValue",
+      "useDeferredValue", "useEffect", "useId", "useImperativeHandle",
+      "useInsertionEffect", "useLayoutEffect", "useMemo", "useReducer",
+      "useRef", "useState", "useSyncExternalStore", "useTransition", "version",
+    ],
+  },
+  "react/jsx-runtime": {
+    file: "react_jsx-runtime",
+    names: ["Fragment", "jsx", "jsxs"],
+  },
+  "react/jsx-dev-runtime": {
+    file: "react_jsx-dev-runtime",
+    names: ["Fragment", "jsxDEV"],
+  },
+  "react-dom": {
+    file: "react-dom",
+    hasDefault: true,
+    names: [
+      "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
+      "createPortal",
+      "createRoot",
+      "findDOMNode",
+      "flushSync",
+      "hydrate",
+      "hydrateRoot",
+      "render",
+      "unmountComponentAtNode",
+      "unstable_batchedUpdates",
+      "unstable_renderSubtreeIntoContainer",
+      "version",
+    ],
+  },
+  "react-dom/client": {
+    file: "react-dom_client",
+    names: ["createRoot", "hydrateRoot"],
+  },
+  "@rainbow-robotics/plugin-ui/react": {
+    file: "plugin-ui_react",
+    // react.tsx re-exports the full rb-components barrel (export *) plus the sdk
+    // hooks.
+    parseNamesFrom: {
+      specifier: "@repo/rb-components/new_components",
+      extraNames: ["useRb", "useRbFormData", "useRbSave"],
+    },
+  },
+  "@rainbow-robotics/plugin-ui/sdk": {
+    file: "plugin-ui_sdk",
+    names: ["RbContext", "useRb", "useRbFormData", "useRbSave"],
+  },
+  "@rainbow-robotics/plugin-ui/host-ui": {
+    file: "plugin-ui_host-ui",
+    names: [
+      "alert",
+      "confirm",
+      "getHostServices",
+      "prompt",
+      "setHostServices",
+      "toast",
+    ],
+  },
+  "@rainbow-robotics/plugin-ui/ws": {
+    file: "plugin-ui_ws",
+    names: ["RbWs", "createLazyRbSdk"],
+  },
+};
+
+// Parses `export { a, b as c, ... }` value names out of a source file's text
+// (skips `export type { ... }` blocks and individual `type X` entries within
+// a mixed block — types don't exist as runtime module properties). Static
+// text parsing, not module execution, so it works for .ts source files with
+// no loader and has no ESM-resolution footguns.
+function parseExportedValueNames(source: string): string[] {
+  const names = new Set<string>();
+  const blockRe = /export\s+(type\s+)?\{([^}]*)\}/g;
+  let match: RegExpExecArray | null;
+  while ((match = blockRe.exec(source))) {
+    if (match[1]) continue; // whole `export type { ... }` block
+    for (const rawEntry of match[2].split(",")) {
+      const entry = rawEntry.trim();
+      if (!entry || entry.startsWith("type ")) continue;
+      const asMatch = entry.match(/^\S+\s+as\s+(\S+)$/);
+      names.add(asMatch ? asMatch[1] : entry);
+    }
+  }
+  return [...names];
+}
+
+const nameCache = new Map<string, string[]>();
+
+function resolveNames(spec: string): string[] {
+  const mod = SHARED_MODULES[spec];
+  if (mod.names) return mod.names;
+  if (!mod.parseNamesFrom) {
+    throw new Error(`[plugin-ui] ${spec} has neither "names" nor "parseNamesFrom"`);
+  }
+  if (!nameCache.has(spec)) {
+    const { specifier, extraNames = [] } = mod.parseNamesFrom;
+    const sourcePath = require.resolve(specifier);
+    const parsed = parseExportedValueNames(readFileSync(sourcePath, "utf8"));
+    nameCache.set(spec, [...new Set([...parsed, ...extraNames])]);
+  }
+  return nameCache.get(spec)!;
+}
+
+function shimSource(spec: string): string {
+  const mod = SHARED_MODULES[spec];
+  const names = resolveNames(spec);
+  const g = `(globalThis.__RB_SHARED__||{})[${JSON.stringify(spec)}]`;
+  return (
+    `const m = ${g};\n` +
+    `if (!m) throw new Error("[plugin-ui] host shared module not registered: ${spec}");\n` +
+    `export const { ${names.join(", ")} } = m;\n` +
+    (mod.hasDefault ? `export default (m.default ?? m);\n` : "")
+  );
+}
+
+const fileToSpec = Object.fromEntries(
+  Object.entries(SHARED_MODULES).map(([spec, { file }]) => [file, spec]),
+);
+
+function importMapScript(): string {
+  const imports: Record<string, string> = {};
+  for (const [spec, { file }] of Object.entries(SHARED_MODULES)) {
+    imports[spec] = `${SHARED_BASE}/${file}.js`;
+  }
+  return `<script type="importmap">${JSON.stringify({ imports })}</script>`;
+}
+
+/**
+ * Serves the shared-runtime shim modules at /plugin-shared/*.js and injects the
+ * import map so a dynamically-imported plugin's bare `import "react"` /
+ * `import "@rainbow-robotics/plugin-ui/react"` etc. resolve to the host's OWN
+ * instances (via window.__RB_SHARED__). Applied in all modes — any nexus build
+ * that can host plugins needs it.
+ */
+export const pluginSharedRuntimePlugin = (): Plugin => ({
+  name: "plugin-ui-shared-runtime",
+  transformIndexHtml(html) {
+    return html.replace("</head>", `    ${importMapScript()}\n  </head>`);
+  },
+  configureServer(server) {
+    server.middlewares.use((req, res, next) => {
+      const url = req.url?.split("?")[0];
+      if (!url?.startsWith(`${SHARED_BASE}/`)) return next();
+      const file = url.slice(`${SHARED_BASE}/`.length).replace(/\.js$/, "");
+      const spec = fileToSpec[file];
+      if (!spec) return next();
+      res.setHeader("Content-Type", "text/javascript; charset=utf-8");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.end(shimSource(spec));
+    });
+  },
+  generateBundle() {
+    for (const [spec, { file }] of Object.entries(SHARED_MODULES)) {
+      this.emitFile({
+        type: "asset",
+        fileName: `plugin-shared/${file}.js`,
+        source: shimSource(spec),
+      });
+    }
+  },
+});
+
+/** Inject the preview-host runtime flags into index.html (plugin-preview only). */
+export const pluginPreviewRuntimePlugin = (): Plugin => ({
+  name: "plugin-ui-preview-runtime",
+  apply: (_config, { mode }) => isPluginPreviewMode(mode),
+  transformIndexHtml(html) {
+    return html.replace(
+      "</head>",
+      [
+        "    <script>",
+        "      window.__RB_PLUGIN_PREVIEW_HOST__ = true;",
+        "      window.__RB_ASSETS_BASE_URL__ = window.location.origin;",
+        "    </script>",
+        "  </head>",
+      ].join("\n"),
+    );
+  },
+});
+
+/** Serve the host's static assets (imgs/fonts/...) in plugin-preview dev mode. */
+export const pluginPreviewAssetsPlugin = (opts: {
+  assetsDir: string;
+  prefixes?: string[];
+}): Plugin => {
+  const { assetsDir, prefixes = defaultPreviewAssetPrefixes } = opts;
+  return {
+    name: "plugin-ui-preview-assets",
+    apply: (_config, { command, mode }) =>
+      command === "serve" && isPluginPreviewMode(mode),
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url?.split("?")[0];
+        if (!url || !prefixes.some((prefix) => url.startsWith(prefix)))
+          return next();
+
+        const decodedUrl = decodeURIComponent(url);
+        const filePath = resolve(assetsDir, `.${decodedUrl}`);
+        if (!filePath.startsWith(assetsDir)) return next();
+        if (!existsSync(filePath) || !statSync(filePath).isFile()) return next();
+
+        const contentType = contentTypeByExt[extname(filePath)];
+        if (contentType) res.setHeader("Content-Type", contentType);
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        createReadStream(filePath).pipe(res);
+      });
+    },
+  };
+};
+
+/**
+ * All host-side plugin-ui Vite plugins in one call. Each self-gates by mode, so
+ * a host just spreads this into its `plugins` array.
+ *
+ *   plugins: [muscatVitePlugin({ previewAssetsDir: resolve(here, "../assets/public") })]
+ */
+export const muscatVitePlugin = (opts: {
+  /** Host static assets dir served in plugin-preview dev mode. */
+  previewAssetsDir: string;
+  /** Override preview asset URL prefixes. */
+  previewAssetPrefixes?: string[];
+}): Plugin[] => [
+  pluginSharedRuntimePlugin(),
+  pluginPreviewRuntimePlugin(),
+  pluginPreviewAssetsPlugin({
+    assetsDir: opts.previewAssetsDir,
+    prefixes: opts.previewAssetPrefixes,
+  }),
+];