@occluze/tether 0.7.0 → 0.7.1

package/src/mounting.ts

@@ -1,264 +0,0 @@
-/**
- * The product scopes and lists on the page: mounting a product root, the live roots a country switch re-renders, and
- * the products the server rendered into the page. Shared by `index.ts` and the optional markets part.
- */
-import { cfg, log, warn, reportError } from './config.ts';
-import { ProductScope, scopes, rememberOptionNames } from './product.ts';
-import { listSelector } from './collection.ts';
-import { getProduct, takeStale, refreshProduct, hydrateProducts } from './loader.ts';
-import { resolveProductKey, setScopeStatus, isNotFound } from './status.ts';
-import { attr, get, qsa, emit } from './dom.ts';
-import { toCountry, toLanguage } from './market-codes.ts';
-import { isRecord } from '../server/src/shared/json.ts';
-import { isProductShape } from './product-shape.ts';
-import type { Product } from './fragments.ts';
-import type { CountryCode, LanguageCode } from './market-codes.ts';
-
-/** A mounted `ListScope`. */
-interface MountedList {
-  root: Element;
-  load: (more?: boolean) => Promise<unknown>;
-}
-
-type KeySource = Pick<ReturnType<typeof resolveProductKey>, 'fromUrl' | 'raw'>;
-
-/**
- * The marker on the `<script type="application/json">` tags `tether/server`'s `hydrate()` writes. It is fixed, not
- * `<prefix>-hydrate`, because the server writes it without knowing the browser's prefix.
- */
-const HYDRATE_SELECTOR = 'script[type="application/json"][data-tether-hydrate]';
-
-export const mountedProducts = new WeakSet<Element>();
-export const mountedLists = new WeakSet<Element>();
-/** Product roots to re-render after a country switch; pruned once disconnected. */
-export const liveProducts = new Set<HTMLElement>();
-/** Lists to reload after a country switch; pruned once disconnected. */
-export const liveLists = new Set<MountedList>();
-/** Each product root's latest request, so a slow older response can't win. */
-const latestRequest = new WeakMap<Element, object>();
-
-/** Forgets roots a page transition removed, so they aren't kept alive. */
-export function pruneLive(): void {
-  liveProducts.forEach((el) => {
-    if (!el.isConnected) liveProducts.delete(el);
-  });
-  liveLists.forEach((list) => {
-    if (!list.root.isConnected) liveLists.delete(list);
-  });
-}
-
-/** @returns `root` itself when it matches, then the matches inside it. */
-export function within(root: ParentNode & Partial<Pick<Element, 'matches'>>, selector: string): HTMLElement[] {
-  // A root that matches carries Tether's markup, which goes on HTML elements (see `qsa`).
-  const self = root.matches?.(selector) ? [root as HTMLElement] : [];
-  return [...self, ...qsa(root, selector)];
-}
-
-/** `tether-page-title="{title} | My shop"` on a product root sets `document.title`, for dynamic product pages. */
-function applyPageTitle(el: Element, product: Product): void {
-  const template = get(el, 'page-title');
-  if (!template || typeof document === 'undefined') return;
-  document.title = template
-    .replace(/\{title\}/g, product.title)
-    .replace(/\{vendor\}/g, product.vendor || '')
-    .replace(/\{type\}/g, product.productType || '');
-}
-
-/**
- * A product root without a key: on a dynamic page opened without `?handle=` (or with an empty path) it is a product
- * that isn't there; inside a list it gets its handle when the list renders.
- */
-function mountWithoutKey(el: HTMLElement, { fromUrl, raw }: KeySource): void {
-  if (fromUrl) {
-    mountedProducts.add(el);
-    setScopeStatus(el, 'not-found');
-    emit('product-not-found', { key: null, source: raw }, el);
-  } else if (!el.closest(listSelector())) {
-    warn(`[${attr('product')}] without a value. Bind it to the Shopify handle field, or use "url:handle".`, el);
-  }
-}
-
-function showLoadFailure(el: HTMLElement, key: string, { fromUrl, raw }: KeySource, error: unknown): void {
-  const notFound = isNotFound(error);
-  setScopeStatus(el, notFound ? 'not-found' : 'error', error);
-  if (!notFound) {
-    reportError(error, `product ${key}`);
-    emit('error', { error, context: 'product', key }, el);
-    return;
-  }
-  emit('product-not-found', { key, source: raw }, el);
-  // A typo in a URL isn't worth an alert; a CMS item pointing at a deleted product is.
-  if (fromUrl) log(`product not found: ${key}`);
-  else reportError(error, `product ${key}`);
-}
-
-/**
- * Mounts one product root.
- *
- * @returns True when a product request was started.
- */
-export function mountProduct(el: HTMLElement): boolean {
-  if (mountedProducts.has(el)) return false;
-  const { key, ...source } = resolveProductKey(el);
-  if (!key) {
-    mountWithoutKey(el, source);
-    return false;
-  }
-  mountedProducts.add(el);
-  liveProducts.add(el);
-  const request = {};
-  latestRequest.set(el, request);
-  const isLatest = () => latestRequest.get(el) === request;
-  // A rendered scope keeps showing its content while it refreshes (a country switch).
-  if (scopes.get(el)) el.setAttribute(attr('state'), 'updating');
-  else setScopeStatus(el, 'loading');
-  const loading = trackMarket(getProduct(key));
-  loading
-    .then((product) => {
-      if (!isLatest()) return;
-      const existing = scopes.get(el);
-      if (existing) existing.update(product);
-      else new ProductScope(el, product);
-      applyPageTitle(el, product);
-      if (cfg.revalidate && takeStale(key)) queueRefresh(key);
-    })
-    .catch((error: unknown) => {
-      if (isLatest()) showLoadFailure(el, key, source, error);
-    });
-  return true;
-}
-
-/** Loads again the product scopes that failed on a network or API error, for when the browser is back online. */
-export function retryFailed(): void {
-  pruneLive();
-  liveProducts.forEach((el) => {
-    if (el.getAttribute(attr('state')) !== 'error' || el.getAttribute(attr('error')) === 'not-found') return;
-    mountedProducts.delete(el);
-    mountProduct(el);
-  });
-}
-
-/** Server-rendered products to refresh in the next batch. */
-let refreshQueue = new Set<string>();
-
-function queueRefresh(key: string): void {
-  if (!refreshQueue.size) setTimeout(flushRefresh, 0);
-  refreshQueue.add(key);
-}
-
-/** @param key The key the refresh was asked for. */
-function applyRefresh(key: string, fresh: Product): void {
-  liveProducts.forEach((el) => {
-    const scope = scopes.get(el);
-    if (!scope || !el.isConnected) return;
-    const rootKey = resolveProductKey(el).key;
-    if (rootKey !== key && rootKey !== fresh.handle && rootKey !== fresh.id) return;
-    if (JSON.stringify(scope.product) !== JSON.stringify(fresh)) scope.update(fresh);
-  });
-}
-
-/** One batched background request refreshes every server-rendered product queued. */
-function flushRefresh() {
-  const keys = [...refreshQueue];
-  refreshQueue = new Set();
-  keys.forEach((key) => {
-    refreshProduct(key)
-      .then((fresh) => {
-        applyRefresh(key, fresh);
-      })
-      .catch((error: unknown) => {
-        reportError(error, `refresh ${key}`);
-      });
-  });
-}
-
-/**
- * While the page's server-rendered prices are another market's: the loads to wait for before
- * `html.tether-market-pending` goes. `null` when no market is pending.
- */
-let marketPending: Set<Promise<unknown>> | null = null;
-
-/**
- * Lists, and anything else that loads prices, hold `html.tether-market-pending` until they are in.
- *
- * @returns `loading` itself.
- */
-export const trackMarket = <T>(loading: Promise<T>): Promise<T> => {
-  marketPending?.add(loading);
-  return loading;
-};
-
-/** After a mount: drops `html.tether-market-pending` once this page's products are live. */
-export function settleMarket(): void {
-  if (!marketPending) return;
-  const waits = [...marketPending];
-  void Promise.allSettled(waits).then(() => {
-    if (!marketPending || waits.some((wait) => !marketPending?.has(wait))) return;
-    if (waits.length !== marketPending.size) {
-      settleMarket(); // more loads came in meanwhile
-      return;
-    }
-    marketPending = null;
-    document.documentElement.classList.remove(`${cfg.prefix}-market-pending`);
-  });
-}
-
-/** What `tether/server`'s `hydrate()` writes: the market it fetched in, and the products. */
-interface HydratePayload {
-  country: CountryCode | undefined;
-  language: LanguageCode | undefined;
-  products: Product[];
-}
-
-/** @param json A hydrate tag's JSON. */
-function toHydratePayload(json: unknown): HydratePayload {
-  if (!isRecord(json)) return { country: undefined, language: undefined, products: [] };
-  const { products } = json;
-  const entries: unknown[] = Array.isArray(products) ? products : [];
-  return {
-    country: toCountry(json['country']) ?? undefined,
-    language: toLanguage(json['language']) ?? undefined,
-    products: entries.filter(isProductShape),
-  };
-}
-
-/** Hydrate tags already read. */
-const readScripts = new WeakSet<Element>();
-/**
- * Uses the products in the page's hydrate tags (`tether/server` `hydrate()`) without a request. A tag made for another
- * market is skipped, and marks the page (`html.tether-market-pending`) until the live prices are in, so CSS can hide
- * prices meanwhile.
- *
- * Trust: a hydrate tag is part of the page, written by the site's own build like the rest of its HTML and scripts, so
- * its prices and products are shown until the background refresh replaces them. Whoever can write a tag into the page
- * can already write a script there; the shape check (`isProductShape`) is for a truncated or hand-written tag, which
- * is skipped instead of failing a render.
- *
- * @param root Where to look: the document for a mount (a tag may sit in `<head>` or anywhere else on the page), the
- *   added elements for `observe`.
- */
-export function hydrateFromPage(root: Document | Element = document): void {
-  within(root, HYDRATE_SELECTOR).forEach((script) => {
-    if (readScripts.has(script)) return;
-    readScripts.add(script);
-    let json: unknown;
-    try {
-      json = JSON.parse(script.textContent);
-    } catch (error) {
-      warn('bad data-tether-hydrate', error);
-      return;
-    }
-    const { country, language, products } = toHydratePayload(json);
-    // The build's option names, also for other languages.
-    rememberOptionNames(products);
-    if (country === cfg.country && language === cfg.language) {
-      hydrateProducts(products);
-      return;
-    }
-    log('hydration skipped: other market');
-    if (!marketPending) {
-      marketPending = new Set();
-      document.documentElement.classList.add(`${cfg.prefix}-market-pending`);
-    }
-  });
-}

