@luigisbox/luma 0.4.0 → 0.6.0

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",
@@ -54,6 +53,7 @@
     "label": "Výsledky vyhledávání",
     "shown": "Zobrazeno {shown} z {total}",
     "drawer": "Filtry",
+    "applied": "Filtry použity · {results}",
     "removeFilter": "Odebrat filtr: {label}",
     "chosen": "Vybrané filtry",
     "clearAll": "Zrušit vše",

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",
@@ -52,6 +51,7 @@
     "label": "Suchergebnisse",
     "shown": "{shown} von {total} angezeigt",
     "drawer": "Filter",
+    "applied": "Filter angewendet · {results}",
     "removeFilter": "Filter entfernen: {label}",
     "chosen": "Ausgewählte Filter",
     "clearAll": "Alle entfernen",

package/src/locales/en.json

@@ -1,7 +1,6 @@
 {
   "_name": "English",
   "autocomplete": {
-    "showAllResults": "See all results",
     "empty": "No results for “{query}”",
     "types": {
       "product": "Products",
@@ -52,6 +51,7 @@
     "label": "Search results",
     "shown": "Showing {shown} of {total}",
     "drawer": "Filters",
+    "applied": "Filters applied · {results}",
     "removeFilter": "Remove filter: {label}",
     "chosen": "Selected filters",
     "clearAll": "Clear all",

package/src/main.ts

@@ -25,6 +25,7 @@ import { plpAccepts, searchAccepts, searchReadQuery } from './core/routes';
 import { clearEarlyRules, earlyHold, plpRule, searchRule, writeEarlyRules, type EarlyRoute } from './core/early-rules';
 import { askChallenge, storedToken } from './api/token-key';
 import { loadDictionary } from './core/locales';
+import { ANALYTICS, AUTOCOMPLETE, NAMED_PRECONNECT_IMAGES, NAMED_PREFETCH_WHILE_TYPING, NAMED_SPECULATION, PLP, QUERY_URL, RECOMMENDER, SEARCH, SSR } from './core/features';
 import { keepDl } from './core/kept';
 import './core/boot-state'; // the page's state at boot, for lbx-place's reconciler
 import { onFlush, schedule } from './core/scheduler';
@@ -32,7 +33,7 @@ import { onUrlChange, startSensing } from './core/sense';
 import { layered, setCss, whenApplied } from './core/styles';
 import type { ListingRoute } from './core/listings';
 import type { Reco } from './core/recommenders';
-import type { GlobalConfigType, LumaConfigType, Result } from './types';
+import type { GlobalConfigType, LumaConfigType, Result, SearchConfigType } from './types';
 
 declare const __VERSION__: string;
 // Replaced at build time; the dev server (the loader's development mode) does not replace it.
@@ -54,6 +55,8 @@ export interface WidgetContext<C = any> {
   result: (hit: any) => Result;
   /** Helpers every template scope gets. */
   helpers: Record<string, unknown>;
+  /** The search page of a phrase where the site's server redirects its form there (`search.queryUrl`): the autocomplete's "show all" link. */
+  queryUrl?: SearchConfigType['queryUrl'];
 }
 
 export const startIntegration = async (files: IntegrationFiles) => {
@@ -78,7 +81,7 @@ export const startIntegration = async (files: IntegrationFiles) => {
       // its solver is plain JS since (api/token.ts), the rule stands. Said
       // once, with the fix; nothing starts and the site keeps its own UI.
       if (!isSecureContext)
-        return void (reportError('boot', `not a secure context (${location.origin}): Luma runs on HTTPS pages only. Serve the site over HTTPS; Luma's widgets did not start (the site keeps its own).`), off());
+        return void (reportError('boot', `not a secure context (${location.origin}): Luma runs on HTTPS pages only; its widgets did not start (the site keeps its own).`), off());
       return boot(config, files);
     }
   } catch (e) {
@@ -105,11 +108,12 @@ type Loaded = { mod: any; ctx: WidgetContext };
 const run = (where: string, p: Promise<Loaded>, f: (m: Loaded) => unknown, onFail?: () => void) =>
   p.then(f, () => onFail?.()).catch((e) => reportError(where, e));
 
+// A widget the integration has no folder for (core/features.ts): no chunk.
 const modules = {
-  autocomplete: () => import('./widgets/autocomplete'),
-  search: () => import('./widgets/search'),
-  plp: () => import('./widgets/plp'),
-  recommender: () => import('./widgets/recommender'),
+  autocomplete: AUTOCOMPLETE ? () => import('./widgets/autocomplete') : null,
+  search: SEARCH ? () => import('./widgets/search') : null,
+  plp: PLP ? () => import('./widgets/plp') : null,
+  recommender: RECOMMENDER ? () => import('./widgets/recommender') : null,
 };
 type Kind = keyof typeof modules;
 
@@ -121,7 +125,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // The product image host, learnt from an earlier listing (widgets/listing/instant.ts).
   let img: string | null = null;
   try {
-    img = g.preconnectImages !== false ? localStorage.getItem('lbx:img') : null;
+    img = (NAMED_PRECONNECT_IMAGES ? g.preconnectImages !== false : true) ? localStorage.getItem('lbx:img') : null;
   } catch {}
   const api = `https://api.${region}.luigisbox.ai`;
   const preconnect = (host: string, cors = true) => {
@@ -160,6 +164,9 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     else addEventListener('load', idle, { once: true });
   };
   afterLoad(warm);
+  // A framework on the page whose support the build left out (clientConfig
+  // `framework`): said in development (core/frameworks-check.ts, not in a build).
+  if (import.meta.env.DEV) afterLoad(() => void import('./core/frameworks-check').then((m) => m.checkFrameworks()).catch((e) => reportError('frameworks check', e)));
   startSensing();
 
   // Analytics starts once the page has loaded, or with the first widget (its
@@ -177,7 +184,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     startAnalytics();
     const support = import('./core/support');
     const p = Promise.all([
-      modules[kind]() as Promise<any>,
+      modules[kind]!() as Promise<any>,
       support,
       widgetFiles(kind, [...folders], files.templates),
       widgetFiles(kind, [...folders], files.styles),
@@ -188,7 +195,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     ]).then(([mod, s, tpls, css, dict]) => {
       if (mod.css) setCss(`default:${kind}`, layered(mod.css));
       // Product pages on intent (default on, core/speculation.ts): our links come with the first widget.
-      if (g.speculation !== false) s.speculate(g, onUrlChange);
+      if ((NAMED_SPECULATION ? g.speculation !== false : true)) s.speculate(g, onUrlChange);
       const ctx = s.widgetContext(s, config, { id, folders: [...folders], app, scopes: [...scopes] }, mod.templates, tpls, css, dict);
       mark(`loaded ${id}`);
       return { mod, ctx };
@@ -207,7 +214,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // --- autocomplete: the first interaction with the search input loads it
   const ac = config.autocomplete;
   // The dropdown is a popover (top layer): without it (Safari < 17, Firefox < 125) the site keeps its own.
-  if (ac && !ac.disabled && g.inputSelector && 'showPopover' in HTMLElement.prototype) {
+  if (AUTOCOMPLETE && ac && !ac.disabled && g.inputSelector && 'showPopover' in HTMLElement.prototype) {
     const css = hostCss('autocomplete');
     const TYPES = ['pointerdown', 'focusin', 'input'];
     const loadAc = () => load('autocomplete', 'autocomplete', ['_global', 'autocomplete'], ac, ['autocomplete']);
@@ -297,9 +304,11 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     clearTimeout(lateTimer);
     lateTimer = window.setTimeout(() => (recently = false), LATE_MS);
   };
-  late();
-  if (document.readyState !== 'complete') addEventListener('load', late, { once: true });
-  onUrlChange(late);
+  if (SEARCH || PLP || RECOMMENDER) {
+    late();
+    if (document.readyState !== 'complete') addEventListener('load', late, { once: true });
+    onUrlChange(late);
+  }
   const recent = () => recently;
 
   // --- listings: search results and category pages. Their boot (takeover,
@@ -310,8 +319,8 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // timer), or writes the hold CSS itself before first paint and in the same
   // task as an SPA's URL change into the route; the takeover continues that hold.
   const routes: ListingRoute[] = [];
-  const search = config.search && !config.search.disabled ? config.search : null;
-  const plp = config.plp && !config.plp.disabled ? config.plp : null;
+  const search = SEARCH ? (config.search && !config.search.disabled ? config.search : null) : null;
+  const plp = PLP ? (config.plp && !config.plp.disabled ? config.plp : null) : null;
   if (search) setUp('search', () => routes.push({ kind: 'search', cfg: search, accepts: searchAccepts(search), hostCss: hostCss('search') }));
   if (plp) setUp('plp', () => routes.push({ kind: 'plp', cfg: plp, accepts: plpAccepts(plp), hostCss: hostCss('plp') }));
   const early = earlyHold();
@@ -359,7 +368,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
       any = true;
       // Theirs shows at once where we failed too often; a server-rendered page holds nothing.
       // Moving within the route (their filters) keeps what is shown.
-      if (held.has(r.kind) || (spa && prev && r.accepts(prev)) || failures(r.kind) >= MAX_FAILURES || document.querySelector(`lbx-${r.kind}[data-lbx-ssr], template[data-lbx-ssr="${r.kind}"]`)) continue;
+      if (held.has(r.kind) || (spa && prev && r.accepts(prev)) || failures(r.kind) >= MAX_FAILURES || (SSR ? !!document.querySelector(`lbx-${r.kind}[data-lbx-ssr], template[data-lbx-ssr="${r.kind}"]`) : false)) continue;
       const claimed = !spa && !!early?.claim?.(r.kind);
       if (!claimed && !spa && painted()) continue; // booted after first paint: theirs stays until ours renders
       // Ours too where the early hold is claimed: with the height ours had on this
@@ -376,37 +385,44 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     // Loading adds modulepreload links to <head>: not while it is being parsed.
     for (const r of routes) if (r.accepts(u)) whenApplied(() => void loadListing(r.kind).catch(() => {}));
   };
-  enter(new URL(location.href), false);
-  onUrlChange((u) => enter(u, true));
-  // A page of a listing route's URL shape whose hook accepts it only later
-  // (their data layer, after our boot): its token from now, not from then
-  // (a production storefront's category pages: ~0.3 s sooner).
-  if (routes.some((r) => r.cfg.urlMatch && setUp(`${r.kind} urlMatch`, () => new RegExp(r.cfg.urlMatch!).test(location.pathname)))) warm();
-  // A route whose hook reads the page (an `active()` on their data layer or a
-  // node) may accept it only once the page has that: looked at again on
-  // reconciles (while `recent()`) until the listings' boot is asked for (a failed one: on the next URL).
-  if (routes.length) onFlush(() => recent() && !booting && failedOn !== location.href && enter(new URL(location.href), false));
-  // Results ready on Enter: the first input into the search field loads the prefetch-while-typing chunk.
-  if (search && routes.some((r) => r.kind === 'search') && search.prefetchWhileTyping !== false && g.inputSelector) {
+  if (SEARCH || PLP) {
+    enter(new URL(location.href), false);
+    onUrlChange((u) => enter(u, true));
+    // A page of a listing route's URL shape whose hook accepts it only later
+    // (their data layer, after our boot): its token from now, not from then
+    // (a production storefront's category pages: ~0.3 s sooner).
+    if (routes.some((r) => r.cfg.urlMatch && setUp(`${r.kind} urlMatch`, () => RegExp(r.cfg.urlMatch!).test(location.pathname)))) warm();
+    // A route whose hook reads the page (an `active()` on their data layer or a
+    // node) may accept it only once the page has that: looked at again on
+    // reconciles (while `recent()`) until the listings' boot is asked for (a failed one: on the next URL).
+    if (routes.length) onFlush(() => recent() && !booting && failedOn !== location.href && enter(new URL(location.href), false));
+  }
+  // Results ready on Enter, and Enter straight to the query's page (search.queryUrl):
+  // the first input into the search field loads the typing chunk (both are in it;
+  // the second only where the integration names the hook: QUERY_URL).
+  if (search && routes.some((r) => r.kind === 'search') && ((NAMED_PREFETCH_WHILE_TYPING ? search.prefetchWhileTyping !== false : true) || (QUERY_URL ? !!search.queryUrl : false)) && g.inputSelector) {
     const first = (e: Event) => {
       const i = e.composedPath?.()[0] ?? e.target;
       if (!(i instanceof HTMLInputElement) || !i.matches(g.inputSelector!)) return;
       removeEventListener('input', first, true);
-      import('./widgets/search/speculate').then((m) => m.startSpeculation(g, search, i)).catch((err) => reportError('search prefetch', err));
+      if (NAMED_PREFETCH_WHILE_TYPING ? search.prefetchWhileTyping !== false : true) import('./widgets/search/speculate').then((m) => m.startSpeculation(g, search, i)).catch((err) => reportError('search prefetch', err));
+      if (QUERY_URL && search.queryUrl) import('./widgets/search/direct').then((m) => m.startDirect(search, g.inputSelector!)).catch((err) => reportError('search direct', err));
     };
     addEventListener('input', first, true);
   }
   // A hold no route of ours continues (stale rules, a URL the snippet
   // over-matched) ends now, not at its timeout; a held route's ends with its takeover.
-  if (!held.size) whenApplied(() => early?.drop?.());
+  if (!(SEARCH || PLP) || !held.size) whenApplied(() => early?.drop?.());
   // Rules for the inline early-hold snippet's next hard load (src/core/early-rules.ts).
   // Dev bundles boot late (unbundled modules): a longer snippet timeout there.
   // A route failing this session gets no rule: the snippet must not hold it on every page view.
   const ok = (kind: string) => routes.some((r) => r.kind === kind) && failures(kind) < MAX_FAILURES;
-  writeEarlyRules(
-    [search && ok('search') ? searchRule(search, hostCss('search')) : null, plp && ok('plp') ? plpRule(plp, hostCss('plp')) : null].filter((r): r is EarlyRoute => !!r),
-    VERSION === 'dev' ? 6000 : 1500,
-  );
+  if (SEARCH || PLP)
+    writeEarlyRules(
+      [search && ok('search') ? searchRule(search, hostCss('search')) : null, plp && ok('plp') ? plpRule(plp, hostCss('plp')) : null].filter((r): r is EarlyRoute => !!r),
+      VERSION === 'dev' ? 6000 : 1500,
+    );
+  else clearEarlyRules(); // none to hold (a listing folder removed: its stale rules go)
 
   // --- recommenders: their triggers and placement (core/recommenders.ts, in
   // lbx-place with the reconciler) load on a page an inline one's urlMatch /
@@ -416,22 +432,23 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   const pages: ((u: URL) => boolean)[] = [];
   /** Our recommenders by name, and the pages each runs on: where ours runs, the site's of that name is not tracked. */
   const recoPages = new Map<string, (u: URL) => boolean>();
-  for (const [name, rc] of Object.entries(config.recommenders ?? {})) {
-    if (rc.disabled) continue;
-    const id = `reco-${name}`;
-    const folders = ['_global', `recommender ${name}`];
-    // style-host.css of the folder: e.g. hides the host's own box our widget replaces
-    // (scoped by our element's state, so it is inert where the widget is not).
-    const css = hostCss(`recommender ${name}`);
-    if (css) setCss(`host-${id}`, css);
-    // The popup is a popover (top layer): without the API there is no popup.
-    if (rc.confirm && !('showPopover' in HTMLElement.prototype)) continue;
-    recos.push({ id, rc, get: () => load('recommender', id, folders, rc, ['recommender']) });
-    const re = !rc.confirm && rc.urlMatch ? setUp(id, () => new RegExp(rc.urlMatch!)) : null;
-    pages.push(rc.confirm ? () => true : (u) => (rc.active ? rc.active(u) : !re || re.test(u.pathname)));
-    recoPages.set(name, pages[pages.length - 1]);
-  }
-  if (recos.length) {
+  if (RECOMMENDER)
+    for (const [name, rc] of Object.entries(config.recommenders ?? {})) {
+      if (rc.disabled) continue;
+      const id = `reco-${name}`;
+      const folders = ['_global', `recommender ${name}`];
+      // style-host.css of the folder: e.g. hides the host's own box our widget replaces
+      // (scoped by our element's state, so it is inert where the widget is not).
+      const css = hostCss(`recommender ${name}`);
+      if (css) setCss(`host-${id}`, css);
+      // The popup is a popover (top layer): without the API there is no popup.
+      if (rc.confirm && !('showPopover' in HTMLElement.prototype)) continue;
+      recos.push({ id, rc, get: () => load('recommender', id, folders, rc, ['recommender']) });
+      const re = !rc.confirm && rc.urlMatch ? setUp(id, () => RegExp(rc.urlMatch!)) : null;
+      pages.push(rc.confirm ? () => true : (u) => (rc.active ? rc.active(u) : !re || re.test(u.pathname)));
+      recoPages.set(name, pages[pages.length - 1]);
+    }
+  if (RECOMMENDER && recos.length) {
     let asked = false;
     let failedOn = '';
     const check = () => {
@@ -456,12 +473,12 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // _analytics.ts (nothing is sent that it does not say), every page once it
   // has loaded or with the first widget (its chains on our tiles listen then).
   // Without one, `analytics: false`: our tiles queue nothing (core/tiles.ts).
-  if (!Object.keys(files.analytics ?? {}).length) g.analytics = false;
-  if (g.analytics !== false) {
+  if (!ANALYTICS || !Object.keys(files.analytics ?? {}).length) g.analytics = false;
+  if (ANALYTICS && g.analytics !== false) {
     const here = () => new URL(location.href);
     const readQ = search ? searchReadQuery(search) : null;
     const owns = (s: string) => {
-      if (s === 'autocomplete') return !!(ac && !ac.disabled && g.inputSelector);
+      if (s === 'autocomplete') return AUTOCOMPLETE ? !!(ac && !ac.disabled && g.inputSelector) : false;
       if (s === 'search') return routes.some((r) => r.kind === 'search' && r.accepts(here()));
       const reco = s.startsWith('recommender:') ? recoPages.get(s.slice(12)) : undefined;
       return !!reco && !!setUp(`${s} active`, () => reco(here()));

package/src/types.ts

@@ -80,7 +80,9 @@ export interface GlobalConfigType {
    * Two in flight, the latest intent wins; 20 per category or query; none
    * offline, with Save-Data or on 2G; range sliders never. A hover that is
    * not followed costs one search request (no render, no hook, no analytics
-   * event). Default true.
+   * event). In a drawer that stages (`facetsApply`), the selection it holds
+   * is fetched the same way once the changes pause, for its apply button.
+   * Default true.
    */
   prefetchFilters?: boolean;
   /**
@@ -109,7 +111,8 @@ export interface GlobalConfigType {
    * Puts a product in the site's cart (`_init.ts`, or `_global/_widget.ts`:
    * only widgets call it): what a click on `[data-lbx-cart]` in one of our
    * tiles runs (announced to analytics first: `lumaCarts()`). `count`: the
-   * attribute's value (default 1).
+   * attribute's value (default 1). The build has it only where a file of the
+   * integration contains `data-lbx-cart` (a template: core/features.ts CART).
    */
   addToCart?: (r: Result, o: { count: number; el: HTMLElement; event: MouseEvent }) => unknown;
 }
@@ -332,10 +335,22 @@ export interface ListingConfigType {
    * How a change inside the open filter drawer (`[data-lbx-drawer-panel]`,
    * opened by `[data-lbx-drawer="open"]`) applies. 'instant' (default): at
    * once, as in a sidebar. 'staged': held in the drawer (it shows the pending
-   * selection, the scope's `pending` is true, nothing is fetched) until its
-   * apply button (`[data-lbx-drawer="apply"]`) commits them in one request
-   * and one history entry; closing it otherwise (`[data-lbx-drawer="close"]`,
-   * Escape) discards them. Per viewport min-width, e.g. `{ "0": "staged",
+   * selection, the scope's `pending` is true, the results behind it do not
+   * change) until its apply button (`[data-lbx-drawer="apply"]`) commits them
+   * in one request and one history entry; closing it otherwise
+   * (`[data-lbx-drawer="close"]`, Escape) discards them. Once the changes
+   * pause, the held selection's results are fetched in the background
+   * (unless `_global.prefetchFilters` is false, with Save-Data or on 2G),
+   * so Apply shows them without waiting; nothing is shown and `onRender`
+   * does not run before Apply. Apply's swap is marked: the old list fades
+   * out, the new tiles come in, and a status at the listing's top says what
+   * was applied ("Filters applied · 9 products", translation
+   * `search.applied`) for 2.5 s, in `[data-lbx-applied-cue]`'s shadow root
+   * (out of reach of the site's resets; themed with `--lbx-applied-bg`,
+   * `--lbx-applied-fg`, `--lbx-applied-top` for a sticky header's height,
+   * `--lbx-applied-offset` to sit below a heading at the listing's top, or
+   * restyled with `[data-lbx-applied-cue]::part(pill)`), with
+   * `data-lbx-applied` on the listing meanwhile for the site's own CSS. Per viewport min-width, e.g. `{ "0": "staged",
    * "768": "instant" }` (staged on phones). Outside an open drawer every
    * change is instant.
    */
@@ -375,6 +390,18 @@ export interface SearchConfigType extends AppConfig<SearchConfigType>, ListingCo
   /** _init.ts overrides for URLs a regex cannot describe. */
   active?: (url: URL) => boolean;
   readQuery?: (url: URL) => string;
+  /**
+   * _init.ts: the search page of a phrase, where the site's server sends the
+   * search form (a form that submits to `/search?q=…` and is redirected to
+   * `/search/<phrase>/`). `form` is the URL the form would submit to (its other
+   * fields). The URL returned must be one `urlMatch` / `readQuery` accept;
+   * `''` means no page of its own for this phrase (the form submits as it is). With
+   * it, Enter in the site's search input (and the autocomplete's "show all" and
+   * its hand-off of a query) loads that page directly, without the redirect;
+   * the result fetched while typing, the page prerendered and a query in place
+   * are that page's. An empty phrase submits the form as the site has it.
+   */
+  queryUrl?: (q: string, form: URL) => string | URL;
   /** Extra result types shown above the results (category and brand tiles), one request each. */
   quick?: { type: string; size: number; fields?: string[] }[];
   /**
@@ -400,17 +427,24 @@ export interface SearchConfigType extends AppConfig<SearchConfigType>, ListingCo
   /** How long a result fetched while typing is used (ms; older: asked anew). Default 120000. */
   prefetchMaxAgeMs?: number;
   /**
-   * Also prerender the search page (Speculation Rules: Chrome, Edge) of the
-   * phrase whose result was just fetched while typing, if it is still the one
-   * typed, so Enter from another page activates a page already rendered. One
-   * at a time (a newer phrase replaces it). It costs a host page render on
-   * the site's server per settled phrase, and runs the site's scripts in it:
+   * The search page itself, ahead of Enter (Speculation Rules): once the
+   * phrase's result is fetched while typing and the phrase is still the one
+   * typed, one list rule for that page. `'prefetch'` (default): its document
+   * is fetched (Chrome, Edge; Firefox and Safari as they ship it), so Enter
+   * from another page skips the site's server render and still renders from
+   * the stash: a document fetch on the site's server per settled phrase, no
+   * scripts run. `'prerender'`: the page is rendered ahead as well (Chrome,
+   * Edge; a prefetch rule too, for engines without prerendering): Enter
+   * activates a page already rendered, but the site's scripts run in it, and
    * analytics that do not wait for `prerenderingchange` count a page view the
-   * shopper may never see. Not on the search page when `inPlaceQuery` is on.
-   * Default false.
+   * shopper may never see. `false`: neither. One page at a time (a newer
+   * phrase replaces it); not on the search page when `inPlaceQuery` is on
+   * (no page load to save); nothing offline, with Save-Data or on 2G.
    */
+  pageWhileTyping?: 'prefetch' | 'prerender' | false;
+  /** `true` is `pageWhileTyping: 'prerender'`. */
   prerenderWhileTyping?: boolean;
-  /** Speculation Rules eagerness of that list rule: 'immediate' (default) or 'eager'. */
+  /** Speculation Rules eagerness of the prerender rule: 'immediate' (default) or 'eager'. */
   prerenderEagerness?: 'immediate' | 'eager';
 }