react-rx 4.1.32 → 4.2.1-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 +22 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +22 -16
- package/dist/index.js.map +1 -1
- package/package.json +15 -17
- package/src/__tests__/useObservable.test.tsx +65 -1
- package/src/useObservable.ts +17 -1
package/dist/index.cjs
CHANGED
|
@@ -5,19 +5,21 @@ var reactCompilerRuntime = require("react-compiler-runtime"), react = require("r
|
|
|
5
5
|
function getValue(value) {
|
|
6
6
|
return typeof value == "function" ? value() : value;
|
|
7
7
|
}
|
|
8
|
-
const cache = /* @__PURE__ */ new WeakMap();
|
|
9
|
-
function useObservable(observable, initialValue) {
|
|
10
|
-
const $ = reactCompilerRuntime.c(
|
|
8
|
+
const cache = /* @__PURE__ */ new WeakMap(), EMPTY_OBJECT = {};
|
|
9
|
+
function useObservable(observable, initialValue, t0) {
|
|
10
|
+
const $ = reactCompilerRuntime.c(10), options = t0 === void 0 ? EMPTY_OBJECT : t0, {
|
|
11
|
+
disabled: t1
|
|
12
|
+
} = options, disabled = t1 === void 0 ? !1 : t1;
|
|
11
13
|
if (!cache.has(observable)) {
|
|
12
14
|
const state = {
|
|
13
15
|
didEmit: !1
|
|
14
16
|
}, entry = {
|
|
15
17
|
state,
|
|
16
|
-
observable: observable.pipe(operators.map(_temp$1), rxjs.catchError(_temp2), operators.tap((
|
|
18
|
+
observable: observable.pipe(operators.map(_temp$1), rxjs.catchError(_temp2), operators.tap((t22) => {
|
|
17
19
|
const {
|
|
18
20
|
snapshot,
|
|
19
21
|
error: error_0
|
|
20
|
-
} =
|
|
22
|
+
} = t22;
|
|
21
23
|
state.didEmit = !0, state.snapshot = snapshot, state.error = error_0;
|
|
22
24
|
}), operators.map(_temp3), rxjs.finalize(() => cache.delete(observable)), rxjs.share({
|
|
23
25
|
resetOnRefCountZero: _temp4
|
|
@@ -30,21 +32,25 @@ function useObservable(observable, initialValue) {
|
|
|
30
32
|
};
|
|
31
33
|
entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
|
|
32
34
|
}
|
|
33
|
-
let
|
|
34
|
-
$[0] !== observable ? (
|
|
35
|
-
const instance =
|
|
36
|
-
let
|
|
37
|
-
$[2] !== instance.observable ? (
|
|
35
|
+
let t2;
|
|
36
|
+
$[0] !== observable ? (t2 = cache.get(observable), $[0] = observable, $[1] = t2) : t2 = $[1];
|
|
37
|
+
const instance = t2;
|
|
38
|
+
let t3;
|
|
39
|
+
$[2] !== disabled || $[3] !== instance.observable ? (t3 = (onStoreChange) => {
|
|
40
|
+
if (disabled)
|
|
41
|
+
return _temp5;
|
|
38
42
|
const subscription_0 = instance.observable.subscribe(onStoreChange);
|
|
39
43
|
return () => {
|
|
40
44
|
subscription_0.unsubscribe();
|
|
41
45
|
};
|
|
42
|
-
}, $[2] = instance.observable, $[
|
|
43
|
-
const subscribe =
|
|
44
|
-
let
|
|
45
|
-
$[
|
|
46
|
-
let
|
|
47
|
-
return $[
|
|
46
|
+
}, $[2] = disabled, $[3] = instance.observable, $[4] = t3) : t3 = $[4];
|
|
47
|
+
const subscribe = t3;
|
|
48
|
+
let t4;
|
|
49
|
+
$[5] !== initialValue || $[6] !== instance ? (t4 = () => instance.getSnapshot(initialValue), $[5] = initialValue, $[6] = instance, $[7] = t4) : t4 = $[7];
|
|
50
|
+
let t5;
|
|
51
|
+
return $[8] !== initialValue ? (t5 = typeof initialValue > "u" ? void 0 : () => getValue(initialValue), $[8] = initialValue, $[9] = t5) : t5 = $[9], react.useSyncExternalStore(subscribe, t4, t5);
|
|
52
|
+
}
|
|
53
|
+
function _temp5() {
|
|
48
54
|
}
|
|
49
55
|
function _temp4() {
|
|
50
56
|
return rxjs.timer(0, rxjs.asapScheduler);
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useCallback, useMemo, 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 as () => any)() : value) as T extends () => infer U\n ? U\n : T\n}\n\ninterface ObservableState<T> {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n}\n\ninterface CacheRecord<T> {\n observable: Observable<void>\n state: {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n }\n getSnapshot: (initialValue: unknown) => T\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 instance = useMemo(() => {\n if (!cache.has(observable)) {\n // This separate object is used as a stable reference to the cache entry's snapshot and error.\n // It's used by the `getSnapshot` closure.\n const state: ObservableState<ObservedValueOf<ObservableType>> = {\n didEmit: false,\n }\n const entry: CacheRecord<ObservedValueOf<ObservableType>> = {\n state,\n observable: observable.pipe(\n map((value) => ({snapshot: value, error: undefined})),\n catchError((error) => of({snapshot: undefined, error})),\n tap(({snapshot, error}) => {\n state.didEmit = true\n state.snapshot = snapshot\n state.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 getSnapshot: (initialValue) => {\n if (state.error) {\n throw state.error\n }\n return (\n state.didEmit ? state.snapshot : getValue(initialValue)\n ) as ObservedValueOf<ObservableType>\n },\n }\n\n // Eagerly subscribe to sync set `state.snapshot` 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)\n }\n return cache.get(observable)!\n }, [observable])\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n const subscription = instance.observable.subscribe(onStoreChange)\n return () => {\n subscription.unsubscribe()\n }\n },\n [instance.observable],\n )\n\n return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n subscribe,\n () => {\n return instance.getSnapshot(initialValue)\n },\n typeof initialValue === 'undefined'\n ? undefined\n : () => getValue(initialValue) as ObservedValueOf<ObservableType>,\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$])\n\n return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useCallback, useMemo, 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 as () => any)() : value) as T extends () => infer U\n ? U\n : T\n}\n\ninterface ObservableState<T> {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n}\n\ninterface CacheRecord<T> {\n observable: Observable<void>\n state: {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n }\n getSnapshot: (initialValue: unknown) => T\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\nconst EMPTY_OBJECT = {}\n\n/** @public */\nexport interface UseObservableOptions {\n disabled?: boolean\n}\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n observable: ObservableType,\n initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n options?: UseObservableOptions,\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 options?: UseObservableOptions,\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n observable: ObservableType,\n initialValue?: InitialValue | (() => InitialValue),\n options: UseObservableOptions = EMPTY_OBJECT,\n): InitialValue | ObservedValueOf<ObservableType> {\n const {disabled = false} = options\n\n const instance = useMemo(() => {\n if (!cache.has(observable)) {\n // This separate object is used as a stable reference to the cache entry's snapshot and error.\n // It's used by the `getSnapshot` closure.\n const state: ObservableState<ObservedValueOf<ObservableType>> = {\n didEmit: false,\n }\n const entry: CacheRecord<ObservedValueOf<ObservableType>> = {\n state,\n observable: observable.pipe(\n map((value) => ({snapshot: value, error: undefined})),\n catchError((error) => of({snapshot: undefined, error})),\n tap(({snapshot, error}) => {\n state.didEmit = true\n state.snapshot = snapshot\n state.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 getSnapshot: (initialValue) => {\n if (state.error) {\n throw state.error\n }\n return (\n state.didEmit ? state.snapshot : getValue(initialValue)\n ) as ObservedValueOf<ObservableType>\n },\n }\n\n // Eagerly subscribe to sync set `state.snapshot` 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)\n }\n return cache.get(observable)!\n }, [observable])\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n if (disabled) {\n return () => {}\n }\n\n const subscription = instance.observable.subscribe(onStoreChange)\n return () => {\n subscription.unsubscribe()\n }\n },\n [instance.observable, disabled],\n )\n\n return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n subscribe,\n () => {\n return instance.getSnapshot(initialValue)\n },\n typeof initialValue === 'undefined'\n ? undefined\n : () => getValue(initialValue) as ObservedValueOf<ObservableType>,\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$])\n\n return call\n}\n"],"names":["getValue","value","cache","WeakMap","EMPTY_OBJECT","useObservable","observable","initialValue","t0","$","_c","options","undefined","disabled","t1","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","t2","snapshot","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","initialValue_0","subscribe","unsubscribe","set","get","instance","t3","onStoreChange","_temp5","subscription_0","subscription","t4","t5","useSyncExternalStore","timer","asapScheduler","value_0","of","useObservableEvent","handleEvent","useState","calls$","call","onEvent","useEffectEvent","observable_0","useEffect","observableCallback"],"mappings":"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"}
|
package/dist/index.d.cts
CHANGED
|
@@ -5,6 +5,7 @@ import {ObservedValueOf} from 'rxjs'
|
|
|
5
5
|
export declare function useObservable<ObservableType extends Observable<any>>(
|
|
6
6
|
observable: ObservableType,
|
|
7
7
|
initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
|
|
8
|
+
options?: UseObservableOptions,
|
|
8
9
|
): ObservedValueOf<ObservableType>
|
|
9
10
|
|
|
10
11
|
/** @public */
|
|
@@ -16,6 +17,7 @@ export declare function useObservable<ObservableType extends Observable<any>>(
|
|
|
16
17
|
export declare function useObservable<ObservableType extends Observable<any>, InitialValue>(
|
|
17
18
|
observable: ObservableType,
|
|
18
19
|
initialValue: InitialValue | (() => InitialValue),
|
|
20
|
+
options?: UseObservableOptions,
|
|
19
21
|
): InitialValue | ObservedValueOf<ObservableType>
|
|
20
22
|
|
|
21
23
|
/** @public */
|
|
@@ -23,4 +25,9 @@ export declare function useObservableEvent<T, U>(
|
|
|
23
25
|
handleEvent: (arg: Observable<T>) => Observable<U>,
|
|
24
26
|
): (arg: T) => void
|
|
25
27
|
|
|
28
|
+
/** @public */
|
|
29
|
+
export declare interface UseObservableOptions {
|
|
30
|
+
disabled?: boolean
|
|
31
|
+
}
|
|
32
|
+
|
|
26
33
|
export {}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ import {ObservedValueOf} from 'rxjs'
|
|
|
5
5
|
export declare function useObservable<ObservableType extends Observable<any>>(
|
|
6
6
|
observable: ObservableType,
|
|
7
7
|
initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
|
|
8
|
+
options?: UseObservableOptions,
|
|
8
9
|
): ObservedValueOf<ObservableType>
|
|
9
10
|
|
|
10
11
|
/** @public */
|
|
@@ -16,6 +17,7 @@ export declare function useObservable<ObservableType extends Observable<any>>(
|
|
|
16
17
|
export declare function useObservable<ObservableType extends Observable<any>, InitialValue>(
|
|
17
18
|
observable: ObservableType,
|
|
18
19
|
initialValue: InitialValue | (() => InitialValue),
|
|
20
|
+
options?: UseObservableOptions,
|
|
19
21
|
): InitialValue | ObservedValueOf<ObservableType>
|
|
20
22
|
|
|
21
23
|
/** @public */
|
|
@@ -23,4 +25,9 @@ export declare function useObservableEvent<T, U>(
|
|
|
23
25
|
handleEvent: (arg: Observable<T>) => Observable<U>,
|
|
24
26
|
): (arg: T) => void
|
|
25
27
|
|
|
28
|
+
/** @public */
|
|
29
|
+
export declare interface UseObservableOptions {
|
|
30
|
+
disabled?: boolean
|
|
31
|
+
}
|
|
32
|
+
|
|
26
33
|
export {}
|
package/dist/index.js
CHANGED
|
@@ -8,19 +8,21 @@ import { useEffectEvent } from "use-effect-event";
|
|
|
8
8
|
function getValue(value) {
|
|
9
9
|
return typeof value == "function" ? value() : value;
|
|
10
10
|
}
|
|
11
|
-
const cache = /* @__PURE__ */ new WeakMap();
|
|
12
|
-
function useObservable(observable, initialValue) {
|
|
13
|
-
const $ = c(
|
|
11
|
+
const cache = /* @__PURE__ */ new WeakMap(), EMPTY_OBJECT = {};
|
|
12
|
+
function useObservable(observable, initialValue, t0) {
|
|
13
|
+
const $ = c(10), options = t0 === void 0 ? EMPTY_OBJECT : t0, {
|
|
14
|
+
disabled: t1
|
|
15
|
+
} = options, disabled = t1 === void 0 ? !1 : t1;
|
|
14
16
|
if (!cache.has(observable)) {
|
|
15
17
|
const state = {
|
|
16
18
|
didEmit: !1
|
|
17
19
|
}, entry = {
|
|
18
20
|
state,
|
|
19
|
-
observable: observable.pipe(map(_temp$1), catchError(_temp2), tap((
|
|
21
|
+
observable: observable.pipe(map(_temp$1), catchError(_temp2), tap((t22) => {
|
|
20
22
|
const {
|
|
21
23
|
snapshot,
|
|
22
24
|
error: error_0
|
|
23
|
-
} =
|
|
25
|
+
} = t22;
|
|
24
26
|
state.didEmit = !0, state.snapshot = snapshot, state.error = error_0;
|
|
25
27
|
}), map(_temp3), finalize(() => cache.delete(observable)), share({
|
|
26
28
|
resetOnRefCountZero: _temp4
|
|
@@ -33,21 +35,25 @@ function useObservable(observable, initialValue) {
|
|
|
33
35
|
};
|
|
34
36
|
entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
|
|
35
37
|
}
|
|
36
|
-
let
|
|
37
|
-
$[0] !== observable ? (
|
|
38
|
-
const instance =
|
|
39
|
-
let
|
|
40
|
-
$[2] !== instance.observable ? (
|
|
38
|
+
let t2;
|
|
39
|
+
$[0] !== observable ? (t2 = cache.get(observable), $[0] = observable, $[1] = t2) : t2 = $[1];
|
|
40
|
+
const instance = t2;
|
|
41
|
+
let t3;
|
|
42
|
+
$[2] !== disabled || $[3] !== instance.observable ? (t3 = (onStoreChange) => {
|
|
43
|
+
if (disabled)
|
|
44
|
+
return _temp5;
|
|
41
45
|
const subscription_0 = instance.observable.subscribe(onStoreChange);
|
|
42
46
|
return () => {
|
|
43
47
|
subscription_0.unsubscribe();
|
|
44
48
|
};
|
|
45
|
-
}, $[2] = instance.observable, $[
|
|
46
|
-
const subscribe =
|
|
47
|
-
let
|
|
48
|
-
$[
|
|
49
|
-
let
|
|
50
|
-
return $[
|
|
49
|
+
}, $[2] = disabled, $[3] = instance.observable, $[4] = t3) : t3 = $[4];
|
|
50
|
+
const subscribe = t3;
|
|
51
|
+
let t4;
|
|
52
|
+
$[5] !== initialValue || $[6] !== instance ? (t4 = () => instance.getSnapshot(initialValue), $[5] = initialValue, $[6] = instance, $[7] = t4) : t4 = $[7];
|
|
53
|
+
let t5;
|
|
54
|
+
return $[8] !== initialValue ? (t5 = typeof initialValue > "u" ? void 0 : () => getValue(initialValue), $[8] = initialValue, $[9] = t5) : t5 = $[9], useSyncExternalStore(subscribe, t4, t5);
|
|
55
|
+
}
|
|
56
|
+
function _temp5() {
|
|
51
57
|
}
|
|
52
58
|
function _temp4() {
|
|
53
59
|
return timer(0, asapScheduler);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useCallback, useMemo, 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 as () => any)() : value) as T extends () => infer U\n ? U\n : T\n}\n\ninterface ObservableState<T> {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n}\n\ninterface CacheRecord<T> {\n observable: Observable<void>\n state: {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n }\n getSnapshot: (initialValue: unknown) => T\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 instance = useMemo(() => {\n if (!cache.has(observable)) {\n // This separate object is used as a stable reference to the cache entry's snapshot and error.\n // It's used by the `getSnapshot` closure.\n const state: ObservableState<ObservedValueOf<ObservableType>> = {\n didEmit: false,\n }\n const entry: CacheRecord<ObservedValueOf<ObservableType>> = {\n state,\n observable: observable.pipe(\n map((value) => ({snapshot: value, error: undefined})),\n catchError((error) => of({snapshot: undefined, error})),\n tap(({snapshot, error}) => {\n state.didEmit = true\n state.snapshot = snapshot\n state.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 getSnapshot: (initialValue) => {\n if (state.error) {\n throw state.error\n }\n return (\n state.didEmit ? state.snapshot : getValue(initialValue)\n ) as ObservedValueOf<ObservableType>\n },\n }\n\n // Eagerly subscribe to sync set `state.snapshot` 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)\n }\n return cache.get(observable)!\n }, [observable])\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n const subscription = instance.observable.subscribe(onStoreChange)\n return () => {\n subscription.unsubscribe()\n }\n },\n [instance.observable],\n )\n\n return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n subscribe,\n () => {\n return instance.getSnapshot(initialValue)\n },\n typeof initialValue === 'undefined'\n ? undefined\n : () => getValue(initialValue) as ObservedValueOf<ObservableType>,\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$])\n\n return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useCallback, useMemo, 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 as () => any)() : value) as T extends () => infer U\n ? U\n : T\n}\n\ninterface ObservableState<T> {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n}\n\ninterface CacheRecord<T> {\n observable: Observable<void>\n state: {\n didEmit: boolean\n snapshot?: T\n error?: unknown\n }\n getSnapshot: (initialValue: unknown) => T\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\nconst EMPTY_OBJECT = {}\n\n/** @public */\nexport interface UseObservableOptions {\n disabled?: boolean\n}\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n observable: ObservableType,\n initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n options?: UseObservableOptions,\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 options?: UseObservableOptions,\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n observable: ObservableType,\n initialValue?: InitialValue | (() => InitialValue),\n options: UseObservableOptions = EMPTY_OBJECT,\n): InitialValue | ObservedValueOf<ObservableType> {\n const {disabled = false} = options\n\n const instance = useMemo(() => {\n if (!cache.has(observable)) {\n // This separate object is used as a stable reference to the cache entry's snapshot and error.\n // It's used by the `getSnapshot` closure.\n const state: ObservableState<ObservedValueOf<ObservableType>> = {\n didEmit: false,\n }\n const entry: CacheRecord<ObservedValueOf<ObservableType>> = {\n state,\n observable: observable.pipe(\n map((value) => ({snapshot: value, error: undefined})),\n catchError((error) => of({snapshot: undefined, error})),\n tap(({snapshot, error}) => {\n state.didEmit = true\n state.snapshot = snapshot\n state.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 getSnapshot: (initialValue) => {\n if (state.error) {\n throw state.error\n }\n return (\n state.didEmit ? state.snapshot : getValue(initialValue)\n ) as ObservedValueOf<ObservableType>\n },\n }\n\n // Eagerly subscribe to sync set `state.snapshot` 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)\n }\n return cache.get(observable)!\n }, [observable])\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n if (disabled) {\n return () => {}\n }\n\n const subscription = instance.observable.subscribe(onStoreChange)\n return () => {\n subscription.unsubscribe()\n }\n },\n [instance.observable, disabled],\n )\n\n return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n subscribe,\n () => {\n return instance.getSnapshot(initialValue)\n },\n typeof initialValue === 'undefined'\n ? undefined\n : () => getValue(initialValue) as ObservedValueOf<ObservableType>,\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$])\n\n return call\n}\n"],"names":["getValue","value","cache","WeakMap","EMPTY_OBJECT","useObservable","observable","initialValue","t0","$","_c","options","undefined","disabled","t1","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","t2","snapshot","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","initialValue_0","subscribe","unsubscribe","set","get","instance","t3","onStoreChange","_temp5","subscription_0","subscription","t4","t5","useSyncExternalStore","timer","asapScheduler","value_0","of","useObservableEvent","handleEvent","useState","calls$","call","onEvent","useEffectEvent","observable_0","useEffect","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.
|
|
3
|
+
"version": "4.2.1-canary.0",
|
|
4
4
|
"description": "React + RxJS = <3",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"action",
|
|
@@ -62,15 +62,6 @@
|
|
|
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": {
|
|
@@ -80,7 +71,7 @@
|
|
|
80
71
|
},
|
|
81
72
|
"devDependencies": {
|
|
82
73
|
"@sanity/browserslist-config": "^1.0.5",
|
|
83
|
-
"@sanity/pkg-utils": "^8.1.
|
|
74
|
+
"@sanity/pkg-utils": "^8.1.14",
|
|
84
75
|
"@sanity/prettier-config": "^1.0.6",
|
|
85
76
|
"@sanity/semantic-release-preset": "^5.0.0",
|
|
86
77
|
"@testing-library/dom": "^10.4.1",
|
|
@@ -90,16 +81,16 @@
|
|
|
90
81
|
"@types/react-dom": "^19.1.9",
|
|
91
82
|
"@typescript-eslint/eslint-plugin": "^8.41.0",
|
|
92
83
|
"@typescript-eslint/parser": "^8.41.0",
|
|
93
|
-
"@vitejs/plugin-react": "^
|
|
84
|
+
"@vitejs/plugin-react": "^5.0.2",
|
|
94
85
|
"babel-plugin-react-compiler": "19.1.0-rc.3",
|
|
95
86
|
"eslint": "^9.34.0",
|
|
96
87
|
"eslint-config-prettier": "^10.1.8",
|
|
97
88
|
"eslint-plugin-react": "^7.37.5",
|
|
98
89
|
"eslint-plugin-react-hooks": "6.0.0-rc.2",
|
|
99
|
-
"eslint-plugin-react-hooks-with-use-effect-event": "npm:eslint-plugin-react-hooks@0.0.0-experimental-
|
|
90
|
+
"eslint-plugin-react-hooks-with-use-effect-event": "npm:eslint-plugin-react-hooks@0.0.0-experimental-d415fd3e-20250919",
|
|
100
91
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
101
|
-
"jsdom": "^
|
|
102
|
-
"prettier": "^3.
|
|
92
|
+
"jsdom": "^26.1.0",
|
|
93
|
+
"prettier": "^3.6.2",
|
|
103
94
|
"react": "^19.1.1",
|
|
104
95
|
"react-dom": "^19.1.1",
|
|
105
96
|
"react-test-renderer": "^19.1.1",
|
|
@@ -113,5 +104,12 @@
|
|
|
113
104
|
"react": "^18.3 || >=19.0.0-0",
|
|
114
105
|
"rxjs": "^7"
|
|
115
106
|
},
|
|
116
|
-
"
|
|
117
|
-
|
|
107
|
+
"scripts": {
|
|
108
|
+
"build": "pkg build --strict --clean --check",
|
|
109
|
+
"dev": "pnpm --filter 'react-rx-website' dev",
|
|
110
|
+
"format": "prettier --cache --write .",
|
|
111
|
+
"lint": "eslint --cache .",
|
|
112
|
+
"test": "vitest run --typecheck",
|
|
113
|
+
"watch": "pnpm build -- --watch"
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -5,7 +5,7 @@ import {asyncScheduler, Observable, of, ReplaySubject, scheduled, share, Subject
|
|
|
5
5
|
import {map} from 'rxjs/operators'
|
|
6
6
|
import {expect, test} from 'vitest'
|
|
7
7
|
|
|
8
|
-
import {useObservable} from '../useObservable'
|
|
8
|
+
import {useObservable, type UseObservableOptions} from '../useObservable'
|
|
9
9
|
|
|
10
10
|
test('should subscribe immediately on component mount and unsubscribe on component unmount', async () => {
|
|
11
11
|
let subscribed = false
|
|
@@ -309,3 +309,67 @@ test('should throw during SSR if no initial value is defined', () => {
|
|
|
309
309
|
`[Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.]`,
|
|
310
310
|
)
|
|
311
311
|
})
|
|
312
|
+
|
|
313
|
+
test('should not subscribe if the disabled prop is present', () => {
|
|
314
|
+
const values$ = new Subject<string | undefined>()
|
|
315
|
+
const {result, unmount} = renderHook(() => useObservable(values$, 'initial', {disabled: true}))
|
|
316
|
+
|
|
317
|
+
act(() => values$.next('something'))
|
|
318
|
+
expect(result.current).toBe('initial')
|
|
319
|
+
|
|
320
|
+
unmount()
|
|
321
|
+
})
|
|
322
|
+
|
|
323
|
+
test('should return the last value instead of the initial value when the hook is disabled after running', () => {
|
|
324
|
+
const values$ = new Subject<string | undefined>()
|
|
325
|
+
const {result, unmount, rerender} = renderHook<string | undefined, UseObservableOptions>(
|
|
326
|
+
(props) => useObservable(values$, 'initial', props),
|
|
327
|
+
)
|
|
328
|
+
expect(result.current).toBe('initial')
|
|
329
|
+
act(() => values$.next('something'))
|
|
330
|
+
expect(result.current).toBe('something')
|
|
331
|
+
|
|
332
|
+
rerender({
|
|
333
|
+
disabled: true,
|
|
334
|
+
})
|
|
335
|
+
|
|
336
|
+
act(() => values$.next('something else'))
|
|
337
|
+
|
|
338
|
+
expect(result.current).toBe('something')
|
|
339
|
+
|
|
340
|
+
unmount()
|
|
341
|
+
})
|
|
342
|
+
|
|
343
|
+
test('should return the actual value when the hook is disabled and then re-enabled', () => {
|
|
344
|
+
const values$ = new Subject<string | undefined>()
|
|
345
|
+
const {result, unmount, rerender} = renderHook<string | undefined, UseObservableOptions>(
|
|
346
|
+
(props) => useObservable(values$, 'initial', props),
|
|
347
|
+
)
|
|
348
|
+
expect(result.current).toBe('initial')
|
|
349
|
+
act(() => values$.next('something'))
|
|
350
|
+
expect(result.current).toBe('something')
|
|
351
|
+
|
|
352
|
+
rerender({
|
|
353
|
+
disabled: true,
|
|
354
|
+
})
|
|
355
|
+
|
|
356
|
+
act(() => values$.next('something else'))
|
|
357
|
+
|
|
358
|
+
expect(result.current).toBe('something')
|
|
359
|
+
|
|
360
|
+
act(() => values$.next('something again'))
|
|
361
|
+
|
|
362
|
+
expect(result.current).toBe('something')
|
|
363
|
+
|
|
364
|
+
rerender({
|
|
365
|
+
disabled: false,
|
|
366
|
+
})
|
|
367
|
+
|
|
368
|
+
expect(result.current).toBe('something again')
|
|
369
|
+
|
|
370
|
+
act(() => values$.next('something ending'))
|
|
371
|
+
|
|
372
|
+
expect(result.current).toBe('something ending')
|
|
373
|
+
|
|
374
|
+
unmount()
|
|
375
|
+
})
|
package/src/useObservable.ts
CHANGED
|
@@ -35,10 +35,18 @@ interface CacheRecord<T> {
|
|
|
35
35
|
|
|
36
36
|
const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
|
|
37
37
|
|
|
38
|
+
const EMPTY_OBJECT = {}
|
|
39
|
+
|
|
40
|
+
/** @public */
|
|
41
|
+
export interface UseObservableOptions {
|
|
42
|
+
disabled?: boolean
|
|
43
|
+
}
|
|
44
|
+
|
|
38
45
|
/** @public */
|
|
39
46
|
export function useObservable<ObservableType extends Observable<any>>(
|
|
40
47
|
observable: ObservableType,
|
|
41
48
|
initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
|
|
49
|
+
options?: UseObservableOptions,
|
|
42
50
|
): ObservedValueOf<ObservableType>
|
|
43
51
|
/** @public */
|
|
44
52
|
export function useObservable<ObservableType extends Observable<any>>(
|
|
@@ -48,12 +56,16 @@ export function useObservable<ObservableType extends Observable<any>>(
|
|
|
48
56
|
export function useObservable<ObservableType extends Observable<any>, InitialValue>(
|
|
49
57
|
observable: ObservableType,
|
|
50
58
|
initialValue: InitialValue | (() => InitialValue),
|
|
59
|
+
options?: UseObservableOptions,
|
|
51
60
|
): InitialValue | ObservedValueOf<ObservableType>
|
|
52
61
|
/** @public */
|
|
53
62
|
export function useObservable<ObservableType extends Observable<any>, InitialValue>(
|
|
54
63
|
observable: ObservableType,
|
|
55
64
|
initialValue?: InitialValue | (() => InitialValue),
|
|
65
|
+
options: UseObservableOptions = EMPTY_OBJECT,
|
|
56
66
|
): InitialValue | ObservedValueOf<ObservableType> {
|
|
67
|
+
const {disabled = false} = options
|
|
68
|
+
|
|
57
69
|
const instance = useMemo(() => {
|
|
58
70
|
if (!cache.has(observable)) {
|
|
59
71
|
// This separate object is used as a stable reference to the cache entry's snapshot and error.
|
|
@@ -99,12 +111,16 @@ export function useObservable<ObservableType extends Observable<any>, InitialVal
|
|
|
99
111
|
|
|
100
112
|
const subscribe = useCallback(
|
|
101
113
|
(onStoreChange: () => void) => {
|
|
114
|
+
if (disabled) {
|
|
115
|
+
return () => {}
|
|
116
|
+
}
|
|
117
|
+
|
|
102
118
|
const subscription = instance.observable.subscribe(onStoreChange)
|
|
103
119
|
return () => {
|
|
104
120
|
subscription.unsubscribe()
|
|
105
121
|
}
|
|
106
122
|
},
|
|
107
|
-
[instance.observable],
|
|
123
|
+
[instance.observable, disabled],
|
|
108
124
|
)
|
|
109
125
|
|
|
110
126
|
return useSyncExternalStore<ObservedValueOf<ObservableType>>(
|