@occluze/tether 0.6.7 → 0.7.0

package/dist/types/src/config-sections.d.ts

@@ -0,0 +1,40 @@
+import type { AccountConfig, AnalyticsConfig, MarketsConfig, MetafieldIdentifier, MetafieldRef } from './config.js';
+/** Warns that an option was dropped. */
+type Invalid = (name: string, value: unknown) => void;
+/** A host name, without protocol or path: what `domainOption` keeps of the `domain` option. */
+export type ShopDomain = string & {
+    readonly __brand: 'ShopDomain';
+};
+/** Every source `markets.detect` reads. */
+export declare const MARKET_SOURCES: readonly ('saved' | 'server' | 'webflow')[];
+/**
+ * @returns The store's domain without protocol or path (`https://shop.example/x` → `shop.example`), `''` for anything
+ *   that isn't a host name.
+ */
+export declare function domainOption(value: unknown, invalid: Invalid): ShopDomain | '';
+/**
+ * The folder of the optional parts. It must be https or on this site, which keeps parts off plain http (mixed content,
+ * rewritable on the way); it doesn't vouch for the host, which the site chose.
+ *
+ * @returns The folder as written, `null` for none or one elsewhere (the parts then load beside the core).
+ */
+export declare function partsUrlOption(value: unknown, invalid: Invalid): string | null;
+/**
+ * The origins a site lets description iframes load from. Each one is trusted to show only what the site expects in a
+ * description, so only a bare https origin is taken: a path would suggest a narrower trust than is given.
+ *
+ * @returns The valid origins; each other entry is skipped with a warning.
+ */
+export declare function embedOriginsOption(value: unknown, invalid: Invalid): string[];
+/** @returns The identifier of `'namespace.key'` or `{ namespace, key }`, when both parts are valid identifiers. */
+export declare function toMetafieldIdentifier(ref: unknown): MetafieldIdentifier | null;
+/** @returns The refs that name a valid identifier, as written; each other one is skipped with a warning. */
+export declare function metafieldsOption(value: unknown, invalid: Invalid): MetafieldRef[];
+/**
+ * @param warn Says why an `account` without a usable `server` is off.
+ * @returns `null` without a usable `account.server`: nothing of the account part loads.
+ */
+export declare function accountOption(value: unknown, invalid: Invalid, warn: (message: string) => void): AccountConfig | null;
+export declare const marketsOption: (value: unknown, invalid: Invalid) => MarketsConfig | null;
+export declare const analyticsOption: (value: unknown, invalid: Invalid) => AnalyticsConfig | null;
+export {};

package/dist/types/src/config.d.ts

