ruact 0.0.16 → 0.0.18

data/lib/ruact/flight/serializer.rb

@@ -64,7 +64,9 @@ module Ruact
           @request.increment_pending
           row = RowEmitter.text(id, value)
           @request.completed_regular_chunks << row
-          return "$T#{id.to_s(16)}"
+          # A plain "$<hex>" reference: React reads "$T" as a temporary
+          # reference (Story 18-1).
+          return "$#{id.to_s(16)}"
         end
 
         # Escape leading $ so the client doesn't misinterpret it.
@@ -131,7 +133,16 @@ module Ruact
         key   = element.key
         props = serialize_hash(element.props)
 
-        ["$", resolved_type, key, props]
+        element_tuple(resolved_type, key, props)
+      end
+
+      # In development, React's client reads three more slots — owner, debug
+      # stack, and whether the children were validated. ERB has no `key`, so
+      # without the last one every element with sibling children or rendered in
+      # a loop logs React's "unique key" warning. Production reads four slots.
+      def element_tuple(type, key, props)
+        tuple = ["$", type, key, props]
+        @request.development ? tuple.push(nil, nil, 1) : tuple
       end
 
       # --- Suspense Boundary ---
@@ -143,11 +154,15 @@ module Ruact
 
         fallback_value = element.fallback ? serialize_model(element.fallback) : nil
 
-        # Children is an element tuple using the lazy ref as its type
-        lazy_ref = "$L#{deferred_id.to_s(16)}"
-        children_el = ["$", lazy_ref, nil, {}]
-
-        ["$", "$SS", nil, { "fallback" => fallback_value, "children" => children_el }]
+        # React's shape (Story 18-1): the type is a reference to a
+        # `"$Sreact.suspense"` symbol row, and the deferred content is a lazy
+        # child the client resolves when its row arrives. The lazy child sits
+        # inside the runtime's error boundary: an error row for it (a Suspense
+        # timeout) keeps the fallback on screen and reaches the router's
+        # `onError`, where an unhandled render error would unmount the page.
+        boundary = element_tuple(@request.boundary_ref, nil,
+                                 { "fallback" => fallback_value, "children" => "$L#{deferred_id.to_s(16)}" })
+        element_tuple(@request.suspense_symbol_ref, nil, { "fallback" => fallback_value, "children" => boundary })
       end
 
       # --- Unknown type fallback ---

data/lib/ruact/html_converter.rb

@@ -182,6 +182,7 @@ module Ruact
     def convert_element(node)
       tag = node.name.downcase
       return convert_suspense_element(node) if tag == "ruact-suspense"
+      return convert_component_with_children(node) if tag == ErbPreprocessor::WRAPPER_TAG
 
       props = build_props(node, tag)
       children = convert_children(node)
@@ -190,6 +191,23 @@ module Ruact
       Flight::ReactElement.new(type: tag, key: node["data-react-key"], props: props)
     end
 
+    # Story 18-2 — a component with children: the wrapper the preprocessor put
+    # around the content between `<Card>` and `</Card>`. Its children become the
+    # component's `children` prop, converted like any element's; an empty pair
+    # passes none, like `<Card />`.
+    def convert_component_with_children(node)
+      token = node["data-ruact-token"]
+      entry = @registry.find { |c| c[:token] == token }
+      raise Ruact::HtmlConverterError, "ruact: no component registered for #{token.inspect}" unless entry
+
+      props = entry[:props]
+      children = convert_children(node)
+      unless children.empty?
+        props = props.merge("children" => children.length == 1 ? children.first : children)
+      end
+      Flight::ReactElement.new(type: entry[:ref], key: nil, props: props)
+    end
+
     def convert_suspense_element(node)
       fallback_text = node["data-ruact-fallback"] || ""
       fallback = if fallback_text.empty?

data/lib/ruact/render_pipeline.rb

@@ -15,10 +15,15 @@ module Ruact
   class RenderPipeline
     VALID_MODES = %i[string stream].freeze
 
-    def initialize(manifest, controller_path: nil, logger: nil)
+    # @param development [Boolean] emit the element slots React's development
+    #   client reads (see Flight::Serializer#element_tuple). The controller
+    #   passes {Flight::Renderer.development_default}; everything else gets the
+    #   production wire.
+    def initialize(manifest, controller_path: nil, logger: nil, development: false)
       @manifest         = manifest
       @controller_path  = controller_path
       @logger           = logger
