react-rx 4.1.2-canary.1 → 4.1.2-canary.11

package/dist/index.cjs

@@ -1,62 +1,81 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var react = require("react"), rxjs = require("rxjs"), operators = require("rxjs/operators"), observableCallback = require("observable-callback"), useEffectEvent = require("use-effect-event");
+var reactCompilerRuntime = require("react-compiler-runtime"), react = require("react"), rxjs = require("rxjs"), operators = require("rxjs/operators"), observableCallback = require("observable-callback"), useEffectEvent = require("use-effect-event");
 function getValue(value) {
   return typeof value == "function" ? value() : value;
 }
 const cache = /* @__PURE__ */ new WeakMap();
 function useObservable(observable, initialValue) {
-  const [getInitialValue] = react.useState(
-    () => () => getValue(initialValue)
-  ), store = react.useMemo(() => {
-    if (!cache.has(observable)) {
-      const entry = {
-        snapshot: getInitialValue()
-      };
-      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({ resetOnRefCountZero: () => rxjs.timer(0, rxjs.asapScheduler) })
-      ), entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
-    }
-    const instance = cache.get(observable);
-    return {
-      subscribe: (onStoreChange) => {
-        const subscription = instance.observable.subscribe(onStoreChange);
-        return () => {
-          subscription.unsubscribe();
-        };
-      },
+  const $ = reactCompilerRuntime.c(9);
+  if (!cache.has(observable)) {
+    const state = {
+      snapshot: void 0,
+      error: void 0
+    }, entry = {
+      state,
+      observable: observable.pipe(operators.map(_temp$1), rxjs.catchError(_temp2), operators.tap((t02) => {
+        const {
+          snapshot,
+          error: error_0
+        } = t02;
+        state.snapshot = snapshot, state.error = error_0;
+      }), operators.map(_temp3), rxjs.finalize(() => cache.delete(observable)), rxjs.share({
+        resetOnRefCountZero: _temp4
+      })),
       getSnapshot: () => {
-        if (instance.error)
-          throw instance.error;
-        return instance.snapshot;
+        if (state.error)
+          throw state.error;
+        return state.snapshot;
       }
     };
-  }, [observable, getInitialValue]);
-  return react.useEffect(() => {
-    console.log("stor.subscribe changed", store.subscribe);
-  }, [store.subscribe]), react.useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    typeof initialValue > "u" ? void 0 : () => getInitialValue()
-  );
+    entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
+  }
+  let t0;
+  $[0] !== observable ? (t0 = cache.get(observable), $[0] = observable, $[1] = t0) : t0 = $[1];
+  const instance = t0;
+  let t1;
+  $[2] !== instance.observable ? (t1 = (onStoreChange) => {
+    const subscription_0 = instance.observable.subscribe(onStoreChange);
+    return () => {
+      subscription_0.unsubscribe();
+    };
+  }, $[2] = instance.observable, $[3] = t1) : t1 = $[3];
+  const subscribe = t1;
+  let t2;
+  $[4] !== instance || $[5] !== initialValue ? (t2 = () => instance.getSnapshot() ?? getValue(initialValue), $[4] = instance, $[5] = initialValue, $[6] = t2) : t2 = $[6];
+  let t3;
+  return $[7] !== initialValue ? (t3 = typeof initialValue > "u" ? void 0 : () => getValue(initialValue), $[7] = initialValue, $[8] = t3) : t3 = $[8], react.useSyncExternalStore(subscribe, t2, t3);
+}
+function _temp4() {
+  return rxjs.timer(0, rxjs.asapScheduler);
+}
+function _temp3(value_0) {
+}
+function _temp2(error) {
+  return rxjs.of({
+    snapshot: void 0,
+    error
+  });
+}
+function _temp$1(value) {
+  return {
+    snapshot: value,
+    error: void 0
+  };
 }
 function useObservableEvent(handleEvent) {
-  const [[calls$, call]] = react.useState(() => observableCallback.observableCallback()), onEvent = useEffectEvent.useEffectEvent((observable) => handleEvent(observable));
-  return react.useEffect(() => {
-    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe();
+  const $ = reactCompilerRuntime.c(6), [t0] = react.useState(_temp), [calls$, call] = t0;
+  let t1;
+  $[0] !== handleEvent ? (t1 = (observable) => handleEvent(observable), $[0] = handleEvent, $[1] = t1) : t1 = $[1];
+  const onEvent = useEffectEvent.useEffectEvent(t1);
+  let t2, t3;
+  return $[2] !== calls$ || $[3] !== onEvent ? (t2 = () => {
+    const subscription = calls$.pipe((observable_0) => onEvent(observable_0)).subscribe();
     return () => subscription.unsubscribe();
-  }, [calls$, onEvent]), call;
+  }, t3 = [calls$, onEvent], $[2] = calls$, $[3] = onEvent, $[4] = t2, $[5] = t3) : (t2 = $[4], t3 = $[5]), react.useEffect(t2, t3), call;
+}
+function _temp() {
+  return observableCallback.observableCallback();
 }
 exports.useObservable = useObservable;
 exports.useObservableEvent = useObservableEvent;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useState, useSyncExternalStore} from 'react'\nimport {\n  asapScheduler,\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  observable: Observable<void>\n  snapshot: T\n  error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n  const [getInitialValue] = useState(\n    () => () => getValue(initialValue) as ObservedValueOf<ObservableType>,\n  )\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: getInitialValue(),\n      }\n      entry.observable = observable.pipe(\n        map((value) => ({snapshot: value, error: undefined})),\n        catchError((error) => of({snapshot: undefined, error})),\n        tap(({snapshot, error}) => {\n          entry.snapshot = snapshot\n          entry.error = error\n        }),\n        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n        map((value) => void value),\n        // Ensure that the cache entry is deleted when the observable completes or errors.\n        finalize(() => cache.delete(observable)),\n        share({resetOnRefCountZero: () => timer(0, asapScheduler)}),\n      )\n\n      // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n      const subscription = entry.observable.subscribe()\n      subscription.unsubscribe()\n\n      cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n    }\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const instance = cache.get(observable)!\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        return () => {\n          subscription.unsubscribe()\n        }\n      },\n      getSnapshot: () => {\n        if (instance.error) {\n          throw instance.error\n        }\n        return instance.snapshot\n      },\n    }\n  }, [observable, getInitialValue])\n\n  useEffect(() => {\n    console.log('stor.subscribe changed', store.subscribe)\n  }, [store.subscribe])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValue === 'undefined' ? undefined : () => getInitialValue(),\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n  useEffect(() => {\n    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n    return () => subscription.unsubscribe()\n  }, [calls$, onEvent])\n\n  return call\n}\n"],"names":["useState","useMemo","map","catchError","of","tap","finalize","share","timer","asapScheduler","useEffect","useSyncExternalStore","observableCallback","useEffectEvent"],"mappings":";;;AAaA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAU,IAAA;AACjD;AAQA,MAAM,4BAAY,QAA2C;AAiB7C,SAAA,cACd,YACA,cACgD;AAC1C,QAAA,CAAC,eAAe,IAAIA,MAAA;AAAA,IACxB,MAAM,MAAM,SAAS,YAAY;AAAA,EAAA,GAG7B,QAAQC,MAAAA,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAC5B;AACA,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,KAAA,MAAM,EAAC,qBAAqB,MAAMC,WAAM,GAAGC,KAAa,aAAA,EAAE,CAAA;AAAA,MAAA,GAIvC,MAAM,WAAW,YACzB,YAEb,GAAA,MAAM,IAAI,YAAY,KAAqD;AAAA,IAAA;AAGvE,UAAA,WAAW,MAAM,IAAI,UAAU;AAE9B,WAAA;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AAChE,eAAO,MAAM;AACX,uBAAa,YAAY;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,aAAa,MAAM;AACjB,YAAI,SAAS;AACX,gBAAM,SAAS;AAEjB,eAAO,SAAS;AAAA,MAAA;AAAA,IAEpB;AAAA,EAAA,GACC,CAAC,YAAY,eAAe,CAAC;AAEhC,SAAAC,MAAA,UAAU,MAAM;AACN,YAAA,IAAI,0BAA0B,MAAM,SAAS;AAAA,EACpD,GAAA,CAAC,MAAM,SAAS,CAAC,GAEbC,MAAA;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO,eAAiB,MAAc,SAAY,MAAM,gBAAgB;AAAA,EAC1E;AACF;AChGO,SAAS,mBACd,aACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAIX,MAAS,SAAA,MAAMY,mBAAAA,mBAAuB,CAAA,GAEzD,UAAUC,eAAAA,eAAe,CAAC,eAA8B,YAAY,UAAU,CAAC;AAErF,SAAAH,MAAA,UAAU,MAAM;AACR,UAAA,eAAe,OAAO,KAAK,CAAC,eAAe,QAAQ,UAAU,CAAC,EAAE,UAAU;AACzE,WAAA,MAAM,aAAa,YAAY;AAAA,EACrC,GAAA,CAAC,QAAQ,OAAO,CAAC,GAEb;AACT;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useCallback, useSyncExternalStore} from 'react'\nimport {\n  asapScheduler,\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  observable: Observable<void>\n  state: {\n    snapshot: T\n    error?: unknown\n  }\n  getSnapshot: () => 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  if (!cache.has(observable)) {\n    const state = {\n      snapshot: undefined as ObservedValueOf<ObservableType>,\n      error: undefined,\n    }\n    const entry: CacheRecord<ObservedValueOf<ObservableType>> = {\n      // snapshot: getValue(initialValue) as 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.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: () => {\n        if (state.error) {\n          throw state.error\n        }\n        return state.snapshot\n      },\n    }\n\n    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n    const subscription = entry.observable.subscribe()\n    subscription.unsubscribe()\n\n    cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n  }\n  const instance = cache.get(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() ?? (getValue(initialValue) as ObservedValueOf<ObservableType>)\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$, onEvent])\n\n  return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","has","state","snapshot","undefined","error","entry","pipe","map","_temp","catchError","_temp2","tap","t0","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","subscribe","unsubscribe","set","get","instance","t1","onStoreChange","subscription_0","subscription","t2","t3","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

@@ -1,5 +1,6 @@
-import { useState, useMemo, useEffect, useSyncExternalStore } from "react";
-import { catchError, of, finalize, share, timer, asapScheduler } from "rxjs";
+import { c } from "react-compiler-runtime";
+import { useSyncExternalStore, useState, useEffect } from "react";
+import { catchError, finalize, share, timer, asapScheduler, of } from "rxjs";
 import { map, tap } from "rxjs/operators";
 import { observableCallback } from "observable-callback";
 import { useEffectEvent } from "use-effect-event";
@@ -8,57 +9,76 @@ function getValue(value) {
 }
 const cache = /* @__PURE__ */ new WeakMap();
 function useObservable(observable, initialValue) {
-  const [getInitialValue] = useState(
-    () => () => getValue(initialValue)
-  ), store = useMemo(() => {
-    if (!cache.has(observable)) {
-      const entry = {
-        snapshot: getInitialValue()
-      };
-      entry.observable = observable.pipe(
-        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({ resetOnRefCountZero: () => timer(0, asapScheduler) })
-      ), entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
-    }
-    const instance = cache.get(observable);
-    return {
-      subscribe: (onStoreChange) => {
-        const subscription = instance.observable.subscribe(onStoreChange);
-        return () => {
-          subscription.unsubscribe();
-        };
-      },
+  const $ = c(9);
+  if (!cache.has(observable)) {
+    const state = {
+      snapshot: void 0,
+      error: void 0
+    }, entry = {
+      state,
+      observable: observable.pipe(map(_temp$1), catchError(_temp2), tap((t02) => {
+        const {
+          snapshot,
+          error: error_0
+        } = t02;
+        state.snapshot = snapshot, state.error = error_0;
+      }), map(_temp3), finalize(() => cache.delete(observable)), share({
+        resetOnRefCountZero: _temp4
+      })),
       getSnapshot: () => {
-        if (instance.error)
-          throw instance.error;
-        return instance.snapshot;
+        if (state.error)
+          throw state.error;
+        return state.snapshot;
       }
     };
-  }, [observable, getInitialValue]);
-  return useEffect(() => {
-    console.log("stor.subscribe changed", store.subscribe);
-  }, [store.subscribe]), useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    typeof initialValue > "u" ? void 0 : () => getInitialValue()
-  );
+    entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
+  }
+  let t0;
+  $[0] !== observable ? (t0 = cache.get(observable), $[0] = observable, $[1] = t0) : t0 = $[1];
+  const instance = t0;
+  let t1;
+  $[2] !== instance.observable ? (t1 = (onStoreChange) => {
+    const subscription_0 = instance.observable.subscribe(onStoreChange);
+    return () => {
+      subscription_0.unsubscribe();
+    };
+  }, $[2] = instance.observable, $[3] = t1) : t1 = $[3];
+  const subscribe = t1;
+  let t2;
+  $[4] !== instance || $[5] !== initialValue ? (t2 = () => instance.getSnapshot() ?? getValue(initialValue), $[4] = instance, $[5] = initialValue, $[6] = t2) : t2 = $[6];
+  let t3;
+  return $[7] !== initialValue ? (t3 = typeof initialValue > "u" ? void 0 : () => getValue(initialValue), $[7] = initialValue, $[8] = t3) : t3 = $[8], useSyncExternalStore(subscribe, t2, t3);
+}
+function _temp4() {
+  return timer(0, asapScheduler);
+}
+function _temp3(value_0) {
+}
+function _temp2(error) {
+  return of({
+    snapshot: void 0,
+    error
+  });
+}
+function _temp$1(value) {
+  return {
+    snapshot: value,
+    error: void 0
+  };
 }
 function useObservableEvent(handleEvent) {
-  const [[calls$, call]] = useState(() => observableCallback()), onEvent = useEffectEvent((observable) => handleEvent(observable));
-  return useEffect(() => {
-    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe();
+  const $ = c(6), [t0] = useState(_temp), [calls$, call] = t0;
+  let t1;
+  $[0] !== handleEvent ? (t1 = (observable) => handleEvent(observable), $[0] = handleEvent, $[1] = t1) : t1 = $[1];
+  const onEvent = useEffectEvent(t1);
+  let t2, t3;
+  return $[2] !== calls$ || $[3] !== onEvent ? (t2 = () => {
+    const subscription = calls$.pipe((observable_0) => onEvent(observable_0)).subscribe();
     return () => subscription.unsubscribe();
-  }, [calls$, onEvent]), call;
+  }, t3 = [calls$, onEvent], $[2] = calls$, $[3] = onEvent, $[4] = t2, $[5] = t3) : (t2 = $[4], t3 = $[5]), useEffect(t2, t3), call;
+}
+function _temp() {
+  return observableCallback();
 }
 export {
   useObservable,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useState, useSyncExternalStore} from 'react'\nimport {\n  asapScheduler,\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  observable: Observable<void>\n  snapshot: T\n  error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n  const [getInitialValue] = useState(\n    () => () => getValue(initialValue) as ObservedValueOf<ObservableType>,\n  )\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: getInitialValue(),\n      }\n      entry.observable = observable.pipe(\n        map((value) => ({snapshot: value, error: undefined})),\n        catchError((error) => of({snapshot: undefined, error})),\n        tap(({snapshot, error}) => {\n          entry.snapshot = snapshot\n          entry.error = error\n        }),\n        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n        map((value) => void value),\n        // Ensure that the cache entry is deleted when the observable completes or errors.\n        finalize(() => cache.delete(observable)),\n        share({resetOnRefCountZero: () => timer(0, asapScheduler)}),\n      )\n\n      // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n      const subscription = entry.observable.subscribe()\n      subscription.unsubscribe()\n\n      cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n    }\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const instance = cache.get(observable)!\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        return () => {\n          subscription.unsubscribe()\n        }\n      },\n      getSnapshot: () => {\n        if (instance.error) {\n          throw instance.error\n        }\n        return instance.snapshot\n      },\n    }\n  }, [observable, getInitialValue])\n\n  useEffect(() => {\n    console.log('stor.subscribe changed', store.subscribe)\n  }, [store.subscribe])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValue === 'undefined' ? undefined : () => getInitialValue(),\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n  useEffect(() => {\n    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n    return () => subscription.unsubscribe()\n  }, [calls$, onEvent])\n\n  return call\n}\n"],"names":[],"mappings":";;;;;AAaA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAU,IAAA;AACjD;AAQA,MAAM,4BAAY,QAA2C;AAiB7C,SAAA,cACd,YACA,cACgD;AAC1C,QAAA,CAAC,eAAe,IAAI;AAAA,IACxB,MAAM,MAAM,SAAS,YAAY;AAAA,EAAA,GAG7B,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAC5B;AACA,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,EAAC,qBAAqB,MAAM,MAAM,GAAG,aAAa,EAAE,CAAA;AAAA,MAAA,GAIvC,MAAM,WAAW,YACzB,YAEb,GAAA,MAAM,IAAI,YAAY,KAAqD;AAAA,IAAA;AAGvE,UAAA,WAAW,MAAM,IAAI,UAAU;AAE9B,WAAA;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AAChE,eAAO,MAAM;AACX,uBAAa,YAAY;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,aAAa,MAAM;AACjB,YAAI,SAAS;AACX,gBAAM,SAAS;AAEjB,eAAO,SAAS;AAAA,MAAA;AAAA,IAEpB;AAAA,EAAA,GACC,CAAC,YAAY,eAAe,CAAC;AAEhC,SAAA,UAAU,MAAM;AACN,YAAA,IAAI,0BAA0B,MAAM,SAAS;AAAA,EACpD,GAAA,CAAC,MAAM,SAAS,CAAC,GAEb;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO,eAAiB,MAAc,SAAY,MAAM,gBAAgB;AAAA,EAC1E;AACF;AChGO,SAAS,mBACd,aACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAI,SAAS,MAAM,mBAAuB,CAAA,GAEzD,UAAU,eAAe,CAAC,eAA8B,YAAY,UAAU,CAAC;AAErF,SAAA,UAAU,MAAM;AACR,UAAA,eAAe,OAAO,KAAK,CAAC,eAAe,QAAQ,UAAU,CAAC,EAAE,UAAU;AACzE,WAAA,MAAM,aAAa,YAAY;AAAA,EACrC,GAAA,CAAC,QAAQ,OAAO,CAAC,GAEb;AACT;"}
+{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useCallback, useSyncExternalStore} from 'react'\nimport {\n  asapScheduler,\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  observable: Observable<void>\n  state: {\n    snapshot: T\n    error?: unknown\n  }\n  getSnapshot: () => 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  if (!cache.has(observable)) {\n    const state = {\n      snapshot: undefined as ObservedValueOf<ObservableType>,\n      error: undefined,\n    }\n    const entry: CacheRecord<ObservedValueOf<ObservableType>> = {\n      // snapshot: getValue(initialValue) as 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.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: () => {\n        if (state.error) {\n          throw state.error\n        }\n        return state.snapshot\n      },\n    }\n\n    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n    const subscription = entry.observable.subscribe()\n    subscription.unsubscribe()\n\n    cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n  }\n  const instance = cache.get(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() ?? (getValue(initialValue) as ObservedValueOf<ObservableType>)\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$, onEvent])\n\n  return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","has","state","snapshot","undefined","error","entry","pipe","map","_temp","catchError","_temp2","tap","t0","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","getSnapshot","subscribe","unsubscribe","set","get","instance","t1","onStoreChange","subscription_0","subscription","t2","t3","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

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "4.1.2-canary.1",
+  "version": "4.1.2-canary.11",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",

package/src/useObservable.ts

@@ -1,4 +1,4 @@
-import {useEffect, useMemo, useState, useSyncExternalStore} from 'react'
+import {useCallback, useSyncExternalStore} from 'react'
 import {
   asapScheduler,
   catchError,
@@ -17,8 +17,11 @@ function getValue<T>(value: T): T extends () => infer U ? U : T {
 
 interface CacheRecord<T> {
   observable: Observable<void>
-  snapshot: T
-  error?: unknown
+  state: {
+    snapshot: T
+    error?: unknown
+  }
+  getSnapshot: () => T
 }
 
 const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
@@ -42,21 +45,20 @@ export function useObservable<ObservableType extends Observable<any>, InitialVal
   observable: ObservableType,
   initialValue?: InitialValue | (() => InitialValue),
 ): InitialValue | ObservedValueOf<ObservableType> {
-  const [getInitialValue] = useState(
-    () => () => getValue(initialValue) as ObservedValueOf<ObservableType>,
-  )
-
-  const store = useMemo(() => {
-    if (!cache.has(observable)) {
-      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {
-        snapshot: getInitialValue(),
-      }
-      entry.observable = observable.pipe(
+  if (!cache.has(observable)) {
+    const state = {
+      snapshot: undefined as ObservedValueOf<ObservableType>,
+      error: undefined,
+    }
+    const entry: CacheRecord<ObservedValueOf<ObservableType>> = {
+      // snapshot: getValue(initialValue) as ObservedValueOf<ObservableType>,
+      state,
+      observable: observable.pipe(
         map((value) => ({snapshot: value, error: undefined})),
         catchError((error) => of({snapshot: undefined, error})),
         tap(({snapshot, error}) => {
-          entry.snapshot = snapshot
-          entry.error = error
+          state.snapshot = snapshot
+          state.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.
@@ -64,40 +66,40 @@ export function useObservable<ObservableType extends Observable<any>, InitialVal
         // Ensure that the cache entry is deleted when the observable completes or errors.
         finalize(() => cache.delete(observable)),
         share({resetOnRefCountZero: () => timer(0, asapScheduler)}),
-      )
-
-      // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
-      const subscription = entry.observable.subscribe()
-      subscription.unsubscribe()
-
-      cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)
-    }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const instance = cache.get(observable)!
-
-    return {
-      subscribe: (onStoreChange: () => void) => {
-        const subscription = instance.observable.subscribe(onStoreChange)
-        return () => {
-          subscription.unsubscribe()
-        }
-      },
+      ),
       getSnapshot: () => {
-        if (instance.error) {
-          throw instance.error
+        if (state.error) {
+          throw state.error
         }
-        return instance.snapshot
+        return state.snapshot
       },
     }
-  }, [observable, getInitialValue])
 
-  useEffect(() => {
-    console.log('stor.subscribe changed', store.subscribe)
-  }, [store.subscribe])
+    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+    const subscription = entry.observable.subscribe()
+    subscription.unsubscribe()
+
+    cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)
+  }
+  const instance = cache.get(observable)!
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      const subscription = instance.observable.subscribe(onStoreChange)
+      return () => {
+        subscription.unsubscribe()
+      }
+    },
+    [instance.observable],
+  )
 
   return useSyncExternalStore<ObservedValueOf<ObservableType>>(
-    store.subscribe,
-    store.getSnapshot,
-    typeof initialValue === 'undefined' ? undefined : () => getInitialValue(),
+    subscribe,
+    () => {
+      return instance.getSnapshot() ?? (getValue(initialValue) as ObservedValueOf<ObservableType>)
+    },
+    typeof initialValue === 'undefined'
+      ? undefined
+      : () => getValue(initialValue) as ObservedValueOf<ObservableType>,
   )
 }