ruact 0.0.15 → 0.0.17

data/vendor/javascript/vite-plugin-ruact/package.json

@@ -5,11 +5,15 @@
   "type": "module",
   "main": "index.js",
   "scripts": {
-    "test": "vitest run",
+    "test": "vitest run && FLIGHT_CLIENT_MODE=production vitest run flight-conformance",
+    "test:react-floor": "npm install --no-save --no-audit --no-fund react@19.2.8 react-dom@19.2.8 && vitest run flight-conformance && FLIGHT_CLIENT_MODE=production vitest run flight-conformance",
+    "vendor:flight-client": "node scripts/vendor-flight-client.mjs",
     "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.scaffold.json && tsc --noEmit -p tsconfig.scaffold-agnostic.json"
   },
   "devDependencies": {
+    "jsdom": "^25.0.1",
     "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^5.5.0",
     "vitest": "^2.0.0"
   },

data/vendor/javascript/vite-plugin-ruact/ruact-router.test.mjs

@@ -481,6 +481,59 @@ describe("ruact-router — long text in a streamed navigation (Story 17-0d)", ()
   });
 });
 
+// Story 18-1 review round 3 — a connection that drops after the page is on
+// screen is reported once (by the Suspense boundary that is missing its row),
+// not again by the router; revalidate() still rejects.
+describe("ruact-router — a response cut after the page is on screen (Story 18-1)", () => {
+  const FIXTURES = path.join(import.meta.dirname, "../../../spec/fixtures/flight");
+  let dom;
+  let onNavigate;
+  let onError;
+
+  beforeEach(() => {
+    dom = installDom();
+    onNavigate = vi.fn();
+    onError = vi.fn();
+    globalThis.fetch = vi.fn();
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    setupRouter({ onNavigate, moduleRegistry: {}, onError });
+  });
+
+  afterEach(() => {
+    teardownRouter();
+    vi.restoreAllMocks();
+  });
+
+  const cutResponse = () => {
+    const head = fs.readFileSync(path.join(FIXTURES, "conformance_suspense_timeout.txt"), "utf8")
+      .replace(/^1:E.*\n?/m, "");
+    const body = new ReadableStream({
+      start(controller) {
+        controller.enqueue(new TextEncoder().encode(head));
+        setTimeout(() => controller.error(new TypeError("Failed to fetch")), 5);
+      },
+    });
+    const headers = new Headers({ "content-type": "text/x-component" });
+    return { ok: true, status: 200, statusText: "200", url: `${ORIGIN}/posts`, headers, body };
+  };
+
+  it("renders the page and leaves the report to the Suspense boundary", async () => {
+    fetch.mockResolvedValue(cutResponse());
+    click(dom.listeners, "/posts");
+    await settle();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("still rejects revalidate()", async () => {
+    fetch.mockResolvedValue(cutResponse());
+    await expect(globalThis.__ruact_revalidate("/posts")).rejects.toThrow(/Failed to fetch/);
+    expect(onError).not.toHaveBeenCalled();
+  });
+});
+
 // Story 17-0c — a navigation decodes dates and big integers like the first load.
 describe("ruact-router — dates and big integers in a navigation (Story 17-0c)", () => {
   const FIXTURES = path.join(import.meta.dirname, "../../../spec/fixtures/flight");

data/vendor/javascript/vite-plugin-ruact/runtime/bootstrap.jsx

@@ -5,8 +5,8 @@
 //
 // IMPORTANT — this file is loaded as VIRTUAL-MODULE TEXT, not from disk, so its
 // resolved id is `\0virtual:ruact/bootstrap`, which is NOT a filesystem path:
-//   • Relative imports (`./flight-client.js`) do NOT resolve from a `\0virtual:`
-//     id. The plugin's `load` hook rewrites the two runtime imports below to
+//   • Relative imports (`./ruact-router.js`) do NOT resolve from a `\0virtual:`
+//     id. The plugin's `load` hook rewrites the runtime imports below to
 //     ABSOLUTE fs specifiers into the gem `runtime/` dir before serving them
 //     (see `generateBootstrapSource` in index.js).
 //   • Bare specifiers (`react`, `react-dom/client`) and the `virtual:` id DO
@@ -18,7 +18,14 @@
 //     transforming a `\0virtual:` id.
 import { createRoot } from 'react-dom/client';
 import { createElement, useState, useEffect } from 'react';
-import { createFromFlightPayload } from './flight-client.js';
+// Story 18-1 — React's own Flight client: the copy vendored in the gem, or the
+// app's `react-server-dom-webpack` when installed (the plugin decides).
+import { createFromReadableStream } from 'virtual:ruact/flight-client';
+import { setModuleRegistry } from './flight-modules.js';
+// Registers the boundary the server wraps each Suspense child in.
+import './suspense-boundary.js';
+import { RootBoundary, onCaughtError } from './root-boundary.js';
+import { labelledStream } from './transport.js';
 import { setupRouter, teardownRouter } from './ruact-router.js';
 
 // MODULE_REGISTRY maps react-client-manifest "id" values to component exports.
@@ -29,11 +36,19 @@ import { setupRouter, teardownRouter } from './ruact-router.js';
 // app/javascript/components/ or drop its "use client" directive.)
 import MODULE_REGISTRY from 'virtual:ruact/registry';
 
+setModuleRegistry(MODULE_REGISTRY);
+
 // ---------------------------------------------------------------------------
 // Boot
 // ---------------------------------------------------------------------------
 const flightData = globalThis.__FLIGHT_DATA;
 
+function showBootError(err) {
+  console.error('[ruact] Failed to parse Flight payload:', err);
+  const root = document.getElementById('root');
+  if (root) root.textContent = '[ruact] Error: ' + err.message;
+}
+
 if (!flightData || flightData.length === 0) {
   // Non-RSC page or Rails server not running — skip hydration.
   const root = document.getElementById('root');
@@ -41,28 +56,42 @@ if (!flightData || flightData.length === 0) {
     root.textContent = '[ruact] No Flight data found — is the Rails server running?';
   }
 } else {
-  const payload = flightData.join('');
+  // The inline payload, as the stream the client reads. The root is mounted
+  // once the tree resolves, so the first paint is the page, not a fallback.
+  const bytes = new TextEncoder().encode(flightData.join(''));
+  const stream = new ReadableStream({
+    start(controller) {
+      controller.enqueue(bytes);
+      controller.close();
+    },
+  });
 
   let initialTree;
   try {
-    initialTree = createFromFlightPayload(payload, MODULE_REGISTRY);
+    initialTree = createFromReadableStream(labelledStream(stream));
   } catch (err) {
-    console.error('[ruact] Failed to parse Flight payload:', err);
-    const root = document.getElementById('root');
-    if (root) root.textContent = '[ruact] Error: ' + err.message;
+    showBootError(err);
     throw err;
   }
 
-  function App() {
-    const [tree, setTree] = useState(() => initialTree);
+  initialTree.then(
+    (tree) => {
+      function App() {
+        const [current, setCurrent] = useState(() => tree);
 
-    useEffect(() => {
-      setupRouter({ onNavigate: setTree, moduleRegistry: MODULE_REGISTRY });
-      return () => teardownRouter();
-    }, []);
+        useEffect(() => {
+          setupRouter({ onNavigate: setCurrent });
+          return () => teardownRouter();
+        }, []);
 
-    return tree;
-  }
+        // A render error shows in place of the page instead of removing it.
+        return createElement(RootBoundary, { tree: current }, current);
+      }
 
-  createRoot(document.getElementById('root')).render(createElement(App));
+      createRoot(document.getElementById('root'), { onCaughtError }).render(createElement(App));
+    },
+    (err) => {
+      showBootError(err);
+    },
+  );
 }

data/vendor/javascript/vite-plugin-ruact/runtime/flight-modules.js

@@ -0,0 +1,40 @@
+// Story 18-1 — how React's Flight client finds ruact's client components.
+//
+// The client asks for a module by the id in an import row (`I` row) and, under
+// webpack, would load that module's chunks first. ruact registers every client
+// component eagerly (`virtual:ruact/registry`, generated from the same scan as
+// the manifest), so there is nothing to load: the server sends `chunks: []`
+// and the lookup is a map read.
+//
+// The vendored client (./vendor/react-server-dom-webpack/) calls these
+// directly. An app that installs `react-server-dom-webpack` itself gets that
+// client instead, which reads webpack's globals — ./flight-webpack-globals.js
+// defines them over the same functions.
+
+let registry = Object.create(null);
+
+// The runtime's own client components, always present: the boundary the server
+// wraps each Suspense child in (Flight::Serializer#serialize_suspense).
+const BUILTINS = Object.create(null);
+
+export function registerBuiltin(id, moduleExports) {
+  BUILTINS[id] = moduleExports;
+}
+
+export function setModuleRegistry(moduleRegistry) {
+  registry = moduleRegistry ?? Object.create(null);
+}
+
+export function requireModule(id) {
+  const mod = BUILTINS[id] ?? registry[id];
+  if (!mod) {
+    throw new Error(
+      `client component not registered: ${id} — is it under app/javascript/components/ with "use client" at the top?`,
+    );
+  }
+  return mod;
+}
+
+export function loadChunk() {
+  return Promise.resolve();
+}

data/vendor/javascript/vite-plugin-ruact/runtime/flight-webpack-globals.js

@@ -0,0 +1,15 @@
+// Story 18-1 — only when the app installs `react-server-dom-webpack` itself.
+//
+// That copy of React's Flight client reads `__webpack_require__` and
+// `__webpack_chunk_load__` as globals, and assigns `__webpack_require__.u`
+// while it evaluates — so this module must run before it (the
+// `virtual:ruact/flight-client` module imports it first). The vendored client
+// needs none of this: its copies are module-local.
+import { requireModule, loadChunk } from "./flight-modules.js";
+
+if (typeof globalThis.__webpack_require__ !== "function") {
+  globalThis.__webpack_require__ = (id) => requireModule(id);
+}
+if (typeof globalThis.__webpack_chunk_load__ !== "function") {
+  globalThis.__webpack_chunk_load__ = (chunkId) => loadChunk(chunkId);
+}

data/vendor/javascript/vite-plugin-ruact/runtime/root-boundary.js

@@ -0,0 +1,41 @@
+// Story 18-1 — what the page shows when rendering the tree throws.
+//
+// React's Flight client looks a client component up when React renders it, so
+// a component missing from the registry (no "use client", a stale build) throws
+// during render. With nothing to catch it, React 19 removes the whole page. The
+// old decoder failed while parsing, and the bootstrap printed the error in
+// #root; this keeps that: the error, visibly, in place of the page. The next
+// navigation brings a new tree and clears it.
+import { Component, createElement } from "react";
+import { isAbort, SuspenseBoundary } from "./suspense-boundary.js";
+
+export class RootBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, tree: props.tree };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.tree === state.tree) return null;
+    return { error: null, tree: props.tree };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    return createElement("div", { role: "alert", "data-ruact-error": "" }, `[ruact] Error: ${error.message}`);
+  }
+}
+
+// createRoot's onCaughtError, for every boundary on the page. The Suspense
+// boundary reports what it catches itself (to the router's onError), and a
+// superseded navigation's AbortError is not an error; everything else is
+// logged as React would, with its component stack.
+export function onCaughtError(error, errorInfo) {
+  if (isAbort(error) || errorInfo?.errorBoundary instanceof SuspenseBoundary) return;
+  console.error(error, errorInfo?.componentStack ?? "");
+}

