reactjrx 1.54.0 → 1.56.0

package/dist/index.cjs

@@ -35,12 +35,17 @@ function primitiveEqual(objA, objB) {
   return false;
 }
 function useObserve(source$, unsafeOptions, unsafeDeps) {
-  const options = unsafeOptions != null && !Array.isArray(unsafeOptions) ? unsafeOptions : { defaultValue: void 0, key: "" };
+  const options = unsafeOptions != null && !Array.isArray(unsafeOptions) ? unsafeOptions : {
+    defaultValue: void 0,
+    key: "",
+    unsubscribeOnUnmount: true
+  };
   const deps = unsafeDeps == null && Array.isArray(unsafeOptions) ? unsafeOptions : typeof source$ === "function" ? unsafeDeps ?? [] : [source$];
   const valueRef = react.useRef(
     "getValue" in source$ && typeof source$.getValue === "function" ? source$.getValue() : options.defaultValue
   );
   const sourceRef = useLiveRef(source$);
+  const optionsRef = useLiveRef(options);
   const subscribe = react.useCallback(
     (next) => {
       const source = sourceRef.current;
@@ -64,6 +69,8 @@ function useObserve(source$, unsafeOptions, unsafeDeps) {
         })
       ).subscribe(next);
       return () => {
+        if (optionsRef.current.unsubscribeOnUnmount === false)
+          return;
         sub.unsubscribe();
       };
     },
@@ -391,175 +398,6 @@ function retryBackoff(config) {
     );
   });
 }
