ruact 0.0.20 → 0.0.21

data/lib/ruact/markers.rb

@@ -8,14 +8,18 @@ module Ruact
   # Three markers:
   #
   # - a client component: an HTML comment holding the token its
-  #   {RenderContext} entry was registered under — `<!-- __RUACT_0__ -->`;
+  #   {RenderContext} entry was registered under — `<!-- __RUACT_a1b2c3d4_0__ -->`;
   # - a client component with children: an element wrapped around the
-  #   children's HTML — `<ruact-component data-ruact-token="__RUACT_0__">…`;
+  #   children's HTML — `<ruact-component data-ruact-token="__RUACT_a1b2c3d4_0__">…`;
   # - a Suspense boundary: an element wrapped around its content, carrying the
   #   fallback text and the optional delay —
   #   `<ruact-suspense data-ruact-fallback="Loading…">…</ruact-suspense>`. A
-  #   boundary whose content is rendered later is empty and carries the index
-  #   of its block in the {RenderContext} instead (`data-ruact-block="0"`).
+  #   boundary whose content is rendered later is empty and carries the key
+  #   of its block in the {RenderContext} instead (`data-ruact-block="a1b2c3d4-0"`).
+  #
+  # Every token and key carries the id of the render that wrote it, so a
+  # marker a `cache` block stored in another render is never taken for one of
+  # this render's.
   #
   # {ErbPreprocessor} writes the ERB that produces them, the view helpers
   # ({ViewHelper}, and {RenderPipeline} for a plain-ERB render) write the
@@ -49,7 +53,7 @@ module Ruact
     # attribute values as written in the template. Only `"` is escaped: the
     # rest of the text stays as the template wrote it (entities included, which
     # the HTML parser then decodes). The preprocessor refuses ERB in either.
