netjes 0.0.1 → 0.0.3

package/src/router.tsx

@@ -9,13 +9,15 @@ import {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { actionRequest, expectActionClient, fetchAction, setActionClient } from './actions.tsx';
 import { deferredRegistry, revivePayload } from './deferred.ts';
 import type { EncodedForm } from './form-data.ts';
 import type { Href } from './href.ts';
-import { MissingModuleError, type ModuleLoader, type RouteModules } from './modules.ts';
+import { type ErrorPageProps, MissingModuleError, type ModuleLoader, type RouteModules } from './modules.ts';
+import { moveFocusAfterNavigation } from './navigation-focus.ts';
 import {
   type ActionResponse,
   type AntiforgeryToken,
@@ -31,7 +33,8 @@ import {
   parseAntiforgery,
   parseNavigationPayload,
 } from './payload.ts';
-import { ErrorBoundary, LayoutDepthContext, RouteTree } from './route-tree.tsx';
+import { RouteAnnouncer } from './route-announcer.tsx';
+import { ErrorBoundary, LayoutDepthContext, RouteTree, asError } from './route-tree.tsx';
 import { type StandardSchemaV1, parseLenient, parseWith } from './schema.ts';
 
 /** A form post that did not produce a page: a non-page error response (`status`), or no response at all (`null`). */
@@ -44,11 +47,19 @@ export type NavigationState =
 
 /** The client router that `useRouter()` returns. */
 export type Router = {
+  /**
+   * Navigates, adding a history entry. The promise resolves once the router has handed the page to React, which can be
+   * before React shows it, or once the navigation has ended another way.
+   */
   push(href: Href, options?: { scroll?: boolean }): Promise<void>;
+  /** Navigates, replacing the history entry. The promise resolves as `push`'s does. */
   replace(href: Href, options?: { scroll?: boolean }): Promise<void>;
-  /** Fetches the page payload and modules ahead of a navigation. Links do this on hover and focus. */
+  /** Fetches the page payload and modules ahead of a navigation. Links do this on hover, focus and touch. */
   prefetch(href: Href): void;
-  /** Re-runs the current page's loader and re-renders with the new props. */
+  /**
+   * Runs every loader of the page on screen again, layout loaders included, and renders the page with the new props, in
+   * the same history entry and without scrolling. The promise resolves as `push`'s does.
+   */
   refresh(): Promise<void>;
   back(): void;
   forward(): void;
@@ -59,8 +70,17 @@ export type SubmitBody = EncodedForm;
 /** Called with every server action response, e.g. by the query shell to apply query updates. */
 export type ActionListener = (response: ActionResponse) => void;
 
-export type InternalRouter = Router & {
-  submit(action: URL, body: SubmitBody): Promise<void>;
+/**
+ * What `<Link>` and `<Form>` also pass: what had the focus before the app's own `onClick` or `onSubmit` ran. Those run
+ * as the navigation starts, so where they move the focus, such as back to the button of a menu that closes, is where
+ * the navigation put it.
+ */
+type FocusAtStart = { focusedAtStart?: Element | null };
+
+export type InternalRouter = Omit<Router, 'push' | 'replace'> & {
+  push(href: Href, options?: { scroll?: boolean } & FocusAtStart): Promise<void>;
+  replace(href: Href, options?: { scroll?: boolean } & FocusAtStart): Promise<void>;
+  submit(action: URL, body: SubmitBody, options?: FocusAtStart): Promise<void>;
   onActionResponse(listener: ActionListener): () => void;
   /**
    * Called as soon as a server action call or form post says it set or deleted a cookie (signed someone in or out),
@@ -89,6 +109,13 @@ type PageRequest = { method: 'GET' } | ({ method: 'POST' } & SubmitBody);
 function isLoaded(result: LoadResult): result is Loaded {
   return 'payload' in result;
 }
+
+/**
+ * What remounts the page and its templates when it changes: the page's path, or for an intercepted page the key of the
+ * page under it, which stays on screen. Two views with one key show the same page.
+ */
+const pageKeyOf = (loaded: Loaded) => loaded.pageKey ?? loaded.url.pathname;
+
 type ScrollIntent = { kind: 'none' } | { kind: 'top' } | { kind: 'hash'; hash: string } | { kind: 'restore'; x: number; y: number };
 type HistoryMode = 'push' | 'replace' | 'none' | 'auto';
 
@@ -97,6 +124,13 @@ const ANTIFORGERY_URL = '/_netjes/antiforgery';
 const NONE: ScrollIntent = { kind: 'none' };
 const TOP: ScrollIntent = { kind: 'top' };
 const STATE_KEY = '__netjes';
+/**
+ * On `<html>` while the client router runs in the document, and the public sign that it does: end-to-end tests wait
+ * for it before they click. (The history entry's key is no such sign: the entry keeps it when the browser loads the
+ * document again.) The effect that sets it must stay after the one that registers the router as the action client,
+ * so that once it shows, the router has keyed the entry, listens for back and forward, and runs server action calls.
+ */
+const HYDRATED_ATTRIBUTE = 'data-netjes-hydrated';
 const PREFETCH_TTL_MS = 30_000;
 const MAX_REDIRECTS = 10;
 const MAX_REMEMBERED_ENTRIES = 50;
@@ -281,7 +315,8 @@ type NavigatorDeps = {
   showDocument(html: string, url: string): void;
   download(file: Blob, name: string): void;
   setPending(state: NavigationState): void;
-  commit(loaded: Loaded, scroll: ScrollIntent): void;
+  /** `focusedAtStart`: what had the focus when the navigation started, which decides where the focus goes after it. */
+  commit(loaded: Loaded, scroll: ScrollIntent, focusedAtStart: Element | null): void;
 };
 
 type GoOptions = {
@@ -294,6 +329,8 @@ type GoOptions = {
   reuseSegments: boolean;
   /** Refreshing an intercepted page: load this page under it again too, and show the result in its slot again. */
   interceptOver?: URL;
+  /** What had the focus as the navigation started, when the caller read it: else go() reads it as it starts. */
+  focusedAtStart?: Element | null;
 };
 
 /**
@@ -369,7 +406,8 @@ class Navigator {
     this.channel = null;
   }
 
-  async navigate(href: string, history: 'push' | 'replace', scroll: boolean): Promise<void> {
+  /** `focusedAtStart`: what had the focus as the navigation started, by default what has it as this is called. */
+  async navigate(href: string, history: 'push' | 'replace', scroll: boolean, focusedAtStart = document.activeElement): Promise<void> {
     const url = new URL(withBasePath(href, this.deps.basePath), window.location.href);
     if (!isWebUrl(url)) {
       console.error(`netjes: refusing to navigate to ${url.protocol} URL`);
@@ -387,7 +425,7 @@ class Navigator {
       const key = createKey();
       window.history[history === 'push' ? 'pushState' : 'replaceState']({ [STATE_KEY]: key }, '', url.href);
       this.setCurrent(key, { ...this.current, url });
-      this.deps.commit(this.current, scroll ? { kind: 'hash', hash: url.hash } : NONE);
+      this.deps.commit(this.current, scroll ? { kind: 'hash', hash: url.hash } : NONE, focusedAtStart);
       return;
     }
 
@@ -397,11 +435,16 @@ class Navigator {
       pending: 'loading',
       usePrefetch: true,
       reuseSegments: true,
+      focusedAtStart,
     });
   }
 
-  submit(action: URL, body: SubmitBody): Promise<void> {
-    return this.go(action, { method: 'POST', ...body }, { history: 'auto', scroll: 'auto', pending: 'submitting', usePrefetch: false, reuseSegments: false });
+  submit(action: URL, body: SubmitBody, focusedAtStart = document.activeElement): Promise<void> {
+    return this.go(
+      action,
+      { method: 'POST', ...body },
+      { history: 'auto', scroll: 'auto', pending: 'submitting', usePrefetch: false, reuseSegments: false, focusedAtStart },
+    );
   }
 
   /**
@@ -553,13 +596,17 @@ class Navigator {
     if (known) {
       this.active?.controller.abort();
       this.setCurrent(key, { ...known, url });
-      this.deps.commit(this.current, scroll);
+      this.deps.commit(this.current, scroll, document.activeElement);
       return;
     }
     void this.go(url, { method: 'GET' }, { history: 'none', scroll, pending: 'loading', key, usePrefetch: false, reuseSegments: true });
   }
 
   private async go(url: URL, request: PageRequest, options: GoOptions): Promise<void> {
+    // Read before anything this navigation starts can move it: inside the click (or the keypress) that started it,
+    // before React has handled that event's own state updates, such as a menu that closes. navigate() and submit()
+    // pass what they read, or what a link or a form read before the app's own handler ran.
+    const focusedAtStart = options.focusedAtStart === undefined ? document.activeElement : options.focusedAtStart;
     if (url.origin !== window.location.origin) {
       // navigate() and Form hand other origins to the browser, and every page URL the router keeps is on this one.
       // Refuse one that gets here all the same: a failed load would send the browser to it.
@@ -638,7 +685,7 @@ class Navigator {
       this.forgetToken();
       committed = true;
       const scroll = shown.base ? NONE : options.scroll === 'auto' ? (shown.url.pathname === previous.pathname ? NONE : TOP) : options.scroll;
-      this.deps.commit(shown, scroll);
+      this.deps.commit(shown, scroll, focusedAtStart);
     } catch (error) {
       if (controller.signal.aborted) return navigation.restarted;
       if (request.method === 'POST') {
@@ -809,21 +856,22 @@ function elementForFragment(fragment: string): HTMLElement | null {
   return document.getElementById(decoded) ?? document.getElementById(fragment);
 }
 
-function applyScroll(intent: ScrollIntent) {
+/** Scrolls as the intent says, and returns the element a fragment names, which then takes the focus. */
+function applyScroll(intent: ScrollIntent): HTMLElement | null {
   switch (intent.kind) {
     case 'none':
-      return;
+      return null;
     case 'top':
       window.scrollTo(0, 0);
-      return;
+      return null;
     case 'restore':
       window.scrollTo(intent.x, intent.y);
-      return;
+      return null;
     case 'hash': {
       const target = elementForFragment(intent.hash.slice(1));
       if (target) target.scrollIntoView();
       else window.scrollTo(0, 0);
-      return;
+      return target;
     }
     default: {
       const exhaustive: never = intent;
@@ -832,7 +880,7 @@ function applyScroll(intent: ScrollIntent) {
   }
 }
 
-type View = { loaded: Loaded; id: number; scroll: ScrollIntent };
+type View = { loaded: Loaded; id: number; scroll: ScrollIntent; focusedAtStart: Element | null };
 type ViewValue = { payload: PagePayload; url: URL };
 
 const RouterContext = createContext<InternalRouter | null>(null);
@@ -896,6 +944,7 @@ export function RouterProvider({
     },
     id: 0,
     scroll: NONE,
+    focusedAtStart: null,
   }));
   const [navigation, setNavigation] = useState<NavigationState>(IDLE);
   const [navigator] = useState(() => {
@@ -910,9 +959,9 @@ export function RouterProvider({
         showDocument,
         download,
         setPending: setNavigation,
-        commit: (loaded, scroll) =>
+        commit: (loaded, scroll, focusedAtStart) =>
           startTransition(() => {
-            setView((previous) => ({ loaded, id: previous.id + 1, scroll }));
+            setView((previous) => ({ loaded, id: previous.id + 1, scroll, focusedAtStart }));
             setNavigation(IDLE);
           }),
       },
@@ -974,19 +1023,37 @@ export function RouterProvider({
       }),
     [navigator, actionListeners],
   );
+  // Directly after the registration above, and in a passive effect, never a layout one: React runs a component's
+  // effects in order, a commit's layout effects before any passive one, and the mark must not show while server
+  // action calls still wait for the router.
+  useEffect(() => {
+    const html = document.documentElement;
+    html.setAttribute(HYDRATED_ATTRIBUTE, '');
+    return () => html.removeAttribute(HYDRATED_ATTRIBUTE);
+  }, []);
+  // The key of the page on screen before this commit.
+  const committedPageKey = useRef(pageKeyOf(view.loaded));
+  // In the commit that shows the page, before the browser paints it, and after the layout effects of the page and its
+  // layouts, which have focused an autoFocus element by then. Every focus call keeps the scroll position applyScroll
+  // sets, the one Back restores included.
   useLayoutEffect(() => {
-    if (view.id > 0) applyScroll(view.scroll);
+    if (view.id === 0) return;
+    const target = applyScroll(view.scroll);
+    const key = pageKeyOf(view.loaded);
+    const replaced = key !== committedPageKey.current;
+    committedPageKey.current = key;
+    moveFocusAfterNavigation({ target, replaced, keep: view.scroll.kind === 'none', focusedAtStart: view.focusedAtStart });
   }, [view]);
 
   const router = useMemo<InternalRouter>(
     () => ({
-      push: (href, options) => navigator.navigate(href, 'push', options?.scroll ?? true),
-      replace: (href, options) => navigator.navigate(href, 'replace', options?.scroll ?? true),
+      push: (href, options) => navigator.navigate(href, 'push', options?.scroll ?? true, options?.focusedAtStart),
+      replace: (href, options) => navigator.navigate(href, 'replace', options?.scroll ?? true, options?.focusedAtStart),
       prefetch: (href) => navigator.prefetch(href),
       refresh: () => navigator.refresh(),
       back: () => window.history.back(),
       forward: () => window.history.forward(),
-      submit: (action, body) => navigator.submit(action, body),
+      submit: (action, body, options) => navigator.submit(action, body, options?.focusedAtStart),
       onActionResponse: (listener) => {
         actionListeners.add(listener);
         return () => actionListeners.delete(listener);
@@ -1014,12 +1081,15 @@ export function RouterProvider({
                 params={payload.params}
                 status={payload.status}
                 pageKind={payload.pageKind}
-                pageKey={view.loaded.pageKey ?? url.pathname}
+                pageKey={pageKeyOf(view.loaded)}
                 retry={() => void router.refresh()}
                 metadata={payload.metadata}
               />
             </ErrorBoundary>
           </Shell>
+          {/* Outside the app's shell and error boundaries, which cannot remove it, and after them, so it reads what the
+              new page has set. */}
+          <RouteAnnouncer location={url.pathname + url.search} path={withoutBasePath(url.pathname, payload.basePath ?? '')} />
         </NavigationContext>
       </ViewContext>
     </RouterContext>
@@ -1028,8 +1098,13 @@ export function RouterProvider({
 
 const errorPageModules = new WeakMap<ModuleLoader, Promise<RouteModules>>();
 
+/**
+ * What the router shows for an error no segment's boundary caught: the app's root error page, handed the error as it
+ * was thrown (its class, its stack, a server action's status), or the built-in page, which says 500.
+ */
 function ErrorFallback({ error, errorPage, loader, payload }: { error: unknown; errorPage: SpecialPageRef | null; loader: ModuleLoader; payload: PagePayload }) {
-  const props = { status: 500, message: error instanceof Error ? error.message : 'Something went wrong' };
+  const caught = asError(error);
+  const props = { status: 500, message: caught.message };
   const builtIn = <RouteTree modules={{ page: null, segments: [] }} props={props} params={payload.params} status={500} pageKey="error" />;
   if (!errorPage) return builtIn;
   let modules = errorPageModules.get(loader);
@@ -1041,14 +1116,24 @@ function ErrorFallback({ error, errorPage, loader, payload }: { error: unknown;
     // If the error page (or a layout around it) throws as well, fall back to the built-in page.
     <ErrorBoundary resetKey={0} fallback={() => builtIn}>
       <Suspense fallback={null}>
-        <LoadedErrorPage modules={modules} props={props} payload={payload} />
+        <LoadedErrorPage modules={modules} props={props} error={caught} payload={payload} />
       </Suspense>
     </ErrorBoundary>
   );
 }
 
-function LoadedErrorPage({ modules, props, payload }: { modules: Promise<RouteModules>; props: Record<string, unknown>; payload: PagePayload }) {
-  return <RouteTree modules={use(modules)} props={props} params={payload.params} status={500} pageKind="error" pageKey="error" />;
+function LoadedErrorPage({
+  modules,
+  props,
+  error,
+  payload,
+}: {
+  modules: Promise<RouteModules>;
+  props: Record<string, unknown>;
+  error: ErrorPageProps['error'];
+  payload: PagePayload;
+}) {
+  return <RouteTree modules={use(modules)} props={props} params={payload.params} status={500} pageKind="error" pageKey="error" error={error} />;
 }
 
 /** The router's contexts without the router: for the test harness (netjes/testing), which fakes navigation. */
@@ -1098,7 +1183,7 @@ export function usePathname(): string {
   return withoutBasePath(url.pathname, payload.basePath ?? '');
 }
 
-/** An href for a plain `<a>` or attribute, under the base path: what `<Link>` does for its own. */
+/** An href for a plain `<a>`, another attribute or a `fetch`, under the base path: what `<Link>` does for its own. */
 export function useHref(href: string): string {
   return withBasePath(href, useBasePath());
 }

package/src/script.tsx

@@ -1,5 +1,6 @@
-import { type ScriptHTMLAttributes, useEffect, useRef } from 'react';
-import { preinit } from 'react-dom';
+import { type ScriptHTMLAttributes, useEffect, useRef, useSyncExternalStore } from 'react';
+import { preload } from 'react-dom';
+import { htmlSafeJson } from './deferred.ts';
 import { useNonce } from './nonce.tsx';
 
 /** When `<Script>` loads its script: before or after the page is interactive, or when the browser is idle. */
@@ -7,11 +8,17 @@ export type ScriptStrategy = 'beforeInteractive' | 'afterInteractive' | 'lazyOnl
 
 /** The props of `<Script>`: a script's own, with a loading strategy and load callbacks. */
 export type ScriptProps = Omit<ScriptHTMLAttributes<HTMLScriptElement>, 'onLoad' | 'onError' | 'children' | 'dangerouslySetInnerHTML'> & {
-  /** Identifies the script (required for inline scripts): each is added once, however often it is rendered. */
+  /**
+   * Identifies the script (required for inline scripts): it is added once, however often it is rendered, except inline
+   * `beforeInteractive` code, which the server writes wherever a component renders it.
+   */
   id?: string;
   /**
    * `afterInteractive` (default): once the page is interactive. `lazyOnload`: when the browser is idle.
-   * `beforeInteractive`: in the server-rendered head, before the page's own scripts (external scripts only).
+   * `beforeInteractive`: in a server-rendered document, inline code runs where it stands, as the parser reaches it,
+   * and an external script in the shell runs once the shell is parsed, in order with the others, before the page's
+   * code and hydration; one in a Suspense boundary that streams in later runs when that part of the page hydrates.
+   * A component that mounts in the browser, after a client navigation for one, adds it as `afterInteractive` does.
    */
   strategy?: ScriptStrategy;
   onLoad?: (event: Event) => void;
@@ -20,9 +27,18 @@ export type ScriptProps = Omit<ScriptHTMLAttributes<HTMLScriptElement>, 'onLoad'
   children?: string;
 };
 
+/**
+ * The name of the `<meta>` a server-rendered `beforeInteractive` script puts in the head, which tells the client entry
+ * to run the external ones before it imports the page's modules.
+ */
+export const BEFORE_INTERACTIVE_MARKER = 'netjes-before-interactive';
+
+/** The attribute that marks a server-rendered `beforeInteractive` script, inline or inert, with its id or src. */
+const ENTRY = 'data-netjes-script';
+
 type Entry = { element: HTMLScriptElement; state: 'loading' | 'loaded' | 'failed'; event?: Event };
 
-/** Scripts already added to this document, by id or src. */
+/** Scripts already added to this document, or run by its parser, by id or src. */
 const added = new Map<string, Entry>();
 
 function whenIdle(run: () => void) {
@@ -32,52 +48,200 @@ function whenIdle(run: () => void) {
   else window.addEventListener('load', schedule, { once: true });
 }
 
-function add(key: string, { src, children, strategy: _strategy, id, onLoad: _onLoad, onError: _onError, ...attributes }: ScriptProps): Entry {
-  const element = document.createElement('script');
-  for (const [name, value] of Object.entries(attributes)) {
-    if (value === undefined || value === false || typeof value === 'function' || typeof value === 'object') continue;
-    element.setAttribute(name === 'className' ? 'class' : name === 'crossOrigin' ? 'crossorigin' : name, value === true ? '' : String(value));
+/** A script's own attributes by their HTML names: strings, or true for one without a value. */
+type Attributes = Record<string, string | true>;
+
+/** A name `setAttribute` takes, other than an event handler's, which React never renders from a string either. */
+const isAttributeName = (name: string) => /^[A-Za-z_:][-\w.:]*$/.test(name) && !/^on/i.test(name);
+
+function attributesOf(props: Record<string, unknown>): Attributes {
+  const attributes: Attributes = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (value === undefined || value === null || value === false || typeof value === 'function' || typeof value === 'object') continue;
+    const html = name === 'className' ? 'class' : name === 'crossOrigin' ? 'crossorigin' : name;
+    if (isAttributeName(html)) attributes[html] = value === true ? true : String(value);
   }
+  return attributes;
+}
+
+type Insertion = { src?: string; code?: string; id?: string; nonce?: string; attributes: Attributes; async: boolean; parent: HTMLElement };
+
+/** Adds a script element to the document and records it, with its outcome once it has one. */
+function insert(key: string, { src, code, id, nonce, attributes, async, parent }: Insertion): Entry {
+  const element = document.createElement('script');
+  for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value === true ? '' : value);
   if (id) element.id = id;
   // The property, not the attribute: browsers hide nonce attributes once a policy applies.
-  if (attributes.nonce) element.nonce = attributes.nonce;
+  if (nonce) element.nonce = nonce;
   const entry: Entry = { element, state: 'loading' };
   element.addEventListener('load', (event) => Object.assign(entry, { state: 'loaded', event }));
   element.addEventListener('error', (event) => Object.assign(entry, { state: 'failed', event }));
   if (src) {
     element.src = src;
-    element.async = true;
+    element.async = async;
   } else {
-    element.textContent = children ?? '';
+    element.textContent = code ?? '';
     // Inline scripts run as they are appended; there is no load event to wait for.
     entry.state = 'loaded';
   }
   added.set(key, entry);
-  document.body.append(element);
+  parent.append(element);
   return entry;
 }
 
+function add(key: string, { src, children, strategy, id, onLoad: _onLoad, onError: _onError, ...rest }: ScriptProps): Entry {
+  // Inline beforeInteractive code as the server's document carries it, so that one hash allows it on either path.
+  const code = strategy === 'beforeInteractive' ? escapeScriptText(children ?? '') : (children ?? '');
+  return insert(key, {
+    ...(src ? { src } : { code }),
+    ...(id ? { id } : {}),
+    ...(rest.nonce ? { nonce: rest.nonce } : {}),
+    attributes: attributesOf(rest),
+    async: true,
+    parent: document.body,
+  });
+}
+
+/** What an inert entry holds, the script's src and its attributes, or null when it holds anything else. */
+function externalEntry(text: string | null): { src: string; attributes: Attributes } | null {
+  let value: unknown;
+  try {
+    value = JSON.parse(text ?? '');
+  } catch {
+    return null;
+  }
+  if (typeof value !== 'object' || value === null) return null;
+  const { src, attributes } = value as { src?: unknown; attributes?: unknown };
+  if (typeof src !== 'string' || src === '') return null;
+  const checked: Attributes = {};
+  if (typeof attributes === 'object' && attributes !== null) {
+    for (const [name, attribute] of Object.entries(attributes)) {
+      if ((typeof attribute === 'string' || attribute === true) && isAttributeName(name) && name.toLowerCase() !== 'nonce') checked[name] = attribute;
+    }
+  }
+  return { src, attributes: checked };
+}
+
+/** The types besides none that browsers run as JavaScript: the HTML standard's JavaScript MIME types. */
+const JAVASCRIPT_TYPES = new Set([
+  'application/ecmascript',
+  'application/javascript',
+  'application/x-ecmascript',
+  'application/x-javascript',
+  'text/ecmascript',
+  'text/javascript',
+  'text/javascript1.0',
+  'text/javascript1.1',
+  'text/javascript1.2',
+  'text/javascript1.3',
+  'text/javascript1.4',
+  'text/javascript1.5',
+  'text/jscript',
+  'text/livescript',
+  'text/x-ecmascript',
+  'text/x-javascript',
+]);
+
+/**
+ * Whether a browser runs a script with these attributes, by the HTML standard's rules, and so fires its load or error
+ * event. One that runs the client entry, a module, skips a script with `nomodule` and one whose type is neither
+ * JavaScript nor `module`, such as the `text/plain` of a script a consent manager turns on once the visitor agrees, and
+ * fires neither event for it.
+ */
+function runs(attributes: Attributes): boolean {
+  const named: Partial<Record<string, string>> = {};
+  for (const [name, value] of Object.entries(attributes)) named[name.toLowerCase()] = value === true ? '' : value;
+  const type = named.type ?? (named.language ? `text/${named.language}` : '');
+  if (type === '') return named.nomodule === undefined;
+  const essence = type.replace(/^[\t\n\f\r ]+|[\t\n\f\r ]+$/g, '').toLowerCase();
+  return essence === 'module' || (JAVASCRIPT_TYPES.has(essence) && named.nomodule === undefined);
+}
+
+/** Resolves once the script has loaded or failed. */
+function outcome(entry: Entry): Promise<void> {
+  if (entry.state !== 'loading') return Promise.resolve();
+  return new Promise((resolve) => {
+    entry.element.addEventListener('load', () => resolve(), { once: true });
+    entry.element.addEventListener('error', () => resolve(), { once: true });
+  });
+}
+
 /**
- * Like `next/script`: third-party scripts that should not block the page. Renders nothing in place; scripts are
- * added to the document once, whichever component renders them first.
+ * Takes over the `beforeInteractive` scripts the server rendered into the document, in document order, those not yet
+ * taken over. Inline code has run where it stands: it is recorded, so that a component that mounts again (after a
+ * hydration error) does not add it once more. Each external script's inert entry becomes a script at the end of the
+ * head, not async, so the browser runs them in this order as they arrive, with the page's nonce. Under a nonce, only
+ * entries with that nonce count: markup that reached the page some other way does not know it. Resolves once every
+ * external script it added has loaded or failed.
+ */
+export function adoptServerScripts(nonce: string | undefined): Promise<void> {
+  const waits: Promise<void>[] = [];
+  for (const element of document.querySelectorAll<HTMLScriptElement>(`script[${ENTRY}]`)) {
+    const key = element.getAttribute(ENTRY);
+    if (!key || added.has(key) || (nonce && element.nonce !== nonce)) continue;
+    const external = element.type === 'application/json' ? externalEntry(element.textContent) : null;
+    if (external) {
+      const entry = insert(key, { ...external, ...(nonce ? { nonce } : {}), async: false, parent: document.head });
+      if (runs(external.attributes)) waits.push(outcome(entry));
+    } else {
+      added.set(key, { element, state: 'loaded' });
+    }
+  }
+  return Promise.all(waits).then(() => undefined);
+}
+
+/**
+ * React's own rule for the text of an inline script: `</script` would close the element and `<script` would make the
+ * parser look for a second closing tag, so their `s` is written `\u0073` (or `S` as `\u0053`), which JavaScript reads as the
+ * same letter in strings, template literals, regular expressions and names.
+ */
+const SCRIPT_TAG = /(<\/|<)(s)(cript)/gi;
+const escapeScriptText = (code: string) =>
+  code.replace(SCRIPT_TAG, (_match, open: string, s: string, rest: string) => `${open}${s === 's' ? '\\u0073' : '\\u0053'}${rest}`);
+
+const subscribeToNothing = () => () => {};
+
+/** Scripts warned about already: each is warned about once. */
+const warned = new Set<string>();
+
+function warnAboutTiming(key: string, { async, defer, type }: ScriptProps) {
+  if (process.env.NODE_ENV === 'production' || warned.has(key)) return;
+  const found = [async && 'async', defer && 'defer', type === 'module' && 'type="module"'].filter(Boolean);
+  if (found.length === 0) return;
+  warned.add(key);
+  console.warn(
+    `netjes: <Script strategy="beforeInteractive"> "${key}" has ${found.join(', ')}. A beforeInteractive script runs ` +
+      "in order, before the page's code, whatever async and defer say, and type=\"module\" makes inline code wait until " +
+      'the whole document is parsed. Leave them out, or use strategy="afterInteractive".',
+  );
+}
+
+/**
+ * A script loaded by strategy, like `next/script`: `afterInteractive` and `lazyOnload` do not block the page. Scripts
+ * are added to the document once, whichever component renders them first, except inline `beforeInteractive` code, which
+ * the server writes wherever a component renders it. Only `beforeInteractive` renders anything where it stands, and
+ * only into a server-rendered document: the inline script, or an inert entry for an external one, and a marker in the
+ * head.
  */
 export function Script(given: ScriptProps) {
   const pageNonce = useNonce();
   const props = given.nonce || !pageNonce ? given : { ...given, nonce: pageNonce };
-  const { src, id, strategy = 'afterInteractive', onLoad, onError, nonce, crossOrigin, integrity } = props;
+  const { src, id, strategy = 'afterInteractive', onLoad, onError, nonce, crossOrigin, integrity, children } = props;
   const callbacks = useRef({ onLoad, onError });
   callbacks.current = { onLoad, onError };
   const key = id ?? src;
-
-  if (strategy === 'beforeInteractive' && src) {
-    preinit(src, { as: 'script', ...(nonce ? { nonce } : {}), ...(integrity ? { integrity } : {}), ...(crossOrigin ? { crossOrigin } : {}) });
-  }
+  // True on the server and while this component hydrates, and for as long as it stays mounted after that, so that it
+  // keeps the markup it hydrated. False when it mounts in the browser.
+  const fromServer = useRef(useSyncExternalStore(subscribeToNothing, () => false, () => true)).current;
+  const inDocument = strategy === 'beforeInteractive' && fromServer && key !== undefined;
 
   useEffect(() => {
-    if (!key || (strategy === 'beforeInteractive' && src)) return;
+    if (!key) return;
     let cancelled = false;
     const attach = () => {
       if (cancelled) return;
+      // An entry that streamed in after the client entry took the others over is taken over now.
+      if (inDocument && !added.has(key)) void adoptServerScripts(pageNonce);
       const entry = added.get(key) ?? add(key, props);
       const notify = () => {
         if (cancelled) return;
@@ -99,5 +263,32 @@ export function Script(given: ScriptProps) {
     // The script is identified by its key; changing other props does not add it again.
   }, [key, strategy]);
 
-  return null;
+  if (!inDocument) return null;
+  warnAboutTiming(key, props);
+  const { strategy: _strategy, onLoad: _onLoad, onError: _onError, children: _children, src: _src, id: _id, nonce: _nonce, ...rest } = props;
+  // In the head, where the client entry looks for it once it has the payload.
+  const marker = <meta name={BEFORE_INTERACTIVE_MARKER} />;
+  if (!src) {
+    // Written as it is (React would escape text children, and they would not match the server's); escaped as React
+    // escapes its own scripts, so the text cannot end the element. A hash-based policy lists the hash of that text.
+    return (
+      <>
+        {marker}
+        <script {...rest} id={id} nonce={nonce} data-netjes-script={key} dangerouslySetInnerHTML={{ __html: escapeScriptText(children ?? '') }} />
+      </>
+    );
+  }
+  // The id goes to the script the entry becomes, not to the entry.
+  const attributes = attributesOf(id ? { ...rest, id } : rest);
+  // The browser fetches it while it parses; adoptServerScripts runs it from the entry. A script the browser will not run
+  // is not fetched: a consent manager's would reach its host before the visitor agreed.
+  if (runs(attributes)) {
+    preload(src, { as: 'script', ...(nonce ? { nonce } : {}), ...(integrity ? { integrity } : {}), ...(crossOrigin !== undefined ? { crossOrigin } : {}) });
+  }
+  return (
+    <>
+      {marker}
+      <script type="application/json" nonce={nonce} data-netjes-script={key} dangerouslySetInnerHTML={{ __html: htmlSafeJson({ src, attributes }) }} />
+    </>
+  );
 }