@occluze/tether 0.6.8 → 0.7.1

package/src/page-market.js

@@ -1,116 +0,0 @@
-/**
- * The market the page uses: a page built for one market (`<meta name="tether-page-country">`) wins, then the visitor's
- * saved or detected market, then the configured one. Init applies it to `cfg` once. Astro's ClientRouter keeps the
- * script running across pages, so each arrival asks again: the next page may be built for another market, or for none.
- */
-import { cfg, log, reportError } from './config.js';
-import { loadPart } from './lazy.js';
-import { toCountry, toLanguage } from './market-codes.js';
-import { readSavedMarket } from './markets.js';
-/** @import { TetherOptions } from './config.js' */
-/** @import { Market, DetectedMarket } from './markets.js' */
-/** @import { SetCountryOptions } from './markets-ui.js' */
-/** @import { ShopifyCart } from './cart/store.js' */
-
-/**
- * @typedef {object} ConfiguredMarket The market of the config, before a page's or visitor's market applied.
- * @property {string | undefined} country
- * @property {string | undefined} language
- * @property {string | undefined} locale
- */
-
-/** @type {ConfiguredMarket} */
-let configuredMarket = { country: undefined, language: undefined, locale: undefined };
-
-/** Whether the page arrived at last was built for its own market, which the next page without one switches back from. */
-let lastPageHadOwnMarket = false;
-
-/**
- * `<meta name="tether-page-country" content="DE">`, with `tether-page-language` and `tether-page-locale`. Never
- * remembered: it belongs to the page, not to the visitor.
- *
- * @returns {Market | null} `null` when the page has no valid country of its own.
- */
-function pageMarket() {
-  /** @param {string} name */
-  const meta = (name) =>
-    document.querySelector(`meta[name="${cfg.prefix}-page-${name}"]`)?.getAttribute('content') || undefined;
-  const country = toCountry(meta('country'));
-  if (!country) return null;
-  return { country, language: toLanguage(meta('language')) ?? undefined, locale: meta('locale') };
-}
-
-/**
- * Without `markets.detect` only the visitor's saved choice applies, read without loading the markets part.
- *
- * @returns {Promise<Market | DetectedMarket | null>}
- */
-async function visitorMarket() {
-  const markets = cfg.markets ?? {};
-  if (markets.detect === false) return null;
-  if (!markets.detect) return markets.remember === false ? null : readSavedMarket();
-  try {
-    return (await loadPart('markets')).detectMarket(markets);
-  } catch (error) {
-    reportError(error, 'markets');
-    return null;
-  }
-}
-
-/**
- * Sets `cfg`'s market for the first page, over the configured one.
- *
- * @param {TetherOptions} overrides What `init()` was called with: a `locale` there wins over the visitor's.
- * @returns {Promise<void>}
- */
-export async function applyStartMarket(overrides) {
-  configuredMarket = { country: cfg.country, language: cfg.language, locale: cfg.locale };
-  const page = pageMarket();
-  lastPageHadOwnMarket = page !== null;
-  if (page) {
-    cfg.country = page.country;
-    cfg.language = page.language;
-    if (page.locale) cfg.locale = page.locale;
-    return;
-  }
-  const market = await visitorMarket();
-  if (!market) return;
-  if (market.country) cfg.country = market.country;
-  if (market.language) cfg.language = market.language;
-  if (market.locale && !overrides.locale) cfg.locale = market.locale;
-  log('market', market);
-}
-
-/**
- * @param {string | undefined} a
- * @param {string | undefined} b
- */
-const sameCode = (a, b) => (a ?? '').toUpperCase() === (b ?? '').toUpperCase();
-
-/**
- * The market to switch to on arriving at the current page. A page built for a market switches to it; the first page
- * without one after such a page switches back to the visitor's own choice, else to the configured market.
- *
- * @returns {{ country: string, language: string | undefined, locale: string | undefined } | null} `null` when the page
- *   stays in the market in use.
- */
-export function marketForArrival() {
-  const page = pageMarket();
-  const leftOwnMarket = page === null && lastPageHadOwnMarket;
-  lastPageHadOwnMarket = page !== null;
-  const target = page ?? (leftOwnMarket ? (readSavedMarket() ?? configuredMarket) : null);
-  if (!target?.country) return null;
-  if (sameCode(target.country, cfg.country) && sameCode(target.language, cfg.language)) return null;
-  return { country: target.country, language: target.language, locale: target.locale };
-}
-
-/**
- * `Tether.setCountry('DE')`: loads the markets part on first use.
- *
- * @param {string} code
- * @param {SetCountryOptions} [options]
- * @returns {Promise<ShopifyCart | null>} The cart once everything is in the new market.
- */
-export function setCountry(code, options) {
-  return loadPart('markets').then((part) => part.setCountry(code, options));
-}