+      @development      = development
     end
 
     # Render a server component tree to Flight wire format.
@@ -194,7 +199,8 @@ module Ruact
         Flight::Renderer.each(root_element, @manifest,
                               strict_serialization: Ruact.config.strict_serialization,
                               on_as_json_warning: as_json_warning_callback,
-                              streaming: streaming) { |row| y << row }
+                              streaming: streaming,
+                              development: @development) { |row| y << row }
       end
     end
 
@@ -215,7 +221,8 @@ module Ruact
         Flight::Renderer.each(root_element, @manifest,
                               strict_serialization: strict,
                               on_as_json_warning: warning_cb,
-                              streaming: streaming) { |row| y << row }
+                              streaming: streaming,
+                              development: @development) { |row| y << row }
       end
     end
 
@@ -244,12 +251,13 @@ module Ruact
       receiver.instance_variable_set(:@__ruact_render_context__, render_context)
       return if receiver.respond_to?(:__ruact_component__)
 
-      receiver.define_singleton_method(:__ruact_component__) do |name, props = {}|
-        ctx = instance_variable_get(:@__ruact_render_context__)
-        raise Ruact::Error, "ruact: __ruact_component__ called outside an active render context" if ctx.nil?
+      ErbPreprocessor::PLACEHOLDERS.each do |helper, placeholder|
+        receiver.define_singleton_method(helper) do |name, props = {}|
+          ctx = instance_variable_get(:@__ruact_render_context__)
+          raise Ruact::Error, "ruact: #{helper} called outside an active render context" if ctx.nil?
 
-        token = ctx.register(name, props)
-        "<!-- #{token} -->"
+          placeholder.call(ctx.register(name, props))
+        end
       end
     end
   end

data/lib/ruact/testing/component_query.rb

@@ -10,7 +10,9 @@ module Ruact
     #
     # A component is TWO wire rows (Story 7.5 / FR108 semantics):
     #
-    #   * an `:import` row — `["<module path>", "<export name>", [chunks…]]` —
+    #   * an `:import` row — `["<module path>", [chunks…], "<export name>"]`
+    #     (React's order since Story 18-1; the older `[path, name, chunks]` is
+    #     still read) —
     #     sourced from the client manifest (`reference_for`); its `:id` is the
     #     integer the model rows reference; AND
     #   * one or more `:model` rows carrying a React element
@@ -27,8 +29,10 @@ module Ruact
       # A client-component element's type is "$L" followed by the import's hex id.
       CLIENT_REF = /\A\$L(?<hex>\h+)\z/
       # A string of 1024+ bytes travels as a `T` row, and the props hold a
-      # `"$T<hex>"` reference to it (Story 17-0d).
-      TEXT_REF = /\A\$T(?<hex>\h+)\z/
+      # `"$<hex>"` reference to it (Story 17-0d; `$T<hex>` before 18-1). A
+      # string that really starts with `$` travels escaped as `$$`, so this
+      # cannot match one.
+      TEXT_REF = /\A\$T?(?<hex>\h+)\z/
 
       # @param wire [String] the raw Flight wire byte string.
       def initialize(wire)
@@ -69,7 +73,10 @@ module Ruact
           next unless payload.is_a?(Array)
 
           module_path = payload[0]