@@ -0,0 +1,185 @@
+export { MARKET_SOURCES } from './config-sections.js';
+import type { ApiVersion } from '../server/src/shared/api-versions.js';
+import type { ShopDomain } from './config-sections.js';
+import type { Money } from './shopify-values.js';
+import type { CountryCode, LanguageCode } from './market-codes.js';
+/** Where the visitor's market comes from (`markets.ts`). */
+export interface MarketsConfig {
+    /** True: every source; a list: only those. */
+    detect?: boolean | ('saved' | 'server' | 'webflow')[];
+    /** Webflow locale (subdirectory or html lang) to market. */
+    locales?: Record<string, {
+        country?: string;
+        language?: string;
+        locale?: string;
+    }>;
+    /** The cookie a server sets with the visitor's country. */
+    cookie?: string;
+    /** Remember the visitor's choice (default true). */
+    remember?: boolean;
+    /** With `locales`: ignore an html lang that isn't in the map. */
+    strict?: boolean;
+}
+/** The optional analytics part. */
+export interface AnalyticsConfig {
+    /** GA4/GTM events, into `window.dataLayer` or the named array. */
+    dataLayer?: boolean | string;
+    /** Shopify's own analytics. `proxy`: the site serves the Storefront API on its own domain. */
+    shopify?: boolean | {
+        consent?: 'no-banner' | 'default-banner' | 'custom-banner';
+        proxy?: boolean;
+    };
+    onEvent?: (name: string, data: Record<string, unknown>) => void;
+}
+/** The optional customer accounts part, which runs through the site's Worker. */
+export interface AccountConfig {
+    /** The Worker's account routes, a URL or a path on this site. */
+    server: string;
+    /** The site's own order page, with `{id}` for the numeric order id. */
+    orderUrl?: string;
+    /** Shopify's subscription management page. */
+    subscriptionsUrl?: string;
+    /** A separate page for payment methods (default `subscriptionsUrl`). */
+    paymentUrl?: string;
+    /** Where Shopify sends the visitor after logout (default the home page). */
+    logoutUrl?: string;
+    /** The language of Shopify's login pages. */
+    locale?: string;
+    /** Replaces `location.assign` for the login redirect (popups, tests). */
+    navigate?: (url: string) => void;
+}
+export interface MetafieldIdentifier {
+    namespace: string;
+    key: string;
+}
+/** `'namespace.key'` or the identifier itself. */
+export type MetafieldRef = string | MetafieldIdentifier;
+/** Shopify's note on a cart change. */
+export interface CartWarning {
+    code: string;
+    message: string;
+    target?: string;
+}
+export type CheckoutTarget = '_self' | '_blank';
+type PurchaseKind = 'one-time' | 'subscription';
+/** Every option, with its default filled in. */
+export interface TetherConfig {
+    /** The store's domain, without protocol or path; `''` until one is set. */
+    domain: ShopDomain | '';
+    /** The public Storefront API access token. */
+    token: string;
+    /** A dated Shopify API version (or `unstable`, with a warning). */
+    apiVersion: ApiVersion | 'unstable';
+    /** The market's country, for `@inContext(country:)`. */
+    country: CountryCode | undefined;
+    /** The market's language, for `@inContext(language:)`. */
+    language: LanguageCode | undefined;
+    /** An `Intl` locale for money and dates. */
+    locale: string | undefined;
+    markets: MarketsConfig | null;
+    /** The attribute prefix: `tether` reads `tether-product`, `tether-bind`. */
+    prefix: string;
+    /** A folder (`/product`) or a template with `{handle}` / `{id}`. */
+    productPath: string;
+    collectionPath: string;
+    /** The product metafields to fetch. */
+    metafields: MetafieldRef[];
+    /** Origins (`https://video.example`) a description's iframes may load from, besides the built-in video players. */
+    embedOrigins: string[];
+    imagesFirst: number;
+    variantsFirst: number;
+    sellingPlanGroupsFirst: number;
+    sellingPlansFirst: number;
+    collectionFirst: number;
+    /** Retries of a request that failed on the network, a 429/5xx or Shopify's throttling. */
+    retries: number;
+    /** Refresh server-rendered products once in the background. */
+    revalidate: boolean;
+    /** The localStorage key of the cart id (default `<prefix>:cart:<domain>`). */
+    storageKey: string;
+    cartDrawerOpenClass: string;
+    openCartOnAdd: boolean;
+    /** Move focus into the open cart, keep Tab inside it, restore it on close. */
+    cartFocus: boolean;
+    checkoutTarget: CheckoutTarget;
+    defaultPurchase: PurchaseKind;
+    /** `?variant=` follows the visitor's choice on the page's main product. */
+    variantUrl: boolean;
+    /** Seconds a Shopify answer may be cached; 0 leaves it to Shopify, which can be hours. */
+    maxAge: number;
+    /** `tether-show="low-stock"` at this many or fewer (needs inventory access). */
+    lowStock: number;
+    /** Milliseconds the search part waits after the last keystroke. */
+    searchDelay: number;
+    /** Mount the document on DOMContentLoaded. */
+    autoMount: boolean;
+    /** Mount elements added later (CMS load more, filters). */
+    observe: boolean;
+    /** Mount on Astro's `astro:page-load` and close the cart on navigation. */
+    astro: boolean;
+    /** The folder of the optional parts, for the `<script>` build. */
+    partsUrl: string | null;
+    analytics: AnalyticsConfig | null;
+    account: AccountConfig | null;
+    /** The site's text for a cart warning; nothing keeps Shopify's. */
+    warningText: ((warning: CartWarning) => string | null | undefined) | null;
+    formatMoney: ((money: Money, locale: string | undefined) => string) | null;
+    /** Default: `ScrollTrigger.refresh()` when present. */
+    onLayoutChange: ((reason: string) => void) | null;
+    onCartOpen: ((drawers: HTMLElement[]) => void) | null;
+    onCartClose: ((drawers: HTMLElement[]) => void) | null;
+    onLineEnter: ((node: HTMLElement) => void) | null;
+    /** Animates a line out, then calls `done()`. */
+    onLineLeave: ((node: HTMLElement, done: () => void) => void) | null;
+    onValueChange: ((element: HTMLElement, previousText: string) => void) | null;
+    /** Every failure that reaches the visitor. */
+    onError: ((error: unknown, context: string) => void) | null;
+    debug: boolean;
+}
+/** The options a site writes as plain text, which `resolveConfig` checks into their typed form. */
+type ParsedFromText = 'domain' | 'apiVersion' | 'country' | 'language' | 'storageKey';
+/**
+ * What a site passes: any option, the market as the codes people write (`'de'`, `'pt-BR'`), and `null` for the
+ * default storage key.
+ */
+export type TetherOptions = {
+    [Key in Exclude<keyof TetherConfig, ParsedFromText>]?: TetherConfig[Key];
+} & Partial<Record<Exclude<ParsedFromText, 'storageKey'>, string | undefined>> & {
+    storageKey?: string | null | undefined;
+};
+export declare const DEFAULTS: Readonly<TetherConfig>;
+export declare const cfg: TetherConfig;
+/**
+ * `cfg` as `Tether.config` shows it. A value written there would skip the validation `configure()` does, so the view
+ * is read-only; `Tether.init(options)` is how a site changes the config.
+ */
+export declare const configView: TetherConfig;
+/**
+ * The configuration `options` describe: defaults filled in, every value validated (an invalid one warns and falls
+ * back to its default), hooks that aren't functions dropped so callers only check for null.
+ *
+ * @param options What the site set, or any object (the server helpers take their options from code and `.env`).
+ */
+export declare function resolveConfig(options: TetherOptions | Readonly<Record<string, unknown>>): TetherConfig;
+/**
+ * @param value A `markets` option from code other than the config (`Tether.detectMarket(markets)`).
+ * @returns It validated as the config's own is, with the same warnings.
+ */
+export declare const parseMarkets: (value: unknown) => MarketsConfig | null;
+/**
+ * Replaces the shared configuration with `options` over the defaults (see `resolveConfig`).
+ *
+ * @returns The shared `cfg`.
+ */
+export declare function configure(options?: TetherOptions | Readonly<Record<string, unknown>>): TetherConfig;
+/** @returns True once a domain and a token are set. */
+export declare const isConfigured: () => boolean;
+export declare function log(...args: unknown[]): void;
+export declare function warn(...args: unknown[]): void;
+/**
+ * Logs a failure that reaches the visitor and hands it to `onError`. A throwing `onError` is logged, never rethrown:
+ * the site's hook must not break the render that reported the failure.
+ *
+ * @param context What failed, e.g. `product coffee-box`.
+ */
+export declare function reportError(error: unknown, context: string): void;

