react-rx 3.0.0-3 → 3.0.0-5

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var react = require("react"), 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.shareReplay({ refCount: !0, bufferSize: 1 }),
+        operators.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 react.useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+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.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport type {Observable, 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?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>),\n): UnboxObservable<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 UnboxObservable<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 UnboxObservable<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<UnboxObservable<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<UnboxObservable<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<UnboxObservable<ObservableType>>(store.subscribe, store.getSnapshot)\n}\n\n/** @internal */\nexport type UnboxObservable<T> = T extends Observable<infer U> ? U : never\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;;;"}

package/dist/index.mjs

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport type {Observable, 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?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>),\n): UnboxObservable<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 UnboxObservable<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 UnboxObservable<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<UnboxObservable<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<UnboxObservable<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<UnboxObservable<ObservableType>>(store.subscribe, store.getSnapshot)\n}\n\n/** @internal */\nexport type UnboxObservable<T> = T extends Observable<infer U> ? U : never\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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.0.0-3",
+  "version": "3.0.0-5",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -46,9 +46,18 @@
     "Cody Olsen <stipsan@gmail.com> (https://github.com/stipsan)"
   ],
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "src"
@@ -58,21 +67,21 @@
     "."
   ],
   "scripts": {
-    "build": "npm run build:es2015 && npm run build:esm && npm run build:cjs",
-    "build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
-    "build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
-    "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
-    "clean": "rimraf dist",
+    "build": "pkg build --strict --clean --check",
     "dev": "cd website && npm run dev",
-    "prepublishOnly": "npm run clean && npm run build",
-    "watch": "run-p \"build:* -- --watch\"",
+    "prepublishOnly": "npm run build",
+    "watch": "npm run build -- --watch",
     "test": "jest",
     "lint": "eslint --cache ."
   },
+  "browserslist": "extends @sanity/browserslist-config",
+  "prettier": "@sanity/prettier-config",
   "dependencies": {
     "observable-callback": "^1.0.3"
   },
   "devDependencies": {
+    "@sanity/pkg-utils": "^6.9.2",
+    "@sanity/prettier-config": "^1.0.2",
     "@sanity/semantic-release-preset": "^2.0.5",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
@@ -80,32 +89,29 @@
     "@types/node": "^18.17.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.12.0",
-    "@typescript-eslint/parser": "7.12.0",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.2",
-    "eslint-plugin-react-compiler": "^0.0.0-experimental-51a85ea-20240601",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.2",
+    "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",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jsdom": "^20.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "prettier-plugin-packagejson": "^2.4.5",
+    "prettier": "^3.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "rimraf": "^3.0.2",
     "rxjs": "^7.8.1",
     "ts-jest": "^29.1.1",
-    "typescript": "4.7.4"
+    "typescript": "5.4.5"
   },
   "peerDependencies": {
     "react": "^18.3 || >=19.0.0-rc",
     "rxjs": "^7"
-  },
-  "es2015": "dist/es2015/index.js"
+  }
 }

package/src/__tests__/strictmode.test.ts

@@ -4,7 +4,7 @@ import {BehaviorSubject, Observable} from 'rxjs'
 
 import {useObservable} from '../useObservable'
 
-const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 

package/src/useObservable.ts

