@luigisbox/luma 0.3.0 → 0.5.0

package/src/widgets/search/speculate.ts

@@ -10,10 +10,16 @@
 // - in sessionStorage (../listing/stash.ts, `spec`): Enter on another page
 //   loads the search page, whose listing renders it at boot, like a
 //   server-rendered state;
-// - optionally (`prerenderWhileTyping`) the search page itself is prerendered
-//   once that result is stashed and the phrase is still the one typed: Enter
-//   then activates a page that is already rendered (it renders from the
-//   stash: no request of its own).
+// - the search page itself (`pageWhileTyping`, Speculation Rules): once that
+//   result is stashed and the phrase is still the one typed, its document is
+//   fetched ahead (default), so Enter skips the site's server render, or the
+//   page is prerendered as well (`'prerender'`): Enter then activates a page
+//   that is already rendered (it renders from the stash: no request of its own).
+//
+// The page fetched for is the one the form's submit leads to (./form-url.ts
+// searchTarget: the form's URL, or the integration's `queryUrl` of the phrase
+// where the site's server redirects the form); the stash is under the query,
+// so the page it loads at finds it whatever its URL.
 //
 // Only what is likely: the settled phrase (not every keystroke), 2+
 // characters, not the page we are on, none offline, with Save-Data or on 2G.
@@ -32,6 +38,7 @@
 import { getApi } from '../../api';
 import { firstRowImages, resultFactory, warmImages } from '../../core/support';
 import { mark, reportError } from '../../core/health';
+import { cspNonce } from '../../core/styles';
 import { pageKey } from '../../core/page';
 import { dropPrefetch, hasPrefetch, putPrefetch } from '../../core/prefetch';
 import { onUrlChange } from '../../core/sense';
@@ -39,8 +46,10 @@ import type { GlobalConfigType, SearchConfigType } from '../../types';
 import { listingQuery, type ListingResult } from '../listing/query';
 import type { Query, Route } from '../listing/state';
 import { writeStash } from '../listing/stash';
-import { formUrl } from './form-url';
+import { defaultSubmitter } from '../../core/default-button';
+import { searchTarget } from './form-url';
 import { searchRoute } from './route';
+import { NAMED_IN_PLACE_QUERY, PRERENDER_TYPING } from '../../core/features';
 
 const MIN_CHARS = 2;
 /** Speculative results kept at once (the phrase before the latest one: a shopper backspacing). */
@@ -80,12 +89,14 @@ export const startSpeculation = (g: GlobalConfigType, cfg: SearchConfigType, fir
     return form instanceof HTMLFormElement ? ([...form.elements].find((el) => el instanceof HTMLInputElement && el.matches(sel)) as HTMLInputElement | undefined) ?? null : null;
   };
 
