react-rx 4.1.0 → 4.1.2-canary.0
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.cjs +38 -35
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +40 -37
- package/dist/index.js.map +1 -1
- package/package.json +12 -14
- package/src/useObservable.ts +53 -44
package/dist/index.cjs
CHANGED
|
@@ -6,57 +6,60 @@ function getValue(value) {
|
|
|
6
6
|
}
|
|
7
7
|
const cache = /* @__PURE__ */ new WeakMap();
|
|
8
8
|
function useObservable(observable, initialValue) {
|
|
9
|
-
const $ = reactCompilerRuntime.c(
|
|
9
|
+
const $ = reactCompilerRuntime.c(18);
|
|
10
|
+
let t0;
|
|
11
|
+
$[0] !== initialValue ? (t0 = () => () => getValue(initialValue), $[0] = initialValue, $[1] = t0) : t0 = $[1];
|
|
12
|
+
const [getInitialValue] = react.useState(t0);
|
|
13
|
+
let t1;
|
|
10
14
|
if (!cache.has(observable)) {
|
|
11
15
|
const entry = {
|
|
12
|
-
snapshot:
|
|
16
|
+
snapshot: getInitialValue()
|
|
13
17
|
};
|
|
14
|
-
entry.observable = observable.pipe(operators.map(
|
|
18
|
+
entry.observable = observable.pipe(operators.map((value) => ({
|
|
19
|
+
snapshot: value,
|
|
20
|
+
error: void 0
|
|
21
|
+
})), rxjs.catchError((error) => rxjs.of({
|
|
22
|
+
snapshot: void 0,
|
|
23
|
+
error
|
|
24
|
+
})), operators.tap((t22) => {
|
|
15
25
|
const {
|
|
16
26
|
snapshot,
|
|
17
27
|
error: error_0
|
|
18
|
-
} =
|
|
28
|
+
} = t22;
|
|
19
29
|
entry.snapshot = snapshot, entry.error = error_0;
|
|
20
|
-
}), operators.map(
|
|
21
|
-
|
|
30
|
+
}), operators.map((value_0) => {
|
|
31
|
+
}), rxjs.finalize(() => cache.delete(observable)), rxjs.share({
|
|
32
|
+
resetOnRefCountZero: () => rxjs.timer(0, rxjs.asapScheduler)
|
|
22
33
|
})), entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
|
|
23
34
|
}
|
|
24
|
-
let
|
|
25
|
-
$[
|
|
26
|
-
const instance =
|
|
27
|
-
let
|
|
28
|
-
$[
|
|
35
|
+
let t2;
|
|
36
|
+
$[2] !== observable ? (t2 = cache.get(observable), $[2] = observable, $[3] = t2) : t2 = $[3];
|
|
37
|
+
const instance = t2;
|
|
38
|
+
let t3;
|
|
39
|
+
$[4] !== instance.observable ? (t3 = (onStoreChange) => {
|
|
29
40
|
const subscription_0 = instance.observable.subscribe(onStoreChange);
|
|
30
41
|
return () => {
|
|
31
42
|
subscription_0.unsubscribe();
|
|
32
43
|
};
|
|
33
|
-
}, $[
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
$[4] !== instance.error || $[5] !== instance.snapshot ? (t2 = () => {
|
|
44
|
+
}, $[4] = instance.observable, $[5] = t3) : t3 = $[5];
|
|
45
|
+
let t4;
|
|
46
|
+
$[6] !== instance.error || $[7] !== instance.snapshot ? (t4 = () => {
|
|
37
47
|
if (instance.error)
|
|
38
48
|
throw instance.error;
|
|
39
49
|
return instance.snapshot;
|
|
40
|
-
}, $[
|
|
41
|
-
let
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
function _temp$1(value) {
|
|
56
|
-
return {
|
|
57
|
-
snapshot: value,
|
|
58
|
-
error: void 0
|
|
59
|
-
};
|
|
50
|
+
}, $[6] = instance.error, $[7] = instance.snapshot, $[8] = t4) : t4 = $[8];
|
|
51
|
+
let t5;
|
|
52
|
+
$[9] !== t3 || $[10] !== t4 ? (t5 = {
|
|
53
|
+
subscribe: t3,
|
|
54
|
+
getSnapshot: t4
|
|
55
|
+
}, $[9] = t3, $[10] = t4, $[11] = t5) : t5 = $[11], t1 = t5;
|
|
56
|
+
const store = t1;
|
|
57
|
+
let t6, t7;
|
|
58
|
+
$[12] !== store.subscribe ? (t6 = () => {
|
|
59
|
+
console.log("stor.subscribe changed", store.subscribe);
|
|
60
|
+
}, t7 = [store.subscribe], $[12] = store.subscribe, $[13] = t6, $[14] = t7) : (t6 = $[13], t7 = $[14]), react.useEffect(t6, t7);
|
|
61
|
+
let t8;
|
|
62
|
+
return $[15] !== initialValue || $[16] !== getInitialValue ? (t8 = typeof initialValue > "u" ? void 0 : () => getInitialValue(), $[15] = initialValue, $[16] = getInitialValue, $[17] = t8) : t8 = $[17], react.useSyncExternalStore(store.subscribe, store.getSnapshot, t8);
|
|
60
63
|
}
|
|
61
64
|
function useObservableEvent(handleEvent) {
|
|
62
65
|
const $ = reactCompilerRuntime.c(6), [t0] = react.useState(_temp), [calls$, call] = t0;
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useState, useSyncExternalStore} from 'react'\nimport {\n asapScheduler,\n catchError,\n finalize,\n type Observable,\n type ObservedValueOf,\n of,\n share,\n timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n observable: Observable<void>\n snapshot: T\n error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n observable: ObservableType,\n initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n observable: ObservableType,\n initialValue: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n observable: ObservableType,\n initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n const [getInitialValue] = useState(\n () => () => getValue(initialValue) as ObservedValueOf<ObservableType>,\n )\n\n const store = useMemo(() => {\n if (!cache.has(observable)) {\n const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n snapshot: getInitialValue(),\n }\n entry.observable = observable.pipe(\n map((value) => ({snapshot: value, error: undefined})),\n catchError((error) => of({snapshot: undefined, error})),\n tap(({snapshot, error}) => {\n entry.snapshot = snapshot\n entry.error = error\n }),\n // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n map((value) => void value),\n // Ensure that the cache entry is deleted when the observable completes or errors.\n finalize(() => cache.delete(observable)),\n share({resetOnRefCountZero: () => timer(0, asapScheduler)}),\n )\n\n // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n const subscription = entry.observable.subscribe()\n subscription.unsubscribe()\n\n cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n }\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const instance = cache.get(observable)!\n\n return {\n subscribe: (onStoreChange: () => void) => {\n const subscription = instance.observable.subscribe(onStoreChange)\n return () => {\n subscription.unsubscribe()\n }\n },\n getSnapshot: () => {\n if (instance.error) {\n throw instance.error\n }\n return instance.snapshot\n },\n }\n }, [observable, getInitialValue])\n\n useEffect(() => {\n console.log('stor.subscribe changed', store.subscribe)\n }, [store.subscribe])\n\n return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n store.subscribe,\n store.getSnapshot,\n typeof initialValue === 'undefined' ? undefined : () => getInitialValue(),\n )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n const [[calls$, call]] = useState(() => observableCallback<T>())\n\n const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n useEffect(() => {\n const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n return () => subscription.unsubscribe()\n }, [calls$, onEvent])\n\n return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","t0","getInitialValue","useState","t1","has","entry","snapshot","pipe","map","error","undefined","catchError","of","tap","t2","error_0","value_0","finalize","delete","share","resetOnRefCountZero","timer","asapScheduler","subscribe","unsubscribe","set","get","instance","t3","onStoreChange","subscription_0","subscription","t4","t5","getSnapshot","store","t6","t7","log","useEffect","t8","useSyncExternalStore","useObservableEvent","handleEvent","_temp","calls$","call","onEvent","useEffectEvent","observable_0","observableCallback"],"mappings":";;;AAaA,SAASA,SAAYC,OAA2C;AAC9D,SAAO,OAAOA,SAAU,aAAaA,MAAUA,IAAAA;AACjD;AAQA,MAAMC,4BAAYC,QAA2C;AAiBtDC,SAAAA,cAAAC,YAAAC,cAAA;AAAAC,QAAAA,IAAAC,uBAAA,EAAA;AAAAC,MAAAA;AAAAF,WAAAD,gBAKHG,KAAAA,MAAA,MAAYT,SAASM,YAAY,GAAoCC,OAAAD,cAAAC,OAAAE,MAAAA,KAAAF,EAAA,CAAA;AADvE,QAAA,CAAAG,eAAA,IAA0BC,MAAAA,SACxBF,EACF;AAACG,MAAAA;AAAA,MAAA,CAGMV,MAAAW,IAAUR,UAAU,GAAC;AACxB,UAAAS,QAAA;AAAA,MAAAC,UACYL,gBAAgB;AAAA,IAAC;AAE7BI,UAAKT,aAAcA,WAAUW,KAC3BC,UAAAA,IAAAhB,CAAA,WAAA;AAAA,MAAAc,UAA2Bd;AAAAA,MAAKiB,OAAAC;AAAAA,IAAoB,EAAA,GACpDC,KAAAA,WAAAF,CAAAA,UAAsBG,KAAAA,GAAA;AAAA,MAAAN,UAAAI;AAAAA,MAAAD;AAAAA,IAAAA,CAA+B,CAAC,GACtDI,cAAAC,CAAAA,QAAA;AAAK,YAAA;AAAA,QAAAR;AAAAA,QAAAG,OAAAM;AAAAA,MAAAA,IAAAD;AACER,YAAAA,WAAYA,UACjBD,MAAKI,QAASA;AAAAA,IAAAA,CACf,GAGDD,UAAAA,IAAAQ,CAAA,YAAA;AAAA,IAAA,CAAyB,GAEzBC,cAAexB,MAAAA,MAAAyB,OAAatB,UAAU,CAAC,GACvCuB,WAAA;AAAA,MAAAC,qBAAAA,MAAkCC,cAAAC,KAAsB,aAAA;AAAA,IAAE,CAAA,CAC5D,GAGqBjB,MAAKT,WAAA2B,UACdC,EAAAA,YAEZ/B,GAAAA,MAAAgC,IAAU7B,YAAYS,KAAqD;AAAA,EAAA;AAACS,MAAAA;AAAAhB,WAAAF,cAG7DkB,KAAArB,MAAAiC,IAAU9B,UAAU,GAACE,OAAAF,YAAAE,OAAAgB,MAAAA,KAAAhB,EAAA,CAAA;AAAtC,QAAA6B,WAAiBb;AAAsBc,MAAAA;AAAA9B,IAAA,CAAA,MAAA6B,SAAA/B,cAG1BgC,KAAAC,CAAA,kBAAA;AACT,UAAAC,iBAAqBH,SAAQ/B,WAAA2B,UAAsBM,aAAa;AAAC,WAAA,MAAA;AAE/DE,qBAAYP,YAAa;AAAA,IAAC;AAAA,EAE7B1B,GAAAA,EAAA,CAAA,IAAA6B,SAAA/B,YAAAE,OAAA8B,MAAAA,KAAA9B,EAAA,CAAA;AAAAkC,MAAAA;AAAAlC,IAAA6B,CAAAA,MAAAA,SAAAlB,SAAAX,EAAA,CAAA,MAAA6B,SAAArB,YACY0B,KAAAA,MAAA;AAAA,QACPL,SAAQlB;AAAA,YACJkB,SAAQlB;AAAA,WAETkB,SAAQrB;AAAAA,EAAAA,GAChBR,EAAA,CAAA,IAAA6B,SAAAlB,OAAAX,EAAA,CAAA,IAAA6B,SAAArB,UAAAR,OAAAkC,MAAAA,KAAAlC,EAAA,CAAA;AAAAmC,MAAAA;AAAAnC,IAAA8B,CAAAA,MAAAA,MAAA9B,UAAAkC,MAZIC,KAAA;AAAA,IAAAV,WACMK;AAAAA,IAKVM,aACYF;AAAAA,EAAAA,GAMdlC,OAAA8B,IAAA9B,QAAAkC,IAAAlC,QAAAmC,MAAAA,KAAAnC,EAAA,EAAA,GAbDK,KAAO8B;AA7BT,QAAAE,QAAchC;AA2CmB,MAAAiC,IAAAC;AAAAvC,IAAA,EAAA,MAAAqC,MAAAZ,aAEvBa,KAAAA,MAAA;AACRE,YAAAA,IAAY,0BAA0BH,MAAKZ,SAAU;AAAA,EACpDc,GAAAA,KAAA,CAACF,MAAKZ,SAAA,GAAWzB,EAAA,EAAA,IAAAqC,MAAAZ,WAAAzB,QAAAsC,IAAAtC,QAAAuC,OAAAD,KAAAtC,EAAA,EAAA,GAAAuC,KAAAvC,EAAA,EAAA,IAFpByC,gBAAUH,IAEPC,EAAiB;AAACG,MAAAA;AAAA,SAAA1C,EAAAD,EAAAA,MAAAA,gBAAAC,UAAAG,mBAKnBuC,KAAA,OAAO3C,eAAiB,MAAWa,SAAA,MAAqBT,mBAAiBH,QAAAD,cAAAC,QAAAG,iBAAAH,QAAA0C,MAAAA,KAAA1C,EAAA,EAAA,GAHpE2C,MAAAA,qBACLN,MAAKZ,WACLY,MAAKD,aACLM,EACF;AAAC;AC/FI,SAAAE,mBAAAC,aAAA;AAAA,QAAA7C,IAAAC,qBAAAA,EAAA,CAAA,GAGL,CAAAC,EAAA,IAAyBE,MAAAA,SAAA0C,KAAsC,GAAxD,CAAAC,QAAAC,IAAA,IAAA9C;AAAcG,MAAAA;AAAAL,WAAA6C,eAEUxC,KAAAP,CAAAA,eAA+B+C,YAAY/C,UAAU,GAACE,OAAA6C,aAAA7C,OAAAK,MAAAA,KAAAL,EAAA,CAAA;AAArFiD,QAAAA,UAAgBC,8BAAe7C,EAAsD;AAAC,MAAAW,IAAAc;AAAA9B,SAAAA,EAAA+C,CAAAA,MAAAA,UAAA/C,SAAAiD,WAE5EjC,KAAAA,MAAA;AACRiB,UAAAA,eAAqBc,OAAMtC,KAAA0C,CAAAA,iBAAsBF,QAAQnD,YAAU,CAAC,EAAC2B,UAAW;AAAC,WAAA,MACpEQ,aAAYP,YAAa;AAAA,EACrCI,GAAAA,KAAA,CAACiB,QAAQE,OAAO,GAACjD,OAAA+C,QAAA/C,OAAAiD,SAAAjD,OAAAgB,IAAAhB,OAAA8B,OAAAd,KAAAhB,EAAA,CAAA,GAAA8B,KAAA9B,EAAA,CAAA,IAHpByC,MAAAA,UAAUzB,IAGPc,EAAiB,GAEbkB;AAAI;AAZN,SAAAF,QAAA;AAAA,SAGmCM,sCAAsB;AAAC;;;"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { c } from "react-compiler-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { catchError, finalize, share, timer, asapScheduler
|
|
2
|
+
import { useState, useEffect, useSyncExternalStore } from "react";
|
|
3
|
+
import { catchError, of, finalize, share, timer, asapScheduler } from "rxjs";
|
|
4
4
|
import { map, tap } from "rxjs/operators";
|
|
5
5
|
import { observableCallback } from "observable-callback";
|
|
6
6
|
import { useEffectEvent } from "use-effect-event";
|
|
@@ -9,57 +9,60 @@ function getValue(value) {
|
|
|
9
9
|
}
|
|
10
10
|
const cache = /* @__PURE__ */ new WeakMap();
|
|
11
11
|
function useObservable(observable, initialValue) {
|
|
12
|
-
const $ = c(
|
|
12
|
+
const $ = c(18);
|
|
13
|
+
let t0;
|
|
14
|
+
$[0] !== initialValue ? (t0 = () => () => getValue(initialValue), $[0] = initialValue, $[1] = t0) : t0 = $[1];
|
|
15
|
+
const [getInitialValue] = useState(t0);
|
|
16
|
+
let t1;
|
|
13
17
|
if (!cache.has(observable)) {
|
|
14
18
|
const entry = {
|
|
15
|
-
snapshot:
|
|
19
|
+
snapshot: getInitialValue()
|
|
16
20
|
};
|
|
17
|
-
entry.observable = observable.pipe(map(
|
|
21
|
+
entry.observable = observable.pipe(map((value) => ({
|
|
22
|
+
snapshot: value,
|
|
23
|
+
error: void 0
|
|
24
|
+
})), catchError((error) => of({
|
|
25
|
+
snapshot: void 0,
|
|
26
|
+
error
|
|
27
|
+
})), tap((t22) => {
|
|
18
28
|
const {
|
|
19
29
|
snapshot,
|
|
20
30
|
error: error_0
|
|
21
|
-
} =
|
|
31
|
+
} = t22;
|
|
22
32
|
entry.snapshot = snapshot, entry.error = error_0;
|
|
23
|
-
}), map(
|
|
24
|
-
|
|
33
|
+
}), map((value_0) => {
|
|
34
|
+
}), finalize(() => cache.delete(observable)), share({
|
|
35
|
+
resetOnRefCountZero: () => timer(0, asapScheduler)
|
|
25
36
|
})), entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
|
|
26
37
|
}
|
|
27
|
-
let
|
|
28
|
-
$[
|
|
29
|
-
const instance =
|
|
30
|
-
let
|
|
31
|
-
$[
|
|
38
|
+
let t2;
|
|
39
|
+
$[2] !== observable ? (t2 = cache.get(observable), $[2] = observable, $[3] = t2) : t2 = $[3];
|
|
40
|
+
const instance = t2;
|
|
41
|
+
let t3;
|
|
42
|
+
$[4] !== instance.observable ? (t3 = (onStoreChange) => {
|
|
32
43
|
const subscription_0 = instance.observable.subscribe(onStoreChange);
|
|
33
44
|
return () => {
|
|
34
45
|
subscription_0.unsubscribe();
|
|
35
46
|
};
|
|
36
|
-
}, $[
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
$[4] !== instance.error || $[5] !== instance.snapshot ? (t2 = () => {
|
|
47
|
+
}, $[4] = instance.observable, $[5] = t3) : t3 = $[5];
|
|
48
|
+
let t4;
|
|
49
|
+
$[6] !== instance.error || $[7] !== instance.snapshot ? (t4 = () => {
|
|
40
50
|
if (instance.error)
|
|
41
51
|
throw instance.error;
|
|
42
52
|
return instance.snapshot;
|
|
43
|
-
}, $[
|
|
44
|
-
let
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
function _temp$1(value) {
|
|
59
|
-
return {
|
|
60
|
-
snapshot: value,
|
|
61
|
-
error: void 0
|
|
62
|
-
};
|
|
53
|
+
}, $[6] = instance.error, $[7] = instance.snapshot, $[8] = t4) : t4 = $[8];
|
|
54
|
+
let t5;
|
|
55
|
+
$[9] !== t3 || $[10] !== t4 ? (t5 = {
|
|
56
|
+
subscribe: t3,
|
|
57
|
+
getSnapshot: t4
|
|
58
|
+
}, $[9] = t3, $[10] = t4, $[11] = t5) : t5 = $[11], t1 = t5;
|
|
59
|
+
const store = t1;
|
|
60
|
+
let t6, t7;
|
|
61
|
+
$[12] !== store.subscribe ? (t6 = () => {
|
|
62
|
+
console.log("stor.subscribe changed", store.subscribe);
|
|
63
|
+
}, t7 = [store.subscribe], $[12] = store.subscribe, $[13] = t6, $[14] = t7) : (t6 = $[13], t7 = $[14]), useEffect(t6, t7);
|
|
64
|
+
let t8;
|
|
65
|
+
return $[15] !== initialValue || $[16] !== getInitialValue ? (t8 = typeof initialValue > "u" ? void 0 : () => getInitialValue(), $[15] = initialValue, $[16] = getInitialValue, $[17] = t8) : t8 = $[17], useSyncExternalStore(store.subscribe, store.getSnapshot, t8);
|
|
63
66
|
}
|
|
64
67
|
function useObservableEvent(handleEvent) {
|
|
65
68
|
const $ = c(6), [t0] = useState(_temp), [calls$, call] = t0;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useState, useSyncExternalStore} from 'react'\nimport {\n asapScheduler,\n catchError,\n finalize,\n type Observable,\n type ObservedValueOf,\n of,\n share,\n timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n observable: Observable<void>\n snapshot: T\n error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n observable: ObservableType,\n initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n observable: ObservableType,\n initialValue: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n observable: ObservableType,\n initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n const [getInitialValue] = useState(\n () => () => getValue(initialValue) as ObservedValueOf<ObservableType>,\n )\n\n const store = useMemo(() => {\n if (!cache.has(observable)) {\n const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n snapshot: getInitialValue(),\n }\n entry.observable = observable.pipe(\n map((value) => ({snapshot: value, error: undefined})),\n catchError((error) => of({snapshot: undefined, error})),\n tap(({snapshot, error}) => {\n entry.snapshot = snapshot\n entry.error = error\n }),\n // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n map((value) => void value),\n // Ensure that the cache entry is deleted when the observable completes or errors.\n finalize(() => cache.delete(observable)),\n share({resetOnRefCountZero: () => timer(0, asapScheduler)}),\n )\n\n // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n const subscription = entry.observable.subscribe()\n subscription.unsubscribe()\n\n cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n }\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const instance = cache.get(observable)!\n\n return {\n subscribe: (onStoreChange: () => void) => {\n const subscription = instance.observable.subscribe(onStoreChange)\n return () => {\n subscription.unsubscribe()\n }\n },\n getSnapshot: () => {\n if (instance.error) {\n throw instance.error\n }\n return instance.snapshot\n },\n }\n }, [observable, getInitialValue])\n\n useEffect(() => {\n console.log('stor.subscribe changed', store.subscribe)\n }, [store.subscribe])\n\n return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n store.subscribe,\n store.getSnapshot,\n typeof initialValue === 'undefined' ? undefined : () => getInitialValue(),\n )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n const [[calls$, call]] = useState(() => observableCallback<T>())\n\n const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n useEffect(() => {\n const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n return () => subscription.unsubscribe()\n }, [calls$, onEvent])\n\n return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","t0","getInitialValue","useState","t1","has","entry","snapshot","pipe","map","error","undefined","catchError","of","tap","t2","error_0","value_0","finalize","delete","share","resetOnRefCountZero","timer","asapScheduler","subscribe","unsubscribe","set","get","instance","t3","onStoreChange","subscription_0","subscription","t4","t5","getSnapshot","store","t6","t7","log","useEffect","t8","useSyncExternalStore","useObservableEvent","handleEvent","_temp","calls$","call","onEvent","useEffectEvent","observable_0","observableCallback"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-rx",
|
|
3
|
-
"version": "4.1.0",
|
|
3
|
+
"version": "4.1.2-canary.0",
|
|
4
4
|
"description": "React + RxJS = <3",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"action",
|
|
@@ -62,24 +62,15 @@
|
|
|
62
62
|
"dist",
|
|
63
63
|
"src"
|
|
64
64
|
],
|
|
65
|
-
"scripts": {
|
|
66
|
-
"build": "pkg build --strict --clean --check",
|
|
67
|
-
"dev": "pnpm --filter 'react-rx-website' dev",
|
|
68
|
-
"format": "prettier --cache --write .",
|
|
69
|
-
"lint": "eslint --cache .",
|
|
70
|
-
"prepublishOnly": "pnpm build",
|
|
71
|
-
"test": "vitest run --typecheck",
|
|
72
|
-
"watch": "pnpm build -- --watch"
|
|
73
|
-
},
|
|
74
65
|
"browserslist": "extends @sanity/browserslist-config",
|
|
75
66
|
"prettier": "@sanity/prettier-config",
|
|
76
67
|
"dependencies": {
|
|
77
68
|
"observable-callback": "^1.0.3",
|
|
78
|
-
"react-compiler-runtime": "19.0.0-beta-
|
|
69
|
+
"react-compiler-runtime": "19.0.0-beta-9ee70a1-20241017",
|
|
79
70
|
"use-effect-event": "^1.0.2"
|
|
80
71
|
},
|
|
81
72
|
"devDependencies": {
|
|
82
|
-
"@sanity/pkg-utils": "^6.11.
|
|
73
|
+
"@sanity/pkg-utils": "^6.11.8",
|
|
83
74
|
"@sanity/prettier-config": "^1.0.3",
|
|
84
75
|
"@sanity/semantic-release-preset": "^5.0.0",
|
|
85
76
|
"@testing-library/dom": "^10.4.0",
|
|
@@ -112,5 +103,12 @@
|
|
|
112
103
|
"react": "^18.3 || >=19.0.0-0",
|
|
113
104
|
"rxjs": "^7"
|
|
114
105
|
},
|
|
115
|
-
"
|
|
116
|
-
|
|
106
|
+
"scripts": {
|
|
107
|
+
"build": "pkg build --strict --clean --check",
|
|
108
|
+
"dev": "pnpm --filter 'react-rx-website' dev",
|
|
109
|
+
"format": "prettier --cache --write .",
|
|
110
|
+
"lint": "eslint --cache .",
|
|
111
|
+
"test": "vitest run --typecheck",
|
|
112
|
+
"watch": "pnpm build -- --watch"
|
|
113
|
+
}
|
|
114
|
+
}
|
package/src/useObservable.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {useEffect, useMemo, useState, useSyncExternalStore} from 'react'
|
|
2
2
|
import {
|
|
3
3
|
asapScheduler,
|
|
4
4
|
catchError,
|
|
@@ -42,53 +42,62 @@ export function useObservable<ObservableType extends Observable<any>, InitialVal
|
|
|
42
42
|
observable: ObservableType,
|
|
43
43
|
initialValue?: InitialValue | (() => InitialValue),
|
|
44
44
|
): InitialValue | ObservedValueOf<ObservableType> {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
entry.observable = observable.pipe(
|
|
50
|
-
map((value) => ({snapshot: value, error: undefined})),
|
|
51
|
-
catchError((error) => of({snapshot: undefined, error})),
|
|
52
|
-
tap(({snapshot, error}) => {
|
|
53
|
-
entry.snapshot = snapshot
|
|
54
|
-
entry.error = error
|
|
55
|
-
}),
|
|
56
|
-
// Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
|
|
57
|
-
// and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
|
|
58
|
-
map((value) => void value),
|
|
59
|
-
// Ensure that the cache entry is deleted when the observable completes or errors.
|
|
60
|
-
finalize(() => cache.delete(observable)),
|
|
61
|
-
share({resetOnRefCountZero: () => timer(0, asapScheduler)}),
|
|
62
|
-
)
|
|
45
|
+
const [getInitialValue] = useState(
|
|
46
|
+
() => () => getValue(initialValue) as ObservedValueOf<ObservableType>,
|
|
47
|
+
)
|
|
63
48
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
49
|
+
const store = useMemo(() => {
|
|
50
|
+
if (!cache.has(observable)) {
|
|
51
|
+
const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {
|
|
52
|
+
snapshot: getInitialValue(),
|
|
53
|
+
}
|
|
54
|
+
entry.observable = observable.pipe(
|
|
55
|
+
map((value) => ({snapshot: value, error: undefined})),
|
|
56
|
+
catchError((error) => of({snapshot: undefined, error})),
|
|
57
|
+
tap(({snapshot, error}) => {
|
|
58
|
+
entry.snapshot = snapshot
|
|
59
|
+
entry.error = error
|
|
60
|
+
}),
|
|
61
|
+
// Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
|
|
62
|
+
// and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
|
|
63
|
+
map((value) => void value),
|
|
64
|
+
// Ensure that the cache entry is deleted when the observable completes or errors.
|
|
65
|
+
finalize(() => cache.delete(observable)),
|
|
66
|
+
share({resetOnRefCountZero: () => timer(0, asapScheduler)}),
|
|
67
|
+
)
|
|
67
68
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
// Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
|
|
70
|
+
const subscription = entry.observable.subscribe()
|
|
71
|
+
subscription.unsubscribe()
|
|
71
72
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
73
|
+
cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)
|
|
74
|
+
}
|
|
75
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
76
|
+
const instance = cache.get(observable)!
|
|
77
|
+
|
|
78
|
+
return {
|
|
79
|
+
subscribe: (onStoreChange: () => void) => {
|
|
80
|
+
const subscription = instance.observable.subscribe(onStoreChange)
|
|
81
|
+
return () => {
|
|
82
|
+
subscription.unsubscribe()
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
getSnapshot: () => {
|
|
86
|
+
if (instance.error) {
|
|
87
|
+
throw instance.error
|
|
88
|
+
}
|
|
89
|
+
return instance.snapshot
|
|
90
|
+
},
|
|
91
|
+
}
|
|
92
|
+
}, [observable, getInitialValue])
|
|
93
|
+
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
console.log('stor.subscribe changed', store.subscribe)
|
|
96
|
+
}, [store.subscribe])
|
|
81
97
|
|
|
82
98
|
return useSyncExternalStore<ObservedValueOf<ObservableType>>(
|
|
83
|
-
subscribe,
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
throw instance.error
|
|
87
|
-
}
|
|
88
|
-
return instance.snapshot
|
|
89
|
-
},
|
|
90
|
-
typeof initialValue === 'undefined'
|
|
91
|
-
? undefined
|
|
92
|
-
: () => getValue(initialValue) as ObservedValueOf<ObservableType>,
|
|
99
|
+
store.subscribe,
|
|
100
|
+
store.getSnapshot,
|
|
101
|
+
typeof initialValue === 'undefined' ? undefined : () => getInitialValue(),
|
|
93
102
|
)
|
|
94
103
|
}
|