@luigisbox/luma 0.4.0 → 0.5.0

package/src/core/scheduler.ts

@@ -28,12 +28,36 @@ let framesRunning = false;
 const firstPaintDone = () =>
   framesRunning || (framesRunning = performance.getEntriesByType('paint').length > 0 || document.readyState === 'complete');
 
+/** Longest wait for a frame: past it the reconcile runs in a task (afterFrame too, once frames are stalled). */
+const FRAME_FALLBACK_MS = 100;
+/** A frame asked for this long ago that has not come: frames are stalled (WebKit on a busy machine: none for ~5 s). */
+const STALL_MS = 250;
+let asked = 0; // our requestAnimationFrame callbacks not yet run
+let askedAt = 0; // when the earliest of them was asked for, or the last frame of ours ran
+/** requestAnimationFrame, counted: whether a frame is overdue is known to every caller. */
+const frame = (cb: () => void) => {
+  if (!asked++) askedAt = performance.now();
+  requestAnimationFrame(() => {
+    asked--;
+    askedAt = performance.now(); // a frame came: the asks still waiting start the clock anew
+    cb();
+  });
+};
+const framesStalled = () => asked > 0 && performance.now() - askedAt > STALL_MS;
+
 export const schedule = () => {
   if (pending) return;
   pending = true;
   // rAF does not run in background tabs or before the first paint; use a timeout there.
-  if (document.visibilityState === 'visible' && firstPaintDone()) requestAnimationFrame(flush);
-  else setTimeout(flush, document.visibilityState === 'visible' ? 16 : 50);
+  if (document.visibilityState !== 'visible' || !firstPaintDone()) return void setTimeout(flush, document.visibilityState === 'visible' ? 16 : 50);
+  // A visible page can still run no frames for seconds while its timers run
+  // (WebKit on a busy 2-CPU machine: ~5 s after typing). Waiting for one
+  // then outlasted the hold's timeout: their listing came back, ours stayed
+  // hidden. Whichever comes first, once.
+  let done = false;
+  const run = () => !done && ((done = true), flush());
+  frame(run);
+  setTimeout(run, FRAME_FALLBACK_MS);
 };
 
 export const scheduleIn = (ms: number) => setTimeout(schedule, ms);
@@ -43,7 +67,11 @@ export const scheduleIn = (ms: number) => setTimeout(schedule, ms);
  * are clean then, so reading computed styles or sizes costs only what we read,
  * not a style pass over the whole (host) document. Where no frames run (a
  * hidden tab, before the first paint) in a task of its own; a tab hidden