-  const prerender = startPrerender(cfg, route);
+  const prerender = startPage(cfg, route);
+  // The page Enter would load: the browser's implicit submission, with the form's default button (its name=value, formaction).
+  const target = (i: HTMLInputElement) => (i.isConnected && i.form ? searchTarget(cfg.queryUrl, i.form, defaultSubmitter(i.form), i) : null);
 
   const run = (i: HTMLInputElement) => {
     clearTimeout(timer);
-    if (thrifty() || !i.form || !i.isConnected) return;
-    const url = formUrl(i.form, null);
+    if (thrifty()) return;
+    const url = target(i);
     if (!url || url.origin !== location.origin || !route.accepts(url)) return;
     const key = pageKey(url.href);
     if (key === pageKey(location.href)) return; // the page we are on
@@ -106,7 +117,7 @@ export const startSpeculation = (g: GlobalConfigType, cfg: SearchConfigType, fir
         // For a page load of it: the whole result, unless something optional failed.
         if (!res.partial && writeStash(url.href, { kind: 'spec', route: route.id, query: q, result: res, ttl })) {
           // Still the phrase in the form: that page, rendered ahead (it renders from the stash).
-          const now = i.isConnected && i.form ? formUrl(i.form, null) : null;
+          const now = target(i);
           if (now && pageKey(now.href) === key) prerender?.start(url.href, key);
         }
         if (warm > 0) warmFor(res);
@@ -160,21 +171,27 @@ export const startSpeculation = (g: GlobalConfigType, cfg: SearchConfigType, fir
 };
 
 /**
- * The search page prerendered while the shopper types (`prerenderWhileTyping`,
- * Speculation Rules: Chrome, Edge): one list rule for one URL, the phrase whose
- * result was just stashed. A newer phrase replaces it (removing a rule cancels
- * its prerender): one prerendered search page at most. Not on the search page
- * itself when queries there are in place (no page load to save).
- *
- * The cost: a host document rendered on their server per settled phrase the
- * shopper may never submit, and their scripts run in it (Chromium runs a
- * prerendered page's scripts; only APIs with visible effects wait for the
+ * The search page itself, ahead of Enter (`pageWhileTyping`, Speculation
+ * Rules): one list rule for one URL, the phrase whose result was just stashed.
+ * `'prefetch'` (default) fetches its document: a navigation to that URL is
+ * served from it (Chromium: `deliveryType` `navigational-prefetch`, cache
+ * headers and cookies as any navigation's; Firefox and Safari as they ship
+ * prefetch), the site's server render off the shopper's wait, nothing of the
+ * page run. `'prerender'` renders it as well (Chromium; the prefetch rule is
+ * kept for engines without prerendering, and Chromium's prerender takes the
+ * prefetched response): Enter activates a page already rendered, but the
+ * site's scripts run in it (only APIs with visible effects wait for the
  * activation: tags that defer to `prerenderingchange`, as Google's do, count
- * nothing until then, others count a page view). Ours renders from the stash
- * (no request) and defers onRender to the activation. Off by default.
+ * nothing until then, others count a page view); ours renders from the stash
+ * (no request) and defers onRender to the activation. A newer phrase replaces
+ * the rule (removing it cancels a prerender): one page at most. Not on the
+ * search page itself when queries there are in place (no page load to save).
+ * The cost either way: a document from their server per settled phrase the
+ * shopper may never submit.
  */
-const startPrerender = (cfg: SearchConfigType, route: Route) => {
-  if (!cfg.prerenderWhileTyping || !(HTMLScriptElement as any).supports?.('speculationrules')) return null;
+const startPage = (cfg: SearchConfigType, route: Route) => {
+  const mode = cfg.pageWhileTyping ?? (PRERENDER_TYPING && cfg.prerenderWhileTyping ? 'prerender' : 'prefetch');
+  if (!mode || !(HTMLScriptElement as any).supports?.('speculationrules')) return null;
   let el: HTMLScriptElement | null = null;
   let at = '';
   const stop = () => {
@@ -183,20 +200,24 @@ const startPrerender = (cfg: SearchConfigType, route: Route) => {
     at = '';
   };
   return {
-    /** The phrase now settled: a prerender of another page goes. */
+    /** The phrase now settled: another page's rule goes. */
     keep: (key: string) => void (at && at !== key && stop()),
     start: (href: string, key: string) => {
       if (at === key) return;
       // A search page in place has no page load to save.
-      if (cfg.inPlaceQuery !== false && route.accepts(new URL(location.href))) return;
+      if ((NAMED_IN_PLACE_QUERY ? cfg.inPlaceQuery !== false : true) && route.accepts(new URL(location.href))) return;
       stop();
       el = document.createElement('script');
       el.type = 'speculationrules';
-      el.setAttribute('data-lbx', 'search-prerender');
-      el.textContent = JSON.stringify({ prerender: [{ source: 'list', urls: [href], eagerness: cfg.prerenderEagerness ?? 'immediate' }] });
+      el.setAttribute('data-lbx', 'search-page');
+      el.nonce = cspNonce(); // a strict script-src applies to inline speculation rules
+      // A list rule's eagerness is `immediate` unless said otherwise.
+      const rules: Record<string, unknown[]> = { prefetch: [{ source: 'list', urls: [href] }] };
+      if (PRERENDER_TYPING && mode === 'prerender') rules.prerender = [{ source: 'list', urls: [href], eagerness: cfg.prerenderEagerness }]; // unset: not written (JSON.stringify)
+      el.textContent = JSON.stringify(rules);
       document.head.append(el);
       at = key;
-      mark(`search prerender: ${href}`);
+      mark(`search page ${mode}: ${href}`);
     },
   };
 };

package/src/widgets/search/submit.ts

@@ -0,0 +1,136 @@
+// A submit of the site's search form, taken by Luma: in place on the search
+// page (./in-place.ts) or straight to the query's page (./direct.ts). Enter in
+// the input is modelled as the browser's implicit submission
+// (implicitSubmitter, validates). Not in lbx-nav (every listing page loads
+// that): a category page never takes a submit; loaded with in-place.ts
+// (build/vite.mjs lbx-search-in-place), direct.ts imports it from there.
+
+import { defaultSubmitter, type Submitter } from '../../core/default-button';
+import { reportError } from '../../core/health';
+
+/** Fields whose Enter is an implicit submission (the HTML standard's list): with no submit button, the form submits only when it has exactly one. */
+const BLOCKS_IMPLICIT = /^(text|search|email|url|tel|password|date|month|week|time|datetime-local|number)$/;
+
+/**
+ * What an Enter in a field of `form` submits with, as the browser's implicit
+ * submission: the default button (`submitter`, null without one), or null when
+ * it submits nothing: a disabled default button (a fieldset's too), or no
+ * button and not exactly one field that blocks implicit submission. The
+ * form's validation is `validates`, apart: the browser runs it last.
+ */
+export const implicitSubmitter = (form: HTMLFormElement): { submitter: Submitter | null } | null => {
+  const submitter = defaultSubmitter(form);
+  if (submitter) {
+    if (submitter.matches(':disabled')) return null;
+  } else if ([...form.elements].filter((el) => el instanceof HTMLInputElement && BLOCKS_IMPLICIT.test(el.type)).length !== 1) return null;
+  return { submitter };
+};
+
+/**
+ * The form's constraint validation, as the browser runs it before a submit:
+ * false when a field is invalid (the browser's own Enter then reports it and
+ * submits nothing), unless the form has `novalidate` or the submitter
+ * `formnovalidate`. `checkValidity` fires each invalid field's `invalid`
+ * event, as the browser is about to: asked last, only for an Enter that would
+ * otherwise be taken, so a host's listeners hear it once more at most.
+ */
+export const validates = (form: HTMLFormElement, submitter: Submitter | null) => form.noValidate || !!submitter?.formNoValidate || form.checkValidity();
+
+/**
+ * A submit of the site's search form, the one holding an input matching
+ * `inputSelector` (any form without a selector). `target(form, submitter,
+ * input)` says where it leads when it is ours to take (null: the browser's);
+ * then the event is cancelled and `go(to, form, input, e)` does it, and the
+ * event goes no further (a host handler that ignores defaultPrevented would
+ * navigate as well, htmx's boosted form). Heard as the window's `submit`
+ * (capture), in a shadow root's too (a web-component header: its submit is
+ * not composed) once one of its inputs is used, and as Enter in the input
+ * ahead of the site's own handlers (some navigate with form.submit() on Enter,
+ * which fires no submit event), as the browser's implicit submission
+ * (`implicitSubmitter`, then `validates` once the Enter would be taken: nothing
+ * where the browser would submit nothing). Not with a modifier key held (a
+ * new tab or window, where the browser supports it), and not an Enter on an
+ * option selected in our open autocomplete (the autocomplete's; its own
+ * hand-off of a query is a synthetic Enter, taken). Errors in `target` and
+ * `go` are reported as `where`'s. Returns `isInput` and the inputs seen in
+ * shadow roots (in-place.ts shows the query in them on back/forward).
+ */
+export const onSearchSubmit = (
+  where: string,
+  inputSelector: string | undefined,
+  target: (form: HTMLFormElement, submitter: HTMLElement | null, input: HTMLInputElement | null) => URL | null,
+  go: (to: URL, form: HTMLFormElement, input: HTMLInputElement | null, e: Event) => void,
+) => {
+  const isInput = (el: unknown): el is HTMLInputElement => !!inputSelector && el instanceof HTMLInputElement && el.matches(inputSelector);
+  const realTarget = (e: Event) => (e.composedPath?.()[0] ?? e.target) as Element | null;
+  let mods = { on: false, t: -1 };
+  const track = (e: KeyboardEvent | MouseEvent) => void (mods = { on: e.ctrlKey || e.metaKey || e.shiftKey || e.altKey, t: e.timeStamp });
+  addEventListener('keydown', track, true);
+  addEventListener('click', track, true);
+  const guarded = <T>(f: () => T, otherwise: T): T => {
+    try {
+      return f();
+    } catch (err) {
+      reportError(where, err);
+      return otherwise;
+    }
+  };
+  const taken = (to: URL, form: HTMLFormElement, input: HTMLInputElement | null, e: Event) => {
+    e.preventDefault();
+    guarded(() => go(to, form, input, e), undefined);
+  };
+  const onSubmit = (e: SubmitEvent) => {
+    const form = e.target;
+    if (e.defaultPrevented || !(form instanceof HTMLFormElement) || (mods.on && e.timeStamp - mods.t < 100)) return;
+    // The form's search input; with a selector, a form without one is not the site's search form.
+    const input = inputSelector ? ([...form.elements].find(isInput) ?? null) : null;
+    if (inputSelector && !input) return;
+    const to = guarded(() => target(form, e.submitter, input), null);
+    if (!to) return;
+    taken(to, form, input, e);
+    e.stopPropagation();
+  };
+  addEventListener('submit', onSubmit, true);
+  // A search input in a shadow root: its key events reach window retargeted to
+  // the shadow host (read from the composed path); its root gets the submit
+  // listener once one of its inputs is used.
+  const shadowInputs = new Set<HTMLInputElement>();
+  const roots = new WeakSet<ShadowRoot>();
+  const seen = (e: Event) => {
+    const i = realTarget(e);
+    const root = isInput(i) ? i.getRootNode() : null;
+    if (!(root instanceof ShadowRoot)) return;
+    shadowInputs.add(i as HTMLInputElement);
+    if (roots.has(root)) return;
+    roots.add(root);
+    root.addEventListener('submit', onSubmit as EventListener, true);
+  };
+  addEventListener('focusin', seen, true);
+  // Our open autocomplete with an option selected: in its shadow root by default (light DOM with dom: 'light').
+  const acSelection = () => {
+    const o = document.querySelector('[data-lbx="ac-overlay"]');
+    return !!o?.matches(':popover-open') && !!(o.shadowRoot ?? o).querySelector('[aria-selected="true"]');
+  };
+  addEventListener(
+    'keydown',
+    (e) => {
+      if (e.key !== 'Enter' || e.isComposing || e.defaultPrevented || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+      const input = realTarget(e);
+      if (!isInput(input) || !input.form) return;
+      seen(e);
+      if (e.isTrusted && acSelection()) return;
+      const form = input.form;
+      const sub = implicitSubmitter(form);
+      if (!sub) return; // the browser submits nothing
+      // `target` first (its formUrl builds the form's data: the form's `formdata` event, as a submit's), validation
+      // last: an Enter declined here fires no `invalid` events of ours before the browser's own; an invalid
+      // field then costs one `formdata` event the browser would not have sent, the smaller of the two.
+      const to = guarded(() => target(form, sub.submitter, input), null);
+      if (!to || !validates(form, sub.submitter)) return; // not ours; or the browser reports the invalid field and submits nothing
+      taken(to, form, input, e);
+      e.stopImmediatePropagation();
+    },
+    true,
+  );
+  return { isInput, shadowInputs };
+};