@occluze/tether 0.6.8 → 0.7.1

package/src/search.js

@@ -1,323 +0,0 @@
-/**
- * Search as you type (Shopify predictive search). Optional part: loaded only on pages with [tether-search].
- *
- *   <form tether-search action="/search">            <!-- Enter: your full results page -->
- *     <input tether-search-input name="q" type="search" placeholder="Search">
- *     <div tether-search-results>
- *       <div tether-search-products><a><img tether-search-bind="image" max-width="120"><span tether-search-bind="title"></span> <span tether-search-bind="price"></span></a></div>
- *       <div tether-search-queries><a><span tether-search-bind="text"></span></a></div>
- *       <div tether-search-collections><a><span tether-search-bind="title"></span></a></div>
- *       <p tether-show="search-empty">No results</p>
- *     </div>
- *   </form>
- *
- * Each list's first child is the template. The root gets is-open while there are results (or none) to show, and
- * tether-search-state="idle|loading|ready|empty|error". Arrow keys move through the results, Escape closes.
- * tether-search-limit (default 6), tether-search-min (characters, default 2).
- */
-import { cfg, log, reportError } from './config.js';
-import { gql } from './client.js';
-import { attr, sel, get, qsa, setText, setImage, repeat, show, formatMoney, productUrl, emit } from './dom.js';
-import { within } from './mounting.js';
-/** @import { Money } from './shopify-values.js' */
-
-/** @typedef {{ url: string, altText: string | null }} SearchImage */
-/**
- * @typedef {object} SearchProduct
- * @property {string} id
- * @property {string} handle
- * @property {string} title
- * @property {boolean} availableForSale
- * @property {SearchImage | null} featuredImage
- * @property {{ minVariantPrice: Money }} priceRange
- */
-/** @typedef {{ handle: string, title: string, image: SearchImage | null }} SearchCollection */
-/** @typedef {{ text: string }} SearchQuery */
-/** @typedef {{ products: SearchProduct[], collections: SearchCollection[], queries: SearchQuery[] }} SearchResults */
-/** @typedef {'idle' | 'loading' | 'ready' | 'empty' | 'error'} SearchState */
-/** @typedef {{ title?: string, price?: string, text?: string, image?: SearchImage | null }} BindValues */
-
-const QUERY = `query TetherPredictive($q: String!, $limit: Int!) {
-  predictiveSearch(query: $q, limit: $limit, limitScope: EACH, types: [PRODUCT, COLLECTION, QUERY]) {
-    products { id handle title availableForSale featuredImage { url altText } priceRange { minVariantPrice { amount currencyCode } } }
-    collections { handle title image { url altText } }
-    queries { text }
-  }
-}`;
-
-const DEFAULT_LIMIT = 6;
-const DEFAULT_MIN_CHARACTERS = 2;
-const DEFAULT_ACTION = '/search';
-
-/** @type {WeakSet<Element>} */
-const mounted = new WeakSet();
-let searchBoxCount = 0;
-
-/**
- * @param {Element} el
- * @param {string} name
- * @param {number} fallback
- * @returns {number} The attribute as an integer; `fallback` when it is missing, zero or not a number.
- */
-function integerAttribute(el, name, fallback) {
-  return parseInt(get(el, name) || '', 10) || fallback;
-}
-
-/**
- * @param {Element} node
- * @returns {Element | null} `node` when it is a link, else its first link.
- */
-const linkIn = (node) => (node.tagName === 'A' ? node : node.querySelector('a'));
-
-/**
- * @param {HTMLElement} node
- * @param {BindValues} values
- */
-function bindValues(node, values) {
-  qsa(node, sel('search-bind')).forEach((el) => {
-    const field = get(el, 'search-bind');
-    if (field === 'image') setImage(el, values.image?.url, values.image?.altText || values.title);
-    else if (field === 'title' || field === 'price' || field === 'text') {
-      if (values[field] != null) setText(el, values[field]);
-    }
-  });
-}
-
-/**
- * @param {Element} node
- * @param {string} href
- */
-function linkOption(node, href) {
-  const link = linkIn(node);
-  if (!link) return;
-  link.setAttribute('href', href);
-  link.setAttribute('role', 'option');
-}
-
-/** One `[tether-search]` root: its input, its results and the search in flight. */
-class SearchBox {
-  /**
-   * @param {HTMLElement} root
-   * @param {HTMLInputElement} input
-   * @param {HTMLElement} results
-   */
-  constructor(root, input, results) {
-    this.root = root;
-    this.input = input;
-    this.results = results;
-    this.limit = integerAttribute(root, 'search-limit', DEFAULT_LIMIT);
-    this.minCharacters = integerAttribute(root, 'search-min', DEFAULT_MIN_CHARACTERS);
-    if (!results.id) {
-      searchBoxCount += 1;
-      results.id = `${cfg.prefix}-search-${searchBoxCount}`;
-    }
-    this.resultsId = results.id;
-    /** Counts searches, so only the latest one renders. */
-    this.searchNumber = 0;
-    /** @type {ReturnType<typeof setTimeout> | undefined} */
-    this.timer = undefined;
-    this.lastTerm = '';
-    /** @type {Map<string, SearchResults | null>} Results per term, for typing back and forth. */
-    this.cache = new Map();
-    this.setUpAria();
-    this.listen();
-  }
-
-  setUpAria() {
-    this.input.setAttribute('role', 'combobox');
-    this.input.setAttribute('aria-autocomplete', 'list');
-    this.input.setAttribute('aria-controls', this.resultsId);
-    this.input.setAttribute('aria-expanded', 'false');
-    this.input.setAttribute('autocomplete', 'off');
-    if (!this.results.hasAttribute('role')) this.results.setAttribute('role', 'listbox');
-    this.results.hidden = true;
-  }
-
-  listen() {
-    this.input.addEventListener('input', () => {
-      const term = this.input.value.trim();
-      if (term === this.lastTerm) return;
-      this.lastTerm = term;
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => void this.search(term), cfg.searchDelay);
-    });
-    this.input.addEventListener('focus', () => {
-      if (this.input.value.trim().length >= this.minCharacters && this.options().length) this.open(true);
-    });
-    this.input.addEventListener('keydown', (event) => {
-      this.onKeydown(event);
-    });
-    document.addEventListener('click', (event) => {
-      // A click event's target is always a node.
-      if (!this.root.contains(/** @type {Node | null} */ (event.target))) this.open(false);
-    });
-  }
-
-  /** @param {SearchState} state */
-  setState(state) {
-    this.root.setAttribute(attr('search-state'), state);
-  }
-
-  /** @param {boolean} open */
-  open(open) {
-    this.root.classList.toggle('is-open', open);
-    this.results.hidden = !open;
-    this.input.setAttribute('aria-expanded', String(open));
-    if (!open) this.input.removeAttribute('aria-activedescendant');
-  }
-
-  options() {
-    return qsa(this.results, '[role="option"]');
-  }
-
-  /**
-   * @param {string} term
-   * @returns {Promise<SearchResults | null>}
-   */
-  async fetchResults(term) {
-    const cached = this.cache.get(term);
-    if (cached) return cached;
-    /** @type {{ predictiveSearch: SearchResults | null }} */
-    const data = await gql(QUERY, { q: term, limit: this.limit });
-    this.cache.set(term, data.predictiveSearch);
-    return data.predictiveSearch;
-  }
-
-  /** @param {string} term */
-  async search(term) {
-    this.searchNumber += 1;
-    const searchNumber = this.searchNumber;
-    if (term.length < this.minCharacters) {
-      this.open(false);
-      this.setState('idle');
-      return;
-    }
-    this.setState('loading');
-    try {
-      const results = await this.fetchResults(term);
-      if (searchNumber === this.searchNumber) this.render(results, term);
-    } catch (error) {
-      // A newer search owns the state and reports its own failure.
-      if (searchNumber !== this.searchNumber) {
-        log('a superseded search failed', error);
-        return;
-      }
-      this.setState('error');
-      reportError(error, 'search');
-    }
-  }
-
-  /**
-   * @template Item
-   * @param {string} name The list attribute, e.g. `search-products`.
-   * @param {readonly Item[]} items
-   * @param {(node: HTMLElement, item: Item) => void} render
-   */
-  fillList(name, items, render) {
-    qsa(this.results, sel(name)).forEach((list) => {
-      repeat(list, items, render);
-      show(list, items.length > 0);
-    });
-  }
-
-  /** @param {string} text */
-  queryUrl(text) {
-    const action = this.root.getAttribute('action') || DEFAULT_ACTION;
-    const separator = action.includes('?') ? '&' : '?';
-    return `${action}${separator}${this.input.name || 'q'}=${encodeURIComponent(text)}`;
-  }
-
-  /**
-   * @param {SearchResults | null} results
-   * @param {string} term
-   */
-  render(results, term) {
-    const products = results?.products ?? [];
-    const collections = results?.collections ?? [];
-    const queries = (results?.queries ?? []).filter((query) => query.text.toLowerCase() !== term.toLowerCase());
-    this.fillList('search-products', products, (node, product) => {
-      const price = formatMoney(product.priceRange.minVariantPrice);
-      bindValues(node, { title: product.title, price, image: product.featuredImage });
-      linkOption(node, productUrl(product.handle, product.id));
-      node.classList.toggle('is-sold-out', !product.availableForSale);
-    });
-    this.fillList('search-collections', collections, (node, collection) => {
-      bindValues(node, { title: collection.title, image: collection.image });
-      linkOption(node, `${(cfg.collectionPath || '/collection').replace(/\/$/, '')}/${collection.handle}`);
-    });
-    this.fillList('search-queries', queries, (node, query) => {
-      bindValues(node, { text: query.text });
-      linkIn(node)?.setAttribute('href', this.queryUrl(query.text));
-    });
-    const count = products.length + collections.length + queries.length;
-    this.showCount(count);
-    this.setState(count ? 'ready' : 'empty');
-    this.open(true);
-    emit('search', { term, products, collections, queries }, this.root);
-  }
-
-  /** @param {number} count */
-  showCount(count) {
-    qsa(this.root, sel('show')).forEach((el) => {
-      const condition = get(el, 'show');
-      if (condition === 'search-empty') show(el, count === 0);
-      if (condition === 'search-results') show(el, count > 0);
-    });
-    this.options().forEach((option, index) => {
-      option.id ||= `${this.resultsId}-${index}`;
-      option.setAttribute('aria-selected', 'false');
-    });
-  }
-
-  /**
-   * @param {HTMLElement[]} options
-   * @param {number} index
-   */
-  highlight(options, index) {
-    options.forEach((option, optionIndex) => {
-      option.setAttribute('aria-selected', String(optionIndex === index));
-    });
-    const option = options[index];
-    if (!option) return;
-    this.input.setAttribute('aria-activedescendant', option.id);
-    // jsdom has no scrollIntoView.
-    /** @type {Partial<Pick<HTMLElement, 'scrollIntoView'>>} */ (option).scrollIntoView?.({ block: 'nearest' });
-  }
-
-  /** @param {KeyboardEvent} event */
-  onKeydown(event) {
-    const options = this.options();
-    const current = options.findIndex((option) => option.getAttribute('aria-selected') === 'true');
-    if (event.key === 'ArrowDown' && options.length) {
-      event.preventDefault();
-      this.open(true);
-      this.highlight(options, (current + 1) % options.length);
-    } else if (event.key === 'ArrowUp' && options.length) {
-      event.preventDefault();
-      this.highlight(options, current <= 0 ? options.length - 1 : current - 1);
-    } else if (event.key === 'Enter' && current >= 0) {
-      event.preventDefault();
-      options[current]?.click();
-    } else if (event.key === 'Escape') {
-      this.open(false);
-    }
-  }
-}
-
-/**
- * Sets up every `[tether-search]` in `root` (and `root` itself) once.
- *
- * @param {ParentNode & Partial<Pick<Element, 'matches'>>} [root]
- */
-export function mountSearch(root = document) {
-  for (const el of within(root, sel('search'))) {
-    if (mounted.has(el)) continue;
-    mounted.add(el);
-    // The markup names an input element; a site without one gets the first input.
-    const input = /** @type {HTMLInputElement | null} */ (
-      el.querySelector(sel('search-input')) ?? el.querySelector('input')
-    );
-    const results = /** @type {HTMLElement | null} */ (el.querySelector(sel('search-results')));
-    if (input && results) new SearchBox(el, input, results);
-  }
-}

