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

package/src/pluginData.tsx

@@ -1,240 +1,240 @@
-/// <reference types="vite/client" />
-/**
- * Plugin data seam (host-side). Resolves where each plugin's UI/assets load
- * from. `muscat-pk dev` sets `window.__RB_PREVIEW_PLUGIN_ID__`; that id routes
- * to preview-host, everything else to the installed-plugin back end, so both
- * coexist. The host passes its dialog/toast as `hostServices`, registered via
- * setHostServices (see ./host-ui).
- */
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type PropsWithChildren,
-} from "react";
-import type { PluginManifest } from "./manifest";
-// Package specifier, not a relative path — see host.tsx for why (source vs dist
-// host-ui would be two `services` singletons).
-import {
-  setHostServices,
-  type PluginUIServices,
-} from "@rainbow-robotics/plugin-ui/host-ui";
-
-/**
- * Where/how to load a plugin's UI module — no iframe involved, the host
- * mounts it directly.
- *
- * - "dev": the plugin's own Vite dev server (muscat-pk dev). `bootstrapUrl` is
- *   a plain ESM module exposing `mount(container, rb, hostServices)`; react
- *   and plugin-ui resolve from that dev server's own module graph, so this
- *   mount is a fully self-consistent, independently-rooted React tree.
- * - "esm": a built plugin (`muscat-pk build` / robot runtime), a plain ESM
- *   module the host dynamically imports. react / rb-components / plugin-ui
- *   context modules are left external as bare specifiers, resolved by the host
- *   page's import map to the host's own already-loaded instances — so it mounts
- *   as a genuine nested React tree with working Context (RbContext, host-ui)
- *   and no duplicate React instance.
- */
-export type PluginModuleSource =
-  | { kind: "dev"; bootstrapUrl: string }
-  | { kind: "esm"; entryUrl: string };
-
-export interface PluginDataSource {
-  /** Preview plugin manifest (only while a dev plugin is being previewed). */
-  usePluginManifest: () => { data: PluginManifest | null; isLoading: boolean };
-  /** Where/how to load a plugin's UI module for a given UI entry. */
-  getModuleSource: (pluginId: string, ui: string) => PluginModuleSource;
-  /** URL of a plugin asset (e.g. an icon) by its manifest-relative path. */
-  getAssetUrl: (pluginId: string, assetPath: string) => string;
-  /** Socket.IO server URL the plugin connects to. */
-  getSocketUrl: (pluginId: string) => string;
-}
-
-const PluginDataContext = createContext<PluginDataSource | null>(null);
-
-export function usePluginData(): PluginDataSource {
-  const ctx = useContext(PluginDataContext);
-  if (!ctx) {
-    throw new Error("usePluginData must be used within a PluginDataProvider");
-  }
-  return ctx;
-}
-
-/* -------------------------------------------------------------------------- */
-/* Preview (preview-host: the developer's locally-built plugin)                */
-/* -------------------------------------------------------------------------- */
-
-type PreviewWindow = Window & {
-  /** Plugin id under `muscat-pk dev` — requests for it route to preview-host. */
-  __RB_PREVIEW_PLUGIN_ID__?: string;
-  /** Base URL preview-host serves the dev plugin's manifest/assets from. */
-  __RB_PLUGIN_PREVIEW_BASE__?: string;
-  /** Where the plugin's OWN Vite dev server lives (distinct from the above —
-   *  that's preview-host's own static route; this is the plugin's dev server,
-   *  which serves its bootstrap module for direct mounting). */
-  __RB_PLUGIN_DEV_SERVER_URL__?: string;
-  /** Override URL for the plugin manifest. */
-  __RB_PLUGIN_PREVIEW_MANIFEST__?: string;
-  /** Socket.IO URL — injected by muscat-pk CLI when starting preview. */
-  __RB_PLUGIN_PREVIEW_SOCKET_URL__?: string;
-};
-
-const win = (): PreviewWindow | undefined =>
-  typeof window !== "undefined" ? (window as PreviewWindow) : undefined;
-
-const isViteDev = import.meta.env.DEV;
-
-/** The plugin id being previewed via `muscat-pk dev`, if any. */
-function previewPluginId(): string | undefined {
-  return (
-    win()?.__RB_PREVIEW_PLUGIN_ID__ ||
-    (isViteDev ? "com.example.demo-plugin" : undefined)
-  );
-}
-
-/** Whether a given plugin id is the one being developed locally. */
-function isPreviewPlugin(pluginId: string): boolean {
-  const id = previewPluginId();
-  return !!id && id === pluginId;
-}
-
-/** Where preview-host serves the dev plugin's manifest/assets. */
-function previewBase(): string {
-  const base =
-    win()?.__RB_PLUGIN_PREVIEW_BASE__ ||
-    (isViteDev ? "http://localhost:4180/plugin-dev" : "/plugin-dev");
-  return base.replace(/\/$/, "");
-}
-
-/** Where the plugin's own Vite dev server lives (for the bootstrap module). */
-function devServerUrl(): string {
-  const base =
-    win()?.__RB_PLUGIN_DEV_SERVER_URL__ ||
-    (isViteDev ? "http://localhost:4181" : win()?.location.origin || "");
-  return base.replace(/\/$/, "");
-}
-
-function previewManifestUrl(): string {
-  return (
-    win()?.__RB_PLUGIN_PREVIEW_MANIFEST__ || `${previewBase()}/manifest.json`
-  );
-}
-
-function previewSocketUrl(): string {
-  return win()?.__RB_PLUGIN_PREVIEW_SOCKET_URL__ || "ws://127.0.0.1:10000";
-}
-
-// Shared, deduped fetch — several components read the manifest, so a single
-// module-level promise avoids duplicate requests (react-query is not needed).
-let manifestPromise: Promise<PluginManifest> | null = null;
-function loadPreviewManifest(): Promise<PluginManifest> {
-  if (!manifestPromise) {
-    manifestPromise = (async () => {
-      try {
-        const url = previewManifestUrl();
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`GET ${url} failed: ${res.status}`);
-        return res.json() as Promise<PluginManifest>;
-      } catch (e) {
-        if (win()?.__RB_PLUGIN_PREVIEW_BASE__ || win()?.__RB_PREVIEW_PLUGIN_ID__) {
-          console.error(e);
-        } else {
-          console.warn("[plugin-ui] no preview-host at", previewBase(), "— run `muscat-pk dev` to preview a plugin");
-        }
-      }
-    })();
-  }
-  return manifestPromise;
-}
-
-function usePreviewManifest(): {
-  data: PluginManifest | null;
-  isLoading: boolean;
-} {
-  const enabled = !!previewPluginId();
-  const [data, setData] = useState<PluginManifest | null>(null);
-  const [isLoading, setIsLoading] = useState(enabled);
-
-  useEffect(() => {
-    if (!enabled) {
-      setData(null);
-      setIsLoading(false);
-      return;
-    }
-    let alive = true;
-    setIsLoading(true);
-    loadPreviewManifest()
-      .then((m) => alive && setData(m))
-      .finally(() => alive && setIsLoading(false));
-    return () => {
-      alive = false;
-    };
-  }, [enabled]);
-
-  return { data, isLoading };
-}
-
-/* -------------------------------------------------------------------------- */
-/* Provider                                                                    */
-/* -------------------------------------------------------------------------- */
-
-export interface PluginDataProviderProps {
-  /**
-   * The host's real dialog/toast, registered for plugins to use via
-   * `@rainbow-robotics/plugin-ui/host-ui`. The host builds these ONCE inside
-   * its own React tree (calling its real useDialog) and passes the resulting
-   * plain functions here — safe to call from a plugin's separate React
-   * instance (dev). See ./host-ui.
-   */
-  hostServices: PluginUIServices;
-  /** Socket.IO URL for installed (non-preview) plugins. */
-  wsUrl?: string;
-  /** URL prefix the host serves installed plugins from. */
-  liveBase?: string;
-}
-
-export function PluginDataProvider({
-  children,
-  hostServices,
-  wsUrl = "ws://127.0.0.1:10000",
-  liveBase = "http://localhost:3000/common/plugin",
-}: PropsWithChildren<PluginDataProviderProps>) {
-  // Register in an effect (setHostServices is a side effect, not render-safe).
-  // Layout effect so it runs before children (a mounting PluginHost) read it.
-  useEffect(() => {
-    setHostServices(hostServices);
-  }, [hostServices]);
-
-  const source = useMemo<PluginDataSource>(() => {
-    const base = liveBase.replace(/\/$/, "");
-    return {
-      usePluginManifest: usePreviewManifest,
-      getModuleSource: (pluginId, ui) =>
-        isPreviewPlugin(pluginId)
-          ? {
-              kind: "dev",
-              bootstrapUrl: `${devServerUrl()}/@id/__x00__rb-bootstrap:${ui}`,
-            }
-          : {
-              kind: "esm",
-              // The plugin's built ESM entry for this ui — bare externals
-              // inside are resolved by the host page's import map.
-              entryUrl: `${base}/${pluginId}/${ui}.js`,
-            },
-      getAssetUrl: (pluginId, assetPath) =>
-        isPreviewPlugin(pluginId)
-          ? `${previewBase()}/${assetPath}`
-          : `${base}/${pluginId}/${assetPath}`,
-      getSocketUrl: (pluginId) =>
-        isPreviewPlugin(pluginId) ? previewSocketUrl() : wsUrl,
-    };
-  }, [wsUrl, liveBase]);
-
-  return (
-    <PluginDataContext.Provider value={source}>
-      {children}
-    </PluginDataContext.Provider>
-  );
-}
+/// <reference types="vite/client" />
+/**
+ * Plugin data seam (host-side). Resolves where each plugin's UI/assets load
+ * from. `muscat-pk dev` sets `window.__RB_PREVIEW_PLUGIN_ID__`; that id routes
+ * to preview-host, everything else to the installed-plugin back end, so both
+ * coexist. The host passes its dialog/toast as `hostServices`, registered via
+ * setHostServices (see ./host-ui).
+ */
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from "react";
+import type { PluginManifest } from "./manifest";
+// Package specifier, not a relative path — see host.tsx for why (source vs dist
+// host-ui would be two `services` singletons).
+import {
+  setHostServices,
+  type PluginUIServices,
+} from "@rainbow-robotics/plugin-ui/host-ui";
+
+/**
+ * Where/how to load a plugin's UI module — no iframe involved, the host
+ * mounts it directly.
+ *
+ * - "dev": the plugin's own Vite dev server (muscat-pk dev). `bootstrapUrl` is
+ *   a plain ESM module exposing `mount(container, rb, hostServices)`; react
+ *   and plugin-ui resolve from that dev server's own module graph, so this
+ *   mount is a fully self-consistent, independently-rooted React tree.
+ * - "esm": a built plugin (`muscat-pk build` / robot runtime), a plain ESM
+ *   module the host dynamically imports. react / rb-components / plugin-ui
+ *   context modules are left external as bare specifiers, resolved by the host
+ *   page's import map to the host's own already-loaded instances — so it mounts
+ *   as a genuine nested React tree with working Context (RbContext, host-ui)
+ *   and no duplicate React instance.
+ */
+export type PluginModuleSource =
+  | { kind: "dev"; bootstrapUrl: string }
+  | { kind: "esm"; entryUrl: string };
+
+export interface PluginDataSource {
+  /** Preview plugin manifest (only while a dev plugin is being previewed). */
+  usePluginManifest: () => { data: PluginManifest | null; isLoading: boolean };
+  /** Where/how to load a plugin's UI module for a given UI entry. */
+  getModuleSource: (pluginId: string, ui: string) => PluginModuleSource;
+  /** URL of a plugin asset (e.g. an icon) by its manifest-relative path. */
+  getAssetUrl: (pluginId: string, assetPath: string) => string;
+  /** Socket.IO server URL the plugin connects to. */
+  getSocketUrl: (pluginId: string) => string;
+}
+
+const PluginDataContext = createContext<PluginDataSource | null>(null);
+
+export function usePluginData(): PluginDataSource {
+  const ctx = useContext(PluginDataContext);
+  if (!ctx) {
+    throw new Error("usePluginData must be used within a PluginDataProvider");
+  }
+  return ctx;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Preview (preview-host: the developer's locally-built plugin)                */
+/* -------------------------------------------------------------------------- */
+
+type PreviewWindow = Window & {
+  /** Plugin id under `muscat-pk dev` — requests for it route to preview-host. */
+  __RB_PREVIEW_PLUGIN_ID__?: string;
+  /** Base URL preview-host serves the dev plugin's manifest/assets from. */
+  __RB_PLUGIN_PREVIEW_BASE__?: string;
+  /** Where the plugin's OWN Vite dev server lives (distinct from the above —
+   *  that's preview-host's own static route; this is the plugin's dev server,
+   *  which serves its bootstrap module for direct mounting). */
+  __RB_PLUGIN_DEV_SERVER_URL__?: string;
+  /** Override URL for the plugin manifest. */
+  __RB_PLUGIN_PREVIEW_MANIFEST__?: string;
+  /** Socket.IO URL — injected by muscat-pk CLI when starting preview. */
+  __RB_PLUGIN_PREVIEW_SOCKET_URL__?: string;
+};
+
+const win = (): PreviewWindow | undefined =>
+  typeof window !== "undefined" ? (window as PreviewWindow) : undefined;
+
+const isViteDev = import.meta.env.DEV;
+
+/** The plugin id being previewed via `muscat-pk dev`, if any. */
+function previewPluginId(): string | undefined {
+  return (
+    win()?.__RB_PREVIEW_PLUGIN_ID__ ||
+    (isViteDev ? "com.example.demo-plugin" : undefined)
+  );
+}
+
+/** Whether a given plugin id is the one being developed locally. */
+function isPreviewPlugin(pluginId: string): boolean {
+  const id = previewPluginId();
+  return !!id && id === pluginId;
+}
+
+/** Where preview-host serves the dev plugin's manifest/assets. */
+function previewBase(): string {
+  const base =
+    win()?.__RB_PLUGIN_PREVIEW_BASE__ ||
+    (isViteDev ? "http://localhost:4180/plugin-dev" : "/plugin-dev");
+  return base.replace(/\/$/, "");
+}
+
+/** Where the plugin's own Vite dev server lives (for the bootstrap module). */
+function devServerUrl(): string {
+  const base =
+    win()?.__RB_PLUGIN_DEV_SERVER_URL__ ||
+    (isViteDev ? "http://localhost:4181" : win()?.location.origin || "");
+  return base.replace(/\/$/, "");
+}
+
+function previewManifestUrl(): string {
+  return (
+    win()?.__RB_PLUGIN_PREVIEW_MANIFEST__ || `${previewBase()}/manifest.json`
+  );
+}
+
+function previewSocketUrl(): string {
+  return win()?.__RB_PLUGIN_PREVIEW_SOCKET_URL__ || "ws://127.0.0.1:10000";
+}
+
+// Shared, deduped fetch — several components read the manifest, so a single
+// module-level promise avoids duplicate requests (react-query is not needed).
+let manifestPromise: Promise<PluginManifest> | null = null;
+function loadPreviewManifest(): Promise<PluginManifest> {
+  if (!manifestPromise) {
+    manifestPromise = (async () => {
+      try {
+        const url = previewManifestUrl();
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`GET ${url} failed: ${res.status}`);
+        return res.json() as Promise<PluginManifest>;
+      } catch (e) {
+        if (win()?.__RB_PLUGIN_PREVIEW_BASE__ || win()?.__RB_PREVIEW_PLUGIN_ID__) {
+          console.error(e);
+        } else {
+          console.warn("[plugin-ui] no preview-host at", previewBase(), "— run `muscat-pk dev` to preview a plugin");
+        }
+      }
+    })();
+  }
+  return manifestPromise;
+}
+
+function usePreviewManifest(): {
+  data: PluginManifest | null;
+  isLoading: boolean;
+} {
+  const enabled = !!previewPluginId();
+  const [data, setData] = useState<PluginManifest | null>(null);
+  const [isLoading, setIsLoading] = useState(enabled);
+
+  useEffect(() => {
+    if (!enabled) {
+      setData(null);
+      setIsLoading(false);
+      return;
+    }
+    let alive = true;
+    setIsLoading(true);
+    loadPreviewManifest()
+      .then((m) => alive && setData(m))
+      .finally(() => alive && setIsLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [enabled]);
+
+  return { data, isLoading };
+}
+
+/* -------------------------------------------------------------------------- */
+/* Provider                                                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface PluginDataProviderProps {
+  /**
+   * The host's real dialog/toast, registered for plugins to use via
+   * `@rainbow-robotics/plugin-ui/host-ui`. The host builds these ONCE inside
+   * its own React tree (calling its real useDialog) and passes the resulting
+   * plain functions here — safe to call from a plugin's separate React
+   * instance (dev). See ./host-ui.
+   */
+  hostServices: PluginUIServices;
+  /** Socket.IO URL for installed (non-preview) plugins. */
+  wsUrl?: string;
+  /** URL prefix the host serves installed plugins from. */
+  liveBase?: string;
+}
+
+export function PluginDataProvider({
+  children,
+  hostServices,
+  wsUrl = "ws://127.0.0.1:10000",
+  liveBase = "http://localhost:3000/common/plugin",
+}: PropsWithChildren<PluginDataProviderProps>) {
+  // Register in an effect (setHostServices is a side effect, not render-safe).
+  // Layout effect so it runs before children (a mounting PluginHost) read it.
+  useEffect(() => {
+    setHostServices(hostServices);
+  }, [hostServices]);
+
+  const source = useMemo<PluginDataSource>(() => {
+    const base = liveBase.replace(/\/$/, "");
+    return {
+      usePluginManifest: usePreviewManifest,
+      getModuleSource: (pluginId, ui) =>
+        isPreviewPlugin(pluginId)
+          ? {
+              kind: "dev",
+              bootstrapUrl: `${devServerUrl()}/@id/__x00__rb-bootstrap:${ui}`,
+            }
+          : {
+              kind: "esm",
+              // The plugin's built ESM entry for this ui — bare externals
+              // inside are resolved by the host page's import map.
+              entryUrl: `${base}/${pluginId}/${ui}.js`,
+            },
+      getAssetUrl: (pluginId, assetPath) =>
+        isPreviewPlugin(pluginId)
+          ? `${previewBase()}/${assetPath}`
+          : `${base}/${pluginId}/${assetPath}`,
+      getSocketUrl: (pluginId) =>
+        isPreviewPlugin(pluginId) ? previewSocketUrl() : wsUrl,
+    };
+  }, [wsUrl, liveBase]);
+
+  return (
+    <PluginDataContext.Provider value={source}>
+      {children}
+    </PluginDataContext.Provider>
+  );
+}

package/src/react.tsx

@@ -1,13 +1,13 @@
-/**
- * Author component surface — re-exports the @repo/rb-components new_components
- * barrel, plus the sdk hooks.
- *
- *   import { RBSlider, RBLabelButton, useRb } from "@rainbow-robotics/plugin-ui/react";
- *
- * The runtime import-map shim (./viteHost.ts) reads this module's exports
- * rather than a hardcoded list, so the two stay in sync.
- */
-export * from "@repo/rb-components/new_components";
-
-export { useRb, useRbFormData, useRbSave } from "./sdk.js";
-export type { RbSdk } from "./sdk";
+/**
+ * Author component surface — re-exports the @repo/rb-components new_components
+ * barrel, plus the sdk hooks.
+ *
+ *   import { RBSlider, RBLabelButton, useRb } from "@rainbow-robotics/plugin-ui/react";
+ *
+ * The runtime import-map shim (./viteHost.ts) reads this module's exports
+ * rather than a hardcoded list, so the two stay in sync.
+ */
+export * from "@repo/rb-components/new_components";
+
+export { useRb, useRbFormData, useRbSave } from "./sdk.js";
+export type { RbSdk } from "./sdk";