@occluze/tether 0.6.7 → 0.6.8

package/dist/tether.search.js

@@ -1,3 +1,4 @@
+"use strict";
 (() => {
   var __defProp = Object.defineProperty;
   var __export = (target, all) => {
@@ -13,7 +14,7 @@
 
   // tether-core:config.js
   var m = window.Tether.__core["config.js"];
-  var { DEFAULTS, cfg, configure, isConfigured, log, reportError, warn } = m;
+  var { DEFAULTS, cfg, configure, isConfigured, log, reportError, resolveConfig, toMetafieldIdentifier, warn } = m;
 
   // tether-core:client.js
   var m2 = window.Tether.__core["client.js"];
@@ -21,156 +22,250 @@
 
   // tether-core:dom.js
   var m3 = window.Tether.__core["dom.js"];
-  var { attr, busy, cdnUrl, dataKey, emit, formatDate, formatMoney, formatPercent, get, has, hasTemplate, imageUrl, notifyLayoutChanged, parseJSONAttr, productUrl, qsa, readText, repeat, repeatKeyed, sameImage, scoped, sel, setImage, setSelected, setText, setTextTracked, show, toAttributes, watchImages } = m3;
+  var { attr, busy, cdnUrl, emit, formatDate, formatMoney, formatPercent, get, has, hasTemplate, imageUrl, notifyLayoutChanged, parseJSONAttr, productUrl, qsa, repeat, repeatKeyed, sameImage, scoped, sel, setImage, setSelected, setStoreHtml, setText, setTextTracked, show, toAttributes, watchImages } = m3;
+
+  // tether-core:mounting.js
+  var m4 = window.Tether.__core["mounting.js"];
+  var { hydrateFromPage, liveLists, liveProducts, mountProduct, mountedLists, mountedProducts, pruneLive, retryFailed, settleMarket, trackMarket, within } = m4;
 
   // src/search.js
   var QUERY = `query TetherPredictive($q:String!,$limit:Int!){predictiveSearch(query:$q,limit:$limit,limitScope:EACH,types:[PRODUCT,COLLECTION,QUERY]){products{id handle title availableForSale featuredImage{url altText}priceRange{minVariantPrice{amount currencyCode}}}collections{handle title image{url altText}}queries{text}}}`;
+  var DEFAULT_LIMIT = 6;
+  var DEFAULT_MIN_CHARACTERS = 2;
+  var DEFAULT_ACTION = "/search";
   var mounted = /* @__PURE__ */ new WeakSet();
-  var uid = 0;
-  function mountSearch(root = document) {
-    const roots = [...root.matches?.(sel("search")) ? [root] : [], ...qsa(root, sel("search"))];
-    roots.forEach((el) => {
-      if (!mounted.has(el)) {
-        mounted.add(el);
-        setup(el);
+  var searchBoxCount = 0;
+  function integerAttribute(el, name, fallback) {
+    return parseInt(get(el, name) || "", 10) || fallback;
+  }
+  var linkIn = (node) => node.tagName === "A" ? node : node.querySelector("a");
+  function bindValues(node, values) {
+    qsa(node, sel("search-bind")).forEach((el) => {
+      const field = get(el, "search-bind");
+      if (field === "image") setImage(el, values.image?.url, values.image?.altText || values.title);
+      else if (field === "title" || field === "price" || field === "text") {
+        if (values[field] != null) setText(el, values[field]);
       }
     });
   }
-  function setup(rootEl) {
-    const input = rootEl.querySelector(sel("search-input")) || rootEl.querySelector("input");
-    const results = rootEl.querySelector(sel("search-results"));
-    if (!input || !results) return;
-    const limit = parseInt(get(rootEl, "search-limit") || "6", 10) || 6;
-    const min = parseInt(get(rootEl, "search-min") || "2", 10) || 2;
-    const id = results.id || (results.id = `${cfg.prefix}-search-${++uid}`);
-    input.setAttribute("role", "combobox");
-    input.setAttribute("aria-autocomplete", "list");
-    input.setAttribute("aria-controls", id);
-    input.setAttribute("aria-expanded", "false");
-    input.setAttribute("autocomplete", "off");
-    if (!results.hasAttribute("role")) results.setAttribute("role", "listbox");
-    results.hidden = true;
-    let token = 0;
-    let timer = null;
-    let last = "";
-    const cache = /* @__PURE__ */ new Map();
-    const setState = (state) => rootEl.setAttribute(attr("search-state"), state);
-    const open = (yes) => {
-      rootEl.classList.toggle("is-open", yes);
-      results.hidden = !yes;
-      input.setAttribute("aria-expanded", String(yes));
-      if (!yes) input.removeAttribute("aria-activedescendant");
-    };
-    const items = () => qsa(results, '[role="option"]');
-    async function run(term) {
-      const t = ++token;
-      if (term.length < min) {
-        open(false);
-        setState("idle");
+  function linkOption(node, href) {
+    const link = linkIn(node);
+    if (!link) return;
+    link.setAttribute("href", href);
+    link.setAttribute("role", "option");
+  }
+  var SearchBox = class {
+    /**
+     * @param {HTMLElement} root
+     * @param {HTMLInputElement} input
+     * @param {HTMLElement} results
+     */
+    constructor(root, input, results) {
+      this.root = root;
+      this.input = input;
+      this.results = results;
+      this.limit = integerAttribute(root, "search-limit", DEFAULT_LIMIT);
+      this.minCharacters = integerAttribute(root, "search-min", DEFAULT_MIN_CHARACTERS);
+      if (!results.id) {
+        searchBoxCount += 1;
+        results.id = `${cfg.prefix}-search-${searchBoxCount}`;
+      }
+      this.resultsId = results.id;
+      this.searchNumber = 0;
+      this.timer = void 0;
+      this.lastTerm = "";
+      this.cache = /* @__PURE__ */ new Map();
+      this.setUpAria();
+      this.listen();
+    }
+    setUpAria() {
+      this.input.setAttribute("role", "combobox");
+      this.input.setAttribute("aria-autocomplete", "list");
+      this.input.setAttribute("aria-controls", this.resultsId);
+      this.input.setAttribute("aria-expanded", "false");
+      this.input.setAttribute("autocomplete", "off");
+      if (!this.results.hasAttribute("role")) this.results.setAttribute("role", "listbox");
+      this.results.hidden = true;
+    }
+    listen() {
+      this.input.addEventListener("input", () => {
+        const term = this.input.value.trim();
+        if (term === this.lastTerm) return;
+        this.lastTerm = term;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => void this.search(term), cfg.searchDelay);
+      });
+      this.input.addEventListener("focus", () => {
+        if (this.input.value.trim().length >= this.minCharacters && this.options().length) this.open(true);
+      });
+      this.input.addEventListener("keydown", (event) => {
+        this.onKeydown(event);
+      });
+      document.addEventListener("click", (event) => {
+        if (!this.root.contains(
+          /** @type {Node | null} */
+          event.target
+        )) this.open(false);
+      });
+    }
+    /** @param {SearchState} state */
+    setState(state) {
+      this.root.setAttribute(attr("search-state"), state);
+    }
+    /** @param {boolean} open */
+    open(open) {
+      this.root.classList.toggle("is-open", open);
+      this.results.hidden = !open;
+      this.input.setAttribute("aria-expanded", String(open));
+      if (!open) this.input.removeAttribute("aria-activedescendant");
+    }
+    options() {
+      return qsa(this.results, '[role="option"]');
+    }
+    /**
+     * @param {string} term
+     * @returns {Promise<SearchResults | null>}
+     */
+    async fetchResults(term) {
+      const cached = this.cache.get(term);
+      if (cached) return cached;
+      const data = await gql(QUERY, { q: term, limit: this.limit });
+      this.cache.set(term, data.predictiveSearch);
+      return data.predictiveSearch;
+    }
+    /** @param {string} term */
+    async search(term) {
+      this.searchNumber += 1;
+      const searchNumber = this.searchNumber;
+      if (term.length < this.minCharacters) {
+        this.open(false);
+        this.setState("idle");
         return;
       }
-      setState("loading");
+      this.setState("loading");
       try {
-        const data = cache.get(term) || (await gql(QUERY, { q: term, limit })).predictiveSearch;
-        cache.set(term, data);
-        if (t !== token) return;
-        render(data, term);
-      } catch (err) {
-        if (t !== token) return;
-        setState("error");
-        reportError(err, "search");
+        const results = await this.fetchResults(term);
+        if (searchNumber === this.searchNumber) this.render(results, term);
+      } catch (error) {
+        if (searchNumber !== this.searchNumber) {
+          log("a superseded search failed", error);
+          return;
+        }
+        this.setState("error");
+        reportError(error, "search");
       }
     }
-    function render(data, term) {
-      const products = data?.products || [];
-      const collections = data?.collections || [];
-      const queries = (data?.queries || []).filter((q) => q.text.toLowerCase() !== term.toLowerCase());
-      const fill = (name, list, each) => qsa(results, sel(name)).forEach((c) => {
-        repeat(c, list, each);
-        show(c, list.length > 0);
+    /**
+     * @template Item
+     * @param {string} name The list attribute, e.g. `search-products`.
+     * @param {readonly Item[]} items
+     * @param {(node: HTMLElement, item: Item) => void} render
+     */
+    fillList(name, items, render) {
+      qsa(this.results, sel(name)).forEach((list) => {
+        repeat(list, items, render);
+        show(list, items.length > 0);
       });
-      fill("search-products", products, (node, p) => {
-        binds(node, { title: p.title, price: formatMoney(p.priceRange?.minVariantPrice), image: p.featuredImage });
-        link(node, productUrl(p.handle, p.id));
-        node.classList.toggle("is-sold-out", !p.availableForSale);
+    }
+    /** @param {string} text */
+    queryUrl(text) {
+      const action = this.root.getAttribute("action") || DEFAULT_ACTION;
+      const separator = action.includes("?") ? "&" : "?";
+      return `${action}${separator}${this.input.name || "q"}=${encodeURIComponent(text)}`;
+    }
+    /**
+     * @param {SearchResults | null} results
+     * @param {string} term
+     */
+    render(results, term) {
+      const products = results?.products ?? [];
+      const collections = results?.collections ?? [];
+      const queries = (results?.queries ?? []).filter((query) => query.text.toLowerCase() !== term.toLowerCase());
+      this.fillList("search-products", products, (node, product) => {
+        const price = formatMoney(product.priceRange.minVariantPrice);
+        bindValues(node, { title: product.title, price, image: product.featuredImage });
+        linkOption(node, productUrl(product.handle, product.id));
+        node.classList.toggle("is-sold-out", !product.availableForSale);
       });
-      fill("search-collections", collections, (node, c) => {
-        binds(node, { title: c.title, image: c.image });
-        link(node, `${(cfg.collectionPath || "/collection").replace(/\/$/, "")}/${c.handle}`);
+      this.fillList("search-collections", collections, (node, collection) => {
+        bindValues(node, { title: collection.title, image: collection.image });
+        linkOption(node, `${(cfg.collectionPath || "/collection").replace(/\/$/, "")}/${collection.handle}`);
       });
-      fill("search-queries", queries, (node, q) => {
-        binds(node, { text: q.text });
-        const a = node.tagName === "A" ? node : node.querySelector("a");
-        const action = rootEl.getAttribute("action") || "/search";
-        if (a) a.setAttribute("href", `${action}${action.includes("?") ? "&" : "?"}${input.name || "q"}=${encodeURIComponent(q.text)}`);
+      this.fillList("search-queries", queries, (node, query) => {
+        bindValues(node, { text: query.text });
+        linkIn(node)?.setAttribute("href", this.queryUrl(query.text));
       });
       const count = products.length + collections.length + queries.length;
-      qsa(rootEl, sel("show")).forEach((el) => {
-        const k = get(el, "show");
-        if (k === "search-empty") show(el, count === 0);
-        if (k === "search-results") show(el, count > 0);
+      this.showCount(count);
+      this.setState(count ? "ready" : "empty");
+      this.open(true);
+      emit("search", { term, products, collections, queries }, this.root);
+    }
+    /** @param {number} count */
+    showCount(count) {
+      qsa(this.root, sel("show")).forEach((el) => {
+        const condition = get(el, "show");
+        if (condition === "search-empty") show(el, count === 0);
+        if (condition === "search-results") show(el, count > 0);
       });
-      items().forEach((el, i) => {
-        el.id || (el.id = `${id}-${i}`);
-        el.setAttribute("aria-selected", "false");
+      this.options().forEach((option, index) => {
+        option.id || (option.id = `${this.resultsId}-${index}`);
+        option.setAttribute("aria-selected", "false");
       });
-      setState(count ? "ready" : "empty");
-      open(true);
-      emit("search", { term, products, collections, queries }, rootEl);
     }
-    function binds(node, values) {
-      qsa(node, sel("search-bind")).forEach((el) => {
-        const k = get(el, "search-bind");
-        if (k === "image") setImage(el, values.image?.url, values.image?.altText || values.title);
-        else if (values[k] != null) setText(el, values[k]);
+    /**
+     * @param {HTMLElement[]} options
+     * @param {number} index
+     */
+    highlight(options, index) {
+      options.forEach((option2, optionIndex) => {
+        option2.setAttribute("aria-selected", String(optionIndex === index));
       });
+      const option = options[index];
+      if (!option) return;
+      this.input.setAttribute("aria-activedescendant", option.id);
+      option.scrollIntoView?.({ block: "nearest" });
     }
-    function link(node, href) {
-      const a = node.tagName === "A" ? node : node.querySelector("a");
-      if (a) {
-        a.setAttribute("href", href);
-        a.setAttribute("role", "option");
+    /** @param {KeyboardEvent} event */
+    onKeydown(event) {
+      const options = this.options();
+      const current = options.findIndex((option) => option.getAttribute("aria-selected") === "true");
+      if (event.key === "ArrowDown" && options.length) {
+        event.preventDefault();
+        this.open(true);
+        this.highlight(options, (current + 1) % options.length);
+      } else if (event.key === "ArrowUp" && options.length) {
+        event.preventDefault();
+        this.highlight(options, current <= 0 ? options.length - 1 : current - 1);
+      } else if (event.key === "Enter" && current >= 0) {
+        event.preventDefault();
+        options[current]?.click();
+      } else if (event.key === "Escape") {
+        this.open(false);
       }
     }
-    input.addEventListener("input", () => {
-      const term = input.value.trim();
-      if (term === last) return;
-      last = term;
-      clearTimeout(timer);
-      timer = setTimeout(() => run(term), cfg.searchDelay ?? 150);
-    });
-    input.addEventListener("focus", () => {
-      if (input.value.trim().length >= min && items().length) open(true);
-    });
-    input.addEventListener("keydown", (e) => {
-      const list = items();
-      const cur = list.findIndex((el) => el.getAttribute("aria-selected") === "true");
-      const move = (i) => {
-        list.forEach((el, j) => el.setAttribute("aria-selected", String(j === i)));
-        if (list[i]) {
-          input.setAttribute("aria-activedescendant", list[i].id);
-          list[i].scrollIntoView?.({ block: "nearest" });
-        }
-      };
-      if (e.key === "ArrowDown" && list.length) {
-        e.preventDefault();
-        open(true);
-        move((cur + 1) % list.length);
-      } else if (e.key === "ArrowUp" && list.length) {
-        e.preventDefault();
-        move(cur <= 0 ? list.length - 1 : cur - 1);
-      } else if (e.key === "Enter" && cur >= 0) {
-        e.preventDefault();
-        list[cur].click();
-      } else if (e.key === "Escape") {
-        open(false);
-      }
-    });
-    document.addEventListener("click", (e) => {
-      if (!rootEl.contains(e.target)) open(false);
-    });
+  };
+  function mountSearch(root = document) {
+    for (const el of within(root, sel("search"))) {
+      if (mounted.has(el)) continue;
+      mounted.add(el);
+      const input = (
+        /** @type {HTMLInputElement | null} */
+        el.querySelector(sel("search-input")) ?? el.querySelector("input")
+      );
+      const results = (
+        /** @type {HTMLElement | null} */
+        el.querySelector(sel("search-results"))
+      );
+      if (input && results) new SearchBox(el, input, results);
+    }
   }
 
   // src/parts/search.js
-  window.Tether.__parts.search = search_exports;
+  var { 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"] = search_exports;
 })();

package/dist/tether.search.min.js

@@ -1 +1 @@
-(()=>{var Q=Object.defineProperty;var Y=(n,s)=>{for(var c in s)Q(n,c,{get:s[c],enumerable:!0})};var S={};Y(S,{mountSearch:()=>G});var H=window.Tether.__core["config.js"],{DEFAULTS:ee,cfg:A,configure:te,isConfigured:re,log:ie,reportError:E,warn:ae}=H;var J=window.Tether.__core["client.js"],{TetherError:ne,endpoint:ce,gql:U,request:oe,unwrap:le,withContext:ue}=J;var W=window.Tether.__core["dom.js"],{attr:D,busy:he,cdnUrl:fe,dataKey:me,emit:_,formatDate:pe,formatMoney:P,formatPercent:ge,get:g,has:be,hasTemplate:we,imageUrl:Ae,notifyLayoutChanged:ye,parseJSONAttr:xe,productUrl:R,qsa:h,readText:Te,repeat:N,repeatKeyed:qe,sameImage:Se,scoped:$e,sel:u,setImage:O,setSelected:ke,setText:j,setTextTracked:ve,show:y,toAttributes:Ie,watchImages:Le}=W;var z="query TetherPredictive($q:String!,$limit:Int!){predictiveSearch(query:$q,limit:$limit,limitScope:EACH,types:[PRODUCT,COLLECTION,QUERY]){products{id handle title availableForSale featuredImage{url altText}priceRange{minVariantPrice{amount currencyCode}}}collections{handle title image{url altText}}queries{text}}}",F=new WeakSet,B=0;function G(n=document){[...n.matches?.(u("search"))?[n]:[],...h(n,u("search"))].forEach(c=>{F.has(c)||(F.add(c),X(c))})}function X(n){let s=n.querySelector(u("search-input"))||n.querySelector("input"),c=n.querySelector(u("search-results"));if(!s||!c)return;let M=parseInt(g(n,"search-limit")||"6",10)||6,$=parseInt(g(n,"search-min")||"2",10)||2,k=c.id||(c.id=`${A.prefix}-search-${++B}`);s.setAttribute("role","combobox"),s.setAttribute("aria-autocomplete","list"),s.setAttribute("aria-controls",k),s.setAttribute("aria-expanded","false"),s.setAttribute("autocomplete","off"),c.hasAttribute("role")||c.setAttribute("role","listbox"),c.hidden=!0;let x=0,v=null,I="",L=new Map,b=e=>n.setAttribute(D("search-state"),e),d=e=>{n.classList.toggle("is-open",e),c.hidden=!e,s.setAttribute("aria-expanded",String(e)),e||s.removeAttribute("aria-activedescendant")},T=()=>h(c,'[role="option"]');async function V(e){let t=++x;if(e.length<$){d(!1),b("idle");return}b("loading");try{let i=L.get(e)||(await U(z,{q:e,limit:M})).predictiveSearch;if(L.set(e,i),t!==x)return;K(i,e)}catch(i){if(t!==x)return;b("error"),E(i,"search")}}function K(e,t){let i=e?.products||[],o=e?.collections||[],l=(e?.queries||[]).filter(r=>r.text.toLowerCase()!==t.toLowerCase()),f=(r,a,w)=>h(c,u(r)).forEach(p=>{N(p,a,w),y(p,a.length>0)});f("search-products",i,(r,a)=>{q(r,{title:a.title,price:P(a.priceRange?.minVariantPrice),image:a.featuredImage}),C(r,R(a.handle,a.id)),r.classList.toggle("is-sold-out",!a.availableForSale)}),f("search-collections",o,(r,a)=>{q(r,{title:a.title,image:a.image}),C(r,`${(A.collectionPath||"/collection").replace(/\/$/,"")}/${a.handle}`)}),f("search-queries",l,(r,a)=>{q(r,{text:a.text});let w=r.tagName==="A"?r:r.querySelector("a"),p=n.getAttribute("action")||"/search";w&&w.setAttribute("href",`${p}${p.includes("?")?"&":"?"}${s.name||"q"}=${encodeURIComponent(a.text)}`)});let m=i.length+o.length+l.length;h(n,u("show")).forEach(r=>{let a=g(r,"show");a==="search-empty"&&y(r,m===0),a==="search-results"&&y(r,m>0)}),T().forEach((r,a)=>{r.id||(r.id=`${k}-${a}`),r.setAttribute("aria-selected","false")}),b(m?"ready":"empty"),d(!0),_("search",{term:t,products:i,collections:o,queries:l},n)}function q(e,t){h(e,u("search-bind")).forEach(i=>{let o=g(i,"search-bind");o==="image"?O(i,t.image?.url,t.image?.altText||t.title):t[o]!=null&&j(i,t[o])})}function C(e,t){let i=e.tagName==="A"?e:e.querySelector("a");i&&(i.setAttribute("href",t),i.setAttribute("role","option"))}s.addEventListener("input",()=>{let e=s.value.trim();e!==I&&(I=e,clearTimeout(v),v=setTimeout(()=>V(e),A.searchDelay??150))}),s.addEventListener("focus",()=>{s.value.trim().length>=$&&T().length&&d(!0)}),s.addEventListener("keydown",e=>{let t=T(),i=t.findIndex(l=>l.getAttribute("aria-selected")==="true"),o=l=>{t.forEach((f,m)=>f.setAttribute("aria-selected",String(m===l))),t[l]&&(s.setAttribute("aria-activedescendant",t[l].id),t[l].scrollIntoView?.({block:"nearest"}))};e.key==="ArrowDown"&&t.length?(e.preventDefault(),d(!0),o((i+1)%t.length)):e.key==="ArrowUp"&&t.length?(e.preventDefault(),o(i<=0?t.length-1:i-1)):e.key==="Enter"&&i>=0?(e.preventDefault(),t[i].click()):e.key==="Escape"&&d(!1)}),document.addEventListener("click",e=>{n.contains(e.target)||d(!1)})}window.Tether.__parts.search=S;})();
+"use strict";(()=>{var N=Object.defineProperty;var P=(s,t)=>{for(var e in t)N(s,e,{get:t[e],enumerable:!0})};var p={};P(p,{mountSearch:()=>Q});var R=window.Tether.__core["config.js"],{DEFAULTS:J,cfg:l,configure:W,isConfigured:z,log:w,reportError:b,resolveConfig:B,toMetafieldIdentifier:G,warn:X}=R;var F=window.Tether.__core["client.js"],{TetherError:tt,endpoint:et,gql:A,request:it,unwrap:st,withContext:rt}=F;var M=window.Tether.__core["dom.js"],{attr:y,busy:at,cdnUrl:ot,emit:T,formatDate:ht,formatMoney:E,formatPercent:ct,get:u,has:lt,hasTemplate:ut,imageUrl:dt,notifyLayoutChanged:mt,parseJSONAttr:ft,productUrl:S,qsa:c,repeat:x,repeatKeyed:pt,sameImage:gt,scoped:wt,sel:o,setImage:L,setSelected:bt,setStoreHtml:At,setText:C,setTextTracked:yt,show:d,toAttributes:Tt,watchImages:Et}=M;var O=window.Tether.__core["mounting.js"],{hydrateFromPage:xt,liveLists:Lt,liveProducts:Ct,mountProduct:It,mountedLists:qt,mountedProducts:Ut,pruneLive:kt,retryFailed:$t,settleMarket:_t,trackMarket:vt,within:I}=O;var j="query TetherPredictive($q:String!,$limit:Int!){predictiveSearch(query:$q,limit:$limit,limitScope:EACH,types:[PRODUCT,COLLECTION,QUERY]){products{id handle title availableForSale featuredImage{url altText}priceRange{minVariantPrice{amount currencyCode}}}collections{handle title image{url altText}}queries{text}}}",V=6,H=2,K="/search",q=new WeakSet,U=0;function k(s,t,e){return parseInt(u(s,t)||"",10)||e}var _=s=>s.tagName==="A"?s:s.querySelector("a");function m(s,t){c(s,o("search-bind")).forEach(e=>{let i=u(e,"search-bind");i==="image"?L(e,t.image?.url,t.image?.altText||t.title):(i==="title"||i==="price"||i==="text")&&t[i]!=null&&C(e,t[i])})}function $(s,t){let e=_(s);e&&(e.setAttribute("href",t),e.setAttribute("role","option"))}var f=class{constructor(t,e,i){this.root=t,this.input=e,this.results=i,this.limit=k(t,"search-limit",V),this.minCharacters=k(t,"search-min",H),i.id||(U+=1,i.id=`${l.prefix}-search-${U}`),this.resultsId=i.id,this.searchNumber=0,this.timer=void 0,this.lastTerm="",this.cache=new Map,this.setUpAria(),this.listen()}setUpAria(){this.input.setAttribute("role","combobox"),this.input.setAttribute("aria-autocomplete","list"),this.input.setAttribute("aria-controls",this.resultsId),this.input.setAttribute("aria-expanded","false"),this.input.setAttribute("autocomplete","off"),this.results.hasAttribute("role")||this.results.setAttribute("role","listbox"),this.results.hidden=!0}listen(){this.input.addEventListener("input",()=>{let t=this.input.value.trim();t!==this.lastTerm&&(this.lastTerm=t,clearTimeout(this.timer),this.timer=setTimeout(()=>void this.search(t),l.searchDelay))}),this.input.addEventListener("focus",()=>{this.input.value.trim().length>=this.minCharacters&&this.options().length&&this.open(!0)}),this.input.addEventListener("keydown",t=>{this.onKeydown(t)}),document.addEventListener("click",t=>{this.root.contains(t.target)||this.open(!1)})}setState(t){this.root.setAttribute(y("search-state"),t)}open(t){this.root.classList.toggle("is-open",t),this.results.hidden=!t,this.input.setAttribute("aria-expanded",String(t)),t||this.input.removeAttribute("aria-activedescendant")}options(){return c(this.results,'[role="option"]')}async fetchResults(t){let e=this.cache.get(t);if(e)return e;let i=await A(j,{q:t,limit:this.limit});return this.cache.set(t,i.predictiveSearch),i.predictiveSearch}async search(t){this.searchNumber+=1;let e=this.searchNumber;if(t.length<this.minCharacters){this.open(!1),this.setState("idle");return}this.setState("loading");try{let i=await this.fetchResults(t);e===this.searchNumber&&this.render(i,t)}catch(i){if(e!==this.searchNumber){w("a superseded search failed",i);return}this.setState("error"),b(i,"search")}}fillList(t,e,i){c(this.results,o(t)).forEach(a=>{x(a,e,i),d(a,e.length>0)})}queryUrl(t){let e=this.root.getAttribute("action")||K,i=e.includes("?")?"&":"?";return`${e}${i}${this.input.name||"q"}=${encodeURIComponent(t)}`}render(t,e){let i=t?.products??[],a=t?.collections??[],h=(t?.queries??[]).filter(n=>n.text.toLowerCase()!==e.toLowerCase());this.fillList("search-products",i,(n,r)=>{let D=E(r.priceRange.minVariantPrice);m(n,{title:r.title,price:D,image:r.featuredImage}),$(n,S(r.handle,r.id)),n.classList.toggle("is-sold-out",!r.availableForSale)}),this.fillList("search-collections",a,(n,r)=>{m(n,{title:r.title,image:r.image}),$(n,`${(l.collectionPath||"/collection").replace(/\/$/,"")}/${r.handle}`)}),this.fillList("search-queries",h,(n,r)=>{m(n,{text:r.text}),_(n)?.setAttribute("href",this.queryUrl(r.text))});let g=i.length+a.length+h.length;this.showCount(g),this.setState(g?"ready":"empty"),this.open(!0),T("search",{term:e,products:i,collections:a,queries:h},this.root)}showCount(t){c(this.root,o("show")).forEach(e=>{let i=u(e,"show");i==="search-empty"&&d(e,t===0),i==="search-results"&&d(e,t>0)}),this.options().forEach((e,i)=>{e.id||(e.id=`${this.resultsId}-${i}`),e.setAttribute("aria-selected","false")})}highlight(t,e){t.forEach((a,h)=>{a.setAttribute("aria-selected",String(h===e))});let i=t[e];i&&(this.input.setAttribute("aria-activedescendant",i.id),i.scrollIntoView?.({block:"nearest"}))}onKeydown(t){let e=this.options(),i=e.findIndex(a=>a.getAttribute("aria-selected")==="true");t.key==="ArrowDown"&&e.length?(t.preventDefault(),this.open(!0),this.highlight(e,(i+1)%e.length)):t.key==="ArrowUp"&&e.length?(t.preventDefault(),this.highlight(e,i<=0?e.length-1:i-1)):t.key==="Enter"&&i>=0?(t.preventDefault(),e[i]?.click()):t.key==="Escape"&&this.open(!1)}};function Q(s=document){for(let t of I(s,o("search"))){if(q.has(t))continue;q.add(t);let e=t.querySelector(o("search-input"))??t.querySelector("input"),i=t.querySelector(o("search-results"));e&&i&&new f(t,e,i)}}var{Tether:v}=window;if(!v)throw new Error("tether.search.js runs after the Tether script, which loads it");v.__parts.search=p;})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occluze/tether",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "Free, open-source alternative to Smootify and Storesynk (Shopyflow): Shopify products, cart and subscriptions in Webflow with HTML attributes. Optional Shopify to Webflow CMS sync.",
   "type": "module",
   "main": "dist/esm/index.js",
@@ -37,20 +37,39 @@
   "scripts": {
     "build": "node scripts/build.mjs",
     "dev": "node scripts/build.mjs --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json",
+    "knip": "knip",
+    "deps": "depcruise src server/src server/bin server/scripts scripts",
+    "check": "npm run format:check && npm run lint && npm run typecheck && npm run knip && npm run deps && npm test",
+    "prepare": "lefthook install",
     "test": "node --test test/*.test.js server/test/*.test.js && npm run test:types",
+    "test:types": "tsc -p types/tsconfig.json",
     "smoke": "node scripts/smoke.mjs",
-    "pretest": "node scripts/build.mjs",
+    "pretest": "node scripts/build.mjs --out .test-dist",
     "presmoke": "node scripts/build.mjs",
-    "test:types": "tsc -p types/tsconfig.json",
     "release": "node scripts/release.mjs",
     "e2e:build": "npm run build && cd examples/astro && (test -f .env || cp .env.example .env) && npm install --no-audit --no-fund && npm install --no-save ../.. && npx astro build",
     "e2e": "npm run e2e:build && playwright test -c e2e/playwright.config.js"
   },
   "devDependencies": {
+    "@eslint/js": "10.0.1",
     "@playwright/test": "^1.64.1",
+    "@tsconfig/strictest": "2.0.8",
+    "@types/node": "24.19.2",
+    "dependency-cruiser": "18.7.2",
     "esbuild": "^0.25.0",
+    "eslint": "10.14.0",
+    "eslint-config-prettier": "10.1.8",
+    "globals": "17.14.0",
     "jsdom": "^26.0.0",
-    "typescript": "^5.9.3"
+    "knip": "6.44.1",
+    "lefthook": "2.2.2",
+    "prettier": "3.9.10",
+    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "typescript-eslint": "8.72.1"
   },
   "license": "MIT",
   "author": {

package/src/account/addresses-view.js

@@ -0,0 +1,92 @@
+/**
+ * The customer's addresses (`tether-addresses`), with `tether-show="addresses-loading"`, `addresses-empty` and
+ * `addresses-error`. The last list rendered is kept, so an edit button can fill the address form from it.
+ */
+import { reportError } from '../config.js';
+import { get, qsa, repeat, sel, setText } from '../dom.js';
+import { addressText, bindsIn, ownValue, showIn } from './markup.js';
+import { addresses } from './operations.js';
+
+/**
+ * @typedef {object} CustomerAddress An address of account-ops.js's documents, with `isDefault` added.
+ * @property {string} id
+ * @property {string | null} firstName
+ * @property {string | null} lastName
+ * @property {string | null} company
+ * @property {string | null} address1
+ * @property {string | null} address2
+ * @property {string | null} city
+ * @property {string | null} province
+ * @property {string | null} zoneCode
+ * @property {string | null} zip
+ * @property {string | null} country
+ * @property {string | null} countryCode
+ * @property {string | null} phoneNumber
+ * @property {string[]} formatted
+ * @property {boolean} isDefault
+ */
+
+/** @type {readonly CustomerAddress[]} */
+let shown = [];
+
+/**
+ * @param {string} id
+ * @returns {CustomerAddress | undefined} The address with this id in the list shown last.
+ */
+export const shownAddress = (id) => shown.find((address) => address.id === id);
+
+/**
+ * @param {CustomerAddress} address
+ * @returns {Record<string, string>} The text of each `tether-address-bind` value.
+ */
+const addressTexts = (address) => ({
+  formatted: addressText(address),
+  name: [address.firstName, address.lastName].filter(Boolean).join(' '),
+  company: address.company || '',
+  address1: address.address1 || '',
+  address2: address.address2 || '',
+  city: address.city || '',
+  zip: address.zip || '',
+  province: address.province || '',
+  country: address.country || '',
+  phone: address.phoneNumber || '',
+});
+
+/**
+ * @param {HTMLElement} row
+ * @param {CustomerAddress} address
+ */
+function fillAddress(row, address) {
+  row.dataset['tetherAddress'] = address.id;
+  const texts = addressTexts(address);
+  bindsIn(row, 'address-bind').forEach((el) => {
+    const text = ownValue(texts, get(el, 'address-bind') ?? '');
+    if (text !== undefined) setText(el, text);
+  });
+  showIn(row, 'address-show', { default: address.isDefault, 'not-default': !address.isDefault });
+}
+
+/**
+ * Loads and renders the addresses. A failure is reported and shows `addresses-error`, never "no addresses yet".
+ *
+ * @param {ParentNode} root
+ */
+export async function renderAddresses(root) {
+  const boxes = qsa(root, sel('addresses'));
+  if (!boxes.length) return;
+  showIn(root, 'show', { 'addresses-loading': true, 'addresses-empty': false });
+  /** @type {CustomerAddress[]} */
+  let list;
+  try {
+    list = await addresses();
+  } catch (error) {
+    reportError(error, 'addresses');
+    showIn(root, 'show', { 'addresses-loading': false, 'addresses-error': true });
+    return;
+  }
+  shown = list;
+  showIn(root, 'show', { 'addresses-loading': false, 'addresses-empty': list.length === 0, 'addresses-error': false });
+  boxes.forEach((box) => {
+    repeat(box, list, fillAddress);
+  });
+}