package/dist/types/src/controls/cart-controls.d.ts

@@ -0,0 +1,2 @@
+/** Binds the document-wide listeners, once per page load of the script. */
+export declare function bindCartControls(): void;

package/dist/types/src/controls/discount.d.ts

@@ -0,0 +1,2 @@
+/** Binds the document-wide listeners, once per page load of the script. */
+export declare function bindDiscountControls(): void;

package/dist/types/src/controls/extras.d.ts

@@ -0,0 +1,5 @@
+import type { ShopifyCart } from '../cart/store.js';
+/** `[tether-group]` with `[tether-group-add]`: adds every product scope inside the group in one request. */
+export declare const addGroup: (button: Element) => Promise<ShopifyCart | null>;
+/** Binds the document-wide listeners, once per page load of the script. */
+export declare function bindExtrasControls(): void;

package/dist/types/src/controls/navigation.d.ts

@@ -0,0 +1,12 @@
+/** What the entry module does for a page. */
+interface PageHooks {
+    /** Settles once `init()` has applied the visitor's market. */
+    ready: () => Promise<unknown>;
+    mount: (root: Document) => unknown;
+    unmount: () => void;
+}
+/** Records a mount of the whole document, so the `astro:page-load` of the same page sends no second round of requests. */
+export declare function rememberDocumentMount(): void;
+/** Binds the document-wide listeners, once per page load of the script. */
+export declare function bindNavigation(hooks: PageHooks): void;
+export {};

