react-rx 3.0.0-6 → 3.0.0-8

package/dist/index.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var react = require("react"), rxjs = require("rxjs"), operators = require("rxjs/operators"), observableCallback = require("observable-callback");
+function getValue(value) {
+  return typeof value == "function" ? value() : value;
+}
+const cache = /* @__PURE__ */ new WeakMap();
+function useObservable(observable, initialValue) {
+  const initialValueRef = react.useRef(getValue(initialValue));
+  react.useEffect(() => {
+    initialValueRef.current = getValue(initialValue);
+  }, [initialValue]);
+  const store = react.useMemo(() => {
+    if (!cache.has(observable)) {
+      const entry = {
+        snapshot: initialValueRef.current
+      };
+      entry.observable = observable.pipe(
+        operators.map((value) => ({ snapshot: value, error: void 0 })),
+        rxjs.catchError((error) => rxjs.of({ snapshot: void 0, error })),
+        operators.tap(({ snapshot, error }) => {
+          entry.snapshot = snapshot, entry.error = error;
+        }),
+        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
+        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
+        operators.map((value) => {
+        }),
+        // Ensure that the cache entry is deleted when the observable completes or errors.
+        rxjs.finalize(() => cache.delete(observable)),
+        rxjs.share()
+      ), entry.subscription = entry.observable.subscribe(), cache.set(observable, entry);
+    }
+    const instance = cache.get(observable);
+    return instance.subscription.closed && (instance.subscription = instance.observable.subscribe()), {
+      subscribe: (onStoreChange) => {
+        const subscription = instance.observable.subscribe(onStoreChange);
+        return instance.subscription.unsubscribe(), () => {
+          subscription.unsubscribe();
+        };
+      },
+      getSnapshot: () => {
+        if (instance.error)
+          throw instance.error;
+        return instance.snapshot;
+      }
+    };
+  }, [observable]);
+  return react.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    typeof initialValueRef.current > "u" ? void 0 : () => initialValueRef.current
+  );
+}
+function useObservableEvent(fn) {
+  const [[calls$, call]] = react.useState(() => observableCallback.observableCallback()), callback = useEffectEvent(fn);
+  return react.useEffect(() => {
+    const subscription = calls$.pipe(callback).subscribe();
+    return () => subscription.unsubscribe();
+  }, [callback, calls$]), call;
+}
+function useEffectEvent(fn) {
+  const ref = react.useRef(null);
+  return react.useInsertionEffect(() => {
+    ref.current = fn;
+  }, [fn]), react.useCallback((...args) => {
+    const f = ref.current;
+    return f(...args);
+  }, []);
+}
+exports.useObservable = useObservable;
+exports.useObservableEvent = useObservableEvent;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport {\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  type Subscription,\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  subscription: Subscription\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,\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  /**\n   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.\n   * But we also don't want the initialValue to be stale if the observable changes.\n   */\n  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)\n\n  /**\n   * Ensures that the initialValue is always up-to-date in case the observable changes.\n   */\n  useEffect(() => {\n    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: initialValueRef.current,\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(),\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      entry.subscription = entry.observable.subscribe()\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    if (instance.subscription.closed) {\n      instance.subscription = instance.observable.subscribe()\n    }\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        instance.subscription.unsubscribe()\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])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValueRef.current === 'undefined' ? undefined : () => initialValueRef.current,\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useCallback, useEffect, useInsertionEffect, useRef, useState} from 'react'\nimport {type Observable} from 'rxjs'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  fn: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const callback = useEffectEvent(fn)\n\n  useEffect(() => {\n    const subscription = calls$.pipe(callback).subscribe()\n    return () => subscription.unsubscribe()\n  }, [callback, calls$])\n\n  return call\n}\n\n/**\n * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19.\n * https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n * To learn more about the ponyfill itself, see: https://blog.bitsrc.io/a-look-inside-the-useevent-polyfill-from-the-new-react-docs-d1c4739e8072\n */\nfunction useEffectEvent<\n  const T extends (\n    ...args: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    any[]\n  ) => void,\n>(fn: T): T {\n  const ref = useRef<T | null>(null)\n  useInsertionEffect(() => {\n    ref.current = fn\n  }, [fn])\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return useCallback((...args: any[]) => {\n    const f = ref.current!\n    return f(...args)\n  }, []) as T\n}\n"],"names":["useRef","useEffect","useMemo","map","catchError","of","tap","finalize","share","useSyncExternalStore","useState","observableCallback","useInsertionEffect","useCallback"],"mappings":";;;AAYA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAA,IAAU;AACjD;AASA,MAAM,4BAAY;AAiBF,SAAA,cACd,YACA,cACgD;AAKhD,QAAM,kBAAkBA,MAAA,OAAO,SAAS,YAAY,CAAoC;AAKxFC,QAAAA,UAAU,MAAM;AACE,oBAAA,UAAU,SAAS,YAAY;AAAA,EAAA,GAC9C,CAAC,YAAY,CAAC;AAEX,QAAA,QAAQC,MAAAA,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAAA;AAE5B,YAAM,aAAa,WAAW;AAAA,QAC5BC,cAAI,CAAC,WAAW,EAAC,UAAU,OAAO,OAAO,SAAW;AAAA,QACpDC,gBAAW,CAAC,UAAUC,QAAG,EAAC,UAAU,QAAW,MAAK,CAAC,CAAC;AAAA,QACtDC,UAAAA,IAAI,CAAC,EAAC,UAAU,YAAW;AACnB,gBAAA,WAAW,UACjB,MAAM,QAAQ;AAAA,QAAA,CACf;AAAA;AAAA;AAAA,QAGDH,UAAA,IAAI,CAAC,UAAO;AAAA,QAAA,CAAa;AAAA;AAAA,QAEzBI,KAAAA,SAAS,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA,QACvCC,WAAM;AAAA,MACR,GAGA,MAAM,eAAe,MAAM,WAAW,aAEtC,MAAM,IAAI,YAAY,KAAqD;AAAA,IAC7E;AAEM,UAAA,WAAW,MAAM,IAAI,UAAU;AACjC,WAAA,SAAS,aAAa,WACxB,SAAS,eAAe,SAAS,WAAW,cAGvC;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AACvD,eAAA,SAAA,aAAa,YAAY,GAC3B,MAAM;AACX,uBAAa,YAAY;AAAA,QAAA;AAAA,MAE7B;AAAA,MACA,aAAa,MAAM;AACjB,YAAI,SAAS;AACX,gBAAM,SAAS;AAEjB,eAAO,SAAS;AAAA,MAClB;AAAA,IAAA;AAAA,EACF,GACC,CAAC,UAAU,CAAC;AAER,SAAAC,MAAA;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO,gBAAgB,UAAY,MAAc,SAAY,MAAM,gBAAgB;AAAA,EAAA;AAEvF;ACzGO,SAAS,mBACd,IACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAIC,MAAS,SAAA,MAAMC,mBAAsB,mBAAA,CAAC,GAEzD,WAAW,eAAe,EAAE;AAElC,SAAAV,MAAA,UAAU,MAAM;AACd,UAAM,eAAe,OAAO,KAAK,QAAQ,EAAE,UAAU;AAC9C,WAAA,MAAM,aAAa;EACzB,GAAA,CAAC,UAAU,MAAM,CAAC,GAEd;AACT;AAOA,SAAS,eAKP,IAAU;AACJ,QAAA,MAAMD,aAAiB,IAAI;AACjC,SAAAY,MAAA,mBAAmB,MAAM;AACvB,QAAI,UAAU;AAAA,KACb,CAAC,EAAE,CAAC,GAEAC,MAAAA,YAAY,IAAI,SAAgB;AACrC,UAAM,IAAI,IAAI;AACP,WAAA,EAAE,GAAG,IAAI;AAAA,EAClB,GAAG,CAAE,CAAA;AACP;;;"}

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import {Observable} from 'rxjs'
+import {ObservedValueOf} from 'rxjs'
+
+/** @public */
+export declare function useObservable<ObservableType extends Observable<any>>(
+  observable: ObservableType,
+  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
+): ObservedValueOf<ObservableType>
+
+/** @public */
+export declare function useObservable<ObservableType extends Observable<any>>(
+  observable: ObservableType,
+): undefined | ObservedValueOf<ObservableType>
+
+/** @public */
+export declare function useObservable<ObservableType extends Observable<any>, InitialValue>(
+  observable: ObservableType,
+  initialValue: InitialValue,
+): InitialValue | ObservedValueOf<ObservableType>
+
+/** @public */
+export declare function useObservableEvent<T, U>(
+  fn: (arg: Observable<T>) => Observable<U>,
+): (arg: T) => void
+
+export {}

