@occluze/tether 0.4.0 → 0.6.0

package/src/index.js

@@ -17,11 +17,11 @@ import {
 } from './loader.js';
 import * as plans from './selling-plans.js';
 import { resolveProductKey } from './status.js';
-import { attr, sel, get, qsa, emit, formatMoney, busy, parseJSONAttr, toAttributes } from './dom.js';
+import { attr, sel, get, qsa, emit, formatMoney, busy, parseJSONAttr, toAttributes, imageUrl } from './dom.js';
 import { loadPart, coreModules } from './lazy.js';
-import { mountedLists, liveLists, pruneLive, within, mountProduct, retryFailed } from './mounting.js';
+import { mountedLists, liveLists, pruneLive, within, mountProduct, retryFailed, hydrateFromPage, settleMarket, trackMarket } from './mounting.js';
 
-export const VERSION = '0.4.0';
+export const VERSION = '0.6.0';
 
 let initPromise = null;
 let observer = null;
@@ -31,6 +31,7 @@ export function mount(root = document) {
   if (!isConfigured()) return 0;
   let count = 0;
   pruneLive(); // page transitions detach old roots: don't keep them alive
+  hydrateFromPage(root); // products the server already rendered: no request needed
 
   within(root, listSelector()).forEach((el) => {
     if (mountedLists.has(el)) return;
@@ -39,7 +40,7 @@ export function mount(root = document) {
     const list = new ListScope(el);
     liveLists.add(list);
     el.addEventListener(`${cfg.prefix}:list-rendered`, (e) => mount(e.detail.container));
-    list.load();
+    trackMarket(list.load());
   });
 
   within(root, sel('product')).forEach((el) => { if (mountProduct(el)) count++; });
@@ -49,10 +50,22 @@ export function mount(root = document) {
     loadPart('markets').then((m) => m.renderCountrySelects(root)).catch((err) => reportError(err, 'markets'));
   }
 
+  // Customer accounts: their own optional part, when configured and the page (or a login) needs it.
+  if ((cfg.account?.clientId || cfg.account?.server) && (within(root, `[${attr('account-login')}],[${attr('account-bind')}],[${attr('orders')}],[${attr('show')}^="logged-"]`).length
+    || /[?&]code=/.test(window.location.search) || hasAccountSession())) {
+    loadPart('account').then((m) => m.mountAccount(root)).catch((err) => reportError(err, 'account'));
+  }
+
+  // Search as you type: its own optional part, only for pages that have it.
+  if (within(root, sel('search')).length) {
+    loadPart('search').then((m) => m.mountSearch(root)).catch((err) => reportError(err, 'search'));
+  }
+
   qsa(root, sel('account-link')).forEach((a) => {
     a.setAttribute('href', `https://${cfg.domain}/account`);
   });
 
+  settleMarket();
   Cart.render();
   log(`mounted ${count} scope(s)`, root);
   return count;
@@ -100,9 +113,9 @@ function bindControls() {
       const id = line.getAttribute(`data-${cfg.prefix}-key`);
       const current = Cart.lines.find((l) => l.id === id);
       const run = (fn) => { e.preventDefault(); fn().catch((err) => reportError(err, 'cart line')); };
-      if (t.closest(sel('line-remove'))) return run(() => Cart.removeLine(id));
-      if (current && t.closest(sel('line-plus'))) return run(() => Cart.updateLine(id, current.quantity + 1));
-      if (current && t.closest(sel('line-minus'))) return run(() => Cart.updateLine(id, current.quantity - 1));
+      if (t.closest(sel('line-remove'))) { line.classList.add('is-busy'); return run(() => Cart.removeLine(id)); }
+      if (current && t.closest(sel('line-plus'))) return run(() => Cart.changeQuantity(id, 1));
+      if (current && t.closest(sel('line-minus'))) return run(() => Cart.changeQuantity(id, -1));
     }
 
     const removeCode = t.closest(sel('discount-remove'));
@@ -122,10 +135,12 @@ function bindControls() {
     if (!t?.closest) return;
     const lineEl = t.closest(dataKeySel());
     const id = lineEl?.getAttribute(`data-${cfg.prefix}-key`);
+    // The line shows is-busy / aria-busy until Shopify has answered (removed by the next render).
+    const busyLine = (p, what) => { lineEl.classList.add('is-busy'); lineEl.setAttribute('aria-busy', 'true'); p.catch((err) => reportError(err, what)); };
     if (id && t.matches(`input${sel('line', 'quantity')}`)) {
-      Cart.updateLine(id, parseInt(t.value, 10) || 0).catch((err) => reportError(err, 'cart line'));
+      busyLine(Cart.updateLine(id, parseInt(t.value, 10) || 0), 'cart line');
     } else if (id && t.matches(`select${sel('line-plan')}`)) {
-      Cart.updateLine(id, { sellingPlanId: t.value || null }).catch((err) => reportError(err, 'cart line plan'));
+      busyLine(Cart.updateLine(id, { sellingPlanId: t.value || null }), 'cart line plan');
     } else if (t.matches(`select${sel('country-select')}`)) {
       if (t.value) setCountry(t.value).catch((err) => reportError(err, 'country'));
     } else if (t.matches(sel('cart-note'))) {
@@ -141,15 +156,55 @@ function bindControls() {
     const code = input?.value.trim();
     if (!code) return;
     busy(form, async () => {
+      const mark = (bad) => {
+        form.classList.toggle('is-invalid', bad);
+        if (input) { if (bad) input.setAttribute('aria-invalid', 'true'); else input.removeAttribute('aria-invalid'); }
+      };
       try {
-        const cart = await Cart.applyDiscount(code);
-        const ok = (cart?.discountCodes || []).find((d) => d.code.toLowerCase() === code.toLowerCase())?.applicable;
-        form.classList.toggle('is-invalid', !ok);
-        emit(ok ? 'discount-applied' : 'discount-invalid', { code }, form);
-        if (ok && input) input.value = '';
-      } catch (err) { form.classList.add('is-invalid'); reportError(err, 'discount'); }
+        await Cart.applyDiscount(code);
+        mark(false);
+        emit('discount-applied', { code }, form);
+        if (input) input.value = '';
+      } catch (err) {
+        mark(true);
+        if (err?.code === 'INVALID_DISCOUNT') emit('discount-invalid', { code }, form); else reportError(err, 'discount');
+      }
     });
+  }, true); // capture: before a router (Astro's ClientRouter) turns the submit into a navigation
+  document.addEventListener('input', (e) => {
+    const f = e.target.closest?.(sel('discount-form'));
+    if (f) { f.classList.remove('is-invalid'); e.target.removeAttribute?.('aria-invalid'); }
+  });
+
+  // Other tabs: the cart or the market changed there (handled by the extras part, loaded then).
+  window.addEventListener('storage', (e) => {
+    if (cfg.domain && e.key?.startsWith(`${cfg.prefix}:`)) loadPart('extras').then((m) => m.onStorage(e)).catch(() => {});
   });
+  // Shareable variant links: only when turned on.
+  document.addEventListener(`${cfg.prefix}:variant-changed`, (e) => {
+    const root = e.target;
+    if (cfg.variantUrl || root.hasAttribute?.(attr('variant-url'))) loadPart('extras').then((m) => m.writeVariantUrl(root, e.detail)).catch(() => {});
+  });
+
+  // Astro View Transitions (<ClientRouter />): mount every new page, close the cart while leaving.
+  if (cfg.astro !== false) {
+    // Astro fires this on the first load too: wait for init (the visitor's saved market) first.
+    document.addEventListener('astro:page-load', () => (initPromise || Promise.resolve()).then(() => {
+      // Navigated to a page of another market (e.g. /de/): switch first, then mount in that market.
+      // Back on a normal page after one: the visitor's own choice, else the default market.
+      let target = pageMarket();
+      if (!target && onPageMarket) {
+        try { target = JSON.parse(localStorage.getItem(`${cfg.prefix}:market:${cfg.domain}`) || 'null'); } catch { target = null; }
+        target = target?.country ? target : baseMarket;
+      }
+      onPageMarket = Boolean(pageMarket());
+      const differs = target?.country && (String(target.country).toUpperCase() !== String(cfg.country || '').toUpperCase()
+        || String(target.language || '').toUpperCase() !== String(cfg.language || '').toUpperCase());
+      if (differs) setCountry(target.country, { language: target.language ?? null, locale: target.locale, remember: false }).then(() => mount(document), () => mount(document));
+      else mount(document);
+    }));
+    document.addEventListener('astro:before-swap', () => unmount());
+  }
 
   // Back online after a failed load: try the failed products and lists again.
   window.addEventListener('online', () => {
@@ -181,34 +236,14 @@ function dataKeySel() { return `[data-${cfg.prefix}-key]`; }
  * group in one request. Bundles, build-a-box, "complete the set".
  * Lines get attribute _group (and the group's tether-line-attributes).
  */
-export async function addGroup(btn) {
-  const group = btn.closest(sel('group'));
-  if (!group) return null;
-  const name = get(group, 'group');
-  const extra = toAttributes(parseJSONAttr(group, 'line-attributes'));
-  const groupAttrs = name ? [{ key: '_group', value: name }, ...extra] : extra;
-
-  const lines = qsa(group, sel('product'))
-    .map((el) => scopes.get(el))
-    .filter((s) => s && s.variant?.availableForSale && s.quantity > 0)
-    .map((s) => {
-      const l = s.getLine();
-      l.attributes = [...(l.attributes || []), ...groupAttrs];
-      return l;
-    });
-
-  if (!lines.length) { warn('group-add: nothing selected'); return null; }
-  try {
-    const cart = await Cart.add(lines);
-    emit('group-added', { group: name, lines }, group);
-    return cart;
-  } catch (err) { reportError(err, 'group add'); return null; }
-}
+export const addGroup = (btn) => loadPart('extras').then((m) => m.addGroup(btn));
 
 // ---------------------------------------------------------------------------
 // Init
 // ---------------------------------------------------------------------------
 
+let analyticsQueue = null;
+
 export function init(overrides = {}) {
   if (initPromise && !Object.keys(overrides).length) return initPromise;
   configure({ ...(window.TETHER_CONFIG || {}), ...overrides });
@@ -221,6 +256,13 @@ export function init(overrides = {}) {
 
   bindControls();
   if (cfg.observe) startObserver();
+  // Analytics (optional part): buffer Tether's events until it has loaded, so none are missed.
+  if (cfg.analytics && !analyticsQueue) {
+    analyticsQueue = [];
+    ['product-ready', 'list-ready', 'cart-updated', 'cart-toggled', 'checkout', 'search'].forEach((n) => document.addEventListener(`${cfg.prefix}:${n}`, (e) => analyticsQueue.push(e)));
+    document.addEventListener('astro:page-load', () => analyticsQueue.push(new CustomEvent(`${cfg.prefix}:page`)));
+    loadPart('analytics').then((m) => m.startAnalytics(analyticsQueue)).catch((err) => reportError(err, 'analytics'));
+  }
 
   initPromise = applyMarket(overrides).then(() => Cart.init()).then(async (cart) => {
     // A saved cart from another market: move it to this one, so prices match the page.
@@ -239,8 +281,30 @@ export function init(overrides = {}) {
  * Without markets.detect only the visitor's saved choice applies, read here without loading
  * the markets part.
  */
+/**
+ * A page built for one market (e.g. /de/ pages): <meta name="tether-page-country" content="DE">,
+ * tether-page-language, tether-page-locale. Wins over the visitor's saved choice, isn't remembered.
+ */
+function pageMarket(doc = document) {
+  const get = (n) => doc.querySelector(`meta[name="${cfg.prefix}-page-${n}"]`)?.getAttribute('content') || undefined;
+  const country = get('country');
+  return country ? { country: country.toUpperCase(), language: get('language'), locale: get('locale') } : null;
+}
+
+let baseMarket = null; // the configured market, before a visitor's or page's market applied
+let onPageMarket = false;
+
 async function applyMarket(overrides) {
   const m = cfg.markets || {};
+  baseMarket = { country: cfg.country, language: cfg.language, locale: cfg.locale };
+  const page = pageMarket();
+  onPageMarket = Boolean(page);
+  if (page) {
+    cfg.country = page.country;
+    cfg.language = page.language ? page.language.toUpperCase() : undefined;
+    if (page.locale) cfg.locale = page.locale;
+    return;
+  }
   if (m.detect === false) return;
   let market = null;
   if (m.detect) {
@@ -252,10 +316,17 @@ async function applyMarket(overrides) {
   if (!market) return;
   if (market.country) cfg.country = market.country;
   if (market.language) cfg.language = market.language;
-  if (market.locale && !overrides.locale && !window.TETHER_CONFIG?.locale) cfg.locale = market.locale;
+  if (market.locale && !overrides.locale) cfg.locale = market.locale; // the visitor's market wins over the default
   log('market', market);
 }
 
+function hasAccountSession() {
+  try { return Boolean(sessionStorage[`${cfg.prefix}:account:${cfg.domain}`] || localStorage[`${cfg.prefix}:account:${cfg.domain}`] || localStorage[`${cfg.prefix}:account-hint:${cfg.domain}`]); } catch { return false; }
+}
+
+/** Customer accounts (optional part, loaded on first use). See src/account.js. */
+const accountApi = new Proxy({}, { get: (_, n) => (...a) => loadPart('account').then((m) => m[n](...a)) });
+
 /** Tether.setCountry('DE'): loads the markets part on first use. */
 export function setCountry(code, opts) {
   return loadPart('markets').then((m) => m.setCountry(code, opts));
@@ -288,10 +359,12 @@ export const api = {
   getRecommendations,
   getScope,
   addGroup,
+  account: accountApi,
   primeProduct,
   normalizeProductKey,
   clearProductCache,
   formatMoney,
+  imageUrl,
   plans,
   TetherError,
   resolveProductKey,
@@ -313,7 +386,8 @@ export default api;
 // Auto-start for the plain <script> setup.
 if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   window.Tether = api;
-  const auto = window.TETHER_CONFIG && window.TETHER_CONFIG.autoMount !== false;
+  // Not with a framework integration (Astro), which starts Tether itself.
+  const auto = window.TETHER_CONFIG && window.TETHER_CONFIG.autoMount !== false && !window.TETHER_INTEGRATION;
   if (auto) {
     const start = () => init().then(() => mount(document));
     if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });

package/src/initial.js

@@ -0,0 +1,75 @@
+/**
+ * What the browser script will show first for a product, so a server can render the same
+ * (no flash when Tether takes over): the selected variant, price, purchase mode and conditions.
+ * Same rules as src/product.js: first available variant (or the one in ?variant=), subscription
+ * when the product requires a plan or defaultPurchase is 'subscription', low stock at 5 or fewer.
+ */
+import { GID, allPlans, allocationFor, findPlan, planPrice, planSavings } from './selling-plans.js';
+
+export function initialState(product, { variant, sellingPlan, defaultPurchase = 'one-time', lowStock = 5 } = {}) {
+  const vs = product?.variants?.nodes || [];
+  const gid = variant ? GID.variant(variant) : null;
+  const v = (gid && vs.find((x) => x.id === gid)) || vs.find((x) => x.availableForSale) || vs[0] || null;
+  if (!v) return null;
+  const selected = Object.fromEntries((v.selectedOptions || []).map((o) => [o.name, o.value]));
+
+  const plans = allPlans(product);
+  const fromUrl = findPlan(product, sellingPlan);
+  let plan = plans.length ? (fromUrl || plans[0]) : null;
+  if (plan && !allocationFor(v, plan.id)) plan = plans.find((p) => allocationFor(v, p.id)) || plan;
+  const wantsSub = product.requiresSellingPlan || fromUrl || defaultPurchase === 'subscription';
+  const subscriptionAvailable = plans.some((p) => allocationFor(v, p.id));
+  const purchase = plans.length && wantsSub ? 'subscription' : 'one-time';
+  const sub = purchase === 'subscription' && subscriptionAvailable;
+
+  const price = sub ? planPrice(v, plan.id) : v.price;
+  const compareAt = sub ? (allocationFor(v, plan.id)?.priceAdjustments?.[0]?.compareAtPrice || v.compareAtPrice) : v.compareAtPrice;
+  const onSale = Boolean(compareAt && parseFloat(compareAt.amount) > parseFloat(price.amount));
+  const q = v.quantityAvailable;
+  const low = q != null && q > 0 && q <= lowStock;
+  const savingsNow = sub ? planSavings(v, plan.id).percentage : 0;
+
+  return {
+    variant: v,
+    selected,
+    purchase,
+    plan: sub ? plan : null,
+    /** The plan list (tether-plan-list="all"): selected one gets is-selected, unavailable ones is-unavailable. */
+    plans: plans.map((p) => ({
+      id: p.id, name: p.name, price: planPrice(v, p.id), savings: planSavings(v, p.id).percentage,
+      selected: sub && p.id === plan.id, available: Boolean(allocationFor(v, p.id)),
+    })),
+    /** Savings of the selected plan in % (tether-bind="subscription-savings"), 0 without one. */
+    savings: plan ? planSavings(v, plan.id).percentage : 0,
+    price,
+    compareAtPrice: onSale ? compareAt : null,
+    available: v.availableForSale,
+    /** The tether-show conditions, e.g. hidden={!state.show['out-of-stock']}. */
+    show: {
+      'in-stock': v.availableForSale,
+      'out-of-stock': !v.availableForSale,
+      backorder: Boolean(v.availableForSale && v.currentlyNotInStock),
+      'on-sale': onSale,
+      'not-on-sale': !onSale,
+      'has-variants': vs.length > 1,
+      'single-variant': vs.length === 1,
+      'low-stock': low,
+      'plenty-in-stock': v.availableForSale && !low,
+      'subscription-available': subscriptionAvailable,
+      'subscription-unavailable': !subscriptionAvailable,
+      'subscription-only': Boolean(product.requiresSellingPlan),
+      'one-time-available': !product.requiresSellingPlan,
+      'subscription-selected': sub,
+      'one-time-selected': !sub,
+      'has-savings': sub ? savingsNow > 0 : onSale,
+    },
+    /** Option values without an available variant, as plain data (for frameworks that serialise props). */
+    unavailable: Object.fromEntries((product.options || []).map((o) => [o.name, o.optionValues.map((x) => x.name).filter((n) => isUnavail(o.name, n))])),
+    /** Option values with no available variant (given the other selected options): class is-unavailable. */
+    isUnavailable: (name, value) => isUnavail(name, value),
+  };
+  function isUnavail(name, value) {
+    return !vs.some((x) => x.availableForSale && x.selectedOptions.every((o) =>
+      (o.name === name ? o.value === value : selected[o.name] === o.value)));
+  }
+}

package/src/lazy.js

@@ -3,7 +3,15 @@
  * ESM / Node: dynamic import (bundlers split these into their own chunks).
  * The <script> build swaps this file for lazy-iife.js (see scripts/build.mjs).
  */
-export const loadPart = (name) => (name === 'diagnose' ? import('./diagnose.js') : import('./markets-ui.js'));
+const PARTS = {
+  diagnose: () => import('./diagnose.js'),
+  markets: () => import('./markets-ui.js'),
+  search: () => import('./search.js'),
+  extras: () => import('./extras.js'),
+  account: () => import('./account.js'),
+  analytics: () => import('./analytics.js'),
+};
+export const loadPart = (name) => PARTS[name]();
 
 // Only the <script> build shares its modules with separately loaded parts.
 export const coreModules = undefined;

package/src/loader.js

@@ -90,8 +90,15 @@ async function flush() {
     handles.forEach((h, i) => { if (data[`h${i}`]) got.set(h, data[`h${i}`]); });
 
     keys.forEach((k) => settle(k, (r) => {
-      if (got.has(k)) { if (gen === generation) primeProduct(got.get(k)); r.resolve(got.get(k)); } else {
-        if (gen === generation) productCache.delete(k); // don't cache misses: a fix in Shopify works on next load
+      if (got.has(k)) {
+        const p = got.get(k);
+        if (gen === generation) { primeProduct(p); freshAt.set(p.handle, Date.now()); freshAt.set(p.id, Date.now()); }
+        r.resolve(p);
+      } else {
+        // A miss is remembered for a few seconds (one page load asking twice makes one request),
+        // not longer: a product published in Shopify shows up on the next visit.
+        const miss = productCache.get(k);
+        if (gen === generation) setTimeout(() => { if (productCache.get(k) === miss) productCache.delete(k); }, 10000);
         r.reject(new TetherError(`Product not found: ${k}`, { code: 'NOT_FOUND' }));
       }
     }));
@@ -100,7 +107,44 @@ async function flush() {
   }
 }
 
-export function clearProductCache() { productCache.clear(); generation++; }
+export function clearProductCache() { productCache.clear(); generation++; stale.clear(); freshAt.clear(); }
+
+// ---------------------------------------------------------------------------
+// Hydration: products rendered on the server (tether/server hydrate()) are used at once and
+// refreshed once in the background, so prices and stock are live without a loading state.
+// ---------------------------------------------------------------------------
+
+const stale = new Set(); // keys of products that came from the server and weren't refreshed yet
+const freshAt = new Map(); // key -> when it was last loaded live (this page session)
+const FRESH_MS = 60000;
+
+export function hydrateProducts(products) {
+  (products || []).forEach((p) => {
+    if (!p?.id || !p.handle) return;
+    // Loaded live in the last minute (an earlier page of a View Transition visit): that copy is newer.
+    if (Date.now() - (freshAt.get(p.handle) || 0) < FRESH_MS && productCache.has(p.handle)) return;
+    primeProduct(p);
+    stale.add(p.handle);
+    stale.add(p.id);
+  });
+}
+
+/** True once per server-provided product: the caller refreshes it. */
+export function takeStale(key) {
+  const k = normalizeProductKey(key);
+  if (!stale.has(k)) return false;
+  const p = productCache.get(k);
+  stale.delete(k);
+  // Both keys point to the same product: refresh it once.
+  p?.then?.((x) => { stale.delete(x.handle); stale.delete(x.id); });
+  return true;
+}
+
+/** Fetch these products again (bypassing the cache). */
+export function refreshProducts(keys) {
+  keys.forEach((k) => productCache.delete(normalizeProductKey(k)));
+  return keys.map((k) => getProduct(k));
+}
 
 /**
  * A page of products from a collection (by handle) or from a search query.
@@ -141,11 +185,13 @@ ${fragment}`, { first, after, query: query || undefined, sortKey: sortKey || und
   return { collection: null, products: data.products.nodes, pageInfo: data.products.pageInfo };
 }
 
-export async function getRecommendations(productId, intent = 'RELATED') {
-  const data = await gql(`query TetherRecs($id: ID!, $intent: ProductRecommendationIntent) {
-  productRecommendations(productId: $id, intent: $intent) { ...TetherProduct }
+export async function getRecommendations(product, intent = 'RELATED') {
+  const key = normalizeProductKey(typeof product === 'object' ? product?.id : product);
+  const byId = key?.startsWith('gid://');
+  const data = await gql(`query TetherRecs(${byId ? '$id: ID!' : '$handle: String!'}, $intent: ProductRecommendationIntent) {
+  productRecommendations(${byId ? 'productId: $id' : 'productHandle: $handle'}, intent: $intent) { ...TetherProduct }
 }
-${productFragment()}`, { id: productId, intent });
+${productFragment()}`, byId ? { id: key, intent } : { handle: key, intent });
   const list = data.productRecommendations || [];
   list.forEach(primeProduct);
   return list;

package/src/markets-ui.js

@@ -30,11 +30,14 @@ function renderCountrySelects(root = document) {
       .replace(/\{currency\}/g, c.currency?.isoCode || '').replace(/\{symbol\}/g, c.currency?.symbol || '');
     selects.forEach((s) => {
       const tpl = s.getAttribute(attr('country-label')) || '{name} ({currency})';
+      // tether-countries="NL,DE,BE": only these (in your order); otherwise every country of the store.
+      const only = (s.getAttribute(attr('countries')) || '').toUpperCase().split(/[\s,]+/).filter(Boolean);
+      const list = only.length ? only.map((c) => countries.find((x) => x.isoCode === c)).filter(Boolean) : countries;
       s.innerHTML = '';
-      countries.forEach((c) => s.appendChild(new Option(fill(tpl, c), c.isoCode)));
+      list.forEach((c) => s.appendChild(new Option(fill(tpl, c), c.isoCode)));
       s.value = current;
       if (s.value !== current) s.selectedIndex = -1; // a country the store doesn't sell to
-      s.disabled = countries.length < 2 && !s.hasAttribute(attr('always-enabled'));
+      s.disabled = list.length < 2 && !s.hasAttribute(attr('always-enabled'));
     });
     binds.forEach((el) => {
       const k = get(el, 'country-bind') || 'name';
@@ -49,14 +52,20 @@ function renderCountrySelects(root = document) {
  * buyerIdentity.countryCode is updated, and every product and list on the page re-renders.
  *   Tether.setCountry('DE')            Tether.setCountry('BE', { language: 'FR' })
  */
-export async function setCountry(code, { language, remember = true } = {}) {
+export async function setCountry(code, { language, locale, remember = true } = {}) {
   const country = toCountry(code);
   if (!country) throw new TetherError(`Not a country code: ${code}`, { code: 'INVALID_COUNTRY' });
-  const lang = language === undefined ? cfg.language : toLanguage(language);
-  const changed = country !== String(cfg.country || '').toUpperCase() || lang !== cfg.language;
+  // Money format: the option, else a markets.locales entry for this country, else unchanged.
+  const entry = Object.values(cfg.markets?.locales || {}).find((m) => toCountry(m?.country) === country);
+  const own = locale || entry?.locale;
+  const loc = own || cfg.locale;
+  // Language: the option, else the markets.locales entry for this country (which may have none), else unchanged.
+  const lang = language !== undefined ? toLanguage(language) : entry ? (entry.language ? toLanguage(entry.language) : undefined) : cfg.language;
+  const changed = country !== String(cfg.country || '').toUpperCase() || lang !== cfg.language || loc !== cfg.locale;
   cfg.country = country;
   cfg.language = lang || undefined;
-  if (remember) rememberMarket({ country, language: lang });
+  cfg.locale = loc;
+  if (remember) rememberMarket({ country, language: lang, locale: own });
   if (!changed) { renderCountrySelects(); return Cart.state; }
 
   clearProductCache();

package/src/markets.js

@@ -112,7 +112,7 @@ export function detectMarket(markets = cfg.markets, env = defaultEnv()) {
 
 export function rememberMarket(market) {
   if (cfg.markets?.remember === false) return;
-  try { localStorage.setItem(storageKey(), JSON.stringify({ country: market.country, language: market.language || undefined })); } catch { /* private mode */ }
+  try { localStorage.setItem(storageKey(), JSON.stringify({ country: market.country, language: market.language || undefined, locale: market.locale || undefined })); } catch { /* private mode */ }
 }
 
 let localizationPromise = null;

package/src/mounting.js

@@ -1,8 +1,8 @@
 /** Product scopes and lists that are mounted, shared by index.js and the optional markets part. */
 import { cfg, log, warn, reportError } from './config.js';
-import { ProductScope, scopes } from './product.js';
+import { ProductScope, scopes, rememberOptionNames } from './product.js';
 import { listSelector } from './collection.js';
-import { getProduct } from './loader.js';
+import { getProduct, takeStale, refreshProducts, hydrateProducts } from './loader.js';
 import { resolveProductKey, setScopeStatus, isNotFound } from './status.js';
 import { attr, get, qsa, emit } from './dom.js';
 
@@ -45,7 +45,9 @@ function mountProduct(el) {
   // A rendered scope keeps showing its content while it refreshes (e.g. country switch).
   if (!scopes.get(el)) setScopeStatus(el, 'loading');
   else el.setAttribute(attr('state'), 'updating');
-  getProduct(key)
+  const loading = getProduct(key);
+  marketPending?.add(loading);
+  loading
     .then((p) => {
       if (!current()) return;
       const existing = scopes.get(el);
@@ -53,6 +55,7 @@ function mountProduct(el) {
       // eslint-disable-next-line no-new
       else new ProductScope(el, p);
       applyPageTitle(el, p);
+      if (cfg.revalidate !== false && takeStale(key)) queueRefresh(key);
     })
     .catch((err) => {
       if (!current()) return;
@@ -87,3 +90,65 @@ export function retryFailed() {
     mountProduct(el);
   });
 }
+
+// Server-rendered products: one batched background request refreshes them all.
+let refreshQueue = new Set();
+function queueRefresh(key) {
+  if (!refreshQueue.size) setTimeout(flushRefresh, 0);
+  refreshQueue.add(key);
+}
+function flushRefresh() {
+  const keys = [...refreshQueue];
+  refreshQueue = new Set();
+  refreshProducts(keys).forEach((promise, i) => promise.then((fresh) => {
+    liveProducts.forEach((el) => {
+      const scope = scopes.get(el);
+      if (!scope || !el.isConnected) return;
+      const k = resolveProductKey(el).key;
+      if (k !== keys[i] && k !== fresh.handle && k !== fresh.id) return;
+      if (JSON.stringify(scope.product) !== JSON.stringify(fresh)) scope.update(fresh);
+    });
+  }).catch((err) => reportError(err, `refresh ${keys[i]}`)));
+}
+
+/**
+ * <script type="application/json" data-tether-hydrate> tags written by tether/server's hydrate():
+ * their products are used without a request. Ignored when they were made for another market.
+ */
+const readScripts = new WeakSet();
+let marketPending = null; // product loads to wait for before html.tether-market-pending goes
+
+/** Lists (and anything else that loads prices) wait too. */
+export const trackMarket = (p) => { marketPending?.add(p); return p; };
+
+/** After a mount: drop html.tether-market-pending once this page's products are live. */
+export function settleMarket() {
+  if (!marketPending) return;
+  const waits = [...marketPending];
+  Promise.allSettled(waits).then(() => {
+    if (!marketPending || waits.some((w) => !marketPending.has(w))) return;
+    if (waits.length === marketPending.size) {
+      marketPending = null;
+      document.documentElement.classList.remove(`${cfg.prefix}-market-pending`);
+    } else settleMarket(); // more products came in meanwhile
+  });
+}
+
+export function hydrateFromPage(root = document) {
+  qsa(root.ownerDocument || root, 'script[type="application/json"][data-tether-hydrate]').forEach((s) => {
+    if (readScripts.has(s)) return;
+    readScripts.add(s);
+    try {
+      const data = JSON.parse(s.textContent);
+      rememberOptionNames(data.products); // the build's option names, also for other languages
+      const same = (a, b) => String(a || '').toUpperCase() === String(b || '').toUpperCase();
+      if (same(data.country, cfg.country) && same(data.language, cfg.language)) hydrateProducts(data.products);
+      else {
+        // The page was built for another market: its prices aren't this visitor's. Mark the page
+        // (html.tether-market-pending) until the live ones are in, so CSS can hide prices meanwhile.
+        log('hydration skipped: other market');
+        if (!marketPending) { marketPending = new Set(); document.documentElement.classList.add(`${cfg.prefix}-market-pending`); }
+      }
+    } catch (err) { warn('bad data-tether-hydrate', err); }
+  });
+}

package/src/parts/account.js

@@ -0,0 +1,3 @@
+import * as part from '../account.js';
+
+window.Tether.__parts.account = part;

package/src/parts/analytics.js

@@ -0,0 +1,3 @@
+import * as part from '../analytics.js';
+
+window.Tether.__parts.analytics = part;

package/src/parts/extras.js

@@ -0,0 +1,3 @@
+import * as part from '../extras.js';
+
+window.Tether.__parts.extras = part;

package/src/parts/search.js

@@ -0,0 +1,3 @@
+import * as part from '../search.js';
+
+window.Tether.__parts.search = part;