ruact 0.0.14 → 0.0.16

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

@@ -11,6 +11,8 @@
 // classifier is never a silent no-op; and a Flight response still renders.
 
 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";
 
 const ORIGIN = "http://localhost:3000";
@@ -431,3 +433,85 @@ describe("ruact-router — the navigation boundary (Story 17.0f)", () => {
     });
   });
 });
+
+// Story 17-0d — a navigation reads the same byte parser as the initial load.
+// The stream is cut inside a `T` length, inside a multibyte code point and
+// inside a text body; the page must still render with the exact text.
+describe("ruact-router — long text in a streamed navigation (Story 17-0d)", () => {
+  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();
+  });
+
+  it("renders every framed string, whatever the chunk boundaries", async () => {
+    const bytes = new Uint8Array(fs.readFileSync(path.join(FIXTURES, "text_framing.txt")));
+    const expected = JSON.parse(fs.readFileSync(path.join(FIXTURES, "text_framing_expected.json"), "utf8"));
+    const firstLength = Buffer.from(bytes).indexOf(":T") + 3;      // inside the first hex length
+    const multibyte = Buffer.from(bytes).indexOf(Buffer.from("ç")) + 1; // between the two bytes of "ç"
+    const cuts = [0, firstLength, multibyte, multibyte + 700, bytes.length];
+    const body = new ReadableStream({
+      start(controller) {
+        for (let i = 0; i < cuts.length - 1; i += 1) controller.enqueue(bytes.slice(cuts[i], cuts[i + 1]));
+        controller.close();
+      },
+    });
+    const headers = new Headers({ "content-type": "text/x-component" });
+    fetch.mockResolvedValue({ ok: true, status: 200, statusText: "200", url: `${ORIGIN}/posts`, headers, body });
+
+    click(dom.listeners, "/posts");
+    await settle();
+
+    expect(onError).not.toHaveBeenCalled();
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+    expect(onNavigate.mock.calls[0][0]).toEqual(expected);
+  });
+});
+
+// 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");
+  let dom;
+  let onNavigate;
+
+  beforeEach(() => {
+    dom = installDom();
+    onNavigate = vi.fn();
+    globalThis.fetch = vi.fn();
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    setupRouter({ onNavigate, moduleRegistry: {}, onError: vi.fn() });
+  });
+
+  afterEach(() => {
+    teardownRouter();
+    vi.restoreAllMocks();
+  });
+
+  it("hands the component a Date and a BigInt", async () => {
+    const body = fs.readFileSync(path.join(FIXTURES, "scalar_round_trip.txt"), "utf8");
+    fetch.mockResolvedValue(respond({ body, url: `${ORIGIN}/events` }));
+
+    click(dom.listeners, "/events");
+    await settle();
+
+    const tree = onNavigate.mock.calls[0][0];
+    expect(tree.time).toBeInstanceOf(Date);
+    expect(tree.time.toISOString()).toBe("2026-09-08T12:30:45.123Z");
+    expect(tree.big).toBe(9007199254740993n);
+    expect(tree.nested.ids).toEqual([1152921504606846976n, 7]);
+  });
+});
+

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

@@ -4,6 +4,19 @@
  * Handles the subset we emit from the Ruby server:
  *   - Model rows:  <hex_id>:<json>\n
  *   - Import rows: <hex_id>:I[moduleId, exportName, chunks]\n
+ *   - Error rows:  <hex_id>:E<json>\n
+ *   - Text rows:   <hex_id>:T<hex_byte_length>,<utf-8 text>   (NO newline)
+ *
+ * Every string of 1024 bytes or more travels as a text row, framed by its
+ * byte length, and is referenced from a model row as "$T<hex_id>". Both the
+ * initial load and the router read rows through ONE incremental byte parser
+ * ({@link createRowParser}), so a payload decodes the same whichever way it
+ * arrives and wherever the network splits it.
+ *
+ * Values JSON cannot hold travel as "$"-prefixed strings and are rebuilt:
+ * "$D<ISO 8601>" → Date, "$n<decimal>" → BigInt, "$NaN"/"$Infinity"/… →
+ * the number, "$undefined" → undefined. A literal string that starts with
+ * "$" arrives escaped as "$$…".
  *
  * Returns a React element tree by recursively converting
  * ["$", type, key, props] tuples into React.createElement calls.
@@ -13,7 +26,7 @@
  *   - "$L{hex}" referencing a missing row → React.lazy() that resolves when the row arrives
  */
 
-import { createElement, Fragment, lazy, Suspense } from "react";
+import { createElement, Fragment, isValidElement, lazy, Suspense } from "react";
 
 // ---------------------------------------------------------------------------
 // Pending chunk registry — used for streaming Suspense deferred rows
