@luigisbox/luma 0.4.0 → 0.6.0

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;

package/src/core/image-load.ts

@@ -50,32 +50,6 @@ export const settleImages = (root: Element, fade = true) => {
   if (fade && !root.hasAttribute('data-lbx-fade')) root.setAttribute('data-lbx-fade', '');
 };
 
-const preloaded = new Set<string>();
-/** <link rel=preload as=image> for these images (their srcset and sizes, so the candidate the <img> picks is the one fetched), at high priority. */
-export const preloadImages = (list: ImageInfo[]) => {
-  try {
-    for (const im of list) {
-      const key = im.srcset || im.src;
-      if (!im.src || preloaded.has(key)) continue;
-      preloaded.add(key);
-      const l = document.createElement('link');
-      l.rel = 'preload';
-      l.setAttribute('as', 'image');
-      l.href = im.src;
-      if (im.srcset) {
-        l.setAttribute('imagesrcset', im.srcset);
-        if (im.sizes) l.setAttribute('imagesizes', im.sizes);
-      }
-      l.setAttribute('fetchpriority', 'high');
-      l.setAttribute('data-lbx', 'preload');
-      document.head.append(l);
-    }
-    // Bounded: the oldest of ours go (a long session of filters and queries).
-    const ours = document.head.querySelectorAll('link[data-lbx="preload"]');
-    for (let k = 0; k < ours.length - 24; k++) ours[k].remove();
-  } catch {}
-};
-
 const warmed = new Set<string>();
 /**
  * The first `cap` images of results fetched ahead, at low priority (the

package/src/core/image-preload.ts

@@ -0,0 +1,29 @@
+// The listing's preload of its first row's images: apart from ./image-load.ts
+// (every widget's), so only the listing's chunk has it.
+import type { ImageInfo } from './images';
+
+const preloaded = new Set<string>();
+/** <link rel=preload as=image> for these images (their srcset and sizes, so the candidate the <img> picks is the one fetched), at high priority. */
+export const preloadImages = (list: ImageInfo[]) => {
+  try {
+    for (const im of list) {
+      const key = im.srcset || im.src;
+      if (!im.src || preloaded.has(key)) continue;
+      preloaded.add(key);
+      const l = document.createElement('link');
+      l.rel = 'preload';
+      l.setAttribute('as', 'image');
+      l.href = im.src;
+      if (im.srcset) {
+        l.setAttribute('imagesrcset', im.srcset);
+        if (im.sizes) l.setAttribute('imagesizes', im.sizes);
+      }
+      l.setAttribute('fetchpriority', 'high');
+      l.setAttribute('data-lbx', 'preload');
+      document.head.append(l);
+    }
+    // Bounded: the oldest of ours go (a long session of filters and queries).
+    const ours = document.head.querySelectorAll('link[data-lbx="preload"]');
+    for (let k = 0; k < ours.length - 24; k++) ours[k].remove();
+  } catch {}
+};

package/src/core/image-tags.ts

@@ -10,9 +10,15 @@ import type { ImagesConfig, Result } from '../types';
  * A complete `<img>` (data-lbx-img: load marks, the fade-in). The placeholder
  * goes on its box: put `data-lbx-ph` and `style=${image(r, i).ph}` on the
  * element around it (the `img` helper does).
+ *
+ * `src` last: lit sets the attributes in this order, and WebKit starts an
+ * image's fetch the moment `src` is set, with the attributes it has then.
+ * With `loading` after it, every lazy image of a listing was fetched at once
+ * in Safari (and the listing's rehearsal fetched its `about:blank`, a console
+ * error); with `srcset` after it, the `src` was fetched besides the candidate.
  */
 export const imgOf = (im: ImageInfo, o: ImageOptions = {}) =>
