@luigisbox/luma 0.4.0 → 0.5.0

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>) => {

package/src/core/listings.ts

@@ -6,6 +6,8 @@
 // CSS); each route's takeover continues that hold.
 
 import type { SearchConfigType, PlpConfigType, GlobalConfigType } from '../types';
+import { SEARCH, SSR } from './features';
+import { TURBO } from './frameworks';
 import { hasPrefetch, productsChannel, putPrefetch } from './prefetch';
 import type { Rule } from './reconciler';
 import { searchReadQuery } from './routes';
@@ -43,6 +45,8 @@ const toArray = <X>(v: X | X[] | undefined): X[] => (v == null ? [] : Array.isAr
 
 const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run, held, addRule }: ListingDeps) => {
   const tag = `lbx-${kind}`;
+  /** The query a search URL holds (the route's readQuery / urlMatch), once. */
+  const read = kind === 'search' ? searchReadQuery(cfg as SearchConfigType) : null;
   const tk: Takeover = takeover({
     id: kind,
     tag,
@@ -51,13 +55,13 @@ const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run,
     reserveSelector: cfg.reserveSelector!,
     holdTimeoutMs: cfg.holdTimeoutMs ?? 4000,
     // Another category, another query: a new visit (hold, or hand back anew).
-    visitKey: kind === 'plp' ? (u) => u.pathname : searchReadQuery(cfg as SearchConfigType),
+    visitKey: read ?? ((u) => u.pathname),
     held: held.has(kind),
   });
   // The element is placed by the reconciler; its class arrives with the
   // widget's chunk and upgrades it in place (custom elements are upgraded when
   // defined). Where their server fell back to their own listing, the page is theirs.
-  const active = (u: URL) => accepts(u) && tk.ssr !== 'fellback';
+  const active = (u: URL) => accepts(u) && (SSR ? tk.ssr !== 'fellback' : true);
   addRule({ id: kind, active, anchors: toArray(cfg.anchor), position: cfg.position!, settleMs: cfg.settleMs, create: () => document.createElement(tag) });
   // Search: the request starts here, in parallel with the widget's chunks
   // (the entry asked for them with this one). Once our element is on the page
@@ -66,8 +70,8 @@ const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run,
   // the listing starts, so it waits for this request rather than asking twice.
   // A failure (the chunk, the request) is the listing's, as a failed request is.
   const prefetch = (url: URL) => {
-    // A result stashed for this load (typed on the previous page, or left for Back): the listing renders that.
-    if (kind !== 'search' || !active(url) || tk.ssr || hasPrefetch(url.href) || document.querySelector(tag) || hasStash(url.href)) return;
+    // A result stashed for this load (typed on the previous page: under the query; or left for Back: under the page): the listing renders that.
+    if (!SEARCH || !read || !active(url) || (SSR ? !!tk.ssr : false) || hasPrefetch(url.href) || document.querySelector(tag) || hasStash(url.href, { route: kind, q: read(url) })) return;
     const { products, onProducts } = productsChannel();
     putPrefetch(url.href, import('../widgets/search/first').then((m) => m.searchFirst(g, cfg as SearchConfigType, url, onProducts)), { products });
   };
@@ -95,6 +99,6 @@ const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run,
 /** Each route's takeover, placement rule and loading; Turbo Drive's history around ours (core/turbo.ts). */
 export const startListings = (routes: ListingRoute[], deps: ListingDeps, setUp: <X>(where: string, f: () => X) => X | null) => {
   const listings = routes.map((r) => setUp(r.kind, () => listing(r, deps))).filter((l): l is NonNullable<typeof l> => !!l);
-  if (listings.length) setUp('turbo', () => startTurbo(listings));
+  if (TURBO && listings.length) setUp('turbo', () => startTurbo(listings));
   return listings;
 };

package/src/core/locales.ts

@@ -1,5 +1,6 @@
 // Luma's dictionaries (src/locales/<locale>.json), each its own chunk, only
-// the site's locale ever loaded. In the entry (a few bytes: the glob's map),
+// the site's locale ever loaded. In the entry (a few bytes per locale: the
+// glob's map, narrowed to the declared ones: build/vite.mjs onlyLocales),
 // so a widget's load asks for its dictionary in parallel with its chunks
 // rather than after lbx-core arrived. No DOM: the server renderer uses it too.
 

package/src/core/own.ts

@@ -1,6 +1,8 @@
 // Everything we insert into the page is marked, so sensing can ignore our own
 // mutations and the reconciler can find its nodes.
 
+import { DOCUMENT_REACT } from './frameworks';
+
 export const OWN_ATTR = 'data-lbx';
 
 /**
@@ -28,17 +30,19 @@ export const modalOf = (el: Element): Element | null => {
   return null;
 };
 
-/** React hydrating the whole document (Next.js app router, Remix, React Router 7 / Hydrogen). */
-export const wholeDocument = () => {
+/** The page's own signs of React hydrating the whole document (Next.js app router, Remix, React Router 7 / Hydrogen). */
+export const reactDocumentSigns = () => {
   const w = window as any;
   return !!(w.__next_f || w.__remixContext || w.__reactRouterContext);
 };
+/** React hydrating the whole document. */
+export const wholeDocument = DOCUMENT_REACT ? reactDocumentSigns : () => false;
 /**
  * A page that may yet be hydrated as a whole: known whole-document React, or a
  * Next.js page still parsing (its flag comes at the end of <body>, its assets
  * show before). Anywhere else, nothing of ours has to wait for a framework.
  */
-export const documentMayHydrate = () => wholeDocument() || (document.readyState === 'loading' && !!document.querySelector('script[src*="/_next/"]'));
+export const documentMayHydrate = () => (DOCUMENT_REACT ? wholeDocument() || (document.readyState === 'loading' && !!document.querySelector('script[src*="/_next/"]')) : false);
 
 /** React has hydrated this element (claimed it: a fiber, or React 16's instance). */
 export const hasFiber = (n: object) => Object.keys(n).some((k) => k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$'));

package/src/core/recommenders.ts

@@ -40,7 +40,7 @@ export const startRecommenders = (recos: Reco[], run: Run, setUp: <X>(where: str
  * (2026-10-11).
  */
 function inlineRecommender(id: string, rc: RecommenderConfigType, get: () => Promise<Loaded>, run: Run) {
-  const re = rc.urlMatch ? new RegExp(rc.urlMatch) : null;
+  const re = rc.urlMatch ? RegExp(rc.urlMatch) : null;
   const page = rc.active ?? ((u: URL) => !re || re.test(u.pathname));
   const io = new IntersectionObserver(
     (entries) => {
@@ -113,7 +113,7 @@ function inlineRecommender(id: string, rc: RecommenderConfigType, get: () => Pro
  * their way) when the notice appears.
  */
 function popupTrigger(rc: RecommenderConfigType, get: () => Promise<Loaded>, run: Run) {
-  if (!rc.intent) return reportError('reco popup', new Error('a popup recommender needs intent() in its _init.ts'));
+  if (!rc.intent) return reportError('reco popup', Error('a popup recommender needs intent() in its _init.ts'));
   let intent: { item: string; t: number } | null = null;
   // Sensing sees nodes come and go, not attributes: a notice the host shows by
   // a class (or style, hidden, open) on a node that stays is watched for while

package/src/core/reconciler.ts

@@ -6,6 +6,8 @@
 // are stable and need no settle wait. Read at the entry's boot (this module arrives later, in lbx-place).
 import { lateBoot } from './boot-state';
 import { documentMayHydrate, hasFiber, OWN_ATTR, watchOwnRemovals, wholeDocument } from './own';
+import { SSR } from './features';
+import { ANGULAR, ASTRO, NEXT, REACT, SVELTEKIT, TURBO, VUE } from './frameworks';
 import { onFlush, scheduleIn, scheduleNow } from './scheduler';
 import { bump, health, mark, reportError } from './health';
 
@@ -46,11 +48,12 @@ const pausedUntil = new Map<string, number>();
 // re-renders the root on the client (a full-page flash), Vue drops our node,
 // Angular reports NG0500. The host CSS hold covers the wait. Any other React
 // root is known by its container key once createRoot/hydrateRoot has run
-// (reactContainer(), below).
+// (reactContainer(), below). Only the frameworks the build has (core/frameworks.ts).
 const REACT_ROOTS = '#__next, #___gatsby, [data-reactroot]';
 const VUE_ROOTS = '#__nuxt, [data-server-rendered]';
 // Astro removes `ssr` once an island has hydrated.
-const SSR_ROOTS = `${REACT_ROOTS}, ${VUE_ROOTS}, [ng-server-context], astro-island[ssr]`;
+// (Ternaries, not &&: a false flag must leave no reference behind, or this chunk imports it and keeps the code.)
+const SSR_ROOTS = [REACT ? REACT_ROOTS : '', VUE ? VUE_ROOTS : '', ANGULAR ? '[ng-server-context]' : '', ASTRO ? 'astro-island[ssr]' : ''].filter(Boolean).join(', ');
 const keyOf = (n: object, prefix: string) => Object.keys(n).find((k) => k.startsWith(prefix));
 
 const CONTAINER = '__reactContainer$';
@@ -60,6 +63,7 @@ const CONTAINER = '__reactContainer$';
  * is as common as `#__next`), or the document React hydrates as a whole.
  */
 const reactContainer = (el: Element): Element | Document | null => {
+  if (!REACT) return null;
   for (let a: Element | null = el; a; a = a.parentElement) if (keyOf(a, CONTAINER)) return a;
   return wholeDocument() ? document : null;
 };
@@ -70,7 +74,7 @@ const reactContainer = (el: Element): Element | Document | null => {
  * ours in that markup was React error #418, the root rendered anew).
  */
 const reactDehydrated = (c: Element | Document | null) => {
-  const k = c && keyOf(c, CONTAINER);
+  const k = REACT ? c && keyOf(c, CONTAINER) : null;
   return !!k && (c as any)[k]?.stateNode?.current?.memoizedState?.isDehydrated === true;
 };
 // A wait for the parse to end (hydrated(), below) needs a reconcile when it does.
@@ -97,10 +101,12 @@ const beforeCache = () => {
   // (Turbolinks snapshots in a setTimeout of 1 ms: a few ms more covers it.)
   setTimeout(() => setTimeout(endSnapshot, 5));
 };
-addEventListener('turbo:before-cache', beforeCache);
-addEventListener('turbolinks:before-cache', beforeCache);
-addEventListener('turbo:render', endSnapshot);
-addEventListener('turbolinks:render', endSnapshot);
+if (TURBO) {
+  addEventListener('turbo:before-cache', beforeCache);
+  addEventListener('turbolinks:before-cache', beforeCache);
+  addEventListener('turbo:render', endSnapshot);
+  addEventListener('turbolinks:render', endSnapshot);
+}
 const sinceLoad = () => {
   const end = (performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined)?.loadEventEnd;
   return end ? performance.now() - end : -1;
@@ -173,7 +179,7 @@ const inDehydratedSuspense = (el: Element): boolean => {
  * meanwhile (their listing shows); ours is placed once React is done.
  */
 const reactHydrating = (anchor: Element, age: number) => {
-  return age <= MAX_REACT_WAIT && reactDehydrated(reactContainer(anchor));
+  return REACT ? age <= MAX_REACT_WAIT && reactDehydrated(reactContainer(anchor)) : false;
 };
 /** However long React takes, not longer than this. */
 const MAX_REACT_WAIT = 15_000;
@@ -185,7 +191,7 @@ const MAX_REACT_WAIT = 15_000;
  * production Angular binds the server's next node to the wrong element.
  */
 const ngHydrating = (anchor: Element, pos: Position, age: number) => {
-  if (age > MAX_REACT_WAIT) return false;
+  if (!ANGULAR || age > MAX_REACT_WAIT) return false;
   const node = pos === 'before' || pos === 'after' ? anchor.parentElement ?? anchor : anchor;
   return !!node.closest('[ng-server-context][ngh], [ng-server-context] [ngh]');
 };
@@ -203,37 +209,39 @@ const ngHydrating = (anchor: Element, pos: Position, age: number) => {
 let svelteKit: Element | null | undefined;
 let svelteKitStarted = false;
 const svelteKitRoot = (anchor: Element) => {
+  if (!SVELTEKIT) return null;
   if (svelteKit === undefined) {
     const boot = [...document.scripts].find((s) => !s.src && s.text.includes('__sveltekit_') && s.text.includes('.start('));
     if (boot || document.readyState !== 'loading') svelteKit = boot?.parentElement ?? null;
   }
   return svelteKit?.contains(anchor) ? svelteKit : null;
 };
-const svelteKitParsing = () => svelteKit === undefined && !!document.querySelector('link[href*="/immutable/entry/start."]');
+const svelteKitParsing = () => (SVELTEKIT ? svelteKit === undefined && !!document.querySelector('link[href*="/immutable/entry/start."]') : false);
 
 const hydrated = (anchor: Element, pos: Position) => {
   if (svelteKitRoot(anchor)) return (svelteKitStarted ||= history.scrollRestoration === 'manual');
   // Any React root (its container key), and not before it has committed its hydration.
   const react = reactContainer(anchor);
   if (reactDehydrated(react)) return false;
-  const root = anchor.closest(SSR_ROOTS) ?? (react !== document ? (react as Element | null) : null) ?? (wholeDocument() ? document.body : null);
+  const root = (SSR_ROOTS ? anchor.closest(SSR_ROOTS) : null) ?? (REACT ? (react !== document ? (react as Element | null) : null) : null) ?? (wholeDocument() ? document.body : null);
   // Still parsing a Next.js page (its whole-document flag comes at the end of
   // <body>, its assets are visible before) or a SvelteKit page (its boot
   // script is at the end of <body>): wait for the parse. Any other page is
   // placed at once (before first paint, as the hold intends).
   if (!root) return !documentMayHydrate() && !svelteKitParsing();
-  // For a sibling insert, the parent's state is what counts (all of its children claimed).
-  const node = pos === 'before' || pos === 'after' ? anchor.parentElement ?? anchor : anchor;
+  // For a sibling insert, the parent's state is what counts (all of its
+  // children claimed): React's and Angular's only (a read the rest leave out).
+  const node = REACT || ANGULAR ? (pos === 'before' || pos === 'after' ? anchor.parentElement ?? anchor : anchor) : anchor;
   // Frameworks with a signal: wait for it (the cap bounds the wait).
   // For a sibling insert, the anchor's own place counts too: its parent may be
   // claimed while the anchor sits in a boundary React has not hydrated yet.
-  if (root === document.body || root === react || root.matches(REACT_ROOTS)) {
+  if (REACT && (root === document.body || root === react || root.matches(REACT_ROOTS))) {
     // Next.js pages router: its hydration measure (it stays; the marks it is
     // made of do not) says the shell is done, not the Suspense boundaries.
-    const shell = performance.getEntriesByName('Next.js-hydration', 'measure').length ? !inAnyDehydratedBoundary(node) : reactHydrated(node);
+    const shell = NEXT && performance.getEntriesByName('Next.js-hydration', 'measure').length ? !inAnyDehydratedBoundary(node) : reactHydrated(node);
     return shell && (node === anchor || !inDehydratedSuspense(anchor));
   }
-  if (root.matches(VUE_ROOTS)) {
+  if (VUE && root.matches(VUE_ROOTS)) {
     const vue = (root as any).__vue_app__;
     const nuxt = vue?.config?.globalProperties?.$nuxt;
     if (nuxt) return nuxt.isHydrating === false; // Nuxt 3 hydrates async parts after mount
@@ -243,11 +251,11 @@ const hydrated = (anchor: Element, pos: Position) => {
   // that task), and no component around the anchor still has its hydration
   // key (`ngh`, removed once Angular has read it): a lazy route's page
   // hydrates later than the shell, when its chunk has arrived.
-  if ('__ngContext__' in root) {
+  if (ANGULAR && '__ngContext__' in root) {
     const waiting = node.closest('[ngh]');
     return !waiting || waiting === root || !root.contains(waiting);
   }
-  if (root.localName === 'astro-island') return false; // it drops `ssr` when hydrated (the cap bounds the wait)
+  if (ASTRO && root.localName === 'astro-island') return false; // it drops `ssr` when hydrated (the cap bounds the wait)
   // No signal (a framework we cannot see): after load and a moment.
   return lateBoot || sinceLoad() > 1000;
 };
@@ -300,8 +308,9 @@ const allowInsert = (id: string, now: number) => {
  * markup in an island that hydrates after the swap; ours in it then fails
  * that hydration and the island renders anew).
  */
+// (hydrated() reads the position for React and Angular only: no read of it in a build without them.)
 const mustWait = (r: Rule, anchor: Element, age: number) =>
-  (!lost.has(r.id) || !!anchor.closest('astro-island[ssr]')) && !hydrated(anchor, r.position) && (age < MAX_HYDRATION_WAIT || reactHydrating(anchor, age) || ngHydrating(anchor, r.position, age));
+  (!lost.has(r.id) || (ASTRO ? !!anchor.closest('astro-island[ssr]') : false)) && !hydrated(anchor, REACT || ANGULAR ? r.position : 'prepend') && (age < MAX_HYDRATION_WAIT || reactHydrating(anchor, age) || (ANGULAR ? ngHydrating(anchor, r.position, age) : false));
 
 const reconcileRule = (r: Rule, url: URL, now: number) => {
   const mine = [...document.querySelectorAll(`[${OWN_ATTR}="${r.id}"]`)];
@@ -322,21 +331,21 @@ const reconcileRule = (r: Rule, url: URL, now: number) => {
   // placed. Otherwise only our own instance counts: a copy of it (a Turbo
   // snapshot restored) is not live, it goes.
   const keep =
-    mine.find((el) => el.hasAttribute('data-lbx-ssr') && isPlaced(el, anchor!, r.position)) ??
+    (SSR ? mine.find((el) => el.hasAttribute('data-lbx-ssr') && isPlaced(el, anchor!, r.position)) : undefined) ??
     mine.find((el) => el === instances.get(r.id) && isPlaced(el, anchor!, r.position));
   if (!keep && placedOn.has(r.id) && placedOn.get(r.id) !== anchor) lost.add(r.id);
   mine.filter((el) => el !== keep).forEach((el) => el.remove());
   if (keep) {
     // The server's element becomes ours (it drops its marker once hydrated).
     instances.set(r.id, keep as HTMLElement);
-    if (!keep.hasAttribute('data-turbo-temporary')) keep.setAttribute('data-turbo-temporary', '');
+    if (TURBO && !keep.hasAttribute('data-turbo-temporary')) keep.setAttribute('data-turbo-temporary', '');
     // Placed while parsing, before the page said React hydrates it as a whole
     // (Remix, React Router 7 and Hydrogen say so at the end of <body>): out
     // again until React has it, or React re-renders the document. Their
     // scripts run after the parse, so it is gone before hydration starts.
     // Within the same limits as the wait before an insert (React never hydrating must not keep ours out).
     if (!firstSeen.has(anchor)) firstSeen.set(anchor, now);
-    if (!keep.hasAttribute('data-lbx-ssr') && wholeDocument() && mustWait(r, anchor, now - (firstSeen.get(anchor) ?? now))) {
+    if ((!SSR || !keep.hasAttribute('data-lbx-ssr')) && wholeDocument() && mustWait(r, anchor, now - (firstSeen.get(anchor) ?? now))) {
       keep.remove();
       scheduleIn(200);
     }
@@ -361,7 +370,7 @@ const reconcileRule = (r: Rule, url: URL, now: number) => {
   instances.set(r.id, el);
   el.setAttribute(OWN_ATTR, r.id);
   // Turbo Drive: not in its page snapshots (a restored copy would sit next to ours).
-  el.setAttribute('data-turbo-temporary', '');
+  if (TURBO) el.setAttribute('data-turbo-temporary', '');
   place(el, anchor, r.position);
   placedOn.set(r.id, anchor);
   lost.delete(r.id);

package/src/core/routes.ts

@@ -3,6 +3,7 @@
 
 import type { ParamMap, PlpConfigType, SearchConfigType } from '../types';
 import { reportError } from './health';
+import { READ_QUERY } from './features';
 
 /** An integration's URL hook (active, readQuery) that throws: the page is not ours. */
 const guarded = (where: string, f: (u: URL) => boolean) => (u: URL) => {
@@ -19,7 +20,7 @@ export const P = 'lbx.';
 
 // Tracking params, and the LBX loader's own (_lbx_env=development, …): never a reason to leave a page to the host.
 export const TRACKING = '^(utm_|_lbx_|gclid$|gbraid$|wbraid$|fbclid$|msclkid$|_gl$|mc_(cid|eid)$|srsltid$)';
-const TRACKING_RE = new RegExp(TRACKING);
+const TRACKING_RE = RegExp(TRACKING);
 
 /** A URL without the params in `ignore` (default: tracking) and without its #hash: the page it shows. */
 export const withoutTracking = (href: string, ignore = TRACKING_RE) => {
@@ -47,7 +48,7 @@ export const firstPage = (v: string) => /^0*1$/.test(v.trim());
 export const has = (o: object, k: string) => Object.prototype.hasOwnProperty.call(o, k);
 
 export const searchReadQuery = (c: SearchConfigType) => {
-  if (c.readQuery) {
+  if (READ_QUERY && c.readQuery) {
     const read = c.readQuery;
     return (u: URL) => {
       try {
@@ -58,13 +59,13 @@ export const searchReadQuery = (c: SearchConfigType) => {
       }
     };
   }
-  const re = c.urlMatch ? new RegExp(c.urlMatch) : null;
+  const re = c.urlMatch ? RegExp(c.urlMatch) : null;
   return (u: URL) => (c.queryParam ? u.searchParams.get(c.queryParam) : decode((re?.exec(u.pathname)?.[1] ?? '').replace(/\+/g, ' ')))?.trim() || '';
 };
 
 export const searchAccepts = (c: SearchConfigType) => {
   if (c.active) return guarded('search active', c.active);
-  const re = c.urlMatch ? new RegExp(c.urlMatch) : null;
+  const re = c.urlMatch ? RegExp(c.urlMatch) : null;
   const read = searchReadQuery(c);
   return guarded('search readQuery', (u: URL) => (!re || re.test(u.pathname)) && !!read(u));
 };
@@ -83,9 +84,9 @@ export const flagId = (f: { param: string; value: string }) => `${f.param}=${f.v
  * anything else leaves the page to the host, so no URL ever loses a filter.
  */
 export const plpAccepts = (c: Pick<PlpConfigType, 'urlMatch' | 'params' | 'active'>) => {
-  const re = new RegExp(c.urlMatch);
+  const re = RegExp(c.urlMatch);
   const pm: ParamMap = c.params ?? {};
-  const ignore = new RegExp(pm.ignore ?? TRACKING);
+  const ignore = RegExp(pm.ignore ?? TRACKING);
   const flags = pm.flags ?? [];
   const facetParams = pm.facetParams ?? {};
   const byParam = new Map(Object.entries(facetParams).map(([facet, fp]) => [fp.param, facet]));