reactjrx 1.29.2 → 1.30.0

package/dist/index.cjs

@@ -101,17 +101,23 @@ const useConstant = (fn) => {
   return ref;
 };
 const useSubject = ({
-  onBeforeComplete
+  onBeforeComplete,
+  completeOnUnmount = true
 } = {}) => {
   const subject = useConstant(() => new rxjs.Subject());
   const completed = react.useRef(false);
   const onBeforeCompleteRef = useLiveRef(onBeforeComplete);
+  const completeOnUnmountRef = useLiveRef(completeOnUnmount);
   react.useEffect(() => {
     if (completed.current) {
       subject.current = new rxjs.Subject();
       completed.current = false;
     }
     return () => {
+      if (!completeOnUnmountRef.current) {
+        completed.current = true;
+        return;
+      }
       if (!completed.current) {
         if (onBeforeCompleteRef.current != null)
           onBeforeCompleteRef.current();
@@ -435,9 +441,40 @@ const useBehaviorSubject = (state) => {
   }, []);
   return subject;
 };
+function shallowEqual(objA, objB) {
+  if (objA === null || objA === void 0 || objB === null || objB === void 0) {
+    return objA === objB;
+  }
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+  if (objA.constructor !== objB.constructor) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}
 function useMutation(query, mapOperatorOrOptions, options = {}) {
   const queryRef = useLiveRef(query);
   const triggerSubject = useSubject();
+  const resetSubject = useSubject({
+    /**
+     * @important
+     * Because mutation can still run after unmount, the user might
+     * want to use reset for whatever reason. We will only manually complete
+     * this subject whenever the main query hook finalize.
+     */
+    completeOnUnmount: false
+  });
   const optionsRef = useLiveRef(
     typeof mapOperatorOrOptions === "object" ? mapOperatorOrOptions : options
   );
@@ -449,55 +486,81 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
   const mapOperator = typeof mapOperatorOrOptions === "string" ? mapOperatorOrOptions : "merge";
   react.useEffect(() => {
     const switchOperator = mapOperator === "concat" ? rxjs.concatMap : mapOperator === "switch" ? rxjs.switchMap : rxjs.mergeMap;
-    const subscription = triggerSubject.current.pipe(
-      switchOperator((args) => {
-        const isLastMutationCalled = triggerSubject.current.pipe(
-          rxjs.take(1),
-          rxjs.map(() => mapOperator === "concat"),
-          rxjs.startWith(true)
-        );
-        data$.current.next({
-          ...data$.current.getValue(),
-          status: "loading"
-        });
-        return rxjs.combineLatest([
-          rxjs.defer(() => rxjs.from(queryRef.current(args))).pipe(
-            querx(optionsRef.current),
-            rxjs.first(),
-            rxjs.map((data) => ({ data, isError: false })),
-            rxjs.catchError((error) => {
-              if (optionsRef.current.onError != null) {
-                optionsRef.current.onError(error);
-              }
-              return rxjs.of({ data: error, isError: true });
-            })
-          ),
-          isLastMutationCalled
-        ]).pipe(
-          rxjs.tap(([{ data, isError }, isLastMutationCalled2]) => {
-            if (!isError) {
-              if (optionsRef.current.onSuccess != null)
-                optionsRef.current.onSuccess(data);
-            }
-            if (isLastMutationCalled2) {
-              data$.current.next({
-                ...data$.current.getValue(),
-                ...isError ? {
-                  status: "error",
-                  error: data,
-                  data: void 0
-                } : {
-                  status: "success",
-                  error: void 0,
-                  data
-                }
-              });
-            }
+    const subscription = rxjs.merge(
+      resetSubject.current.pipe(
+        rxjs.map(
+          () => ({
+            status: "idle",
+            data: void 0,
+            error: void 0
           })
-        );
-      }),
-      optionsRef.current.hooks ?? rxjs.identity
-    ).subscribe();
+        )
+      ),
+      triggerSubject.current.pipe(
+        switchOperator((args) => {
+          const isLastMutationCalled = triggerSubject.current.pipe(
+            rxjs.take(1),
+            rxjs.map(() => mapOperator === "concat"),
+            rxjs.startWith(true)
+          );
+          return rxjs.merge(
+            rxjs.of({
+              status: "loading"
+            }),
+            rxjs.combineLatest([
+              rxjs.defer(() => rxjs.from(queryRef.current(args))).pipe(
+                querx(optionsRef.current),
+                rxjs.first(),
+                rxjs.map((data) => ({ data, isError: false })),
+                rxjs.catchError((error) => {
+                  if (optionsRef.current.onError != null) {
+                    optionsRef.current.onError(error);
+                  }
+                  return rxjs.of({ data: error, isError: true });
+                })
+              ),
+              isLastMutationCalled
+            ]).pipe(
+              rxjs.map(([{ data, isError }, isLastMutationCalled2]) => {
+                if (!isError) {
+                  if (optionsRef.current.onSuccess != null)
+                    optionsRef.current.onSuccess(data);
+                }
+                if (isLastMutationCalled2) {
+                  return isError ? {
+                    status: "error",
+                    error: data,
+                    data: void 0
+                  } : {
+                    status: "success",
+                    error: void 0,
+                    data
+                  };
+                }
+                return void 0;
+              }),
+              rxjs.takeUntil(resetSubject.current)
+            )
+          );
+        }),
+        optionsRef.current.triggerHook ?? rxjs.identity,
+        rxjs.finalize(() => {
+          resetSubject.current.complete();
+        })
+      )
+    ).pipe(
+      /**
+       * @important
+       * state update optimization
+       */
+      rxjs.distinctUntilChanged(shallowEqual),
+      rxjs.filter((state) => !!state && !!Object.keys(state).length)
+    ).subscribe((state) => {
+      data$.current.next({
+        ...data$.current.getValue(),
+        ...state
+      });
+    });
     return () => {
       if (optionsRef.current.cancelOnUnMount) {
         subscription.unsubscribe();
@@ -514,31 +577,12 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
   const mutate = react.useCallback((arg) => {
     triggerSubject.current.next(arg);
   }, []);
-  return { ...result, isLoading: result.status === "loading", mutate };
+  const reset = react.useCallback(() => {
+    resetSubject.current.next();
+  }, []);
+  return { ...result, isLoading: result.status === "loading", mutate, reset };
 }
 const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
-function shallowEqual(objA, objB) {
-  if (objA === null || objA === void 0 || objB === null || objB === void 0) {
-    return objA === objB;
-  }
-  if (typeof objA !== "object" || typeof objB !== "object") {
-    return objA === objB;
-  }
-  if (objA.constructor !== objB.constructor) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  for (const key of keysA) {
-    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
-      return false;
-    }
-  }
-  return true;
-}
 const useCreateCacheStore = () => {
   const cacheStore = useBehaviorSubject({});
   useSubscribe(

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useRef, useMemo, useCallback, useSyncExternalStore, useEffect, createContext, memo, useContext, useState } from "react";
-import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, of, zip, from, map, merge, throttleTime, switchMap, defer, iif, timer, throwError, take, startWith, combineLatest, first, concatMap as concatMap$1, mergeMap, skip, interval, withLatestFrom, shareReplay, repeat, filter, share, takeUntil, retry } from "rxjs";
+import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, of, zip, from, map, merge, throttleTime, switchMap, defer, iif, timer, throwError, take, startWith, combineLatest, first, takeUntil, filter, concatMap as concatMap$1, mergeMap, skip, interval, withLatestFrom, shareReplay, repeat, share, retry } from "rxjs";
 import { jsx } from "react/jsx-runtime";
 import { retryWhen, concatMap, tap as tap$1 } from "rxjs/operators";
 const useLiveRef = (value) => {
@@ -99,17 +99,23 @@ const useConstant = (fn) => {
   return ref;
 };
 const useSubject = ({
-  onBeforeComplete
+  onBeforeComplete,
+  completeOnUnmount = true
 } = {}) => {
   const subject = useConstant(() => new Subject());
   const completed = useRef(false);
   const onBeforeCompleteRef = useLiveRef(onBeforeComplete);
+  const completeOnUnmountRef = useLiveRef(completeOnUnmount);
   useEffect(() => {
     if (completed.current) {
       subject.current = new Subject();
       completed.current = false;
     }
     return () => {
+      if (!completeOnUnmountRef.current) {
+        completed.current = true;
+        return;
+      }
       if (!completed.current) {
         if (onBeforeCompleteRef.current != null)
           onBeforeCompleteRef.current();
@@ -433,9 +439,40 @@ const useBehaviorSubject = (state) => {
   }, []);
   return subject;
 };
+function shallowEqual(objA, objB) {
+  if (objA === null || objA === void 0 || objB === null || objB === void 0) {
+    return objA === objB;
+  }
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+  if (objA.constructor !== objB.constructor) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}
 function useMutation(query, mapOperatorOrOptions, options = {}) {
   const queryRef = useLiveRef(query);
   const triggerSubject = useSubject();
+  const resetSubject = useSubject({
+    /**
+     * @important
+     * Because mutation can still run after unmount, the user might
+     * want to use reset for whatever reason. We will only manually complete
+     * this subject whenever the main query hook finalize.
+     */
+    completeOnUnmount: false
+  });
   const optionsRef = useLiveRef(
     typeof mapOperatorOrOptions === "object" ? mapOperatorOrOptions : options
   );
@@ -447,55 +484,81 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
   const mapOperator = typeof mapOperatorOrOptions === "string" ? mapOperatorOrOptions : "merge";
   useEffect(() => {
     const switchOperator = mapOperator === "concat" ? concatMap$1 : mapOperator === "switch" ? switchMap : mergeMap;
-    const subscription = triggerSubject.current.pipe(
-      switchOperator((args) => {
-        const isLastMutationCalled = triggerSubject.current.pipe(
-          take(1),
-          map(() => mapOperator === "concat"),
-          startWith(true)
-        );
-        data$.current.next({
-          ...data$.current.getValue(),
-          status: "loading"
-        });
-        return combineLatest([
-          defer(() => from(queryRef.current(args))).pipe(
-            querx(optionsRef.current),
-            first(),
-            map((data) => ({ data, isError: false })),
-            catchError((error) => {
-              if (optionsRef.current.onError != null) {
-                optionsRef.current.onError(error);
-              }
-              return of({ data: error, isError: true });
-            })
-          ),
-          isLastMutationCalled
-        ]).pipe(
-          tap(([{ data, isError }, isLastMutationCalled2]) => {
-            if (!isError) {
-              if (optionsRef.current.onSuccess != null)
-                optionsRef.current.onSuccess(data);
-            }
-            if (isLastMutationCalled2) {
-              data$.current.next({
-                ...data$.current.getValue(),
-                ...isError ? {
-                  status: "error",
-                  error: data,
-                  data: void 0
-                } : {
-                  status: "success",
-                  error: void 0,
-                  data
-                }
-              });
-            }
+    const subscription = merge(
+      resetSubject.current.pipe(
+        map(
+          () => ({
+            status: "idle",
+            data: void 0,
+            error: void 0
           })
-        );
-      }),
-      optionsRef.current.hooks ?? identity
-    ).subscribe();
+        )
+      ),
+      triggerSubject.current.pipe(
+        switchOperator((args) => {
+          const isLastMutationCalled = triggerSubject.current.pipe(
+            take(1),
+            map(() => mapOperator === "concat"),
+            startWith(true)
+          );
+          return merge(
+            of({
+              status: "loading"
+            }),
+            combineLatest([
+              defer(() => from(queryRef.current(args))).pipe(
+                querx(optionsRef.current),
+                first(),
+                map((data) => ({ data, isError: false })),
+                catchError((error) => {
+                  if (optionsRef.current.onError != null) {
+                    optionsRef.current.onError(error);
+                  }
+                  return of({ data: error, isError: true });
+                })
+              ),
+              isLastMutationCalled
+            ]).pipe(
+              map(([{ data, isError }, isLastMutationCalled2]) => {
+                if (!isError) {
+                  if (optionsRef.current.onSuccess != null)
+                    optionsRef.current.onSuccess(data);
+                }
+                if (isLastMutationCalled2) {
+                  return isError ? {
+                    status: "error",
+                    error: data,
+                    data: void 0
+                  } : {
+                    status: "success",
+                    error: void 0,
+                    data
+                  };
+                }
+                return void 0;
+              }),
+              takeUntil(resetSubject.current)
+            )
+          );
+        }),
+        optionsRef.current.triggerHook ?? identity,
+        finalize(() => {
+          resetSubject.current.complete();
+        })
+      )
+    ).pipe(
+      /**
+       * @important
+       * state update optimization
+       */
+      distinctUntilChanged(shallowEqual),
+      filter((state) => !!state && !!Object.keys(state).length)
+    ).subscribe((state) => {
+      data$.current.next({
+        ...data$.current.getValue(),
+        ...state
+      });
+    });
     return () => {
       if (optionsRef.current.cancelOnUnMount) {
         subscription.unsubscribe();
@@ -512,31 +575,12 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
   const mutate = useCallback((arg) => {
     triggerSubject.current.next(arg);
   }, []);
-  return { ...result, isLoading: result.status === "loading", mutate };
+  const reset = useCallback(() => {
+    resetSubject.current.next();
+  }, []);
+  return { ...result, isLoading: result.status === "loading", mutate, reset };
 }
 const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
-function shallowEqual(objA, objB) {
-  if (objA === null || objA === void 0 || objB === null || objB === void 0) {
-    return objA === objB;
-  }
-  if (typeof objA !== "object" || typeof objB !== "object") {
-    return objA === objB;
-  }
-  if (objA.constructor !== objB.constructor) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  for (const key of keysA) {
-    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
-      return false;
-    }
-  }
-  return true;
-}
 const useCreateCacheStore = () => {
   const cacheStore = useBehaviorSubject({});
   useSubscribe(

package/dist/lib/binding/useSubject.d.ts

@@ -3,8 +3,9 @@ import { Subject } from "rxjs";
  * @see
  * useBehaviorSubject
  */
-export declare const useSubject: <S>({ onBeforeComplete }?: {
+export declare const useSubject: <S>({ onBeforeComplete, completeOnUnmount }?: {
     onBeforeComplete?: (() => void) | undefined;
+    completeOnUnmount?: boolean | undefined;
 }) => {
     current: Subject<S>;
 };

package/dist/lib/queries/useMutation.d.ts

@@ -1,4 +1,9 @@
 import { type MonoTypeOperatorFunction, type Observable } from "rxjs";
+interface QueryState<R> {
+    data: R | undefined;
+    status: "idle" | "loading" | "error" | "success";
+    error: unknown;
+}
 export interface MutationOptions<R> {
     retry?: false | number | ((attempt: number, error: unknown) => boolean);
     /**
@@ -25,9 +30,10 @@ export interface MutationOptions<R> {
      */
     cancelOnUnMount?: boolean;
     /**
-     * Only use for debugging
+     * Only use for debugging.
+     * It is not the main subscription hook, only the one following the trigger.
      */
-    hooks?: MonoTypeOperatorFunction<any>;
+    triggerHook?: MonoTypeOperatorFunction<Partial<QueryState<R>> | undefined>;
 }
 interface Result<A, R> {
     status: "idle" | "loading" | "error" | "success";
@@ -49,6 +55,7 @@ interface Result<A, R> {
      */
     error: unknown | undefined;
     mutate: (args: A) => void;
+    reset: () => void;
 }
 /**
  * The default value `merge` is suitable for most use case.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactjrx",
   "private": false,
-  "version": "1.29.2",
+  "version": "1.30.0",
   "type": "module",
   "files": [
     "dist"
@@ -57,9 +57,7 @@
     "typescript": "^5.0.4",
     "vite": "^4.2.1",
     "vite-plugin-dts": "^2.2.0",
-    "vitest": "^0.31.0"
-  },
-  "dependencies": {
+    "vitest": "^0.31.0",
     "@testing-library/react": "^14.0.0",
     "@types/node": "^18.15.11"
   },