@occluze/tether 0.6.8 → 0.7.0

package/src/config.js

@@ -1,349 +0,0 @@
-/**
- * The runtime configuration. `cfg` is one shared object that every browser module imports; `configure()` replaces its
- * contents in place, so those imports see the new values, and `setCountry()` changes its market keys the same way.
- * Options that end up in query text or attribute names are validated here, once, where they arrive.
- */
-/** @import { Money } from './shopify-values.js' */
-
-/**
- * @typedef {object} MarketsConfig Where the visitor's market comes from (`markets.js`).
- * @property {boolean | ('saved' | 'server' | 'webflow')[]} [detect] true: every source; a list: only those.
- * @property {Record<string, { country?: string, language?: string, locale?: string }>} [locales] Webflow locale
- *   (subdirectory or html lang) to market.
- * @property {string} [cookie] The cookie a server sets with the visitor's country.
- * @property {boolean} [remember] Remember the visitor's choice (default true).
- * @property {boolean} [strict] With `locales`: ignore an html lang that isn't in the map.
- */
-
-/**
- * @typedef {object} AnalyticsConfig The optional analytics part.
- * @property {boolean | string} [dataLayer] GA4/GTM events, into `window.dataLayer` or the named array.
- * @property {boolean | { consent?: 'no-banner' | 'default-banner' | 'custom-banner', proxy?: string }} [shopify]
- *   Shopify's own analytics.
- * @property {(name: string, data: Record<string, unknown>) => void} [onEvent]
- */
-
-/**
- * @typedef {object} AccountConfig The optional customer accounts part.
- * @property {string} [clientId] Browser mode: the Customer Account API client id.
- * @property {string} [server] Server mode: the Worker's account routes, a URL or a path on this site.
- * @property {string} [orderUrl] The site's own order page, with `{id}` for the numeric order id.
- * @property {string} [subscriptionsUrl] Shopify's subscription management page.
- * @property {string} [paymentUrl] A separate page for payment methods (default `subscriptionsUrl`).
- * @property {string} [callbackUrl] Where Shopify sends the visitor after login (default the current page).
- * @property {string} [logoutUrl] Where Shopify sends the visitor after logout (default the home page).
- * @property {boolean} [remember] Keep the login across tabs and restarts (localStorage, not sessionStorage).
- * @property {string} [tokenUrl] The site's own token endpoint, for when the browser can't call Shopify's.
- * @property {string} [shopDomain] The *.myshopify.com domain, when `domain` is another one.
- * @property {string} [locale] The language of Shopify's login pages.
- * @property {(url: string) => void} [navigate] Replaces `location.assign` for the login redirect (popups, tests).
- */
-
-/** @typedef {{ namespace: string, key: string }} MetafieldIdentifier */
-/** @typedef {string | MetafieldIdentifier} MetafieldRef `'namespace.key'` or the identifier itself. */
-/** @typedef {{ code: string, message: string, target?: string }} CartWarning Shopify's note on a cart change. */
-/** @typedef {'_self' | '_blank'} CheckoutTarget */
-/** @typedef {'one-time' | 'subscription'} PurchaseKind */
-
-/**
- * @typedef {object} TetherConfig Every option, with its default filled in.
- * @property {string} domain The store's domain, without protocol or path.
- * @property {string} token The public Storefront API access token.
- * @property {string} apiVersion A dated Shopify API version.
- * @property {string | undefined} country An ISO country code for `@inContext(country:)`.
- * @property {string | undefined} language A language for `@inContext(language:)`.
- * @property {string | undefined} locale An `Intl` locale for money and dates.
- * @property {MarketsConfig | null} markets
- * @property {string} prefix The attribute prefix: `tether` reads `tether-product`, `tether-bind`.
- * @property {string} productPath A folder (`/product`) or a template with `{handle}` / `{id}`.
- * @property {string} collectionPath
- * @property {MetafieldRef[]} metafields The product metafields to fetch.
- * @property {number} imagesFirst
- * @property {number} variantsFirst
- * @property {number} sellingPlanGroupsFirst
- * @property {number} sellingPlansFirst
- * @property {number} collectionFirst
- * @property {number} retries Retries of a request that failed on the network, a 429/5xx or Shopify's throttling.
- * @property {boolean} revalidate Refresh server-rendered products once in the background.
- * @property {string} storageKey The localStorage key of the cart id (default `<prefix>:cart:<domain>`).
- * @property {string} cartDrawerOpenClass
- * @property {boolean} openCartOnAdd
- * @property {boolean} cartFocus Move focus into the open cart, keep Tab inside it, restore it on close.
- * @property {CheckoutTarget} checkoutTarget
- * @property {PurchaseKind} defaultPurchase
- * @property {boolean} variantUrl `?variant=` follows the visitor's choice on the page's main product.
- * @property {number} maxAge Seconds a Shopify answer may be cached; 0 leaves it to Shopify, which can be hours.
- * @property {number} lowStock `tether-show="low-stock"` at this many or fewer (needs inventory access).
- * @property {number} searchDelay Milliseconds the search part waits after the last keystroke.
- * @property {boolean} autoMount Mount the document on DOMContentLoaded.
- * @property {boolean} observe Mount elements added later (CMS load more, filters).
- * @property {boolean} astro Mount on Astro's `astro:page-load` and close the cart on navigation.
- * @property {string | null} partsUrl The folder of the optional parts, for the `<script>` build.
- * @property {AnalyticsConfig | null} analytics
- * @property {AccountConfig | null} account
- * @property {((warning: CartWarning) => string | null | undefined) | null} warningText The site's text for a cart
- *   warning; nothing keeps Shopify's.
- * @property {((money: Money, locale: string | undefined) => string) | null} formatMoney
- * @property {((reason: string) => void) | null} onLayoutChange Default: `ScrollTrigger.refresh()` when present.
- * @property {((drawers: HTMLElement[]) => void) | null} onCartOpen
- * @property {((drawers: HTMLElement[]) => void) | null} onCartClose
- * @property {((node: HTMLElement) => void) | null} onLineEnter
- * @property {((node: HTMLElement, done: () => void) => void) | null} onLineLeave Animates a line out, then calls
- *   `done()`.
- * @property {((element: HTMLElement, previousText: string) => void) | null} onValueChange
- * @property {((error: unknown, context: string) => void) | null} onError Every failure that reaches the visitor.
- * @property {boolean} debug
- */
-
-/** @typedef {{ [Key in keyof TetherConfig]?: TetherConfig[Key] }} TetherOptions */
-
-/** @type {Readonly<TetherConfig>} */
-export const DEFAULTS = {
-  domain: '',
-  token: '',
-  apiVersion: '2026-07',
-  country: undefined,
-  language: undefined,
-  locale: undefined,
-  markets: null,
-  prefix: 'tether',
-  productPath: '/product',
-  collectionPath: '/collection',
-  metafields: [],
-  imagesFirst: 25,
-  variantsFirst: 100,
-  sellingPlanGroupsFirst: 10,
-  sellingPlansFirst: 25,
-  collectionFirst: 24,
-  retries: 2,
-  revalidate: true,
-  storageKey: '',
-  cartDrawerOpenClass: 'is-open',
-  openCartOnAdd: true,
-  cartFocus: true,
-  checkoutTarget: '_self',
-  defaultPurchase: 'one-time',
-  variantUrl: false,
-  maxAge: 60,
-  lowStock: 5,
-  searchDelay: 150,
-  autoMount: true,
-  observe: false,
-  astro: true,
-  partsUrl: null,
-  analytics: null,
-  account: null,
-  warningText: null,
-  formatMoney: null,
-  onLayoutChange: null,
-  onCartOpen: null,
-  onCartClose: null,
-  onLineEnter: null,
-  onLineLeave: null,
-  onValueChange: null,
-  onError: null,
-  debug: false,
-};
-
-/** @type {TetherConfig} */
-export const cfg = { ...DEFAULTS };
-
-/** The prefix becomes part of attribute names, CSS selectors and event names, so it is kept to those characters. */
-const PREFIX = /^[a-z][a-z0-9-]*$/;
-/**
- * Metafield identifiers are written into the product fragment's text: a GraphQL fragment can't declare variables, so
- * they can't be sent as variables. Only these characters are let through, which covers Shopify's namespaces and keys.
- */
-const METAFIELD_PART = /^[A-Za-z0-9_.-]+$/;
-/** A namespace is the same, or an app-reserved one: `$app` or `$app:<name>`. */
-const METAFIELD_NAMESPACE = /^(\$app(:[A-Za-z0-9_-]+)?|[A-Za-z0-9_.-]+)$/;
-
-/**
- * @typedef {'imagesFirst' | 'variantsFirst' | 'sellingPlanGroupsFirst' | 'sellingPlansFirst' | 'collectionFirst'
- *   | 'retries' | 'maxAge' | 'lowStock'} CountOption
- */
-/**
- * @typedef {'warningText' | 'formatMoney' | 'onLayoutChange' | 'onCartOpen' | 'onCartClose' | 'onLineEnter'
- *   | 'onLineLeave' | 'onValueChange' | 'onError'} HookOption
- */
-
-/** @type {readonly CountOption[]} Options that are written into queries as list sizes or used as counts. */
-const COUNT_OPTIONS = [
-  'imagesFirst',
-  'variantsFirst',
-  'sellingPlanGroupsFirst',
-  'sellingPlansFirst',
-  'collectionFirst',
-  'retries',
-  'maxAge',
-  'lowStock',
-];
-/** @type {readonly HookOption[]} */
-const HOOK_OPTIONS = [
-  'warningText',
-  'formatMoney',
-  'onLayoutChange',
-  'onCartOpen',
-  'onCartClose',
-  'onLineEnter',
-  'onLineLeave',
-  'onValueChange',
-  'onError',
-];
-
-/**
- * @template T
- * @param {string} name
- * @param {unknown} value
- * @param {T} fallback
- * @returns {T} `fallback`, with a warning unless `value` was left out.
- */
-function invalidOption(name, value, fallback) {
-  if (value !== undefined) warn(`invalid ${name} ${JSON.stringify(value)}: using ${JSON.stringify(fallback)}`);
-  return fallback;
-}
-
-/**
- * @param {CountOption} name
- * @param {unknown} value
- * @returns {number} `value` when it is a non-negative integer, else the default.
- */
-function countOption(name, value) {
-  if (typeof value === 'number' && Number.isInteger(value) && value >= 0) return value;
-  return invalidOption(name, value, DEFAULTS[name]);
-}
-
-/**
- * @template {string} Choice
- * @param {string} name
- * @param {unknown} value
- * @param {readonly [Choice, ...Choice[]]} choices The first one is the default.
- * @returns {Choice}
- */
-function choiceOption(name, value, choices) {
-  return choices.find((choice) => choice === value) ?? invalidOption(name, value, choices[0]);
-}
-
-/**
- * @param {unknown} value
- * @returns {string} The store's domain without protocol or path: `https://shop.example/x` → `shop.example`.
- */
-function domainOption(value) {
-  if (typeof value !== 'string') return '';
-  return value.replace(/^https?:\/\//, '').replace(/\/.*$/, '');
-}
-
-/**
- * @param {unknown} ref
- * @returns {MetafieldIdentifier | null} The identifier of `'namespace.key'` or `{ namespace, key }`, when both parts are
- *   valid identifiers.
- */
-export function toMetafieldIdentifier(ref) {
-  /** @type {unknown} */
-  let namespace;
-  /** @type {unknown} */
-  let key;
-  if (typeof ref === 'string') {
-    const dot = ref.indexOf('.');
-    namespace = dot > 0 ? ref.slice(0, dot) : '';
-    key = ref.slice(dot + 1);
-  } else if (typeof ref === 'object' && ref !== null) {
-    namespace = Reflect.get(ref, 'namespace');
-    key = Reflect.get(ref, 'key');
-  }
-  if (typeof namespace !== 'string' || typeof key !== 'string') return null;
-  return METAFIELD_NAMESPACE.test(namespace) && METAFIELD_PART.test(key) ? { namespace, key } : null;
-}
-
-/**
- * @param {unknown} value
- * @returns {MetafieldRef[]} The refs that name a valid identifier, as written; each other one is skipped with a warning.
- */
-function metafieldsOption(value) {
-  if (!Array.isArray(value)) return invalidOption('metafields', value, []);
-  /** @type {MetafieldRef[]} */
-  const refs = [];
-  for (const ref of /** @type {unknown[]} */ (value)) {
-    const identifier = toMetafieldIdentifier(ref);
-    if (identifier) refs.push(typeof ref === 'string' ? ref : identifier);
-    else invalidOption('metafield', ref, null);
-  }
-  return refs;
-}
-
-/**
- * The configuration `options` describe: defaults filled in, counts, prefix, choices and metafields validated (an
- * invalid value warns and falls back to its default), hooks that aren't functions dropped so callers only check for
- * null.
- *
- * @param {TetherOptions} options
- * @returns {TetherConfig}
- */
-export function resolveConfig(options) {
-  const domain = domainOption(options.domain);
-  const prefix =
-    typeof options.prefix === 'string' && PREFIX.test(options.prefix)
-      ? options.prefix
-      : invalidOption('prefix', options.prefix, DEFAULTS.prefix);
-  /** @type {TetherConfig} */
-  const resolved = {
-    ...DEFAULTS,
-    ...options,
-    domain,
-    prefix,
-    storageKey: options.storageKey || `${prefix}:cart:${domain}`,
-    metafields: metafieldsOption(options.metafields ?? []),
-    checkoutTarget: choiceOption('checkoutTarget', options.checkoutTarget, ['_self', '_blank']),
-    defaultPurchase: choiceOption('defaultPurchase', options.defaultPurchase, ['one-time', 'subscription']),
-  };
-  for (const name of COUNT_OPTIONS) resolved[name] = countOption(name, options[name]);
-  for (const name of HOOK_OPTIONS) if (typeof resolved[name] !== 'function') resolved[name] = null;
-  if (resolved.apiVersion === 'unstable') {
-    warn('apiVersion "unstable" changes without notice. Pin a dated version (e.g. 2026-07).');
-  }
-  return resolved;
-}
-
-/**
- * Replaces the shared configuration with `options` over the defaults (see `resolveConfig`).
- *
- * @param {TetherOptions} [options]
- * @returns {TetherConfig} The shared `cfg`.
- */
-export function configure(options = {}) {
-  const resolved = resolveConfig(options);
-  for (const key of Object.keys(cfg)) {
-    if (!(key in resolved)) Reflect.deleteProperty(cfg, key);
-  }
-  return Object.assign(cfg, resolved);
-}
-
-/** @returns {boolean} True once a domain and a token are set. */
-export const isConfigured = () => Boolean(cfg.domain && cfg.token);
-
-/** @param {...unknown} args */
-export function log(...args) {
-  if (cfg.debug) console.log(`[${cfg.prefix}]`, ...args);
-}
-
-/** @param {...unknown} args */
-export function warn(...args) {
-  console.warn(`[${cfg.prefix}]`, ...args);
-}
-
-/**
- * Logs a failure that reaches the visitor and hands it to `onError`. A throwing `onError` is logged, never rethrown:
- * the site's hook must not break the render that reported the failure.
- *
- * @param {unknown} error
- * @param {string} context What failed, e.g. `product coffee-box`.
- */
-export function reportError(error, context) {
-  warn(context, error instanceof Error && error.message ? error.message : error);
-  if (!cfg.onError) return;
-  try {
-    cfg.onError(error, context);
-  } catch (hookError) {
-    warn('onError threw', hookError);
-  }
-}

package/src/dom.js

@@ -1,287 +0,0 @@
-/**
- * The browser modules' DOM toolkit: what Shopify values look like on the page (money, dates, text, images, lists)
- * and how elements show, hide and report layout changes. Attribute names go through `attr()` so the prefix is
- * configurable. The optional parts import all of it from here (`window.Tether.__core['dom.js']`).
- */
-import { cfg, reportError, warn } from './config.js';
-import { attr, emit, get } from './markup.js';
-import { storeHtmlFragment } from './store-html.js';
-import { formatMoney as formatMoneyIn, productUrl as productUrlFor } from './shopify-values.js';
-/** @import { Money } from './shopify-values.js' */
-
-export { attr, sel, get, has, qsa, scoped, emit } from './markup.js';
-export { imageUrl, cdnUrl, sameImage, setImage } from './images.js';
-export { hasTemplate, repeat, repeatKeyed } from './repeaters.js';
-
-/**
- * State Tether keeps on elements, as `data-tether-*` attributes whatever the prefix: sites style and test against
- * these names, so they stay fixed where the `tether-*` markup attributes follow `prefix`.
- */
-const SEEN = 'data-tether-seen';
-const SHOWN = 'data-tether-shown';
-const PREVIOUS_DISPLAY = 'data-tether-prev-display';
-
-/** Async renders change the page height in bursts; one notification per burst. */
-const LAYOUT_DEBOUNCE_MS = 120;
-
-/**
- * The product page of a product (`productPath`).
- *
- * @param {string | null | undefined} handle
- * @param {string | null} [id]
- */
-export function productUrl(handle, id) {
-  return productUrlFor(cfg.productPath || '/product', handle, id);
-}
-
-/**
- * `Intl` throws a RangeError for a locale or currency it doesn't know; the caller then shows a plain fallback.
- *
- * @template T
- * @param {() => T} format
- * @param {T} fallback
- * @returns {T}
- */
-function formatOr(format, fallback) {
-  try {
-    return format();
-  } catch (error) {
-    if (error instanceof RangeError) return fallback;
-    throw error;
-  }
-}
-
-/**
- * `30` → `30%` (en, nl) or `30 %` (de, fr), in the configured locale.
- *
- * @param {number | null | undefined} percentage
- * @param {string | undefined} [locale]
- * @returns {string} `''` for no or a zero percentage.
- */
-export function formatPercent(percentage, locale = cfg.locale) {
-  if (!percentage) return '';
-  const format = () =>
-    new Intl.NumberFormat(locale || undefined, { style: 'percent', maximumFractionDigits: 0 }).format(percentage / 100);
-  return formatOr(format, `${percentage}%`);
-}
-
-/**
- * Money in the configured locale, through the site's `formatMoney` when it has one.
- *
- * @param {Money | null | undefined} money
- */
-export function formatMoney(money) {
-  if (!money) return '';
-  if (cfg.formatMoney) return cfg.formatMoney(money, cfg.locale);
-  return formatMoneyIn(money, cfg.locale);
-}
-
-/**
- * @param {string | null | undefined} iso
- * @returns {string} The date in the configured locale, `''` without one.
- */
-export function formatDate(iso) {
-  if (!iso) return '';
-  return formatOr(() => new Date(iso).toLocaleDateString(cfg.locale || undefined), '');
-}
-
-/**
- * Writes HTML from the Shopify admin (product and collection descriptions) into `el`, with script removed
- * (`store-html.js`). Everything else from Shopify is written as text (`setText`).
- *
- * @param {Element} el
- * @param {string | null | undefined} html
- */
-export function setStoreHtml(el, html) {
-  el.replaceChildren(storeHtmlFragment(html, el.ownerDocument));
-}
-
-/**
- * @param {Element} el
- * @returns {el is HTMLInputElement | HTMLTextAreaElement}
- */
-const isTextField = (el) => el.tagName === 'INPUT' || el.tagName === 'TEXTAREA';
-
-/**
- * @param {Element} el
- * @returns {el is HTMLInputElement}
- */
-const isInput = (el) => el.tagName === 'INPUT';
-
-/**
- * Sets the text of `el`, or its value when it is a form field.
- *
- * @param {Element} el
- * @param {string | number | boolean | null | undefined} value `null` and `undefined` clear it.
- */
-export function setText(el, value) {
-  const text = value == null ? '' : String(value);
-  if (isTextField(el)) el.value = text;
-  else el.textContent = text;
-}
-
-/** @param {Element} el */
-const readText = (el) => (isTextField(el) ? el.value : el.textContent);
-
-/**
- * `setText` that hands a change after the first render to `onValueChange`, for scramble and roll effects.
- *
- * @param {HTMLElement} el
- * @param {string | number | boolean | null | undefined} value
- */
-export function setTextTracked(el, value) {
-  const before = readText(el);
-  setText(el, value);
-  if (before !== readText(el) && el.hasAttribute(SEEN) && cfg.onValueChange) {
-    try {
-      cfg.onValueChange(el, before);
-    } catch (error) {
-      reportError(error, 'onValueChange');
-    }
-  }
-  el.setAttribute(SEEN, '1');
-}
-
-/**
- * Shows an element hidden before the script ran (a class, an inline `display: none`, a `hidden` attribute), as
- * `block` or the value of `tether-display`.
- *
- * @param {HTMLElement} el
- */
-function reveal(el) {
-  if (el.hasAttribute(SHOWN)) return;
-  el.setAttribute(SHOWN, '');
-  el.removeAttribute('hidden');
-  const previous = el.getAttribute(PREVIOUS_DISPLAY);
-  if (previous !== null) {
-    el.style.display = previous;
-    el.removeAttribute(PREVIOUS_DISPLAY);
-  } else if (el.style.display === 'none') {
-    el.style.display = '';
-  }
-  if (typeof getComputedStyle === 'function' && getComputedStyle(el).display === 'none') {
-    el.style.display = el.getAttribute(attr('display')) || 'block';
-  }
-}
-
-/**
- * Shows or hides `el`, restoring its own display value when shown again.
- *
- * @param {HTMLElement} el
- * @param {boolean} visible
- */
-export function show(el, visible) {
-  if (visible) {
-    reveal(el);
-    return;
-  }
-  el.removeAttribute(SHOWN);
-  // The display value to restore is a real one, never 'none'.
-  if (!el.hasAttribute(PREVIOUS_DISPLAY) && el.style.display !== 'none') {
-    el.setAttribute(PREVIOUS_DISPLAY, el.style.display);
-  }
-  el.style.display = 'none';
-}
-
-/**
- * Marks an option button or input as chosen: `is-selected`, `aria-pressed`, and its own or inner radio/checkbox.
- *
- * @param {Element} el
- * @param {boolean} selected
- */
-export function setSelected(el, selected) {
-  el.classList.toggle('is-selected', selected);
-  el.setAttribute('aria-pressed', selected ? 'true' : 'false');
-  if (isInput(el) && (el.type === 'radio' || el.type === 'checkbox')) el.checked = selected;
-  const input = el.querySelector('input[type="radio"],input[type="checkbox"]');
-  if (input && isInput(input)) input.checked = selected;
-}
-
-/** @type {ReturnType<typeof setTimeout> | undefined} */
-let layoutTimer;
-
-/**
- * Async renders change the page height after the site's page-transition hooks ran. After a burst of them this calls
- * `onLayoutChange` (else refreshes ScrollTrigger) and emits `tether:layout-changed`.
- *
- * @param {string} reason
- */
-export function notifyLayoutChanged(reason) {
-  clearTimeout(layoutTimer);
-  layoutTimer = setTimeout(() => {
-    // GSAP's ScrollTrigger, when the site has it, measures positions that a height change makes stale.
-    const { ScrollTrigger } = /** @type {Window & { ScrollTrigger?: { refresh?: () => void } }} */ (window);
-    if (cfg.onLayoutChange) cfg.onLayoutChange(reason);
-    else ScrollTrigger?.refresh?.();
-    emit('layout-changed', { reason });
-  }, LAYOUT_DEBOUNCE_MS);
-}
-
-/**
- * Notifies a layout change (`<reason>:images`) once every image in `root` that is still loading has loaded or failed.
- *
- * @param {ParentNode} root
- * @param {string} reason
- */
-export function watchImages(root, reason) {
-  const loading = [...root.querySelectorAll('img')].filter((img) => !img.complete);
-  let left = loading.length;
-  const done = () => {
-    left -= 1;
-    if (left === 0) notifyLayoutChanged(`${reason}:images`);
-  };
-  loading.forEach((img) => {
-    img.addEventListener('load', done, { once: true });
-    img.addEventListener('error', done, { once: true });
-  });
-}
-
-/**
- * Runs `task` with `aria-busy` on `el`; does nothing while `el` is already busy.
- *
- * @template T
- * @param {Element} el
- * @param {() => T | Promise<T>} task
- * @returns {Promise<T | undefined>} The task's result, `undefined` when it didn't run.
- */
-export function busy(el, task) {
-  if (el.getAttribute('aria-busy') === 'true') return Promise.resolve(undefined);
-  el.setAttribute('aria-busy', 'true');
-  return Promise.resolve()
-    .then(task)
-    .finally(() => {
-      el.removeAttribute('aria-busy');
-    });
-}
-
-/**
- * @param {Element | null | undefined} el
- * @param {string} name
- * @returns {unknown} The attribute's JSON, `null` when it is missing or not JSON (with a warning).
- */
-export function parseJSONAttr(el, name) {
-  const raw = el ? get(el, name) : null;
-  if (!raw) return null;
-  try {
-    return /** @type {unknown} */ (JSON.parse(raw));
-  } catch {
-    warn(`invalid JSON in ${attr(name)}`, el);
-    return null;
-  }
-}
-
-/** @typedef {string | number | boolean | null | undefined} AttributeValue */
-
-/**
- * `{ a: 1 }` or `[{ key, value }]` → `[{ key, value }]` as Shopify wants cart and line attributes.
- *
- * @param {Record<string, AttributeValue> | { key: string | number, value?: AttributeValue }[] | null | undefined} attributes
- * @returns {{ key: string, value: string }[]}
- */
-export function toAttributes(attributes) {
-  if (!attributes) return [];
-  if (Array.isArray(attributes)) {
-    return attributes.map((attribute) => ({ key: String(attribute.key), value: String(attribute.value ?? '') }));
-  }
-  return Object.entries(attributes).map(([key, value]) => ({ key, value: String(value ?? '') }));
-}