-    # +block+ is the index of the boundary's content in the render context,
+    # +block+ is the key of the boundary's content in the render context,
     # when that content is rendered later.
     def self.suspense_open(fallback, delay, block: nil)
       delay_attr = delay ? %( #{DELAY_ATTR}="#{delay.gsub('"', '&quot;')}") : ""
@@ -72,11 +76,10 @@ module Ruact
       node[FALLBACK_ATTR] || ""
     end
 
-    # The index of the block a Suspense wrapper's content is rendered from
+    # The key of the block a Suspense wrapper's content is rendered from
     # later, or nil when the content is in the wrapper.
     def self.suspense_block(node)
-      value = node[BLOCK_ATTR]
-      value && Integer(value, 10)
+      node[BLOCK_ATTR]
     end
 
     # The delay of a Suspense wrapper, in seconds, or nil when it is absent,

data/lib/ruact/query_watch.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module Ruact
+  # Story 19-2 (AC14) — when a `<Suspense>` runs past `suspense_timeout` with a
+  # query in flight, that query is cancelled on the database server.
+  #
+  # `Timeout` gives the block back at the limit, but a query the driver is
+  # waiting on keeps running on the server, and the connection stays busy with
+  # it: the next query on it — this response's, or the next request's once the
+  # connection is back in the pool — waits for it to end (measured with
+  # PostgreSQL: seconds). Inside a transaction even the unwinding waits, at its
+  # ROLLBACK. So at the limit the queries in flight on the connections the
+  # block's thread holds — or that it already gave back — are cancelled, from
+  # another thread if the block is stuck; the connection is free again within
+  # milliseconds.
+  #
+  # PostgreSQL only: `PG::Connection#cancel` is libpq's PQcancel, made to be
+  # called from another thread. Other adapters are left as they are; the
+  # database's own statement timeout is the limit there.
+  #
+  # Not cancelled: a query `load_async` runs. The async executor's thread holds
+  # its connection, not the block's, and nothing ties that query to the block
+  # that waits for it; it runs to its end. The statement timeout is the limit
+  # for those.
+  #
+  # Internal API: not part of the public compatibility contract.
+  class QueryWatch
+    # Who holds a connection the way Active Record records it: the thread, or
+    # the fiber under `isolation_level = :fiber`.
+    def self.current_owner
+      ::ActiveSupport::IsolatedExecutionState.context
+    end
+
+    # Watches +owner+'s connections for +limit+ seconds; nil when there is
+    # nothing to watch (no Active Record).
+    def self.start(owner, limit)
+      return nil unless defined?(::ActiveRecord::Base) && defined?(::PG::Connection)
+
+      new(owner, limit)
+    end
+
+    def initialize(owner, limit)
+      @lock = Mutex.new
+      @done = false
+      @cancelled = false
+      @watcher = Thread.new do
+        sleep(limit)
+        @lock.synchronize { cancel_queries_of(owner) unless @done }
+      end
+    end
+
+    # The block ran past the limit and was given back: cancel what its owner
+    # still has in flight now, whether or not the watcher got there first.
+    def cancel_now(owner)
+      @lock.synchronize { cancel_queries_of(owner) }
+    end
+
+    # Whether a query was cancelled: the error the block then raises
+    # (`ActiveRecord::QueryCanceled`) is the timeout's, not the content's. The
+    # watcher can get there before `Timeout` does.
+    def cancelled?
+      @cancelled
+    end
+
+    # The block ended (or was ended): nothing to cancel any more. Does not wait
+    # for a cancel under way, which opens a connection to the database.
+    def stop
+      @done = true
+      @watcher.kill
+    end
+
+    private
+
+    # The queries are found under each pool's lock and cancelled outside it: a
+    # cancel opens a connection to the database, and the pool's lock is every
+    # thread's checkout. A connection nobody holds could be handed to another
+    # request in between and have that request's query cancelled; the window
+    # is the time a cancel takes to reach the server, on the timeout path only.
+    def cancel_queries_of(owner)
+      in_flight(owner).each do |raw|
+        raw.cancel
+        @cancelled = true
+      rescue StandardError
+        nil
+      end
+    end
+
+    def in_flight(owner)
+      ::ActiveRecord::Base.connection_handler.connection_pool_list(:all).flat_map do |pool|
+        pool.synchronize { pool.connections.filter_map { |connection| query_of(connection, owner) } }
+      rescue StandardError
+        []
+      end
+    end
+
+    # The owner's own connection, or one already back in the pool: unwinding a
+    # `with_connection` gives the connection back with its query still running.
+    # A query in flight on a connection nobody holds is one nobody waits for.
+    def query_of(connection, owner)
+      return unless connection.owner.nil? || connection.owner.equal?(owner)
+
+      raw = connection.instance_variable_get(:@raw_connection)
+      raw if raw.is_a?(::PG::Connection) && raw.transaction_status == ::PG::PQTRANS_ACTIVE
+    end
+  end
+end

data/lib/ruact/render_context.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "securerandom"
+
 module Ruact
   # Per-render mutable state holding the components encountered during ERB
   # evaluation, and — in an action that streams — the `<Suspense>` blocks whose
@@ -14,13 +16,19 @@ module Ruact
   # Internal API: not part of the public compatibility contract.
   class RenderContext
     # A `<Suspense>` block waiting to be rendered: the view it was written in,
-    # the block, and the template Rails was rendering when it met the tag
-    # (`t(".key")` and error messages read it).
-    Block = Struct.new(:view, :block, :virtual_path, :template, :location)
+    # the block, the template Rails was rendering when it met the tag
+    # (`t(".key")` and error messages read it), and the local variables the
+    # block can see, as they were then (Story 19-2: a `for` loop reuses one
+    # variable, a local can be reassigned below the tag).
+    Block = Struct.new(:view, :block, :virtual_path, :template, :location, :locals)
 
     # @param deferring [Boolean] whether a `<Suspense>`'s content is rendered
     #   after the shell (an action that streams) instead of in place
     def initialize(deferring: false)
+      # Story 19-2 — every marker this render writes carries it, so a marker a
+      # `cache` block stored in another render never passes for one of this
+      # render's: it would name another component, or another boundary's block.
+      @id = SecureRandom.hex(4)
       @components = []
       @deferring  = deferring
       @blocks     = []
@@ -35,25 +43,29 @@ module Ruact
 
     def register(name, props)
       # Frozen: the converter keys a Hash by it, which would copy an unfrozen one.
-      token = "__RUACT_#{@components.length}__".freeze
+      token = "__RUACT_#{@id}_#{@components.length}__".freeze
       @components << { token: token, name: name, props: props }
       token
     end
 
-    # Keeps a `<Suspense>` block for later and returns its index.
+    # Keeps a `<Suspense>` block for later and returns its key.
     #
     # @param block [Block]
-    # @return [Integer]
+    # @return [String]
     def defer_block(block)
       @blocks << block
-      @blocks.length - 1
+      "#{@id}-#{@blocks.length - 1}".freeze
     end
 
-    # The block registered under +index+.
+    # The block registered under +key+, or nil when the key is not this
+    # render's — a marker that came out of a `cache` block another render wrote.
     #
-    # @return [Block]
-    def block(index)
-      @blocks.fetch(index)
+    # @return [Block, nil]
+    def block(key)
+      id, index = key.to_s.split("-", 2)
+      return nil unless id == @id && index.to_s.match?(/\A\d+\z/)
+
+      @blocks[Integer(index, 10)]
     end
 
     # Whether the development message for a `<Suspense>` in an action that

data/lib/ruact/render_pipeline.rb

@@ -66,7 +66,8 @@ module Ruact
     #
     # @example Pre-rendered HTML, streaming output
     #   ctx = Ruact::RenderContext.new
-    #   pipeline.render({ html: "<!-- __RUACT_0__ -->", render_context: ctx }, mode: :stream)
+    #   html = Ruact::Markers.component(ctx.register("NavBar", {}))
+    #   pipeline.render({ html: html, render_context: ctx }, mode: :stream)
     #   # => #<Enumerator: ...>  (yields Flight rows lazily)
     def render(input, mode: :string)
       validate_mode!(mode)
@@ -232,6 +233,7 @@ module Ruact
     # the caller may discard the RenderContext immediately after `render` returns — the
     # returned Enumerator does not reference the RenderContext.
     def render_html_enum(html, render_context, streaming:)
+      CachedBlocks.report(html, @logger) unless render_context.deferring?
       registry = render_context.resolve(@manifest, controller_path: @controller_path)
       strict     = Ruact.config.strict_serialization
       warning_cb = as_json_warning_callback

data/lib/ruact/version.rb

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

data/lib/ruact/view_helper/suspense.rb

@@ -21,7 +21,7 @@ module Ruact
         ctx = @ruact_render_context
         if ctx&.deferring?
           index = ctx.defer_block(RenderContext::Block.new(self, block, @virtual_path, @current_template,
-                                                           caller_locations(1, 1).first))
+                                                           caller_locations(1, 1).first, __ruact_locals(block)))
           return "#{Markers.suspense_open(fallback, delay, block: index)}#{Markers::SUSPENSE_CLOSE}".html_safe
         end
 