package/dist/types/src/diagnose-markup.d.ts

@@ -0,0 +1,19 @@
+type ProblemLevel = 'error' | 'warn';
+export interface Problem {
+    level: ProblemLevel;
+    message: string;
+    /** The element, described for people: `<div#id.class>`. */
+    element?: string;
+    /** The element itself, for the console. */
+    el?: Element;
+}
+/**
+ * @param value What the markup says.
+ * @param options What Tether reads.
+ * @param prefix Put before the suggestion, e.g. `tether-`.
+ * @returns ` Did you mean "…"?` for an option close enough to `value`, else `''`.
+ */
+export declare function didYouMean(value: string, options: Iterable<string>, prefix?: string): string;
+/** The markup problems in `root`, in page order per check. */
+export declare function checkMarkup(root?: ParentNode): Problem[];
+export {};

package/dist/types/src/diagnose.d.ts

@@ -0,0 +1,60 @@
+import { apiVersionStatus } from './api-version.js';
+import { checkMarkup, didYouMean } from './diagnose-markup.js';
+import type { ApiVersionStatus } from './api-version.js';
+import type { DetectedMarket } from './markets.js';
+import type { Problem } from './diagnose-markup.js';
+export { apiVersionStatus, checkMarkup, didYouMean };
+/** The market in use (a visitor's choice included), and what detection would pick. */
+interface MarketReport {
+    country: string | null;
+    language: string | null;
+    locale: string | null;
+    /** `null` without `markets.detect`. */
+    detected: DetectedMarket | null;
+}
+interface ShopReport {
+    name: string;
+    url: string;
+    currency: string;
+}
+type ProductReport = {
+    key: string;
+    handle: string;
+    title: string;
+    plans: number;
+    requiresSellingPlan: boolean;
+} | {
+    key: string;
+    error: string | undefined;
+};
+interface SellingPlanReport {
+    product: string;
+    group: string;
+    plan: string;
+    id: string;
+}
+export interface DiagnoseReport {
+    /** Tether's version, `''` when the caller didn't say. */
+    version: string;
+    /** The config, with the token masked. */
+    config: Record<string, unknown>;
+    apiVersion: ApiVersionStatus;
+    market: MarketReport;
+    reachable: boolean;
+    shop: ShopReport | null;
+    latencyMs: number | null;
+    products: ProductReport[];
+    sellingPlans: SellingPlanReport[];
+    problems: Problem[];
+}
+export interface DiagnoseOptions {
+    root?: ParentNode;
+    /** Return the report without logging it. */
+    silent?: boolean;
+    /** Tether's version, for the report. */
+    version?: string;
+    /** The date the API version's support is measured against. */
+    now?: Date;
+}
+/** What's wrong on the page: config, token, API version, products, plans, markup. */
+export declare function diagnose({ root, silent, version, now, }?: DiagnoseOptions): Promise<DiagnoseReport>;

package/dist/types/src/dom.d.ts