package/src/parts/account-pages.js

@@ -1,6 +0,0 @@
-// The <script> build's tether.account-pages.js: registers the part where the core script's loader (lazy-iife.js) finds it.
-import * as part from '../account-pages.js';
-
-const { Tether } = /** @type {Window & { Tether?: { __parts: Record<string, unknown> } }} */ (window);
-if (!Tether) throw new Error('tether.account-pages.js runs after the Tether script, which loads it');
-Tether.__parts['account-pages'] = part;

package/src/parts/account.js

@@ -1,6 +0,0 @@
-// The <script> build's tether.account.js: registers the part where the core script's loader (lazy-iife.js) finds it.
-import * as part from '../account.js';
-
-const { Tether } = /** @type {Window & { Tether?: { __parts: Record<string, unknown> } }} */ (window);
-if (!Tether) throw new Error('tether.account.js runs after the Tether script, which loads it');
-Tether.__parts['account'] = part;

package/src/parts/analytics.js

@@ -1,6 +0,0 @@
-// The <script> build's tether.analytics.js: registers the part where the core script's loader (lazy-iife.js) finds it.
-import * as part from '../analytics.js';
-
-const { Tether } = /** @type {Window & { Tether?: { __parts: Record<string, unknown> } }} */ (window);
-if (!Tether) throw new Error('tether.analytics.js runs after the Tether script, which loads it');
-Tether.__parts['analytics'] = part;

package/src/parts/diagnose.js

@@ -1,6 +0,0 @@
-// The <script> build's tether.diagnose.js: registers the part where the core script's loader (lazy-iife.js) finds it.
-import * as part from '../diagnose.js';
-
-const { Tether } = /** @type {Window & { Tether?: { __parts: Record<string, unknown> } }} */ (window);
-if (!Tether) throw new Error('tether.diagnose.js runs after the Tether script, which loads it');
-Tether.__parts['diagnose'] = part;

package/src/parts/extras.js

@@ -1,6 +0,0 @@
-// The <script> build's tether.extras.js: registers the part where the core script's loader (lazy-iife.js) finds it.
-import * as part from '../extras.js';
-
-const { Tether } = /** @type {Window & { Tether?: { __parts: Record<string, unknown> } }} */ (window);
-if (!Tether) throw new Error('tether.extras.js runs after the Tether script, which loads it');
-Tether.__parts['extras'] = part;

package/src/parts/markets.js

@@ -1,6 +0,0 @@
-// The <script> build's tether.markets.js: registers the part where the core script's loader (lazy-iife.js) finds it.
-import * as part from '../markets-ui.js';
-
-const { Tether } = /** @type {Window & { Tether?: { __parts: Record<string, unknown> } }} */ (window);
-if (!Tether) throw new Error('tether.markets.js runs after the Tether script, which loads it');
-Tether.__parts['markets'] = part;

package/src/parts/search.js

@@ -1,6 +0,0 @@
-// The <script> build's tether.search.js: registers the part where the core script's loader (lazy-iife.js) finds it.
-import * as part from '../search.js';
-
-const { Tether } = /** @type {Window & { Tether?: { __parts: Record<string, unknown> } }} */ (window);
-if (!Tether) throw new Error('tether.search.js runs after the Tether script, which loads it');
-Tether.__parts['search'] = part;