@@ -33,6 +33,14 @@ module Ruact
         "#{Markers.suspense_open(fallback, delay)}#{content}#{Markers::SUSPENSE_CLOSE}".html_safe
       end
 
+      # Story 19-2 (AC8.3) — the local variables +block+ sees, as they are when
+      # the tag is met. The block runs later; without these it would see a local
+      # as it is then — the last item of a `for` loop, a value reassigned below.
+      def __ruact_locals(block)
+        scope = block.binding
+        scope.local_variables.to_h { |name| [name, scope.local_variable_get(name)] }
+      end
+
       # Story 19-1 — a `<Suspense>` in an action that does not stream renders its
       # content before the page is sent, as it always did. Development says so,
       # once per response, with the line that makes the action stream.
@@ -56,7 +64,7 @@ module Ruact
         )
       end
 
-      private :__ruact_note_unstreamed_suspense
+      private :__ruact_note_unstreamed_suspense, :__ruact_locals
     end
   end
 end

data/lib/ruact/view_helper.rb

@@ -235,7 +235,7 @@ module Ruact
     # `</script>`, and its `\e`-style escapes mean something else in JS).
     def ruact_flight_data_script(flight_payload)
       <<~HTML.strip
-        <script>
+        <script#{__ruact_nonce_attr}>
           (function() {
             var d = (self.__FLIGHT_DATA = self.__FLIGHT_DATA || []);
             d.push(#{InlineScript.string_literal(flight_payload)});
@@ -244,6 +244,16 @@ module Ruact
       HTML
     end
 
+    # Story 19-2 (AC21) — the request's CSP nonce as a `<script>` attribute, so
+    # an app whose policy allows scripts by nonce (no `'unsafe-inline'`) runs
+    # the ones ruact writes. Empty without a nonce generator: the bytes are
+    # those of before.
+    def __ruact_nonce_attr
+      source = respond_to?(:request, true) ? request : nil
+      nonce = source.content_security_policy_nonce if source.respond_to?(:content_security_policy_nonce)
+      nonce ? %( nonce="#{ERB::Util.html_escape(nonce)}") : ""
+    end
+
     # The bootstrap entry `<script>` tags — dev serves the virtual module from
     # the Vite dev server (with the react-refresh preamble + `@vite/client`);
     # prod reads the hashed URL from the Vite manifest. Both target the SAME
@@ -264,7 +274,7 @@ module Ruact
         # bootstrap, in that order.
         dev_server = Ruact.config.vite_dev_server.chomp("/")
         <<~HTML
-          <script type="module" async>
+          <script type="module" async#{__ruact_nonce_attr}>
             import RefreshRuntime from '#{dev_server}/@react-refresh';
             RefreshRuntime.injectIntoGlobalHook(window);
             window.$RefreshReg$ = () => {};
@@ -279,7 +289,7 @@ module Ruact
         # virtual entry id (the manifest key Vite emits for the virtual input).
         entry = vite_manifest_entry(Ruact.bootstrap_virtual_id)
         src   = entry ? "/assets/#{entry['file']}" : "/assets/application.js"
-        tag   = %(<script type="module" async src="#{src}"></script>)
+        tag   = %(<script type="module" async src="#{src}"#{__ruact_nonce_attr}></script>)
         # Story 17-0k — in development with neither the Vite dev server nor a
         # build, that script 404s and the page stays empty with no error.
         Rails.env.development? && entry.nil? ? "#{ruact_vite_down_warning}\n#{tag}" : tag

data/lib/ruact.rb

@@ -20,6 +20,9 @@ require_relative "ruact/client_manifest"
 require_relative "ruact/manifest_resolver"
 require_relative "ruact/render_pipeline"
 require_relative "ruact/deferred_render"
+require_relative "ruact/cached_blocks"
+require_relative "ruact/query_watch"
+require_relative "ruact/declared_content"
 require_relative "ruact/view_helper"
 require_relative "ruact/erb_preprocessor_hook"
 require_relative "ruact/server_functions"

data/vendor/javascript/vite-plugin-ruact/page-mount.test.mjs

@@ -56,12 +56,20 @@ describe("showDevOverlay", () => {
     expect(document.getElementById("ruact-dev-overlay")).toBeNull();
   });
 
-  it("shows the latest failure in the one overlay", () => {
+  // Story 19-2 (AC7) — every failure, in the one overlay.
+  it("shows each failure in the one overlay, and opens again after it was closed", () => {
     showDevOverlay(new Error("first"));
     showDevOverlay(new Error("second"));
     const overlays = document.querySelectorAll("#ruact-dev-overlay");
     expect(overlays).toHaveLength(1);
-    expect(overlays[0].querySelector("[data-overlay-message]").textContent).toBe("second");
+    const messages = [...overlays[0].querySelectorAll("[data-overlay-message]")].map((el) => el.textContent);
+    expect(messages).toEqual(["first", "second"]);
+    expect(overlays[0].querySelector("[data-overlay-title]").textContent).toBe("[ruact] 2 <Suspense> failed on the server");
     overlays[0].click();
+
+    showDevOverlay(new Error("third"));
+    const reopened = document.getElementById("ruact-dev-overlay");
+    expect([...reopened.querySelectorAll("[data-overlay-message]")].map((el) => el.textContent)).toEqual(["third"]);
+    reopened.click();
   });
 });

data/vendor/javascript/vite-plugin-ruact/page-stream.test.mjs

@@ -1,7 +1,7 @@
 // The two ways a page is opened read the same way: the rows a document inlined
 // in `__FLIGHT_DATA`, and a fetch body that may end early.
 import { describe, it, expect } from "vitest";
-import { documentRows, openPage } from "./runtime/page-stream.js";
+import { LEAVE_EVENT, documentRows, openPage } from "./runtime/page-stream.js";
 
 const encoder = new TextEncoder();
 
@@ -57,9 +57,14 @@ describe("documentRows", () => {
     return {
       readyState: "loading",
       addEventListener(type, listener) { listeners[type] = listener; },
-      finish() {
-        this.readyState = "interactive";
-        listeners.DOMContentLoaded?.();
+      removeEventListener(type) { delete listeners[type]; },
+      finish(state = "interactive") {
+        this.readyState = state;
+        listeners.readystatechange?.();
+      },
+      leave() {
+        listeners[LEAVE_EVENT]?.();
+        this.finish("complete");
       },
     };
   }
@@ -93,6 +98,26 @@ describe("documentRows", () => {
     expect(closed).toBe(true);
   });
 
+  // Story 19-2 — the router stops a document it leaves while it still loads.
+  it("closes when the document is stopped while loading", async () => {
+    const doc = openDocument();
+    const reader = documentRows(['0:"x"\n'], doc).getReader();
+    await reader.read();
+    doc.finish("complete");
+    await expect(reader.read()).resolves.toMatchObject({ done: true });
+  });
+
+  // Story 19-2 — the router leaving it: the page being left reports nothing,
+  // as for a superseded navigation.
+  it("ends as an aborted navigation when the router leaves the document", async () => {
+    const doc = openDocument();
+    const page = openPage(documentRows(['0:{"later":"$@1"}\n'], doc));
+    const root = await page.root;
+    doc.leave();
+    await expect(root.later).rejects.toMatchObject({ name: "AbortError" });
+    await expect(page.end).rejects.toMatchObject({ name: "AbortError" });
+  });
+
   it("closes at once when the document has already ended", async () => {
     const reader = documentRows(['0:"x"\n'], { readyState: "complete" }).getReader();
     await reader.read();

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

@@ -14,6 +14,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import fs from "node:fs";
 import path from "node:path";
 import { setupRouter, teardownRouter } from "./runtime/ruact-router.js";
+import { LEAVE_EVENT } from "./runtime/page-stream.js";
 
 const ORIGIN = "http://localhost:3000";
 
@@ -568,3 +569,187 @@ describe("ruact-router — dates and big integers in a navigation (Story 17-0c)"
   });
 });
 
+
+// Story 19-2 — leaving a page whose document is still arriving (a page that
+// streams) stops loading it, so the server starts no further block for it.
+describe("leaving a document that is still loading", () => {
+  let dom;
+
+  beforeEach(() => {
+    dom = installDom();
+    globalThis.fetch = vi.fn().mockResolvedValue(respond({ body: '0:"next"\n' }));
+    globalThis.window.stop = vi.fn();
+    globalThis.__FLIGHT_DATA = Object.assign([], { streaming: true });
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    setupRouter({ onNavigate: vi.fn(), moduleRegistry: {}, onError: vi.fn() });
+  });
+
+  afterEach(() => {
+    teardownRouter();
+    delete globalThis.__FLIGHT_DATA;
+    vi.restoreAllMocks();
+  });
+
+  // A slow network, a long layout: the rest of the document after `#root`
+  // (which a navigation does not replace) still has to arrive.
+  it("leaves a loading document alone when it does not stream, or its rows are all in", async () => {
+    globalThis.document.readyState = "loading";
+    globalThis.__FLIGHT_DATA = [];
+    click(dom.listeners, "/products/2");
+    await settle();
+    globalThis.__FLIGHT_DATA = Object.assign([], { streaming: false });
+    click(dom.listeners, "/products/3");
+    await settle();
+    expect(window.stop).not.toHaveBeenCalled();
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("stops the document before it fetches the next page", async () => {
+    globalThis.document.readyState = "loading";
+    let stoppedBeforeFetch = null;
+    globalThis.fetch.mockImplementation(async () => {
+      stoppedBeforeFetch = window.stop.mock.calls.length === 1;
+      return respond({ body: '0:"next"\n' });
+    });
+    click(dom.listeners, "/products/2");
+    await settle();
+    expect(stoppedBeforeFetch).toBe(true);
+  });
+
+  it("leaves a document that has finished alone", async () => {
+    globalThis.document.readyState = "complete";
+    click(dom.listeners, "/products/2");
+    await settle();
+    expect(window.stop).not.toHaveBeenCalled();
+    expect(fetch).toHaveBeenCalled();
+  });
+
+  it("stops it for a form the router submits", async () => {
+    globalThis.document.readyState = "loading";
+    let stoppedBeforeFetch = null;
+    globalThis.fetch.mockImplementation(async () => {
+      stoppedBeforeFetch = window.stop.mock.calls.length === 1;
+      return respond({ body: '0:"next"\n' });
+    });
+    submit(dom.listeners, new dom.FakeForm({ action: "/people", method: "post" }));
+    await settle();
+    expect(stoppedBeforeFetch).toBe(true);
+  });
+
+  // Review 19-2a R3/R4 — a `#anchor` on the page on screen: the browser
+  // scrolls; nothing is fetched, and the document is not left.
+  it("leaves a popstate that only changes the hash to the browser", async () => {
+    globalThis.document.readyState = "loading";
+    location._set("/products/1#reviews");
+    dom.listeners.window.popstate.forEach((fn) => fn({}));
+    await settle();
+    expect(window.stop).not.toHaveBeenCalled();
+    expect(fetch).not.toHaveBeenCalled();
+  });
+
+  it("leaves a link to this page's #anchor to the browser", async () => {
+    globalThis.document.readyState = "loading";
+    const event = click(dom.listeners, "/products/1#reviews");
+    await settle();
+    expect(event.defaultPrevented).toBe(false);
+    expect(window.stop).not.toHaveBeenCalled();
+    expect(fetch).not.toHaveBeenCalled();
+  });
+
+  // Review 19-2a R4 — as a browser does: once stopped, the document no longer
+  // loads, so a later navigation does not stop it again.
+  function stopForReal() {
+    globalThis.document.readyState = "loading";
+    window.stop.mockImplementation(() => { globalThis.document.readyState = "complete"; });
+  }
+
+  it("fetches the page again when the navigation that superseded the one that stopped it fails", async () => {
+    stopForReal();
+    const html500 = respond({ status: 500, contentType: "text/html", body: "<p>boom</p>" });
+    globalThis.fetch
+      .mockImplementationOnce((_url, { signal }) => new Promise((_resolve, reject) => {
+        signal.addEventListener("abort", () => reject(new DOMException("aborted", "AbortError")));
+      }))
+      .mockResolvedValueOnce(html500)
+      .mockResolvedValue(respond({ body: '0:"again"\n' }));
+    const form = new dom.FakeForm({ action: "/people", method: "post" });
+    submit(dom.listeners, form);
+    submit(dom.listeners, form);
+    await settle();
+    await settle();
+    expect(window.stop).toHaveBeenCalledTimes(1);
+    expect(fetch.mock.calls.map((call) => call[0])).toEqual(["/people", "/people", "/products/1"]);
+  });
+
+  it("fetches the page again when the redirect a form was answered with fails", async () => {
+    stopForReal();
+    globalThis.fetch
+      .mockResolvedValueOnce(respond({ body: '0:{"redirectUrl":"/people/9","redirectType":"push"}\n' }))
+      .mockRejectedValueOnce(new TypeError("Failed to fetch"))
+      .mockResolvedValue(respond({ body: '0:"again"\n' }));
+    submit(dom.listeners, new dom.FakeForm({ action: "/people", method: "post" }));
+    await settle();
+    await settle();
+    expect(fetch.mock.calls.map((call) => call[0])).toEqual(["/people", "/people/9", "/products/1"]);
+  });
+
+  it("does not fetch the page again once a navigation replaced it", async () => {
+    stopForReal();
+    globalThis.fetch.mockResolvedValue(respond({ body: '0:"next"\n' }));
+    click(dom.listeners, "/products/2");
+    await settle();
+    globalThis.fetch.mockRejectedValue(new TypeError("Failed to fetch"));
+    click(dom.listeners, "/products/3");
+    await settle();
+    await settle();
+    expect(fetch.mock.calls.map((call) => call[0])).toEqual(["/products/2", "/products/3"]);
+  });
+
+  // Review 19-2a R3 — the navigation that stopped the document failed: the user
+  // is still on that page, whose boundaries would keep their fallback.
+  it("fetches the page again when the navigation that stopped it fails", async () => {
+    globalThis.document.readyState = "loading";
+    globalThis.fetch
+      .mockRejectedValueOnce(new TypeError("Failed to fetch"))
+      .mockResolvedValue(respond({ body: '0:"again"\n' }));
+    submit(dom.listeners, new dom.FakeForm({ action: "/people", method: "post" }));
+    await settle();
+    await settle();
+    expect(window.stop).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledTimes(2);
+    expect(fetch.mock.calls[1][0]).toBe("/products/1");
+  });
+
+  it("does not fetch the page again after a failure when nothing was stopped", async () => {
+    globalThis.document.readyState = "complete";
+    globalThis.fetch.mockRejectedValue(new TypeError("Failed to fetch"));
+    submit(dom.listeners, new dom.FakeForm({ action: "/people", method: "post" }));
+    await settle();
+    await settle();
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+
+  // revalidate() stays on the page: stopping the document would also fail the
+  // page's other requests in flight (a server function, a useQuery).
+  it("leaves the document loading for revalidate()", async () => {
+    globalThis.document.readyState = "loading";
+    await globalThis.__ruact_revalidate();
+    expect(window.stop).not.toHaveBeenCalled();
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+
+  // Stopped, the document's rows would read as a response cut short, which
+  // the page being left reports: they are told first.
+  it("tells the document's rows it is left before it stops it", async () => {
+    globalThis.document.readyState = "loading";
+    const told = [];
+    globalThis.document.dispatchEvent = vi.fn((event) => {
+      told.push([event.type, window.stop.mock.calls.length]);
+      return true;
+    });
+    click(dom.listeners, "/products/2");
+    await settle();
+    expect(told).toEqual([[LEAVE_EVENT, 0]]);
+    expect(window.stop).toHaveBeenCalledTimes(1);
+  });
+});

data/vendor/javascript/vite-plugin-ruact/runtime/dev-overlay.js

@@ -9,7 +9,11 @@
 
 const OVERLAY_ID = "ruact-dev-overlay";
 
-/** Shows +error+ over the page; a click closes it. */
+/**
+ * Shows +error+ over the page, under the ones already shown (Story 19-2: one
+ * entry per failed <Suspense>); a click closes the overlay, and the next
+ * failure opens it again.
+ */
 export function showDevOverlay(error, doc = globalThis.document) {
   const cause = error?.cause ?? error;
   let overlay = doc.getElementById(OVERLAY_ID);
@@ -23,17 +27,27 @@ export function showDevOverlay(error, doc = globalThis.document) {
       "font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:32px;overflow:auto;" +
       "white-space:pre-wrap;cursor:pointer";
     overlay.addEventListener("click", () => overlay.remove());
+    const title = doc.createElement("h2");
+    title.dataset.overlayTitle = "";
+    const hint = doc.createElement("p");
+    hint.dataset.overlayHint = "";
+    hint.textContent = "Development only. Click to close.";
+    overlay.append(title, hint);
     (doc.body ?? doc.documentElement).appendChild(overlay);
   }
-  const title = doc.createElement("h2");
-  title.textContent = "[ruact] A <Suspense> failed on the server";
+
+  const entry = doc.createElement("section");
+  entry.dataset.overlayEntry = "";
   const message = doc.createElement("p");
   message.dataset.overlayMessage = "";
   message.textContent = cause?.message ?? String(cause);
   const stack = doc.createElement("pre");
   stack.dataset.overlayStack = "";
   stack.textContent = cause?.stack ?? "";
-  const hint = doc.createElement("p");
-  hint.textContent = "Development only. Click to close.";
-  overlay.replaceChildren(title, message, stack, hint);
+  entry.append(message, stack);
+  overlay.insertBefore(entry, overlay.querySelector("[data-overlay-hint]"));
+
+  const count = overlay.querySelectorAll("[data-overlay-entry]").length;
+  overlay.querySelector("[data-overlay-title]").textContent =
+    count === 1 ? "[ruact] A <Suspense> failed on the server" : `[ruact] ${count} <Suspense> failed on the server`;
 }