@choksheak/react-utils 0.3.8 → 0.4.0

package/sharedQuery.mjs

@@ -1,325 +1,36 @@
+import {
+  fetcher
+} from "./chunk-3V7WBGWQ.mjs";
+import {
+  sharedState,
+  useSharedState
+} from "./chunk-KRXENFK3.mjs";
+import "./chunk-PHLY3LR4.mjs";
+import {
+  init_stringify,
+  stringifyDeterministicForKeys
+} from "./chunk-33UMQLKY.mjs";
+import {
+  useDeepMemo
+} from "./chunk-GPV6JIQK.mjs";
+import "./chunk-X6BYQHVC.mjs";
+
 // src/sharedQuery.ts
-import { MS_PER_DAY as MS_PER_DAY2 } from "@choksheak/ts-utils/timeConstants";
 import getByteSize from "object-sizeof";
 import {
   useCallback,
   useEffect,
-  useMemo as useMemo2,
+  useMemo,
   useRef,
-  useState as useState2
+  useState
 } from "react";
-
-// src/sharedState.ts
-import { MS_PER_DAY } from "@choksheak/ts-utils/timeConstants";
-import { useSyncExternalStore } from "react";
-
-// src/storage.ts
-import { kvStore } from "@choksheak/ts-utils/kvStore";
-import { createLocalStore } from "@choksheak/ts-utils/localStore";
-var IS_NOT_BROWSER = typeof window === "undefined";
-function getStorageAdapter(options, defaultStoreExpiryMs) {
-  const { store } = options ?? {};
-  if (!store) {
-    return null;
-  }
-  if ("persistTo" in store && typeof store.persistTo === "string" && "key" in store && typeof store.key === "string") {
-    const expiryMs = store.expiryMs || defaultStoreExpiryMs;
-    const config = { ...store, expiryMs };
-    switch (store.persistTo) {
-      case "localStorage":
-        return localStoreAdapter(config);
-      case "indexedDb":
-        return kvStoreAdapter(config);
-      default:
-        store.persistTo;
-        throw new Error(`Unknown store.adapter ${store.persistTo}`);
-    }
-  }
-  return store;
-}
-function localStoreAdapter({
-  key,
-  expiryMs,
-  isValid
-}) {
-  const adapter = createLocalStore(key, { defaultExpiryMs: expiryMs });
-  return {
-    set: (key2, value) => {
-      if (IS_NOT_BROWSER) return;
-      adapter.set(key2, value);
-    },
-    get: (key2) => {
-      if (IS_NOT_BROWSER) return void 0;
-      const value = adapter.get(key2);
-      if (isValid && !isValid(value)) {
-        console.warn(
-          `localStorage adapter: Auto-discard invalid value for ${key2}: ${JSON.stringify(value)}`
-        );
-        adapter.delete(key2);
-        return void 0;
-      }
-      return value;
-    },
-    delete: (key2) => {
-      if (IS_NOT_BROWSER) return;
-      adapter.delete(key2);
-    },
-    clear: () => {
-      if (IS_NOT_BROWSER) return;
-      adapter.clear();
-    }
-  };
-}
-function kvStoreAdapter({
-  key,
-  expiryMs,
-  isValid
-}) {
-  const keyPrefix = key + ":";
-  return {
-    set: async (key2, value) => {
-      if (IS_NOT_BROWSER) return;
-      await kvStore.set(keyPrefix + key2, value, expiryMs);
-    },
-    get: async (key2) => {
-      if (IS_NOT_BROWSER) return void 0;
-      const fullKey = keyPrefix + key2;
-      const value = await kvStore.get(fullKey);
-      if (value !== void 0 && isValid && !isValid(value)) {
-        console.warn(
-          `indexedDb adapter: Auto-discard invalid value for ${key2}:`,
-          value
-        );
-        await kvStore.delete(fullKey);
-        return void 0;
-      }
-      return value;
-    },
-    delete: async (key2) => {
-      if (IS_NOT_BROWSER) return;
-      await kvStore.delete(keyPrefix + key2);
-    },
-    clear: async () => {
-      if (IS_NOT_BROWSER) return;
-      await kvStore.clear();
-    }
-  };
-}
-
-// src/sharedState.ts
-var SharedStateConfig = {
-  /**
-   * Default duration for storage expiration in milliseconds. Initial value
-   * is 30 days, but can be changed to anything.
-   */
-  storeExpiryMs: 30 * MS_PER_DAY,
-  /**
-   * True to load from storage only on mount, false (default) to load in
-   * the top level scope when the shared state is defined.
-   */
-  lazyLoad: false
-};
-function createPubSubStore() {
-  const dataByKey = /* @__PURE__ */ new Map();
-  const subscribersByKey = /* @__PURE__ */ new Map();
-  function notify(key, next, prev) {
-    const subscribers = subscribersByKey.get(key);
-    if (!subscribers) return;
-    const copy = Array.from(subscribers.values());
-    for (const subscriber of copy) {
-      try {
-        subscriber(next, prev);
-      } catch (e) {
-        console.error(`Error invoking subscriber:`, e);
-      }
-    }
-  }
-  return {
-    // This could be undefined if T includes undefined, else it should never
-    // return undefined because the user has to always specify the default value.
-    get(key) {
-      return dataByKey.get(key);
-    },
-    set(key, value) {
-      const prev = dataByKey.get(key);
-      if (prev === value) return;
-      dataByKey.set(key, value);
-      notify(key, value, prev);
-    },
-    delete(key) {
-      dataByKey.delete(key);
-    },
-    setNoNotify(key, value) {
-      dataByKey.set(key, value);
-    },
-    // Subscribe to changes of a specific key
-    subscribe(key, subscriber) {
-      let subscribers = subscribersByKey.get(key);
-      if (!subscribers) {
-        subscribers = /* @__PURE__ */ new Set();
-        subscribersByKey.set(key, subscribers);
-      }
-      subscribers.add(subscriber);
-      return () => {
-        subscribers.delete(subscriber);
-        if (subscribers.size === 0) subscribersByKey.delete(key);
-      };
-    }
-  };
-}
-var pubSubStore = createPubSubStore();
-var STORAGE_KEY = "state";
-var stateKey = 0;
-function sharedState(defaultValue, options) {
-  let readyResolve = () => {
-  };
-  const readyPromise = new Promise((resolve) => {
-    readyResolve = resolve;
-  });
-  const resolveReadyPromise = readyResolve;
-  const pubSubKey = String(stateKey++);
-  const storageAdapter = getStorageAdapter(
-    options,
-    SharedStateConfig.storeExpiryMs
-  );
-  pubSubStore.setNoNotify(pubSubKey, defaultValue);
-  const lazyLoad = options?.lazyLoad;
-  const lazy = lazyLoad !== void 0 ? lazyLoad : SharedStateConfig.lazyLoad;
-  const obj = {
-    /** Allow users to await for the completion of data init. */
-    readyPromise,
-    lazy,
-    initStarted: false,
-    initDone: false,
-    /** `subscribe` function required by useSyncExternalStore. */
-    subscribe(subscriber) {
-      return pubSubStore.subscribe(pubSubKey, () => subscriber());
-    },
-    /** Returns true if there is a backing store. */
-    hasStore() {
-      return Boolean(storageAdapter);
-    },
-    /**
-     * Set a value directly into the store. Does nothing if there is no
-     * backing store.
-     *
-     * Warning: If you want to set the value properly, you should use
-     * `setValue()` instead which also updates the in-memory copy.
-     */
-    async setInStore(value) {
-      return await storageAdapter?.set(STORAGE_KEY, value);
-    },
-    /**
-     * Get a value directly from the store. Returns undefined if there is no
-     * backing store.
-     */
-    async getFromStore() {
-      return await storageAdapter?.get(STORAGE_KEY);
-    },
-    /**
-     * Get the value of the shared state.
-     *  `getSnapshot` function — must return same ref if value unchanged.
-     * Note that this would return the default value if data init from store is
-     * not completed yet.
-     */
-    getSnapshot() {
-      return pubSubStore.get(pubSubKey);
-    },
-    /** Set the value of the shared state. */
-    setValue(next) {
-      if (typeof next === "function") {
-        const prev = pubSubStore.get(pubSubKey);
-        next = next(prev);
-      }
-      pubSubStore.set(pubSubKey, next);
-      void obj.setInStore(next);
-    },
-    /**
-     * Remove the value of the shared state. Actually this just sets the value
-     * back to the given default value.
-     */
-    delete() {
-      pubSubStore.set(pubSubKey, defaultValue);
-      void storageAdapter?.set(STORAGE_KEY, defaultValue);
-    },
-    /** Initial default handling. */
-    async initDefaultValueOnce() {
-      if (obj.initDone || obj.initStarted) return;
-      obj.initStarted = true;
-      const stored = await obj.getFromStore();
-      const value = stored !== void 0 ? stored : defaultValue;
-      pubSubStore.set(pubSubKey, value);
-      obj.initDone = true;
-      resolveReadyPromise();
-    }
-  };
-  if (!lazy) {
-    void obj.initDefaultValueOnce();
-  }
-  return obj;
-}
-function useSharedState(state) {
-  void state.initDefaultValueOnce();
-  const value = useSyncExternalStore(
-    (onStoreChange) => state.subscribe(onStoreChange),
-    () => state.getSnapshot(),
-    // getServerSnapshot is needed to prevent SSR dev errors in nextjs.
-    () => state.getSnapshot()
-  );
-  return [value, state.setValue];
-}
-
-// src/stringify.ts
-function stringifyDeterministicForKeys(params) {
-  const cache = /* @__PURE__ */ new Set();
-  return JSON.stringify(params, (_, value) => {
-    if (typeof value === "function") {
-      throw new Error(`Functions should not be passed into query parameters`);
-    }
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
-      return value;
-    }
-    if (cache.has(value)) {
-      return "[Circular]";
-    }
-    cache.add(value);
-    if (value !== params) {
-      try {
-        JSON.stringify(value);
-      } catch {
-        return "[Unserializable]";
-      }
-    }
-    return Object.keys(value).sort().reduce(
-      (result, key) => {
-        result[key] = value[key];
-        return result;
-      },
-      {}
-    );
-  });
-}
-
-// src/useDeepMemo.ts
-import isEqual from "lodash/isEqual";
-import { useMemo, useState } from "react";
-function useDeepMemo(value) {
-  const [state, setState] = useState(value);
-  return useMemo(() => {
-    if (isEqual(state, value)) {
-      return state;
-    }
-    setState(value);
-    return value;
-  }, [state, value]);
-}
-
-// src/sharedQuery.ts
+import XXH from "xxhashjs";
+init_stringify();
 var SharedQueryConfig = {
   /** Refetch on every page load. */
   staleMs: 0,
   /** Keep in cache for a long time. */
-  expiryMs: 30 * MS_PER_DAY2,
+  expiryMs: 30 * 864e5,
   /** Always refetch automatically if the data is stale. */
   refetchOnStale: true,
   /** No default persistence configured. */
@@ -336,14 +47,55 @@ function configureSharedQuery(config) {
 }
 var seenQueryNames = /* @__PURE__ */ new Set();
 function sharedQuery(options) {
-  if (seenQueryNames.has(options.queryName)) {
-    throw new Error(`Duplicate shared query name "${options.queryName}"`);
+  const url = options.url || "";
+  const queryName = options.queryName || url;
+  if (!queryName) {
+    throw new Error(`Either queryName or url must be specified.`);
   }
-  seenQueryNames.add(options.queryName);
+  if (seenQueryNames.has(queryName)) {
+    throw new Error(`Duplicate shared query name "${queryName}"`);
+  }
+  seenQueryNames.add(queryName);
   const inflightQueries = /* @__PURE__ */ new Map();
   const mountedKeys = /* @__PURE__ */ new Map();
-  const queryName = options.queryName;
-  const queryFn = options.queryFn;
+  let queryFn;
+  if (options.queryFn) {
+    queryFn = options.queryFn;
+  } else if (url) {
+    queryFn = (...args) => {
+      let params = "";
+      const firstArg = args?.[0];
+      if (firstArg) {
+        if (typeof firstArg === "string") {
+          params = firstArg;
+        } else if (typeof firstArg === "object") {
+          const entries = [];
+          for (const [k, v] of Object.entries(firstArg)) {
+            if (v === void 0) continue;
+            if (Array.isArray(v)) {
+              for (const item of v) {
+                if (item === void 0) continue;
+                entries.push([k, String(item)]);
+              }
+            } else {
+              entries.push([k, String(v)]);
+            }
+          }
+          params = new URLSearchParams(entries).toString();
+        }
+        if (params) {
+          if (url.includes("?")) {
+            params = "&" + params;
+          } else {
+            params = "?" + params;
+          }
+        }
+      }
+      return fetcher.url(url + params).get().json();
+    };
+  } else {
+    throw new Error(`Either queryFn or url must be specified`);
+  }
   const refetchFn = options.refetchFn;
   const staleMs = options?.staleMs ?? SharedQueryConfig.staleMs;
   const expiryMs = options?.expiryMs ?? SharedQueryConfig.expiryMs;
@@ -523,7 +275,11 @@ function sharedQuery(options) {
     queryState,
     /** Returns a key to identify requests based on the given args. */
     getQueryKey(args) {
-      return queryName + ":" + stringifyDeterministicForKeys(args);
+      let s = stringifyDeterministicForKeys(args);
+      if (s.length > 30) {
+        s = XXH.h32(s, 39406).toString(16).slice(2);
+      }
+      return queryName + ":" + s;
     },
     /**
      * Get the AbortController to abort the inflight query (if any).
@@ -542,7 +298,7 @@ function sharedQuery(options) {
     /**
      * Get the AbortSignal to check for query abortions.
      *
-     * Example:
+     * Example using fetch:
      * ```
      *   const getUserQuery = sharedQuery({
      *     queryName: "getUser",
@@ -563,6 +319,20 @@ function sharedQuery(options) {
      *     },
      *   });
      * ```
+     *
+     * Example using `fetcher.ts`:
+     * ```
+     *   const getUserQuery = sharedQuery({
+     *     queryName: "getUser",
+     *     queryFn: (userId: string) => {
+     *       // Get the signal for this current execution.
+     *       const signal = getUserQuery.getAbortSignal([userId]);
+     *
+     *       // Pass the signal to fetch so that it can be aborted.
+     *       return fetcher.url(`/users/${userId}`).options({ signal }).get().json();
+     *     },
+     *   });
+     * ```
      */
     getAbortSignal(args) {
       const queryKey = obj.getQueryKey(args);
@@ -685,7 +455,7 @@ function useSharedQuery(query, ...args) {
   const stableArgs = useDeepMemo(args);
   const [queryState, setQueryState] = useSharedState(query.queryState);
   const isMounted = useRef(true);
-  const queryKey = useMemo2(
+  const queryKey = useMemo(
     () => query.getQueryKey(stableArgs),
     [query, stableArgs]
   );
@@ -700,7 +470,7 @@ function useSharedQuery(query, ...args) {
     },
     [queryKey, setQueryState]
   );
-  const [lastNonEmptyData, setLastNonEmptyData] = useState2();
+  const [lastNonEmptyData, setLastNonEmptyData] = useState();
   useEffect(() => {
     if (query.keepLastNonEmptyData && queryStateValue.data !== void 0) {
       setLastNonEmptyData(queryStateValue.data);
@@ -759,10 +529,12 @@ function useSharedQuery(query, ...args) {
       query.unmount(queryKey);
     };
   }, [execute, query, queryKey]);
-  return useMemo2(() => {
+  return useMemo(() => {
     return {
       ...queryStateValue,
-      lastNonEmptyData,
+      // Fill with lastNonEmptyData when data is undefined.
+      data: queryStateValue.data !== void 0 ? queryStateValue.data : lastNonEmptyData,
+      latestData: queryStateValue.data,
       // This works only if the user-given queryFn supports abort. If not,
       // this function doesn't do anything, since we don't have any means to
       // abort the running queryFn.