@occluze/tether 0.7.0 → 0.7.2

package/src/cart/render.ts

@@ -1,266 +0,0 @@
-/**
- * Shows the cart everywhere on the page: counts, totals, `tether-show="cart-*"` conditions, the note, the discount
- * codes and the `[tether-cart-lines]` repeaters. It renders what it is given (a `CartView`) and holds no state, so
- * every render shows the cart as the store has it at that moment.
- */
-import { cfg, reportError } from '../config.ts';
-import { getProduct } from '../loader.ts';
-import { allPlans } from '../selling-plans.ts';
-import { isGreaterAmount } from '../amounts.ts';
-import {
-  attr,
-  sel,
-  get,
-  qsa,
-  formatMoney,
-  setText,
-  setTextTracked,
-  setImage,
-  show,
-  repeat,
-  repeatKeyed,
-  productUrl,
-  notifyLayoutChanged,
-} from '../dom.ts';
-import { isOpen, syncDrawerAria } from './drawer.ts';
-import type { CartWarning } from '../config.ts';
-import type { Product } from '../fragments.ts';
-import type { ShopifyCart, ShopifyCartLine, PendingQuantity } from './store.ts';
-
-/** What a render shows. */
-interface CartView {
-  cart: ShopifyCart | null;
-  warnings: readonly CartWarning[];
-  /** Line id → the quantity quick clicks asked for. */
-  pending: ReadonlyMap<string, PendingQuantity>;
-  /** The last load or change failed (`tether-show="cart-error"`). */
-  failed: boolean;
-}
-
-/** Shopify's title of a variant of a product without options. */
-const DEFAULT_TITLE = 'Default Title';
-
-/** @returns The quantity to show: the one asked for while an update is on its way. */
-export const quantityOf = (line: ShopifyCartLine, pending: ReadonlyMap<string, PendingQuantity>): number =>
-  pending.get(line.id)?.quantity ?? line.quantity;
-
-const numericId = (gid: string) => gid.split('/').pop() ?? gid;
-
-/** @returns The product page, with the line's variant and plan selected. */
-function lineUrl(line: ShopifyCartLine): string | null {
-  const variant = line.merchandise;
-  const base = productUrl(variant.product.handle, variant.product.id);
-  if (!base) return null;
-  const query = new URLSearchParams();
-  query.set('variant', numericId(variant.id));
-  const planId = line.sellingPlanAllocation?.sellingPlan.id;
-  if (planId) query.set('selling_plan', numericId(planId));
-  return `${base}${base.includes('?') ? '&' : '?'}${query.toString()}`;
-}
-
-type LineText = (line: ShopifyCartLine, view: CartView) => string | number;
-
-const productTitle: LineText = (line) => line.merchandise.product.title;
-
-/** The text of each `tether-line` key. */
-const LINE_TEXT: Record<string, LineText> = {
-  title: productTitle,
-  'product-title': productTitle,
-  'variant-title': (line) => (line.merchandise.title === DEFAULT_TITLE ? '' : line.merchandise.title),
-  options: (line) =>
-    line.merchandise.selectedOptions
-      .filter((option) => option.value !== DEFAULT_TITLE)
-      .map((option) => `${option.name}: ${option.value}`)
-      .join(', '),
-  vendor: (line) => line.merchandise.product.vendor,
-  sku: (line) => line.merchandise.sku ?? '',
-  price: (line) => formatMoney(line.cost.amountPerQuantity),
-  'compare-at-price': (line) => formatMoney(line.cost.compareAtAmountPerQuantity ?? line.merchandise.compareAtPrice),
-  'line-total': (line) => formatMoney(line.cost.totalAmount),
-  'line-subtotal': (line) => formatMoney(line.cost.subtotalAmount),
-  quantity: (line, view) => quantityOf(line, view.pending),
-  plan: (line) => line.sellingPlanAllocation?.sellingPlan.name ?? '',
-  'plan-description': (line) => line.sellingPlanAllocation?.sellingPlan.description ?? '',
-  components: (line) =>
-    (line.lineComponents ?? [])
-      .map((component) => `${component.quantity} × ${component.merchandise.product.title}`)
-      .join(', '),
-};
-
-const ATTRIBUTE_KEY = 'attribute:';
-
-/**
- * @param key The `tether-line` value.
- * @returns The text for `key`, `undefined` for a key Tether doesn't know.
- */
-function lineValue(line: ShopifyCartLine, key: string, view: CartView): string | number | undefined {
-  if (Object.hasOwn(LINE_TEXT, key)) return LINE_TEXT[key]?.(line, view);
-  if (!key.startsWith(ATTRIBUTE_KEY)) return undefined;
-  const name = key.slice(ATTRIBUTE_KEY.length);
-  return line.attributes.find((attribute) => attribute.key === name)?.value ?? '';
-}
-
-/**
- * Fills a `<select tether-line-plan>` with the product's plans (and one-time purchase, when the product allows it and
- * the select isn't `subscription-only`), keeping the options when they haven't changed.
- */
-function fillPlanSelect(select: HTMLSelectElement, line: ShopifyCartLine, product: Product) {
-  const plans = allPlans(product);
-  const allowOneTime = !product.requiresSellingPlan && get(select, 'line-plan') !== 'subscription-only';
-  const oneTime = { value: '', label: select.getAttribute(attr('one-time-label')) || 'One-time purchase' };
-  const choices = [...(allowOneTime ? [oneTime] : []), ...plans.map((plan) => ({ value: plan.id, label: plan.name }))];
-  const signature = choices.map((choice) => choice.value).join('|');
-  if (select.dataset['tetherSig'] !== signature) {
-    select.replaceChildren(
-      ...choices.map((choice) => {
-        const option = document.createElement('option');
-        option.value = choice.value;
-        option.textContent = choice.label;
-        return option;
-      }),
-    );
-    select.dataset['tetherSig'] = signature;
-  }
-  select.value = line.sellingPlanAllocation?.sellingPlan.id ?? '';
-  show(select, plans.length > 0);
-}
-
-function renderLineState(node: HTMLElement, line: ShopifyCartLine, view: CartView) {
-  const isSubscription = Boolean(line.sellingPlanAllocation);
-  node.classList.toggle('is-subscription', isSubscription);
-  // Shopify's note about this line, such as less stock than asked.
-  const warning = view.warnings.find((candidate) => candidate.target === line.id);
-  node.classList.toggle('is-warning', Boolean(warning));
-  const pending = view.pending.has(line.id);
-  node.classList.toggle('is-busy', pending);
-  if (pending) node.setAttribute('aria-busy', 'true');
-  else node.removeAttribute('aria-busy');
-  qsa(node, sel('line', 'warning')).forEach((el) => {
-    setTextTracked(el, warning?.message ?? '');
-  });
-  const conditions = new Map([
-    ['subscription', isSubscription],
-    ['one-time', !isSubscription],
-    ['on-sale', isGreaterAmount(line.cost.compareAtAmountPerQuantity?.amount, line.cost.amountPerQuantity.amount)],
-    ['has-components', (line.lineComponents ?? []).length > 0],
-    ['warning', Boolean(warning)],
-  ]);
-  qsa(node, sel('line-show')).forEach((el) => {
-    const key = get(el, 'line-show');
-    const visible = key === null ? undefined : conditions.get(key);
-    if (visible !== undefined) show(el, visible);
-  });
-}
-
-function renderLine(node: HTMLElement, line: ShopifyCartLine, view: CartView) {
-  const variant = line.merchandise;
-  node.setAttribute(attr('line-id'), line.id);
-  qsa(node, sel('line')).forEach((el) => {
-    const key = get(el, 'line') ?? '';
-    if (key === 'image') {
-      setImage(el, variant.image?.url ?? variant.product.featuredImage?.url, variant.product.title);
-      return;
-    }
-    if (key === 'url') {
-      const url = lineUrl(line);
-      if (url) el.setAttribute('href', url);
-      return;
-    }
-    const value = lineValue(line, key, view);
-    if (value !== undefined) setTextTracked(el, value);
-  });
-  renderLineState(node, line, view);
-  qsa(node, `select${sel('line-plan')}`).forEach((select) => {
-    getProduct(variant.product.handle)
-      .then((product) => {
-        // The selector matches only <select> elements.
-        fillPlanSelect(select as HTMLSelectElement, line, product);
-      })
-      .catch((error: unknown) => {
-        reportError(error, 'line plan options');
-      });
-  });
-}
-
-function renderConditions(cart: ShopifyCart | null, view: CartView) {
-  const count = cart?.totalQuantity ?? 0;
-  const hasSubscription = (cart?.lines.nodes ?? []).some((line) => line.sellingPlanAllocation);
-  const conditions = new Map([
-    ['cart-empty', count === 0],
-    ['cart-filled', count > 0],
-    ['cart-has-subscription', hasSubscription],
-    ['cart-no-subscription', !hasSubscription],
-    ['cart-has-discount', (cart?.discountCodes ?? []).some((code) => code.applicable)],
-    ['cart-error', view.failed],
-    ['cart-warning', view.warnings.length > 0],
-  ]);
-  qsa(document, sel('show')).forEach((el) => {
-    const key = get(el, 'show');
-    const visible = key === null ? undefined : conditions.get(key);
-    if (visible === undefined || el.closest(sel('product'))) return;
-    show(el, visible);
-  });
-  qsa(document, sel('checkout')).forEach((el) => {
-    el.classList.toggle('is-disabled', !count);
-    el.setAttribute('aria-disabled', String(!count));
-  });
-}
-
-function renderFields(cart: ShopifyCart | null) {
-  qsa(document, `textarea${sel('cart-note')},input${sel('cart-note')}`).forEach((el) => {
-    // The visitor may be typing in it.
-    if (document.activeElement !== el) setText(el, cart?.note ?? '');
-  });
-  qsa(document, sel('cart-discounts')).forEach((container) => {
-    repeat(container, cart?.discountCodes ?? [], (node, discount) => {
-      node.setAttribute(attr('discount-code'), discount.code);
-      const target = node.querySelector(sel('discount', 'code')) ?? (node.firstElementChild ? null : node);
-      if (target) setText(target, discount.code);
-      node.classList.toggle('is-inapplicable', !discount.applicable);
-    });
-  });
-}
-
-export function renderCart(view: CartView): void {
-  const { cart } = view;
-  const money = (key: 'subtotalAmount' | 'totalAmount' | 'checkoutChargeAmount') =>
-    cart ? formatMoney(cart.cost[key]) : '';
-
-  syncDrawerAria(isOpen());
-  qsa(document, sel('cart-count')).forEach((el) => {
-    setTextTracked(el, cart?.totalQuantity ?? 0);
-  });
-  qsa(document, sel('cart-subtotal')).forEach((el) => {
-    setTextTracked(el, money('subtotalAmount'));
-  });
-  qsa(document, sel('cart-total')).forEach((el) => {
-    setTextTracked(el, money('totalAmount'));
-  });
-  qsa(document, sel('cart-checkout-charge')).forEach((el) => {
-    setTextTracked(el, money('checkoutChargeAmount'));
-  });
-  renderConditions(cart, view);
-  qsa(document, sel('cart-warning')).forEach((el) => {
-    setTextTracked(el, [...new Set(view.warnings.map((warning) => warning.message))].join(' '));
-  });
-  renderFields(cart);
-  qsa(document, sel('cart-lines')).forEach((container) => {
-    repeatKeyed(
-      container,
-      cart?.lines.nodes ?? [],
-      (line) => line.id,
-      (node, line) => {
-        renderLine(node, line, view);
-      },
-      { onEnter: cfg.onLineEnter, onLeave: cfg.onLineLeave },
-    );
-  });
-  if (cart) notifyLayoutChanged('cart');
-}
-
-/** Shows the count a saved cart had on the last page in the cart counts the page left at 0, until it has loaded. */
-export function showSavedCount(count: number): void {
-  qsa(document, sel('cart-count')).forEach((el) => {
-    if (/^\s*0?\s*$/.test(el.textContent)) el.textContent = String(count);
-  });
-}

