@occluze/tether 0.6.8 → 0.7.1

package/src/variant-render.js

@@ -1,165 +0,0 @@
-/**
- * The DOM writes of a product scope that follow the visitor's choice, on every change: `product-state.js`'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.js';
-import { STATUS_KEYS, ownedBy } from './status.js';
-import { allocationFor } from './selling-plans.js';
-import { isValueAvailable, planBindTexts, variantBindTexts } from './product-state.js';
-import { isSelect, selectsIn } from './product-render.js';
-/** @import { Formatters, ProductView } from './product-state.js' */
-/** @import { RenderScope } from './product-render.js' */
-
-/** @type {Formatters} */
-const FORMAT = { money: formatMoney, percent: formatPercent };
-
-/**
- * @param {Element} el
- * @returns {el is HTMLInputElement}
- */
-const isInput = (el) => 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.
- *
- * @param {HTMLElement} button
- * @returns {{ label: HTMLElement, original: string }}
- */
-export function addButtonLabel(button) {
-  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 };
-}
-
-/**
- * @param {RenderScope} scope
- * @param {ProductView} view
- */
-function renderOptionStates(scope, view) {
-  const { product } = scope;
-  const selectedValue = (/** @type {string | null} */ authored) => 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.
- *
- * @param {RenderScope} scope
- * @param {ProductView} view
- */
-function renderPurchaseStates(scope, view) {
-  const { variant, purchase, isSubscription } = 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, isSubscription && planId === purchase.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 = isSubscription ? (purchase.planId ?? '') : '';
-  });
-}
-
-/**
- * The `tether-show` conditions, with the scope's own status: a product scope that renders is ready.
- *
- * @param {RenderScope} scope
- * @param {ProductView} view
- */
-function renderConditions(scope, view) {
-  /** @type {Map<string, boolean>} */
-  const conditions = new Map(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);
-  });
-}
-
-/**
- * @param {RenderScope} scope
- * @param {ProductView} view
- */
-function renderAddButtons(scope, view) {
-  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.isSubscription && subscribeText) text = subscribeText;
-    if (disabled && soldOutText) text = soldOutText;
-    if (button.getAttribute('aria-busy') !== 'true') setText(label, text);
-  });
-}
-
-/**
- * Writes what follows the variant and purchase.
- *
- * @param {RenderScope} scope
- * @param {ProductView} view
- */
-export function writeVariant(scope, view) {
-  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.isSubscription);
-  scope.root.setAttribute(attr('purchase-mode'), view.isSubscription ? 'subscription' : 'one-time');
-  renderAddButtons(scope, view);
-}

package/types/astro.d.ts

@@ -1,28 +0,0 @@
-import type { TetherConfig } from './index.js';
-
-type Serializable<T> = {
-  [
-    K in keyof T as T[K] extends ((...args: any[]) => any) | null | undefined
-      ? Exclude<T[K], null | undefined> extends (...args: any[]) => any
-        ? never
-        : K
-      : K
-  ]: T[K];
-};
-
-export interface TetherAstroOptions extends Partial<Serializable<TetherConfig>> {
-  /** Add the Tether script to every page (default true). False: import and init it yourself. */
-  inject?: boolean;
-  /** Files that restart the dev server when they change (default: src/shop.config.js/.mjs/.ts). */
-  watch?: string[];
-}
-
-/**
- * Astro integration: Tether on every page, store and token from .env
- * (PUBLIC_SHOPIFY_DOMAIN, PUBLIC_SHOPIFY_STOREFRONT_TOKEN). Functions (onError, hooks) go in
- * window.TETHER_CONFIG in your layout.
- */
-export default function tether(options?: TetherAstroOptions): {
-  name: string;
-  hooks: Record<string, (...args: any[]) => unknown>;
-};

package/types/barba.d.ts

@@ -1,16 +0,0 @@
-import type { TetherConfig } from './index.js';
-
-export interface BarbaPresetOptions {
-  gsap?: () => unknown;
-  lenis?: (() => { resize?(): void; stop?(): void; start?(): void } | null | undefined) | null;
-  scrollTrigger?: () => unknown;
-  lockScroll?: ((drawer: HTMLElement) => void) | null;
-  unlockScroll?: (() => void) | null;
-  onResize?: (() => void) | null;
-  onValueChange?: ((el: HTMLElement, previousText: string) => void) | null;
-  animateLines?: boolean;
-  lineDuration?: number;
-}
-
-/** Hooks for sites with page transitions, smooth scroll and GSAP: spread into Tether.init(). */
-export declare function barbaPreset(options?: BarbaPresetOptions): Partial<TetherConfig>;