-          export_name = payload[1]
+          # The runtime's own components (`ruact:boundary`) are not the app's.
+          next if module_path.is_a?(String) && module_path.start_with?("ruact:")
+
+          export_name = payload[1].is_a?(Array) ? payload[2] : payload[1]
           acc[row[:id]] = {
             module_path: module_path,
             export_name: export_name,

data/lib/ruact/testing/flight_wire_parser.rb

@@ -24,10 +24,10 @@ module Ruact
     # `Thread.current`.
     #
     # @example
-    #   wire = "1:I[\"/L.jsx\",\"L\",[\"/L.jsx\"]]\n0:[\"$\",\"$L1\",null,{}]\n"
+    #   wire = "1:I[\"/L.jsx\",[],\"L\"]\n0:[\"$\",\"$L1\",null,{}]\n"
     #   Ruact::Testing::FlightWireParser.parse(wire)
     #   # => [
-    #   #      { id: 1, class: :import, payload: ["/L.jsx", "L", ["/L.jsx"]], raw: "1:I...\n" },
+    #   #      { id: 1, class: :import, payload: ["/L.jsx", [], "L"], raw: "1:I...\n" },
     #   #      { id: 0, class: :model,  payload: ["$", "$L1", nil, {}],       raw: "0:[\"$\"...\n" }
     #   #    ]
     class FlightWireParser

data/lib/ruact/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Ruact
-  VERSION = "0.0.16"
+  VERSION = "0.0.18"
 end

data/lib/ruact/view_helper.rb

@@ -32,6 +32,19 @@ module Ruact
       "<!-- #{token} -->".html_safe
     end
 
+    # Story 18-2 — the opening of a component with children. Registers it like
+    # {#__ruact_component__} and opens the wrapper element whose content (the
+    # ERB between the tags, evaluated in place) HtmlConverter hands the
+    # component as `children`. The preprocessor writes the matching
+    # `</ruact-component>`.
+    def __ruact_component_open__(name, props = {})
+      ctx = @ruact_render_context
+      raise Ruact::Error, __ruact_outside_render_message(name) if ctx.nil?
+
+      token = ctx.register(name, props)
+      %(<ruact-component data-ruact-token="#{token}">).html_safe
+    end
+
     # Story 17.0i — a client component in a template Rails is rendering on its
     # own. Says which component and template, and the two ways to a ruact page:
     # `ruact_render` for this template, or listing the action in the

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

@@ -21,6 +21,8 @@ import ruact, {
   BOOTSTRAP_VIRTUAL_ID,
   REGISTRY_VIRTUAL_ID,
   generateBootstrapSource,
+  resolveFlightClient,
+  flightClientSource,
 } from "./index.js";
 
 const RESOLVED = "\0" + BOOTSTRAP_VIRTUAL_ID;
@@ -53,10 +55,13 @@ describe("virtual:ruact/bootstrap — load (Story 14.2)", () => {
   });
 
   it("imports the runtime modules via ABSOLUTE fs specifiers, not relative", () => {
-    expect(src).toMatch(/from '\/.*\/runtime\/flight-client\.js'/);
+    expect(src).toMatch(/from '\/.*\/runtime\/flight-modules\.js'/);
+    expect(src).toMatch(/import '\/.*\/runtime\/suspense-boundary\.js'/);
     expect(src).toMatch(/from '\/.*\/runtime\/ruact-router\.js'/);
+    // Story 18-1 — React's Flight client, through the plugin's virtual id.
+    expect(src).toContain("from 'virtual:ruact/flight-client'");
     // No `\0virtual:`-unresolvable relative import survives.
-    expect(src).not.toMatch(/from\s+['"]\.\/flight-client\.js['"]/);
+    expect(src).not.toMatch(/(from|import)\s+['"]\.\/[\w.-]+\.js['"]/);
     expect(src).not.toMatch(/from\s+['"]\.\/ruact-router\.js['"]/);
   });
 
@@ -94,3 +99,40 @@ describe("generateBootstrapSource — rewrites imports only (Story 14.2)", () =>
     fs.rmSync(dir, { recursive: true, force: true });
   });
 });
+
+// Story 18-1 — option C: which copy of React's Flight client answers.
+describe("resolveFlightClient", () => {
+  const make = (pkg, installed) => {
+    const dir = fs.mkdtempSync(path.join(os.tmpdir(), "ruact-rfc-"));
+    if (pkg) fs.writeFileSync(path.join(dir, "package.json"), JSON.stringify(pkg));
+    if (installed) {
+      const mod = path.join(dir, "node_modules", "react-server-dom-webpack");
+      fs.mkdirSync(mod, { recursive: true });
+      fs.writeFileSync(path.join(mod, "package.json"), JSON.stringify({ name: "react-server-dom-webpack", version: installed }));
+    }
+    return dir;
+  };
+
+  it("uses the copy vendored in the gem when the app declares none", () => {
+    expect(resolveFlightClient(make({ dependencies: {} }), "development")).toMatchObject({ source: "vendored" });
+  });
+
+  it("uses the app's copy when the app declares and installs it", () => {
+    const dir = make({ dependencies: { "react-server-dom-webpack": "19.2.8" } }, "19.2.8");
+    expect(resolveFlightClient(dir, "production")).toEqual({ source: "app", version: "19.2.8", mode: "production" });
+  });
+
+  it("ignores a copy that is installed but not declared (another package's, hoisted)", () => {
+    expect(resolveFlightClient(make({ dependencies: {} }, "19.0.0"), "development")).toMatchObject({ source: "vendored" });
+  });
+
+  it("falls back to the vendored copy when declared but not installed yet", () => {
+    const dir = make({ devDependencies: { "react-server-dom-webpack": "19.2.8" } });
+    expect(resolveFlightClient(dir, "development")).toMatchObject({ source: "vendored" });
+  });
+
+  it("serves the app's copy behind the webpack globals, imported first", () => {
+    const src = flightClientSource({ source: "app", mode: "development" });
+    expect(src.indexOf("flight-webpack-globals.js")).toBeLessThan(src.indexOf("react-server-dom-webpack/client.browser"));
+  });
+});

data/vendor/javascript/vite-plugin-ruact/flight-conformance.test.mjs

@@ -0,0 +1,306 @@
+// @vitest-environment jsdom
+//
+// Story 18-1 — React's Flight client (the copy vendored in the gem) reads what
+// the Ruby side writes. Every payload here is the serializer's own output,
+// written and guarded against drift by spec/ruact/flight/*_fixtures_spec.rb.
+//
+// The suite runs once per client build: FLIGHT_CLIENT_MODE=development (the
+// default) and =production (`npm test` runs both). CI also runs it against the
+// lowest React the gem supports.
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import fs from "node:fs";
+import path from "node:path";
+import { act, createElement as h, Suspense } from "react";
+import { createRoot } from "react-dom/client";
+import { createFromReadableStream } from "virtual:ruact/flight-client";
+import { setModuleRegistry } from "./runtime/flight-modules.js";
+import { setBoundaryErrorHandler } from "./runtime/suspense-boundary.js";
+import { RootBoundary } from "./runtime/root-boundary.js";
+import { labelledStream } from "./runtime/transport.js";
+
+const MODE = process.env.FLIGHT_CLIENT_MODE || "development";
+const FIXTURES = path.join(import.meta.dirname, "../../../spec/fixtures/flight");
+const read = (name) => new Uint8Array(fs.readFileSync(path.join(FIXTURES, name)));
+const readJSON = (name) => JSON.parse(fs.readFileSync(path.join(FIXTURES, name), "utf8"));
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+function Bad() {
+  throw new Error("boom");
+}
+
+function LikeButton({ likes, tags }) {
+  return h("button", null, `${likes}:${Array.isArray(tags) ? `[${tags.join(",")}]` : String(tags)}`);
+}
+function Card({ title, children }) {
+  return h("section", null, h("h2", null, title), children);
+}
+
+setModuleRegistry({ "/LikeButton.jsx": { LikeButton }, "/Bad.jsx": { Bad }, "/Card.jsx": { Card } });
+
+function streamOf(chunks) {
+  return new ReadableStream({
+    start(controller) {
+      for (const chunk of chunks) controller.enqueue(chunk);
+      controller.close();
+    },
+  });
+}
+
+// As the runtime reads a response: through ./runtime/transport.js. React's
+// client returns a thenable, not a Promise; wrap it so `rejects` really checks.
+const decode = (chunks) => Promise.resolve(createFromReadableStream(labelledStream(streamOf(chunks))));
+
+async function mount(value) {
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(h(Suspense, { fallback: "…" }, value));
+  });
+  return { container, root };
+}
+
+let consoleError;
+beforeEach(() => {
+  consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+});
+afterEach(() => {
+  consoleError.mockRestore();
+  setBoundaryErrorHandler(null);
+});
+
+describe(`React's Flight client (${MODE}) reads a page the Ruby side rendered`, () => {
+  // The development wire carries the slots React's development client reads.
+  const fixture = MODE === "development" ? "conformance_tree_dev.txt" : "conformance_tree.txt";
+  const html =
+    "<main><h1>Posts</h1>" +
+    "<article><button>1:[only]</button></article>" +
+    "<article><button>2:[only]</button></article>" +
+    "<article><button>3:[only]</button></article>" +
+    "<p>late</p><p>after</p></main>";
+
+  // FIRST render in this file on purpose: React reports a missing key once per
+  // location, so a later test would see nothing even on the wrong wire.
+  it("renders host elements, an ERB loop of client components and a Suspense child — and logs nothing", async () => {
+    const { container, root } = await mount(decode([read(fixture)]));
+    expect(container.innerHTML).toBe(html);
+    // The development build reports a missing key after the commit, on a later
+    // task; wait for it before concluding there is none.
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(consoleError).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("keeps a one-element array prop a one-element array (Story 17.0a)", async () => {
+    const tree = await decode([read(fixture)]);
+    const article = tree.props.children[1];
+    expect(article.props.children.props.tags).toEqual(["only"]);
+  });
+
+  it("does not depend on where the network splits the bytes", async () => {
+    const bytes = read(fixture);
+    for (let cut = 1; cut < bytes.length; cut += 37) {
+      const { container, root } = await mount(decode([bytes.subarray(0, cut), bytes.subarray(cut)]));
+      expect(container.innerHTML).toBe(html);
+      act(() => root.unmount());
+    }
+  });
+});
+
+describe(`a client component with children from ERB (${MODE}) — Story 18-2`, () => {
+  const fixture = MODE === "development" ? "conformance_children_dev.txt" : "conformance_children.txt";
+
+  it("renders the server's children inside the component, a nested one included, and logs nothing", async () => {
+    const { container, root } = await mount(decode([read(fixture)]));
+    expect(container.innerHTML).toBe(
+      "<section><h2>Server title</h2><p>from ERB</p>" +
+      "<button>1:[only]</button><button>2:[only]</button><button>3:[only]</button>" +
+      "<section><h2>inner</h2>nested</section></section>",
+    );
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(consoleError).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});
+
+describe(`text rows (${MODE}) — Story 17-0d`, () => {
+  const expected = readJSON("text_framing_expected.json");
+
+  it("decodes every value the serializer framed, byte for byte", async () => {
+    expect(await decode([read("text_framing.txt")])).toEqual(expected);
+  });
+
+  it("decodes the same split at every byte, including inside lengths and code points", async () => {
+    const bytes = read("text_framing.txt");
+    for (let cut = 1; cut < bytes.length; cut += 1) {
+      expect(await decode([bytes.subarray(0, cut), bytes.subarray(cut)])).toEqual(expected);
+    }
+  });
+
+  it("decodes one byte at a time", async () => {
+    const bytes = read("text_framing.txt");
+    expect(await decode([...bytes].map((b) => Uint8Array.of(b)))).toEqual(expected);
+  });
+
+  it("puts long text inside Suspense content where the deferred row points", async () => {
+    const { container, root } = await mount(decode([read("text_framing_suspense.txt")]));
+    expect(container.querySelector("p").textContent).toBe(expected.multibyte);
+    act(() => root.unmount());
+  });
+
+  it("rejects a stream cut inside a text row instead of rendering part of it", async () => {
+    const bytes = read("text_framing.txt");
+    const cut = Buffer.from(bytes).indexOf(":T") + 10;
+    await expect(decode([bytes.subarray(0, cut)])).rejects.toThrow(/the response ended before the whole page arrived/);
+  });
+});
+
+describe(`dates and big integers (${MODE}) — Story 17-0c`, () => {
+  // Expected JSON tags what JSON cannot hold: { date: ISO } and { bigint: "…" }.
+  const revive = (value) => {
+    if (Array.isArray(value)) return value.map(revive);
+    if (value && typeof value === "object") {
+      if ("date" in value) return new Date(value.date);
+      if ("bigint" in value) return BigInt(value.bigint);
+      return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, revive(v)]));
+    }
+    return value;
+  };
+
+  it("rebuilds every value with its JS type, nested ones included", async () => {
+    expect(await decode([read("scalar_round_trip.txt")])).toEqual(revive(readJSON("scalar_round_trip_expected.json")));
+  });
+
+  it("keeps a literal string that starts with $D a string", async () => {
+    expect((await decode([read("scalar_round_trip.txt")])).literal).toBe("$D2026-01-01 is a string");
+  });
+
+  it("reads NaN, ±Infinity, undefined and an escaped $", async () => {
+    const value = await decode([new TextEncoder().encode(
+      '0:{"nan":"$NaN","inf":"$Infinity","ninf":"$-Infinity","negz":"$-0","und":"$undefined","cash":"$$5"}\n',
+    )]);
+    expect(Number.isNaN(value.nan)).toBe(true);
+    expect(value.inf).toBe(Infinity);
+    expect(value.ninf).toBe(-Infinity);
+    expect(Object.is(value.negz, -0)).toBe(true);
+    expect(value.und).toBeUndefined();
+    expect(value.cash).toBe("$5");
+  });
+});
+
+describe(`a Suspense child whose row is an error (${MODE})`, () => {
+  const timeout = () => read("conformance_suspense_timeout.txt");
+  // The same page, its Suspense row now content: the timeout fixture with the
+  // error row replaced.
+  const recovered = () => new TextEncoder().encode(
+    new TextDecoder().decode(timeout()).replace(/^1:E.*$/m, '1:["$","p",null,{"children":"late"}]'),
+  );
+
+  it("keeps the fallback on screen and reports the server's message, in production too", async () => {
+    const reported = [];
+    setBoundaryErrorHandler((error) => reported.push(error));
+    const { container, root } = await mount(decode([timeout()]));
+
+    expect(container.innerHTML).toBe("<span>loading</span>");
+    expect(reported.map((e) => e.message)).toEqual(["[ruact] Server error: Suspense timeout exceeded"]);
+    act(() => root.unmount());
+  });
+
+  it("keeps the fallback when the response ends before the Suspense row, in production too", async () => {
+    const reported = [];
+    setBoundaryErrorHandler((error) => reported.push(error));
+    const cut = new TextDecoder().decode(timeout()).replace(/^1:E.*\n?/m, "");
+    const tree = await decode([new TextEncoder().encode(cut)]);
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(h(RootBoundary, { tree }, h(Suspense, { fallback: "…" }, tree)));
+    });
+    expect(container.innerHTML).toBe("<span>loading</span>");
+    expect(reported.map((e) => e.message)).toEqual([
+      "[ruact] Server error: the response ended before the whole page arrived",
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("keeps the fallback when the network fails mid-response", async () => {
+    const reported = [];
+    setBoundaryErrorHandler((error) => reported.push(error));
+    const head = new TextDecoder().decode(timeout()).replace(/^1:E.*\n?/m, "");
+    const failing = new ReadableStream({
+      start(controller) {
+        controller.enqueue(new TextEncoder().encode(head));
+        setTimeout(() => controller.error(new TypeError("network error")), 0);
+      },
+    });
+    const tree = await createFromReadableStream(labelledStream(failing));
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(h(RootBoundary, { tree }, h(Suspense, { fallback: "…" }, tree)));
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+    expect(container.innerHTML).toBe("<span>loading</span>");
+    expect(reported).toHaveLength(1);
+    act(() => root.unmount());
+  });
+
+  it("does not stay failed: the next response for the same page renders", async () => {
+    setBoundaryErrorHandler(() => {});
+    const { container, root } = await mount(decode([timeout()]));
+    expect(container.innerHTML).toBe("<span>loading</span>");
+
+    // What revalidate() or a navigation to a page of the same shape does.
+    const next = decode([recovered()]);
+    await act(async () => {
+      root.render(h(Suspense, { fallback: "…" }, next));
+    });
+    expect(container.innerHTML).toBe("<p>late</p>");
+    act(() => root.unmount());
+  });
+
+  it("lets a crash in the app's own component through, to the root's boundary", async () => {
+    const reported = [];
+    setBoundaryErrorHandler((error) => reported.push(error));
+    const wire = new TextDecoder().decode(timeout())
+      .replace(/^1:E.*$/m, '1:["$","$L5",null,{}]')
+      .replace(/^/, '5:I["/Bad.jsx",[],"Bad"]\n');
+    const tree = await decode([new TextEncoder().encode(wire)]);
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(h(RootBoundary, { tree }, tree));
+    });
+    expect(container.textContent).toBe("[ruact] Error: boom");
+    expect(reported).toEqual([]);
+    act(() => root.unmount());
+  });
+});
+
+describe(`a component missing from the registry (${MODE})`, () => {
+  it("shows an error in place of the page instead of removing it", async () => {
+    const tree = await decode([new TextEncoder().encode('1:I["/Gone.jsx",[],"Gone"]\n0:["$","$L1",null,{}]\n')]);
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(h(RootBoundary, { tree }, tree));
+    });
+    expect(container.textContent).toBe(
+      '[ruact] Error: client component not registered: /Gone.jsx — is it under app/javascript/components/ with "use client" at the top?',
+    );
+    act(() => root.unmount());
+  });
+});
+
+describe(`responses the router reads (${MODE})`, () => {
+  it("decodes a redirect body to the object the router checks", async () => {
+    // redirect_row.txt is what Ruact::Controller#redirect_to writes (controller_spec guards it).
+    expect(await decode([read("redirect_row.txt")])).toEqual({ redirectUrl: "/posts/1", redirectType: "push" });
+  });
+
+  it("rejects a stream that ends before its root row", async () => {
+    await expect(decode([new TextEncoder().encode('1:["$","p",null,{}]\n')])).rejects.toThrow(
+      /the response ended before the whole page arrived/,
+    );
+  });
+});