package/src/selling-plans.js

@@ -1,154 +0,0 @@
-/**
- * Shopify selling plans (subscriptions): which plans a product and a variant have, and what each costs. Pure, no DOM,
- * shared by the browser script and the server helpers.
- */
-/** @import { Money } from './shopify-values.js' */
-/** @import { SellingPlan, SellingPlanGroup, SellingPlanAllocation } from './fragments.js' */
-
-/** @typedef {SellingPlan & { group: SellingPlanGroup }} PlanInGroup A plan with the group it belongs to. */
-/** @typedef {{ sellingPlanGroups?: { nodes: SellingPlanGroup[] } | null }} ProductWithPlans */
-/**
- * A variant as far as plans go. A cart line's variant has no allocations.
- *
- * @typedef {{ price: Money, sellingPlanAllocations?: { nodes: SellingPlanAllocation[] } | null }} VariantWithPlans
- */
-/**
- * @typedef {{ type: 'percentage', value: number } | { type: 'amount', value: Money } | { type: 'price', value: Money }}
- *   PlanAdjustment
- */
-
-/**
- * @param {unknown} value A gid, a numeric id, or anything else.
- * @param {string} type The Shopify type, e.g. `ProductVariant`.
- * @returns {string | null} The gid of a numeric id; a gid or other value as written; `null` when empty.
- */
-export function toGid(value, type) {
-  const text = typeof value === 'string' || typeof value === 'number' ? String(value).trim() : '';
-  if (!text) return null;
-  if (text.startsWith('gid://')) return text;
-  if (/^\d+$/.test(text)) return `gid://shopify/${type}/${text}`;
-  return text;
-}
-
-export const GID = {
-  /** @param {unknown} value */
-  product: (value) => toGid(value, 'Product'),
-  /** @param {unknown} value */
-  variant: (value) => toGid(value, 'ProductVariant'),
-  /** @param {unknown} value */
-  sellingPlan: (value) => toGid(value, 'SellingPlan'),
-};
-
-/**
- * @param {ProductWithPlans | null | undefined} product
- * @returns {PlanInGroup[]} All plans of the product, flattened.
- */
-export function allPlans(product) {
-  const groups = product?.sellingPlanGroups?.nodes ?? [];
-  return groups.flatMap((group) => group.sellingPlans.nodes.map((plan) => ({ ...plan, group })));
-}
-
-/** @param {ProductWithPlans | null | undefined} product */
-export function hasPlans(product) {
-  return allPlans(product).length > 0;
-}
-
-/**
- * @param {VariantWithPlans | null | undefined} variant
- * @param {string | null | undefined} planId
- * @returns {SellingPlanAllocation | null} The variant's allocation on the plan; `null` when the variant isn't in it.
- */
-export function allocationFor(variant, planId) {
-  if (!variant || !planId) return null;
-  const allocations = variant.sellingPlanAllocations?.nodes ?? [];
-  return allocations.find((allocation) => allocation.sellingPlan.id === planId) ?? null;
-}
-
-/**
- * @param {ProductWithPlans | null | undefined} product
- * @param {VariantWithPlans | null | undefined} variant
- * @returns {PlanInGroup[]} The plans this variant can be bought on.
- */
-export function plansForVariant(product, variant) {
-  return allPlans(product).filter((plan) => allocationFor(variant, plan.id));
-}
-
-/**
- * @param {VariantWithPlans | null | undefined} variant
- * @param {string | null | undefined} planId
- * @returns {Money | null} The price per delivery on the plan; the one-time price when the variant isn't on it.
- */
-export function planPrice(variant, planId) {
-  const adjustment = allocationFor(variant, planId)?.priceAdjustments[0];
-  return adjustment?.perDeliveryPrice ?? adjustment?.price ?? variant?.price ?? null;
-}
-
-/**
- * @param {VariantWithPlans | null | undefined} variant
- * @param {string | null | undefined} planId
- * @returns {Money | null} What the customer pays at checkout on the plan (prepaid plans charge more up front).
- */
-export function planCheckoutCharge(variant, planId) {
-  const allocation = allocationFor(variant, planId);
-  return allocation?.checkoutChargeAmount ?? allocation?.priceAdjustments[0]?.price ?? variant?.price ?? null;
-}
-
-/**
- * @param {VariantWithPlans | null | undefined} variant
- * @param {string | null | undefined} planId
- * @returns {{ amount: Money | null, percentage: number }} What the plan saves on the one-time price; no amount and
- *   0% when it saves nothing.
- */
-export function planSavings(variant, planId) {
-  const oneTime = parseFloat(variant?.price.amount ?? '');
-  const onPlan = parseFloat(planPrice(variant, planId)?.amount ?? '');
-  if (!variant || !Number.isFinite(oneTime) || !Number.isFinite(onPlan) || oneTime <= 0 || onPlan >= oneTime) {
-    return { amount: null, percentage: 0 };
-  }
-  return {
-    amount: { amount: (oneTime - onPlan).toFixed(2), currencyCode: variant.price.currencyCode },
-    percentage: Math.round((1 - onPlan / oneTime) * 100),
-  };
-}
-
-/**
- * @param {Pick<SellingPlan, 'priceAdjustments'> | null | undefined} plan
- * @returns {PlanAdjustment | null} The plan's own discount, whatever the variant: a percentage, a fixed amount off or
- *   a fixed price.
- */
-export function planAdjustment(plan) {
-  const value = plan?.priceAdjustments[0]?.adjustmentValue;
-  if (!value) return null;
-  switch (value.__typename) {
-    case 'SellingPlanPercentagePriceAdjustment':
-      return { type: 'percentage', value: value.adjustmentPercentage };
-    case 'SellingPlanFixedAmountPriceAdjustment':
-      return { type: 'amount', value: value.adjustmentAmount };
-    case 'SellingPlanFixedPriceAdjustment':
-      return { type: 'price', value: value.price };
-    default:
-      // An adjustment type newer than the API version Tether was written for.
-      return null;
-  }
-}
-
-/**
- * Finds a plan by id, numeric id, name or option value (case-insensitive), so Webflow editors can write
- * `tether-default-plan="Every month"`.
- *
- * @param {ProductWithPlans | null | undefined} product
- * @param {string | null | undefined} ref
- * @returns {PlanInGroup | null}
- */
-export function findPlan(product, ref) {
-  if (!ref) return null;
-  const plans = allPlans(product);
-  const gid = GID.sellingPlan(ref);
-  const needle = ref.trim().toLowerCase();
-  return (
-    plans.find((plan) => plan.id === gid) ??
-    plans.find((plan) => plan.name.toLowerCase() === needle) ??
-    plans.find((plan) => plan.options.some((option) => option.value.toLowerCase() === needle)) ??
-    null
-  );
-}

