@virtuoso.dev/reactive-engine-react 0.0.3 → 0.1.0

package/dist/index.d.ts

@@ -76,6 +76,17 @@ export declare interface EngineProviderProps {
     updateFn?: (engine: Engine) => void;
 }
 
+/**
+ * Options for the {@link useRemoteCellValues} hook.
+ * @category React Hooks and Components
+ */
+export declare interface RemoteCellValuesOptions<T extends unknown[]> {
+    cells: {
+        [K in keyof T]: Out<T[K]>;
+    };
+    engineId: string;
+}
+
 /**
  * Returns a tuple of the current value of a cell and a publisher function (similar to `useState`).
  * The component re-renderes when the cell value changes.
@@ -134,8 +145,6 @@ export declare const useCellValue: typeof useCellValueWithStore;
  * }
  * ```
  */
-export declare function useCellValues(...cells: Out[]): unknown[];
-
 /** @hidden */
 export declare function useCellValues<T1>(...cells: [Out<T1>]): [T1];
 
@@ -175,6 +184,9 @@ export declare function useCellValues<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T
 /** @hidden */
 export declare function useCellValues<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12, T13>(...cells: [Out<T1>, Out<T2>, Out<T3>, Out<T4>, Out<T5>, Out<T6>, Out<T7>, Out<T8>, Out<T9>, Out<T10>, Out<T11>, Out<T12>, Out<T13>]): [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12, T13];
 
+/** @hidden */
+export declare function useCellValues(...cells: Out[]): unknown[];
+
 declare function useCellValueWithStore<T>(cell: Out<T>): T;
 
 /**
@@ -212,4 +224,135 @@ export declare const useIsomorphicLayoutEffect: typeof React_2.useLayoutEffect;
  */
 export declare function usePublisher<T>(node$: Inp<T>): (value: T) => void;
 
