react-rx 3.0.0-4 → 3.0.0-6

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Sanity.io
+Copyright (c) 2024 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+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.d.ts

@@ -0,0 +1,15 @@
+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.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, 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;;;"}

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, 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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.0.0-4",
+  "version": "3.0.0-6",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -15,6 +15,7 @@
     "pipe",
     "react",
     "react18",
+    "react19",
     "reactive",
     "realtime",
     "rx",
@@ -28,7 +29,6 @@
     "sync",
     "typesafe",
     "typescript",
-    "use-sync-external-store",
     "use"
   ],
   "homepage": "https://react-rx.dev",
@@ -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,27 +67,24 @@
     "."
   ],
   "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\"",
-    "test": "jest",
+    "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": {
     "observable-callback": "^1.0.3"
   },
   "devDependencies": {
+    "@sanity/pkg-utils": "^6.9.3",
     "@sanity/prettier-config": "^1.0.2",
-    "@sanity/semantic-release-preset": "^2.0.5",
+    "@sanity/semantic-release-preset": "^4.1.8",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
-    "@types/jest": "^29.5.3",
     "@types/node": "^18.17.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -91,22 +97,18 @@
     "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": "^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": "5.4.5"
+    "semantic-release": "^24.0.0",
+    "typescript": "5.4.5",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "react": "^18.3 || >=19.0.0-rc",
     "rxjs": "^7"
-  },
-  "es2015": "dist/es2015/index.js"
+  }
 }

package/src/__tests__/strictmode.test.ts

@@ -1,6 +1,7 @@
 import {act, render} from '@testing-library/react'
 import {createElement, Fragment, StrictMode, useEffect} from 'react'
 import {BehaviorSubject, Observable} from 'rxjs'
+import {expect, test} from 'vitest'
 
 import {useObservable} from '../useObservable'
 

package/src/__tests__/useObservable.test.tsx

@@ -2,6 +2,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 {expect, test} from 'vitest'
 
 import {useObservable} from '../useObservable'
 

package/src/useObservable.ts

@@ -1,5 +1,5 @@
 import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'
-import type {Observable, Subscription} from 'rxjs'
+import type {Observable, ObservedValueOf, Subscription} from 'rxjs'
 import {shareReplay, tap} from 'rxjs/operators'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
@@ -13,26 +13,27 @@ 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>),
-): UnboxObservable<ObservableType> {
+  initialValue?: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),
+): 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.
    */
-  const initialValueRef = useRef(getValue(initialValue) as UnboxObservable<ObservableType>)
+  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)
 
   /**
    * Ensures that the initialValue is always up-to-date in case the observable changes.
    */
   useEffect(() => {
-    initialValueRef.current = getValue(initialValue) as UnboxObservable<ObservableType>
+    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>
   }, [initialValue])
 
   const store = useMemo(() => {
     if (!cache.has(observable)) {
-      const entry: Partial<CacheRecord<UnboxObservable<ObservableType>>> = {
+      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {
         snapshot: initialValueRef.current,
       }
       entry.observable = observable.pipe(
@@ -43,7 +44,7 @@ export function useObservable<ObservableType extends Observable<any>>(
       // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
       entry.subscription = entry.observable.subscribe()
 
-      cache.set(observable, entry as CacheRecord<UnboxObservable<ObservableType>>)
+      cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)
     }
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const instance = cache.get(observable)!
@@ -61,7 +62,5 @@ export function useObservable<ObservableType extends Observable<any>>(
     }
   }, [observable])
 
-  return useSyncExternalStore<UnboxObservable<ObservableType>>(store.subscribe, store.getSnapshot)
+  return useSyncExternalStore<ObservedValueOf<ObservableType>>(store.subscribe, store.getSnapshot)
 }
-
-type UnboxObservable<T> = T extends Observable<infer U> ? U : never

package/src/useObservableEvent.ts

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

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 (g && (g = 0, op[0] && (_ = 0)), _) 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>;
-type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
-export {};