@occluze/tether 0.7.0 → 0.7.1

package/src/storefront/json-ld.ts

@@ -1,144 +0,0 @@
-/**
- * schema.org data for search engines (Google's product rich results): a `Product`, or a `ProductGroup` with one
- * `Product` per variant, each with its price, currency, stock, sku, image and `?variant=` link. Products that are only
- * sold on a subscription are priced at their first plan.
- */
-import { allPlans, allocationFor, planPrice } from '../selling-plans.ts';
-import { productUrl } from '../shopify-values.ts';
-import type { Product, ProductVariant } from '../fragments.ts';
-import type { Money } from '../shopify-values.ts';
-
-export interface JsonLdOptions {
-  /** The product page's absolute URL; default from the storefront's `siteUrl`. */
-  url?: string;
-  /** Default the product's vendor. */
-  brand?: string;
-}
-
-/** Where the product pages are. */
-interface JsonLdSite {
-  productPath: string;
-  siteUrl: string | undefined;
-}
-
-/** The option names schema.org has a property for: a `ProductGroup` varies by them. */
-const VARIES_BY: Readonly<Record<string, string>> = {
-  size: 'https://schema.org/size',
-  color: 'https://schema.org/color',
-  colour: 'https://schema.org/color',
-  material: 'https://schema.org/material',
-};
-
-/**
- * Text for a `<script>` tag: `<` is escaped so product text can never close the tag, and U+2028 / U+2029 so older
- * JavaScript parsers read it.
- */
-export const scriptJson = (value: unknown): string =>
-  JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/\u2028/g, '\\u2028')
-    .replace(/\u2029/g, '\\u2029');
-
-/** @returns `value` without its `undefined` fields, nested ones too. */
-function withoutUndefined(value: Record<string, unknown>): Record<string, unknown> {
-  const copy: unknown = JSON.parse(JSON.stringify(value));
-  // The JSON of an object is an object.
-  return copy as Record<string, unknown>;
-}
-
-const numericId = (gid: string) => gid.split('/').pop() ?? gid;
-
-/** @returns The schema.org availability. */
-function availability(variant: ProductVariant): string {
-  if (!variant.availableForSale) return 'https://schema.org/OutOfStock';
-  return variant.currentlyNotInStock ? 'https://schema.org/BackOrder' : 'https://schema.org/InStock';
-}
-
-/** @returns The variant's price, or its first plan's for a product sold only on a subscription. */
-function offeredPrice(product: Product, variant: ProductVariant): Money {
-  if (!product.requiresSellingPlan) return variant.price;
-  const plan = allPlans(product).find((candidate) => allocationFor(variant, candidate.id));
-  return (plan && planPrice(variant, plan.id)) ?? variant.price;
-}
-
-function offer(product: Product, variant: ProductVariant, pageUrl: string | undefined) {
-  const price = offeredPrice(product, variant);
-  const separator = pageUrl?.includes('?') ? '&' : '?';
-  return {
-    '@type': 'Offer',
-    price: price.amount,
-    priceCurrency: price.currencyCode,
-    availability: availability(variant),
-    url: pageUrl ? `${pageUrl}${separator}variant=${numericId(variant.id)}` : undefined,
-  };
-}
-
-function variantProduct(
-  product: Product,
-  variant: ProductVariant,
-  pageUrl: string | undefined,
-  images: readonly string[],
-) {
-  // schema.org property name → the variant's value.
-  const properties = variant.selectedOptions.flatMap((option): [string, string][] => {
-    const property = VARIES_BY[option.name.toLowerCase()];
-    return property ? [[property.split('/').pop() ?? property, option.value]] : [];
-  });
-  return {
-    '@type': 'Product',
-    name: `${product.title} - ${variant.title}`,
-    sku: variant.sku || undefined,
-    image: variant.image?.url || images[0],
-    ...Object.fromEntries(properties),
-    offers: offer(product, variant, pageUrl),
-  };
-}
-
-function pageUrlOf(product: Product, { url }: JsonLdOptions, site: JsonLdSite): string | undefined {
-  if (url) return url;
-  const path = productUrl(site.productPath, product.handle, product.id);
-  if (!site.siteUrl || !path) return undefined;
-  return new URL(path, site.siteUrl).toString();
-}
-
-/** @returns The schema.org object, `null` without a product. */
-export function jsonLdData(
-  product: Product | null | undefined,
-  options: JsonLdOptions,
-  site: JsonLdSite,
-): Record<string, unknown> | null {
-  if (!product) return null;
-  const pageUrl = pageUrlOf(product, options, site);
-  const images = product.images.nodes.map((image) => image.url).filter(Boolean);
-  const brandName = options.brand || product.vendor;
-  const brand = brandName ? { '@type': 'Brand', name: brandName } : undefined;
-  const description = product.description.trim() || undefined;
-  const variants = product.variants.nodes;
-  if (variants.length <= 1) {
-    const [variant] = variants;
-    return withoutUndefined({
-      '@context': 'https://schema.org',
-      '@type': 'Product',
-      name: product.title,
-      description,
-      url: pageUrl,
-      image: images,
-      sku: variant?.sku || undefined,
-      brand,
-      offers: variant ? offer(product, variant, pageUrl) : undefined,
-    });
-  }
-  const variesBy = product.options.map((option) => VARIES_BY[option.name.toLowerCase()]).filter(Boolean);
-  return withoutUndefined({
-    '@context': 'https://schema.org',
-    '@type': 'ProductGroup',
-    name: product.title,
-    description,
-    url: pageUrl,
-    productGroupID: numericId(product.id),
-    image: images,
-    brand,
-    variesBy: [...new Set(variesBy)],
-    hasVariant: variants.map((variant) => variantProduct(product, variant, pageUrl, images)),
-  });
-}

