@choksheak/react-utils 0.1.6 → 0.1.7

package/sharedQuery.js

@@ -0,0 +1,471 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/sharedQuery.ts
+var sharedQuery_exports = {};
+__export(sharedQuery_exports, {
+  SharedQuery: () => SharedQuery,
+  sharedQuery: () => sharedQuery,
+  useQuery: () => useQuery
+});
+module.exports = __toCommonJS(sharedQuery_exports);
+var import_kvStore3 = require("@choksheak/ts-utils/kvStore");
+var import_react2 = require("react");
+
+// src/sharedState.ts
+var import_kvStore2 = require("@choksheak/ts-utils/kvStore");
+var import_timeConstants = require("@choksheak/ts-utils/timeConstants");
+var import_react = require("react");
+
+// src/utils/storage.ts
+var import_kvStore = require("@choksheak/ts-utils/kvStore");
+function getStorageAdapter(options, defaultStoreExpiryMs) {
+  const { localStorageKey, indexedDbKey, storeExpiryMs, store } = options ?? {};
+  if (store) {
+    return store;
+  }
+  const expiryMs = storeExpiryMs || defaultStoreExpiryMs;
+  if (localStorageKey) {
+    return new LocalStorageAdapter(localStorageKey, expiryMs);
+  }
+  if (indexedDbKey) {
+    return new IndexedDbAdapter(indexedDbKey, expiryMs);
+  }
+  return null;
+}
+var LocalStorageAdapter = class {
+  constructor(keyPrefix, expiryMs) {
+    this.keyPrefix = keyPrefix;
+    this.expiryMs = expiryMs;
+  }
+  save(key, value) {
+    if (typeof window === "undefined") return;
+    const fullKey = this.keyPrefix + ":" + key;
+    window.localStorage.setItem(
+      fullKey,
+      JSON.stringify({
+        value,
+        expiresAt: this.expiryMs ? Date.now() + this.expiryMs : 0
+      })
+    );
+  }
+  load(key) {
+    if (typeof window === "undefined") return void 0;
+    const fullKey = this.keyPrefix + ":" + key;
+    const raw = window.localStorage.getItem(fullKey);
+    if (!raw) return void 0;
+    try {
+      const box = JSON.parse(raw);
+      if (!box || box.expiresAt && Date.now() >= box.expiresAt) {
+        window.localStorage.removeItem(fullKey);
+        return void 0;
+      }
+      return box.value;
+    } catch {
+      window.localStorage.removeItem(fullKey);
+      return void 0;
+    }
+  }
+  delete(key) {
+    if (typeof window === "undefined") return;
+    const fullKey = this.keyPrefix + ":" + key;
+    window.localStorage.removeItem(fullKey);
+  }
+  clear() {
+    if (typeof window === "undefined") return;
+    for (const key of Object.keys(window.localStorage)) {
+      if (key.startsWith(this.keyPrefix)) {
+        window.localStorage.removeItem(key);
+      }
+    }
+  }
+};
+var IndexedDbAdapter = class {
+  constructor(keyPrefix, expiryMs) {
+    this.keyPrefix = keyPrefix;
+    this.expiryMs = expiryMs;
+  }
+  async save(key, value) {
+    if (typeof window === "undefined") return;
+    const fullKey = this.keyPrefix + ":" + key;
+    await import_kvStore.kvStore.set(fullKey, JSON.stringify(value), this.expiryMs);
+  }
+  async load(key) {
+    if (typeof window === "undefined") return void 0;
+    const fullKey = this.keyPrefix + ":" + key;
+    const raw = await import_kvStore.kvStore.get(fullKey);
+    if (raw === void 0) return void 0;
+    try {
+      return JSON.parse(raw);
+    } catch {
+      await import_kvStore.kvStore.delete(fullKey);
+      return void 0;
+    }
+  }
+  async delete(key) {
+    if (typeof window === "undefined") return;
+    const fullKey = this.keyPrefix + ":" + key;
+    await import_kvStore.kvStore.delete(fullKey);
+  }
+  async clear() {
+    if (typeof window === "undefined") return;
+    await import_kvStore.kvStore.forEach(async (k) => {
+      if (k.startsWith(this.keyPrefix)) {
+        await import_kvStore.kvStore.delete(k);
+      }
+    });
+  }
+};
+
+// src/sharedState.ts
+var SharedStateConfig = class {
+  /**
+   * Default duration for storage expiration in milliseconds. Initial value
+   * is 30 days, but can be changed to anything.
+   */
+  static storeExpiryMs = import_timeConstants.MS_PER_DAY * 30;
+  /**
+   * True to load from storage only on mount, false (default) to load in
+   * the top level scope when the shared state is defined.
+   */
+  static lazyLoad = false;
+};
+var PubSubStore = class {
+  dataByKey = /* @__PURE__ */ new Map();
+  subscribersByKey = /* @__PURE__ */ new Map();
+  // 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 this.dataByKey.get(key);
+  }
+  set(key, value) {
+    const prev = this.dataByKey.get(key);
+    if (prev === value) return;
+    this.dataByKey.set(key, value);
+    this.notify(key, value, prev);
+  }
+  delete(key) {
+    this.dataByKey.delete(key);
+  }
+  setNoNotify(key, value) {
+    this.dataByKey.set(key, value);
+  }
+  // Subscribe to changes of a specific key
+  subscribe(key, subscriber) {
+    let subscribers = this.subscribersByKey.get(key);
+    if (!subscribers) {
+      subscribers = /* @__PURE__ */ new Set();
+      this.subscribersByKey.set(key, subscribers);
+    }
+    subscribers.add(subscriber);
+    return () => {
+      subscribers.delete(subscriber);
+      if (subscribers.size === 0) this.subscribersByKey.delete(key);
+    };
+  }
+  notify(key, next, prev) {
+    const subscribers = this.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);
+      }
+    }
+  }
+};
+var pubSubStore = new PubSubStore();
+var STORAGE_KEY = "state";
+var stateKey = 0;
+var SharedState = class {
+  constructor(defaultValue, options) {
+    this.defaultValue = defaultValue;
+    this.pubSubKey = String(stateKey++);
+    this.storageAdapter = getStorageAdapter(options, import_kvStore2.DEFAULT_EXPIRY_DELTA_MS);
+    pubSubStore.setNoNotify(this.pubSubKey, defaultValue);
+    const lazyLoad = options?.lazyLoad;
+    const lazy = lazyLoad !== void 0 ? lazyLoad : SharedStateConfig.lazyLoad;
+    if (!lazy) {
+      void this.initDefaultValueOnce();
+    }
+  }
+  pubSubKey;
+  storageAdapter;
+  initDone = false;
+  // `subscribe` function required by useSyncExternalStore
+  subscribe(subscriber) {
+    return pubSubStore.subscribe(this.pubSubKey, () => subscriber());
+  }
+  // Get the value of the shared state.
+  // `getSnapshot` function — must return same ref if value unchanged
+  getSnapshot() {
+    return pubSubStore.get(this.pubSubKey);
+  }
+  // Set the value of the shared state.
+  setValue(next) {
+    if (typeof next === "function") {
+      const prev = pubSubStore.get(this.pubSubKey);
+      next = next(prev);
+    }
+    pubSubStore.set(this.pubSubKey, next);
+    void this.storageAdapter?.save(STORAGE_KEY, next);
+  }
+  // Remove the value of the shared state. Actually this just sets the value
+  // back to the given default value.
+  delete() {
+    pubSubStore.set(this.pubSubKey, this.defaultValue);
+    void this.storageAdapter?.save(STORAGE_KEY, this.defaultValue);
+  }
+  // Initial default handling
+  async initDefaultValueOnce() {
+    if (this.initDone) return;
+    this.initDone = true;
+    const v = await this.storageAdapter?.load(STORAGE_KEY);
+    pubSubStore.set(this.pubSubKey, v !== void 0 ? v : this.defaultValue);
+  }
+};
+function sharedState(defaultValue, options) {
+  return new SharedState(defaultValue, options);
+}
+function useSharedState(state) {
+  state.initDefaultValueOnce();
+  const value = (0, import_react.useSyncExternalStore)(
+    state.subscribe,
+    state.getSnapshot,
+    // getServerSnapshot is needed to prevent SSR dev errors in nextjs.
+    state.getSnapshot
+  );
+  return [value, state.setValue];
+}
+
+// src/utils/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") {
+      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/sharedQuery.ts
+var DEFAULT_STALE_MS = 0;
+var SharedQuery = class {
+  constructor(queryName, fetchFn, options) {
+    this.queryName = queryName;
+    this.fetchFn = fetchFn;
+    this.expiryMs = options?.expiryMs !== void 0 ? options?.expiryMs : import_kvStore3.DEFAULT_EXPIRY_DELTA_MS;
+    this.staleMs = options?.staleMs !== void 0 ? options?.staleMs : DEFAULT_STALE_MS;
+    this.revalidateOnStale = Boolean(options?.revalidateOnStale);
+    this.queryState = sharedState(
+      {},
+      {
+        ...options,
+        // Fallback to use expiryMs for the storeExpiryMs.
+        storeExpiryMs: options?.storeExpiryMs || this.expiryMs
+      }
+    );
+  }
+  inflightPromises = /* @__PURE__ */ new Map();
+  queryState;
+  expiryMs;
+  staleMs;
+  revalidateOnStale;
+  getQueryKey(args) {
+    return this.queryName + ":" + stringifyDeterministicForKeys(args);
+  }
+  isStale(entry) {
+    if (this.staleMs === 0) return true;
+    const ageMs = Date.now() - entry.updatedMs;
+    return ageMs > this.staleMs;
+  }
+  isExpired(entry) {
+    if (this.expiryMs === 0) return false;
+    const ageMs = Date.now() - entry.updatedMs;
+    return ageMs > this.expiryMs;
+  }
+  fetchNoCaching(queryKey, ...args) {
+    const inflightPromise = this.inflightPromises.get(queryKey);
+    if (inflightPromise) {
+      console.log(`Deduplicating inflight fetch for ${queryKey}`);
+      return inflightPromise;
+    }
+    console.log(`Start fetching ${queryKey}`);
+    const promise = this.fetchFn(...args).then((result) => {
+      console.log(`Successfully fetched ${queryKey}`);
+      this.setCache(queryKey, result);
+      return result;
+    }).catch((e) => {
+      console.error(`Failed to fetch ${queryKey}: ${e}`);
+      throw e;
+    }).finally(() => {
+      this.inflightPromises.delete(queryKey);
+    });
+    this.inflightPromises.set(queryKey, promise);
+    return promise;
+  }
+  async getCachedOrFetch(...args) {
+    const queryKey = this.getQueryKey(args);
+    const cached = this.queryState.getSnapshot()?.[queryKey];
+    if (cached?.data && !this.isExpired(cached.data)) {
+      if (!this.isStale(cached.data)) {
+        console.log(
+          `Return fresh data ${queryKey} from cache without fetching`
+        );
+        return cached.data.value;
+      }
+      if (this.revalidateOnStale) {
+        console.log(`revalidateOnStale for ${queryKey}`);
+        void this.fetchNoCaching(queryKey, ...args);
+      }
+      console.log(`Returning stale data for ${queryKey}`);
+      return cached.data.value;
+    }
+    return await this.fetchNoCaching(queryKey, ...args);
+  }
+  async setCache(queryKey, value) {
+    const entry = {
+      data: { value, updatedMs: Date.now() },
+      loading: false,
+      error: null
+    };
+    this.queryState.setValue((prev) => ({ ...prev, [queryKey]: entry }));
+  }
+  /** Do a new fetch even when the data is already cached. */
+  async updateFromSource(...args) {
+    const key = this.getQueryKey(args);
+    return await this.fetchNoCaching(key, ...args);
+  }
+  /** Delete the currently cached data. */
+  invalidate(args) {
+    if (args) {
+      const queryKey = this.getQueryKey(args);
+      const record = this.queryState.getSnapshot();
+      const clone = { ...record };
+      delete clone[queryKey];
+      this.queryState.setValue(clone);
+      this.inflightPromises.delete(queryKey);
+    } else {
+      this.clearAll();
+    }
+  }
+  /** Delete the currently cached data & all inflight promises. */
+  clearAll() {
+    this.queryState.delete();
+    this.inflightPromises.clear();
+  }
+};
+var seenQueryNames = /* @__PURE__ */ new Set();
+function sharedQuery(queryName, fetchFn, options) {
+  if (seenQueryNames.has(queryName)) {
+    throw new Error(`Duplicate shared query "${queryName}"`);
+  }
+  seenQueryNames.add(queryName);
+  return new SharedQuery(queryName, fetchFn, options);
+}
+var DEFAULT_QUERY_STATE_ENTRY = {
+  data: null,
+  loading: true,
+  error: null
+};
+function useQuery(query, args) {
+  const [queryState, setQueryState] = useSharedState(query.queryState);
+  const isMounted = (0, import_react2.useRef)(true);
+  const queryKey = query.getQueryKey(args);
+  const execute = (0, import_react2.useCallback)(async () => {
+    console.log(`Begin executing shared query ${queryKey}`);
+    setQueryState((prev) => {
+      const clone = { ...prev };
+      clone[queryKey] = {
+        data: clone[queryKey]?.data ?? null,
+        loading: true,
+        error: null
+      };
+      return clone;
+    });
+    try {
+      const value = await query.getCachedOrFetch(...args);
+      if (isMounted.current) {
+        setQueryState((prev) => {
+          const clone = { ...prev };
+          const now = Date.now();
+          clone[queryKey] = {
+            data: {
+              value,
+              updatedMs: now
+            },
+            loading: false,
+            error: null
+          };
+          return clone;
+        });
+      }
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(`An unknown error occurred during fetch: ${e}`);
+      if (isMounted.current) {
+        setQueryState((prev) => {
+          const clone = { ...prev };
+          clone[queryKey] = {
+            data: clone[queryKey]?.data ?? null,
+            loading: false,
+            error
+          };
+          return clone;
+        });
+      }
+    }
+  }, [queryKey]);
+  (0, import_react2.useEffect)(() => {
+    isMounted.current = true;
+    void execute();
+    return () => {
+      isMounted.current = false;
+    };
+  }, [execute]);
+  return queryState[queryKey] ?? DEFAULT_QUERY_STATE_ENTRY;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SharedQuery,
+  sharedQuery,
+  useQuery
+});