package/dist/index.d.ts

@@ -1,12 +1,23 @@
 import {Observable} from 'rxjs'
-import type {ObservedValueOf} from 'rxjs'
+import {ObservedValueOf} from 'rxjs'
 
 /** @public */
 export declare function useObservable<ObservableType extends Observable<any>>(
   observable: ObservableType,
-  initialValue?: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
+  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
 ): ObservedValueOf<ObservableType>
 
+/** @public */
+export declare function useObservable<ObservableType extends Observable<any>>(
+  observable: ObservableType,
+): undefined | ObservedValueOf<ObservableType>
+
+/** @public */
+export declare function useObservable<ObservableType extends Observable<any>, InitialValue>(
+  observable: ObservableType,
+  initialValue: InitialValue,
+): InitialValue | ObservedValueOf<ObservableType>
+
 /** @public */
 export declare function useObservableEvent<T, U>(
   fn: (arg: Observable<T>) => Observable<U>,

package/dist/index.js

@@ -1,52 +1,75 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: !0 });
-var react = require("react"), operators = require("rxjs/operators"), observableCallback = require("observable-callback");
+import { useRef, useEffect, useMemo, useSyncExternalStore, useState, useInsertionEffect, useCallback } from "react";
+import { catchError, of, finalize, share } from "rxjs";
+import { map, tap } from "rxjs/operators";
+import { observableCallback } from "observable-callback";
 function getValue(value) {
   return typeof value == "function" ? value() : value;
 }
 const cache = /* @__PURE__ */ new WeakMap();
 function useObservable(observable, initialValue) {
-  const initialValueRef = react.useRef(getValue(initialValue));
-  react.useEffect(() => {
+  const initialValueRef = useRef(getValue(initialValue));
+  useEffect(() => {
     initialValueRef.current = getValue(initialValue);
   }, [initialValue]);
-  const store = react.useMemo(() => {
+  const store = useMemo(() => {
     if (!cache.has(observable)) {
       const entry = {
         snapshot: initialValueRef.current
       };
       entry.observable = observable.pipe(
-        operators.shareReplay({ refCount: !0, bufferSize: 1 }),
-        operators.tap((value) => entry.snapshot = value)
+        map((value) => ({ snapshot: value, error: void 0 })),
+        catchError((error) => of({ snapshot: void 0, error })),
+        tap(({ snapshot, error }) => {
+          entry.snapshot = snapshot, entry.error = error;
+        }),
+        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
+        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
+        map((value) => {
+        }),
+        // Ensure that the cache entry is deleted when the observable completes or errors.
+        finalize(() => cache.delete(observable)),
+        share()
       ), entry.subscription = entry.observable.subscribe(), cache.set(observable, entry);
     }
     const instance = cache.get(observable);
     return instance.subscription.closed && (instance.subscription = instance.observable.subscribe()), {
       subscribe: (onStoreChange) => {
         const subscription = instance.observable.subscribe(onStoreChange);
-        return instance.subscription.unsubscribe(), () => subscription.unsubscribe();
+        return instance.subscription.unsubscribe(), () => {
+          subscription.unsubscribe();
+        };
       },
-      getSnapshot: () => instance.snapshot
+      getSnapshot: () => {
+        if (instance.error)
+          throw instance.error;
+        return instance.snapshot;
+      }
     };
   }, [observable]);
-  return react.useSyncExternalStore(store.subscribe, store.getSnapshot);
+  return useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    typeof initialValueRef.current > "u" ? void 0 : () => initialValueRef.current
+  );
 }
 function useObservableEvent(fn) {
-  const [[calls$, call]] = react.useState(() => observableCallback.observableCallback()), callback = useEffectEvent(fn);
-  return react.useEffect(() => {
+  const [[calls$, call]] = useState(() => observableCallback()), callback = useEffectEvent(fn);
+  return useEffect(() => {
     const subscription = calls$.pipe(callback).subscribe();
     return () => subscription.unsubscribe();
   }, [callback, calls$]), call;
 }
 function useEffectEvent(fn) {
-  const ref = react.useRef(null);
-  return react.useInsertionEffect(() => {
+  const ref = useRef(null);
+  return useInsertionEffect(() => {
     ref.current = fn;
-  }, [fn]), react.useCallback((...args) => {
+  }, [fn]), useCallback((...args) => {
     const f = ref.current;
     return f(...args);
   }, []);
 }
-exports.useObservable = useObservable;
-exports.useObservableEvent = useObservableEvent;
+export {
+  useObservable,
+  useObservableEvent
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport type {Observable, ObservedValueOf, Subscription} from 'rxjs'\nimport {shareReplay, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\ninterface CacheRecord<T> {\n  subscription: Subscription\n  observable: Observable<T>\n  snapshot: 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  /**\n   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.\n   * But we also don't want the initialValue to be stale if the observable changes.\n   */\n  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)\n\n  /**\n   * Ensures that the initialValue is always up-to-date in case the observable changes.\n   */\n  useEffect(() => {\n    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: initialValueRef.current,\n      }\n      entry.observable = observable.pipe(\n        shareReplay({refCount: true, bufferSize: 1}),\n        tap((value) => (entry.snapshot = value)),\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      entry.subscription = entry.observable.subscribe()\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    if (instance.subscription.closed) {\n      instance.subscription = instance.observable.subscribe()\n    }\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        instance.subscription.unsubscribe()\n        return () => subscription.unsubscribe()\n      },\n      getSnapshot: () => instance.snapshot,\n    }\n  }, [observable])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(store.subscribe, store.getSnapshot)\n}\n","import {observableCallback} from 'observable-callback'\nimport {useCallback, useEffect, useInsertionEffect, useRef, useState} from 'react'\nimport {type Observable} from 'rxjs'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  fn: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const callback = useEffectEvent(fn)\n\n  useEffect(() => {\n    const subscription = calls$.pipe(callback).subscribe()\n    return () => subscription.unsubscribe()\n  }, [callback, calls$])\n\n  return call\n}\n\n/**\n * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19\n */\nfunction useEffectEvent<\n  const T extends (\n    ...args: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    any[]\n  ) => void,\n>(fn: T): T {\n  const ref = useRef<T | null>(null)\n  useInsertionEffect(() => {\n    ref.current = fn\n  }, [fn])\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return useCallback((...args: any[]) => {\n    const f = ref.current!\n    return f(...args)\n  }, []) as T\n}\n"],"names":["useRef","useEffect","useMemo","shareReplay","tap","useSyncExternalStore","useState","observableCallback","useInsertionEffect","useCallback"],"mappings":";;;AAIA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAA,IAAU;AACjD;AAOA,MAAM,4BAAY;AAGF,SAAA,cACd,YACA,cACiC;AAKjC,QAAM,kBAAkBA,MAAA,OAAO,SAAS,YAAY,CAAoC;AAKxFC,QAAAA,UAAU,MAAM;AACE,oBAAA,UAAU,SAAS,YAAY;AAAA,EAAA,GAC9C,CAAC,YAAY,CAAC;AAEX,QAAA,QAAQC,MAAAA,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAAA;AAE5B,YAAM,aAAa,WAAW;AAAA,QAC5BC,sBAAY,EAAC,UAAU,IAAM,YAAY,GAAE;AAAA,QAC3CC,UAAAA,IAAI,CAAC,UAAW,MAAM,WAAW,KAAM;AAAA,MACzC,GAGA,MAAM,eAAe,MAAM,WAAW,aAEtC,MAAM,IAAI,YAAY,KAAqD;AAAA,IAC7E;AAEM,UAAA,WAAW,MAAM,IAAI,UAAU;AACjC,WAAA,SAAS,aAAa,WACxB,SAAS,eAAe,SAAS,WAAW,cAGvC;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AAChE,eAAA,SAAS,aAAa,YACf,GAAA,MAAM,aAAa;MAC5B;AAAA,MACA,aAAa,MAAM,SAAS;AAAA,IAAA;AAAA,EAC9B,GACC,CAAC,UAAU,CAAC;AAEf,SAAOC,MAAsD,qBAAA,MAAM,WAAW,MAAM,WAAW;AACjG;AC5DO,SAAS,mBACd,IACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAIC,MAAS,SAAA,MAAMC,mBAAsB,mBAAA,CAAC,GAEzD,WAAW,eAAe,EAAE;AAElC,SAAAN,MAAA,UAAU,MAAM;AACd,UAAM,eAAe,OAAO,KAAK,QAAQ,EAAE,UAAU;AAC9C,WAAA,MAAM,aAAa;EACzB,GAAA,CAAC,UAAU,MAAM,CAAC,GAEd;AACT;AAKA,SAAS,eAKP,IAAU;AACJ,QAAA,MAAMD,aAAiB,IAAI;AACjC,SAAAQ,MAAA,mBAAmB,MAAM;AACvB,QAAI,UAAU;AAAA,KACb,CAAC,EAAE,CAAC,GAEAC,MAAAA,YAAY,IAAI,SAAgB;AACrC,UAAM,IAAI,IAAI;AACP,WAAA,EAAE,GAAG,IAAI;AAAA,EAClB,GAAG,CAAE,CAAA;AACP;;;"}
+{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport {\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  type Subscription,\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  subscription: Subscription\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,\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  /**\n   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.\n   * But we also don't want the initialValue to be stale if the observable changes.\n   */\n  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)\n\n  /**\n   * Ensures that the initialValue is always up-to-date in case the observable changes.\n   */\n  useEffect(() => {\n    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: initialValueRef.current,\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(),\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      entry.subscription = entry.observable.subscribe()\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    if (instance.subscription.closed) {\n      instance.subscription = instance.observable.subscribe()\n    }\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        instance.subscription.unsubscribe()\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])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValueRef.current === 'undefined' ? undefined : () => initialValueRef.current,\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useCallback, useEffect, useInsertionEffect, useRef, useState} from 'react'\nimport {type Observable} from 'rxjs'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  fn: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const callback = useEffectEvent(fn)\n\n  useEffect(() => {\n    const subscription = calls$.pipe(callback).subscribe()\n    return () => subscription.unsubscribe()\n  }, [callback, calls$])\n\n  return call\n}\n\n/**\n * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19.\n * https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n * To learn more about the ponyfill itself, see: https://blog.bitsrc.io/a-look-inside-the-useevent-polyfill-from-the-new-react-docs-d1c4739e8072\n */\nfunction useEffectEvent<\n  const T extends (\n    ...args: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    any[]\n  ) => void,\n>(fn: T): T {\n  const ref = useRef<T | null>(null)\n  useInsertionEffect(() => {\n    ref.current = fn\n  }, [fn])\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return useCallback((...args: any[]) => {\n    const f = ref.current!\n    return f(...args)\n  }, []) as T\n}\n"],"names":[],"mappings":";;;;AAYA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAA,IAAU;AACjD;AASA,MAAM,4BAAY;AAiBF,SAAA,cACd,YACA,cACgD;AAKhD,QAAM,kBAAkB,OAAO,SAAS,YAAY,CAAoC;AAKxF,YAAU,MAAM;AACE,oBAAA,UAAU,SAAS,YAAY;AAAA,EAAA,GAC9C,CAAC,YAAY,CAAC;AAEX,QAAA,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAAA;AAE5B,YAAM,aAAa,WAAW;AAAA,QAC5B,IAAI,CAAC,WAAW,EAAC,UAAU,OAAO,OAAO,SAAW;AAAA,QACpD,WAAW,CAAC,UAAU,GAAG,EAAC,UAAU,QAAW,MAAK,CAAC,CAAC;AAAA,QACtD,IAAI,CAAC,EAAC,UAAU,YAAW;AACnB,gBAAA,WAAW,UACjB,MAAM,QAAQ;AAAA,QAAA,CACf;AAAA;AAAA;AAAA,QAGD,IAAI,CAAC,UAAO;AAAA,QAAA,CAAa;AAAA;AAAA,QAEzB,SAAS,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA,QACvC,MAAM;AAAA,MACR,GAGA,MAAM,eAAe,MAAM,WAAW,aAEtC,MAAM,IAAI,YAAY,KAAqD;AAAA,IAC7E;AAEM,UAAA,WAAW,MAAM,IAAI,UAAU;AACjC,WAAA,SAAS,aAAa,WACxB,SAAS,eAAe,SAAS,WAAW,cAGvC;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AACvD,eAAA,SAAA,aAAa,YAAY,GAC3B,MAAM;AACX,uBAAa,YAAY;AAAA,QAAA;AAAA,MAE7B;AAAA,MACA,aAAa,MAAM;AACjB,YAAI,SAAS;AACX,gBAAM,SAAS;AAEjB,eAAO,SAAS;AAAA,MAClB;AAAA,IAAA;AAAA,EACF,GACC,CAAC,UAAU,CAAC;AAER,SAAA;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO,gBAAgB,UAAY,MAAc,SAAY,MAAM,gBAAgB;AAAA,EAAA;AAEvF;ACzGO,SAAS,mBACd,IACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAI,SAAS,MAAM,mBAAsB,CAAC,GAEzD,WAAW,eAAe,EAAE;AAElC,SAAA,UAAU,MAAM;AACd,UAAM,eAAe,OAAO,KAAK,QAAQ,EAAE,UAAU;AAC9C,WAAA,MAAM,aAAa;EACzB,GAAA,CAAC,UAAU,MAAM,CAAC,GAEd;AACT;AAOA,SAAS,eAKP,IAAU;AACJ,QAAA,MAAM,OAAiB,IAAI;AACjC,SAAA,mBAAmB,MAAM;AACvB,QAAI,UAAU;AAAA,KACb,CAAC,EAAE,CAAC,GAEA,YAAY,IAAI,SAAgB;AACrC,UAAM,IAAI,IAAI;AACP,WAAA,EAAE,GAAG,IAAI;AAAA,EAClB,GAAG,CAAE,CAAA;AACP;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.0.0-6",
+  "version": "3.0.0-8",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -46,17 +46,17 @@
     "Cody Olsen <stipsan@gmail.com> (https://github.com/stipsan)"
   ],
   "sideEffects": false,
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
@@ -66,14 +66,6 @@
     "website",
     "."
   ],
-  "scripts": {
-    "build": "pkg build --strict --clean --check",
-    "dev": "cd website && npm run dev",
-    "prepublishOnly": "npm run build",
-    "watch": "npm run build -- --watch",
-    "test": "vitest run",
-    "lint": "eslint --cache ."
-  },
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
@@ -97,7 +89,7 @@
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
-    "npm-run-all": "^4.1.5",
+    "jsdom": "^24.1.0",
     "prettier": "^3.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -110,5 +102,13 @@
   "peerDependencies": {
     "react": "^18.3 || >=19.0.0-rc",
     "rxjs": "^7"
+  },
+  "scripts": {
+    "build": "pkg build --strict --clean --check",
+    "dev": "pnpm --filter 'react-rx-website' dev",
+    "format": "prettier --cache --write .",
+    "lint": "eslint --cache .",
+    "test": "vitest run --typecheck",
+    "watch": "pnpm build -- --watch"
   }
-}
+}