package/src/variant-render.ts

@@ -1,139 +0,0 @@
-/**
- * The DOM writes of a product scope that follow the visitor's choice, on every change: `product-state.ts`'s view as
- * text, selected and unavailable states, `tether-show` conditions and the add-to-cart buttons.
- */
-import { attr, sel, get, qsa, formatMoney, formatPercent, setText, setImage, setSelected, show } from './dom.ts';
-import { STATUS_KEYS, ownedBy } from './status.ts';
-import { allocationFor } from './selling-plans.ts';
-import { isValueAvailable, planBindTexts, variantBindTexts } from './product-state.ts';
-import { isSelect, selectsIn } from './product-render.ts';
-import type { Formatters, ProductView } from './product-state.ts';
-import type { RenderScope } from './product-render.ts';
-
-const FORMAT: Formatters = { money: formatMoney, percent: formatPercent };
-
-const isInput = (el: Element): el is HTMLInputElement => el.tagName === 'INPUT';
-
-/**
- * The element of an add-to-cart button that holds its label, with the label as written kept in
- * `data-tether-label`, so mode-dependent texts (`tether-subscribe-text`, `tether-soldout-text`) can be undone.
- */
-export function addButtonLabel(button: HTMLElement): { label: HTMLElement; original: string } {
-  const label = qsa(button, sel('add-label'))[0] ?? button;
-  const original = label.dataset['tetherLabel'] ?? (isInput(label) ? label.value : label.textContent);
-  label.dataset['tetherLabel'] = original;
-  return { label, original };
-}
-
-function renderOptionStates(scope: RenderScope, view: ProductView): void {
-  const { product } = scope;
-  const selectedValue = (authored: string | null) => view.selected[scope.optName(authored)] ?? '';
-  scope.$(sel('option-selected')).forEach((el) => {
-    setText(el, selectedValue(get(el, 'option-selected')));
-  });
-  scope.$(sel('option-list')).forEach((container) => {
-    const name = scope.optName(get(container, 'option-list'));
-    qsa(container, sel('option-value')).forEach((node) => {
-      const value = get(node, 'option-value') ?? '';
-      setSelected(node, view.selected[name] === value);
-      const unavailable = !isValueAvailable(product, view.selected, name, value);
-      node.classList.toggle('is-unavailable', unavailable);
-      node.setAttribute('data-unavailable', unavailable ? 'true' : 'false');
-    });
-  });
-  selectsIn(scope, sel('option')).forEach((select) => {
-    select.value = selectedValue(get(select, 'option'));
-  });
-  selectsIn(scope, sel('variant-select')).forEach((select) => {
-    select.value = view.variant.id;
-  });
-}
-
-/**
- * The purchase toggles and the plan list and select.
- */
-function renderPurchaseStates(scope: RenderScope, view: ProductView): void {
-  const { variant, purchase, line } = view;
-  scope.$(sel('purchase')).forEach((el) => {
-    if (isSelect(el)) {
-      el.value = purchase.kind;
-      return;
-    }
-    const mode = get(el, 'purchase');
-    setSelected(el, mode === purchase.kind);
-    const unavailable = mode === 'subscription' ? !view.subscriptionAvailable : scope.product.requiresSellingPlan;
-    el.classList.toggle('is-unavailable', unavailable);
-  });
-  scope.$(sel('plan-value')).forEach((node) => {
-    const planId = get(node, 'plan-value') ?? '';
-    setSelected(node, line.kind === 'subscription' && planId === line.planId);
-    node.classList.toggle('is-unavailable', !allocationFor(variant, planId));
-    const plan = scope.plans.find((candidate) => candidate.id === planId);
-    const texts = planBindTexts(variant, planId, plan, FORMAT);
-    qsa(node, sel('plan-bind')).forEach((el) => {
-      const text = texts.get(get(el, 'plan-bind') ?? '');
-      if (text) setText(el, text());
-    });
-  });
-  selectsIn(scope, sel('plan')).forEach((select) => {
-    select.value = line.kind === 'subscription' ? line.planId : '';
-  });
-}
-
-/**
- * The `tether-show` conditions, with the scope's own status: a product scope that renders is ready.
- */
-function renderConditions(scope: RenderScope, view: ProductView): void {
-  const conditions = new Map<string, boolean>(Object.entries(view.show));
-  STATUS_KEYS.forEach((status) => conditions.set(status, status === 'ready'));
-  scope.$(sel('show')).forEach((el) => {
-    const key = get(el, 'show') ?? '';
-    const visible = conditions.get(key);
-    if (visible === undefined) return;
-    // State blocks of a list nested in this product belong to that list.
-    if (STATUS_KEYS.some((status) => status === key) && !ownedBy(el, scope.root)) return;
-    show(el, visible);
-  });
-}
-
-function renderAddButtons(scope: RenderScope, view: ProductView): void {
-  const disabled = !view.variant.availableForSale;
-  scope.$(sel('add-to-cart')).forEach((button) => {
-    button.classList.toggle('is-disabled', disabled);
-    button.setAttribute('aria-disabled', String(disabled));
-    // A <button> or <input> is disabled; a link or div carries only aria-disabled.
-    if ('disabled' in button) button.disabled = disabled;
-    const soldOutText = get(button, 'soldout-text');
-    const subscribeText = get(button, 'subscribe-text');
-    if (!soldOutText && !subscribeText) return;
-    const { label, original } = addButtonLabel(button);
-    let text = original;
-    if (view.line.kind === 'subscription' && subscribeText) text = subscribeText;
-    if (disabled && soldOutText) text = soldOutText;
-    if (button.getAttribute('aria-busy') !== 'true') setText(label, text);
-  });
-}
-
-/**
- * Writes what follows the variant and purchase.
- */
-export function writeVariant(scope: RenderScope, view: ProductView): void {
-  const { variant } = view;
-  const { product } = scope;
-  const texts = variantBindTexts(view, FORMAT);
-  scope.$(sel('bind')).forEach((el) => {
-    const key = get(el, 'bind') ?? '';
-    if (key === 'variant-image') {
-      setImage(el, variant.image?.url || product.featuredImage?.url, variant.image?.altText || product.title);
-      return;
-    }
-    const text = texts.get(key);
-    if (text) setText(el, text());
-  });
-  renderOptionStates(scope, view);
-  renderPurchaseStates(scope, view);
-  renderConditions(scope, view);
-  scope.root.classList.toggle('is-subscription', view.line.kind === 'subscription');
-  scope.root.setAttribute(attr('purchase-mode'), view.line.kind);
-  renderAddButtons(scope, view);
-}