package/src/page-market.ts

@@ -1,110 +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.ts';
-import { loadPart } from './lazy.ts';
-import { toCountry, toLanguage } from './market-codes.ts';
-import { readSavedMarket } from './markets.ts';
-import type { TetherOptions } from './config.ts';
-import type { Market, DetectedMarket } from './markets.ts';
-import type { Parts } from './lazy.ts';
-import type { ShopifyCart } from './cart/store.ts';
-
-export type SetCountryOptions = Parameters<Parts['markets']['setCountry']>[1];
-
-/** The market of the config, before a page's or visitor's market applied. */
-interface ConfiguredMarket {
-  country: string | undefined;
-  language: string | undefined;
-  locale: string | undefined;
-}
-
-let configuredMarket: 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 `null` when the page has no valid country of its own.
- */
-function pageMarket(): Market | null {
-  const meta = (name: string) =>
-    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.
- */
-async function visitorMarket(): Promise<Market | DetectedMarket | null> {
-  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 overrides What `init()` was called with: a `locale` there wins over the visitor's.
- */
-export async function applyStartMarket(overrides: TetherOptions): Promise<void> {
-  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);
-}
-
-const sameCode = (a: string | undefined, b: string | undefined) => (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 `null` when the page stays in the market in use.
- */
-export function marketForArrival(): {
-  country: string;
-  language: string | undefined;
-  locale: string | undefined;
-} | null {
-  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.
- *
- * @returns The cart once everything is in the new market.
- */
-export function setCountry(code: string, options?: SetCountryOptions): Promise<ShopifyCart | null> {
-  return loadPart('markets').then((part) => part.setCountry(code, options));
-}

package/src/part-integrity.ts

@@ -1,7 +0,0 @@
-/**
- * The Subresource Integrity hash of each optional part's file, by file name, so the core loads only the parts built
- * with it (src/lazy-iife.ts). Every `<script>` build, watch mode included, puts the hashes of the parts it built into
- * the core in place of this module (scripts/build.ts); the empty map here only lets the source type-check, and a part
- * missing from the map is not loaded.
- */
-export const PART_INTEGRITY: Readonly<Record<string, string>> = {};

package/src/parts/account-pages.ts

@@ -1,7 +0,0 @@
-// The <script> build's tether.account-pages.js: registers the part where the core script's loader (lazy-iife.ts) finds it.
-import * as part from '../account-pages.ts';
-import type { TetherInternals } from '../lazy.ts';
-
-const { Tether } = window as { Tether?: TetherInternals };
-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.ts

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

package/src/parts/analytics.ts

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

package/src/parts/diagnose.ts

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

package/src/parts/extras.ts

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

package/src/parts/markets.ts

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

package/src/parts/search.ts

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

package/src/presets/barba.ts

@@ -1,194 +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 type { TetherConfig } from '../config.ts';
-
-// GSAP isn't a dependency, so the two calls this preset makes are described here.
-type TweenVars = Record<string, string | number | (() => void)>;
-interface Gsap {
-  fromTo: (target: HTMLElement, from: TweenVars, to: TweenVars) => unknown;
-  to: (target: HTMLElement, to: TweenVars) => unknown;
-}
-
-/** `gsap`, `lenis` and `scrollTrigger` are getters, read each time they are used, so an instance made later is found. */
-interface BarbaPresetOptions {
-  /** Default `window.gsap`. */
-  gsap?: () => unknown;
-  /** Resized after async renders. */
-  lenis?: (() => unknown) | null;
-  /** Default `window.ScrollTrigger`, refreshed after async renders. */
-  scrollTrigger?: () => unknown;
-  /** When the cart opens. */
-  lockScroll?: ((drawer: HTMLElement) => void) | null;
-  /** When the cart closes. */
-  unlockScroll?: (() => void) | null;
-  /** After a cart line animated in or out. */
-  onResize?: (() => void) | null;
-  onValueChange?: TetherConfig['onValueChange'];
-  /** Animate cart lines in and out (default true). */
-  animateLines?: boolean;
-  /** Seconds. */
-  lineDuration?: number;
-}
-
-/** The hooks the preset always sets, and `onValueChange` as passed (`null` when it isn't). */
-type BarbaPresetConfig = { autoMount: false } & {
-  [Hook in 'onLayoutChange' | 'onCartOpen' | 'onCartClose' | 'onLineEnter' | 'onLineLeave']: NonNullable<
-    TetherConfig[Hook]
-  >;
-} & Pick<TetherConfig, 'onValueChange'>;
-
-export type { BarbaPresetOptions, BarbaPresetConfig };
-
-const LINE_DURATION_SECONDS = 0.3;
-/** @returns A new object each time: GSAP writes into the vars it is given. */
-const collapsed = (): TweenVars => ({
-  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;
-
-const GETTER_OPTIONS = ['gsap', 'lenis', 'scrollTrigger'] as const;
-
-/**
- * @throws {TypeError} When a getter option is a value, which JavaScript callers can pass: a value that is a function
- *   (ScrollTrigger is a class) can't be told from a getter.
- */
-function checkGetters(options: BarbaPresetOptions) {
-  for (const name of GETTER_OPTIONS) {
-    const option: unknown = options[name];
-    if (option !== undefined && option !== null && typeof option !== 'function') {
-      throw new TypeError(`barbaPreset: ${name} must be a function that returns it, such as () => ${name}`);
-    }
-  }
-}
-
-/**
- * Calls `target[method]()` when it has one: Lenis and ScrollTrigger are optional and versions differ.
- *
- * @param target An object, or a class with a static method (`ScrollTrigger.refresh()`).
- */
-function callIfPresent(target: unknown, method: string) {
-  if ((typeof target !== 'object' && typeof target !== 'function') || target === null) return;
-  const fn: unknown = Reflect.get(target, method);
-  // A method of `target`, called on it.
-  if (typeof fn === 'function') (fn as (this: unknown) => unknown).call(target);
-}
-
-const isGsap = (value: unknown): value is Gsap =>
-  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()`.
- */
-export function barbaPreset(options: BarbaPresetOptions = {}): BarbaPresetConfig {
-  checkGetters(options);
-  const {
-    gsap = (): unknown => Reflect.get(window, 'gsap'),
-    lenis = null,
-    scrollTrigger = (): 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;
-
-  /** @returns GSAP, when this line should animate. */
-  const animator = (node: HTMLElement): Gsap | null => {
-    if (!animateLines || reducedMotion() || node.offsetHeight <= 0) return null;
-    const animation = gsap();
-    return isGsap(animation) ? animation : null;
-  };
-
-  return {
-    autoMount: false,
-
-    onLayoutChange() {
-      callIfPresent(lenis?.(), 'resize');
-      callIfPresent(scrollTrigger(), 'refresh');
-    },
-
-    onCartOpen(drawers) {
-      const drawer = drawers[0];
-      if (locked || !lockScroll || !drawer) return;
-      lockScroll(drawer);
-      locked = true;
-    },
-
-    onCartClose() {
-      if (locked && unlockScroll) 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,
-  };
-}
-
-/** @alias `barbaPreset`, for `import barbaPreset from '@occluze/tether/presets/barba'`. */
-export default barbaPreset;