@occluze/tether 0.7.0 → 0.7.1

package/src/repeaters.ts

@@ -1,161 +0,0 @@
-/**
- * Lists rendered from a template: a repeater's first child in the designer is the template, and every item gets a
- * copy of it. The other children are placeholder content and are removed.
- */
-import { cfg, reportError, warn } from './config.ts';
-
-/** Each repeater's template, captured on first render. */
-const templates = new WeakMap<Element, HTMLElement | null>();
-
-/** @returns True once the repeater's template has been captured (it may be empty after that). */
-export const hasTemplate = (container: Element): boolean => Boolean(templates.get(container));
-
-/**
- * A deep copy of a template. `cloneNode` is typed as returning a `Node`; a copy of an element is an element of the
- * same kind.
- */
-const copyOf = (template: HTMLElement) => template.cloneNode(true) as HTMLElement;
-
-function templateOf(container: Element): HTMLElement | null {
-  const known = templates.get(container);
-  if (known !== undefined) return known;
-  const first = container.firstElementChild;
-  // Repeaters are HTML lists in the designer; their first child is an HTML element.
-  const template = first ? copyOf(first as HTMLElement) : null;
-  templates.set(container, template);
-  container.replaceChildren();
-  return template;
-}
-
-/** Rebuilds the list on every render. Fine for images, tags, options. */
-export function repeat<Item>(
-  container: Element,
-  items: readonly Item[],
-  render: (node: HTMLElement, item: Item, index: number) => void,
-): void {
-  const template = templateOf(container);
-  if (!template) {
-    if (items.length) warn('repeater without a template child', container);
-    return;
-  }
-  container.replaceChildren();
-  items.forEach((item, index) => {
-    const node = copyOf(template);
-    render(node, item, index);
-    container.appendChild(node);
-  });
-}
-
-interface KeyedHooks {
-  /** Runs on a node inserted for a new item. */
-  onEnter?: ((node: HTMLElement) => void) | null;
-  /** Runs on a node whose item is gone; `done()` removes it. */
-  onLeave?: ((node: HTMLElement, done: () => void) => void) | null;
-}
-
-function leave(node: HTMLElement, onLeave: KeyedHooks['onLeave']): void {
-  const done = () => {
-    node.remove();
-  };
-  if (!onLeave) {
-    done();
-    return;
-  }
-  try {
-    onLeave(node, done);
-  } catch (error) {
-    reportError(error, 'repeater onLeave');
-    done();
-  }
-}
-
-/**
- * Inserts the nodes of new items next to the item before them, leaving the existing nodes where they are.
- *
- * @param wanted Every item's node, in order.
- * @param fresh The nodes not yet in the container.
- */
-function insertFresh(
-  container: Element,
-  wanted: HTMLElement[],
-  fresh: Set<HTMLElement>,
-  onEnter: KeyedHooks['onEnter'],
-): void {
-  wanted.forEach((node, index) => {
-    if (!fresh.has(node)) return;
-    const previous = wanted[index - 1];
-    if (previous?.parentNode === container) previous.after(node);
-    else container.prepend(node);
-    if (!onEnter) return;
-    try {
-      onEnter(node);
-    } catch (error) {
-      reportError(error, 'repeater onEnter');
-    }
-  });
-}
-
-/**
- * Keyed repeater: keeps existing nodes, inserts new ones, removes old ones. Used for cart lines, so values can
- * animate and lines can slide in and out.
- */
-export function repeatKeyed<Item>(
-  container: Element,
-  items: readonly Item[],
-  keyOf: (item: Item, index: number) => string | number,
-  render: (node: HTMLElement, item: Item, index: number, isNew: boolean) => void,
-  { onEnter, onLeave }: KeyedHooks = {},
-): void {
-  const template = templateOf(container);
-  if (!template) {
-    warn('repeater without a template child', container);
-    return;
-  }
-
-  const keyAttribute = `data-${cfg.prefix}-key`;
-  const leavingAttribute = `data-${cfg.prefix}-leaving`;
-  // The list's children are copies of its template, HTML elements like it.
-  const live = () =>
-    [...(container.children as HTMLCollectionOf<HTMLElement>)].filter(
-      (node) => node.hasAttribute(keyAttribute) && !node.hasAttribute(leavingAttribute),
-    );
-
-  const existing = new Map(live().map((node) => [node.getAttribute(keyAttribute), node]));
-  const wanted: HTMLElement[] = [];
-  const fresh = new Set<HTMLElement>();
-
-  items.forEach((item, index) => {
-    const key = String(keyOf(item, index));
-    let node = existing.get(key);
-    if (node) existing.delete(key);
-    else {
-      node = copyOf(template);
-      node.setAttribute(keyAttribute, key);
-      fresh.add(node);
-    }
-    render(node, item, index, fresh.has(node));
-    wanted.push(node);
-  });
-
-  const staying = wanted.filter((node) => !fresh.has(node));
-  const current = live().filter((node) => staying.includes(node));
-  const inOrder = current.length === staying.length && current.every((node, index) => node === staying[index]);
-
-  if (!inOrder) {
-    existing.forEach((node) => {
-      node.remove();
-    });
-    wanted.forEach((node) => container.appendChild(node));
-    return;
-  }
-
-  insertFresh(container, wanted, fresh, onEnter);
-
-  existing.forEach((node) => {
-    node.setAttribute(leavingAttribute, '');
-    node.removeAttribute(keyAttribute);
-    node.style.pointerEvents = 'none';
-    node.inert = true;
-    leave(node, onLeave);
-  });
-}

