From d755af5ca0ae44bf57ad0b32148b4a0c92307f67 Mon Sep 17 00:00:00 2001
From: Bendik Aagaard Lynghaug <bendik.lynghaug@gmail.com>
Date: Tue, 8 Sep 2026 19:32:37 +0200
Subject: [PATCH] fix(html): hydration mismatch detection ignores <script>
 elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Server pages legitimately carry scripts (state serialization, analytics)
that are spent by hydration time and that client views never render —
they are noise to the detector, and morph dropping them is harmless.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
---
 packages/html/hydrate.js           |  5 ++++-
 packages/html/test/hydrate.test.js | 12 ++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/html/hydrate.js b/packages/html/hydrate.js
index 8656dbf..e06b7db 100644
--- a/packages/html/hydrate.js
+++ b/packages/html/hydrate.js
@@ -87,12 +87,15 @@ function firstDifference (a, b, path) {
 }
 
 // child nodes that matter for comparison: everything except
-// whitespace-only text nodes
+// whitespace-only text nodes and <script> elements — server pages
+// legitimately carry scripts (state serialization, analytics) that are
+// already spent by hydration time and that client views never render
 function significant (childNodes) {
   const out = []
   for (let i = 0; i < childNodes.length; i++) {
     const node = childNodes[i]
     if (node.nodeType === 3 && !node.nodeValue.trim()) continue
+    if (node.nodeType === 1 && node.nodeName === 'SCRIPT') continue
     out.push(node)
   }
   return out
diff --git a/packages/html/test/hydrate.test.js b/packages/html/test/hydrate.test.js
index c6c80e0..a1c2000 100644
--- a/packages/html/test/hydrate.test.js
+++ b/packages/html/test/hydrate.test.js
@@ -67,6 +67,18 @@ test('child count mismatches are reported', () => {
   assert.strictEqual(reported.reason, 'children')
 })
 
+test('server-only <script> elements are not reported as mismatches', () => {
+  // server pages carry state/analytics scripts the client never renders;
+  // they are spent by hydration time (morph may drop them — harmless)
+  const wrap = document.createElement('div')
+  wrap.innerHTML = '<div><h1>hi</h1><script>window.x=1</script></div>'
+  const server = wrap.firstChild
+  const client = html`<div><h1>hi</h1></div>`
+  let reported = null
+  hydrate(server, client, { onMismatch: (d) => { reported = d } })
+  assert.strictEqual(reported, null)
+})
+
 test('mismatch detection is optional and hydrate still morphs without it', () => {
   const server = html`<p>old</p>`
   const client = html`<p>new</p>`