package/src/__tests__/errors.test.tsx

@@ -0,0 +1,49 @@
+import {render} from '@testing-library/react'
+import React from 'react'
+import {mergeMap, of, Subject, throwError} from 'rxjs'
+import {expect, test, vitest} from 'vitest'
+
+import {useObservable} from '../useObservable.ts'
+
+test('errors emitted by the observable should be thrown during the react render phase', () => {
+  const subject = new Subject<{error: boolean; message: string}>()
+
+  const messages = subject
+    .asObservable()
+    .pipe(
+      mergeMap((value) =>
+        value.error ? throwError(() => new Error(value.message)) : of(value.message),
+      ),
+    )
+
+  function ObservableComponent() {
+    return useObservable(messages, '☺️')
+  }
+
+  const {container, rerender} = render(<ObservableComponent />)
+  // no error (yet)
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      ☺️
+    </div>
+  `)
+
+  // Note that the error is thrown later, during the render phase
+  subject.next({error: true, message: 'Boom'})
+
+  const consoleErrorSpy = vitest.spyOn(globalThis.console, 'error').mockImplementation(() => {
+    // silence console.error()'s
+  })
+  expect(() => rerender(<ObservableComponent />)).toThrowErrorMatchingInlineSnapshot(
+    `[Error: Boom]`,
+  )
+
+  // Assert that react warnings are captured and logged to the console
+  // note: this may change with React version
+  expect(consoleErrorSpy.mock.calls.flat().join('\n')).toMatchObject(
+    expect.stringContaining('Uncaught [Error: Boom]'),
+  )
+  expect(consoleErrorSpy.mock.calls.flat().join('\n')).toMatchObject(
+    expect.stringContaining('The above error occurred in the <ObservableComponent> component'),
+  )
+})

package/src/__tests__/useObservable.test-d.ts

@@ -0,0 +1,27 @@
+import {of} from 'rxjs'
+import {expectTypeOf, test} from 'vitest'
+
+import {useObservable} from '../useObservable'
+
+test('useObservable with no initial value can be undefined', () => {
+  const observable = of('foo')
+
+  expectTypeOf(useObservable(observable)).toEqualTypeOf<string | undefined>()
+
+  //@ts-expect-error - because initial value is not given, we can't guarantee the observable emits a sync value, so it could be undefined
+  expectTypeOf(useObservable(observable)).toEqualTypeOf<string>()
+})
+
+test('return type of useObservable with initial value is not undefined', () => {
+  const observable = of('foo')
+  //@ts-expect-error - because initial value is given, the return type can never be undefined
+  expectTypeOf(useObservable(observable, 'bar')).toEqualTypeOf<string | undefined>()
+})
+
+test('useObservable with initial value if a different type returns a union of the observed type and the initial value type', () => {
+  const observable = of('foo')
+
+  expectTypeOf(useObservable(observable, 1)).toEqualTypeOf<string | number>()
+
+  expectTypeOf(useObservable(observable, 'foo')).toEqualTypeOf<string>()
+})

package/src/__tests__/{useObservable.test.tsx → useObservable.test.ts}

@@ -1,7 +1,7 @@
 import {act, render, renderHook} from '@testing-library/react'
 import {createElement, Fragment} from 'react'
-import {asyncScheduler, Observable, of, scheduled, Subject, timer} from 'rxjs'
-import {mapTo} from 'rxjs/operators'
+import {asyncScheduler, Observable, of, ReplaySubject, scheduled, share, Subject, timer} from 'rxjs'
+import {map} from 'rxjs/operators'
 import {expect, test} from 'vitest'
 
 import {useObservable} from '../useObservable'
@@ -43,7 +43,7 @@ test('should only subscribe once when given same observable on re-renders', () =
 })
 
 test('should not return undefined during render if initial value is given', () => {
-  const observable = timer(100).pipe(mapTo('emitted value'))
+  const observable = timer(100).pipe(map(() => 'emitted value'))
 
   const returnedValues: unknown[] = []
   function ObservableComponent() {
@@ -103,6 +103,90 @@ test('should have passed initialValue as initial value from delayed observables'
   unmount()
 })
 
+test('should rerender with initial value if component unmounts and then remounts', () => {
+  const values$ = new Subject<string>()
+  const firstHook = renderHook(() => useObservable(values$, 'initial'))
+
+  expect(firstHook.result.current).toBe('initial')
+
+  act(() => values$.next('something'))
+  expect(firstHook.result.current).toBe('something')
+
+  firstHook.unmount()
+
+  const nextHook = renderHook(() => useObservable(values$, 'initial2'))
+
+  expect(nextHook.result.current).toBe('initial2')
+})
+
+test('should share the observable between each concurrent subscribing hook', () => {
+  let subscribeCount = 0
+  const observable = new Observable<number>((subscriber) => {
+    subscriber.next(subscribeCount++)
+  })
+  const firstHook = renderHook(() => useObservable(observable))
+  expect(firstHook.result.current).toBe(0)
+  const secondHook = renderHook(() => useObservable(observable))
+  expect(secondHook.result.current).toBe(0)
+  firstHook.unmount()
+  secondHook.unmount()
+
+  const thirdHook = renderHook(() => useObservable(observable))
+  expect(thirdHook.result.current).toBe(1)
+  thirdHook.unmount()
+})
+
+test('should restart any completed observable on mount', () => {
+  let subscribeCount = 0
+  let unsubscribeCount = 0
+
+  type Notification<T> =
+    | {kind: 'next'; value: T}
+    | {kind: 'error'; error: Error}
+    | {kind: 'complete'}
+
+  const notifications$ = new Subject<Notification<string>>()
+
+  const observable = new Observable<string>((subscriber) => {
+    subscribeCount++
+    const subscription = notifications$.subscribe((notification) => {
+      if (notification.kind === 'next') {
+        subscriber.next(notification.value)
+      } else if (notification.kind === 'error') {
+        subscriber.error(notification.error)
+      } else if (notification.kind === 'complete') {
+        subscriber.complete()
+      }
+    })
+    return () => {
+      unsubscribeCount++
+      subscription.unsubscribe()
+    }
+  }).pipe(share({connector: () => new ReplaySubject(1)}))
+
+  const firstHook = renderHook(() => useObservable(observable, 'initial'))
+  expect(firstHook.result.current).toBe('initial')
+
+  act(() => notifications$.next({kind: 'next', value: 'something'}))
+  expect(firstHook.result.current).toBe('something')
+  act(() => notifications$.next({kind: 'complete'}))
+  expect(firstHook.result.current).toBe('something')
+  act(() => notifications$.next({kind: 'next', value: 'after complete'}))
+  expect(firstHook.result.current).toBe('something')
+
+  expect(subscribeCount).toBe(1)
+  expect(unsubscribeCount).toBe(1)
+
+  firstHook.unmount()
+
+  const secondHook = renderHook(() => useObservable(observable))
+  expect(secondHook.result.current).toBe(undefined)
+  expect(subscribeCount).toBe(2)
+  expect(unsubscribeCount).toBe(1)
+  secondHook.unmount()
+  expect(unsubscribeCount).toBe(2)
+})
+
 test('should update with values from observables', () => {
   const values$ = new Subject<string>()
   const {result, unmount} = renderHook(() => useObservable(values$))

package/src/useObservable.ts

@@ -1,14 +1,24 @@
 import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'
-import type {Observable, ObservedValueOf, Subscription} from 'rxjs'
-import {shareReplay, tap} from 'rxjs/operators'
+import {
+  catchError,
+  finalize,
+  type Observable,
+  type ObservedValueOf,
+  of,
+  share,
+  type Subscription,
+} from 'rxjs'
+import {map, tap} from 'rxjs/operators'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
+
 interface CacheRecord<T> {
   subscription: Subscription
-  observable: Observable<T>
+  observable: Observable<void>
   snapshot: T
+  error?: unknown
 }
 
 const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
@@ -16,8 +26,22 @@ const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
 /** @public */
 export function useObservable<ObservableType extends Observable<any>>(
   observable: ObservableType,
-  initialValue?: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
-): ObservedValueOf<ObservableType> {
+  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
+): ObservedValueOf<ObservableType>
+/** @public */
+export function useObservable<ObservableType extends Observable<any>>(
+  observable: ObservableType,
+): undefined | ObservedValueOf<ObservableType>
+/** @public */
+export function useObservable<ObservableType extends Observable<any>, InitialValue>(
+  observable: ObservableType,
+  initialValue: InitialValue,
+): InitialValue | ObservedValueOf<ObservableType>
+/** @public */
+export function useObservable<ObservableType extends Observable<any>, InitialValue>(
+  observable: ObservableType,
+  initialValue?: InitialValue | (() => InitialValue),
+): InitialValue | ObservedValueOf<ObservableType> {
   /**
    * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
    * But we also don't want the initialValue to be stale if the observable changes.
@@ -37,8 +61,18 @@ export function useObservable<ObservableType extends Observable<any>>(
         snapshot: initialValueRef.current,
       }
       entry.observable = observable.pipe(
-        shareReplay({refCount: true, bufferSize: 1}),
-        tap((value) => (entry.snapshot = value)),
+        map((value) => ({snapshot: value, error: undefined})),
+        catchError((error) => of({snapshot: undefined, error})),
+        tap(({snapshot, error}) => {
+          entry.snapshot = snapshot
+          entry.error = error
+        }),
+        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
+        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
+        map((value) => void value),
+        // Ensure that the cache entry is deleted when the observable completes or errors.
+        finalize(() => cache.delete(observable)),
+        share(),
       )
 
       // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
@@ -56,11 +90,22 @@ export function useObservable<ObservableType extends Observable<any>>(
       subscribe: (onStoreChange: () => void) => {
         const subscription = instance.observable.subscribe(onStoreChange)
         instance.subscription.unsubscribe()
-        return () => subscription.unsubscribe()
+        return () => {
+          subscription.unsubscribe()
+        }
+      },
+      getSnapshot: () => {
+        if (instance.error) {
+          throw instance.error
+        }
+        return instance.snapshot
       },
-      getSnapshot: () => instance.snapshot,
     }
   }, [observable])
 
-  return useSyncExternalStore<ObservedValueOf<ObservableType>>(store.subscribe, store.getSnapshot)
+  return useSyncExternalStore<ObservedValueOf<ObservableType>>(
+    store.subscribe,
+    store.getSnapshot,
+    typeof initialValueRef.current === 'undefined' ? undefined : () => initialValueRef.current,
+  )
 }

package/src/useObservableEvent.ts

@@ -19,7 +19,9 @@ export function useObservableEvent<T, U>(
 }
 
 /**
- * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19.
+ * https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ * To learn more about the ponyfill itself, see: https://blog.bitsrc.io/a-look-inside-the-useevent-polyfill-from-the-new-react-docs-d1c4739e8072
  */
 function useEffectEvent<
   const T extends (

package/dist/index.d.mts

@@ -1,15 +0,0 @@
-import {Observable} from 'rxjs'
-import type {ObservedValueOf} from 'rxjs'
-
-/** @public */
-export declare function useObservable<ObservableType extends Observable<any>>(
-  observable: ObservableType,
-  initialValue?: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
-): ObservedValueOf<ObservableType>
-
-/** @public */
-export declare function useObservableEvent<T, U>(
-  fn: (arg: Observable<T>) => Observable<U>,
-): (arg: T) => void
-
-export {}

package/dist/index.mjs

@@ -1,54 +0,0 @@
-import { useRef, useEffect, useMemo, useSyncExternalStore, useState, useInsertionEffect, useCallback } from "react";
-import { shareReplay, tap } from "rxjs/operators";
-import { observableCallback } from "observable-callback";
-function getValue(value) {
-  return typeof value == "function" ? value() : value;
-}
-const cache = /* @__PURE__ */ new WeakMap();
-function useObservable(observable, initialValue) {
-  const initialValueRef = useRef(getValue(initialValue));
-  useEffect(() => {
-    initialValueRef.current = getValue(initialValue);
-  }, [initialValue]);
-  const store = useMemo(() => {
-    if (!cache.has(observable)) {
-      const entry = {
-        snapshot: initialValueRef.current
-      };
-      entry.observable = observable.pipe(
-        shareReplay({ refCount: !0, bufferSize: 1 }),
-        tap((value) => entry.snapshot = value)
-      ), entry.subscription = entry.observable.subscribe(), cache.set(observable, entry);
-    }
-    const instance = cache.get(observable);
-    return instance.subscription.closed && (instance.subscription = instance.observable.subscribe()), {
-      subscribe: (onStoreChange) => {
-        const subscription = instance.observable.subscribe(onStoreChange);
-        return instance.subscription.unsubscribe(), () => subscription.unsubscribe();
-      },
-      getSnapshot: () => instance.snapshot
-    };
-  }, [observable]);
-  return useSyncExternalStore(store.subscribe, store.getSnapshot);
-}
-function useObservableEvent(fn) {
-  const [[calls$, call]] = useState(() => observableCallback()), callback = useEffectEvent(fn);
-  return useEffect(() => {
-    const subscription = calls$.pipe(callback).subscribe();
-    return () => subscription.unsubscribe();
-  }, [callback, calls$]), call;
-}
-function useEffectEvent(fn) {
-  const ref = useRef(null);
-  return useInsertionEffect(() => {
-    ref.current = fn;
-  }, [fn]), useCallback((...args) => {
-    const f = ref.current;
-    return f(...args);
-  }, []);
-}
-export {
-  useObservable,
-  useObservableEvent
-};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport type {Observable, ObservedValueOf, Subscription} from 'rxjs'\nimport {shareReplay, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\ninterface CacheRecord<T> {\n  subscription: Subscription\n  observable: Observable<T>\n  snapshot: 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  /**\n   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.\n   * But we also don't want the initialValue to be stale if the observable changes.\n   */\n  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)\n\n  /**\n   * Ensures that the initialValue is always up-to-date in case the observable changes.\n   */\n  useEffect(() => {\n    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: initialValueRef.current,\n      }\n      entry.observable = observable.pipe(\n        shareReplay({refCount: true, bufferSize: 1}),\n        tap((value) => (entry.snapshot = value)),\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      entry.subscription = entry.observable.subscribe()\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    if (instance.subscription.closed) {\n      instance.subscription = instance.observable.subscribe()\n    }\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        instance.subscription.unsubscribe()\n        return () => subscription.unsubscribe()\n      },\n      getSnapshot: () => instance.snapshot,\n    }\n  }, [observable])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(store.subscribe, store.getSnapshot)\n}\n","import {observableCallback} from 'observable-callback'\nimport {useCallback, useEffect, useInsertionEffect, useRef, useState} from 'react'\nimport {type Observable} from 'rxjs'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  fn: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const callback = useEffectEvent(fn)\n\n  useEffect(() => {\n    const subscription = calls$.pipe(callback).subscribe()\n    return () => subscription.unsubscribe()\n  }, [callback, calls$])\n\n  return call\n}\n\n/**\n * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19\n */\nfunction useEffectEvent<\n  const T extends (\n    ...args: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    any[]\n  ) => void,\n>(fn: T): T {\n  const ref = useRef<T | null>(null)\n  useInsertionEffect(() => {\n    ref.current = fn\n  }, [fn])\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return useCallback((...args: any[]) => {\n    const f = ref.current!\n    return f(...args)\n  }, []) as T\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAA,IAAU;AACjD;AAOA,MAAM,4BAAY;AAGF,SAAA,cACd,YACA,cACiC;AAKjC,QAAM,kBAAkB,OAAO,SAAS,YAAY,CAAoC;AAKxF,YAAU,MAAM;AACE,oBAAA,UAAU,SAAS,YAAY;AAAA,EAAA,GAC9C,CAAC,YAAY,CAAC;AAEX,QAAA,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAAA;AAE5B,YAAM,aAAa,WAAW;AAAA,QAC5B,YAAY,EAAC,UAAU,IAAM,YAAY,GAAE;AAAA,QAC3C,IAAI,CAAC,UAAW,MAAM,WAAW,KAAM;AAAA,MACzC,GAGA,MAAM,eAAe,MAAM,WAAW,aAEtC,MAAM,IAAI,YAAY,KAAqD;AAAA,IAC7E;AAEM,UAAA,WAAW,MAAM,IAAI,UAAU;AACjC,WAAA,SAAS,aAAa,WACxB,SAAS,eAAe,SAAS,WAAW,cAGvC;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AAChE,eAAA,SAAS,aAAa,YACf,GAAA,MAAM,aAAa;MAC5B;AAAA,MACA,aAAa,MAAM,SAAS;AAAA,IAAA;AAAA,EAC9B,GACC,CAAC,UAAU,CAAC;AAEf,SAAO,qBAAsD,MAAM,WAAW,MAAM,WAAW;AACjG;AC5DO,SAAS,mBACd,IACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAI,SAAS,MAAM,mBAAsB,CAAC,GAEzD,WAAW,eAAe,EAAE;AAElC,SAAA,UAAU,MAAM;AACd,UAAM,eAAe,OAAO,KAAK,QAAQ,EAAE,UAAU;AAC9C,WAAA,MAAM,aAAa;EACzB,GAAA,CAAC,UAAU,MAAM,CAAC,GAEd;AACT;AAKA,SAAS,eAKP,IAAU;AACJ,QAAA,MAAM,OAAiB,IAAI;AACjC,SAAA,mBAAmB,MAAM;AACvB,QAAI,UAAU;AAAA,KACb,CAAC,EAAE,CAAC,GAEA,YAAY,IAAI,SAAgB;AACrC,UAAM,IAAI,IAAI;AACP,WAAA,EAAE,GAAG,IAAI;AAAA,EAClB,GAAG,CAAE,CAAA;AACP;"}