@@ -13,6 +13,7 @@ interface CacheRecord<T> {
 
 const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
 
+/** @public */
 export function useObservable<ObservableType extends Observable<any>>(
   observable: ObservableType,
   initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>),
@@ -37,7 +38,7 @@ export function useObservable<ObservableType extends Observable<any>>(
       }
       entry.observable = observable.pipe(
         shareReplay({refCount: true, bufferSize: 1}),
-        tap(value => (entry.snapshot = value)),
+        tap((value) => (entry.snapshot = value)),
       )
 
       // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
@@ -64,4 +65,5 @@ export function useObservable<ObservableType extends Observable<any>>(
   return useSyncExternalStore<UnboxObservable<ObservableType>>(store.subscribe, store.getSnapshot)
 }
 
-type UnboxObservable<T> = T extends Observable<infer U> ? U : never
+/** @internal */
+export type UnboxObservable<T> = T extends Observable<infer U> ? U : never

package/src/useObservableEvent.ts

@@ -1,29 +1,39 @@
 import {observableCallback} from 'observable-callback'
-import {DependencyList, useCallback, useEffect, useRef} from 'react'
-import {Observable} from 'rxjs'
+import {useCallback, useEffect, useInsertionEffect, useRef, useState} from 'react'
+import {type Observable} from 'rxjs'
 
-const EMPTY_DEPS: DependencyList = []
-
-export function useObservableCallback<T, U>(
+/** @public */
+export function useObservableEvent<T, U>(
   fn: (arg: Observable<T>) => Observable<U>,
-  dependencies: DependencyList = EMPTY_DEPS,
 ): (arg: T) => void {
-  const callbackRef = useRef<[Observable<T>, (val: T) => void]>()
-
-  if (!callbackRef.current) {
-    callbackRef.current = observableCallback<T>()
-  }
-
-  const [calls$, call] = callbackRef.current
+  const [[calls$, call]] = useState(() => observableCallback<T>())
 
-  const callback = useCallback(fn, dependencies)
+  const callback = useEffectEvent(fn)
 
   useEffect(() => {
     const subscription = calls$.pipe(callback).subscribe()
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [calls$, call, callback])
+    return () => subscription.unsubscribe()
+  }, [callback, calls$])
 
   return call
 }
+
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+function useEffectEvent<
+  const T extends (
+    ...args: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any[]
+  ) => void,
+>(fn: T): T {
+  const ref = useRef<T | null>(null)
+  useInsertionEffect(() => {
+    ref.current = fn
+  }, [fn])
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return useCallback((...args: any[]) => {
+    const f = ref.current!
+    return f(...args)
+  }, []) as T
+}

package/dist/cjs/__tests__/strictmode.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/__tests__/strictmode.test.js

@@ -1,96 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@testing-library/react");
-var react_2 = require("react");
-var rxjs_1 = require("rxjs");
-var useObservable_1 = require("../useObservable");
-var wait = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
-// NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
-test('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
-    function ObservableComponent() {
-        (0, react_2.useEffect)(function () {
-            mountCount++;
-        }, []);
-        var observedValue = (0, useObservable_1.useObservable)(observable);
-        returnedValues.push(observedValue);
-        return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
-    }
-    var subject, observable, returnedValues, mountCount;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                subject = new rxjs_1.BehaviorSubject(0);
-                observable = subject.asObservable();
-                returnedValues = [];
-                mountCount = 0;
-                (0, react_1.render)((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)(ObservableComponent)));
-                expect(mountCount).toEqual(2);
-                expect(returnedValues).toEqual([0, 0]);
-                return [4 /*yield*/, wait(10)];
-            case 1:
-                _a.sent();
-                (0, react_1.act)(function () { return subject.next(1); });
-                expect(returnedValues).toEqual([0, 0, 1, 1]);
-                (0, react_1.act)(function () { return subject.next(2); });
-                expect(returnedValues).toEqual([0, 0, 1, 1, 2, 2]);
-                expect(mountCount).toEqual(2);
-                return [2 /*return*/];
-        }
-    });
-}); });
-test('Strict mode should unsubscribe the source observable on unmount', function () {
-    var subscribed = [];
-    var unsubscribed = [];
-    var nextId = 0;
-    var observable = new rxjs_1.Observable(function () {
-        var id = nextId++;
-        subscribed.push(id);
-        return function () {
-            unsubscribed.push(id);
-        };
-    });
-    function ObservableComponent() {
-        (0, useObservable_1.useObservable)(observable);
-        return (0, react_2.createElement)(react_2.Fragment, null);
-    }
-    var rerender = (0, react_1.render)((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)(ObservableComponent))).rerender;
-    expect(subscribed).toEqual([0, 1]);
-    rerender((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)('div')));
-    expect(unsubscribed).toEqual([0, 1]);
-});

package/dist/cjs/__tests__/useObservable.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/__tests__/useObservable.test.js