data/vendor/javascript/vite-plugin-ruact/runtime/ruact-router.js

@@ -2,39 +2,47 @@
  * RSC client-side router.
  *
  * Intercepts same-origin <a> clicks and <form> submits, fetches the Flight
- * payload for the new URL via ReadableStream (incremental), and:
+ * payload for the new URL, decodes it with React's Flight client (Story 18-1),
+ * and:
  *   1. Calls onNavigate(tree) as soon as row 0 arrives (shows Suspense fallback)
- *   2. Resolves deferred Suspense rows as they stream in (swaps in actual content)
+ *   2. Lets the client resolve deferred Suspense rows as they stream in
  *
  * Also handles popstate for browser back/forward.
  */
 
-import {
-  createRowParser,
-  buildTreeFromRows,
-  buildTree,
-  resolvePendingChunk,
-  clearPendingChunks,
-} from "./flight-client.js";
+import { createFromReadableStream } from "virtual:ruact/flight-client";
+import { setBoundaryErrorHandler } from "./suspense-boundary.js";
+import { labelledStream } from "./transport.js";
+
+// Errors already reported once (by a Suspense boundary) that navigate() must
+// not report again on their way out to a revalidate() caller.
+const _alreadyReported = new WeakSet();
 
 let _onNavigate     = null;
