@usethrottle/catalog 1.1.0 → 1.3.0

package/dist/chunk-CADIHOIR.js

@@ -0,0 +1,496 @@
+import {
+  CACHE_MAX_ENTRIES,
+  INDEXING_REVALIDATE_MS,
+  RATE_LIMIT_DEFAULT_RETRY_S,
+  RateLimitedError,
+  STALE_MS,
+  SUGGEST_DEBOUNCE_MS,
+  SUGGEST_MIN_CHARS
+} from "./chunk-3DLH56OX.js";
+
+// src/react/provider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
+
+// src/react/store.ts
+var HOOK_CALL = Symbol.for("@usethrottle/catalog.hookCall");
+var EMPTY = {
+  data: void 0,
+  error: void 0,
+  isValidating: false,
+  fetchedAt: void 0
+};
+var done = Promise.resolve();
+function createStore(client, options = {}) {
+  const now = options.now ?? Date.now;
+  const entries = /* @__PURE__ */ new Map();
+  let until = 0;
+  let cause;
+  let pauseTimer;
+  const pausedError = () => new RateLimitedError({
+    code: cause?.code ?? "RATE_LIMITED",
+    message: cause?.message ?? "Too many requests.",
+    statusCode: 429,
+    source: cause?.source ?? "catalog",
+    retryAfterSeconds: Math.ceil((until - now()) / 1e3)
+  });
+  const update = (entry, patch) => {
+    entry.snap = { ...entry.snap, ...patch };
+    for (const listener of [...entry.subs]) listener();
+  };
+  const touch = (key, initial, stale = false) => {
+    let entry = entries.get(key);
+    if (entry !== void 0) {
+      entries.delete(key);
+    } else {
+      entry = {
+        snap: initial === void 0 ? EMPTY : { ...EMPTY, data: initial, fetchedAt: stale ? void 0 : now() },
+        subs: /* @__PURE__ */ new Set(),
+        retries: 0
+      };
+      for (const [oldKey, old] of entries) {
+        if (entries.size < CACHE_MAX_ENTRIES) break;
+        if (old.subs.size === 0 && old.flight === void 0) {
+          clearTimeout(old.timer);
+          entries.delete(oldKey);
+        }
+      }
+    }
+    entries.set(key, entry);
+    return entry;
+  };
+  const later = (key, entry, ms) => {
+    entry.indexing = true;
+    clearTimeout(entry.timer);
+    entry.timer = setTimeout(() => {
+      if (entries.get(key) === entry && entry.subs.size > 0 && entry.run)
+        void fetchKey(key, entry.run, { force: true });
+      else entry.indexing = false;
+    }, ms);
+  };
+  function fetchKey(key, run, { force = false, staleMs = STALE_MS } = {}) {
+    const entry = touch(key);
+    entry.run = run;
+    if (entry.promise !== void 0 && !entry.flight?.signal.aborted)
+      return entry.promise;
+    if (now() < until) {
+      if (entry.snap.data === void 0 && entry.snap.error === void 0)
+        update(entry, { error: pausedError() });
+      return done;
+    }
+    const at = entry.snap.fetchedAt;
+    if (!force && at !== void 0 && now() - at < staleMs) return done;
+    const controller = new AbortController();
+    const box = entry.etag === void 0 ? {} : { etag: entry.etag };
+    const current = () => {
+      if (entry.flight !== controller) return false;
+      entry.flight = entry.promise = void 0;
+      if (!controller.signal.aborted) return true;
+      update(entry, { isValidating: false });
+      return false;
+    };
+    clearTimeout(entry.retry);
+    entry.flight = controller;
+    update(entry, { isValidating: true });
+    let pending;
+    try {
+      pending = run(client, {
+        signal: controller.signal,
+        [HOOK_CALL]: box
+      });
+    } catch (error) {
+      pending = Promise.reject(error);
+    }
+    const promise = pending.then(
+      (value) => {
+        if (!current()) return;
+        const result = box.result ?? {
+          notModified: false,
+          data: value,
+          etag: null
+        };
+        entry.etag = result.etag ?? void 0;
+        entry.retries = 0;
+        if (result.notModified) {
+          update(entry, {
+            error: void 0,
+            isValidating: false,
+            fetchedAt: now()
+          });
+          return;
+        }
+        if (result.data?.indexing === true) {
+          if (!entry.indexing) later(key, entry, INDEXING_REVALIDATE_MS);
+        } else {
+          entry.indexing = false;
+        }
+        update(entry, {
+          data: result.data,
+          error: void 0,
+          isValidating: false,
+          fetchedAt: now()
+        });
+      },
+      (error) => {
+        if (!current()) return;
+        const retryMs = (error.retryAfterSeconds ?? RATE_LIMIT_DEFAULT_RETRY_S) * 1e3;
+        if (error.statusCode === 429 && error.code === "RATE_LIMITED")
+          pause(now() + retryMs, error);
+        else if (error.code === "STOREFRONT_INDEXING") {
+          if (!entry.indexing) later(key, entry, retryMs);
+        } else if (entry.snap.data !== void 0 && (error.retryable && error.statusCode < 429 || error.statusCode >= 500) && entry.retries < 2) {
+          const wait = entry.retries++ ? 1e4 : 2e3;
+          entry.retry = setTimeout(() => {
+            if (entries.get(key) === entry && entry.subs.size > 0 && entry.run)
+              void fetchKey(key, entry.run, { force: true });
+          }, wait);
+        }
+        update(entry, { error, isValidating: false });
+      }
+    );
+    entry.promise = promise;
+    return promise;
+  }
+  function pause(untilMs, error) {
+    if (untilMs <= Math.max(until, now())) return;
+    until = untilMs;
+    cause = error;
+    clearTimeout(pauseTimer);
+    pauseTimer = setTimeout(() => {
+      until = 0;
+      for (const [key, entry] of [...entries]) {
+        if (entry.subs.size > 0 && entry.run)
+          void fetchKey(key, entry.run, { force: true });
+      }
+    }, untilMs - now());
+  }
+  function clear() {
+    for (const [key, entry] of [...entries]) {
+      clearTimeout(entry.timer);
+      clearTimeout(entry.retry);
+      entry.flight?.abort();
+      if (entry.subs.size === 0) {
+        entries.delete(key);
+      } else {
+        entry.etag = entry.flight = entry.promise = void 0;
+        entry.indexing = false;
+        update(entry, EMPTY);
+      }
+    }
+  }
+  return {
+    subscribe(key, listener) {
+      const entry = touch(key);
+      entry.subs.add(listener);
+      return () => {
+        entry.subs.delete(listener);
+        void done.then(() => {
+          if (entry.subs.size === 0) entry.flight?.abort();
+        });
+      };
+    },
+    get: (key, initial, stale) => key === null ? EMPTY : (entries.get(key) ?? (initial === void 0 ? void 0 : touch(key, initial, stale)))?.snap ?? EMPTY,
+    getServer(key, initial, stale) {
+      if (key === null || initial === void 0) return EMPTY;
+      const entry = entries.get(key) ?? touch(key, initial, stale);
+      return entry.server ?? (entry.server = { ...EMPTY, data: initial });
+    },
+    fetch: fetchKey,
+    clear,
+    pause,
+    pausedUntil: () => until > now() ? until : 0,
+    dispose() {
+      clearTimeout(pauseTimer);
+      until = 0;
+      clear();
+      for (const entry of entries.values()) entry.subs.clear();
+      entries.clear();
+    }
+  };
+}
+
+// src/react/provider.tsx
+import { jsx } from "react/jsx-runtime";
+function createMemoryCartStorage() {
+  let id = null;
+  const byCurrency = /* @__PURE__ */ new Map();
+  return {
+    get: () => id,
+    set: (value) => {
+      id = value;
+    },
+    remove: () => {
+      id = null;
+    },
+    getFor: (currency) => byCurrency.get(currency) ?? null,
+    setFor: (currency, value) => {
+      byCurrency.set(currency, value);
+    },
+    removeFor: (currency) => {
+      byCurrency.delete(currency);
+    }
+  };
+}
+var CatalogContext = createContext(null);
+function useCatalogContext() {
+  const value = useContext(CatalogContext);
+  if (value === null)
+    throw new Error("Catalog hooks must be used inside a <CatalogProvider>.");
+  return value;
+}
+function CatalogProvider(props) {
+  const { client, children, ...rest } = props;
+  const customerKey = props.customerKey ?? null;
+  const mounted = useRef(null);
+  const store = useMemo(() => {
+    const next = createStore(client);
+    next.pause(mounted.current?.pausedUntil() ?? 0);
+    return next;
+  }, [client, customerKey]);
+  useEffect(() => {
+    mounted.current = store;
+    return () => {
+      mounted.current = null;
+      void Promise.resolve().then(() => {
+        if (mounted.current !== store) store.dispose();
+      });
+    };
+  }, [store]);
+  const memory = useMemo(createMemoryCartStorage, []);
+  const cartStorage = rest.cartStorage ?? memory;
+  const shared = useRef({}).current;
+  const cart = useMemo(
+    () => ({ shared }),
+    [shared, client, rest.throttleBaseUrl]
+  );
+  const urls = rest.cartUrls;
+  const value = useMemo(
+    () => ({ ...rest, client, customerKey, store, cartStorage, cart }),
+    // `rest` is spread fresh each render; its fields are the dependencies.
+    [
+      client,
+      customerKey,
+      store,
+      cartStorage,
+      cart,
+      rest.customerCart,
+      rest.throttleBaseUrl,
+      rest.throttleCheckoutUrl,
+      urls?.returnUrl,
+      urls?.cancelUrl,
+      urls?.storefrontUrl
+    ]
+  );
+  cart.context = value;
+  shared.home = cart;
+  return /* @__PURE__ */ jsx(CatalogContext.Provider, { value, children });
+}
+function useCustomerKey() {
+  return useCatalogContext().customerKey;
+}
+function useCatalog() {
+  return useCatalogContext().client;
+}
+
+// src/react/use-query.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore } from "react";
+function canonical(value) {
+  if (Array.isArray(value)) return value.map(canonical);
+  if (value === null || typeof value !== "object") return value;
+  const out = {};
+  for (const name of Object.keys(value).sort()) {
+    const item = value[name];
+    if (item !== void 0) out[name] = canonical(item);
+  }
+  return out;
+}
+function catalogQueryKey(route, params) {
+  return `${route}:${JSON.stringify(canonical(params ?? null))}`;
+}
+var noop = () => {
+};
+var unsubscribe = () => noop;
+function useQuery(route, params, run, options = {}) {
+  const { store, customerKey } = useCatalogContext();
+  const key = run === null || options.enabled === false ? null : `${customerKey ?? ""}\0${catalogQueryKey(route, params)}`;
+  const first = useRef2({ store, key });
+  const initial = first.current.store === store && first.current.key === key ? options.initialData : void 0;
+  const subscribe = useCallback(
+    (listener) => key === null ? unsubscribe() : store.subscribe(key, listener),
+    [store, key]
+  );
+  const stale = customerKey !== null;
+  const snap = useSyncExternalStore(
+    subscribe,
+    () => store.get(key, initial, stale),
+    () => store.getServer(key, initial, stale)
+  );
+  const staleMs = options.staleTimeMs;
+  useEffect2(() => {
+    if (key !== null && run !== null)
+      void store.fetch(key, run, staleMs === void 0 ? {} : { staleMs });
+  }, [store, key, staleMs]);
+  const refetch = useCallback(
+    () => key === null || run === null ? Promise.resolve() : store.fetch(key, run, { force: true }),
+    [store, key]
+  );
+  const last = useRef2(void 0);
+  const previous = last.current;
+  const keep = options.keepPreviousData === true && key !== null && snap.data === void 0 && previous !== void 0 && previous.store === store && previous.key !== key;
+  const data = keep ? previous.data : snap.data;
+  useEffect2(() => {
+    if (snap.data !== void 0)
+      last.current = { store, key, data: snap.data, params };
+  });
+  return {
+    data,
+    dataFor: keep ? previous.params : params,
+    isPreviousData: keep,
+    isStale: snap.data !== void 0 && (snap.fetchedAt === void 0 || snap.error !== void 0),
+    error: snap.error,
+    isLoading: key !== null && data === void 0 && snap.error === void 0,
+    isValidating: snap.isValidating,
+    refetch
+  };
+}
+
+// src/react/hooks.ts
+import { useEffect as useEffect3, useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function defined(options) {
+  const out = {};
+  for (const name in options) {
+    if (options[name] !== void 0) out[name] = options[name];
+  }
+  return out;
+}
+function useProducts(query = {}, options) {
+  return useQuery(
+    "products",
+    query,
+    (client, call) => client.products.list(query, call),
+    options
+  );
+}
+function useProduct(handle, options = {}) {
+  const extra = defined({ include: options.include });
+  return useQuery(
+    "product",
+    { handle, ...extra },
+    handle === null ? null : (client, call) => client.products.get(handle, { ...call, ...extra }),
+    options
+  );
+}
+function useRelated(handle, options = {}) {
+  const extra = defined({ limit: options.limit });
+  return useQuery(
+    "related",
+    { handle, ...extra },
+    handle === null ? null : (client, call) => client.products.related(handle, { ...call, ...extra }),
+    options
+  );
+}
+function useDebounced(q, ms) {
+  const box = useMemo2(() => {
+    const listeners = /* @__PURE__ */ new Set();
+    let value = q;
+    return {
+      get: () => value,
+      set(next) {
+        value = next;
+        for (const listener of [...listeners]) listener();
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      }
+    };
+  }, []);
+  useEffect3(() => {
+    const timer = setTimeout(() => box.set(q), ms);
+    return () => clearTimeout(timer);
+  }, [box, q, ms]);
+  return useSyncExternalStore2(box.subscribe, box.get, box.get);
+}
+function useSuggest(q, options = {}) {
+  const settled = useDebounced(q, options.debounceMs ?? SUGGEST_DEBOUNCE_MS);
+  const extra = defined({ limit: options.limit });
+  const long = (value) => value.trim().length >= SUGGEST_MIN_CHARS;
+  return useQuery(
+    "suggest",
+    { q: settled, ...extra },
+    long(q) && long(settled) ? (client, call) => client.suggest(settled, { ...call, ...extra }) : null,
+    options
+  );
+}
+function useCategories(options = {}) {
+  const extra = defined({ depth: options.depth });
+  return useQuery(
+    "categories",
+    extra,
+    (client, call) => client.categories.tree({ ...call, ...extra }),
+    options
+  );
+}
+function useCollection(handle, options) {
+  return useQuery(
+    "collection",
+    { handle },
+    handle === null ? null : (client, call) => client.collections.get(handle, call),
+    options
+  );
+}
+function useReviews(handle, options = {}) {
+  const extra = defined({
+    sort: options.sort,
+    rating: options.rating,
+    limit: options.limit,
+    cursor: options.cursor
+  });
+  return useQuery(
+    "reviews",
+    { handle, ...extra },
+    handle === null ? null : (client, call) => client.reviews.list(handle, { ...call, ...extra }),
+    options
+  );
+}
+function useConfig(options) {
+  return useQuery(
+    "config",
+    null,
+    (client, call) => client.config(call),
+    options
+  );
+}
+function useFilterValues(key, query = {}, options) {
+  return useQuery(
+    "filterValues",
+    { key, query },
+    key === null ? null : (client, call) => client.filters.values(key, query, call),
+    options
+  );
+}
+
+export {
+  createMemoryCartStorage,
+  useCatalogContext,
+  CatalogProvider,
+  useCustomerKey,
+  useCatalog,
+  catalogQueryKey,
+  useQuery,
+  defined,
+  useProducts,
+  useProduct,
+  useRelated,
+  useSuggest,
+  useCategories,
+  useCollection,
+  useReviews,
+  useConfig,
+  useFilterValues
+};