@@ -0,0 +1,75 @@
+import type { Money } from './shopify-values.js';
+export { attr, sel, get, has, qsa, scoped, emit, ownEvent, isOwnEvent, ANALYTICS_EVENTS } from './markup.js';
+export { imageUrl, cdnUrl, sameImage, setImage } from './images.js';
+export { hasTemplate, repeat, repeatKeyed } from './repeaters.js';
+/**
+ * The product page of a product (`productPath`).
+ *
+ * @returns `null` without the handle or id the path needs.
+ */
+export declare function productUrl(handle: string | null | undefined, id?: string | null): string | null;
+/**
+ * `30` → `30%` (en, nl) or `30 %` (de, fr), in the configured locale.
+ *
+ * @returns `''` for no or a zero percentage.
+ */
+export declare function formatPercent(percentage: number | null | undefined, locale?: string | undefined): string;
+/** Money in the configured locale, through the site's `formatMoney` when it has one. */
+export declare function formatMoney(money: Money | null | undefined): string;
+/** @returns The date in the configured locale, `''` without one. */
+export declare function formatDate(iso: string | null | undefined): string;
+/**
+ * Writes HTML from the Shopify admin (product and collection descriptions) into `el`, with script removed
+ * (`store-html.ts`). Everything else from Shopify is written as text (`setText`).
+ */
+export declare function setStoreHtml(el: Element, html: string | null | undefined): void;
+/**
+ * Sets the text of `el`, or its value when it is a form field.
+ *
+ * @param value `null` and `undefined` clear it.
+ */
+export declare function setText(el: Element, value: string | number | boolean | null | undefined): void;
+/** `setText` that hands a change after the first render to `onValueChange`, for scramble and roll effects. */
+export declare function setTextTracked(el: HTMLElement, value: string | number | boolean | null | undefined): void;
+/** Shows or hides `el`, restoring its own display value when shown again. */
+export declare function show(el: HTMLElement, visible: boolean): void;
+/** Marks an option button or input as chosen: `is-selected`, `aria-pressed`, and its own or inner radio/checkbox. */
+export declare function setSelected(el: Element, selected: boolean): void;
+/**
+ * A global the page's own scripts set on `window`: `TETHER_CONFIG`, the site's config, `TETHER_INTEGRATION`, set by a
+ * framework integration (Astro) that starts Tether itself, and GSAP's `ScrollTrigger`. Another script wrote it, so it
+ * is read as unknown and checked where it is used.
+ */
+export declare const pageGlobal: (name: "TETHER_CONFIG" | "TETHER_INTEGRATION" | "ScrollTrigger") => unknown;
+/**
+ * Async renders change the page height after the site's page-transition hooks ran. After a burst of them this calls
+ * `onLayoutChange` (else refreshes ScrollTrigger) and emits `tether:layout-changed`, also when either of those throws.
+ */
+export declare function notifyLayoutChanged(reason: string): void;
+/** Notifies a layout change (`<reason>:images`) once every image in `root` that is still loading has loaded or failed. */
+export declare function watchImages(root: ParentNode, reason: string): void;
+/**
+ * Runs `task` with `aria-busy` on `el`; does nothing while `el` is already busy.
+ *
+ * @returns The task's result, `undefined` when it didn't run.
+ */
+export declare function busy<T>(el: Element, task: () => T | Promise<T>): Promise<T | undefined>;
+/** @returns The attribute's JSON, `null` when it is missing or not JSON (with a warning). */
+export declare function parseJSONAttr(el: Element | null | undefined, name: string): unknown;
+export type AttributeValue = string | number | boolean | null | undefined;
+/**
+ * `tether-line-attributes`, JSON the site writes: `{ a: 1 }` or `[{ key, value }]`. An array entry that isn't an
+ * object is skipped.
+ */
+export declare function attributesFromJson(json: unknown): {
+    key: string;
+    value: string;
+}[];
+/** `{ a: 1 }` or `[{ key, value }]` → `[{ key, value }]` as Shopify wants cart and line attributes. */
+export declare function toAttributes(attributes: Record<string, AttributeValue> | {
+    key: string | number;
+    value?: AttributeValue;
+}[] | null | undefined): {
+    key: string;
+    value: string;
+}[];

