pull out validation logic

Author: ealmloff

Cargo.lock

@@ -65,6 +65,7 @@ members = [
     "packages/playwright-tests/fullstack-spread",
     "packages/playwright-tests/fullstack-routing",
     "packages/playwright-tests/fullstack-hydration-order",
+    "packages/playwright-tests/fullstack-hydration-recovery",
     "packages/playwright-tests/suspense-carousel",
     "packages/playwright-tests/nested-suspense",
     "packages/playwright-tests/cli-optimization",

Cargo.toml

@@ -10,6 +10,10 @@ use std::{
 };
 use syn::{spanned::Spanned, token::Brace, Expr};
 
+fn source_prefix_before_column(line: &str, column: usize) -> &str {
+    line.get(..column.saturating_sub(1)).unwrap_or("")
+}
+
 #[derive(Debug)]
 pub struct Writer<'a> {
     pub raw_src: &'a str,
@@ -599,10 +603,14 @@ impl<'a> Writer<'a> {
 
         if brace_line != attr_line {
             // Get the raw line of the attribute
-            let line = self.src.get(attr_line - 1).unwrap_or(&"");
+            let line = attr_line
+                .checked_sub(1)
+                .and_then(|index| self.src.get(index))
+                .copied()
+                .unwrap_or("");
 
             // Only write comments if the line is empty before the attribute start
-            let row_start = line.get(..attr_span.start().column - 1).unwrap_or("");
+            let row_start = source_prefix_before_column(line, attr_span.start().column);
             if !row_start.trim().is_empty() {
                 return Ok(());
             }
@@ -1168,15 +1176,13 @@ impl<'a> Writer<'a> {
     }
 
     fn leading_row_is_empty(&self, location: LineColumn) -> bool {
-        let Some(line) = self.src.get(location.line - 1) else {
-            return false;
-        };
-
-        let Some(sub) = line.get(..location.column - 1) else {
+        let Some(line) = location.line.checked_sub(1).and_then(|index| self.src.get(index)) else {
             return false;
         };
 
-        sub.trim().is_empty()
+        source_prefix_before_column(line, location.column)
+            .trim()
+            .is_empty()
     }
 
     #[allow(clippy::map_entry)]
@@ -1281,3 +1287,40 @@ impl<'a> Writer<'a> {
         false
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use quote::quote_spanned;
+    use syn::parse::Parser;
+
+    #[test]
+    fn source_prefix_before_column_handles_zero_column() {
+        assert_eq!(source_prefix_before_column("class: \"value\"", 0), "");
+    }
+
+    #[test]
+    fn source_prefix_before_column_matches_existing_prefix_behavior() {
+        assert_eq!(source_prefix_before_column("class: \"value\"", 3), "cl");
+    }
+
+    #[test]
+    fn leading_row_is_empty_handles_zero_column() {
+        let writer = Writer::new("class: \"value\"", IndentOptions::default());
+        assert!(writer.leading_row_is_empty(LineColumn { line: 1, column: 0 }));
+    }
+
+    #[test]
+    fn write_rsx_call_handles_generated_call_site_spans() {
+        let body = CallBody::parse_strict
+            .parse2(quote_spanned!(Span::call_site()=> div {
+                class: "value",
+                p { "child" }
+            }))
+            .unwrap();
+
+        let mut writer = Writer::new("", IndentOptions::default());
+        writer.write_rsx_call(&body).unwrap();
+        assert!(writer.consume().is_some());
+    }
+}

packages/autofmt/src/writer.rs

@@ -59,3 +59,35 @@ pub mod extensions {
     pub use crate::attribute_groups::{GlobalAttributesExtension, SvgAttributesExtension};
     pub use crate::elements::extensions::*;
 }
+
+/// HTML boolean attributes. These attributes are rendered without a value when
+/// truthy (e.g. `<input disabled>` rather than `<input disabled="true">`).
+pub const BOOL_ATTRS: &[&str] = &[
+    "allowfullscreen",
+    "allowpaymentrequest",
+    "async",
+    "autofocus",
+    "autoplay",
+    "checked",
+    "controls",
+    "default",
+    "defer",
+    "disabled",
+    "formnovalidate",
+    "hidden",
+    "ismap",
+    "itemscope",
+    "loop",
+    "multiple",
+    "muted",
+    "nomodule",
+    "novalidate",
+    "open",
+    "playsinline",
+    "readonly",
+    "required",
+    "reversed",
+    "selected",
+    "truespeed",
+    "webkitdirectory",
+];

packages/html/src/lib.rs

@@ -0,0 +1,150 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+const SERVER_URL = "http://localhost:7978";
+const HYDRATION_MISMATCH_MESSAGE = "[HYDRATION MISMATCH]";
+const HYDRATION_RECOVERY_MESSAGE =
+  "Hydration mismatches detected. Falling back to a full client rebuild.";
+
+async function waitForBuild(request) {
+  for (let i = 0; i < 30; i++) {
+    const response = await request.get(SERVER_URL);
+    const text = await response.text();
+    if (response.status() === 200 && text.includes('id="recovery-button"')) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+
+  throw new Error("Timed out waiting for the hydration recovery fixture to build");
+}
+
+test("hydration mismatch recovers nested structure, text, attributes, and placeholders", async ({
+  page,
+  request,
+}) => {
+  await waitForBuild(request);
+
+  const serverResponse = await request.get(SERVER_URL);
+  expect(serverResponse.status()).toBe(200);
+
+  const serverHtml = await serverResponse.text();
+  expect(serverHtml).toContain('id="recovery-button"');
+  expect(serverHtml).toContain("Server text content");
+  expect(serverHtml).toContain("Server placeholder content");
+  expect(serverHtml).not.toContain('role="status"');
+  expect(serverHtml).not.toContain('title="Client attribute title"');
+
+  const consoleMessages = [];
+  const consoleErrors = [];
+  const pageErrors = [];
+
+  page.on("console", (msg) => {
+    consoleMessages.push(msg.text());
+    if (msg.type() === "error") {
+      consoleErrors.push(msg.text());
+    }
+  });
+  page.on("pageerror", (error) => {
+    pageErrors.push(error.message);
+  });
+
+  await page.goto(SERVER_URL);
+  await page.waitForLoadState("networkidle");
+
+  const mismatchMessages = () =>
+    consoleMessages.filter((message) =>
+      message.includes(HYDRATION_MISMATCH_MESSAGE),
+    );
+  const hasMismatch = (...fragments) =>
+    mismatchMessages().some((message) =>
+      fragments.every((fragment) => message.includes(fragment)),
+    );
+
+  await expect
+    .poll(() => mismatchMessages().length, {
+      message: "expected one warning for each mismatch class",
+    })
+    .toBe(4);
+  await expect
+    .poll(
+      () =>
+        consoleMessages.filter((message) =>
+          message.includes(HYDRATION_RECOVERY_MESSAGE),
+        ).length,
+      { message: "expected the hydration fallback warning to be logged once" },
+    )
+    .toBe(1);
+
+  expect(
+    mismatchMessages().every(
+      (message) =>
+        message.includes("Reason:") &&
+        message.includes("--- expected") &&
+        message.includes("+++ actual") &&
+        message.includes("@@"),
+    ),
+  ).toBeTruthy();
+
+  expect(
+    hasMismatch(
+      "Reason: Expected <strong>, found <span>.",
+      "-strong {",
+      "+span {",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      'Reason: Expected text "Client text content", found text "Server text content".',
+      '-    "Client text content",',
+      '+    "Server text content",',
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "Reason: Expected <div> with attributes [role, title], but the DOM node is missing them.",
+      'role: "status"',
+      'title: "Client attribute title"',
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "Reason: Expected placeholder (comment node), found node type 1.",
+      "VNode::placeholder()",
+      "+    p {",
+    ),
+  ).toBeTruthy();
+
+  const recoveryButton = page.locator("#recovery-button");
+  await expect(recoveryButton).toHaveCount(1);
+  await expect(recoveryButton).toHaveText("Recovered 0");
+
+  const nestedLeaf = page.locator("#nested-leaf");
+  await expect(nestedLeaf).toHaveCount(1);
+  await expect(nestedLeaf).toHaveJSProperty("tagName", "STRONG");
+  await expect(nestedLeaf).toHaveText("Nested client leaf");
+
+  const textMismatch = page.locator("#text-mismatch");
+  await expect(textMismatch).toHaveText("Client text content");
+
+  const attributeMismatch = page.locator("#attribute-mismatch");
+  await expect(attributeMismatch).toHaveAttribute("role", "status");
+  await expect(attributeMismatch).toHaveAttribute(
+    "title",
+    "Client attribute title",
+  );
+
+  await expect(page.locator("#placeholder-mismatch-shell p")).toHaveCount(0);
+  await expect(page.locator("body")).not.toContainText("Server text content");
+  await expect(page.locator("body")).not.toContainText(
+    "Server placeholder content",
+  );
+
+  await recoveryButton.click();
+  await expect(recoveryButton).toHaveText("Recovered 1");
+  await recoveryButton.click();
+  await expect(recoveryButton).toHaveText("Recovered 2");
+
+  expect(pageErrors).toEqual([]);
+  expect(consoleErrors).toEqual([]);
+});

packages/playwright-tests/fullstack-hydration-recovery.spec.js

@@ -0,0 +1,13 @@
+[package]
+name = "dioxus-playwright-fullstack-hydration-recovery-test"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack"] }
+
+[features]
+default = []
+server = ["dioxus/server"]
+web = ["dioxus/web"]