react-rx 3.0.0-3 → 3.0.0-4

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

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        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]) {

package/dist/cjs/useObservable.d.ts

@@ -1,4 +1,4 @@
 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;
+type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
 export {};

package/dist/cjs/useObservableEvent.d.ts

@@ -1,3 +1,8 @@
 import { DependencyList } from 'react';
 import { Observable } from 'rxjs';
 export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;
+export declare function useObservableEvent<T, U>(fn: (arg: Observable<T>) => Observable<U>): (arg: T) => void;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export declare function useEffectEvent<const T extends (...args: any[]) => void>(fn: T): T;

package/dist/cjs/useObservableEvent.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useObservableCallback = void 0;
+exports.useEffectEvent = exports.useObservableEvent = exports.useObservableCallback = void 0;
 var observable_callback_1 = require("observable-callback");
 var react_1 = require("react");
 var EMPTY_DEPS = [];
@@ -21,3 +21,32 @@ function useObservableCallback(fn, dependencies) {
     return call;
 }
 exports.useObservableCallback = useObservableCallback;
+function useObservableEvent(fn) {
+    var _a = (0, react_1.useState)(function () { return (0, observable_callback_1.observableCallback)(); })[0], calls$ = _a[0], call = _a[1];
+    var callback = useEffectEvent(fn);
+    (0, react_1.useEffect)(function () {
+        var subscription = calls$.pipe(callback).subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, [callback, calls$]);
+    return call;
+}
+exports.useObservableEvent = useObservableEvent;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+function useEffectEvent(fn) {
+    var ref = (0, react_1.useRef)(null);
+    (0, react_1.useInsertionEffect)(function () {
+        ref.current = fn;
+    }, [fn]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (0, react_1.useCallback)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var f = ref.current;
+        return f.apply(void 0, args);
+    }, []);
+}
+exports.useEffectEvent = useEffectEvent;

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

@@ -11,7 +11,7 @@ import { act, render } from '@testing-library/react';
 import { createElement, Fragment, StrictMode, useEffect } from 'react';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { useObservable } from '../useObservable';
-const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+const wait = (ms) => new Promise((resolve) => 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', () => __awaiter(void 0, void 0, void 0, function* () {
     const subject = new BehaviorSubject(0);

package/dist/es2015/useObservable.d.ts

@@ -1,4 +1,4 @@
 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;
+type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
 export {};

package/dist/es2015/useObservable.js

@@ -21,7 +21,7 @@ export function useObservable(observable, initialValue) {
             const entry = {
                 snapshot: initialValueRef.current,
             };
-            entry.observable = observable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(value => (entry.snapshot = value)));
+            entry.observable = observable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), 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.
             entry.subscription = entry.observable.subscribe();
             cache.set(observable, entry);

package/dist/es2015/useObservableEvent.d.ts

@@ -1,3 +1,8 @@
 import { DependencyList } from 'react';
 import { Observable } from 'rxjs';
 export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;
+export declare function useObservableEvent<T, U>(fn: (arg: Observable<T>) => Observable<U>): (arg: T) => void;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export declare function useEffectEvent<const T extends (...args: any[]) => void>(fn: T): T;

package/dist/es2015/useObservableEvent.js

@@ -1,5 +1,5 @@
 import { observableCallback } from 'observable-callback';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';
 const EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
     const callbackRef = useRef();
@@ -16,3 +16,26 @@ export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
     }, [calls$, call, callback]);
     return call;
 }
+export function useObservableEvent(fn) {
+    const [[calls$, call]] = useState(() => observableCallback());
+    const callback = useEffectEvent(fn);
+    useEffect(() => {
+        const subscription = calls$.pipe(callback).subscribe();
+        return () => subscription.unsubscribe();
+    }, [callback, calls$]);
+    return call;
+}
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export function useEffectEvent(fn) {
+    const ref = useRef(null);
+    useInsertionEffect(() => {
+        ref.current = fn;
+    }, [fn]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return useCallback((...args) => {
+        const f = ref.current;
+        return f(...args);
+    }, []);
+}

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

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        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]) {

package/dist/esm/useObservable.d.ts

@@ -1,4 +1,4 @@
 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;
+type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
 export {};

package/dist/esm/useObservableEvent.d.ts

@@ -1,3 +1,8 @@
 import { DependencyList } from 'react';
 import { Observable } from 'rxjs';
 export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;
+export declare function useObservableEvent<T, U>(fn: (arg: Observable<T>) => Observable<U>): (arg: T) => void;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export declare function useEffectEvent<const T extends (...args: any[]) => void>(fn: T): T;

package/dist/esm/useObservableEvent.js

@@ -1,5 +1,5 @@
 import { observableCallback } from 'observable-callback';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';
 var EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies) {
     if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
@@ -17,3 +17,30 @@ export function useObservableCallback(fn, dependencies) {
     }, [calls$, call, callback]);
     return call;
 }
+export function useObservableEvent(fn) {
+    var _a = useState(function () { return observableCallback(); })[0], calls$ = _a[0], call = _a[1];
+    var callback = useEffectEvent(fn);
+    useEffect(function () {
+        var subscription = calls$.pipe(callback).subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, [callback, calls$]);
+    return call;
+}
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export function useEffectEvent(fn) {
+    var ref = useRef(null);
+    useInsertionEffect(function () {
+        ref.current = fn;
+    }, [fn]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return useCallback(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var f = ref.current;
+        return f.apply(void 0, args);
+    }, []);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.0.0-3",
+  "version": "3.0.0-4",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -69,10 +69,12 @@
     "test": "jest",
     "lint": "eslint --cache ."
   },
+  "prettier": "@sanity/prettier-config",
   "dependencies": {
     "observable-callback": "^1.0.3"
   },
   "devDependencies": {
+    "@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,28 +82,27 @@
     "@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",

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

@@ -37,7 +37,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.

package/src/useObservableEvent.ts

@@ -1,5 +1,5 @@
 import {observableCallback} from 'observable-callback'
-import {DependencyList, useCallback, useEffect, useRef} from 'react'
+import {DependencyList, useCallback, useEffect, useInsertionEffect, useRef, useState} from 'react'
 import {Observable} from 'rxjs'
 
 const EMPTY_DEPS: DependencyList = []
@@ -27,3 +27,38 @@ export function useObservableCallback<T, U>(
 
   return call
 }
+
+export function useObservableEvent<T, U>(
+  fn: (arg: Observable<T>) => Observable<U>,
+): (arg: T) => void {
+  const [[calls$, call]] = useState(() => observableCallback<T>())
+
+  const callback = useEffectEvent(fn)
+
+  useEffect(() => {
+    const subscription = calls$.pipe(callback).subscribe()
+    return () => subscription.unsubscribe()
+  }, [callback, calls$])
+
+  return call
+}
+
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export 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
+}