-  html`<img data-lbx-img src=${im.src} srcset=${im.srcset || nothing} sizes=${im.sizes || nothing} width=${im.width} height=${im.height} alt=${o.alt ?? ''} class=${o.class ?? nothing} title=${o.title ?? nothing} loading=${im.loading} fetchpriority=${im.fetchpriority ?? nothing} decoding="async" />`;
+  html`<img data-lbx-img loading=${im.loading} fetchpriority=${im.fetchpriority ?? nothing} decoding="async" width=${im.width} height=${im.height} alt=${o.alt ?? ''} class=${o.class ?? nothing} title=${o.title ?? nothing} sizes=${im.sizes || nothing} srcset=${im.srcset || nothing} src=${im.src} />`;
 
 /** The template helpers: `image(r, i, opts)` (the attributes) and `img(r, i, opts)` (an `<img>` in its placeholder box). */
 export const imageHelpers = (cfg: ImagesConfig = {}, lazy = false) => ({

package/src/core/images.ts

@@ -15,6 +15,7 @@
 
 import type { ImagesConfig, Result } from '../types';
 import { first, safeUrl } from './result';
+import { NAMED_PRELOAD } from './features';
 
 /** What a template binds on an `<img>` (or its `<source>`), and on the image's box (`ph`). */
 export interface ImageInfo {
@@ -51,7 +52,7 @@ const res = new Map<string, RegExp | null>();
 const regex = (s: string) => {
   if (!res.has(s))
     try {
-      res.set(s, new RegExp(s));
+      res.set(s, RegExp(s));
     } catch {
       res.set(s, null);
     }
@@ -158,7 +159,7 @@ export const firstRowImages = (cfg: ImagesConfig = {}, results: Result[], all =
 const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
 /** `<link rel=preload as=image>` markup for a server-rendered listing: every image of the widest first row, each for the widths it is in the first row at. */
 export const preloadMarkup = (cfg: ImagesConfig = {}, results: Result[]) => {
-  if (cfg.preload === false) return '';
+  if ((NAMED_PRELOAD ? cfg.preload === false : false)) return '';
   return firstRowImages(cfg, results, true)
     .map((im) => {
       const media = firstRowMedia(cfg, im.i);

package/src/core/integration.ts

@@ -5,6 +5,7 @@
 // templates, translations and helpers the bundle would.
 
 import type { LumaApi, LumaConfigType, LumaInitType } from '../types';
+import { AUTOCOMPLETE, HOST_STYLES, INITS, PLP, RECOMMENDER, SEARCH, TRANSLATIONS } from './features';
 
 export type Lazy<T> = Record<string, () => Promise<T>>;
 
@@ -52,26 +53,36 @@ export interface IntegrationFiles {
 
 /** A folder's style-host.css; a category page without its own uses the search page's. */
 export const hostStyle = (files: Pick<IntegrationFiles, 'hostStyles'>, folder: string): string => {
+  // None in the integration (core/features.ts): nothing of the host's to hide or hold.
+  if (!HOST_STYLES) return '';
   const css = Object.entries(files.hostStyles).find(([p]) => folderOf(p) === folder)?.[1] ?? '';
-  return css || (folder === 'plp' ? hostStyle(files, 'search') : '');
+  return css || (PLP ? (folder === 'plp' ? hostStyle(files, 'search') : '') : '');
 };
 
-/** `_config.ts` is JSON by contract (checked at boot; code belongs in `_init.ts`). */
+/**
+ * `_config.ts` is JSON by contract (code belongs in `_init.ts`): a function
+ * in it is dropped. Said in development (the dev server, unit tests), where
+ * configs are written; a build (the bundle, the render service's) leaves the
+ * check out: ~0.1 kB gzip of every page.
+ */
 const parseConfigJson = (value: any, file: string) => {
-  const check = (v: any, key: string): void => {
-    if (typeof v === 'function') console.error(`[lbx] ${file}: "${key}" is a function; _config.ts is parsed as JSON, set functions in _init.ts`);
-    else if (v && typeof v === 'object') for (const [k, x] of Object.entries(v)) check(x, k);
-  };
-  check(value, '');
+  if (import.meta.env.DEV) {
+    const check = (v: any, key: string): void => {
+      if (typeof v === 'function') console.error(`[lbx] ${file}: "${key}" is a function; _config.ts is parsed as JSON, set functions in _init.ts`);
+      else if (v && typeof v === 'object') for (const [k, x] of Object.entries(v)) check(x, k);
+    };
+    check(value, '');
+  }
   return JSON.parse(JSON.stringify(value ?? {}));
 };
 
 /** Folder -> slot in the config: `recommender home` -> recommenders.home. */
 export const slot = (config: any, folder: string) => {
   const [type, ...rest] = folder.split(' ');
-  if (type !== 'recommender') return (config[type] ??= {});
+  if (!RECOMMENDER || type !== 'recommender') return (config[type] ??= {});
   const name = rest.join(' ');
-  if (!name) throw new Error(`[lbx] "${folder}": a recommender folder needs a name, e.g. "recommender home"`);
+  // A build fails on such a folder (build/vite.mjs featureDefines): said here in development only.
+  if (import.meta.env.DEV && !name) throw Error(`[lbx] "${folder}": a recommender folder needs a name, e.g. "recommender home"`);
   return ((config.recommenders ??= {})[name] ??= {});
 };
 
@@ -83,32 +94,37 @@ export const loadConfig = async (files: Pick<IntegrationFiles, 'configs' | 'init
   const config = { _global: {} } as LumaConfigType;
   let globalInit: LumaInitType | undefined;
   for (const [p, v] of Object.entries(files.configs)) Object.assign(slot(config, folderOf(p)), parseConfigJson(v, p));
-  for (const [p, v] of Object.entries(files.translations)) if (typeof v !== 'function') slot(config, folderOf(p)).translations = parseConfigJson(v, p);
-  for (const [p, v] of Object.entries(files.inits)) {
-    if (folderOf(p) === '_global') globalInit = v;
-    else slot(config, folderOf(p)).initialize = v;
-  }
+  if (TRANSLATIONS) for (const [p, v] of Object.entries(files.translations)) if (typeof v !== 'function') slot(config, folderOf(p)).translations = parseConfigJson(v, p);
+  // No _init.ts in the integration (core/features.ts INITS): no function sets initialize either.
+  if (INITS)
+    for (const [p, v] of Object.entries(files.inits)) {
+      if (folderOf(p) === '_global') globalInit = v;
+      else slot(config, folderOf(p)).initialize = v;
+    }
   const Luma: LumaApi = { version, config };
   if (globalInit && (await globalInit(config, Luma)) === false) return null;
   if (config._global.disabled || !config._global.publishableKey || !config._global.channelId) return null;
-  const apps = [config.autocomplete, config.search, config.plp, ...Object.values(config.recommenders ?? {})];
-  for (const app of apps) if (app && !app.disabled && app.initialize && (await (app.initialize as any)(app, Luma)) === false) app.disabled = true;
+  const apps = [AUTOCOMPLETE ? config.autocomplete : null, SEARCH ? config.search : null, PLP ? config.plp : null, ...(RECOMMENDER ? Object.values(config.recommenders ?? {}) : [])];
+  if (INITS) for (const app of apps) if (app && !app.disabled && app.initialize && (await (app.initialize as any)(app, Luma)) === false) app.disabled = true;
   // Anything a category page does not set is the search page's.
-  const { search, plp } = config;
-  if (plp) for (const k of LISTING) if (plp[k] == null && search?.[k] != null) (plp as any)[k] = search[k];
-  for (const l of [search, plp]) if (l && l.reserveSelector == null && l.anchor) l.reserveSelector = [l.anchor].flat()[0];
+  const plp = PLP ? config.plp : null;
+  if (plp) for (const k of LISTING) if (plp[k] == null && config.search?.[k] != null) (plp as any)[k] = config.search[k];
+  if (SEARCH || PLP) for (const l of [config.search, config.plp]) if (l && l.reserveSelector == null && l.anchor) l.reserveSelector = [l.anchor].flat()[0];
   return config;
 };
 
 /** A widget's lazy `_translations.ts` (see IntegrationFiles), into their folders' slots before its context is built. */
 export const loadTranslations = (config: LumaConfigType, files: Pick<IntegrationFiles, 'translations'>, folders: readonly string[]) =>
-  Promise.all(
-    Object.entries(files.translations)
-      .filter(([p, v]) => typeof v === 'function' && folders.includes(folderOf(p)))
-      .map(async ([p, f]) => {
-        slot(config, folderOf(p)).translations = parseConfigJson(await f(), p);
-      }),
-  );
+  // None in the integration (core/features.ts): Luma's dictionary alone.
+  TRANSLATIONS
+    ? Promise.all(
+        Object.entries(files.translations)
+          .filter(([p, v]) => typeof v === 'function' && folders.includes(folderOf(p)))
+          .map(async ([p, f]) => {
+            slot(config, folderOf(p)).translations = parseConfigJson(await f(), p);
+          }),
+      )
+    : Promise.resolve([]);
 
 /** A widget's files from a glob, in folder order; from _global/, files named after another widget stay out. */
 export const widgetFiles = <X>(kind: string, folders: string[], glob: Lazy<X>) => {