package/src/presets/barba.js

@@ -1,190 +0,0 @@
-/**
- * Preset for sites with page transitions (Barba, Swup), smooth scroll (Lenis) and GSAP. Nothing is read from globals
- * except GSAP and ScrollTrigger by default: pass in what your site has.
- *
- *   import Tether from "@occluze/tether";
- *   import { barbaPreset } from "@occluze/tether/presets/barba";
- *
- *   Tether.init({
- *     ...window.TETHER_CONFIG,
- *     ...barbaPreset({
- *       lenis: () => myLenis,                      // resized after async renders
- *       lockScroll: (drawer) => myLock.lock(drawer),  // when the cart opens
- *       unlockScroll: () => myLock.unlock(),       // when the cart closes
- *       onValueChange: (el, previous) => {},       // e.g. a text scramble
- *     }),
- *   });
- *
- *   // once per page container, e.g. in Barba's beforeEnter AND once():
- *   Tether.mount(container);
- *   // when leaving a page:
- *   Tether.unmount();
- */
-/** @import { TetherConfig } from '../config.js' */
-
-/**
- * GSAP isn't a dependency, so the two calls this preset makes are described here.
- *
- * @typedef {Record<string, string | number | (() => void)>} TweenVars
- * @typedef {object} Gsap
- * @property {(target: HTMLElement, from: TweenVars, to: TweenVars) => unknown} fromTo
- * @property {(target: HTMLElement, to: TweenVars) => unknown} to
- */
-
-/**
- * @typedef {object} BarbaPresetOptions Each getter may also be the value itself.
- * @property {() => unknown} [gsap] Default `window.gsap`.
- * @property {(() => unknown) | null} [lenis] Resized after async renders.
- * @property {() => unknown} [scrollTrigger] Default `window.ScrollTrigger`, refreshed after async renders.
- * @property {((drawer: HTMLElement) => void) | null} [lockScroll] When the cart opens.
- * @property {(() => void) | null} [unlockScroll] When the cart closes.
- * @property {(() => void) | null} [onResize] After a cart line animated in or out.
- * @property {((el: HTMLElement, previousText: string) => void) | null} [onValueChange]
- * @property {boolean} [animateLines] Animate cart lines in and out (default true).
- * @property {number} [lineDuration] Seconds.
- */
-
-/**
- * @typedef {Pick<TetherConfig, 'autoMount' | 'onLayoutChange' | 'onCartOpen' | 'onCartClose' | 'onLineEnter'
- *   | 'onLineLeave' | 'onValueChange'>} BarbaPresetConfig
- */
-
-const LINE_DURATION_SECONDS = 0.3;
-/** @returns {TweenVars} A new object each time: GSAP writes into the vars it is given. */
-const collapsed = () => ({
-  height: 0,
-  paddingTop: 0,
-  paddingBottom: 0,
-  borderBottomWidth: 0,
-  opacity: 0,
-  overflow: 'hidden',
-});
-const ANIMATED_PROPS = 'height,paddingTop,paddingBottom,borderBottomWidth,opacity,overflow';
-
-const reducedMotion = () =>
-  typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-/**
- * @param {unknown} option
- * @returns {unknown} What a getter option returns, or the option itself when it is the value.
- */
-function current(option) {
-  if (typeof option !== 'function') return option;
-  // Every function option of this preset is a getter that takes no arguments.
-  const getter = /** @type {() => unknown} */ (option);
-  return getter();
-}
-
-/**
- * Calls `target[method]()` when it has one: Lenis and ScrollTrigger are optional and versions differ.
- *
- * @param {unknown} target
- * @param {string} method
- */
-function callIfPresent(target, method) {
-  if (typeof target !== 'object' || target === null) return;
-  /** @type {unknown} */
-  const fn = Reflect.get(target, method);
-  // A method of `target`, called on it.
-  if (typeof fn === 'function') /** @type {(this: unknown) => unknown} */ (fn).call(target);
-}
-
-/**
- * @param {unknown} value
- * @returns {value is Gsap}
- */
-const isGsap = (value) =>
-  typeof value === 'object' &&
-  value !== null &&
-  typeof Reflect.get(value, 'fromTo') === 'function' &&
-  typeof Reflect.get(value, 'to') === 'function';
-
-/**
- * Hooks for sites with page transitions, smooth scroll and GSAP: spread into `Tether.init()`.
- *
- * @param {BarbaPresetOptions} [options]
- * @returns {BarbaPresetConfig}
- */
-export function barbaPreset(options = {}) {
-  const {
-    gsap = () => /** @type {unknown} */ (Reflect.get(window, 'gsap')),
-    lenis = null,
-    scrollTrigger = () => /** @type {unknown} */ (Reflect.get(window, 'ScrollTrigger')),
-    lockScroll = null,
-    unlockScroll = null,
-    onResize = null,
-    onValueChange = null,
-    animateLines = true,
-    lineDuration = LINE_DURATION_SECONDS,
-  } = options;
-
-  /** Whether this preset holds the scroll lock, so a modal's own lock stays intact. */
-  let locked = false;
-
-  /**
-   * @param {HTMLElement} node
-   * @returns {Gsap | null} GSAP, when this line should animate.
-   */
-  const animator = (node) => {
-    if (!animateLines || reducedMotion() || node.offsetHeight <= 0) return null;
-    const animation = current(gsap);
-    return isGsap(animation) ? animation : null;
-  };
-
-  return {
-    autoMount: false,
-
-    onLayoutChange() {
-      callIfPresent(current(lenis), 'resize');
-      callIfPresent(current(scrollTrigger), 'refresh');
-    },
-
-    onCartOpen(drawers) {
-      const drawer = drawers[0];
-      if (locked || typeof lockScroll !== 'function' || !drawer) return;
-      lockScroll(drawer);
-      locked = true;
-    },
-
-    onCartClose() {
-      if (locked && typeof unlockScroll === 'function') unlockScroll();
-      locked = false;
-    },
-
-    onLineEnter(node) {
-      const animation = animator(node);
-      if (!animation) return;
-      const style = getComputedStyle(node);
-      animation.fromTo(node, collapsed(), {
-        height: node.offsetHeight,
-        paddingTop: style.paddingTop,
-        paddingBottom: style.paddingBottom,
-        borderBottomWidth: style.borderBottomWidth,
-        opacity: 1,
-        duration: lineDuration,
-        clearProps: ANIMATED_PROPS,
-        onComplete: () => onResize?.(),
-      });
-    },
-
-    onLineLeave(node, done) {
-      const animation = animator(node);
-      if (!animation) {
-        done();
-        return;
-      }
-      animation.to(node, {
-        ...collapsed(),
-        duration: lineDuration,
-        onComplete: () => {
-          done();
-          onResize?.();
-        },
-      });
-    },
-
-    onValueChange: typeof onValueChange === 'function' ? onValueChange : null,
-  };
-}
-
-export default barbaPreset;

