what-server 0.12.2 → 0.12.4

package/src/index.js

@@ -5,6 +5,9 @@
 import {
   h,
   _isAriaAttr,
+  _beginComponentSSR,
+  _endComponentSSR,
+  _mapArrayToArray,
   getServerContext,
   runWithServerContext,
   beginHeadCollection,
@@ -58,6 +61,94 @@ export function renderToHydratableString(vnode) {
   return _renderHydratable(vnode);
 }
 
+// <ErrorBoundary> and <Suspense> are not elements. They return vnodes carrying
+// the internal marker tags '__errorBoundary' / '__suspense', which every client
+// path routes to a boundary handler (dom.js:349-353). The server had no such
+// routing outside renderToString's suspense case, so the marker tags fell
+// through to the generic element renderer and three things went wrong at once:
+//
+//   <ErrorBoundary>            ->  <__errorBoundary><p>ok</p></__errorBoundary>
+//   <Suspense> (hydratable)    ->  <__suspense boundary="[object Object]"
+//                                             fallback="[object Object]">...
+//
+// An invalid element name in the response, the boundary's internal props
+// stringified into attributes, and, worst of the three, a component that threw
+// during SSR took down the WHOLE page render instead of being contained:
+// renderToString and renderToHydratableString both propagated the error, so the
+// one construct whose entire purpose is to stop a subtree failure from becoming
+// a page failure did nothing on the server. The stream path did not throw but
+// emitted an HTML comment where the fallback belonged.
+//
+// A thenable is deliberately re-thrown rather than caught: that is a suspended
+// resource, not an error, and it belongs to the nearest <Suspense>.
+const BOUNDARY_TAGS = new Set(['__errorBoundary', '__suspense']);
+
+// <Portal> is client-only by the framework's own decision: Portal() returns null
+// when there is no `document` (helpers.js:153). That guard is environmental, not
+// a server check, so SSR under a DOM shim (jsdom, happy-dom, a test harness, any
+// runtime that polyfills document) sailed past it, built the vnode, and handed
+// the server a '__portal' tag it had no branch for. The result was
+//
+//   <__portal container="[object HTMLDivElement]"><p>inside</p></__portal>
+//
+// which is three wrongs at once: an invalid element, a DOM node stringified into
+// an attribute, and the portal's content emitted INLINE at the portal's own
+// position rather than at its target. Hydration would then move it, so the
+// server markup contradicted the client's on purpose.
+//
+// Rendering nothing is the answer that agrees with the no-document path, so the
+// same app produces the same HTML whether or not a shim happens to be loaded.
+const SERVER_SKIPPED_TAGS = new Set(['__portal']);
+
+// The props a component is called with. The server has to hand a component
+// exactly what the client hands it, and it did not.
+//
+// dom.js:593 collapses the children list before it becomes a prop, and when
+// there are NO children it sets no `children` key at all, so an ordinary JS
+// default parameter
+//
+//     function SkipLink({ children = 'Skip to content' }) { ... }
+//
+// applies. The server passed `children: vnode.children` verbatim, which is `[]`
+// for a childless component, and `[]` is defined, so the default NEVER applied
+// server-side. A server-rendered <SkipLink /> shipped `<a href="#main"></a>`: a
+// link with no accessible name (a WCAG 2.4.4 failure) until the client hydrated
+// and replaced it, which is exactly the case where the markup has to stand on
+// its own. The divergence is general, not specific to SkipLink: every component
+// with a defaulted children prop rendered one thing on the client and another on
+// the server. The same blanket override also discarded children passed as a
+// plain PROP (`h(Card, { children: body })`), which the client keeps precisely
+// because there are no vnode children to replace it with.
+//
+// "Childless" has to mean what it means on the client: an EMPTY list. h() drops
+// null/false/true children (h.js:48,66) but keeps '' as the string child it is,
+// so `<Comp>{''}</Comp>` has one child and the default must NOT apply there.
+// Only length 0 counts, plus a hand-built vnode carrying no children array.
+//
+// Not yet matched: the client also UNWRAPS a single child (`[child]` -> `child`).
+// Aligning that here alone would break <Island>, which puts the prop straight
+// back onto a vnode's children (islands.js:243) where the element renderer
+// requires an array. That one needs both sides changed together.
+function _componentProps(vnode) {
+  const children = vnode.children;
+  if (!children || children.length === 0) return { ...vnode.props };
+  return { ...vnode.props, children };
+}
+
+function _boundaryFallback(vnode, error) {
+  const fallback = vnode.props && vnode.props.fallback;
+  if (typeof fallback !== 'function') return fallback;
+  const reset = (vnode.props && vnode.props.reset) || (() => {});
+  try {
+    return fallback({ error, reset });
+  } catch (e) {
+    if (_isDevMode) {
+      console.warn(`[what-server] <ErrorBoundary> fallback threw during SSR: ${e.message}`);
+    }
+    return null;
+  }
+}
+
 function _renderHydratable(vnode) {
   if (vnode == null || vnode === false || vnode === true) return '';
 
@@ -71,6 +162,20 @@ function _renderHydratable(vnode) {
     return `<!--$-->${_renderHydratable(vnode())}<!--/$-->`;
   }
 
+  // Compiled keyed list: an inserter taking (parent, marker), not a thunk.
+  // Calling it with no arguments threw and SSR swallowed it, so every compiled
+  // keyed list server-rendered as an empty container. See _mapArrayToArray.
+  if (typeof vnode === 'function' && vnode._mapArray) {
+    try {
+      return `<!--$-->${_renderHydratable(_mapArrayToArray(vnode))}<!--/$-->`;
+    } catch (e) {
+      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn('[what-server] Error rendering keyed list in SSR:', e.message);
+      }
+      return '<!--$--><!--/$-->';
+    }
+  }
+
   // Reactive function child — wrap in dynamic content markers
   if (typeof vnode === 'function') {
     try {
@@ -88,11 +193,30 @@ function _renderHydratable(vnode) {
     return `<!--[]-->${vnode.map(_renderHydratable).join('')}<!--/[]-->`;
   }
 
+  if (SERVER_SKIPPED_TAGS.has(vnode.tag)) return '';
+
+  // Boundary markers render their subtree, never themselves.
+  if (BOUNDARY_TAGS.has(vnode.tag)) {
+    try {
+      return (vnode.children || []).map(_renderHydratable).join('');
+    } catch (e) {
+      const suspended = e && typeof e.then === 'function';
+      if (suspended && vnode.tag === '__errorBoundary') throw e; // belongs to <Suspense>
+      if (!suspended && vnode.tag === '__suspense') throw e;     // belongs to <ErrorBoundary>
+      return _renderHydratable(_boundaryFallback(vnode, suspended ? null : e));
+    }
+  }
+
   // Component — add hydration key to root element
   if (typeof vnode.tag === 'function') {
     const hkId = nextHydrationId();
-    const result = vnode.tag({ ...vnode.props, children: vnode.children });
-    const html = _renderHydratable(result);
+    const ctx = _beginComponentSSR(vnode.tag);
+    let html;
+    try {
+      html = _renderHydratable(vnode.tag(_componentProps(vnode)));
+    } finally {
+      _endComponentSSR(ctx);
+    }
     // Inject data-hk into the first element tag if present
     return injectHydrationKey(html, hkId);
   }
@@ -119,6 +243,19 @@ function injectHydrationKey(html, hkId) {
     const prefix = match[1];
     const tagName = match[2];
     const insertAt = prefix.length + 1 + tagName.length; // after '<tagName'
+
+    // One element, one key. Every component in a chain injects into the first
+    // element of its rendered output, and a component that returns another
+    // component (the most ordinary composition there is) resolves to the SAME
+    // element at every level, so `Outer -> Middle -> Inner -> <p>` emitted
+    // `<p data-hk="h0" data-hk="h1" data-hk="h2">`: a duplicate attribute, which
+    // is invalid HTML, and browsers silently keep only the first. The innermost
+    // component is the one that actually owns the element, and it wins because
+    // it renders first, so an existing key means there is nothing to do here.
+    const openTagEnd = html.indexOf('>', insertAt);
+    const openTag = html.slice(insertAt, openTagEnd === -1 ? undefined : openTagEnd);
+    if (/[\s"']data-hk\s*=/.test(openTag) || /^\s*data-hk\s*=/.test(openTag)) return html;
+
     return html.slice(0, insertAt) + ` data-hk="${hkId}"` + html.slice(insertAt);
   }
   return html;
@@ -146,6 +283,18 @@ export function renderToString(vnode) {
     return renderToString(vnode());
   }
 
+  // Compiled keyed list: see _renderHydratable above.
+  if (typeof vnode === 'function' && vnode._mapArray) {
+    try {
+      return renderToString(_mapArrayToArray(vnode));
+    } catch (e) {
+      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn('[what-server] Error rendering keyed list in SSR:', e.message);
+      }
+      return '';
+    }
+  }
+
   // Reactive function child — call to get value
   if (typeof vnode === 'function') {
     try {
@@ -163,24 +312,42 @@ export function renderToString(vnode) {
     return vnode.map(renderToString).join('');
   }
 
-  // Suspense boundary — render children; if a child suspends (throws a thenable),
-  // show the fallback (a synchronous render cannot await). renderToStringAsync /
-  // renderToStream await the pending resources and re-render with real content.
-  if (vnode.tag === '__suspense') {
+  if (SERVER_SKIPPED_TAGS.has(vnode.tag)) return '';
+
+  // Boundary markers render their subtree, never themselves.
+  //
+  // <Suspense>: if a child suspends (throws a thenable), show the fallback, since
+  // a synchronous render cannot await. renderToStringAsync / renderToStream await
+  // the pending resources and re-render with real content.
+  //
+  // <ErrorBoundary>: if a child throws a real error, show the fallback. Before
+  // this branch existed the error propagated out of renderToString and killed the
+  // whole page response, which is precisely the failure an ErrorBoundary exists
+  // to prevent.
+  if (BOUNDARY_TAGS.has(vnode.tag)) {
     try {
       return (vnode.children || []).map(renderToString).join('');
     } catch (e) {
-      if (e && typeof e.then === 'function') {
-        return renderToString(vnode.props && vnode.props.fallback);
-      }
-      throw e;
+      const suspended = e && typeof e.then === 'function';
+      if (suspended && vnode.tag === '__errorBoundary') throw e; // belongs to <Suspense>
+      if (!suspended && vnode.tag === '__suspense') throw e;     // belongs to <ErrorBoundary>
+      return renderToString(_boundaryFallback(vnode, suspended ? null : e));
     }
   }
 
   // Component
+  //
+  // Run it under a component context. Calling it bare left the component stack
+  // empty, so every context-dependent hook threw and the render failed outright
+  // rather than degrading. The context has to stay on the stack while the
+  // result is rendered, because useContext resolves by walking parent contexts.
   if (typeof vnode.tag === 'function') {
-    const result = vnode.tag({ ...vnode.props, children: vnode.children });
-    return renderToString(result);
+    const ctx = _beginComponentSSR(vnode.tag);
+    try {
+      return renderToString(vnode.tag(_componentProps(vnode)));
+    } finally {
+      _endComponentSSR(ctx);
+    }
   }
 
   // Element
@@ -315,6 +482,20 @@ export async function* renderToStream(vnode, ctx) {
     return;
   }
 
+  // Compiled keyed list: see _renderHydratable above.
+  if (typeof vnode === 'function' && vnode._mapArray) {
+    let rows = null;
+    try {
+      rows = runWithServerContext(ctx, () => _mapArrayToArray(vnode));
+    } catch (e) {
+      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn('[what-server] Error rendering keyed list in stream SSR:', e.message);
+      }
+    }
+    if (rows) yield* renderToStream(rows, ctx);
+    return;
+  }
+
   // Reactive function child — call to get value
   if (typeof vnode === 'function') {
     try {
@@ -335,6 +516,24 @@ export async function* renderToStream(vnode, ctx) {
     return;
   }
 
+  if (SERVER_SKIPPED_TAGS.has(vnode.tag)) return;
+
+  // Error boundary: render the subtree, and on a real error emit the fallback
+  // rather than the generic component-error comment the catch below would
+  // produce. Rendered eagerly into a string instead of streamed, because a
+  // boundary that has already yielded half its subtree cannot take it back.
+  if (vnode.tag === '__errorBoundary') {
+    let html;
+    try {
+      html = runWithServerContext(ctx, () => (vnode.children || []).map(renderToString).join(''));
+    } catch (e) {
+      if (e && typeof e.then === 'function') throw e; // suspended; belongs to <Suspense>
+      html = runWithServerContext(ctx, () => renderToString(_boundaryFallback(vnode, e)));
+    }
+    yield html;
+    return;
+  }
+
   // Suspense boundary — render the subtree, awaiting any suspended resources,
   // then emit the resolved content. (In-order; out-of-order swap is a future
   // enhancement.) The synchronous render runs inside the threaded ctx.
@@ -361,10 +560,14 @@ export async function* renderToStream(vnode, ctx) {
   }
 
   if (typeof vnode.tag === 'function') {
+    // The frame stays open across the yields below: useContext resolves by
+    // walking parent contexts, so a Provider's context has to outlive the
+    // streaming of its own subtree.
+    const componentCtx = _beginComponentSSR(vnode.tag);
     try {
       const result = runWithServerContext(
         ctx,
-        () => vnode.tag({ ...vnode.props, children: vnode.children })
+        () => vnode.tag(_componentProps(vnode))
       );
       // Support async components
       const resolved = result instanceof Promise ? await result : result;
@@ -376,6 +579,8 @@ export async function* renderToStream(vnode, ctx) {
       yield _isDevMode
         ? `<!-- SSR Error: ${escapeHtml(e.message || 'Component error')} -->`
         : `<!-- SSR Error -->`;
+    } finally {
+      _endComponentSSR(componentCtx);
     }
     return;
   }
@@ -414,10 +619,19 @@ export function definePage(config) {
 // Generate static HTML for a page
 export function generateStaticPage(page, data = {}) {
   const ctx = createRenderContext(data);
-  const html = runWithServerContext(ctx, () => {
-    const vnode = page.component(data);
-    return renderToString(vnode);
-  });
+  // Render the page as a vnode instead of calling the component and handing the
+  // result over. `page.component(data)` ran BARE, outside the component frame
+  // renderToString establishes, so nothing was on the component stack and every
+  // context-dependent hook threw: useState, useSignal, useEffect, useMemo,
+  // useRef, onMount and <Ctx.Provider> all resolve through
+  // getCurrentComponent(). One hook anywhere in the page component's own body
+  // meant THE documented static-generation entry point could not render it at
+  // all, which rules out most real pages.
+  //
+  // `data` still reaches the component as its props (the same convention
+  // renderPage uses), and the body HTML this produces is byte-identical for a
+  // page that does not use hooks, so what wrapDocument receives is unchanged.
+  const html = runWithServerContext(ctx, () => renderToString(h(page.component, data)));
   const islands = page.islands || [];
 
   return wrapDocument({
@@ -539,10 +753,40 @@ function assertSafeTag(tag) {
 
 function renderAttrs(props) {
   let out = '';
-  for (const [key, val] of Object.entries(props)) {
+  for (const [key, rawVal] of Object.entries(props)) {
     if (key === 'key' || key === 'ref' || key === 'children' || key === 'dangerouslySetInnerHTML' || key === 'innerHTML') continue;
     const lowerKey = key.toLowerCase();
     if (lowerKey.startsWith('on') && key.length > 2) continue; // Skip event handlers in SSR
+
+    // A remaining function value is a reactive accessor, so CALL it. Every
+    // client path already does (setProp and setAttr both resolve a function
+    // value); only the server did not, and fell through to String(val), which
+    // stringifies a function as its SOURCE TEXT. So the documented way to make
+    // an attribute reactive,
+    //
+    //     <span className={() => theme()}>
+    //
+    // server-rendered as class="() =&gt; theme()": the page shipped JavaScript
+    // source in its class attribute, lost the real class until hydration
+    // replaced it, and any CSS keyed on that class did not apply to the HTML a
+    // crawler or a no-JS visitor saw. what-router's <Link> hit it on every
+    // link, because Link always passes a thunk as `class`.
+    //
+    // Fail soft on a throw, matching the rest of this function: one attribute
+    // that cannot resolve must not take down the whole response.
+    let val = rawVal;
+    if (typeof val === 'function') {
+      try {
+        val = val();
+      } catch (e) {
+        if (_isDevMode) {
+          console.warn(`[what-server] Skipping attribute ${JSON.stringify(key)}: its value threw during SSR: ${e.message}`);
+        }
+        continue;
+      }
+      // A resolved value that is itself a function is not an attribute value.
+      if (typeof val === 'function') continue;
+    }
     // aria-*/role are enumerated, so `false` is a real value and must survive:
     // an absent `aria-expanded` means "unsupported", `aria-expanded="false"`
     // means "collapsed". Every other attribute keeps HTML boolean semantics,

package/src/islands.js

@@ -473,54 +473,180 @@ export function enhance(selector, handler) {
   }
 }
 
-// Form enhancement: submit via fetch instead of page reload
+/**
+ * Recover the double-submit CSRF token for a form.
+ *
+ * The meta tag alone is not enough. A cached page (mode 'static' or 'hybrid') is
+ * shared between visitors, so the adapter deliberately does NOT embed a
+ * per-visitor token in it; the token lives only in the cookie. A form inside
+ * such a page therefore has no meta tag to read, and blocking on that alone
+ * refused perfectly valid submissions. `<Form>` also emits the token as a hidden
+ * field, which is the same value, so all three sources are checked.
+ */
+function readFormCsrfToken(form) {
+  const meta = document.querySelector('meta[name="csrf-token"]')
+    || document.querySelector('meta[name="what-csrf-token"]');
+  if (meta) return meta.getAttribute('content');
+
+  const field = form.querySelector('input[name="what-csrf-token"], input[name="_csrf"]');
+  if (field && field.value) return field.value;
+
+  const cookie = document.cookie.match(/(?:^|;\s*)what-csrf=([^;]+)/);
+  return cookie ? decodeURIComponent(cookie[1]) : null;
+}
+
+/**
+ * Serialize a form the way the browser would, so an enhanced submit and a plain
+ * one are indistinguishable to the server.
+ *
+ * Two details that look pedantic and are not:
+ *   - newlines in every text entry normalize to CRLF. The urlencoded and
+ *     multipart serializers both do this per spec; URLSearchParams does not, so
+ *     a <textarea> round-tripped different bytes with JS on than with JS off.
+ *   - a File under a non-multipart encoding contributes only its NAME, which is
+ *     what a native submit sends. Sending "[object File]" would be worse than
+ *     useless, and silently sending nothing hides a real mistake.
+ */
+function formEntries(form, submitter, multipart) {
+  const data = new FormData(form);
+
+  // FormData(form) never includes the submit button, so a multi-button form
+  // could not tell the server which button was pressed. Native submits include
+  // the submitter's name/value.
+  if (submitter && submitter.name) {
+    data.append(submitter.name, submitter.value ?? '');
+  }
+
+  if (multipart) return data;
+
+  const params = new URLSearchParams();
+  let droppedFile = null;
+  for (const [key, value] of data) {
+    if (typeof value === 'string') {
+      params.append(key, value.replace(/\r\n|\r|\n/g, '\r\n'));
+    } else {
+      droppedFile = droppedFile || key;
+      params.append(key, value.name ?? '');
+    }
+  }
+
+  if (droppedFile && typeof console !== 'undefined') {
+    console.warn(
+      `[what] Form field "${droppedFile}" holds a file, but the form is not ` +
+      'enctype="multipart/form-data", so only the file NAME is sent. This is what ' +
+      'a plain HTML submit does too. Add enctype="multipart/form-data" to upload ' +
+      'the bytes.'
+    );
+  }
+  return params;
+}
+
+/**
+ * Form enhancement: submit via fetch instead of a full page load.
+ *
+ * The encoding is not a detail. `/__what_action` parses
+ * application/x-www-form-urlencoded or JSON, never multipart, so an enhanced
+ * submit of a default form has to use the same encoding as the plain HTML submit
+ * it replaces. Posting a FormData object unconditionally produced a multipart
+ * body the endpoint could not parse: the action id went missing and every
+ * enhanced `<Form>` failed with 400 while the no-JS path kept working.
+ *
+ * The encoding now follows the form's own `enctype`, exactly as the browser
+ * would, so a form that declares multipart still uploads its files.
+ *
+ * On success the action endpoint answers 303 to the form's `_redirect` target,
+ * which fetch follows. The page is then navigated there so the enhanced path
+ * lands where the unenhanced one would. Cancel the `form:response` event to keep
+ * the page put and handle the response yourself.
+ */
 export function enhanceForms(selector = 'form[data-enhance]') {
   enhance(selector, (form) => {
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-
-      const formData = new FormData(form);
-      const method = form.method.toUpperCase() || 'POST';
-      const action = form.action || location.href;
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
 
       try {
-        // Read CSRF token from meta tag
-        const csrfMeta = document.querySelector('meta[name="csrf-token"]') ||
-                         document.querySelector('meta[name="what-csrf-token"]');
-        const csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : null;
-
-        // If no CSRF token and form hasn't opted out, block submission
-        const noCsrf = form.getAttribute('data-no-csrf') === 'true';
-        if (!csrfToken && !noCsrf) {
-          console.warn(
-            '[what] Form submission blocked: no CSRF token found. ' +
-            'Add a <meta name="what-csrf-token"> tag (csrfMetaTag() emits it) ' +
-            'or set data-no-csrf="true" on the form to opt out.'
-          );
-          form.dispatchEvent(new CustomEvent('form:error', {
-            bubbles: true,
-            detail: { error: new Error('Missing CSRF token') },
-          }));
-          return;
+        // getAttribute, never the properties. HTMLFormElement is
+        // [LegacyOverrideBuiltIns]: a field named "method" or "action" SHADOWS
+        // form.method / form.action with the input element itself. Reading
+        // `form.method.toUpperCase()` then threw a TypeError after
+        // preventDefault() had already run, so the submit produced no fetch, no
+        // form:error, and no native fallback. It just did nothing.
+        const submitter = event.submitter || null;
+        const attr = (name) => (submitter && submitter.getAttribute(`form${name}`))
+          || form.getAttribute(name);
+
+        const method = (attr('method') || 'get').toUpperCase();
+        const action = new URL(attr('action') || location.href, location.href);
+        const enctype = (attr('enctype') || '').toLowerCase();
+        const multipart = enctype === 'multipart/form-data';
+
+        const entries = formEntries(form, submitter, multipart);
+
+        // CSRF is about protecting OUR endpoint. A form aimed at another origin
+        // must neither be blocked by our token policy nor be handed our token:
+        // attaching it would export the visitor's double-submit secret to a
+        // third party.
+        const sameOrigin = action.origin === location.origin;
+        const headers = { 'X-Requested-With': 'XMLHttpRequest' };
+
+        if (sameOrigin) {
+          const csrfToken = readFormCsrfToken(form);
+          const noCsrf = form.getAttribute('data-no-csrf') === 'true';
+          if (!csrfToken && !noCsrf) {
+            console.warn(
+              '[what] Form submission blocked: no CSRF token found. ' +
+              'Add a <meta name="what-csrf-token"> tag (csrfMetaTag() emits it) ' +
+              'or set data-no-csrf="true" on the form to opt out.'
+            );
+            form.dispatchEvent(new CustomEvent('form:error', {
+              bubbles: true,
+              detail: { error: new Error('Missing CSRF token') },
+            }));
+            return;
+          }
+          if (csrfToken) headers['X-CSRF-Token'] = csrfToken;
         }
 
-        const headers = {
-          'X-Requested-With': 'XMLHttpRequest',
-        };
-        if (csrfToken) {
-          headers['X-CSRF-Token'] = csrfToken;
+        let body;
+        if (method === 'GET') {
+          // A native GET submit REPLACES the query string with the form data.
+          // The previous code built the params and then threw them away, so an
+          // enhanced GET form fetched a bare URL with none of its fields.
+          action.search = String(entries);
+        } else if (multipart) {
+          // Hand FormData straight to fetch so the browser writes the boundary.
+          body = entries;
+        } else {
+          body = entries;
+          headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
         }
 
-        const response = await fetch(action, {
+        const response = await fetch(action.href, {
           method,
-          body: method === 'GET' ? undefined : formData,
+          body,
           headers,
+          credentials: 'same-origin',
         });
 
-        form.dispatchEvent(new CustomEvent('form:response', {
+        const responseEvent = new CustomEvent('form:response', {
           bubbles: true,
-          detail: { response, ok: response.ok },
-        }));
+          cancelable: true,
+          detail: { response, ok: response.ok, redirected: response.redirected },
+        });
+        const proceed = form.dispatchEvent(responseEvent);
+
+        // Same-origin only. A native submit would follow an off-site redirect,
+        // but a framework default that can navigate the page to another origin
+        // on a server's say-so is not a default worth having. Listen for
+        // form:response if you need that.
+        if (proceed && response.ok && response.redirected) {
+          let target = null;
+          try {
+            const url = new URL(response.url, location.href);
+            if (url.origin === location.origin) target = url.href;
+          } catch { /* unparseable: do not navigate */ }
+          if (target) location.assign(target);
+        }
       } catch (error) {
         form.dispatchEvent(new CustomEvent('form:error', {
           bubbles: true,