@rainbow-robotics/plugin-ui 0.1.2-dev.5 → 0.1.2-dev.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-robotics/plugin-ui",
-  "version": "0.1.2-dev.5",
+  "version": "0.1.2-dev.6",
   "type": "module",
   "engines": {
     "node": ">=20"
@@ -56,6 +56,7 @@
     "typescript": "^5.8.0"
   },
   "dependencies": {
+    "@eclipse-zenoh/zenoh-ts": "^1.9.0",
     "@quilted/threads": "^4.0.3",
     "@remote-dom/core": "^1.11.1",
     "@remote-dom/react": "^1.2.2"

package/src/connect.ts

@@ -1,17 +1,9 @@
 /**
  * Sandbox bootstrap — runs *inside* the plugin iframe.
  *
- * The sandbox initiates the handshake (the iframe is the side that knows when it
- * is ready): it imports the host's `connect()` and calls it. The host responds
- * with a `RemoteConnection` (its `receiver.connection`, ferried by
- * @quilted/threads) plus the host SDK. We then render the plugin's React tree
- * into a detached root and let `RemoteMutationObserver` stream every DOM
- * mutation to the host, where the real rb-components live.
- *
- * The child-initiates-handshake pattern is required because @quilted/threads
- * does not buffer a call made before the other side is listening; the host has
- * been listening since it mounted the iframe, so a call *from* the sandbox is
- * always delivered.
+ * The sandbox initiates the handshake: imports the host's `connect()` and calls
+ * it. The host responds with the RemoteConnection, toast(), and Zenoh config
+ * (url + pluginId). We open a Zenoh session and wire up the rb object.
  *
  * Verified against @remote-dom/core@1.11.x + @quilted/threads@4.x.
  */
@@ -22,23 +14,23 @@ import { createElement, type ComponentType } from "react";
 import { createRoot } from "react-dom/client";
 import { defineElements } from "./elements";
 import { RbContext, type RbSdk } from "./sdk";
+import { RbZenoh } from "./zenoh";
 
-/** What the host exposes to the sandbox. */
 interface HostExports {
   connect: () => Promise<{
     connection: RemoteConnection;
-    action: (id: string, payload?: unknown) => Promise<unknown> | unknown;
-    notify: (message: string, type?: string) => void;
+    toast: (message: string, type?: string) => void;
+    zenohUrl: string;
+    pluginId: string;
   }>;
 }
 
 /**
- * Mount a plugin. Call this once from the sandbox entry (sandbox.html), passing
- * the plugin's root component.
+ * Mount a plugin. Call this once from the sandbox entry (content.tsx).
  *
  * @example
  * import { connect } from "@rainbow-robotics/plugin-ui/connect";
- * import App from "./content";
+ * import App from "./App";
  * connect(App);
  */
 export function connect(App: ComponentType): void {
@@ -48,14 +40,18 @@ export function connect(App: ComponentType): void {
     targetOrigin: "*",
   });
 
-  void host.connect().then(({ connection, action, notify }) => {
+  void host.connect().then(async ({ connection, toast, zenohUrl, pluginId }) => {
+    const zenoh = await RbZenoh.open(zenohUrl, pluginId);
+
     const rb: RbSdk = {
-      action: (id, payload) => Promise.resolve(action(id, payload)),
-      notify: (message, type) => notify(message, type as string | undefined),
+      pub:    (topic, payload)  => zenoh.pub(topic, payload),
+      sub:    (topic, handler)  => zenoh.sub(topic, handler),
+      action: (topic, payload)  => zenoh.action(topic, payload),
+      serve:  (topic, handler)  => zenoh.serve(topic, handler),
+      toast: (message, type)   => toast(message, type),
     };
 
     const root = document.createElement("remote-root");
-
     document.body.append(root);
 
     const observer = new RemoteMutationObserver(connection);

package/src/sdk.ts

@@ -1,35 +1,68 @@
 /**
- * Plugin runtime SDK — the small, stable surface a plugin author calls from
- * inside the sandbox to talk to the host (Muscat / nexus).
+ * Plugin runtime SDK — the surface a plugin author calls from inside the sandbox.
  *
- * The concrete implementation is injected by the host across the iframe thread
- * (see ./connect for the sandbox side, ./host for the host side).
+ * Zenoh methods (pub/sub/action/serve) talk directly to the Zenoh router via
+ * WebSocket. Topics are auto-namespaced to plugin/{pluginId}/... to prevent
+ * cross-plugin collisions. A leading "/" bypasses namespacing (absolute path).
+ *
+ * notify() is still host-mediated (goes through the Muscat shell).
  */
 import { createContext, useContext } from "react";
+import type { Subscriber, Queryable } from "./zenoh";
 
 export type RbNotifyType = "info" | "success" | "warning" | "error";
 
 export interface RbSdk {
   /**
-   * Invoke a host-side action (declared in manifest.actions). Resolves with
-   * whatever the host/back end returns.
+   * Publish JSON payload to a topic.
+   * "sensor/data" → plugin/{pluginId}/sensor/data
+   * "/broadcast/x" → broadcast/x  (absolute)
+   */
+  pub: <P = any>(topic: string, payload: P) => Promise<void>;
+
+  /** Subscribe to a topic. Returns a handle with undeclare(). */
+  sub: <P = any>(
+    topic: string,
+    handler: (payload: P) => void,
+  ) => Promise<Subscriber>;
+
+  /**
+   * Send a request and await the first reply (Zenoh query).
+   * Use this to call a backend handler registered with rb.serve() / ZenohRouter.
+   */
+  action: <R = any, P = any>(topic: string, payload?: P) => Promise<R>;
+
+  /**
+   * Register a queryable — the frontend responds to backend queries.
+   * Mirror of rb.action() on the other side.
    */
-  action: (id: string, payload?: unknown) => Promise<unknown>;
+  serve: <P = any, R = any>(
+    topic: string,
+    handler: (payload?: P) => R | Promise<R>,
+  ) => Promise<Queryable>;
+
   /** Show a transient notification through the host's toast system. */
-  notify: (message: string, type?: RbNotifyType) => void;
+  toast: (message: string, type?: RbNotifyType) => void;
 }
 
 const noopSdk: RbSdk = {
-  action: async () => {
-    if (typeof console !== "undefined") {
-      console.warn("[plugin-ui] rb.action called outside of a host context");
-    }
-    return undefined;
+  pub: async <P = any>(_topic?: string, _payload?: P) => {
+    console.warn("[plugin-ui] rb.pub called outside of a host context");
+  },
+  sub: async <P = any>(_topic?: string, _handler?: (payload: P) => void) => {
+    console.warn("[plugin-ui] rb.sub called outside of a host context");
+    return { undeclare: async () => {} } as unknown as Subscriber;
+  },
+  action: async <R = any, P = any>(_topic?: string, _payload?: P) => {
+    console.warn("[plugin-ui] rb.action called outside of a host context");
+    return undefined as R;
+  },
+  serve: async <P = any, R = any>(_topic?: string, _handler?: (payload?: P) => R) => {
+    console.warn("[plugin-ui] rb.serve called outside of a host context");
+    return { undeclare: async () => {} } as unknown as Queryable;
   },
-  notify: (message) => {
-    if (typeof console !== "undefined") {
-      console.warn("[plugin-ui] rb.notify (no host):", message);
-    }
+  toast: (message) => {
+    console.warn("[plugin-ui] rb.toast (no host):", message);
   },
 };
 

package/src/zenoh.ts

@@ -0,0 +1,122 @@
+/**
+ * Zenoh communication client for plugin frontends.
+ * All topics are automatically namespaced to prevent cross-plugin collisions:
+ *   "sensor/data"  →  "plugin/{pluginId}/sensor/data"
+ *   "/broadcast/x" →  "broadcast/x"   (leading slash = absolute)
+ */
+import { Session, Config } from "@eclipse-zenoh/zenoh-ts";
+import type { Publisher, Subscriber, Queryable } from "@eclipse-zenoh/zenoh-ts";
+
+export type { Subscriber, Queryable };
+
+export interface ZenohHandle {
+  undeclare(): Promise<void>;
+}
+
+function resolveTopic(pluginId: string, topic: string): string {
+  return topic.startsWith("/") ? topic.slice(1) : `plugin/${pluginId}/${topic}`;
+}
+
+function encode(payload: unknown): string {
+  return JSON.stringify(payload);
+}
+
+function decode(raw: string | Uint8Array): unknown {
+  const str = typeof raw === "string" ? raw : new TextDecoder().decode(raw);
+  try {
+    return JSON.parse(str);
+  } catch {
+    return str;
+  }
+}
+
+export class RbZenoh {
+  private readonly _session: Session;
+  private readonly _pluginId: string;
+  private readonly _pubs = new Map<string, Publisher>();
+
+  private constructor(session: Session, pluginId: string) {
+    this._session = session;
+    this._pluginId = pluginId;
+  }
+
+  static async open(url: string, pluginId: string): Promise<RbZenoh> {
+    const session = await Session.open(new Config(url));
+    return new RbZenoh(session, pluginId);
+  }
+
+  private _key(topic: string): string {
+    return resolveTopic(this._pluginId, topic);
+  }
+
+  /** Publish JSON payload to a topic. Publisher is cached per topic. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async pub<P = any>(topic: string, payload: P): Promise<void> {
+    const key = this._key(topic);
+    let publisher = this._pubs.get(key);
+    if (!publisher) {
+      publisher = await this._session.declarePublisher(key);
+      this._pubs.set(key, publisher);
+    }
+    await publisher.put(encode(payload));
+  }
+
+  /** Subscribe to a topic. Returns a handle with undeclare(). */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async sub<P = any>(
+    topic: string,
+    handler: (payload: P) => void,
+  ): Promise<Subscriber> {
+    return this._session.declareSubscriber(this._key(topic), {
+      handler: (sample) => {
+        handler(decode(sample.payload().toBytes()) as P);
+      },
+    });
+  }
+
+  /**
+   * Send a request and await the first reply (Zenoh query).
+   * Equivalent to a remote procedure call.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async action<R = any, P = any>(topic: string, payload?: P): Promise<R> {
+    const opts =
+      payload !== undefined ? { payload: encode(payload) } : undefined;
+    const receiver = await this._session.get(this._key(topic), opts);
+    if (!receiver) return undefined;
+    for await (const reply of receiver) {
+      const result = reply.result();
+      if (result && "payload" in result) {
+        return decode(result.payload().toBytes()) as R;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Register a queryable handler (Zenoh queryable).
+   * The backend calls action(), this side responds.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async serve<P = any, R = any>(
+    topic: string,
+    handler: (payload?: P) => R | Promise<R>,
+  ): Promise<Queryable> {
+    const key = this._key(topic);
+    return this._session.declareQueryable(key, {
+      handler: async (query) => {
+        const reqPayload = query.payload()
+          ? (decode(query.payload()!.toBytes()) as P)
+          : undefined;
+        const result = await handler(reqPayload);
+        await query.reply(key, encode(result));
+      },
+    });
+  }
+
+  async close(): Promise<void> {
+    for (const pub of this._pubs.values()) await pub.undeclare();
+    this._pubs.clear();
+    await this._session.close();
+  }
+}

package/dist-browser/@rainbow-robotics/plugin-ui/chunks/chunk-AMCIKVG7.js

@@ -1 +0,0 @@
-var g=Object.defineProperty;var f=a=>{throw TypeError(a)};var h=(a,b,c)=>b in a?g(a,b,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[b]=c;var i=(a,b,c)=>h(a,typeof b!="symbol"?b+"":b,c),d=(a,b,c)=>b.has(a)||f("Cannot "+c);var j=(a,b,c)=>(d(a,b,"read from private field"),c?c.call(a):b.get(a)),k=(a,b,c)=>b.has(a)?f("Cannot add the same private member more than once"):b instanceof WeakSet?b.add(a):b.set(a,c),l=(a,b,c,e)=>(d(a,b,"write to private field"),e?e.call(a,c):b.set(a,c),c),m=(a,b,c)=>(d(a,b,"access private method"),c);export{i as a,j as b,k as c,l as d,m as e};

package/dist-browser/@rainbow-robotics/plugin-ui/chunks/chunk-GJWPOWHG.js

@@ -1 +0,0 @@
-import{createContext as o,useContext as e}from"react";var t={action:async()=>{typeof console<"u"&&console.warn("[plugin-ui] rb.action called outside of a host context")},notify:n=>{typeof console<"u"&&console.warn("[plugin-ui] rb.notify (no host):",n)}},i=o(t);function s(){return e(i)}export{i as a,s as b};