package/src/search.ts

@@ -1,305 +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.ts';
-import { gql, orNull, shaped } from './client.ts';
-import { attr, sel, get, qsa, setText, setImage, repeat, show, formatMoney, productUrl, emit } from './dom.ts';
-import { within } from './mounting.ts';
-import type { Money } from './shopify-values.ts';
-
-interface SearchImage {
-  url: string;
-  altText: string | null;
-}
-interface SearchProduct {
-  id: string;
-  handle: string;
-  title: string;
-  availableForSale: boolean;
-  featuredImage: SearchImage | null;
-  priceRange: { minVariantPrice: Money };
-}
-interface SearchCollection {
-  handle: string;
-  title: string;
-  image: SearchImage | null;
-}
-interface SearchQuery {
-  text: string;
-}
-export interface SearchResults {
-  products: SearchProduct[];
-  collections: SearchCollection[];
-  queries: SearchQuery[];
-}
-/** No results, or lists whose items have what `render` reads without a fallback. */
-const isSearchAnswer = shaped<{ predictiveSearch: SearchResults | null }>({
-  predictiveSearch: orNull({
-    products: [{ priceRange: 'object' }],
-    collections: ['object'],
-    queries: [{ text: 'string' }],
-  }),
-});
-type SearchState = 'idle' | 'loading' | 'ready' | 'empty' | 'error';
-interface BindValues {
-  title?: string;
-  price?: string;
-  text?: string;
-  image?: SearchImage | null;
-}
-
-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';
-
-const mounted = new WeakSet<Element>();
-let searchBoxCount = 0;
-
-/** @returns The attribute as an integer; `fallback` when it is missing, zero or not a number. */
-function integerAttribute(el: Element, name: string, fallback: number): number {
-  return parseInt(get(el, name) || '', 10) || fallback;
-}
-
-/** @returns `node` when it is a link, else its first link. */
-const linkIn = (node: Element): Element | null => (node.tagName === 'A' ? node : node.querySelector('a'));
-
-function bindValues(node: HTMLElement, values: BindValues) {
-  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 href `null` for a product without a page: the option shows, without a link. */
-function linkOption(node: Element, href: string | null) {
-  const link = linkIn(node);
-  if (!link) return;
-  if (href) link.setAttribute('href', href);
-  link.setAttribute('role', 'option');
-}
-
-/** One `[tether-search]` root: its input, its results and the search in flight. */
-class SearchBox {
-  readonly root: HTMLElement;
-  readonly input: HTMLInputElement;
-  readonly results: HTMLElement;
-  readonly limit: number;
-  readonly minCharacters: number;
-  readonly resultsId: string;
-  /** Counts searches, so only the latest one renders. */
-  searchNumber = 0;
-  timer: ReturnType<typeof setTimeout> | undefined = undefined;
-  lastTerm = '';
-  /** Results per term, for typing back and forth. */
-  readonly cache = new Map<string, SearchResults | null>();
-
-  constructor(root: HTMLElement, input: HTMLInputElement, results: HTMLElement) {
-    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;
-    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(event.target as Node | null)) this.open(false);
-    });
-  }
-
-  setState(state: SearchState) {
-    this.root.setAttribute(attr('search-state'), state);
-  }
-
-  open(open: boolean) {
-    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"]');
-  }
-
-  async fetchResults(term: string): Promise<SearchResults | null> {
-    const cached = this.cache.get(term);
-    if (cached) return cached;
-    const data = await gql(QUERY, { q: term, limit: this.limit }, isSearchAnswer);
-    this.cache.set(term, data.predictiveSearch);
-    return data.predictiveSearch;
-  }
-
-  async search(term: string) {
-    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');
-    }
-  }
-
-  /** @param name The list attribute, e.g. `search-products`. */
-  fillList<Item>(name: string, items: readonly Item[], render: (node: HTMLElement, item: Item) => void) {
-    qsa(this.results, sel(name)).forEach((list) => {
-      repeat(list, items, render);
-      show(list, items.length > 0);
-    });
-  }
-
-  queryUrl(text: string) {
-    const action = this.root.getAttribute('action') || DEFAULT_ACTION;
-    const separator = action.includes('?') ? '&' : '?';
-    return `${action}${separator}${this.input.name || 'q'}=${encodeURIComponent(text)}`;
-  }
-
-  render(results: SearchResults | null, term: string) {
-    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);
-  }
-
-  showCount(count: number) {
-    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');
-    });
-  }
-
-  highlight(options: HTMLElement[], index: number) {
-    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.
-    (option as Partial<Pick<HTMLElement, 'scrollIntoView'>>).scrollIntoView?.({ block: 'nearest' });
-  }
-
-  onKeydown(event: KeyboardEvent) {
-    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.
- */
-export function mountSearch(root: ParentNode & Partial<Pick<Element, 'matches'>> = document): void {
-  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 = el.querySelector<HTMLInputElement>(sel('search-input')) ?? el.querySelector('input');
-    const results = el.querySelector<HTMLElement>(sel('search-results'));
-    if (input && results) new SearchBox(el, input, results);
-  }
-}