package/dist/types/src/extras.d.ts

@@ -0,0 +1,21 @@
+import type { ShopifyCart } from './cart/store.js';
+/**
+ * `[tether-group]` with `[tether-group-add]`: adds every product scope inside the group in one request, for bundles,
+ * build-a-box and "complete the set". The lines get the attribute `_group` and the group's `tether-line-attributes`.
+ *
+ * @returns The cart, `null` with nothing to add or after a reported failure.
+ */
+export declare function addGroup(button: Element): Promise<ShopifyCart | null>;
+/** Another tab changed the cart (it is loaded again here) or the visitor's market (this tab follows it). */
+export declare function onStorage(event: StorageEvent): void;
+/**
+ * `?variant=` (and `selling_plan=`) follow the visitor's choice.
+ *
+ * @param root The product scope's root.
+ */
+export declare function writeVariantUrl(root: Element, { variant, sellingPlanId }: {
+    variant: {
+        id: string;
+    };
+    sellingPlanId: string | null | undefined;
+}): void;

package/dist/types/src/fragments.d.ts

@@ -0,0 +1,158 @@
+import type { TetherConfig } from './config.js';
+import type { Money } from './shopify-values.js';
+import type { StoreAccess } from './client.js';
+export interface Image {
+    url: string;
+    altText: string | null;
+    width: number | null;
+    height: number | null;
+}
+/** An option value's swatch: a colour, an image, or both, as the merchant set them in the admin. */
+interface Swatch {
+    color: string | null;
+    image: {
+        previewImage: Image | null;
+    } | null;
+}
+export type SellingPlanAdjustmentValue = {
+    __typename: 'SellingPlanPercentagePriceAdjustment';
+    adjustmentPercentage: number;
+} | {
+    __typename: 'SellingPlanFixedAmountPriceAdjustment';
+    adjustmentAmount: Money;
+} | {
+    __typename: 'SellingPlanFixedPriceAdjustment';
+    price: Money;
+};
+export interface SellingPlan {
+    id: string;
+    name: string;
+    description: string | null;
+    recurringDeliveries: boolean;
+    options: {
+        name: string;
+        value: string;
+    }[];
+    priceAdjustments: {
+        orderCount: number | null;
+        adjustmentValue: SellingPlanAdjustmentValue;
+    }[];
+}
+export interface SellingPlanGroup {
+    name: string;
+    appName: string | null;
+    options: {
+        name: string;
+        values: string[];
+    }[];
+    sellingPlans: {
+        nodes: SellingPlan[];
+    };
+}
+/** A variant's price on one plan. */
+export interface SellingPlanAllocation {
+    sellingPlan: {
+        id: string;
+    };
+    /** What the customer pays at checkout (more for a prepaid plan). */
+    checkoutChargeAmount: Money;
+    remainingBalanceChargeAmount: Money;
+    priceAdjustments: {
+        price: Money;
+        compareAtPrice: Money;
+        perDeliveryPrice: Money;
+        unitPrice: Money | null;
+    }[];
+}
+export interface ProductVariant {
+    id: string;
+    title: string;
+    availableForSale: boolean;
+    currentlyNotInStock: boolean;
+    /** Absent when the store's token can't read inventory. */
+    quantityAvailable?: number | null;
+    sku: string | null;
+    barcode: string | null;
+    selectedOptions: {
+        name: string;
+        value: string;
+    }[];
+    image: Image | null;
+    price: Money;
+    compareAtPrice: Money | null;
+    unitPrice: Money | null;
+    sellingPlanAllocations: {
+        nodes: SellingPlanAllocation[];
+    };
+}
+export interface Metafield {
+    namespace: string;
+    key: string;
+    type: string;
+    value: string;
+    /** A file reference's image. */
+    reference: {
+        image?: Image;
+    } | null;
+}
+/** The fields of `fragment TetherProduct`. */
+export interface Product {
+    id: string;
+    handle: string;
+    title: string;
+    description: string;
+    descriptionHtml: string;
+    productType: string;
+    vendor: string;
+    tags: string[];
+    availableForSale: boolean;
+    publishedAt: string | null;
+    onlineStoreUrl: string | null;
+    requiresSellingPlan: boolean;
+    seo: {
+        title: string | null;
+        description: string | null;
+    };
+    featuredImage: Image | null;
+    images: {
+        nodes: Image[];
+    };
+    options: {
+        name: string;
+        optionValues: {
+            name: string;
+            swatch: Swatch | null;
+        }[];
+    }[];
+    priceRange: {
+        minVariantPrice: Money;
+        maxVariantPrice: Money;
+    };
+    compareAtPriceRange: {
+        minVariantPrice: Money;
+        maxVariantPrice: Money;
+    };
+    /** Present when metafields are configured; `null` for one that isn't set. */
+    metafields?: (Metafield | null)[];
+    sellingPlanGroups: {
+        nodes: SellingPlanGroup[];
+    };
+    variants: {
+        nodes: ProductVariant[];
+    };
+}
+export type ProductFragmentConfig = Pick<TetherConfig, 'imagesFirst' | 'variantsFirst' | 'sellingPlanGroupsFirst' | 'sellingPlansFirst' | 'metafields'>;
+/**
+ * @param o The list sizes and metafields.
+ * @param access What the token may read.
+ * @returns `fragment TetherProduct on Product`.
+ */
+export declare function productFragment(o?: ProductFragmentConfig, access?: StoreAccess): string;
+/**
+ * @param access What the token may read.
+ * @returns `fragment TetherCart on Cart`.
+ */
+export declare function cartFragment(access?: StoreAccess): string;
+/** The collection fields Tether renders, for inside a `collection { }` selection. */
+export declare function collectionFields(): string;
+export {};