-function shallowEqual(objA, objB) {
-  if (objA === null || objA === void 0 || objB === void 0) {
-    return objA === objB;
-  }
-  if (typeof objA !== "object" || typeof objB !== "object") {
-    return objA === objB;
-  }
-  if (objA.constructor !== (objB == null ? void 0 : 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 retryOnError = (options) => retryBackoff({
-  initialInterval: 100,
-  ...typeof options.retry === "function" ? {
-    shouldRetry: options.retry
-  } : {
-    maxRetries: options.retry === false ? 0 : options.retry ?? 3
-  }
-});
-const mergeResults = (stream$) => stream$.pipe(
-  rxjs.scan(
-    (acc, current) => {
-      return {
-        ...acc,
-        ...current
-      };
-    },
-    {
-      data: void 0,
-      error: void 0,
-      fetchStatus: "idle",
-      status: "loading"
-    }
-  ),
-  rxjs.distinctUntilChanged(
-    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
-  )
-);
-function useAsyncQuery(query, mapOperatorOrOptions, options = {}) {
-  const queryRef = useLiveRef(query);
-  const triggerSubject = useSubject();
-  const resetSubject = useSubject({
-    /**
-     * @important
-     * Because async query 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
-  );
-  const data$ = useBehaviorSubject({
-    data: void 0,
-    error: void 0,
-    status: "idle"
-  });
-  const mapOperator = typeof mapOperatorOrOptions === "string" ? mapOperatorOrOptions : "merge";
-  react.useEffect(() => {
-    const switchOperator = mapOperator === "concat" ? rxjs.concatMap : mapOperator === "switch" ? rxjs.switchMap : rxjs.mergeMap;
-    const subscription = rxjs.merge(
-      resetSubject.current.pipe(
-        rxjs.map(
-          () => ({
-            status: "idle",
-            data: void 0,
-            error: void 0
-          })
-        )
-      ),
-      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(
-                retryOnError(optionsRef.current),
-                rxjs.first(),
-                rxjs.map((data) => ({ data, isError: false })),
-                rxjs.catchError((error) => {
-                  console.error(error);
-                  if (optionsRef.current.onError != null) {
-                    optionsRef.current.onError(error, args);
-                  }
-                  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, args);
-                }
-                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(
-      rxjs.filter((state) => !!state && !!Object.keys(state).length),
-      /**
-       * @important
-       * state update optimization
-       */
-      rxjs.distinctUntilChanged(shallowEqual)
-    ).subscribe((state) => {
-      data$.current.next({
-        ...data$.current.getValue(),
-        ...state
-      });
-    });
-    return () => {
-      if (optionsRef.current.cancelOnUnMount) {
-        subscription.unsubscribe();
-      }
-    };
-  }, [mapOperator]);
-  const result = useObserve(
-    () => data$.current,
-    {
-      defaultValue: data$.current.getValue()
-    },
-    []
-  );
-  const mutate = react.useCallback((arg) => {
-    triggerSubject.current.next(arg);
-  }, []);
-  const reset = react.useCallback(() => {
-    resetSubject.current.next();
-  }, []);
-  return { ...result, isLoading: result.status === "loading", mutate, reset };
-}
 const Context = react.createContext({
   client: null
 });
@@ -574,7 +412,7 @@ const ClientEffect = ({
   }, [client]);
   return null;
 };
-const Provider = react.memo(
+const QueryClientProvider = react.memo(
   ({ children, client }) => {
     const value = react.useMemo(() => ({ client: client.client }), [client]);
     return /* @__PURE__ */ jsxRuntime.jsxs(Context.Provider, { value, children: [
@@ -590,7 +428,94 @@ const useQueryClient = () => {
   }
   return context.client;
 };
+const serializeObject = (object) => {
+  if (Array.isArray(object)) {
+    return object.reduce((acc, value, index) => {
+      if (index === object.length - 1)
+        return `${acc}${serializeObject(value)}]`;
+      return `${acc}${serializeObject(value)},`;
+    }, "[");
+  }
+  if (object === void 0)
+    return "";
+  return JSON.stringify(object, Object.keys(object).sort());
+};
+const serializeKey = (key) => {
+  if (key.length === 0)
+    return "[]";
+  return serializeObject(key);
+};
+const nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+  byte &= 63;
+  if (byte < 36) {
+    id += byte.toString(36);
+  } else if (byte < 62) {
+    id += (byte - 26).toString(36).toUpperCase();
+  } else if (byte > 62) {
+    id += "-";
+  } else {
+    id += "_";
+  }
+  return id;
+}, "");
+function useMutation(options) {
+  const client = useQueryClient();
+  const optionsRef = useLiveRef(options);
+  const defaultKey = useConstant(() => [nanoid()]);
+  const key = serializeKey(options.mutationKey ?? defaultKey.current);
+  const observedMutation = react.useMemo(
+    () => client.mutationClient.observe({ key }),
+    [key]
+  );
+  const result = useObserve(observedMutation.result$) ?? observedMutation.lastValue;
+  const mutate = react.useCallback(
+    (mutationArgs) => {
+      client.mutationClient.mutate({
+        options: { ...optionsRef.current, mutationKey: key },
+        args: mutationArgs
+      });
+    },
+    [client, key]
+  );
+  const reset = react.useCallback(() => {
+    client.mutationClient.reset({
+      key: optionsRef.current.mutationKey ?? defaultKey.current
+    });
+  }, [client]);
+  react.useEffect(() => {
+    return () => {
+      if (optionsRef.current.cancelOnUnMount) {
+        client.mutationClient.reset({
+          key: optionsRef.current.mutationKey ?? defaultKey.current
+        });
+      }
+    };
+  }, []);
+  return { mutate, reset, ...result };
+}
 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 === void 0) {
+    return objA === objB;
+  }
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+  if (objA.constructor !== (objB == null ? void 0 : 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 isDefined(arg) {
   return arg !== null && arg !== void 0;
 }
@@ -758,23 +683,33 @@ function useSubscribeEffect(source, unsafeOptions, deps = []) {
   );
   useSubscribe(enhancerMakeObservable, deps);
 }
-const serializeObject = (object) => {
-  if (Array.isArray(object)) {
-    return object.reduce((acc, value, index) => {
-      if (index === object.length - 1)
-        return `${acc}${serializeObject(value)}]`;
-      return `${acc}${serializeObject(value)},`;
-    }, "[");
+const retryOnError = (options) => retryBackoff({
+  initialInterval: 100,
+  ...typeof options.retry === "function" ? {
+    shouldRetry: options.retry
+  } : {
+    maxRetries: options.retry === false ? 0 : options.retry ?? 3
   }
-  if (object === void 0)
-    return "";
-  return JSON.stringify(object, Object.keys(object).sort());
-};
-const serializeKey = (key) => {
-  if (key.length === 0)
-    return "[]";
-  return serializeObject(key);
-};
+});
+const mergeResults$1 = (stream$) => stream$.pipe(
+  rxjs.scan(
+    (acc, current) => {
+      return {
+        ...acc,
+        ...current
+      };
+    },
+    {
+      data: void 0,
+      error: void 0,
+      fetchStatus: "idle",
+      status: "loading"
+    }
+  ),
+  rxjs.distinctUntilChanged(
+    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
+  )
+);
 const resetStyle = { backgroundColor: "transparent", color: "inherit" };
 function createLogger(env) {
   const _logger = {
@@ -1529,11 +1464,257 @@ const dispatchExternalRefetchToAllQueries = ({
   }),
   rxjs.filter((trigger2) => trigger2.type !== "refetch")
 );
+const mergeResults = (stream$) => stream$.pipe(
+  rxjs.scan(
+    (acc, current) => {
+      return {
+        ...acc,
+        ...current
+      };
+    },
+    {
+      data: void 0,
+      error: void 0,
+      // fetchStatus: "idle",
+      status: "loading"
+    }
+  ),
+  rxjs.distinctUntilChanged(
+    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
+  )
+);
+const createMutationRunner = ({
+  __queryFinalizeHook,
+  __queryInitHook,
+  __queryTriggerHook
+}) => {
+  const trigger$ = new rxjs.Subject();
+  const reset$ = new rxjs.Subject();
+  let closed = false;
+  const mapOperator$ = new rxjs.BehaviorSubject("merge");
+  const mutationsRunning$ = new rxjs.BehaviorSubject(0);
+  const destroy = () => {
+    if (closed) {
+      throw new Error("Trying to close an already closed mutation");
+    }
+    closed = true;
+    mapOperator$.complete();
+    mutationsRunning$.complete();
+    trigger$.complete();
+    reset$.complete();
+  };
+  const stableMapOperator$ = mapOperator$.pipe(
+    rxjs.filter(isDefined),
+    rxjs.distinctUntilChanged()
+  );
+  const mutation$ = stableMapOperator$.pipe(
+    __queryInitHook ?? rxjs.identity,
+    rxjs.mergeMap((mapOperator) => {
+      const switchOperator = mapOperator === "concat" ? rxjs.concatMap : mapOperator === "switch" ? rxjs.switchMap : rxjs.mergeMap;
+      return trigger$.pipe(
+        rxjs.takeUntil(stableMapOperator$.pipe(rxjs.skip(1))),
+        rxjs.tap(() => {
+          mutationsRunning$.next(mutationsRunning$.getValue() + 1);
+        }),
+        switchOperator(({ args, options }) => {
+          const queryRunner$ = rxjs.defer(() => rxjs.from(options.mutationFn(args))).pipe(
+            retryOnError(options),
+            rxjs.take(1),
+            rxjs.map((data) => ({ data, isError: false })),
+            rxjs.catchError((error) => {
+              console.error(error);
+              if (options.onError != null) {
+                options.onError(error, args);
+              }
+              return rxjs.of({ data: error, isError: true });
+            }),
+            rxjs.share()
+          );
+          const queryIsOver$ = queryRunner$.pipe(
+            rxjs.map(({ data, isError }) => isError || data)
+          );
+          const isThisCurrentFunctionLastOneCalled = trigger$.pipe(
+            rxjs.take(1),
+            rxjs.map(() => mapOperator === "concat"),
+            rxjs.startWith(true),
+            rxjs.takeUntil(queryIsOver$)
+          );
+          const loading$ = rxjs.of({
+            status: "loading"
+          });
+          return rxjs.merge(
+            loading$,
+            rxjs.combineLatest([
+              queryRunner$,
+              isThisCurrentFunctionLastOneCalled
+            ]).pipe(
+              rxjs.map(([{ data, isError }, isLastMutationCalled]) => {
+                if (!isError) {
+                  if (options.onSuccess != null)
+                    options.onSuccess(data, args);
+                }
+                if (isLastMutationCalled) {
+                  return isError ? {
+                    status: "error",
+                    error: data,
+                    data: void 0
+                  } : {
+                    status: "success",
+                    error: void 0,
+                    data
+                  };
+                }
+                return {};
+              }),
+              rxjs.takeUntil(reset$)
+            )
+          ).pipe(
+            options.__queryRunnerHook ?? rxjs.identity,
+            rxjs.finalize(() => {
+              mutationsRunning$.next(mutationsRunning$.getValue() - 1);
+            })
+          );
+        }),
+        __queryTriggerHook ?? rxjs.identity,
+        mergeResults
+      );
+    }),
+    __queryFinalizeHook ?? rxjs.identity
+  );
+  return {
+    mutation$,
+    trigger: ({
+      args,
+      options
+    }) => {
+      mapOperator$.next(options.mapOperator);
+      trigger$.next({ args, options });
+    },
+    reset$,
+    destroy,
+    mutationsRunning$,
+    getClosed: () => closed
+  };
+};
+class MutationClient {
+  constructor() {
+    /**
+     * Contain all active mutation for a given key.
+     * A mutation ca have several triggers running (it is not necessarily one function running)
+     *
+     * @important
+     * - automatically cleaned as soon as the last mutation is done for a given key
+     */
+    __publicField(this, "mutationRunners$", new rxjs.BehaviorSubject(/* @__PURE__ */ new Map()));
+    /**
+     * Mutation result subject. It can be used whether there is a mutation
+     * running or not and can be directly observed.
+     *
+     * @important
+     * - automatically cleaned as soon as the last mutation is done for a given key
+     */
+    __publicField(this, "mutationResults$", new rxjs.BehaviorSubject(/* @__PURE__ */ new Map()));
+    __publicField(this, "mutate$", new rxjs.Subject());
+    __publicField(this, "reset$", new rxjs.Subject());
+    this.mutate$.pipe(
+      rxjs.tap(({ options, args }) => {
+        const { mutationKey } = options;
+        let mutationForKey = this.mutationRunners$.getValue().get(mutationKey);
+        if (!mutationForKey) {
+          mutationForKey = createMutationRunner(options);
+          this.mutationRunners$.getValue().set(mutationKey, mutationForKey);
+          mutationForKey.mutation$.subscribe((result) => {
+            let resultForKeySubject = this.mutationResults$.getValue().get(mutationKey);
+            if (!resultForKeySubject) {
+              resultForKeySubject = new rxjs.BehaviorSubject(result);
+              const resultMap = this.mutationResults$.getValue();
+              resultMap.set(mutationKey, resultForKeySubject);
+              this.mutationResults$.next(resultMap);
+            } else {
+              resultForKeySubject == null ? void 0 : resultForKeySubject.next(result);
+            }
+          });
+          mutationForKey.mutationsRunning$.pipe(
+            rxjs.skip(1),
+            rxjs.filter((number) => number === 0)
+          ).subscribe(() => {
+            mutationForKey == null ? void 0 : mutationForKey.destroy();
+            const resultMap = this.mutationResults$.getValue();
+            resultMap.delete(mutationKey);
+            this.mutationResults$.next(resultMap);
+            const mutationsMap = this.mutationRunners$.getValue();
+            mutationsMap.delete(mutationKey);
+            this.mutationRunners$.next(mutationsMap);
+          });
+        }
+        mutationForKey.trigger({ args, options });
+      })
+    ).subscribe();
+    this.reset$.pipe(
+      rxjs.tap(({ key }) => {
+        var _a;
+        const serializedKey = serializeKey(key);
+        (_a = this.mutationRunners$.getValue().get(serializedKey)) == null ? void 0 : _a.reset$.next();
+      })
+    ).subscribe();
+  }
+  observe({ key }) {
+    var _a;
+    const currentResultValue = (_a = this.mutationResults$.getValue().get(key)) == null ? void 0 : _a.getValue();
+    const mapResultToObservedResult = (value) => ({
+      ...value,
+      isIdle: value.status === "idle",
+      isPaused: false,
+      isError: value.error !== void 0,
+      isPending: false,
+      isSuccess: value.status === "success"
+    });
+    const lastValue = currentResultValue ? mapResultToObservedResult(currentResultValue) : mapResultToObservedResult({
+      data: void 0,
+      error: void 0,
+      status: "idle"
+    });
+    const result$ = this.mutationResults$.pipe(
+      rxjs.switchMap((resultMap) => {
+        const subject = resultMap.get(key);
+        return subject ?? rxjs.EMPTY;
+      })
+    ).pipe(
+      rxjs.filter(isDefined),
+      rxjs.map((value) => ({
+        ...value,
+        isIdle: value.status === "idle",
+        isPaused: false,
+        isError: value.error !== void 0,
+        isPending: false,
+        isSuccess: value.status === "success"
+      }))
+    );
+    return { result$, lastValue };
+  }
+  mutate(params) {
+    this.mutate$.next(params);
+  }
+  /**
+   * This will reset any current mutation runnings.
+   * No discrimination process
+   */
+  reset(params) {
+    this.reset$.next(params);
+  }
+  destroy() {
+    this.reset$.complete();
+    this.mutate$.complete();
+    this.mutationResults$.complete();
+    this.mutationRunners$.complete();
+  }
+}
 const createClient = () => {
   const queryStore = createQueryStore();
   const invalidationClient = createInvalidationClient({ queryStore });
   const cacheClient = createCacheClient({ queryStore });
   const refetchClient = createRefetchClient();
+  const mutationClient = new MutationClient();
   let hasCalledStart = false;
   const query = ({
     key,
@@ -1610,7 +1791,7 @@ const createClient = () => {
           trigger$
         })
       ),
-      mergeResults,
+      mergeResults$1,
       rxjs.withLatestFrom(options$),
       rxjs.takeWhile(([result, options]) => {
         const shouldStop = result.data !== void 0 && options.terminateOnFirstResult;
@@ -1649,19 +1830,24 @@ const createClient = () => {
     const queryListenerSub = queryListener$.subscribe();
     const started = [queryStore.start()];
     return () => {
-      started.forEach((destroy) => {
-        destroy();
+      started.forEach((destroy2) => {
+        destroy2();
       });
       queryListenerSub.unsubscribe();
     };
   };
+  const destroy = () => {
+    mutationClient.destroy();
+  };
   return {
     start,
     query,
     queryStore,
+    mutationClient,
     ...invalidationClient,
     ...cacheClient,
-    ...refetchClient
+    ...refetchClient,
+    destroy
   };
 };
 class QueryClient {
@@ -1671,7 +1857,7 @@ class QueryClient {
   }
 }
 exports.QueryClient = QueryClient;
-exports.QueryClientProvider = Provider;
+exports.QueryClientProvider = QueryClientProvider;
 exports.SIGNAL_RESET = SIGNAL_RESET;
 exports.createClient = createClient;
 exports.createLocalforageAdapter = createLocalforageAdapter;
@@ -1681,9 +1867,9 @@ exports.getDelay = getDelay;
 exports.retryBackoff = retryBackoff;
 exports.signal = signal;
 exports.trigger = trigger;
-exports.useAsyncQuery = useAsyncQuery;
 exports.useBehaviorSubject = useBehaviorSubject;
 exports.useLiveRef = useLiveRef;
+exports.useMutation = useMutation;
 exports.useObserve = useObserve;
 exports.useObserveCallback = useObserveCallback;
 exports.usePersistSignals = usePersistSignals;

package/dist/index.d.ts

@@ -17,4 +17,4 @@ export * from "./lib/queries/react/mutations/useMutation";
 export * from "./lib/queries/react/queries/useQuery";
 export * from "./lib/queries/react/useSubscribeEffect";
 export * from "./lib/queries/client/createClient";
-export { Provider as QueryClientProvider, useQueryClient } from "./lib/queries/react/Provider";
+export { QueryClientProvider, useQueryClient } from "./lib/queries/react/Provider";