package/src/selling-plans.ts

@@ -1,145 +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 { fromMinorUnits, toMinorUnits } from './amounts.ts';
-import type { Money } from './shopify-values.ts';
-import type { SellingPlan, SellingPlanGroup, SellingPlanAllocation } from './fragments.ts';
-
-const PERCENT = 100;
-
-/** A plan with the group it belongs to. */
-export type PlanInGroup = SellingPlan & { group: SellingPlanGroup };
-export interface ProductWithPlans {
-  sellingPlanGroups?: { nodes: SellingPlanGroup[] } | null;
-}
-/** A variant as far as plans go. A cart line's variant has no allocations. */
-export interface VariantWithPlans {
-  price: Money;
-  sellingPlanAllocations?: { nodes: SellingPlanAllocation[] } | null;
-}
-export type PlanAdjustment =
-  { type: 'percentage'; value: number } | { type: 'amount'; value: Money } | { type: 'price'; value: Money };
-
-/**
- * @param value A gid, a numeric id, or anything else.
- * @param type The Shopify type, e.g. `ProductVariant`.
- * @returns The gid of a numeric id; a gid or other value as written; `null` when empty.
- */
-export function toGid(value: unknown, type: string): string | null {
-  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 = {
-  product: (value: unknown) => toGid(value, 'Product'),
-  variant: (value: unknown) => toGid(value, 'ProductVariant'),
-  sellingPlan: (value: unknown) => toGid(value, 'SellingPlan'),
-};
-
-/** @returns All plans of the product, flattened. */
-export function allPlans(product: ProductWithPlans | null | undefined): PlanInGroup[] {
-  const groups = product?.sellingPlanGroups?.nodes ?? [];
-  return groups.flatMap((group) => group.sellingPlans.nodes.map((plan) => ({ ...plan, group })));
-}
-
-export function hasPlans(product: ProductWithPlans | null | undefined): boolean {
-  return allPlans(product).length > 0;
-}
-
-/** @returns The variant's allocation on the plan; `null` when the variant isn't in it. */
-export function allocationFor(
-  variant: VariantWithPlans | null | undefined,
-  planId: string | null | undefined,
-): SellingPlanAllocation | null {
-  if (!variant || !planId) return null;
-  const allocations = variant.sellingPlanAllocations?.nodes ?? [];
-  return allocations.find((allocation) => allocation.sellingPlan.id === planId) ?? null;
-}
-
-/** @returns The plans this variant can be bought on. */
-export function plansForVariant(
-  product: ProductWithPlans | null | undefined,
-  variant: VariantWithPlans | null | undefined,
-): PlanInGroup[] {
-  return allPlans(product).filter((plan) => allocationFor(variant, plan.id));
-}
-
-/** @returns The price per delivery on the plan; the one-time price when the variant isn't on it. */
-export function planPrice(
-  variant: VariantWithPlans | null | undefined,
-  planId: string | null | undefined,
-): Money | null {
-  const adjustment = allocationFor(variant, planId)?.priceAdjustments[0];
-  return adjustment?.perDeliveryPrice ?? adjustment?.price ?? variant?.price ?? null;
-}
-
-/** @returns What the customer pays at checkout on the plan (prepaid plans charge more up front). */
-export function planCheckoutCharge(
-  variant: VariantWithPlans | null | undefined,
-  planId: string | null | undefined,
-): Money | null {
-  const allocation = allocationFor(variant, planId);
-  return allocation?.checkoutChargeAmount ?? allocation?.priceAdjustments[0]?.price ?? variant?.price ?? null;
-}
-
-/** @returns What the plan saves on the one-time price; no amount and 0% when it saves nothing. */
-export function planSavings(
-  variant: VariantWithPlans | null | undefined,
-  planId: string | null | undefined,
-): { amount: Money | null; percentage: number } {
-  const onPlanPrice = planPrice(variant, planId);
-  if (!variant || !onPlanPrice) return { amount: null, percentage: 0 };
-  const oneTime = parseFloat(variant.price.amount);
-  const onPlan = parseFloat(onPlanPrice.amount);
-  if (!Number.isFinite(oneTime) || !Number.isFinite(onPlan) || oneTime <= 0 || onPlan >= oneTime) {
-    return { amount: null, percentage: 0 };
-  }
-  const saved = toMinorUnits(variant.price) - toMinorUnits(onPlanPrice);
-  return {
-    amount: fromMinorUnits(saved, variant.price.currencyCode),
-    percentage: Math.round((1 - onPlan / oneTime) * PERCENT),
-  };
-}
-
-/**
- * @returns The plan's own discount, whatever the variant: a percentage, a fixed amount off or a fixed price.
- */
-export function planAdjustment(plan: Pick<SellingPlan, 'priceAdjustments'> | null | undefined): PlanAdjustment | null {
-  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"`.
- */
-export function findPlan(
-  product: ProductWithPlans | null | undefined,
-  ref: string | null | undefined,
-): PlanInGroup | null {
-  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
-  );
-}