+/**
+ * Returns a tuple of the current value and a publisher function for a cell in an engine identified by `engineId`.
+ * Returns `[undefined, noop]` when the engine is not available yet.
+ *
+ * @param cell - The cell to use.
+ * @param engineId - The ID of the engine (must match the `engineId` prop of an EngineProvider).
+ * @returns A tuple of the current value (or undefined) and a publisher function.
+ * @typeParam T - The type of values that the cell emits/accepts.
+ *
+ * @example
+ * ```tsx
+ * const cell$ = Cell(0)
+ * // ...
+ * function SiblingComponent() {
+ *   const [value, setValue] = useRemoteCell(cell$, 'my-engine')
+ *   if (value === undefined) return <div>Loading...</div>
+ *   return <button onClick={() => setValue(value + 1)}>{value}</button>
+ * }
+ * ```
+ * @category React Hooks and Components
+ */
+export declare function useRemoteCell<T>(cell: NodeRef<T>, engineId: string): [T | undefined, (value: T) => void];
+
+/**
+ * Gets the current value of the cell from an engine identified by `engineId`.
+ * Returns `undefined` when the engine is not available yet.
+ *
+ * @param cell - The cell to read from.
+ * @param engineId - The ID of the engine to read from (must match the `engineId` prop of an EngineProvider).
+ * @returns The current value of the cell, or `undefined` if the engine is not available.
+ * @typeParam T - The type of the value that the cell carries.
+ *
+ * @example
+ * ```tsx
+ * const cell$ = Cell(0)
+ * // ...
+ * function SiblingComponent() {
+ *   const value = useRemoteCellValue(cell$, 'my-engine')
+ *   if (value === undefined) return <div>Loading...</div>
+ *   return <div>{value}</div>
+ * }
+ * ```
+ * @category React Hooks and Components
+ */
+export declare function useRemoteCellValue<T>(cell: Out<T>, engineId: string): T | undefined;
+
+/**
+ * Returns the up-to-date values of the passed cells from an engine identified by `engineId`.
+ * Returns `undefined` when the engine is not available yet.
+ *
+ * @param options - An object containing the cells array and engineId.
+ * @returns An array with the current values of the cells, or `undefined` if the engine is not available.
+ *
+ * @example
+ * ```tsx
+ * const foo$ = Cell('foo')
+ * const bar$ = Cell('bar')
+ * // ...
+ * function SiblingComponent() {
+ *   const values = useRemoteCellValues({ cells: [foo$, bar$], engineId: 'my-engine' })
+ *   if (values === undefined) return <div>Loading...</div>
+ *   const [foo, bar] = values
+ *   return <div>{foo} - {bar}</div>
+ * }
+ * ```
+ * @category React Hooks and Components
+ */
+/** @hidden */
+export declare function useRemoteCellValues<T1>(options: RemoteCellValuesOptions<[T1]>): [T1] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2>(options: RemoteCellValuesOptions<[T1, T2]>): [T1, T2] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3>(options: RemoteCellValuesOptions<[T1, T2, T3]>): [T1, T2, T3] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4>(options: RemoteCellValuesOptions<[T1, T2, T3, T4]>): [T1, T2, T3, T4] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5]>): [T1, T2, T3, T4, T5] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6]>): [T1, T2, T3, T4, T5, T6] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6, T7>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6, T7]>): [T1, T2, T3, T4, T5, T6, T7] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6, T7, T8>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6, T7, T8]>): [T1, T2, T3, T4, T5, T6, T7, T8] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6, T7, T8, T9>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6, T7, T8, T9]>): [T1, T2, T3, T4, T5, T6, T7, T8, T9] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6, T7, T8, T9, T10]>): [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11]>): [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12]>): [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12, T13>(options: RemoteCellValuesOptions<[T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12, T13]>): [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10, T11, T12, T13] | undefined;
+
+/** @hidden */
+export declare function useRemoteCellValues(options: RemoteCellValuesOptions<unknown[]>): undefined | unknown[];
+
+/**
+ * Returns a function that publishes values to a node in an engine identified by `engineId`.
+ * Returns a no-op function when the engine is not available yet.
+ *
+ * @param node$ - The node to publish to.
+ * @param engineId - The ID of the engine to publish to (must match the `engineId` prop of an EngineProvider).
+ * @returns A publisher function that accepts values of type T.
+ * @typeParam T - The type of values that the node accepts.
+ *
+ * @example
+ * ```tsx
+ * const trigger$ = Trigger()
+ * // ...
+ * function SiblingComponent() {
+ *   const publish = useRemotePublisher(trigger$, 'my-engine')
+ *   return <button onClick={() => publish()}>Trigger</button>
+ * }
+ * ```
+ * @category React Hooks and Components
+ */
+export declare function useRemotePublisher<T>(node$: Inp<T>, engineId: string): (value: T) => void;
+
 export { }

package/dist/index.js

@@ -1,63 +1,130 @@
-import { jsx as C } from "react/jsx-runtime";
-import { Engine as E } from "@virtuoso.dev/reactive-engine-core";
-import * as u from "react";
-import b from "tiny-invariant";
-const a = typeof document < "u" ? u.useLayoutEffect : u.useEffect, g = u.createContext(null);
-function o() {
-  const e = u.useContext(g);
-  return b(e !== null, "useEngine must be used within an EngineProvider"), e;
-}
-function S(e) {
-  const n = o();
+import { jsx as v } from "react/jsx-runtime";
+import { Engine as S } from "@virtuoso.dev/reactive-engine-core";
+import * as s from "react";
+import R from "tiny-invariant";
+const i = typeof document < "u" ? s.useLayoutEffect : s.useEffect, l = /* @__PURE__ */ new Map();
+function C(e) {
+  let n = l.get(e);
+  return n || (n = { engine: null, subscribers: /* @__PURE__ */ new Set() }, l.set(e, n)), n;
+}
+function m(e, n) {
+  const t = C(e);
+  t.engine = n, t.subscribers.forEach((u) => {
+    u();
+  }), t.subscribers.size === 0 && n === null && l.delete(e);
+}
+function p(e, n) {
+  const t = C(e);
+  return t.subscribers.add(n), () => {
+    t.subscribers.delete(n), t.subscribers.size === 0 && t.engine === null && l.delete(e);
+  };
+}
+function f(e) {
+  var n;
+  return ((n = l.get(e)) == null ? void 0 : n.engine) ?? null;
+}
+const E = s.createContext(null);
+function a() {
+  const e = s.useContext(E);
+  return R(e !== null, "useEngine must be used within an EngineProvider"), e;
+}
+function x(e) {
+  const n = a();
   n.register(e);
-  const t = u.useCallback((r) => n.sub(e, r), [n, e]);
-  return u.useSyncExternalStore(
+  const t = s.useCallback((u) => n.sub(e, u), [n, e]);
+  return s.useSyncExternalStore(
     t,
     () => n.getValue(e),
     () => n.getValue(e)
   );
 }
-function V(e) {
-  const n = o();
+function h(e) {
+  const n = a();
   n.register(e);
-  const [t, r] = u.useState(() => n.getValue(e));
-  return a(() => n.sub(e, r), [n, e]), t;
+  const [t, u] = s.useState(() => n.getValue(e));
+  return i(() => n.sub(e, u), [n, e]), t;
 }
-const f = "useSyncExternalStore" in u ? S : V;
-function h(...e) {
-  const n = o(), t = u.useMemo(() => n.combineCells(e), [n, ...e]);
-  return f(t);
+const V = "useSyncExternalStore" in s ? x : h;
+function j(...e) {
+  const n = a(), t = s.useMemo(() => n.combineCells(e), [n, ...e]);
+  return V(t);
 }
-function x(e) {
-  const n = o();
-  return n.register(e), u.useCallback(
+function P(e) {
+  const n = a();
+  return n.register(e), s.useCallback(
     (t) => {
       n.pub(e, t);
     },
     [n, e]
   );
 }
-function P(e) {
-  return [f(e), x(e)];
-}
-const d = ({ children: e, engineId: n, initFn: t, initWith: r, updateDeps: l, updateFn: i }) => {
-  const [s, m] = u.useState(null);
-  return a(() => {
-    const c = new E(r, n);
-    return m(c), t == null || t(c), () => {
-      c.dispose();
+function O(e) {
+  return [V(e), P(e)];
+}
+function b(e) {
+  const [n, t] = s.useState(() => f(e));
+  return i(() => (t(f(e)), p(e, () => {
+    t(f(e));
+  })), [e]), n;
+}
+function w(e, n) {
+  const t = b(n), [u, r] = s.useState(() => t ? t.getValue(e) : void 0);
+  return i(() => {
+    if (!t) {
+      r(void 0);
+      return;
+    }
+    return t.register(e), r(t.getValue(e)), t.sub(e, r);
+  }, [t, e]), u;
+}
+function M(e, n) {
+  const t = b(n);
+  return i(() => {
+    t && t.register(e);
+  }, [t, e]), s.useCallback(
+    (u) => {
+      t && t.pub(e, u);
+    },
+    [t, e]
+  );
+}
+function T(e, n) {
+  return [w(e, n), M(e, n)];
+}
+function W(e) {
+  const { cells: n, engineId: t } = e, u = b(t), r = s.useMemo(() => u ? u.combineCells(n) : null, [u, ...n]), [c, o] = s.useState(
+    () => u && r ? u.getValue(r) : void 0
+  );
+  return i(() => {
+    if (!u || !r) {
+      o(void 0);
+      return;
+    }
+    return u.register(r), o(u.getValue(r)), u.sub(r, o);
+  }, [u, r]), c;
+}
+const q = ({ children: e, engineId: n, initFn: t, initWith: u, updateDeps: r, updateFn: c }) => {
+  const [o, y] = s.useState(null);
+  return i(() => {
+    const g = new S(u, n);
+    return y(g), t == null || t(g), n && m(n, g), () => {
+      n && m(n, null), g.dispose();
     };
-  }, [r, n]), a(() => {
-    s && (i == null || i(s));
-  }, [s, ...l ?? []]), s && /* @__PURE__ */ C(g.Provider, { value: s, children: e });
+  }, [u, n]), i(() => {
+    o && (c == null || c(o));
+  }, [o, ...r ?? []]), o && /* @__PURE__ */ v(E.Provider, { value: o, children: e });
 };
 export {
-  g as EngineContext,
-  d as EngineProvider,
-  P as useCell,
-  f as useCellValue,
-  h as useCellValues,
-  o as useEngine,
-  a as useIsomorphicLayoutEffect,
-  x as usePublisher
+  E as EngineContext,
+  q as EngineProvider,
+  O as useCell,
+  V as useCellValue,
+  j as useCellValues,
+  a as useEngine,
+  i as useIsomorphicLayoutEffect,
+  P as usePublisher,
+  T as useRemoteCell,
+  w as useRemoteCellValue,
+  W as useRemoteCellValues,
+  M as useRemotePublisher
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,13 +21,11 @@
     "tiny-invariant": "^1.3.3"
   },
   "peerDependencies": {
-    "@virtuoso.dev/reactive-engine-core": ">=0.0.3",
+    "@virtuoso.dev/reactive-engine-core": ">=0.0.4",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
     "@types/node": "^22.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -35,7 +33,6 @@
     "@vitest/browser-playwright": "^4.0.16",
     "@vitejs/plugin-react": "^4.5.0",
     "eslint": "^9.24.0",
-    "jsdom": "^27.4.0",
     "playwright": "^1.33.0",
     "prettier": "^3.5.3",
     "react": "^19.2.3",
@@ -45,7 +42,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.16",
     "vitest-browser-react": "^2.0.2",
-    "@virtuoso.dev/reactive-engine-core": "0.0.3",
+    "@virtuoso.dev/reactive-engine-core": "0.0.4",
     "@virtuoso.dev/tooling": "0.1.0"
   },
   "files": [