@@ -72,6 +85,7 @@ export function parseLine(line) {
 
   const colonIdx = line.indexOf(":");
   if (colonIdx === -1) return null;
+  if (colonIdx === 0) return null; // hint row (":H…") — a preload signal, no id
 
   const id   = parseInt(line.slice(0, colonIdx), 16);
   const rest = line.slice(colonIdx + 1);
@@ -97,6 +111,140 @@ export function parseLine(line) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Incremental row parser (bytes in, rows out)
+// ---------------------------------------------------------------------------
+
+const COLON   = 0x3a;
+const COMMA   = 0x2c;
+const NEWLINE = 0x0a;
+const TAG_T   = 0x54;
+const HEX     = /^[0-9a-fA-F]+$/;
+
+const utf8 = new TextDecoder("utf-8");
+
+/**
+ * An incremental Flight row parser. Feed it the payload's bytes in any number
+ * of chunks — split anywhere, including inside a header, a length or a UTF-8
+ * code point — and it calls `onRow({ id, row })` once per complete row.
+ *
+ * Text rows are framed by their BYTE length, so the parser works on bytes,
+ * never on decoded strings: a string's `length` counts UTF-16 units and would
+ * misread any non-ASCII text.
+ *
+ * `end()` must be called when the input is complete. A truncated text row or
+ * a malformed length throws instead of yielding a partial payload.
+ *
+ * @param {(parsed: { id: number, row: object }) => void} onRow
+ * @returns {{ push(bytes: Uint8Array): void, end(): void }}
+ */
+export function createRowParser(onRow) {
+  // A growable byte buffer: `buf[pos, len)` is what is not parsed yet. It
+  // grows by doubling and is compacted only when full, so a large row arriving
+  // in many small chunks costs linear time, not a copy per chunk.
+  let buf = new Uint8Array(4096);
+  let len = 0;
+  let pos = 0;
+  // How far the newline search for the row at `pos` already got, so a long
+  // model row is not re-scanned from its start on every chunk.
+  let scanned = 0;
+
+  const append = (bytes) => {
+    if (len + bytes.length > buf.length) {
+      const rest = len - pos;
+      if (rest + bytes.length <= buf.length) {
+        buf.copyWithin(0, pos, len);
+      } else {
+        let capacity = buf.length * 2;
+        while (capacity < rest + bytes.length) capacity *= 2;
+        const next = new Uint8Array(capacity);
+        next.set(buf.subarray(pos, len));
+        buf = next;
+      }
+      scanned = Math.max(0, scanned - pos);
+      len = rest;
+      pos = 0;
+    }
+    buf.set(bytes, len);
+    len += bytes.length;
+  };
+
+  const advance = (to) => {
+    pos = to;
+    scanned = 0;
+  };
+
+  // Parses one row starting at `pos`. Returns false when it needs more bytes.
+  const step = () => {
+    const view  = buf.subarray(0, len);
+    const colon = view.indexOf(COLON, pos);
+
+    // A line with no colon before its end is not a row (a stray line from a
+    // proxy, say): skip it rather than let it swallow the row after it.
+    const headerEnd = colon === -1 ? len : colon;
+    const stray = view.subarray(pos, headerEnd).indexOf(NEWLINE);
+    if (stray !== -1) {
+      advance(pos + stray + 1);
+      return true;
+    }
+    if (colon === -1 || colon + 1 >= len) return false;
+
+    const header = utf8.decode(view.subarray(pos, colon)).trim();
+
+    if (HEX.test(header) && view[colon + 1] === TAG_T) {
+      const comma = view.indexOf(COMMA, colon + 2);
+      if (comma === -1) return false;
+      const lengthHex = utf8.decode(view.subarray(colon + 2, comma));
+      if (!HEX.test(lengthHex)) {
+        throw new Error(`[flight-client] Malformed text row length "${lengthHex}" for row ${header}`);
+      }
+      const length = parseInt(lengthHex, 16);
+      const start  = comma + 1;
+      if (start + length > len) return false;
+      onRow({ id: parseInt(header, 16), row: { kind: "text", value: utf8.decode(view.subarray(start, start + length)) } });
+      advance(start + length);
+      return true;
+    }
+
+    const newline = view.indexOf(NEWLINE, Math.max(colon + 1, scanned));
+    if (newline === -1) {
+      scanned = len;
+      return false;
+    }
+    const parsed = parseLine(utf8.decode(view.subarray(pos, newline)));
+    if (parsed) onRow(parsed);
+    advance(newline + 1);
+    return true;
+  };
+
+  return {
+    push(bytes) {
+      append(bytes);
+      while (pos < len) {
+        // Blank separators between rows carry nothing.
+        while (pos < len && (buf[pos] === NEWLINE || buf[pos] === 0x0d)) advance(pos + 1);
+        if (pos >= len || !step()) break;
+      }
+    },
+
+    end() {
+      const rest = utf8.decode(buf.subarray(pos, len));
+      if (!rest.trim()) return;
+      // A last model/import/error row without its trailing newline is complete
+      // as far as JSON can tell; a cut-off text row or header is not.
+      const colon = rest.indexOf(":");
+      const header = colon === -1 ? "" : rest.slice(0, colon).trim();
+      if (colon !== -1 && HEX.test(header) && rest[colon + 1] === "T") {
+        throw new Error(`[flight-client] Truncated Flight payload: text row ${header} is incomplete`);
+      }
+      const parsed = colon === -1 ? null : parseLine(rest);
+      if (!parsed) throw new Error(`[flight-client] Truncated Flight payload: "${rest.slice(0, 40)}"`);
+      onRow(parsed);
+      advance(len);
+    },
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Tree building
 // ---------------------------------------------------------------------------
@@ -125,7 +273,7 @@ export function buildTreeFromRows(rows, moduleRegistry) {
  * @param {Object} moduleRegistry
  */
 export function buildTree(value, rows, moduleRegistry) {
-  return _buildTree(value, rows, moduleRegistry);
+  return rootTree(_buildTree(value, rows, moduleRegistry));
 }
 
 /**
@@ -136,11 +284,10 @@ export function buildTree(value, rows, moduleRegistry) {
  * @param {Object}  moduleRegistry
  */
 export function createFromFlightPayload(payload, moduleRegistry) {
-  const rows = new Map();
-  for (const line of payload.split("\n")) {
-    const parsed = parseLine(line);
-    if (parsed) rows.set(parsed.id, parsed.row);
-  }
+  const rows   = new Map();
+  const parser = createRowParser(({ id, row }) => rows.set(id, row));
+  parser.push(new TextEncoder().encode(payload));
+  parser.end();
   return buildTreeFromRows(rows, moduleRegistry);
 }
 
@@ -159,6 +306,21 @@ function _buildTree(value, rows, moduleRegistry) {
     if (value === "$Infinity")    return Infinity;
     if (value === "$-Infinity")   return -Infinity;
     if (value === "$-0")          return -0;
+    if (value.startsWith("$T")) {
+      const refId = parseInt(value.slice(2), 16);
+      const row   = rows.get(refId);
+      if (!row || row.kind !== "text") {
+        throw new Error(`[flight-client] Text row ${value.slice(2)} is referenced but was never received`);
+      }
+      return row.value;
+    }
+    // Story 17-0c — the serializer emits Ruby Time/DateTime as "$D<ISO 8601>"
+    // and integers outside JS's safe range as "$n<decimal>". The component
+    // gets the type, not the marker. (A literal string starting with "$" was
+    // escaped to "$$…" on the server and is handled above.)
+    if (value.startsWith("$D")) return new Date(value.slice(2));
+    // Guarded: a malformed marker must not throw and take the page down.
+    if (value.startsWith("$n") && /^-?\d+$/.test(value.slice(2))) return BigInt(value.slice(2));
     if (value.startsWith("$L")) {
       const refId = parseInt(value.slice(2), 16);
       const row   = rows.get(refId);
@@ -179,7 +341,7 @@ function _buildTree(value, rows, moduleRegistry) {
       }
       // Model row — deferred content already arrived (non-streaming path).
       // Wrap in a function component so it can be used as a type in createElement.
-      const content = _buildTree(row.value, rows, moduleRegistry);
+      const content = rootTree(_buildTree(row.value, rows, moduleRegistry));
       return () => content;
     }
     return value;
@@ -193,7 +355,7 @@ function _buildTree(value, rows, moduleRegistry) {
       const type   = resolveType(rawType, rows, moduleRegistry);
       const props  = buildProps(rawProps, rows, moduleRegistry);
       if (key != null) props.key = key;
-      return createElement(type, props);
+      return createWithChildren(type, props);
     }
 
     // Plain array — fragment children OR a data array sitting in a prop.
@@ -222,6 +384,34 @@ function _buildTree(value, rows, moduleRegistry) {
   return value;
 }
 
+// A server-rendered tree is static: siblings (an <h1> beside a component, the
+// rows of an ERB loop) carry no key on the wire. Handed to React as an ARRAY,
+// they made it log "Each child in a list should have a unique key" — on the
+// Getting Started page itself. Passed as separate arguments, the way JSX
+// compiles `<div><h1/><p/></div>`, they are static children React does not
+// key-check, and nothing is invented: a key the template gave still wins, and
+// reconciliation is the one React does for JSX. Two or more only — a single
+// child or an explicit one-element array keeps its shape (Story 17-0a).
+function createWithChildren(type, props) {
+  const { children } = props;
+  if (!Array.isArray(children) || children.length < 2 || !children.some(isValidElement)) {
+    return createElement(type, props); // a data array passed as `children` stays a plain array
+  }
+  const rest = { ...props };
+  delete rest.children;
+  return createElement(type, rest, ...children);
+}
+
+// The page's root — or a Suspense boundary's deferred content — when it is
+// several siblings: a Fragment of them, for the same reason as above (React
+// logged the warning against <App>).
+function rootTree(tree) {
+  if (Array.isArray(tree) && tree.length >= 2 && tree.some(isValidElement)) {
+    return createElement(Fragment, null, ...tree);
+  }
+  return tree;
+}
+
 function resolveType(rawType, rows, moduleRegistry) {
   if (typeof rawType === "string") {
     if (rawType === "$SS")        return Suspense;                                    // React.Suspense

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

@@ -10,7 +10,7 @@
  */
 
 import {
-  parseLine,
+  createRowParser,
   buildTreeFromRows,
   buildTree,
   resolvePendingChunk,
@@ -33,8 +33,13 @@ export function setupRouter({ onNavigate, moduleRegistry, onError = null }) {
   _moduleRegistry = moduleRegistry;
   _onError        = onError;
 
-  document.addEventListener("click",  handleClick,  { capture: true });
-  document.addEventListener("submit", handleSubmit, { capture: true });
+  // 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,8 +61,8 @@ 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;
@@ -564,11 +569,10 @@ async function _processFlightResponse(response, {
   let   initialTreeSet = false;
   let   redirected     = false;
 
-  const processLine = (line) => {
-    const parsed = parseLine(line);
-    if (!parsed) return;
-
+  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);
@@ -606,25 +610,17 @@ async function _processFlightResponse(response, {
     }
   };
 
-  const reader  = response.body.getReader();
-  const decoder = new TextDecoder();
-  let   buffer  = "";
+  // 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();
 
   while (true) {
     const { done, value } = await reader.read();
     if (done) break;
-
-    buffer += decoder.decode(value, { stream: true });
-
-    let newlineIdx;
-    while ((newlineIdx = buffer.indexOf("\n")) !== -1) {
-      processLine(buffer.slice(0, newlineIdx));
-      buffer = buffer.slice(newlineIdx + 1);
-    }
+    parser.push(value);
   }
-
-  // Handle any remaining content without a trailing newline
-  if (buffer.trim()) processLine(buffer);
+  parser.end();
 
   // Fallback: if row 0 never triggered (shouldn't happen with valid server)
   if (!initialTreeSet && !redirected && rows.has(0)) {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ruact
 version: !ruby/object:Gem::Version
-  version: 0.0.14
+  version: 0.0.16
 platform: ruby
 authors:
 - Luiz Garcia
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-10-02 00:00:00.000000000 Z
+date: 2026-10-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -72,10 +72,12 @@ files:
 - lib/generators/ruact/scaffold/templates/views/show.html.erb.tt
 - lib/ruact.rb
 - lib/ruact/client_manifest.rb
+- lib/ruact/component_attributes.rb
 - lib/ruact/component_contract.rb
 - lib/ruact/configuration.rb
 - lib/ruact/controller.rb
 - lib/ruact/controller/document_rendering.rb
+- lib/ruact/controller/format_negotiation.rb
 - lib/ruact/controller/page_rendering.rb
 - lib/ruact/controller/pages.rb
 - lib/ruact/doctor.rb
@@ -83,11 +85,13 @@ files:
 - lib/ruact/erb_preprocessor_hook.rb
 - lib/ruact/errors.rb
 - lib/ruact/flight.rb
+- lib/ruact/flight/js_date.rb
 - lib/ruact/flight/react_element.rb
 - lib/ruact/flight/renderer.rb
 - lib/ruact/flight/request.rb
 - lib/ruact/flight/row_emitter.rb
 - lib/ruact/flight/serializer.rb
+- lib/ruact/flight/utf8.rb
 - lib/ruact/html_converter.rb
 - lib/ruact/layout_source.rb
 - lib/ruact/manifest_resolver.rb
@@ -95,12 +99,14 @@ files:
 - lib/ruact/packaging.rb
 - lib/ruact/query.rb
 - lib/ruact/railtie.rb
+- lib/ruact/redirect_path.rb
 - lib/ruact/render_context.rb
 - lib/ruact/render_pipeline.rb
 - lib/ruact/routing.rb
 - lib/ruact/serializable.rb
 - lib/ruact/server.rb
 - lib/ruact/server_functions.rb
+- lib/ruact/server_functions/action_assigns.rb
 - lib/ruact/server_functions/backtrace_cleaner.rb
 - lib/ruact/server_functions/bucket_two_payload.rb
 - lib/ruact/server_functions/codegen.rb