package/src/cart/store.ts

@@ -1,279 +0,0 @@
-/**
- * The cart on this page: what Shopify last said about it (`CartStatus`), the quantities quick clicks asked for and
- * the one queue every change goes through. A change of what the page shows goes through
- * here, so the document (`renderCart`) and the listeners (`tether:cart-updated`) always see the store's cart.
- */
-import { cfg } from '../config.ts';
-import { emit } from '../dom.ts';
-import { isOpen } from './drawer.ts';
-import { renderCart, quantityOf, showSavedCount } from './render.ts';
-import { getStored, removeStored, setStored } from '../storage.ts';
-import type { CartWarning } from '../config.ts';
-import type { Image } from '../fragments.ts';
-import type { Money } from '../shopify-values.ts';
-
-export interface Attribute {
-  key: string;
-  value: string;
-}
-
-/** A line's `merchandise`: Shopify's `Merchandise` union has only `ProductVariant`. */
-export interface CartVariant {
-  id: string;
-  title: string;
-  sku: string | null;
-  availableForSale: boolean;
-  requiresShipping: boolean;
-  /** Absent when the store's token can't read inventory. */
-  quantityAvailable?: number | null;
-  image: Image | null;
-  price: Money;
-  compareAtPrice: Money | null;
-  selectedOptions: { name: string; value: string }[];
-  product: { id: string; title: string; handle: string; vendor: string; featuredImage: Image | null };
-}
-
-interface LinePlanAllocation {
-  sellingPlan: {
-    id: string;
-    name: string;
-    description: string | null;
-    recurringDeliveries: boolean;
-    options: { name: string; value: string }[];
-  };
-  checkoutChargeAmount: Money;
-  priceAdjustments: { price: Money; compareAtPrice: Money; perDeliveryPrice: Money }[];
-}
-
-export interface ShopifyCartLine {
-  id: string;
-  quantity: number;
-  attributes: Attribute[];
-  cost: {
-    totalAmount: Money;
-    subtotalAmount: Money;
-    amountPerQuantity: Money;
-    compareAtAmountPerQuantity: Money | null;
-  };
-  discountAllocations: { discountedAmount: Money }[];
-  sellingPlanAllocation: LinePlanAllocation | null;
-  merchandise: CartVariant;
-  /** Only on a bundle (`ComponentizableCartLine`). */
-  lineComponents?: {
-    id: string;
-    quantity: number;
-    merchandise: { id: string; title: string; product: { title: string; handle: string } };
-  }[];
-}
-
-/** The fields of `fragment TetherCart`. */
-export interface ShopifyCart {
-  id: string;
-  checkoutUrl: string;
-  totalQuantity: number;
-  note: string | null;
-  createdAt: string;
-  updatedAt: string;
-  attributes: Attribute[];
-  buyerIdentity: { countryCode: string | null; email: string | null };
-  discountCodes: { code: string; applicable: boolean }[];
-  cost: { subtotalAmount: Money; totalAmount: Money; checkoutChargeAmount: Money };
-  lines: { nodes: ShopifyCartLine[] };
-}
-
-/**
- * `unknown` until the saved cart has loaded (the page's own markup shows); `empty` without a cart (none saved, or
- * Shopify no longer has it); `error` after a failed load or change, with the cart as Shopify last sent it.
- */
-export type CartStatus =
-  | { kind: 'unknown' }
-  | { kind: 'empty' }
-  | { kind: 'ready'; cart: ShopifyCart }
-  | { kind: 'error'; error: unknown; cart: ShopifyCart | null };
-
-/** What one quick +/- click asked for; a newer click replaces it. */
-export interface PendingQuantity {
-  quantity: number;
-}
-
-/** The second argument of a `subscribe` listener. */
-interface CartMeta {
-  open: boolean;
-  count: number;
-  loaded: boolean;
-  /** A copy of Shopify's notes on the last change. */
-  warnings: CartWarning[];
-}
-
-let status: CartStatus = { kind: 'unknown' };
-
-/** Shopify's notes on the last change. */
-let warnings: readonly CartWarning[] = [];
-
-/** Line id → what quick +/- clicks asked for, until Shopify has answered. */
-export const pendingQuantities = new Map<string, PendingQuantity>();
-
-export const cartStatus = (): CartStatus => status;
-
-/** The cart as Shopify last sent it. */
-export function currentCart(): ShopifyCart | null {
-  switch (status.kind) {
-    case 'ready':
-    case 'error':
-      return status.cart;
-    case 'unknown':
-    case 'empty':
-      return null;
-  }
-}
-
-export const currentWarnings = (): readonly CartWarning[] => warnings;
-
-const statusOf = (cart: ShopifyCart | null): CartStatus => (cart ? { kind: 'ready', cart } : { kind: 'empty' });
-
-const seenKey = () => `${cfg.storageKey}:seen`;
-
-/** The id of the visitor's cart, kept across pages. */
-export const savedCartId = (): string | null => getStored(cfg.storageKey) || null;
-
-/** Forgets the saved cart, which Shopify no longer has. */
-export function forgetSavedCart(): void {
-  removeStored(cfg.storageKey);
-}
-
-/** Keeps a cart Shopify sent without showing it, for an answer a newer change will replace. */
-export function keepQuietly(cart: ShopifyCart | null): void {
-  status = statusOf(cart);
-  if (cart) setStored(cfg.storageKey, cart.id);
-}
-
-/** Renders the document with the store's cart. */
-export function render(): void {
-  renderCart({
-    cart: currentCart(),
-    warnings,
-    pending: pendingQuantities,
-    failed: status.kind === 'error',
-  });
-}
-
-/** @param reason The `reason` of `tether:cart-updated`. */
-export function announce(reason: string): void {
-  render();
-  emit('cart-updated', { cart: currentCart(), reason });
-}
-
-/**
- * Keeps a cart Shopify sent after a change, shows it, and tells this page and the visitor's other tabs.
- *
- * @returns `cart`.
- */
-export function commit(cart: ShopifyCart | null, reason: string): ShopifyCart | null {
-  keepQuietly(cart);
-  // Other tabs reload the cart on this storage event; the next page shows the count before its cart has loaded.
-  setStored(seenKey(), `${Date.now()}|${cart?.totalQuantity ?? 0}`);
-  announce(reason);
-  return cart;
-}
-
-/** The outcome of loading the saved cart: the cart, `null` when there is none, or the failure. */
-export function settleLoad(
-  outcome: { kind: 'loaded'; cart: ShopifyCart | null } | { kind: 'failed'; error: unknown },
-): void {
-  status = outcome.kind === 'loaded' ? statusOf(outcome.cart) : { kind: 'error', error: outcome.error, cart: null };
-  announce('load');
-}
-
-/**
- * The cart's count on the last page, from `<storageKey>:seen` (`<time>|<count>`).
- *
- * @returns `null` unless the count is a whole number: other scripts and other Tether versions write storage too.
- */
-function lastKnownCount(): number | null {
-  const text = getStored(seenKey())?.split('|')[1] ?? '';
-  const count = Number(text);
-  return /^\d+$/.test(text) && Number.isSafeInteger(count) ? count : null;
-}
-
-/** Until the saved cart has loaded, the counts show the count it had on the last page instead of the page's 0. */
-export function showLastKnownCount(): void {
-  if (status.kind !== 'unknown') return;
-  const count = lastKnownCount();
-  if (count !== null) showSavedCount(count);
-}
-
-/** Sets Shopify's notes on the last change: each message once, in the site's words (`warningText`). */
-export function setWarnings(notes: readonly CartWarning[]): void {
-  warnings = notes
-    .filter((note, index) => notes.findIndex((other) => other.message === note.message) === index)
-    .map((note) => ({ ...note, message: cfg.warningText?.(note) || note.message }));
-  if (warnings.length) emit('cart-warning', { warnings });
-}
-
-/** The queue only waits for a task: its result, or failure, reaches the caller through the promise `run` returns. */
-const waitOnly = () => undefined;
-
-/** @returns A runner that starts each task once the one before has settled, whether it succeeded or failed. */
-export function serial(): <T>(task: () => Promise<T>) => Promise<T> {
-  let previous: Promise<unknown> = Promise.resolve();
-  return <T>(task: () => Promise<T>) => {
-    const run = previous.then(task);
-    previous = run.then(waitOnly, waitOnly);
-    return run;
-  };
-}
-
-const runInOrder = serial();
-
-/**
- * Runs a cart change after the ones before it, so quick clicks never race. A failure sets the `error` status (shown by
- * `tether-show="cart-error"` until the next change succeeds), emits `tether:cart-error` and rejects.
- */
-export function enqueue<T>(task: () => Promise<T>): Promise<T> {
-  return runInOrder(task).then(
-    (value) => {
-      if (status.kind === 'error') {
-        status = statusOf(status.cart);
-        render();
-      }
-      return value;
-    },
-    (error: unknown) => {
-      status = { kind: 'error', error, cart: currentCart() };
-      render();
-      emit('cart-error', { error });
-      throw error;
-    },
-  );
-}
-
-/** @returns The quantity to show for `line`. */
-export const pendingQuantityOf = (line: ShopifyCartLine): number => quantityOf(line, pendingQuantities);
-
-const meta = (): CartMeta => ({
-  open: isOpen(),
-  count: currentCart()?.totalQuantity ?? 0,
-  loaded: status.kind !== 'unknown',
-  warnings: [...warnings],
-});
-
-/**
- * Calls `listener` now and after every change of the cart or the drawer.
- *
- * @returns Stops listening.
- */
-export function subscribe(listener: (cart: ShopifyCart | null, meta: CartMeta) => void): () => void {
-  const events = ['cart-updated', 'cart-toggled'].map((name) => `${cfg.prefix}:${name}`);
-  const call = () => {
-    listener(currentCart(), meta());
-  };
-  events.forEach((name) => {
-    document.addEventListener(name, call);
-  });
-  call();
-  return () => {
-    events.forEach((name) => {
-      document.removeEventListener(name, call);
-    });
-  };
-}