@luigisbox/luma 0.4.0 → 0.5.0

package/docs/ACCESSIBILITY.md

@@ -105,7 +105,8 @@ guessed alt text, and forced colours and the OS setting are honoured.
   the fallback products another, named by their heading and the note that
   they are not results; the help box's phone link is a plain link. "Show all
   products" is a real link (`href`: the
-  search page the site's form would submit to) and the open dropdown's one
+  search page the site's form would submit to, or with `search.queryUrl` the
+  query's page, the one Enter loads) and the open dropdown's one
   tab stop: Tab from the input reaches it (the options' selection cleared:
   one thing lit), Shift+Tab goes back, Escape closes and goes back, Tab moves
   on to the page's next control after the input. It is also the arrow keys'
@@ -165,7 +166,10 @@ guessed alt text, and forced colours and the OS setting are honoured.
   opened from the keyboard, focus goes to its selected item
   (`aria-selected`/`aria-current`/`aria-checked`), else the first; arrows move
   through its items; Escape closes it and focus returns to the button; picking
-  an item returns focus to the button; Tab out of it closes it.
+  an item returns focus to the button; Tab out of it closes it. The build
+  includes menus only where a file of the integration's repository (a script or `.html` file, not in `node_modules`, `dist` or a hidden folder) has `data-lbx-menu` (written literally, as in a template). A
+  `<details data-lbx-dropdown>` menu closes on a press outside it and on
+  picking an item; the same holds for it with `data-lbx-dropdown`.
 - **The drawer** (`[data-lbx-drawer="open|close"]`): `aria-expanded` on its
   openers. With a panel marked `[data-lbx-drawer-panel]`, while open, the panel
   is a modal dialog (`role="dialog"`, `aria-modal="true"`, named "Filters",
@@ -176,6 +180,9 @@ guessed alt text, and forced colours and the OS setting are honoured.
   focus staying on the control. With `facetsApply: 'staged'` its
   changes wait for `[data-lbx-drawer="apply"]`; closing it otherwise discards
   them (the scope's `pending` says whether there is anything to apply).
+  The build includes the drawer only where a file of the integration's
+  repository (a script or `.html` file, not in `node_modules`, `dist` or a hidden folder) has `data-lbx-drawer` (written
+  literally, as in a template).
 - **Facet groups** (built-in template): each group's title is a `<button
   aria-expanded aria-controls>` controlling its values (WAI-ARIA APG
   accordion), focus staying on it. A group's search box

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigisbox/luma",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Luma: Luigi's Box frontend integrations (autocomplete, search, category listings, recommenders) on the Luigi's Box AI API. Pre-release.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -29,7 +29,8 @@
     "snippet/early-hold.min.js",
     "docs/ACCESSIBILITY.md",
     "docs/INTEGRATION-PERFORMANCE.md",
-    "docs/PARITY.md"
+    "docs/PARITY.md",
+    "CHANGELOG.md"
   ],
   "publishConfig": {
     "access": "public"

package/src/analytics/chain.ts

@@ -71,7 +71,7 @@ export const reader = <E extends EventName, C>(event: E, f: (ctx: C) => Reads[E]
 /** `.read(r)` on event `name`: `r`, or an error when it is a reader of another event. */
 export const checked = (name: string, r: { event?: string }) => {
   const e = name.startsWith('recommender:') ? 'recommender' : name;
-  if (r.event && r.event !== e) throw new Error(`analytics: collect.${e}.read(): a reader of ${r.event}`);
+  if (r.event && r.event !== e) throw Error(`analytics: collect.${e}.read(): a reader of ${r.event}`);
 };
 
 export interface Chain<E extends EventName, C> {

package/src/analytics/pageview.ts

@@ -42,7 +42,7 @@ export const pageView = {
       },
       read(r) {
         checked('pageView', r);
-        if (chained) throw new Error('analytics: one collect.pageView chain per setup');
+        if (chained) throw Error('analytics: one collect.pageView chain per setup');
         chained = true;
         const ref = (ctx: C) => {
           try {

package/src/analytics/start.ts

@@ -33,10 +33,9 @@ export const start = async (o: StartOptions) => {
   if (started) return;
   started = true;
   state.g = o.config._global;
-  env.owns = o.owns;
-  env.visit = o.visit;
-  env.onUrlChange = o.onUrlChange;
-  env.kept = o.kept;
+  // One call, not a read per field: a setup that uses none of them leaves
+  // Rollup no property reads to keep (it keeps a read: it may be a getter).
+  Object.assign(env, o);
   // The setup (`_global` first). Its chains register as it runs.
   for (const [p, f] of Object.entries(o.files).sort(([a], [b]) => (a.includes('/_global/') ? -1 : b.includes('/_global/') ? 1 : 0)))
     try {

package/src/analytics/wire.ts

@@ -51,7 +51,7 @@ export const readDl = (x: any): DlEntry | null => {
   return null;
 };
 
-const IGNORE = new RegExp(`${TRACKING}|^${P.replace('.', '\\.')}`);
+const IGNORE = RegExp(`${TRACKING}|^${P.replace('.', '\\.')}`);
 /**
  * The page a URL shows, for pageviews: without tracking params, the hash and
  * our own `lbx.*` (a filter, a sort on our listing is the same page). A

package/src/api/ai.ts

@@ -8,6 +8,7 @@
 // Also runs in Node (the edge render service): there the
 // storefront origin is sent explicitly and nothing touches the DOM.
 
+import { PLP, RECOMMENDER, SEARCH } from '../core/features';
 import { health } from '../core/health';
 import type { GlobalConfigType } from '../types';
 import type { Api, FacetData, Hit, Page } from '.';
@@ -15,6 +16,11 @@ import { fetchJson, TIMEOUT_MS, tokensFor, untilAborted, visitorId } from './tok
 
 export { untilAborted };
 
+/** A method of a widget the build has no folder for (never called). */
+const unbuilt = (): never => {
+  throw Error('not in this build');
+};
+
 export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
   const tk = tokensFor(g, origin);
   const { API, originHeaders } = tk;
@@ -48,8 +54,8 @@ export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
         return post(path, params, body, signal, true);
       }
     }
-    if (!r.ok) throw new Error(`${path}: HTTP ${r.status} ${r.body.slice(0, 300)}`);
-    if (r.json == null) throw new Error(`${path}: not JSON`);
+    if (!r.ok) throw Error(`${path}: HTTP ${r.status} ${r.body.slice(0, 300)}`);
+    if (r.json == null) throw Error(`${path}: not JSON`);
     return r.json;
   };
 
@@ -75,24 +81,30 @@ export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
       return { hits: j.hits ?? [], total: j.total ?? j.total_approx ?? 0, guid: j.guid, cursor: j.next_page_cursor ?? null, status: j.pagination_status ?? 'exhausted' };
     },
 
-    facets: async (guid, facets, signal): Promise<Record<string, FacetData>> =>
-      (await post('facets', { channel_id: g.channelId }, { guid, facets: facets.map((f) => compact(f)) }, signal)).facets ?? {},
+    // A listing's and a recommender's (core/features.ts): not in a build without one.
+    facets:
+      SEARCH || PLP
+        ? async (guid, facets, signal): Promise<Record<string, FacetData>> =>
+            (await post('facets', { channel_id: g.channelId }, { guid, facets: facets.map((f) => compact(f)) }, signal)).facets ?? {}
+        : unbuilt,
 
-    recommend: async (r, signal): Promise<Hit[]> =>
-      (
-        await post(
-          'recommender',
-          { channel_id: g.channelId, surface_id: r.surface },
-          compact({
-            type: r.type,
-            size: r.size,
-            anchor_ids: r.anchors.length ? r.anchors.slice(0, 50) : undefined,
-            exclude_ids: r.exclude?.length ? r.exclude.slice(0, 50) : undefined,
-            filters: nonEmpty(r.filters),
-            return_fields: r.fields?.length ? r.fields : undefined,
-          }),
-          signal,
-        )
-      ).hits ?? [],
+    recommend: RECOMMENDER
+      ? async (r, signal): Promise<Hit[]> =>
+          (
+            await post(
+              'recommender',
+              { channel_id: g.channelId, surface_id: r.surface },
+              compact({
+                type: r.type,
+                size: r.size,
+                anchor_ids: r.anchors.length ? r.anchors.slice(0, 50) : undefined,
+                exclude_ids: r.exclude?.length ? r.exclude.slice(0, 50) : undefined,
+                filters: nonEmpty(r.filters),
+                return_fields: r.fields?.length ? r.fields : undefined,
+              }),
+              signal,
+            )
+          ).hits ?? []
+      : unbuilt,
   };
 };

package/src/api/token.ts

@@ -99,7 +99,7 @@ export async function solveHere(nonce: string, difficulty: number, until: number
   let t0 = Date.now();
   for (let n = 0; ; n++) {
     if ((n & 1023) === 0 && Date.now() - t0 > (slice || 50)) {
-      if (Date.now() > until) throw new Error('proof of work: no answer in time');
+      if (Date.now() > until) throw Error('proof of work: no answer in time');
       if (slice) await new Promise((r) => setTimeout(r));
       t0 = Date.now();
     }
@@ -142,8 +142,8 @@ const solve = (nonce: string, difficulty: number): Promise<number> => {
       return here(); // CSP worker-src
     }
     // A worker that never answers is stopped.
-    timer = window.setTimeout(() => (done(), reject(new Error('proof of work: no answer in time'))), POW_TIMEOUT_MS);
-    w.onmessage = (e) => (done(), e.data == null ? reject(new Error('proof of work failed')) : resolve(e.data));
+    timer = window.setTimeout(() => (done(), reject(Error('proof of work: no answer in time'))), POW_TIMEOUT_MS);
+    w.onmessage = (e) => (done(), e.data == null ? reject(Error('proof of work failed')) : resolve(e.data));
     w.onerror = here;
     w.postMessage([nonce, difficulty, until]);
   });
@@ -236,9 +236,9 @@ const tokens = (g: GlobalConfigType, origin?: string): Tokens => {
     const url = challengeUrl(g);
     // The one the entry asked while this chunk loaded (the first try only: a retry needs a new one).
     const ch = await fetchJson(url, { headers: originHeaders }, TIMEOUT_MS, undefined, browser && retries ? takeChallenge(url) : undefined);
-    if (!ch.ok) throw new Error(`browser-challenge: HTTP ${ch.status}`);
+    if (!ch.ok) throw Error(`browser-challenge: HTTP ${ch.status}`);
     const { nonce, difficulty } = ch.json ?? {};
-    if (typeof nonce !== 'string' || !(difficulty >= 0 && difficulty <= MAX_DIFFICULTY)) throw new Error('browser-challenge: unexpected challenge');
+    if (typeof nonce !== 'string' || !(difficulty >= 0 && difficulty <= MAX_DIFFICULTY)) throw Error('browser-challenge: unexpected challenge');
     const solution = await solve(nonce, difficulty);
     const r = await fetchJson(
       `${AUTH}/browser-token`,
@@ -260,10 +260,10 @@ const tokens = (g: GlobalConfigType, origin?: string): Tokens => {
     if (!r.ok) {
       const detail = r.json?.detail;
       if (retries > 0 && detail === 'Nonce expired') return mint(retries - 1);
-      throw new Error(`browser-token: HTTP ${r.status} ${typeof detail === 'string' ? detail : ''}`);
+      throw Error(`browser-token: HTTP ${r.status} ${typeof detail === 'string' ? detail : ''}`);
     }
     const { access_token, expires_in } = r.json ?? {};
-    if (typeof access_token !== 'string' || !(expires_in > 30)) throw new Error('browser-token: unexpected response');
+    if (typeof access_token !== 'string' || !(expires_in > 30)) throw Error('browser-token: unexpected response');
     return { token: access_token, exp: Date.now() + (expires_in - 30) * 1000 };
   };
 

package/src/core/a11y.ts

@@ -90,17 +90,17 @@ export const CONTRAST_CSS =
   `@media (prefers-contrast:more){:root:not([data-lbx-contrast="off"]) ${OURS}{outline:3px solid!important;outline-offset:2px!important}}` +
   `:root[data-lbx-contrast="more"] ${OURS}{outline:3px solid!important;outline-offset:2px!important}\n`;
 
-const KEY = 'lbx:contrast';
+export const CONTRAST_KEY = 'lbx:contrast';
 const stored = () => {
   try {
-    const v = localStorage.getItem(KEY);
+    const v = localStorage.getItem(CONTRAST_KEY);
     return v === 'more' || v === 'off' ? v : null;
   } catch {
     return null;
   }
 };
 const more = () => (typeof matchMedia === 'function' ? matchMedia('(prefers-contrast: more)') : null);
-const prefersMore = () => !!more()?.matches;
+export const prefersMore = () => !!more()?.matches;
 
 /** The mode's state: the visitor's toggle, else their OS setting ('more'), else none. */
 const state = () => stored() ?? (prefersMore() ? 'more' : null);
@@ -112,7 +112,7 @@ export const contrastOn = () => state() === 'more';
  * is on (the toggle, or the OS setting: one selector for both), `"off"` when
  * the visitor switched it off against their OS setting.
  */
-const apply = () => {
+export const applyContrast = () => {
   const v = state();
   const html = document.documentElement;
   if (!v) html.removeAttribute('data-lbx-contrast');
@@ -125,36 +125,7 @@ export const useContrast = () => {
   setCss('lbx:contrast', layered(CONTRAST_CSS));
   if (!watching) {
     watching = true;
-    more()?.addEventListener?.('change', apply);
+    more()?.addEventListener?.('change', applyContrast);
   }
-  apply();
-};
-
-/** Switch it (our toggle): remembered for this browser; back to "as the OS says" when that matches. */
-export const setContrast = (on: boolean) => {
-  const v = on === prefersMore() ? null : on ? 'more' : 'off';
-  try {
-    if (v) localStorage.setItem(KEY, v);
-    else localStorage.removeItem(KEY);
-  } catch {}
-  apply();
-};
-
-/**
- * Modelled on the previous-generation Luma's switch (`_global.contrastToggle`): a button that turns the
- * mode on and off. Visually hidden until focused unless the visitor's OS asks
- * for a contrast preference or the mode is on (as that one was), so a
- * keyboard user who reaches it always sees it.
- */
-export const contrastToggle = (label: string) => {
-  const b = document.createElement('button');
-  b.type = 'button';
-  b.className = 'lbx-contrast-toggle';
-  b.textContent = label;
-  b.setAttribute('aria-pressed', String(contrastOn()));
-  b.addEventListener('click', (e) => {
-    e.stopPropagation();
-    setContrast(!contrastOn());
-  });
-  return b;
+  applyContrast();
 };

package/src/core/context.ts

@@ -6,6 +6,7 @@
 import type { Templates } from './templates';
 import type { LumaConfigType } from '../types';
 import type { WidgetContext } from '../main';
+import { QUERY_URL } from './features';
 import { nameOf, slot } from './integration';
 
 type Support = typeof import('./support');
@@ -104,5 +105,6 @@ export const widgetContext = (
     result: s.resultFactory({ ...g.computedAttributes, ...w.app.computedAttributes }),
     // Images: a listing's first row is eager; elsewhere (recommenders, the autocomplete) every image is lazy.
     helpers: { t, price, plain: s.plain, first: s.first, ...s.imageHelpers(g.images, w.id !== 'search' && w.id !== 'plp') },
+    queryUrl: QUERY_URL ? config.search?.queryUrl : undefined,
   };
 };

package/src/core/contrast-toggle.ts

@@ -0,0 +1,32 @@
+// The listing's high-contrast toggle (`contrastToggle` of a listing config):
+// apart from ./a11y.ts (every widget's), so only the listing's chunk has it.
+import { applyContrast, CONTRAST_KEY, contrastOn, prefersMore } from './a11y';
+
+/** Switch it (our toggle): remembered for this browser; back to "as the OS says" when that matches. */
+export const setContrast = (on: boolean) => {
+  const v = on === prefersMore() ? null : on ? 'more' : 'off';
+  try {
+    if (v) localStorage.setItem(CONTRAST_KEY, v);
+    else localStorage.removeItem(CONTRAST_KEY);
+  } catch {}
+  applyContrast();
+};
+
+/**
+ * Modelled on the previous-generation Luma's switch (`_global.contrastToggle`): a button that turns the
+ * mode on and off. Visually hidden until focused unless the visitor's OS asks
+ * for a contrast preference or the mode is on (as that one was), so a
+ * keyboard user who reaches it always sees it.
+ */
+export const contrastToggle = (label: string) => {
+  const b = document.createElement('button');
+  b.type = 'button';
+  b.className = 'lbx-contrast-toggle';
+  b.textContent = label;
+  b.setAttribute('aria-pressed', String(contrastOn()));
+  b.addEventListener('click', (e) => {
+    e.stopPropagation();
+    setContrast(!contrastOn());
+  });
+  return b;
+};

package/src/core/default-button.ts

@@ -0,0 +1,66 @@
+// A form's default button, what an implicit submission (Enter in a field)
+// submits with. In lbx-core: the autocomplete's "show all" link (its href is
+// the URL Enter would load) and the search form's URL (widgets/search/form-url.ts,
+// lbx-nav) read the same button, so the link, the result fetched while typing
+// and the page fetched ahead agree.
+
+export type Submitter = HTMLButtonElement | HTMLInputElement;
+
+/** FormData(form, submitter) is newer (Chrome 112, Safari 16.4, Firefox 111): before, the second argument is ignored (it does not throw). */
+let withSubmitter: boolean | undefined;
+export const submitterSupported = () => {
+  if (withSubmitter === undefined) {
+    try {
+      const f = document.createElement('form');
+      const b = f.appendChild(document.createElement('button'));
+      b.name = 'x';
+      b.value = '1';
+      withSubmitter = new FormData(f, b).get('x') === '1';
+    } catch {
+      withSubmitter = false;
+    }
+  }
+  return withSubmitter;
+};
+
+/**
+ * The form's data as a submit by `btn` sends it (null: by no button). Where
+ * the engine ignores the submitter argument, its own entry is added by hand:
+ * name=value, or an image button's x and y (`name.x`, `name.y`; `x`, `y`
+ * without a name), 0 as a submit without a pointer.
+ */
+export const formDataOf = (form: HTMLFormElement, btn: Submitter | null): FormData => {
+  const native = submitterSupported();
+  let own = !native; // the submitter's entry is ours to add
+  let data: FormData;
+  try {
+    data = new FormData(form, native && btn ? btn : undefined);
+  } catch {
+    data = new FormData(form); // not a submit button of this form
+    own = true;
+  }
+  if (own && btn) {
+    if (btn.type === 'image') {
+      data.append(btn.name ? `${btn.name}.x` : 'x', '0');
+      data.append(btn.name ? `${btn.name}.y` : 'y', '0');
+    } else if (btn.name) data.append(btn.name, btn.value);
+  }
+  return data;
+};
+
+/**
+ * The form's default button: the first submit button it owns in tree order
+ * (inside it, or anywhere in its tree through `form=`), what an implicit
+ * submission (Enter in a field) submits with, so its `formaction`,
+ * `formmethod`, `formtarget`, `formnovalidate` and name=value count as on a
+ * click. null without one.
+ */
+export const defaultSubmitter = (form: HTMLFormElement): Submitter | null => {
+  // A button outside the form owns it through form="<id>": the whole tree only when the form has an id.
+  for (const el of (form.id ? (form.getRootNode() as ParentNode) : form).querySelectorAll<Submitter>('button, input')) {
+    if (el.form !== form) continue;
+    const type = (el.getAttribute('type') ?? '').trim().toLowerCase();
+    if (el instanceof HTMLButtonElement ? type === '' || type === 'submit' : type === 'submit' || type === 'image') return el;
+  }
+  return null;
+};

package/src/core/early-rules.ts

@@ -16,6 +16,7 @@
 import { holdCss } from './hold';
 import { P, TRACKING } from './routes';
 import type { PlpConfigType, SearchConfigType } from '../types';
+import { NAMED_EARLY_HOLD } from './features';
 
 const EARLY_KEY = 'lbx:early';
 // Short: when the bundle stops running (switched off, blocked), holds end soon after.
@@ -36,7 +37,7 @@ const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 // reserveSelector: set by loadConfig (default: the first anchor).
 
 /** Capture groups in a regex source (its alternation with the empty string always matches). */
-const groups = (re: string) => new RegExp(`${re}|`).exec('')!.length - 1;
+const groups = (re: string) => RegExp(`${re}|`).exec('')!.length - 1;
 
 /**
  * Only what the snippet can express (no custom readQuery/active): a path
@@ -61,7 +62,7 @@ export const searchRule = (c: SearchConfigType, hostCss: string): EarlyRoute | n
  * the unclaimed hold at boot; `earlyHold: false` opts out where it is not.
  */
 export const plpRule = (c: PlpConfigType, hostCss: string): EarlyRoute | null => {
-  if (c.earlyHold === false) return null;
+  if ((NAMED_EARLY_HOLD ? c.earlyHold === false : false)) return null;
   const pm = c.params ?? {};
   // Their page param too: their page 1 is ours. A later page of theirs is
   // theirs (plpAccepts), a value the snippet does not check: held until the

package/src/core/features.ts

@@ -0,0 +1,109 @@
+// The widgets an integration has (build/vite.mjs `features`): a widget is its
+// folder (integration/autocomplete/, search/, plp/, recommender <name>/; an
+// _analytics.ts or _widget.ts in any folder); a feature only the
+// integration's own files can ask for (a template's attribute, a hook its
+// _init.ts sets) by that text in them. The build defines these from the folders, so
+// the entry leaves out what a missing widget's triggers need. The dev server
+// (folders come and go), the render service and unit tests: all true.
+// As in core/frameworks.ts: a flag in `if (FLAG)` or `FLAG ? x : y` only.
+
+declare const __LBX_AUTOCOMPLETE__: boolean | undefined;
+declare const __LBX_SEARCH__: boolean | undefined;
+declare const __LBX_PLP__: boolean | undefined;
+declare const __LBX_RECOMMENDER__: boolean | undefined;
+declare const __LBX_ANALYTICS__: boolean | undefined;
+declare const __LBX_SSR__: boolean | undefined;
+declare const __LBX_WIDGET_INITS__: boolean | undefined;
+declare const __LBX_CART__: boolean | undefined;
+declare const __LBX_DRAWER__: boolean | undefined;
+declare const __LBX_MENU__: boolean | undefined;
+declare const __LBX_DROPDOWN__: boolean | undefined;
+declare const __LBX_AC_HOOKS__: boolean | undefined;
+declare const __LBX_ON_RENDER__: boolean | undefined;
+declare const __LBX_READ_QUERY__: boolean | undefined;
+declare const __LBX_FACETS_FOR__: boolean | undefined;
+declare const __LBX_QUERY_URL__: boolean | undefined;
+declare const __LBX_HOST_STYLES__: boolean | undefined;
+declare const __LBX_TRANSLATIONS__: boolean | undefined;
+declare const __LBX_INITS__: boolean | undefined;
+declare const __LBX_EMPTY_VALUES__: boolean | undefined;
+declare const __LBX_PRERENDER_TYPING__: boolean | undefined;
+declare const __LBX_CONTENT_VISIBILITY__: boolean | undefined;
+declare const __LBX_NAMED_PRECONNECT_IMAGES__: boolean | undefined;
+declare const __LBX_NAMED_PREFETCH_FILTERS__: boolean | undefined;
+declare const __LBX_NAMED_PRELOAD__: boolean | undefined;
+declare const __LBX_NAMED_FADE__: boolean | undefined;
+declare const __LBX_NAMED_RESTORE_ON_BACK__: boolean | undefined;
+declare const __LBX_NAMED_PREFETCH_NEXT_PAGE__: boolean | undefined;
+declare const __LBX_NAMED_IN_PLACE_QUERY__: boolean | undefined;
+declare const __LBX_NAMED_PREFETCH_WHILE_TYPING__: boolean | undefined;
+declare const __LBX_NAMED_EARLY_HOLD__: boolean | undefined;
+declare const __LBX_NAMED_SPECULATION__: boolean | undefined;
+
+/** integration/autocomplete/. */
+export const AUTOCOMPLETE = typeof __LBX_AUTOCOMPLETE__ === 'boolean' ? __LBX_AUTOCOMPLETE__ : true;
+/** integration/search/. */
+export const SEARCH = typeof __LBX_SEARCH__ === 'boolean' ? __LBX_SEARCH__ : true;
+/** integration/plp/. */
+export const PLP = typeof __LBX_PLP__ === 'boolean' ? __LBX_PLP__ : true;
+/** An integration/recommender <name>/. */
+export const RECOMMENDER = typeof __LBX_RECOMMENDER__ === 'boolean' ? __LBX_RECOMMENDER__ : true;
+/** An _analytics.ts in any folder (without one, analytics is off: main.ts). */
+export const ANALYTICS = typeof __LBX_ANALYTICS__ === 'boolean' ? __LBX_ANALYTICS__ : true;
+/** A _widget.ts in any folder (without one, core/widget-inits.ts has nothing to run). */
+export const WIDGET_INITS = typeof __LBX_WIDGET_INITS__ === 'boolean' ? __LBX_WIDGET_INITS__ : true;
+/** `data-lbx-cart` in any file of the integration (its templates): a tile's add-to-cart (core/tiles.ts). */
+export const CART = typeof __LBX_CART__ === 'boolean' ? __LBX_CART__ : true;
+/** `data-lbx-drawer` in any file of the integration: the listing's filter drawer (widgets/listing/element.ts). */
+export const DRAWER = typeof __LBX_DRAWER__ === 'boolean' ? __LBX_DRAWER__ : true;
+/** `data-lbx-menu` in any file of the integration: menus in the listing's markup (widgets/listing/element.ts). */
+export const MENU = typeof __LBX_MENU__ === 'boolean' ? __LBX_MENU__ : true;
+/** `data-lbx-dropdown` in any file of the integration: `<details>` menus in the listing's markup, closed from outside. */
+export const DROPDOWN = typeof __LBX_DROPDOWN__ === 'boolean' ? __LBX_DROPDOWN__ : true;
+/** The autocomplete's `onOpen`, `onClose`, `onSelect`, `onReady` named in the integration's code. */
+export const AC_HOOKS = typeof __LBX_AC_HOOKS__ === 'boolean' ? __LBX_AC_HOOKS__ : true;
+/** A listing's `onRender` named in the integration's code. */
+export const ON_RENDER = typeof __LBX_ON_RENDER__ === 'boolean' ? __LBX_ON_RENDER__ : true;
+/** The search page's `readQuery` named in the integration's code. */
+export const READ_QUERY = typeof __LBX_READ_QUERY__ === 'boolean' ? __LBX_READ_QUERY__ : true;
+/** A category page's `facetsFor` named in the integration's code. */
+export const FACETS_FOR = typeof __LBX_FACETS_FOR__ === 'boolean' ? __LBX_FACETS_FOR__ : true;
+/** The search page's `queryUrl` named in the integration's code: Enter straight to the query's page (widgets/search/direct.ts), the hook's page as every search's. */
+export const QUERY_URL = typeof __LBX_QUERY_URL__ === 'boolean' ? __LBX_QUERY_URL__ : true;
+/** A style-host.css in any folder (core/integration.ts hostStyle: the host's own to hide or hold). */
+export const HOST_STYLES = typeof __LBX_HOST_STYLES__ === 'boolean' ? __LBX_HOST_STYLES__ : true;
+/** A _translations.ts in any folder (core/integration.ts: over Luma's dictionary). */
+export const TRANSLATIONS = typeof __LBX_TRANSLATIONS__ === 'boolean' ? __LBX_TRANSLATIONS__ : true;
+/** An _init.ts in any folder (core/integration.ts loadConfig). */
+export const INITS = typeof __LBX_INITS__ === 'boolean' ? __LBX_INITS__ : true;
+/**
+ * Options off by default, named in the integration's code (its _config.ts,
+ * or code setting them): a key no file names keeps its default, as only
+ * code naming it can change it. `emptyValues`, `prerenderWhileTyping` (or
+ * `pageWhileTyping`: prerendering the search page typed for), `contentVisibility`.
+ */
+export const EMPTY_VALUES = typeof __LBX_EMPTY_VALUES__ === 'boolean' ? __LBX_EMPTY_VALUES__ : true;
+export const PRERENDER_TYPING = typeof __LBX_PRERENDER_TYPING__ === 'boolean' ? __LBX_PRERENDER_TYPING__ : true;
+export const CONTENT_VISIBILITY = typeof __LBX_CONTENT_VISIBILITY__ === 'boolean' ? __LBX_CONTENT_VISIBILITY__ : true;
+/**
+ * Server-rendered listings (Luigi's Box's server-side includes): adopting
+ * and hydrating the server's markup. Declared, not found in the folders:
+ * `clientConfig(url, { serverRendering: false })` for a site without them.
+ */
+export const SSR = typeof __LBX_SSR__ === 'boolean' ? __LBX_SSR__ : true;
+
+/**
+ * Options on by default, named in the integration's code: where none names
+ * one it is on (only code naming a key sets it), and a read of it is
+ * `NAMED_X ? cfg.x !== false : true` (build/vite.mjs ON_BY_DEFAULT).
+ */
+export const NAMED_PRECONNECT_IMAGES = typeof __LBX_NAMED_PRECONNECT_IMAGES__ === 'boolean' ? __LBX_NAMED_PRECONNECT_IMAGES__ : true;
+export const NAMED_PREFETCH_FILTERS = typeof __LBX_NAMED_PREFETCH_FILTERS__ === 'boolean' ? __LBX_NAMED_PREFETCH_FILTERS__ : true;
+export const NAMED_PRELOAD = typeof __LBX_NAMED_PRELOAD__ === 'boolean' ? __LBX_NAMED_PRELOAD__ : true;
+export const NAMED_FADE = typeof __LBX_NAMED_FADE__ === 'boolean' ? __LBX_NAMED_FADE__ : true;
+export const NAMED_RESTORE_ON_BACK = typeof __LBX_NAMED_RESTORE_ON_BACK__ === 'boolean' ? __LBX_NAMED_RESTORE_ON_BACK__ : true;
+export const NAMED_PREFETCH_NEXT_PAGE = typeof __LBX_NAMED_PREFETCH_NEXT_PAGE__ === 'boolean' ? __LBX_NAMED_PREFETCH_NEXT_PAGE__ : true;
+export const NAMED_IN_PLACE_QUERY = typeof __LBX_NAMED_IN_PLACE_QUERY__ === 'boolean' ? __LBX_NAMED_IN_PLACE_QUERY__ : true;
+export const NAMED_PREFETCH_WHILE_TYPING = typeof __LBX_NAMED_PREFETCH_WHILE_TYPING__ === 'boolean' ? __LBX_NAMED_PREFETCH_WHILE_TYPING__ : true;
+export const NAMED_EARLY_HOLD = typeof __LBX_NAMED_EARLY_HOLD__ === 'boolean' ? __LBX_NAMED_EARLY_HOLD__ : true;
+export const NAMED_SPECULATION = typeof __LBX_NAMED_SPECULATION__ === 'boolean' ? __LBX_NAMED_SPECULATION__ : true;

package/src/core/frameworks-check.ts

@@ -0,0 +1,32 @@
+// Development only (src/main.ts, import.meta.env.DEV): a framework on the
+// page whose support the build left out (clientConfig `framework`,
+// core/frameworks.ts) is said in window.__lbx.health.errors. Without its
+// support Luma does not wait for its hydration or talk to its router: a
+// re-rendered page, ours dropped, a router putting its URL back.
+import { SSR } from './features';
+import { ANGULAR, ASTRO, DOCUMENT_REACT, NEXT, REACT, SVELTEKIT, TURBO, VUE } from './frameworks';
+import { reportError } from './health';
+import { reactDocumentSigns } from './own';
+
+const keyed = (prefixes: string[]) => [...document.querySelectorAll('*')].some((el) => Object.keys(el).some((k) => prefixes.some((p) => k.startsWith(p))));
+
+/** Per part of the support (build/vite.mjs SUPPORTS): left out of this build, and the page shows its framework. */
+const CHECKS: [boolean, string, () => boolean][] = [
+  [DOCUMENT_REACT, 'React hydrating the whole document (next, remix or react-router)', reactDocumentSigns],
+  [REACT, 'React (react)', () => !!document.querySelector('#__next, #___gatsby, [data-reactroot]') || keyed(['__reactContainer$', '__reactFiber$'])],
+  [NEXT, 'the Next.js pages router (next)', () => !!(window as any).__NEXT_DATA__ && !(window as any).next?.appDir],
+  [VUE, 'Vue (vue or nuxt)', () => !!((window as any).__NUXT__ || (window as any).$nuxt || document.querySelector('[data-v-app], #__nuxt, [data-server-rendered]')) || keyed(['__vue_app__', '__vue__'])],
+  [ANGULAR, 'Angular (angular)', () => !!document.querySelector('[ng-version], [ng-server-context]')],
+  [SVELTEKIT, 'SvelteKit (sveltekit)', () => [...document.scripts].some((s) => s.text.includes('__sveltekit_')) || !!document.querySelector('link[href*="/immutable/entry/start."]')],
+  [ASTRO, 'Astro (astro)', () => !!document.querySelector('astro-island, meta[name="astro-view-transitions-enabled"]')],
+  [TURBO, 'Turbo (turbo)', () => !!((window as any).Turbo || (window as any).Turbolinks)],
+  [SSR, 'server-rendered listings (serverRendering)', () => !!document.querySelector('[data-lbx-ssr]')],
+];
+
+/** The frameworks on the page this build has no support for (reported once). */
+export const checkFrameworks = () => {
+  const missing = CHECKS.filter(([has, , seen]) => !has && seen()).map(([, name]) => name);
+  if (missing.length)
+    reportError('boot', `this page uses ${missing.join(', ')}, which the build leaves out (clientConfig \`framework\`, \`serverRendering\`). Declare every framework the site uses, or leave them out.`);
+  return missing;
+};

package/src/core/frameworks.ts

@@ -0,0 +1,35 @@
+// What of each framework's support a build has (build/vite.mjs SUPPORTS):
+// all of it unless the integration declares its framework(s). Constants the
+// build replaces, so code behind a false one is left out of every chunk.
+// Not built by clientConfig (the render service, unit tests): all true.
+//
+// Use them in `if (FLAG)` or `FLAG ? x : y`, not as a value (`FLAG && x`):
+// Rollup keeps such a reference, and a chunk other than the entry then imports
+// the flag from it and keeps the code (test/browser/specs/budgets.spec.ts,
+// .claude/skills/tree-shaking/SKILL.md).
+
+declare const __LBX_REACT__: boolean | undefined;
+declare const __LBX_DOCUMENT_REACT__: boolean | undefined;
+declare const __LBX_NEXT__: boolean | undefined;
+declare const __LBX_VUE__: boolean | undefined;
+declare const __LBX_ANGULAR__: boolean | undefined;
+declare const __LBX_SVELTEKIT__: boolean | undefined;
+declare const __LBX_ASTRO__: boolean | undefined;
+declare const __LBX_TURBO__: boolean | undefined;
+
+/** React roots and islands: createRoot / hydrateRoot, Suspense boundaries, Gatsby. */
+export const REACT = typeof __LBX_REACT__ === 'boolean' ? __LBX_REACT__ : true;
+/** React hydrating the whole document (Next.js, Remix, React Router 7 / Hydrogen): the entry's checks (core/own.ts, core/styles.ts). */
+export const DOCUMENT_REACT = typeof __LBX_DOCUMENT_REACT__ === 'boolean' ? __LBX_DOCUMENT_REACT__ : true;
+/** Next.js pages router: its router (core/url.ts), its hydration measure (core/reconciler.ts). */
+export const NEXT = typeof __LBX_NEXT__ === 'boolean' ? __LBX_NEXT__ : true;
+/** Vue 2 / 3 and Nuxt: their mount (core/reconciler.ts), their router (core/url.ts). */
+export const VUE = typeof __LBX_VUE__ === 'boolean' ? __LBX_VUE__ : true;
+/** Angular's hydration (core/reconciler.ts). */
+export const ANGULAR = typeof __LBX_ANGULAR__ === 'boolean' ? __LBX_ANGULAR__ : true;
+/** SvelteKit: its root (core/reconciler.ts), its history entries (core/url.ts). */
+export const SVELTEKIT = typeof __LBX_SVELTEKIT__ === 'boolean' ? __LBX_SVELTEKIT__ : true;
+/** Astro: islands (core/reconciler.ts), ClientRouter history entries (core/url.ts). */
+export const ASTRO = typeof __LBX_ASTRO__ === 'boolean' ? __LBX_ASTRO__ : true;
+/** Turbo Drive / Turbolinks: snapshots (core/reconciler.ts), history and prefetch (core/turbo.ts). */
+export const TURBO = typeof __LBX_TURBO__ === 'boolean' ? __LBX_TURBO__ : true;