-let _moduleRegistry = null;
 let _onError        = null;
 let _currentAbort   = null;
 
 /**
  * @param {object}   opts
  * @param {function} opts.onNavigate     - called with the new React element tree
- * @param {object}   opts.moduleRegistry - passed through to flight-client
- * @param {function} [opts.onError]      - called with an Error when navigation fails
+ * @param {function} [opts.onError]      - called with an Error when navigation fails,
+ *                                         or when a Suspense child's row is an error
  */
-export function setupRouter({ onNavigate, moduleRegistry, onError = null }) {
+export function setupRouter({ onNavigate, onError = null }) {
   _onNavigate     = onNavigate;
-  _moduleRegistry = moduleRegistry;
   _onError        = onError;
-
-  document.addEventListener("click",  handleClick,  { capture: true });
-  document.addEventListener("submit", handleSubmit, { capture: true });
+  setBoundaryErrorHandler((error) => {
+    console.error(error.message);
+    _onError?.(error);
+  });
+
+  // Bubble phase, on the document: the app's own handlers (React's, which
+  // listen on the root container, and any other) run first, so an
+  // `onSubmit`/`onClick` that calls preventDefault() keeps the event. In the
+  // capture phase the router decided before them: a React form that handles
+  // its own submit (the scaffold's) also got a router fetch of its URL.
+  document.addEventListener("click",  handleClick);
+  document.addEventListener("submit", handleSubmit);
   window.addEventListener("popstate", handlePopstate);
 
   // Story 8.2 — publish the revalidate handle the runtime helper reads.
@@ -56,13 +64,13 @@ export function setupRouter({ onNavigate, moduleRegistry, onError = null }) {
 }
 
 export function teardownRouter() {
-  document.removeEventListener("click",  handleClick,  { capture: true });
-  document.removeEventListener("submit", handleSubmit, { capture: true });
+  document.removeEventListener("click",  handleClick);
+  document.removeEventListener("submit", handleSubmit);
   window.removeEventListener("popstate", handlePopstate);
   _onNavigate     = null;
-  _moduleRegistry = null;
   _onError        = null;
   _currentAbort   = null;
+  setBoundaryErrorHandler(null);
   // Story 8.2 — tear down the revalidate handle so a subsequent
   // setupRouter()-less code path (e.g., SSR) fails LOUDLY at the first
   // revalidate() call instead of using a stale handle.
@@ -371,8 +379,6 @@ function _hasField(form, name) {
 }
 
 async function _submitForm(form, submitter = null) {
-  clearPendingChunks();
-
   // R11: resolve the effective action and method from the submitter's
   // overrides before falling back to the form's attributes. The
   // previous implementation always read `form.action` and the form's
@@ -423,7 +429,9 @@ async function _submitForm(form, submitter = null) {
       else _nativeSubmit(form, submitter);
       return;
     }
-    await _processFlightResponse(response, { push: true, targetUrl: action, method: htmlMethod });
+    await _processFlightResponse(response, {
+      push: true, targetUrl: action, method: htmlMethod, signal: controller.signal,
+    });
   } catch (err) {
     if (err.name === "AbortError") return;
     console.error("[ruact-router] Form submission error:", err);
@@ -455,9 +463,6 @@ function handlePopstate() {
  * branch on success vs. failure of a programmatic refetch.
  */
 async function navigate(url, { push = true, scroll = true, throwOnError = false, replace = false } = {}) {
-  // Clear stale lazy refs from any previous streaming navigation
-  clearPendingChunks();
-
   // Abort any in-flight fetch so we don't apply a stale response
   _currentAbort?.abort();
   const controller = (_currentAbort = new AbortController());
@@ -482,12 +487,17 @@ async function navigate(url, { push = true, scroll = true, throwOnError = false,
       scroll,
       throwOnError,
       replace,
+      signal: controller.signal,
     });
   } catch (err) {
     if (err.name === "AbortError") {
       if (throwOnError) throw err;
       return;
     }
+    if (_alreadyReported.has(err)) {
+      if (throwOnError) throw err;
+      return;
+    }
     console.error("[ruact-router] Navigation error:", err);
     _onError?.(err);
     if (throwOnError) throw err;
@@ -499,7 +509,7 @@ async function navigate(url, { push = true, scroll = true, throwOnError = false,
 // ---------------------------------------------------------------------------
 
 async function _processFlightResponse(response, {
-  push, targetUrl, scroll = true, throwOnError = false, replace = false, method = "GET",
+  push, targetUrl, scroll = true, throwOnError = false, replace = false, method = "GET", signal = null,
 }) {
   // Story 17.0f — a response that is not Flight escaped the server's boundary
   // classifier. Feeding it to the line parser was the old dead click: every HTML
@@ -560,68 +570,45 @@ async function _processFlightResponse(response, {
     ? (() => { const u = new URL(response.url); return u.pathname + u.search + u.hash; })()
     : targetUrl;
 
-  const rows           = new Map();
-  let   initialTreeSet = false;
-  let   redirected     = false;
-
-  const processRow = (parsed) => {
-    rows.set(parsed.id, parsed.row);
-    // A text row is data a model row points at; nothing renders on its own.
-    if (parsed.row.kind === "text") return;
-
-    if (!initialTreeSet && rows.has(0)) {
-      const rootRow = rows.get(0);
-      // Flight redirect instruction — delegate to navigate() and bail out.
-      if (rootRow.kind === "model" && rootRow.value != null && rootRow.value.redirectUrl) {
-        // Validate redirect is same-origin before following
-        try {
-          const rurl = new URL(rootRow.value.redirectUrl, location.href);
-          if (rurl.origin !== location.origin) return;
-        } catch { return; }
-        redirected = true;
-        navigate(rootRow.value.redirectUrl, { push: rootRow.value.redirectType !== "replace" });
-        return;
-      }
-      // Normal case: build tree and render immediately.
-      const tree = buildTreeFromRows(rows, _moduleRegistry);
-      if (pushEntry) history.pushState(null, "", finalPath);
-      _onNavigate(tree);
-      if (scroll) window.scrollTo(0, 0);
-      initialTreeSet = true;
-      return;
-    }
-
-    if (initialTreeSet && parsed.id !== 0) {
-      if (parsed.row.kind === "error") {
-        // Deferred error row — propagate via onError callback
-        _onError?.(new Error(`[ruact] Server error: ${parsed.row.message}`));
-        return;
-      }
-      if (parsed.row.kind === "model") {
-        // Deferred content row — resolve pending lazy chunk.
-        const element = buildTree(parsed.row.value, rows, _moduleRegistry);
-        resolvePendingChunk(parsed.id, element);
-      }
-    }
-  };
+  // Two readers of one body: React's client, and a drain that settles when the
+  // last row is in — `revalidate()` resolves then, as it always has.
+  const [forClient, forEnd] = response.body.tee();
+  const streamEnd = _drain(forEnd);
+  streamEnd.catch(() => {}); // awaited below; an abort must not be "unhandled" first
+
+  // Resolves when row 0 arrives; deferred Suspense rows keep streaming into it.
+  // A stream that ends without a root rejects (runtime/transport.js labels it).
+  const root = await createFromReadableStream(labelledStream(forClient));
+
+  // A newer navigation started while this one was in flight: it owns the page.
+  if (signal?.aborted) return;
+
+  // Flight redirect instruction — delegate to navigate() and bail out.
+  if (root != null && typeof root === "object" && root.redirectUrl) {
+    // Validate redirect is same-origin before following
+    try {
+      const rurl = new URL(root.redirectUrl, location.href);
+      if (rurl.origin !== location.origin) return;
+    } catch { return; }
+    navigate(root.redirectUrl, { push: root.redirectType !== "replace" });
+    return;
+  }
 
-  // The same byte parser the initial load uses: text rows are framed by byte
-  // length, so the stream is never decoded line by line.
-  const parser = createRowParser(processRow);
-  const reader = response.body.getReader();
+  if (pushEntry) history.pushState(null, "", finalPath);
+  _onNavigate(root);
+  if (scroll) window.scrollTo(0, 0);
 
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    parser.push(value);
-  }
-  parser.end();
-
-  // Fallback: if row 0 never triggered (shouldn't happen with valid server)
-  if (!initialTreeSet && !redirected && rows.has(0)) {
-    const tree = buildTreeFromRows(rows, _moduleRegistry);
-    if (pushEntry) history.pushState(null, "", finalPath);
-    _onNavigate(tree);
-    if (scroll) window.scrollTo(0, 0);
+  try {
+    await streamEnd;
+  } catch (err) {
+    // The page is on screen. A row that never arrived was reported by its
+    // Suspense boundary; a revalidate() caller still learns it failed.
+    if (err?.name !== "AbortError") _alreadyReported.add(err);
+    throw err;
   }
 }
+
+async function _drain(stream) {
+  const reader = stream.getReader();
+  while (!(await reader.read()).done) { /* the client has its own copy */ }
+}

data/vendor/javascript/vite-plugin-ruact/runtime/suspense-boundary.js

@@ -0,0 +1,83 @@
+// Story 18-1 — the runtime's own client component around every Suspense child.
+//
+// The server wraps the deferred child of each <Suspense> in this boundary
+// (Flight::Serializer#serialize_suspense, import id `ruact:boundary`). When the
+// child's row is an error — a Suspense that ran past `suspense_timeout` — React's
+// Flight client throws it during render; without a boundary React 19 unmounts
+// the whole root. Here the fallback stays on screen and the error goes to the
+// router's `onError`, as it did before the official client.
+//
+// It catches only what the transport produced: an error row (React's client
+// gives those a `digest`), a stream cut short (labelled by ./transport.js), a
+// navigation that was superseded. A crash in the app's own components passes through to the app's
+// error boundaries, or to the root's.
+import { Component } from "react";
+import { registerBuiltin } from "./flight-modules.js";
+
+const defaultReport = (error) => console.error(error);
+let reportError = defaultReport;
+
+/** The router points this at its `onError`. */
+export function setBoundaryErrorHandler(handler) {
+  reportError = handler ?? defaultReport;
+}
+
+// What the server writes in an error row's `digest`, which React's production
+// client keeps (it drops the message). Mirrors Ruact::Flight::RowEmitter.
+// runtime/transport.js labels a response cut short the same way.
+const DIGEST_MESSAGES = {
+  "ruact:suspense-timeout": "Suspense timeout exceeded",
+  "ruact:connection-closed": "the response ended before the whole page arrived",
+};
+
+/** A superseded navigation aborts its stream: not something to report. */
+export function isAbort(error) {
+  return error?.name === "AbortError";
+}
+
+// An error row (React's client gives it a `digest`), a response cut short
+// (runtime/transport.js gives it one too), or a superseded navigation. An
+// AbortError thrown by the app's own code in a deferred child (an aborted fetch
+// handed to `use()`) is treated as a navigation's too: the fallback stays.
+function isTransportError(error) {
+  if (error == null || typeof error !== "object") return false;
+  return "digest" in error || isAbort(error);
+}
+
+/** The error to hand the app: the server's message, in production too. */
+export function serverError(error) {
+  const message = DIGEST_MESSAGES[error?.digest] ?? error?.message ?? String(error);
+  return new Error(`[ruact] Server error: ${message}`, { cause: error });
+}
+
+export class SuspenseBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { failed: false, appError: null, children: props.children };
+  }
+
+  // A new response brings a new lazy child (the router, revalidate()). React
+  // keeps this instance when the page keeps its shape, so a failure must not
+  // outlive the child that failed.
+  static getDerivedStateFromProps(props, state) {
+    if (props.children === state.children) return null;
+    return { failed: false, appError: null, children: props.children };
+  }
+
+  static getDerivedStateFromError(error) {
+    return isTransportError(error) ? { failed: true } : { appError: error };
+  }
+
+  componentDidCatch(error) {
+    if (!isTransportError(error) || isAbort(error)) return;
+    reportError(serverError(error));
+  }
+
+  render() {
+    // Not ours to handle: rethrown to the boundaries above.
+    if (this.state.appError) throw this.state.appError;
+    return this.state.failed ? (this.props.fallback ?? null) : this.props.children;
+  }
+}
+
+registerBuiltin("ruact:boundary", { SuspenseBoundary });

data/vendor/javascript/vite-plugin-ruact/runtime/transport.js

@@ -0,0 +1,41 @@
+// Story 18-1 — the stream React's Flight client reads, with its failures
+// labelled.
+//
+// When a response ends before every row arrived (the server raised while
+// streaming a deferred child, a proxy timed out, the network dropped), React's
+// client fails the rows still pending — with "Connection closed." in its
+// development build and a minified "#412" in production, or with whatever the
+// network threw. The Suspense boundary must recognise all of these as the
+// transport's, not as a crash in the app's components. So the stream ends with
+// an error carrying a digest the boundary knows; for a complete response that
+// changes nothing, since the client only fails rows still pending. A
+// superseded navigation's AbortError passes through as it is.
+import { isAbort } from "./suspense-boundary.js";
+
+export const CONNECTION_CLOSED_DIGEST = "ruact:connection-closed";
+
+function closed(cause) {
+  const error = new Error("the response ended before the whole page arrived", cause ? { cause } : undefined);
+  error.digest = CONNECTION_CLOSED_DIGEST;
+  return error;
+}
+
+export function labelledStream(stream) {
+  const reader = stream.getReader();
+  return new ReadableStream({
+    async pull(controller) {
+      let result;
+      try {
+        result = await reader.read();
+      } catch (error) {
+        controller.error(isAbort(error) ? error : closed(error));
+        return;
+      }
+      if (result.done) controller.error(closed());
+      else controller.enqueue(result.value);
+    },
+    cancel(reason) {
+      return reader.cancel(reason);
+    },
+  });
+}