- * meanwhile (rAF waits until it is shown) by a timeout.
+ * meanwhile (rAF waits until it is shown) by a timeout: 500 ms, so a slow
+ * frame (a large page at 4x CPU) still comes first and the read costs no
+ * forced style pass; FRAME_FALLBACK_MS once frames are stalled (none for
+ * STALL_MS while asked for: WebKit ran none for ~5 s on a busy machine, and a
+ * listing's first render, one step per frame, showed nothing for 2.5 s then).
  */
 export const afterFrame = (f: Task) => {
   if (document.visibilityState !== 'visible') {
@@ -57,8 +85,14 @@ export const afterFrame = (f: Task) => {
   const run = () => !done && ((done = true), f());
   // Ahead of the page's own queued tasks where the browser can (Chrome's scheduler).
   const post = (globalThis as any).scheduler?.postTask;
-  requestAnimationFrame(() => (post ? post.call((globalThis as any).scheduler, run, { priority: 'user-blocking' }) : setTimeout(run, 0)));
-  setTimeout(run, 500);
+  frame(() => (post ? post.call((globalThis as any).scheduler, run, { priority: 'user-blocking' }) : setTimeout(run, 0)));
+  const t0 = performance.now();
+  const tick = () => {
+    if (done) return;
+    if (framesStalled() || performance.now() - t0 >= 500) run();
+    else setTimeout(tick, FRAME_FALLBACK_MS);
+  };
+  setTimeout(tick, FRAME_FALLBACK_MS);
 };
 
 let pendingNow = false;

package/src/core/speculation.ts

@@ -18,6 +18,7 @@
 // activation (core/takeover.ts).
 
 import { mark } from './health';
+import { cspNonce } from './styles';
 import type { GlobalConfigType } from '../types';
 
 const LINKS = ':is(lbx-search, lbx-plp) [data-lbx-list] a[href], lbx-reco a[href], [data-lbx="ac-overlay"] a[href]';
@@ -49,6 +50,7 @@ export const speculate = (g: GlobalConfigType, onUrlChange: (f: () => void) => u
     el = document.createElement('script');
     el.type = 'speculationrules';
     el.setAttribute('data-lbx', 'speculation');
+    el.nonce = cspNonce(); // a strict script-src applies to inline speculation rules
     el.textContent = JSON.stringify(rules);
     document.head.append(el);
   };

package/src/core/stash.ts

@@ -1,11 +1,17 @@
-// A listing result kept in sessionStorage for the next page load of its URL
-// (widgets/listing/stash.ts reads and writes them). The entry only asks
+// A listing result kept in sessionStorage for the next page load that shows
+// it (widgets/listing/stash.ts reads and writes them): a listing left for
+// Back, under its page's URL; a typed query's search page, under the query
+// (the URL its form submits to is often not the one its page loads at: a
+// server that redirects `/search?q=x` to `/search/x/`). The entry only asks
 // whether this load can use one: a search page then does not send its own
 // request before the listing's chunk has read it.
 import { pageKey } from './page';
 
 export const STASH = 'lbx:r:';
+/** A listing left for Back: its page. */
 export const stashKey = (href: string) => STASH + pageKey(href);
+/** A typed query's result (`spec`): the query, on its route, whatever URL its page loads at. */
+export const specKey = (route: string, q: string) => `${STASH}spec:${route}:${q}`;
 
 /** How this document was loaded, and its URL (a later SPA visit is not the load a stash is for). */
 export const navigation = () => {
@@ -47,11 +53,14 @@ export const stashFits = (kind: string, at = 0) => {
   return Date.now() - at < ROUND_TRIP_MS && (t === 'reload' || (t === 'navigate' && fromItself()));
 };
 
-/** A stash this load will likely use (the listing checks it fully). Reads only the start of the entry. */
-export const hasStash = (href: string) => {
+/** A stash this load will likely use (the listing checks it fully): the page's for Back, or the search query's (`spec`). Reads only the start of the entry. */
+export const hasStash = (href: string, spec?: { route: string; q: string }) => {
   try {
-    const head = sessionStorage.getItem(stashKey(href))?.slice(0, 60);
-    return !!head && stashFits(head.includes('"kind":"back"') ? 'back' : 'spec', Number(/"at":(\d+)/.exec(head)?.[1]) || 0);
+    const fits = (key: string) => {
+      const head = sessionStorage.getItem(key)?.slice(0, 60);
+      return !!head && stashFits(head.includes('"kind":"back"') ? 'back' : 'spec', Number(/"at":(\d+)/.exec(head)?.[1]) || 0);
+    };
+    return fits(stashKey(href)) || (!!spec?.q && fits(specKey(spec.route, spec.q)));
   } catch {
     return false;
   }

package/src/core/styles.ts

@@ -13,13 +13,14 @@
 //    route-scoped. CSS survives host re-renders, DOM mutations would not.
 // Every sheet is put back when a host re-render drops it (onFlush).
 
+import { DOCUMENT_REACT } from './frameworks';
 import { documentMayHydrate, hasFiber, watchOwnRemovals } from './own';
 import { onFlush } from './scheduler';
 
-// While <head> is still parsing, on every page: whole-document frameworks
-// announce themselves only at the end of <body>, and the body-start observer
-// puts ours in before anything of the body paints.
-const deferred = () => !document.body;
+// While <head> is still parsing, on every page that may be whole-document
+// React (DOCUMENT_REACT): it announces itself only at the end of <body>, and
+// the body-start observer puts ours in before anything of the body paints.
+const deferred = () => (DOCUMENT_REACT ? !document.body : false);
 
 const sheets = new Map<string, HTMLStyleElement>();
 
@@ -38,7 +39,7 @@ const declareLayer = () => {
   const head = document.head || document.documentElement;
   // React has it once it has claimed <head>, or <html> when its root renders
   // no <head> of its own (Next's app router: Next fills it): hydrated past it.
-  const early = (document.readyState === 'loading' || documentMayHydrate()) && !hasFiber(head) && !hasFiber(document.documentElement);
+  const early = DOCUMENT_REACT ? (document.readyState === 'loading' || documentMayHydrate()) && !hasFiber(head) && !hasFiber(document.documentElement) : false;
   if (order?.isConnected && (early || head.firstElementChild === order)) return;
   order ??= styleEl();
   order.textContent = '@layer lbx;';

package/src/core/support.ts

@@ -9,4 +9,4 @@ export { speculate } from './speculation';
 // Images (./images.ts, ./image-tags.ts, ./image-load.ts): every widget's templates and pages.
 export { imageHelpers } from './image-tags';
 export { firstRowCount, firstRowImages, imageOf } from './images';
-export { preloadImages, settleImages, warmImages } from './image-load';
+export { settleImages, warmImages } from './image-load';

package/src/core/takeover.ts

@@ -18,6 +18,7 @@
 
 import { earlyHold } from './early-rules';
 import { canon, isOwnEntry } from './entries';
+import { SSR } from './features';
 import { mark } from './health';
 import { failKey, failures as storedFailures, holding, LOADING, MAX_FAILURES, painted, reserveCss } from './hold';
 import { onUrlChange } from './sense';
@@ -104,7 +105,7 @@ export const takeover = (r: TakeoverRoute): Takeover => {
     // A server-rendered fragment carries its own CSS hiding their listing (for
     // pages without JavaScript). Once we write ours, per state, it goes: theirs
     // must come back when we hand the page back.
-    for (const el of document.querySelectorAll(`style[data-lbx-ssr-host="${r.id}"]`)) el.remove();
+    if (SSR) for (const el of document.querySelectorAll(`style[data-lbx-ssr-host="${r.id}"]`)) el.remove();
     const key = `host-${r.id}`;
     if (!r.accepts(new URL(location.href))) return setCss(key, null);
     const reserve = reserveCss(r.reserveSelector);
@@ -116,7 +117,7 @@ export const takeover = (r: TakeoverRoute): Takeover => {
     else setCss(key, r.hostCss + reserve);
   };
 
-  let ssr = ssrOf(r);
+  let ssr = SSR ? ssrOf(r) : null;
   let visitStartedAtBoot = true;
   const t: Takeover = {
     get state() {
@@ -126,7 +127,7 @@ export const takeover = (r: TakeoverRoute): Takeover => {
       return ssr;
     },
     serverRendered: () => {
-      if (ssr === 'rendered' || !visitStartedAtBoot) return;
+      if (!SSR || ssr === 'rendered' || !visitStartedAtBoot) return;
       ssr = 'rendered';
       countFailures(0); // the page is ours after all (a late include is not a failure)
       if (state !== 'ours') set('ours');
@@ -155,7 +156,7 @@ export const takeover = (r: TakeoverRoute): Takeover => {
       // A server-rendered visit whose listing is on the page (the server's, or
       // ours after hydration) keeps it: with SSI there is no listing of theirs
       // in the page to hand back to.
-      if (ssr === 'rendered' && document.querySelector(`${r.tag}[data-lbx]`)?.childElementCount) return;
+      if (SSR && ssr === 'rendered' && document.querySelector(`${r.tag}[data-lbx]`)?.childElementCount) return;
       if (failed) fail();
       else set('released');
     },
@@ -208,7 +209,7 @@ export const takeover = (r: TakeoverRoute): Takeover => {
   const early = earlyHold();
   // Failing: an early hold is not continued (it ends below, with drop()).
   const claimed = wasActive && !t.failing && !!early?.claim?.(r.id);
-  if (wasActive && ssr) set(ssr === 'rendered' ? 'ours' : 'released');
+  if (SSR && wasActive && ssr) set(ssr === 'rendered' ? 'ours' : 'released');
   else if (wasActive) set(!t.failing && (claimed || r.held || !painted()) ? 'hold' : 'native');
   else css();
   if (claimed) {

package/src/core/templates.ts

@@ -5,6 +5,7 @@
 // scope plus props; lit does the DOM updates (only changed bindings touch
 // the DOM, so images, focus and open <details> survive re-renders).
 
+import { SSR } from './features';
 import { nothing, render } from 'lit-html';
 
 export type Template<S = any> = (s: S) => unknown;
@@ -31,7 +32,7 @@ export const templateOf = (templates: Templates, name: string, data: Record<stri
     const s: any = { ...d };
     s.include = (n: string, props?: Record<string, unknown>) => {
       const t = templates[n];
-      if (!t) throw new Error(`template "${n}" not found`);
+      if (!t) throw Error(`template "${n}" not found`);
       if (!props) return t(s);
       const r = props.r;
       if (!r || typeof r !== 'object') return t(scope({ ...s, ...props }));
@@ -70,5 +71,7 @@ export const view = (root: HTMLElement | ShadowRoot, templates: Templates) => ({
    * server-side rendering): binds to the existing DOM instead of re-creating it.
    * `hydrate` is @lit-labs/ssr-client's, loaded only on server-rendered pages.
    */
-  hydrate: (name: string, data: Record<string, unknown>, hydrate: (v: unknown, c: HTMLElement | ShadowRoot) => void) => hydrate(templateOf(templates, name, data), root),
+  hydrate: SSR
+    ? (name: string, data: Record<string, unknown>, hydrate: (v: unknown, c: HTMLElement | ShadowRoot) => void) => hydrate(templateOf(templates, name, data), root)
+    : (undefined as never), // no server-rendered listings in this build (core/features.ts)
 });

package/src/core/tiles.ts

@@ -22,8 +22,10 @@
 // the click may leave the page: so each is first queued in sessionStorage, in
 // the click's own task, where analytics claims it, on this page or the next.
 // Not where the integration has no analytics (`_global.analytics` false: the
-// entry sets it where there is no _analytics.ts).
+// entry sets it where there is no _analytics.ts), and not in its build
+// (core/features.ts ANALYTICS): there a tile only puts products in the cart.
 
+import { ANALYTICS, CART } from './features';
 import { reportError } from './health';
 import { session } from './storage';
 import type { GlobalConfigType, Result } from '../types';
@@ -56,7 +58,7 @@ export interface Watched {
 /** The queue analytics claims from (src/analytics/triggers.ts). */
 export const TILES = 'lbx:tiles';
 const announce = (g: GlobalConfigType, e: Omit<TileEvent, 'id' | 'url' | 'at'>) => {
-  if (g.analytics === false) return;
+  if (!ANALYTICS || g.analytics === false) return;
   const d = { ...e, id: crypto.randomUUID(), url: location.href, at: Date.now() };
   session.set(TILES, [...(session.get<TileEvent[]>(TILES) ?? []), d].slice(-20));
   try {
@@ -68,11 +70,33 @@ const announce = (g: GlobalConfigType, e: Omit<TileEvent, 'id' | 'url' | 'at'>)
 const reference = (r: Result) => `${r.type || 'product'}/@id:${r.id}`;
 
 /** A result clicked (a link to it, or our own navigation: the autocomplete). */
-export const picked = (r: Result, index: number, list: string, g: GlobalConfigType) => announce(g, { kind: 'click', reference: reference(r), result: r, index, list });
+export const picked = (r: Result, index: number, list: string, g: GlobalConfigType) => (ANALYTICS ? announce(g, { kind: 'click', reference: reference(r), result: r, index, list }) : undefined);
+
+/**
+ * A product click, announced: only ever announced, so not in a build without
+ * analytics (core/features.ts). Out here, not in watch()'s try: Rollup folds
+ * no flag inside a try (its tryCatchDeoptimization).
+ */
+const clicked = ANALYTICS
+  ? (t: Element, tile: Element, at: number, n: number, results: readonly Result[], w: Watched) => {
+      const a = t.closest<HTMLAnchorElement>('a[href]');
+      if (!a || !tile.contains(a)) return;
+      const r = resultOf(a, at, n, results);
+      if (r) picked(r.r, r.i, w.list, w.global);
+    }
+  : null;
+
+/**
+ * The cart button a click is on: only where the integration's templates have
+ * one (core/features.ts CART). Out of watch()'s try, as `clicked`.
+ */
+const cartOf = CART ? (t: Element) => t.closest<HTMLElement>('[data-lbx-cart]') : null;
 
 const watched = new WeakSet<Element>();
 /** Product clicks and add-to-carts inside `root` (once per root). */
 export const watch = (root: Element, w: Watched) => {
+  // Nothing to see: no cart button in the integration's templates, no analytics (core/features.ts).
+  if (!CART && !ANALYTICS) return;
   if (watched.has(root)) return;
   watched.add(root);
   const on = (e: MouseEvent) => {
@@ -84,12 +108,9 @@ export const watch = (root: Element, w: Watched) => {
       const results = w.results();
       const tiles = [...tile.parentElement!.children];
       const at = tiles.indexOf(tile);
-      const cart = t!.closest<HTMLElement>('[data-lbx-cart]');
+      const cart = cartOf?.(t!);
       if (cart && tile.contains(cart)) return void (e.type === 'click' && toCart(e, cart, tile, at, tiles.length, results, w));
-      const a = t!.closest<HTMLAnchorElement>('a[href]');
-      if (!a || !tile.contains(a)) return;
-      const r = resultOf(a, at, tiles.length, results);
-      if (r) picked(r.r, r.i, w.list, w.global);
+      if (clicked) clicked(t!, tile, at, tiles.length, results, w);
     } catch (err) {
       reportError('tile click', err);
     }
@@ -126,8 +147,10 @@ const toCart = (e: MouseEvent, el: HTMLElement, tile: Element, at: number, n: nu
   const hook = w.global.addToCart;
   if (typeof hook !== 'function') return reportError('add to cart', '[data-lbx-cart] needs _global.addToCart (_init.ts or _global/_widget.ts) to put the product in the site\'s cart');
   const count = Math.max(1, Math.round(Number(el.dataset.lbxCart) || 1));
-  const price = typeof hit.r.c.price === 'number' ? hit.r.c.price : undefined;
-  announce(w.global, { kind: 'add_to_cart', reference: reference(hit.r), result: hit.r, index: hit.i, list: w.list, count, ...(price !== undefined ? { price } : {}) });
+  if (ANALYTICS) {
+    const price = typeof hit.r.c.price === 'number' ? hit.r.c.price : undefined;
+    announce(w.global, { kind: 'add_to_cart', reference: reference(hit.r), result: hit.r, index: hit.i, list: w.list, count, ...(price !== undefined ? { price } : {}) });
+  }
   try {
     const p = hook(hit.r, { count, el, event: e });
     if (p && typeof (p as Promise<unknown>).catch === 'function') (p as Promise<unknown>).catch((err) => reportError('addToCart', err));

package/src/core/url.ts

@@ -18,6 +18,7 @@
 //    null-state entries altogether.
 
 import { canon, markOwnEntry } from './entries';
+import { ASTRO, NEXT, SVELTEKIT, VUE } from './frameworks';
 
 interface HostRouter {
   push(to: string): unknown;
@@ -42,6 +43,7 @@ const samePath = (a: string, b: string) => {
 };
 
 const vueRouter = (): HostRouter | null => {
+  if (!VUE) return null;
   // Vue 3 (the app on its mount element: every one, a widget app may come first), Vue 2 (the root instance), Nuxt 2.
   const candidates = [
     ...[...document.querySelectorAll('#__nuxt, #app, [data-v-app]')].map((el: any) => el.__vue_app__?.config?.globalProperties?.$router ?? el.__vue__?.$router),
@@ -68,6 +70,7 @@ const vueRouter = (): HostRouter | null => {
 
 /** Next.js pages router. The app router (it sets window.next.router too) follows raw history writes by itself. */
 const nextRouter = (): HostRouter | null => {
+  if (!NEXT) return null;
   const w = window as any;
   if (w.next?.appDir || !w.__NEXT_DATA__) return null;
   const r = w.next?.router;
@@ -81,7 +84,7 @@ const hostRouter = () => vueRouter() ?? nextRouter();
 /** A mounted router found (usable, or hash mode), or waited for one in vain: writes are not queued from then on. */
 let settled = false;
 /** A server-rendered Vue app whose client app has not mounted yet (no router to talk to). vueRouter() may settle it (a hash-mode router: null, settled), hence `settled` is read again after it. */
-const vueNotMountedYet = () => !settled && !!((window as any).__NUXT__ || document.querySelector('#__nuxt, [data-server-rendered]')) && !vueRouter() && !settled;
+const vueNotMountedYet = () => (VUE ? !settled && !!((window as any).__NUXT__ || document.querySelector('#__nuxt, [data-server-rendered]')) && !vueRouter() && !settled : false);
 
 /** The router's own path for a URL: without its base, which it adds itself. */
 const routerPath = (r: HostRouter, url: URL) => {
@@ -140,8 +143,8 @@ const SK_NAVIGATION = 'sveltekit:navigation';
 const entryState = () => {
   const s = history.state;
   if (!s || typeof s !== 'object') return null;
-  if (s[SK_HISTORY] && SK_NAVIGATION in s) return { [SK_HISTORY]: s[SK_HISTORY], [SK_NAVIGATION]: s[SK_NAVIGATION] };
-  if (typeof s.index === 'number' && document.querySelector('meta[name="astro-view-transitions-enabled"]')) return { index: s.index, scrollX, scrollY };
+  if (SVELTEKIT && s[SK_HISTORY] && SK_NAVIGATION in s) return { [SK_HISTORY]: s[SK_HISTORY], [SK_NAVIGATION]: s[SK_NAVIGATION] };
+  if (ASTRO && typeof s.index === 'number' && document.querySelector('meta[name="astro-view-transitions-enabled"]')) return { index: s.index, scrollX, scrollY };
   return null;
 };
 

package/src/core/widget-inits.ts

@@ -3,6 +3,7 @@
 // entry: the hooks' modules are in the widget's own chunks anyway. No DOM:
 // the server renderer runs them for its listings too.
 
+import { WIDGET_INITS } from './features';
 import { folderOf, slot, type IntegrationFiles } from './integration';
 import type { LumaApi, LumaConfigType, LumaWidgetInitType } from '../types';
 
@@ -10,9 +11,11 @@ const widgetInitsRun = new WeakMap<object, Map<string, Promise<void>>>();
 /**
  * The `_widget.ts` of a widget's folders, in folder order, each run once per
  * config (a folder shared by widgets, `_global`, runs for the first): before
- * the widget's context is made from the config they complete.
+ * the widget's context is made from the config they complete. An integration
+ * without a _widget.ts (core/features.ts) builds none of it: 121 B gzip.
  */
 export const loadWidgetInits = (config: LumaConfigType, files: Pick<IntegrationFiles, 'widgetInits'>, folders: readonly string[], version: string) => {
+  if (!WIDGET_INITS) return Promise.resolve();
   let ran = widgetInitsRun.get(config);
   if (!ran) widgetInitsRun.set(config, (ran = new Map()));
   const Luma: LumaApi = { version, config };

package/src/lit.ts

@@ -1,6 +1,7 @@
 // lit-html for templates: `import { html, repeat } from '@/lit'` in an
 // integration, so every template uses the framework's one copy of lit.
-// Only what a template uses ends up in the bundle. Note for form controls:
+// Only what a template uses ends up in the bundle (a directive no template
+// uses too: build/vite.mjs pureDirectives). Note for form controls:
 // bind `.checked` / `.selected` plainly (not with live()): lit then leaves a
 // control the user just changed alone until the state it drives agrees.
 export { html, svg, nothing } from 'lit-html';

package/src/locales/cs.json

@@ -1,7 +1,6 @@
 {
   "_name": "Čeština",
   "autocomplete": {
-    "showAllResults": "Zobrazit všechny výsledky",
     "empty": "Pro „{query}“ jsme nic nenašli",
     "types": {
       "product": "Produkty",

package/src/locales/de.json

@@ -1,7 +1,6 @@
 {
   "_name": "Deutsch",
   "autocomplete": {
-    "showAllResults": "Alle Ergebnisse anzeigen",
     "empty": "Keine Treffer für „{query}“",
     "types": {
       "product": "Produkte",

package/src/locales/en.json

@@ -1,7 +1,6 @@
 {
   "_name": "English",
   "autocomplete": {
-    "showAllResults": "See all results",
     "empty": "No results for “{query}”",
     "types": {
       "product": "Products",