@virtuoso.dev/reactive-engine-react 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +23 -5
- package/dist/index.js +40 -40
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -17,7 +17,8 @@ export declare const EngineContext: React_2.Context<Engine | null>;
|
|
|
17
17
|
*
|
|
18
18
|
* @example
|
|
19
19
|
* ```tsx
|
|
20
|
-
* import { Cell, useCellValue,
|
|
20
|
+
* import { Cell, useCellValue, EngineProvider } from '@virtuoso.dev/reactive-engine-react'
|
|
21
|
+
*
|
|
21
22
|
* const cell$ = Cell(0)
|
|
22
23
|
*
|
|
23
24
|
* function MyComponent() {
|
|
@@ -26,7 +27,16 @@ export declare const EngineContext: React_2.Context<Engine | null>;
|
|
|
26
27
|
* }
|
|
27
28
|
*
|
|
28
29
|
* export default function App() {
|
|
29
|
-
*
|
|
30
|
+
* const [count, setCount] = useState(0)
|
|
31
|
+
* return (
|
|
32
|
+
* <EngineProvider
|
|
33
|
+
* initFn={(engine) => engine.register(cell$)}
|
|
34
|
+
* updateFn={(engine) => engine.pub(cell$, count)}
|
|
35
|
+
* updateDeps={[count]}
|
|
36
|
+
* >
|
|
37
|
+
* <MyComponent />
|
|
38
|
+
* </EngineProvider>
|
|
39
|
+
* )
|
|
30
40
|
* }
|
|
31
41
|
* ```
|
|
32
42
|
*
|
|
@@ -48,14 +58,22 @@ export declare interface EngineProviderProps {
|
|
|
48
58
|
* Optional stable ID for storage namespacing. Use this for multi-engine apps to prevent storage key conflicts.
|
|
49
59
|
*/
|
|
50
60
|
engineId?: string;
|
|
61
|
+
/**
|
|
62
|
+
* A callback invoked once when the engine is created. Use this to register nodes and set up subscriptions.
|
|
63
|
+
*/
|
|
64
|
+
initFn?: (engine: Engine) => void;
|
|
51
65
|
/**
|
|
52
66
|
* The initial values to set in the engine.
|
|
53
67
|
*/
|
|
54
68
|
initWith?: Record<symbol, unknown>;
|
|
55
69
|
/**
|
|
56
|
-
* The
|
|
70
|
+
* The dependency array for the update effect. When any of these values change, `updateFn` is called.
|
|
71
|
+
*/
|
|
72
|
+
updateDeps?: unknown[];
|
|
73
|
+
/**
|
|
74
|
+
* A callback invoked when any value in `updateDeps` changes. Use this to publish new values to the engine.
|
|
57
75
|
*/
|
|
58
|
-
|
|
76
|
+
updateFn?: (engine: Engine) => void;
|
|
59
77
|
}
|
|
60
78
|
|
|
61
79
|
/**
|
|
@@ -178,7 +196,7 @@ export declare const useIsomorphicLayoutEffect: typeof React_2.useLayoutEffect;
|
|
|
178
196
|
*
|
|
179
197
|
* @example
|
|
180
198
|
* ```tsx
|
|
181
|
-
* import {Stream, e, usePublisher} from '@virtuoso.dev/reactive-engine'
|
|
199
|
+
* import {Stream, e, usePublisher} from '@virtuoso.dev/reactive-engine-react'
|
|
182
200
|
*
|
|
183
201
|
* const stream$ = Stream<number>()
|
|
184
202
|
* e.sub(stream, (value) => console.log(`${value} was published in the stream`))
|
package/dist/index.js
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Engine as
|
|
3
|
-
import * as
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { jsx as C } from "react/jsx-runtime";
|
|
2
|
+
import { Engine as E } from "@virtuoso.dev/reactive-engine-core";
|
|
3
|
+
import * as u from "react";
|
|
4
|
+
import b from "tiny-invariant";
|
|
5
|
+
const a = typeof document < "u" ? u.useLayoutEffect : u.useEffect, g = u.createContext(null);
|
|
6
6
|
function o() {
|
|
7
|
-
const e =
|
|
8
|
-
return
|
|
7
|
+
const e = u.useContext(g);
|
|
8
|
+
return b(e !== null, "useEngine must be used within an EngineProvider"), e;
|
|
9
9
|
}
|
|
10
|
-
function
|
|
10
|
+
function S(e) {
|
|
11
11
|
const n = o();
|
|
12
12
|
n.register(e);
|
|
13
|
-
const
|
|
14
|
-
return
|
|
15
|
-
|
|
13
|
+
const t = u.useCallback((r) => n.sub(e, r), [n, e]);
|
|
14
|
+
return u.useSyncExternalStore(
|
|
15
|
+
t,
|
|
16
16
|
() => n.getValue(e),
|
|
17
17
|
() => n.getValue(e)
|
|
18
18
|
);
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function V(e) {
|
|
21
21
|
const n = o();
|
|
22
22
|
n.register(e);
|
|
23
|
-
const [
|
|
24
|
-
return
|
|
23
|
+
const [t, r] = u.useState(() => n.getValue(e));
|
|
24
|
+
return a(() => n.sub(e, r), [n, e]), t;
|
|
25
25
|
}
|
|
26
|
-
const
|
|
27
|
-
function
|
|
28
|
-
const n = o(),
|
|
29
|
-
return
|
|
26
|
+
const f = "useSyncExternalStore" in u ? S : V;
|
|
27
|
+
function h(...e) {
|
|
28
|
+
const n = o(), t = u.useMemo(() => n.combineCells(e), [n, ...e]);
|
|
29
|
+
return f(t);
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function x(e) {
|
|
32
32
|
const n = o();
|
|
33
|
-
return n.register(e),
|
|
34
|
-
(
|
|
35
|
-
n.pub(e,
|
|
33
|
+
return n.register(e), u.useCallback(
|
|
34
|
+
(t) => {
|
|
35
|
+
n.pub(e, t);
|
|
36
36
|
},
|
|
37
37
|
[n, e]
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
|
-
function
|
|
41
|
-
return [
|
|
40
|
+
function P(e) {
|
|
41
|
+
return [f(e), x(e)];
|
|
42
42
|
}
|
|
43
|
-
const
|
|
44
|
-
const [s,
|
|
45
|
-
return
|
|
46
|
-
const
|
|
47
|
-
return
|
|
48
|
-
|
|
43
|
+
const d = ({ children: e, engineId: n, initFn: t, initWith: r, updateDeps: l, updateFn: i }) => {
|
|
44
|
+
const [s, m] = u.useState(null);
|
|
45
|
+
return a(() => {
|
|
46
|
+
const c = new E(r, n);
|
|
47
|
+
return m(c), t == null || t(c), () => {
|
|
48
|
+
c.dispose();
|
|
49
49
|
};
|
|
50
|
-
}, [
|
|
51
|
-
s == null || s
|
|
52
|
-
}, [
|
|
50
|
+
}, [r, n]), a(() => {
|
|
51
|
+
s && (i == null || i(s));
|
|
52
|
+
}, [s, ...l ?? []]), s && /* @__PURE__ */ C(g.Provider, { value: s, children: e });
|
|
53
53
|
};
|
|
54
54
|
export {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
g as EngineContext,
|
|
56
|
+
d as EngineProvider,
|
|
57
|
+
P as useCell,
|
|
58
|
+
f as useCellValue,
|
|
59
|
+
h as useCellValues,
|
|
60
60
|
o as useEngine,
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
a as useIsomorphicLayoutEffect,
|
|
62
|
+
x as usePublisher
|
|
63
63
|
};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"private": false,
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"type": "module",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.3",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"types": "dist/index.d.ts",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"tiny-invariant": "^1.3.3"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@virtuoso.dev/reactive-engine-core": ">=0.0.
|
|
24
|
+
"@virtuoso.dev/reactive-engine-core": ">=0.0.3",
|
|
25
25
|
"react": ">= 18",
|
|
26
26
|
"react-dom": ">= 18"
|
|
27
27
|
},
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"vite-plugin-dts": "^4.5.4",
|
|
46
46
|
"vitest": "^4.0.16",
|
|
47
47
|
"vitest-browser-react": "^2.0.2",
|
|
48
|
-
"@virtuoso.dev/reactive-engine-core": "0.0.
|
|
48
|
+
"@virtuoso.dev/reactive-engine-core": "0.0.3",
|
|
49
49
|
"@virtuoso.dev/tooling": "0.1.0"
|
|
50
50
|
},
|
|
51
51
|
"files": [
|