@virtuoso.dev/reactive-engine-react 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -17,7 +17,8 @@ export declare const EngineContext: React_2.Context<Engine | null>;
  *
  * @example
  * ```tsx
- * import { Cell, useCellValue, e, EngineProvider } from '@virtuoso.dev/reactive-engine'
+ * import { Cell, useCellValue, EngineProvider } from '@virtuoso.dev/reactive-engine-react'
+ *
  * const cell$ = Cell(0)
  *
  * function MyComponent() {
@@ -26,7 +27,16 @@ export declare const EngineContext: React_2.Context<Engine | null>;
  * }
  *
  * export default function App() {
- *   return <EngineProvider><MyComponent /></EngineProvider>
+ *   const [count, setCount] = useState(0)
+ *   return (
+ *     <EngineProvider
+ *       initFn={(engine) => engine.register(cell$)}
+ *       updateFn={(engine) => engine.pub(cell$, count)}
+ *       updateDeps={[count]}
+ *     >
+ *       <MyComponent />
+ *     </EngineProvider>
+ *   )
  * }
  * ```
  *
@@ -48,14 +58,22 @@ export declare interface EngineProviderProps {
      * Optional stable ID for storage namespacing. Use this for multi-engine apps to prevent storage key conflicts.
      */
     engineId?: string;
+    /**
+     * A callback invoked once when the engine is created. Use this to register nodes and set up subscriptions.
+     */
+    initFn?: (engine: Engine) => void;
     /**
      * The initial values to set in the engine.
      */
     initWith?: Record<symbol, unknown>;
     /**
-     * The values to update in the engine on each render.
+     * The dependency array for the update effect. When any of these values change, `updateFn` is called.
+     */
+    updateDeps?: unknown[];
+    /**
+     * A callback invoked when any value in `updateDeps` changes. Use this to publish new values to the engine.
      */
-    updateWith?: Record<symbol, unknown>;
+    updateFn?: (engine: Engine) => void;
 }
 
 /**
@@ -116,8 +134,6 @@ export declare const useCellValue: typeof useCellValueWithStore;
  * }
  * ```
  */
-export declare function useCellValues(...cells: Out[]): unknown[];
-
 /** @hidden */
 export declare function useCellValues<T1>(...cells: [Out<T1>]): [T1];
 
@@ -157,6 +173,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;
 
 /**
@@ -178,7 +197,7 @@ export declare const useIsomorphicLayoutEffect: typeof React_2.useLayoutEffect;
  *
  * @example
  * ```tsx
- * import {Stream, e, usePublisher} from '@virtuoso.dev/reactive-engine'
+ * import {Stream, e, usePublisher} from '@virtuoso.dev/reactive-engine-react'
  *
  * const stream$ = Stream<number>()
  * e.sub(stream, (value) => console.log(`${value} was published in the stream`))

package/dist/index.js

@@ -1,63 +1,63 @@
-import { jsx as g } from "react/jsx-runtime";
-import { Engine as m } from "@virtuoso.dev/reactive-engine-core";
-import * as t from "react";
-import C from "tiny-invariant";
-const i = typeof document < "u" ? t.useLayoutEffect : t.useEffect, c = t.createContext(null);
+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 = t.useContext(c);
-  return C(e !== null, "useEngine must be used within an EngineProvider"), e;
+  const e = u.useContext(g);
+  return b(e !== null, "useEngine must be used within an EngineProvider"), e;
 }
-function E(e) {
+function S(e) {
   const n = o();
   n.register(e);
-  const u = t.useCallback((r) => n.sub(e, r), [n, e]);
-  return t.useSyncExternalStore(
-    u,
+  const t = u.useCallback((r) => n.sub(e, r), [n, e]);
+  return u.useSyncExternalStore(
+    t,
     () => n.getValue(e),
     () => n.getValue(e)
   );
 }
-function b(e) {
+function V(e) {
   const n = o();
   n.register(e);
-  const [u, r] = t.useState(() => n.getValue(e));
-  return i(() => n.sub(e, r), [n, e]), u;
+  const [t, r] = u.useState(() => n.getValue(e));
+  return a(() => n.sub(e, r), [n, e]), t;
 }
-const l = "useSyncExternalStore" in t ? E : b;
-function d(...e) {
-  const n = o(), u = t.useMemo(() => n.combineCells(e), [n, ...e]);
-  return l(u);
+const f = "useSyncExternalStore" in u ? S : V;
+function h(...e) {
+  const n = o(), t = u.useMemo(() => n.combineCells(e), [n, ...e]);
+  return f(t);
 }
-function p(e) {
+function x(e) {
   const n = o();
-  return n.register(e), t.useCallback(
-    (u) => {
-      n.pub(e, u);
+  return n.register(e), u.useCallback(
+    (t) => {
+      n.pub(e, t);
     },
     [n, e]
   );
 }
-function v(e) {
-  return [l(e), p(e)];
+function P(e) {
+  return [f(e), x(e)];
 }
-const y = ({ children: e, engineId: n, initWith: u, updateWith: r = {} }) => {
-  const [s, f] = t.useState(null);
-  return i(() => {
-    const a = new m(u, n);
-    return f(a), () => {
-      a.dispose();
+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();
     };
-  }, [u, n]), i(() => {
-    s == null || s.pubIn(r);
-  }, [r, s]), s && /* @__PURE__ */ g(c.Provider, { value: s, children: e });
+  }, [r, n]), a(() => {
+    s && (i == null || i(s));
+  }, [s, ...l ?? []]), s && /* @__PURE__ */ C(g.Provider, { value: s, children: e });
 };
 export {
-  c as EngineContext,
-  y as EngineProvider,
-  v as useCell,
-  l as useCellValue,
-  d as useCellValues,
+  g as EngineContext,
+  d as EngineProvider,
+  P as useCell,
+  f as useCellValue,
+  h as useCellValues,
   o as useEngine,
-  i as useIsomorphicLayoutEffect,
-  p as usePublisher
+  a as useIsomorphicLayoutEffect,
+  x as usePublisher
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
     "tiny-invariant": "^1.3.3"
   },
   "peerDependencies": {
-    "@virtuoso.dev/reactive-engine-core": ">=0.0.2",
+    "@virtuoso.dev/reactive-engine-core": ">=0.0.3",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
@@ -45,8 +45,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.16",
     "vitest-browser-react": "^2.0.2",
-    "@virtuoso.dev/reactive-engine-core": "0.0.2",
-    "@virtuoso.dev/tooling": "0.1.0"
+    "@virtuoso.dev/tooling": "0.1.0",
+    "@virtuoso.dev/reactive-engine-core": "0.0.3"
   },
   "files": [
     "dist"