floppy-disk 3.0.0-experimental.1 → 3.0.0

package/esm/react.d.mts

@@ -0,0 +1,7 @@
+export * from './react/use-isomorphic-layout-effect.mjs';
+export { useStoreState } from './react/use-store.mjs';
+export * from './react/create-store.mjs';
+export * from './react/create-stores.mjs';
+export * from './react/create-query.mjs';
+export { createMutation, type MutationOptions, type MutationState, } from './react/create-mutation.mjs';
+export * from './react/use-mutation.mjs';

package/esm/react.mjs

@@ -0,0 +1,697 @@
+import { useLayoutEffect, useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { isClient, initStore, getHash, noop } from 'floppy-disk/vanilla';
+
+const useIsomorphicLayoutEffect = isClient ? useLayoutEffect : useEffect;
+
+const getValueByPath = (obj, path) => path.reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
+const isPrefixPath = (candidatePrefix, targetPath) => {
+  if (candidatePrefix.length >= targetPath.length) return false;
+  for (let i = 0; i < candidatePrefix.length; i++) {
+    if (candidatePrefix[i] !== targetPath[i]) return false;
+  }
+  return true;
+};
+const compressPaths = (paths) => {
+  const result = [];
+  let prev = null;
+  for (let i = paths.length - 1; i >= 0; i--) {
+    const current = paths[i];
+    if (!prev || !isPrefixPath(current, prev)) result.push(current);
+    prev = current;
+  }
+  return result;
+};
+const useStoreStateProxy = (storeState) => {
+  const usedPathsRef = useRef([]);
+  usedPathsRef.current = [];
+  const trackedState = useMemo(() => {
+    const track = (path) => usedPathsRef.current.push(path);
+    const proxyCache = /* @__PURE__ */ new WeakMap();
+    const createDeepProxy = (target, path = []) => {
+      if (typeof target !== "object" || target === null) {
+        return target;
+      }
+      if (proxyCache.has(target)) {
+        return proxyCache.get(target);
+      }
+      const proxy = new Proxy(target, {
+        get(obj, key) {
+          const newPath = [...path, key];
+          track(newPath);
+          const value = obj[key];
+          return createDeepProxy(value, newPath);
+        }
+      });
+      proxyCache.set(target, proxy);
+      return proxy;
+    };
+    return createDeepProxy(storeState);
+  }, [storeState]);
+  return [trackedState, usedPathsRef];
+};
+const useStoreState = (storeState, subscribe) => {
+  const [trackedState, usedPathsRef] = useStoreStateProxy(storeState);
+  const [, reRender] = useState({});
+  useIsomorphicLayoutEffect(() => {
+    return subscribe((nextState, prevState, changedKeys) => {
+      const paths = compressPaths(usedPathsRef.current);
+      for (const path of paths) {
+        const rootKey = path[0];
+        if (!changedKeys.includes(rootKey)) continue;
+        const prevVal = getValueByPath(prevState, path);
+        const nextVal = getValueByPath(nextState, path);
+        if (!Object.is(prevVal, nextVal)) return reRender({});
+      }
+    });
+  }, [subscribe]);
+  return trackedState;
+};
+
+const createStore = (initialState, options) => {
+  const store = initStore(initialState, options);
+  const useStore = () => useStoreState(store.getState(), store.subscribe);
+  return Object.assign(useStore, store);
+};
+
+const createStores = (initialState, options) => {
+  const stores = /* @__PURE__ */ new Map();
+  const getStore = (key = {}) => {
+    const keyHash = getHash(key);
+    let store;
+    if (stores.has(keyHash)) {
+      store = stores.get(keyHash);
+    } else {
+      store = initStore(initialState, options);
+      stores.set(keyHash, store);
+    }
+    const useStore = () => useStoreState(store.getState(), store.subscribe);
+    return Object.assign(useStore, {
+      ...store,
+      delete: () => {
+        if (store.getSubscribers().size > 0) {
+          console.warn(
+            "Cannot delete store while it still has active subscribers. Unsubscribe all listeners before deleting the store."
+          );
+          return false;
+        }
+        store.setState(initialState);
+        return stores.delete(keyHash);
+      }
+    });
+  };
+  return getStore;
+};
+
+const INITIAL_STATE$1 = {
+  isPending: false,
+  isRevalidating: false,
+  isRetrying: false,
+  retryCount: 0,
+  state: "INITIAL",
+  isSuccess: false,
+  isError: false,
+  data: void 0,
+  dataUpdatedAt: void 0,
+  error: void 0,
+  errorUpdatedAt: void 0
+};
+const createQuery = (queryFn, options = {}) => {
+  const {
+    staleTime = 2500,
+    // 2.5 seconds,
+    gcTime = 5 * 60 * 1e3,
+    // 5 minutes
+    revalidateOnFocus = true,
+    revalidateOnReconnect = true,
+    onSuccess = noop,
+    onError,
+    onSettled = noop,
+    shouldRetry: shouldRetryFn = (_, s) => s.retryCount === 0 ? [true, 1500] : [false]
+  } = options;
+  const initialState = { ...INITIAL_STATE$1 };
+  const stores = /* @__PURE__ */ new Map();
+  const configureStoreEvents = () => ({
+    ...options,
+    onFirstSubscribe: (state, store) => {
+      var _a;
+      (_a = options.onFirstSubscribe) == null ? void 0 : _a.call(options, state, store);
+      const { metadata, revalidate: revalidate2 } = internals.get(store);
+      clearTimeout(metadata.garbageCollectionTimeoutId);
+      if (isClient) {
+        if (revalidateOnFocus) {
+          focusListeners.add(revalidate2);
+          if (!focusListenersAdded) {
+            window.addEventListener("focus", onWindowFocus);
+            focusListenersAdded = true;
+          }
+        }
+        if (revalidateOnReconnect) {
+          onlineListeners.add(revalidate2);
+          if (!onlineListenersAdded) {
+            window.addEventListener("online", onWindowOnline);
+            onlineListenersAdded = true;
+          }
+        }
+      }
+    },
+    onLastUnsubscribe: (state, store) => {
+      var _a, _b;
+      (_a = options.onLastUnsubscribe) == null ? void 0 : _a.call(options, state, store);
+      const { metadata, revalidate: revalidate2 } = internals.get(store);
+      clearTimeout(metadata.retryTimeoutId);
+      (_b = metadata.retryResolver) == null ? void 0 : _b.call(metadata, state);
+      metadata.retryResolver = void 0;
+      metadata.garbageCollectionTimeoutId = setTimeout(() => {
+        store.setState(initialState);
+      }, gcTime);
+      if (isClient) {
+        if (revalidateOnFocus) {
+          focusListeners.delete(revalidate2);
+          if (focusListeners.size === 0) {
+            window.removeEventListener("focus", onWindowFocus);
+            focusListenersAdded = false;
+          }
+        }
+        if (revalidateOnReconnect) {
+          onlineListeners.delete(revalidate2);
+          if (onlineListeners.size === 0) {
+            window.removeEventListener("online", onWindowOnline);
+            onlineListenersAdded = false;
+          }
+        }
+      }
+    }
+  });
+  const internals = /* @__PURE__ */ new WeakMap();
+  const configureInternals = (store, variable, variableHash) => ({
+    metadata: {},
+    setInitialData: (data, revalidate2 = false) => {
+      const state = store.getState();
+      if (state.state === "INITIAL" && state.data === void 0) {
+        const { metadata } = internals.get(store);
+        if (revalidate2) metadata.isInvalidated = true;
+        store.setState({
+          state: "SUCCESS",
+          isSuccess: true,
+          data,
+          dataUpdatedAt: Date.now()
+        });
+        return true;
+      }
+      return false;
+    },
+    execute: ({ overwriteOngoingExecution = true } = {}) => {
+      return execute(store, variable, overwriteOngoingExecution);
+    },
+    revalidate: ({ overwriteOngoingExecution = true } = {}) => {
+      return revalidate(store, variable, overwriteOngoingExecution);
+    },
+    invalidate: (options2) => {
+      const { metadata } = internals.get(store);
+      metadata.isInvalidated = true;
+      if (store.getSubscribers().size > 0) {
+        internals.get(store).execute(options2);
+        return true;
+      }
+      return false;
+    },
+    reset: () => {
+      var _a, _b;
+      const { metadata } = internals.get(store);
+      clearTimeout(metadata.retryTimeoutId);
+      if (metadata.retryResolver || metadata.promiseResolver) {
+        console.debug(
+          "Ongoing query execution was ignored due to reset(). The result will not update the store state."
+        );
+        (_a = metadata.promiseResolver) == null ? void 0 : _a.call(metadata, initialState);
+        (_b = metadata.retryResolver) == null ? void 0 : _b.call(metadata, initialState);
+        metadata.promiseResolver = void 0;
+        metadata.retryResolver = void 0;
+      }
+      metadata.promise = void 0;
+      store.setState(initialState);
+    },
+    delete: () => {
+      if (store.getSubscribers().size > 0) {
+        console.warn(
+          "Cannot delete query store while it still has active subscribers. Unsubscribe all listeners before deleting the store."
+        );
+        return false;
+      }
+      internals.get(store).reset();
+      return stores.delete(variableHash);
+    },
+    optimisticUpdate: (optimisticData) => {
+      const { metadata, revalidate: revalidate2, rollbackOptimisticUpdate } = internals.get(store);
+      metadata.rollbackData = store.getState().data;
+      store.setState({ data: optimisticData });
+      return { revalidate: revalidate2, rollback: rollbackOptimisticUpdate };
+    },
+    rollbackOptimisticUpdate: () => {
+      const { metadata } = internals.get(store);
+      store.setState({ data: metadata.rollbackData });
+      return metadata.rollbackData;
+    }
+  });
+  const execute = async (store, variable, overwriteOngoingExecution = false) => {
+    const { metadata } = internals.get(store);
+    if (!overwriteOngoingExecution && metadata.promise) return metadata.promise;
+    clearTimeout(metadata.retryTimeoutId);
+    const createPromise = () => {
+      const promise = new Promise((resolve) => {
+        metadata.promiseResolver = resolve;
+        const stateBeforeExecute = store.getState();
+        store.setState({
+          isPending: true,
+          isRevalidating: stateBeforeExecute.state === "SUCCESS",
+          isRetrying: !!metadata.retryResolver,
+          retryCount: metadata.retryResolver ? stateBeforeExecute.retryCount + 1 : 0
+        });
+        queryFn(variable, stateBeforeExecute).then((data) => {
+          var _a;
+          if (data === void 0) {
+            console.error(
+              "Query function returned undefined. Successful responses must not be undefined."
+            );
+          }
+          if (!metadata.promiseResolver) return;
+          if (promise !== metadata.promise) return resolve(metadata.promise);
+          store.setState({
+            isPending: false,
+            isRevalidating: false,
+            isRetrying: false,
+            retryCount: 0,
+            state: "SUCCESS",
+            isSuccess: true,
+            isError: false,
+            data,
+            dataUpdatedAt: Date.now(),
+            error: void 0,
+            errorUpdatedAt: void 0
+          });
+          metadata.isInvalidated = false;
+          metadata.rollbackData = data;
+          resolve(store.getState());
+          (_a = metadata.retryResolver) == null ? void 0 : _a.call(metadata, store.getState());
+          metadata.retryResolver = void 0;
+          onSuccess(data, variable, stateBeforeExecute);
+          onSettled(variable, stateBeforeExecute);
+        }).catch((error) => {
+          var _a;
+          if (!metadata.promiseResolver && !metadata.retryResolver) return;
+          if (promise !== metadata.promise) return resolve(metadata.promise);
+          store.setState({
+            isPending: false,
+            isRevalidating: false,
+            isRetrying: false
+          });
+          const [shouldRetry, retryDelay] = shouldRetryFn(error, store.getState());
+          const hasSubscriber = store.getSubscribers().size > 0;
+          if (shouldRetry && hasSubscriber) {
+            metadata.retryResolver = resolve;
+            metadata.retryTimeoutId = setTimeout(createPromise, retryDelay);
+          } else {
+            store.setState({
+              isPending: false,
+              isRevalidating: false,
+              isRetrying: false,
+              retryCount: 0,
+              error,
+              errorUpdatedAt: Date.now(),
+              ...store.getState().data ? {
+                state: "SUCCESS_BUT_REVALIDATION_ERROR",
+                isError: false
+              } : {
+                state: "ERROR",
+                isError: true
+              }
+            });
+            const state = store.getState();
+            resolve(state);
+            (_a = metadata.retryResolver) == null ? void 0 : _a.call(metadata, state);
+            metadata.retryResolver = void 0;
+            if (onError) onError(error, variable, stateBeforeExecute);
+            else console.error(state);
+            onSettled(variable, stateBeforeExecute);
+          }
+        }).finally(() => {
+          if (metadata.promise === promise) {
+            metadata.promise = void 0;
+            metadata.promiseResolver = void 0;
+          }
+        });
+      });
+      metadata.promise = promise;
+      return promise;
+    };
+    return createPromise();
+  };
+  const revalidate = async (store, variable, overwriteOngoingExecution) => {
+    const { metadata } = internals.get(store);
+    if (!overwriteOngoingExecution && metadata.promise) return metadata.promise;
+    const state = store.getState();
+    if (state.dataUpdatedAt) {
+      const isFresh = state.dataUpdatedAt + staleTime > Date.now();
+      if (isFresh && !metadata.isInvalidated) return state;
+    }
+    return execute(store, variable, overwriteOngoingExecution);
+  };
+  const getStore = (variable = {}) => {
+    const variableHash = getHash(variable);
+    let store;
+    if (stores.has(variableHash)) {
+      store = stores.get(variableHash);
+    } else {
+      store = initStore(initialState, configureStoreEvents());
+      stores.set(variableHash, store);
+      internals.set(store, configureInternals(store, variable, variableHash));
+    }
+    const useStore = (options2 = {}) => {
+      const { revalidateOnMount = true, keepPreviousData } = options2;
+      const storeState = store.getState();
+      const prevState = useRef({});
+      let storeStateToBeUsed = storeState;
+      if (storeState.state !== "INITIAL") {
+        prevState.current = {
+          data: storeState.data,
+          dataUpdatedAt: storeState.dataUpdatedAt
+        };
+      } else if (keepPreviousData) {
+        storeStateToBeUsed = { ...storeState, ...prevState.current };
+      }
+      const [trackedState, usedPathsRef] = useStoreStateProxy(
+        revalidateOnMount && storeState.state === "INITIAL" ? (
+          // Optimize rendering on initial state
+          // Do { isPending: true } → result
+          // instead of { isPending: false } → { isPending: true } → result
+          { ...storeStateToBeUsed, isPending: true }
+        ) : storeStateToBeUsed
+      );
+      const [, reRender] = useState({});
+      useIsomorphicLayoutEffect(() => {
+        return store.subscribe((nextState, prevState2, changedKeys) => {
+          if (prevState2.state === "INITIAL" && !prevState2.isPending && nextState.isPending) {
+            return;
+          }
+          const paths = compressPaths(usedPathsRef.current);
+          for (const path of paths) {
+            const rootKey = path[0];
+            if (!changedKeys.includes(rootKey)) continue;
+            const prevVal = getValueByPath(prevState2, path);
+            const nextVal = getValueByPath(nextState, path);
+            if (!Object.is(prevVal, nextVal)) return reRender({});
+          }
+        });
+      }, [store]);
+      useIsomorphicLayoutEffect(() => {
+        if (revalidateOnMount !== false) revalidate(store, variable, false);
+      }, [store, revalidateOnMount]);
+      if (keepPreviousData) {
+        !!trackedState.error;
+      }
+      return trackedState;
+    };
+    return Object.assign(useStore, {
+      subscribe: store.subscribe,
+      getSubscribers: store.getSubscribers,
+      getState: store.getState,
+      setState: (value) => {
+        console.debug("Manual setState (not via provided actions) on query store");
+        store.setState(value);
+      },
+      ...internals.get(store)
+    });
+  };
+  return Object.assign(getStore, {
+    /**
+     * Executes all query instances.
+     *
+     * @remarks
+     * - Useful for bulk refetching.
+     */
+    executeAll: (options2) => {
+      stores.forEach((store) => internals.get(store).execute(options2));
+    },
+    /**
+     * Revalidates all query instances.
+     *
+     * @remarks
+     * - Only re-fetches stale queries.
+     */
+    revalidateAll: (options2) => {
+      stores.forEach((store) => internals.get(store).revalidate(options2));
+    },
+    /**
+     * Invalidates all query instances.
+     *
+     * @remarks
+     * - Marks all queries as invalidated and triggers revalidation if active.
+     * - Invalidated queries bypass `staleTime` until successfully executed again.
+     */
+    invalidateAll: (options2) => {
+      stores.forEach((store) => internals.get(store).invalidate(options2));
+    },
+    /**
+     * Resets all query instances.
+     */
+    resetAll: () => {
+      stores.forEach((store) => internals.get(store).reset());
+    }
+  });
+};
+let focusListenersAdded = false;
+const focusListeners = /* @__PURE__ */ new Set();
+const onWindowFocus = () => [...focusListeners].forEach((fn) => fn());
+let onlineListenersAdded = false;
+const onlineListeners = /* @__PURE__ */ new Set();
+const onWindowOnline = () => [...onlineListeners].forEach((fn) => fn());
+
+const INITIAL_STATE = {
+  state: "INITIAL",
+  isPending: false,
+  isSuccess: false,
+  isError: false,
+  variable: void 0,
+  data: void 0,
+  dataUpdatedAt: void 0,
+  error: void 0,
+  errorUpdatedAt: void 0
+};
+const createMutation = (mutationFn, options = {}) => {
+  const { onSuccess = noop, onError, onSettled = noop } = options;
+  const initialState = { ...INITIAL_STATE };
+  let ongoingPromise;
+  const resolveFns = /* @__PURE__ */ new Set([]);
+  const store = initStore(initialState, options);
+  const useStore = () => useStoreState(store.getState(), store.subscribe);
+  const execute = (variable) => {
+    let currentResolveFn;
+    const stateBeforeExecute = store.getState();
+    if (stateBeforeExecute.isPending) {
+      console.warn(
+        "A mutation was executed while a previous execution is still pending. The previous execution will be ignored (latest execution wins)."
+      );
+    }
+    store.setState({ isPending: true });
+    const promise = new Promise((resolve) => {
+      currentResolveFn = resolve;
+      mutationFn(variable, stateBeforeExecute).then((data) => {
+        if (promise !== ongoingPromise) {
+          return resolve({ data, variable });
+        }
+        store.setState({
+          state: "SUCCESS",
+          isPending: false,
+          isSuccess: true,
+          isError: false,
+          variable,
+          data,
+          dataUpdatedAt: Date.now(),
+          error: void 0,
+          errorUpdatedAt: void 0
+        });
+        resolve({ data, variable });
+        resolveFns.clear();
+        onSuccess(data, variable, stateBeforeExecute);
+      }).catch((error) => {
+        if (promise !== ongoingPromise) {
+          return resolve({ error, variable });
+        }
+        store.setState({
+          state: "ERROR",
+          isPending: false,
+          isSuccess: false,
+          isError: true,
+          variable,
+          data: void 0,
+          dataUpdatedAt: void 0,
+          error,
+          errorUpdatedAt: Date.now()
+        });
+        resolve({ error, variable });
+        resolveFns.clear();
+        if (onError) onError(error, variable, stateBeforeExecute);
+        else console.error(store.getState());
+      }).finally(() => {
+        if (promise !== ongoingPromise) return;
+        onSettled(variable, stateBeforeExecute);
+        ongoingPromise = void 0;
+      });
+    });
+    if (ongoingPromise) resolveFns.forEach((resolveFn) => resolveFn(promise));
+    resolveFns.add(currentResolveFn);
+    ongoingPromise = promise;
+    return promise;
+  };
+  return Object.assign(useStore, {
+    subscribe: store.subscribe,
+    getSubscribers: store.getSubscribers,
+    getState: store.getState,
+    /**
+     * Manually updates the mutation state.
+     *
+     * @remarks
+     * - Intended for advanced use cases.
+     * - Prefer using provided mutation actions (`execute`, `reset`) instead.
+     */
+    setState: (value) => {
+      console.debug("Manual setState (not via provided actions) on mutation store");
+      store.setState(value);
+    },
+    /**
+     * Executes the mutation.
+     *
+     * @param variable - Input passed to the mutation function
+     *
+     * @returns A promise that always resolves with:
+     * - `{ data, variable }` on success
+     * - `{ error, variable }` on failure
+     *
+     * @remarks
+     * - The promise never rejects to simplify async handling.
+     * - If a mutation is already in progress, a warning is logged.
+     * - When a new execution starts, all previous pending executions will resolve with the result of the latest execution.
+     */
+    execute,
+    /**
+     * Resets the mutation state back to its initial state.
+     *
+     * @remarks
+     * - Does not cancel any ongoing execution.
+     * - If an execution is still pending, its result may override the reset state.
+     */
+    reset: () => {
+      if (store.getState().isPending) {
+        console.warn(
+          "Mutation state was reset while a request is still pending. The request will continue, but its result may override the reset state."
+        );
+      }
+      store.setState(initialState);
+    }
+  });
+};
+
+const useMutation = (mutationFn, options = {}) => {
+  const { onSuccess = noop, onError, onSettled = noop } = options;
+  const callbackRef = useRef({ onSuccess, onError, onSettled });
+  callbackRef.current.onSuccess = onSuccess;
+  callbackRef.current.onError = onError;
+  callbackRef.current.onSettled = onSettled;
+  const stateRef = useRef({ ...INITIAL_STATE });
+  const [, reRender] = useState({});
+  const refs = useRef({
+    mutationFn,
+    ongoingPromise: void 0,
+    resolveFns: /* @__PURE__ */ new Set()
+  });
+  refs.current.mutationFn = mutationFn;
+  const execute = useCallback((variable) => {
+    let currentResolveFn;
+    const stateBeforeExecute = stateRef.current;
+    if (stateBeforeExecute.isPending) {
+      console.warn(
+        "A mutation was executed while a previous execution is still pending. The previous execution will be ignored (latest execution wins)."
+      );
+    }
+    stateRef.current.isPending = true;
+    reRender({});
+    const promise = new Promise(
+      (resolve) => {
+        currentResolveFn = resolve;
+        refs.current.mutationFn(variable, stateBeforeExecute).then((data) => {
+          if (promise !== refs.current.ongoingPromise) {
+            return resolve({ data, variable });
+          }
+          stateRef.current = {
+            state: "SUCCESS",
+            isPending: false,
+            isSuccess: true,
+            isError: false,
+            variable,
+            data,
+            dataUpdatedAt: Date.now(),
+            error: void 0,
+            errorUpdatedAt: void 0
+          };
+          reRender({});
+          resolve({ data, variable });
+          refs.current.resolveFns.clear();
+          callbackRef.current.onSuccess(data, variable, stateBeforeExecute);
+        }).catch((error) => {
+          if (promise !== refs.current.ongoingPromise) {
+            return resolve({ error, variable });
+          }
+          stateRef.current = {
+            state: "ERROR",
+            isPending: false,
+            isSuccess: false,
+            isError: true,
+            variable,
+            data: void 0,
+            dataUpdatedAt: void 0,
+            error,
+            errorUpdatedAt: Date.now()
+          };
+          reRender({});
+          resolve({ error, variable });
+          refs.current.resolveFns.clear();
+          if (callbackRef.current.onError) {
+            callbackRef.current.onError(error, variable, stateBeforeExecute);
+          } else {
+            console.error(stateRef.current);
+          }
+        }).finally(() => {
+          if (promise !== refs.current.ongoingPromise) return;
+          callbackRef.current.onSettled(variable, stateBeforeExecute);
+          refs.current.ongoingPromise = void 0;
+        });
+      }
+    );
+    if (refs.current.ongoingPromise) {
+      refs.current.resolveFns.forEach((resolveFn) => resolveFn(promise));
+    }
+    refs.current.resolveFns.add(currentResolveFn);
+    refs.current.ongoingPromise = promise;
+    return promise;
+  }, []);
+  const reset = useCallback(() => {
+    if (stateRef.current.isPending) {
+      console.warn(
+        "Mutation state was reset while a request is still pending. The request will continue, but its result may override the reset state."
+      );
+    }
+    stateRef.current = { ...INITIAL_STATE };
+    reRender({});
+  }, []);
+  const r = [
+    stateRef.current,
+    {
+      execute,
+      reset,
+      getLatestState: () => stateRef.current
+    }
+  ];
+  return r;
+};
+
+export { createMutation, createQuery, createStore, createStores, useIsomorphicLayoutEffect, useMutation, useStoreState };