package/dist/types/src/globals.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What Tether reads from and sets on `window`, for sites that use the `<script>` build or `window.Tether`. Only the
+ * published declarations carry it (scripts/build.ts adds it to the generated `index.d.ts`): the source reads these
+ * names as unknown and validates them, so they stay out of its own program.
+ */
+import type { Tether, TetherConfig } from './index.js';
+
+declare global {
+  interface Window {
+    Tether: Tether;
+    TETHER_CONFIG?: TetherConfig;
+    TETHER_COUNTRY?: string;
+    TETHER_LANGUAGE?: string;
+  }
+}

package/dist/types/src/images.d.ts

@@ -0,0 +1,20 @@
+/** Shopify CDN parameters. */
+export interface ImageSize {
+    width?: string | number | null;
+    height?: string | number | null;
+    /** `center`, `top`, `bottom`, `left` or `right`; only applies with a width or height. */
+    crop?: string | null;
+}
+/**
+ * Shopify CDN image at a size: `imageUrl(url, { width: 800 })`. Use the same width as the element's max-width
+ * attribute, so the browser script keeps the image instead of loading it again.
+ *
+ * @returns The sized URL; `url` itself when it is empty or not absolute.
+ */
+export declare function imageUrl<Url extends string | null | undefined>(url: Url, { width, height, crop }?: ImageSize): Url;
+/** @param el The element whose max-width / max-height / crop attributes size the image. */
+export declare function cdnUrl<Url extends string | null | undefined>(url: Url, el: Element | null | undefined): Url;
+/** @returns True for the same image at any size parameters: the server-rendered one is kept. */
+export declare function sameImage(a: string | null | undefined, b: string | null | undefined): boolean;
+/** Shows `url` in `el`: as the `src` of an `<img>` (lazy unless it says otherwise), else as its background image. */
+export declare function setImage(el: HTMLElement, url: string | null | undefined, alt?: string | null): void;