react-rx 4.1.28 → 4.1.30
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.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +17 -17
- package/src/__tests__/errors.test.tsx +0 -1
- package/src/__tests__/{strictmode.test.ts → strictmode.test.tsx} +9 -11
- package/src/__tests__/{useObservable.test.ts → useObservable.test.tsx} +33 -10
- package/src/useObservable.ts +3 -1
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() : value\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","t0","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","t1","snapshot","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","initialValue_0","subscribe","unsubscribe","set","get","instance","t2","onStoreChange","subscription_0","subscription","t3","t4","undefined","useSyncExternalStore","timer","asapScheduler","value_0","of","useObservableEvent","handleEvent","useState","calls$","call","onEvent","useEffectEvent","observable_0","useEffect","observableCallback"],"mappings":";;;;AAaA,SAASA,SAAYC,OAA2C;AAC9D,
|
|
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","t0","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","t1","snapshot","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","initialValue_0","subscribe","unsubscribe","set","get","instance","t2","onStoreChange","subscription_0","subscription","t3","t4","undefined","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.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() : value\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","t0","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","t1","snapshot","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","initialValue_0","subscribe","unsubscribe","set","get","instance","t2","onStoreChange","subscription_0","subscription","t3","t4","undefined","useSyncExternalStore","timer","asapScheduler","value_0","of","useObservableEvent","handleEvent","useState","calls$","call","onEvent","useEffectEvent","observable_0","useEffect","observableCallback"],"mappings":";;;;;;;AAaA,SAASA,SAAYC,OAA2C;AAC9D,
|
|
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","t0","has","state","didEmit","entry","pipe","map","_temp","catchError","_temp2","tap","t1","snapshot","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","initialValue_0","subscribe","unsubscribe","set","get","instance","t2","onStoreChange","subscription_0","subscription","t3","t4","undefined","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.1.30",
|
|
4
4
|
"description": "React + RxJS = <3",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"action",
|
|
@@ -68,15 +68,15 @@
|
|
|
68
68
|
"format": "prettier --cache --write .",
|
|
69
69
|
"lint": "eslint --cache .",
|
|
70
70
|
"prepublishOnly": "pnpm build",
|
|
71
|
-
"test": "vitest run --typecheck
|
|
71
|
+
"test": "vitest run --typecheck",
|
|
72
72
|
"watch": "pnpm build -- --watch"
|
|
73
73
|
},
|
|
74
74
|
"browserslist": "extends @sanity/browserslist-config",
|
|
75
75
|
"prettier": "@sanity/prettier-config",
|
|
76
76
|
"dependencies": {
|
|
77
77
|
"observable-callback": "^1.0.3",
|
|
78
|
-
"react-compiler-runtime": "19.1.0-rc.
|
|
79
|
-
"use-effect-event": "^
|
|
78
|
+
"react-compiler-runtime": "19.1.0-rc.2",
|
|
79
|
+
"use-effect-event": "^2.0.1"
|
|
80
80
|
},
|
|
81
81
|
"devDependencies": {
|
|
82
82
|
"@sanity/pkg-utils": "^7.2.2",
|
|
@@ -85,16 +85,16 @@
|
|
|
85
85
|
"@testing-library/dom": "^10.4.0",
|
|
86
86
|
"@testing-library/react": "^16.3.0",
|
|
87
87
|
"@types/node": "^22.15.3",
|
|
88
|
-
"@types/react": "^19.1.
|
|
89
|
-
"@types/react-dom": "^19.1.
|
|
90
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
91
|
-
"@typescript-eslint/parser": "^8.
|
|
92
|
-
"@vitejs/plugin-react": "^4.
|
|
93
|
-
"babel-plugin-react-compiler": "19.1.0-rc.
|
|
94
|
-
"eslint": "^9.
|
|
95
|
-
"eslint-config-prettier": "^10.1.
|
|
88
|
+
"@types/react": "^19.1.8",
|
|
89
|
+
"@types/react-dom": "^19.1.6",
|
|
90
|
+
"@typescript-eslint/eslint-plugin": "^8.33.0",
|
|
91
|
+
"@typescript-eslint/parser": "^8.33.0",
|
|
92
|
+
"@vitejs/plugin-react": "^4.5.0",
|
|
93
|
+
"babel-plugin-react-compiler": "19.1.0-rc.2",
|
|
94
|
+
"eslint": "^9.27.0",
|
|
95
|
+
"eslint-config-prettier": "^10.1.5",
|
|
96
96
|
"eslint-plugin-react": "^7.37.5",
|
|
97
|
-
"eslint-plugin-react-hooks": "0.0.0-experimental-
|
|
97
|
+
"eslint-plugin-react-hooks": "0.0.0-experimental-12bc60f5-20250613",
|
|
98
98
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
99
99
|
"jsdom": "^24.1.0",
|
|
100
100
|
"prettier": "^3.5.3",
|
|
@@ -102,10 +102,10 @@
|
|
|
102
102
|
"react-dom": "^19.1.0",
|
|
103
103
|
"react-test-renderer": "^19.1.0",
|
|
104
104
|
"rxjs": "^7.8.2",
|
|
105
|
-
"semantic-release": "^24.2.
|
|
106
|
-
"typescript": "5.
|
|
107
|
-
"typescript-eslint": "^8.
|
|
108
|
-
"vitest": "^3.1.
|
|
105
|
+
"semantic-release": "^24.2.5",
|
|
106
|
+
"typescript": "5.8.3",
|
|
107
|
+
"typescript-eslint": "^8.33.0",
|
|
108
|
+
"vitest": "^3.1.4"
|
|
109
109
|
},
|
|
110
110
|
"peerDependencies": {
|
|
111
111
|
"react": "^18.3 || >=19.0.0-0",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {act, render} from '@testing-library/react'
|
|
2
|
-
import {
|
|
2
|
+
import {useEffect, useMemo} from 'react'
|
|
3
3
|
import {BehaviorSubject, Observable} from 'rxjs'
|
|
4
4
|
import {expect, test} from 'vitest'
|
|
5
5
|
|
|
@@ -7,8 +7,6 @@ import {useObservable} from '../useObservable'
|
|
|
7
7
|
|
|
8
8
|
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
|
|
9
9
|
|
|
10
|
-
// NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
|
|
11
|
-
|
|
12
10
|
test('Strict mode should trigger double mount effects and re-renders', async () => {
|
|
13
11
|
const subject = new BehaviorSubject(0)
|
|
14
12
|
const observable = subject.asObservable()
|
|
@@ -21,10 +19,10 @@ test('Strict mode should trigger double mount effects and re-renders', async ()
|
|
|
21
19
|
}, [])
|
|
22
20
|
const observedValue = useObservable(observable)
|
|
23
21
|
returnedValues.push(observedValue)
|
|
24
|
-
return
|
|
22
|
+
return <>{observedValue}</>
|
|
25
23
|
}
|
|
26
24
|
|
|
27
|
-
render(
|
|
25
|
+
render(<ObservableComponent />, {reactStrictMode: true})
|
|
28
26
|
expect(mountCount).toEqual(2)
|
|
29
27
|
|
|
30
28
|
expect(returnedValues).toEqual([0, 0])
|
|
@@ -53,12 +51,12 @@ test('Strict mode should unsubscribe the source observable on unmount', async ()
|
|
|
53
51
|
|
|
54
52
|
function ObservableComponent() {
|
|
55
53
|
useObservable(observable)
|
|
56
|
-
return
|
|
54
|
+
return null
|
|
57
55
|
}
|
|
58
56
|
|
|
59
|
-
const {
|
|
57
|
+
const {unmount} = render(<ObservableComponent />, {reactStrictMode: true})
|
|
60
58
|
expect(subscribed).toEqual([0])
|
|
61
|
-
|
|
59
|
+
unmount()
|
|
62
60
|
await Promise.resolve()
|
|
63
61
|
expect(unsubscribed).toEqual([0])
|
|
64
62
|
})
|
|
@@ -76,12 +74,12 @@ test('Strict mode should unsubscribe the source observable on unmount if its cre
|
|
|
76
74
|
function ObservableComponent() {
|
|
77
75
|
const memoObservable = useMemo(() => getObservable(), [])
|
|
78
76
|
useObservable(memoObservable)
|
|
79
|
-
return
|
|
77
|
+
return null
|
|
80
78
|
}
|
|
81
79
|
|
|
82
|
-
const {
|
|
80
|
+
const {unmount} = render(<ObservableComponent />, {reactStrictMode: true})
|
|
83
81
|
expect(subscriberCount, 'Subscriber count should be 1').toBe(1)
|
|
84
|
-
|
|
82
|
+
unmount()
|
|
85
83
|
await Promise.resolve()
|
|
86
84
|
expect(subscriberCount, 'Subscriber count should be 0').toBe(0)
|
|
87
85
|
})
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import {act, render, renderHook} from '@testing-library/react'
|
|
2
|
-
import {
|
|
2
|
+
import {useMemo} from 'react'
|
|
3
|
+
import {renderToString} from 'react-dom/server'
|
|
3
4
|
import {asyncScheduler, Observable, of, ReplaySubject, scheduled, share, Subject, timer} from 'rxjs'
|
|
4
5
|
import {map} from 'rxjs/operators'
|
|
5
6
|
import {expect, test} from 'vitest'
|
|
@@ -51,9 +52,9 @@ test('should not return undefined during render if initial value is given', () =
|
|
|
51
52
|
function ObservableComponent() {
|
|
52
53
|
const observedValue = useObservable(observable, 'initial value')
|
|
53
54
|
returnedValues.push(observedValue)
|
|
54
|
-
return
|
|
55
|
+
return <>{observedValue}</>
|
|
55
56
|
}
|
|
56
|
-
render(
|
|
57
|
+
render(<ObservableComponent />)
|
|
57
58
|
expect(returnedValues).toEqual(expect.arrayContaining(['initial value']))
|
|
58
59
|
})
|
|
59
60
|
|
|
@@ -64,9 +65,9 @@ test('should not return undefined during render if observable is sync', () => {
|
|
|
64
65
|
function ObservableComponent() {
|
|
65
66
|
const observedValue = useObservable(observable)
|
|
66
67
|
returnedValues.push(observedValue)
|
|
67
|
-
return
|
|
68
|
+
return <>{observedValue}</>
|
|
68
69
|
}
|
|
69
|
-
render(
|
|
70
|
+
render(<ObservableComponent />)
|
|
70
71
|
expect(returnedValues).toEqual(expect.arrayContaining(['initial value']))
|
|
71
72
|
})
|
|
72
73
|
|
|
@@ -77,9 +78,9 @@ test('should return undefined during first render if observable is async', () =>
|
|
|
77
78
|
function ObservableComponent() {
|
|
78
79
|
const observedValue = useObservable(observable)
|
|
79
80
|
returnedValues.push(observedValue)
|
|
80
|
-
return
|
|
81
|
+
return <>{observedValue}</>
|
|
81
82
|
}
|
|
82
|
-
render(
|
|
83
|
+
render(<ObservableComponent />)
|
|
83
84
|
expect(returnedValues).toEqual(expect.arrayContaining([undefined]))
|
|
84
85
|
})
|
|
85
86
|
|
|
@@ -261,16 +262,16 @@ test('should return undefined if observable emits undefined, also when given ini
|
|
|
261
262
|
[props.prefix],
|
|
262
263
|
)
|
|
263
264
|
snapshots.push(useObservable(observable, 'initial'))
|
|
264
|
-
return
|
|
265
|
+
return null
|
|
265
266
|
}
|
|
266
267
|
|
|
267
|
-
const {unmount, rerender} = render(
|
|
268
|
+
const {unmount, rerender} = render(<ObservableComponent prefix="first" />)
|
|
268
269
|
act(() => subject.next('foo'))
|
|
269
270
|
act(() => subject.next(undefined))
|
|
270
271
|
act(() => subject.next('bar'))
|
|
271
272
|
|
|
272
273
|
// now change the prefix
|
|
273
|
-
rerender(
|
|
274
|
+
rerender(<ObservableComponent prefix="second" />)
|
|
274
275
|
act(() => subject.next('foo again'))
|
|
275
276
|
act(() => subject.next(undefined))
|
|
276
277
|
act(() => subject.next('bar again'))
|
|
@@ -286,3 +287,25 @@ test('should return undefined if observable emits undefined, also when given ini
|
|
|
286
287
|
])
|
|
287
288
|
unmount()
|
|
288
289
|
})
|
|
290
|
+
|
|
291
|
+
test('should support SSR if an initial value is given', () => {
|
|
292
|
+
const observable = scheduled('async value', asyncScheduler)
|
|
293
|
+
function ObservableComponent() {
|
|
294
|
+
const observedValue = useObservable(observable, 'initial value')
|
|
295
|
+
return <>{observedValue}</>
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
expect(renderToString(<ObservableComponent />)).toBe('initial value')
|
|
299
|
+
})
|
|
300
|
+
|
|
301
|
+
test('should throw during SSR if no initial value is defined', () => {
|
|
302
|
+
const observable = scheduled('async value', asyncScheduler)
|
|
303
|
+
function ObservableComponent() {
|
|
304
|
+
const observedValue = useObservable(observable)
|
|
305
|
+
return <>{observedValue}</>
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
expect(() => renderToString(<ObservableComponent />)).toThrowErrorMatchingInlineSnapshot(
|
|
309
|
+
`[Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.]`,
|
|
310
|
+
)
|
|
311
|
+
})
|
package/src/useObservable.ts
CHANGED
|
@@ -12,7 +12,9 @@ import {
|
|
|
12
12
|
import {map, tap} from 'rxjs/operators'
|
|
13
13
|
|
|
14
14
|
function getValue<T>(value: T): T extends () => infer U ? U : T {
|
|
15
|
-
return typeof value === 'function' ? value() : value
|
|
15
|
+
return (typeof value === 'function' ? (value as () => any)() : value) as T extends () => infer U
|
|
16
|
+
? U
|
|
17
|
+
: T
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
interface ObservableState<T> {
|