package/src/product-events.js

@@ -1,130 +0,0 @@
-/**
- * A product scope's clicks and changes: option and plan buttons, purchase toggles, quantity steppers, the selects and
- * add to cart. One delegated listener of each kind on the root, so cards a list re-renders need no new listeners.
- */
-import { reportError } from './config.js';
-import { sel, get, emit, setText, busy } from './dom.js';
-import { addButtonLabel } from './variant-render.js';
-/** @import { ProductScope } from './product.js' */
-
-const productSelector = () => sel('product');
-
-/**
- * @param {Element} el
- * @returns {el is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement}
- */
-const isField = (el) => el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA';
-
-/**
- * @param {EventTarget | null} target
- * @returns {target is Element}
- */
-const isElement = (target) => target instanceof window.Element;
-
-/**
- * @param {ProductScope} scope
- * @param {Element} target
- * @param {string} selector
- * @returns {HTMLElement | null} The nearest `selector` around `target` that belongs to the scope, not to a nested one.
- *   Typed as an HTML element, as `qsa` types its matches.
- */
-function closestOwn(scope, target, selector) {
-  const el = /** @type {HTMLElement | null} */ (target.closest(selector));
-  return el?.closest(productSelector()) === scope.root ? el : null;
-}
-
-/**
- * Adds to the cart with `aria-busy` on the button and `tether-adding-text` as its label meanwhile.
- *
- * @param {ProductScope} scope
- * @param {HTMLElement} button
- */
-function onAddClick(scope, button) {
-  const { label, original } = addButtonLabel(button);
-  const addingText = get(button, 'adding-text');
-  void busy(button, async () => {
-    if (addingText) setText(label, addingText);
-    try {
-      await scope.addToCart();
-    } catch (error) {
-      reportError(error, 'add to cart failed');
-      emit('error', { error, context: 'add-to-cart' }, scope.root);
-    } finally {
-      if (addingText) setText(label, original);
-    }
-  }).then(() => {
-    // The mode-dependent labels (tether-subscribe-text, tether-soldout-text) wait for aria-busy to clear.
-    scope.renderVariant();
-  });
-}
-
-/**
- * @param {ProductScope} scope
- * @param {Event} event
- * @param {Element} target
- */
-function onClick(scope, event, target) {
-  const optionValue = closestOwn(scope, target, sel('option-value'));
-  const optionList = optionValue?.closest(sel('option-list'));
-  if (optionValue && optionList) {
-    event.preventDefault();
-    scope.select(scope.optName(get(optionList, 'option-list')), get(optionValue, 'option-value') ?? '');
-    return;
-  }
-  const plan = closestOwn(scope, target, sel('plan-value'));
-  if (plan) {
-    event.preventDefault();
-    scope.selectPlan(get(plan, 'plan-value'));
-    return;
-  }
-  const purchase = closestOwn(scope, target, `${sel('purchase')}:not(select)`);
-  if (purchase) {
-    // A radio or checkbox input keeps its own click, so it shows checked.
-    if (purchase.tagName !== 'INPUT') event.preventDefault();
-    scope.setPurchase(get(purchase, 'purchase'));
-    return;
-  }
-  const plus = closestOwn(scope, target, sel('qty-plus'));
-  const minus = plus ? null : closestOwn(scope, target, sel('qty-minus'));
-  if (plus || minus) {
-    event.preventDefault();
-    scope.setQuantity(scope.quantity + (plus ? 1 : -1));
-    return;
-  }
-  const add = closestOwn(scope, target, sel('add-to-cart'));
-  if (add) {
-    event.preventDefault();
-    onAddClick(scope, add);
-  }
-}
-
-/**
- * @param {ProductScope} scope
- * @param {Element} target A form field in the scope.
- */
-function onChange(scope, target) {
-  const value = isField(target) ? target.value : '';
-  if (target.matches(`select${sel('option')}`)) {
-    scope.select(scope.optName(get(target, 'option')), value);
-  } else if (target.matches(`select${sel('variant-select')}`)) {
-    scope.selectVariant(value);
-  } else if (target.matches(`select${sel('plan')}`)) {
-    if (value) scope.selectPlan(value);
-    else scope.setPurchase('one-time');
-  } else if (target.matches(`select${sel('purchase')}`)) {
-    scope.setPurchase(value);
-  } else if (target.matches(sel('qty'))) {
-    scope.setQuantity(value);
-  }
-}
-
-/** @param {ProductScope} scope */
-export function bindProductEvents(scope) {
-  scope.root.addEventListener('click', (event) => {
-    if (isElement(event.target)) onClick(scope, event, event.target);
-  });
-  scope.root.addEventListener('change', (event) => {
-    const { target } = event;
-    if (isElement(target) && target.closest(productSelector()) === scope.root) onChange(scope, target);
-  });
-}