package/src/server.js

@@ -1,215 +0,0 @@
-/**
- * `@occluze/tether/server`: Shopify product data at build time or on the server (Astro, Eleventy, Node, Cloudflare
- * Workers). No browser APIs. It sends the browser script's own queries, so products handed over with `hydrate()` are
- * exactly what the script expects and need no request of their own.
- *
- *   import { createStorefront } from '@occluze/tether/server';
- *   const shop = createStorefront({ domain, token, country: 'NL' });
- *   const product = await shop.getProduct('coffee-box');
- *   const all = await shop.allProducts();
- */
-import { DEFAULTS, resolveConfig } from './config.js';
-import { request, withContext, TetherError } from './client.js';
-import * as plans from './selling-plans.js';
-import { imageUrl, formatPercent } from './dom.js';
-import { initialState } from './initial.js';
-import { STORE_ENV_NAMES, formatMoney, productKey, productUrl as productUrlFor } from './shopify-values.js';
-import { createCatalog } from './storefront/catalog.js';
-import { jsonLdData, scriptJson } from './storefront/json-ld.js';
-/** @import { TetherConfig, TetherOptions } from './config.js' */
-/** @import { Product } from './fragments.js' */
-/** @import { Money } from './shopify-values.js' */
-/** @import { InitialOptions } from './initial.js' */
-/** @import { JsonLdOptions } from './storefront/json-ld.js' */
-
-export { imageUrl, initialState, formatPercent, formatMoney, productKey };
-
-export { TetherError, plans, withContext };
-
-/**
- * @typedef {object} ServerOptions The options only a storefront has.
- * @property {typeof fetch} [fetch] Replaces the global `fetch` (tests, caching).
- * @property {number} [pageSize] Products per request for `allProducts()` (default 25).
- * @property {string} [siteUrl] The site's address, for product URLs in `jsonLd()` without `url`.
- */
-
-/**
- * @typedef {TetherOptions & ServerOptions & Record<string, unknown>} StorefrontOptions The config options, or an
- *   `import.meta.env` spread into them: its `PUBLIC_SHOPIFY_*` names give the domain and token, its other keys are
- *   ignored.
- */
-
-/** @typedef {TetherConfig & ServerOptions} ServerConfig */
-
-/** @typedef {{ card?: boolean, images?: number }} HydrateOptions */
-
-const DEFAULT_PAGE_SIZE = 25;
-/** The images a card keeps: the main one and a hover image (`tether-bind="image:2"`). */
-const DEFAULT_CARD_IMAGES = 2;
-/** The version of the `data-tether-hydrate` payload, for the browser script reading it. */
-const HYDRATE_VERSION = 1;
-
-/**
- * @param {string} handle
- * @param {{ productPath?: string, id?: string }} [options]
- * @returns {string} `productPath` `/products` → `/products/<handle>`; templates with `{handle}` and `{id}` work too.
- */
-export function productUrl(handle, { productPath = DEFAULTS.productPath, id } = {}) {
-  return productUrlFor(productPath, handle, id);
-}
-
-/**
- * @param {Record<string, unknown>} options
- * @param {readonly string[]} names
- * @returns {string} The first of the `names` set in `options`, `''` without one.
- */
-function fromEnv(options, names) {
-  for (const name of names) {
-    const value = options[name];
-    if (typeof value === 'string' && value) return value;
-  }
-  return '';
-}
-
-/**
- * @param {StorefrontOptions} options
- * @returns {ServerConfig} The config options of `options`, resolved and validated as the browser's are, with the
- *   domain and token from the environment names when they aren't set.
- */
-function storefrontConfig(options) {
-  /** @type {Record<string, unknown>} */
-  const known = {};
-  for (const [key, value] of Object.entries(options)) {
-    if (key in DEFAULTS) known[key] = value;
-  }
-  const domain = typeof options.domain === 'string' && options.domain ? options.domain : '';
-  const token = typeof options.token === 'string' && options.token ? options.token : '';
-  /** @type {ServerConfig} */
-  const conf = resolveConfig({
-    // Only config keys: `resolveConfig` checks each value.
-    .../** @type {TetherOptions} */ (known),
-    domain: domain || fromEnv(options, STORE_ENV_NAMES.domain),
-    token: token || fromEnv(options, STORE_ENV_NAMES.token),
-  });
-  if (options.fetch) conf.fetch = options.fetch;
-  if (options.pageSize !== undefined) conf.pageSize = options.pageSize;
-  if (options.siteUrl !== undefined) conf.siteUrl = options.siteUrl;
-  return conf;
-}
-
-/**
- * @param {number | undefined} pageSize
- * @returns {number} `pageSize` when it is a positive integer, else the default.
- */
-const validPageSize = (pageSize) =>
-  typeof pageSize === 'number' && Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE;
-
-/**
- * A product for a list (home, collections, recommendations): without descriptions and variant images, and only its
- * first `images` images. Prices, stock and plans per variant stay.
- *
- * @param {Product} product
- * @param {number} images
- * @returns {Product}
- */
-function cardOf(product, images) {
-  return {
-    ...product,
-    description: '',
-    descriptionHtml: '',
-    images: { nodes: product.images.nodes.slice(0, Math.max(1, images)) },
-    variants: { nodes: product.variants.nodes.map((variant) => ({ ...variant, image: null })) },
-  };
-}
-
-/**
- * A storefront: the store's products and collections for the server, and the tags that hand them to the page.
- *
- * @param {StorefrontOptions} [options]
- * @throws {TetherError} `NOT_CONFIGURED` without a domain and a token.
- */
-export function createStorefront(options = {}) {
-  const conf = storefrontConfig(options);
-  if (!conf.domain || !conf.token) {
-    throw new TetherError(
-      'createStorefront needs domain and token: pass them, or import.meta.env with PUBLIC_SHOPIFY_DOMAIN and PUBLIC_SHOPIFY_STOREFRONT_TOKEN',
-      { code: 'NOT_CONFIGURED' },
-    );
-  }
-  const catalog = createCatalog(conf, validPageSize(conf.pageSize));
-  const site = { productPath: conf.productPath, siteUrl: conf.siteUrl };
-
-  /**
-   * A `<script type="application/json" data-tether-hydrate>` tag that hands products to the browser script: it renders
-   * them at once, without a request of its own, then refreshes prices and stock once in the background. Astro:
-   * `<Fragment set:html={shop.hydrate(products)} />`.
-   *
-   * @param {Product | null | undefined | (Product | null | undefined)[]} products
-   * @param {HydrateOptions} [options] `card: true` for lists: about 40% smaller (see `cardOf`). The full product
-   *   comes with the background refresh.
-   */
-  function hydrate(products, { card = false, images = DEFAULT_CARD_IMAGES } = {}) {
-    const present = (Array.isArray(products) ? products : [products]).filter((product) => product != null);
-    const payload = {
-      v: HYDRATE_VERSION,
-      at: new Date().toISOString(),
-      country: conf.country || null,
-      language: conf.language || null,
-      products: card ? present.map((product) => cardOf(product, images)) : present,
-    };
-    return `<script type="application/json" data-tether-hydrate>${scriptJson(payload)}</script>`;
-  }
-
-  /**
-   * @param {Product | null | undefined} product
-   * @param {JsonLdOptions} [jsonLdOptions]
-   * @returns {string} The `<script type="application/ld+json">` tag, `''` without a product.
-   */
-  function jsonLd(product, jsonLdOptions = {}) {
-    if (!product) return '';
-    return `<script type="application/ld+json">${scriptJson(jsonLdData(product, jsonLdOptions, site))}</script>`;
-  }
-
-  return {
-    config: conf,
-    /**
-     * @template T
-     * @param {string} query
-     * @param {Record<string, unknown>} [variables]
-     * @param {{ context?: boolean }} [requestOptions]
-     * @returns {Promise<T>}
-     */
-    query: (query, variables, requestOptions) => request(conf, query, variables, requestOptions),
-    ...catalog,
-    hydrate,
-    /**
-     * @param {Money | null | undefined} money
-     * @param {string | undefined} [locale]
-     */
-    formatMoney: (money, locale = conf.locale) => formatMoney(money, locale),
-    /**
-     * @param {number} percentage
-     * @param {string | undefined} [locale]
-     */
-    formatPercent: (percentage, locale = conf.locale) => formatPercent(percentage, locale),
-    imageUrl,
-    jsonLd,
-    /**
-     * @param {Product | null | undefined} product
-     * @param {JsonLdOptions} [jsonLdOptions]
-     */
-    jsonLdData: (product, jsonLdOptions = {}) => jsonLdData(product, jsonLdOptions, site),
-    /**
-     * @param {Product | null | undefined} product
-     * @param {InitialOptions} [initialOptions]
-     */
-    initialState: (product, initialOptions = {}) =>
-      initialState(product, { defaultPurchase: conf.defaultPurchase, lowStock: conf.lowStock, ...initialOptions }),
-    /**
-     * @param {string} handle
-     * @param {{ productPath?: string, id?: string }} [urlOptions]
-     */
-    productUrl: (handle, urlOptions = {}) => productUrl(handle, { productPath: conf.productPath, ...urlOptions }),
-    plans,
-  };
-}