@@ -1,116 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@testing-library/react");
-var react_2 = require("react");
-var rxjs_1 = require("rxjs");
-var operators_1 = require("rxjs/operators");
-var useObservable_1 = require("../useObservable");
-test('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
-    var subscribed = false;
-    var observable = new rxjs_1.Observable(function () {
-        subscribed = true;
-        return function () {
-            subscribed = false;
-        };
-    });
-    expect(subscribed).toBe(false);
-    var unmount = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }).unmount;
-    expect(subscribed).toBe(true);
-    unmount();
-    expect(subscribed).toBe(false);
-});
-test('should only subscribe once when given same observable on re-renders', function () {
-    var subscriptionCount = 0;
-    var observable = new rxjs_1.Observable(function () {
-        subscriptionCount++;
-    });
-    expect(subscriptionCount).toBe(0);
-    var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }), unmount = _a.unmount, rerender = _a.rerender;
-    expect(subscriptionCount).toBe(1);
-    rerender();
-    expect(subscriptionCount).toBe(1);
-    unmount();
-    (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); });
-    expect(subscriptionCount).toBe(2);
-});
-test('should not return undefined during render if initial value is given', function () {
-    var observable = (0, rxjs_1.timer)(100).pipe((0, operators_1.mapTo)('emitted value'));
-    var returnedValues = [];
-    function ObservableComponent() {
-        var observedValue = (0, useObservable_1.useObservable)(observable, 'initial value');
-        returnedValues.push(observedValue);
-        return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
-    }
-    (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
-});
-test('should not return undefined during render if observable is sync', function () {
-    var observable = (0, rxjs_1.of)('initial value');
-    var returnedValues = [];
-    function ObservableComponent() {
-        var observedValue = (0, useObservable_1.useObservable)(observable);
-        returnedValues.push(observedValue);
-        return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
-    }
-    (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    expect(returnedValues).toEqual(expect.arrayContaining(['initial value']));
-});
-test('should return undefined during first render if observable is async', function () {
-    var observable = (0, rxjs_1.scheduled)('async value', rxjs_1.asyncScheduler);
-    var returnedValues = [];
-    function ObservableComponent() {
-        var observedValue = (0, useObservable_1.useObservable)(observable);
-        returnedValues.push(observedValue);
-        return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
-    }
-    (0, react_1.render)((0, react_2.createElement)(ObservableComponent));
-    expect(returnedValues).toEqual(expect.arrayContaining([undefined]));
-});
-test('should have sync values from an observable as initial value', function () {
-    var observable = (0, rxjs_1.of)('something sync');
-    var result = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(observable); }).result;
-    expect(result.current).toBe('something sync');
-});
-test('should have undefined as initial value from delayed observables', function () {
-    var _a = (0, react_1.renderHook)(function () {
-        return (0, useObservable_1.useObservable)((0, rxjs_1.scheduled)('something async', rxjs_1.asyncScheduler));
-    }), result = _a.result, unmount = _a.unmount;
-    expect(result.current).toBeUndefined();
-    unmount();
-});
-test('should have passed initialValue as initial value from delayed observables', function () {
-    var _a = (0, react_1.renderHook)(function () {
-        return (0, useObservable_1.useObservable)((0, rxjs_1.scheduled)('something async', rxjs_1.asyncScheduler), 'initial');
-    }), result = _a.result, unmount = _a.unmount;
-    expect(result.current).toBe('initial');
-    unmount();
-});
-test('should update with values from observables', function () {
-    var values$ = new rxjs_1.Subject();
-    var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(values$); }), result = _a.result, unmount = _a.unmount;
-    expect(result.current).toBe(undefined);
-    (0, react_1.act)(function () { return values$.next('something'); });
-    expect(result.current).toBe('something');
-    (0, react_1.act)(function () { return values$.next('otherthing'); });
-    expect(result.current).toBe('otherthing');
-    unmount();
-});
-test('should re-subscribe when receiving a new observable', function () {
-    var first$ = new rxjs_1.Subject();
-    var second$ = new rxjs_1.Subject();
-    var current$ = first$;
-    var _a = (0, react_1.renderHook)(function () { return (0, useObservable_1.useObservable)(current$, '!!initial!!'); }), result = _a.result, rerender = _a.rerender, unmount = _a.unmount;
-    (0, react_1.act)(function () { return first$.next('first 1'); });
-    expect(result.current).toBe('first 1');
-    current$ = second$;
-    rerender();
-    // since observable #2 hasn't emitted a value yet, we should use the initial value
-    expect(result.current).toBe('!!initial!!');
-    // Now we should be subscribed to second$ and it's emission should be returned
-    (0, react_1.act)(function () { return second$.next('second 1'); });
-    expect(result.current).toBe('second 1');
-    // we should no longer be subscribed to the first and ignore any emissions
-    (0, react_1.act)(function () { return first$.next('first 2'); });
-    expect(result.current).toBe('second 1');
-    unmount();
-});

package/dist/cjs/index.d.ts

@@ -1,2 +0,0 @@
-export * from './useObservable';
-export * from './useObservableEvent';

package/dist/cjs/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useObservable"), exports);
-__exportStar(require("./useObservableEvent"), exports);

package/dist/cjs/useObservable.d.ts

@@ -1,4 +0,0 @@
-import type { Observable } from 'rxjs';
-export declare function useObservable<ObservableType extends Observable<any>>(observable: ObservableType, initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>)): UnboxObservable<ObservableType>;
-declare type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
-export {};