@tanstack/redact 0.0.17 → 0.0.19

package/src/dom/features/hydration/full.ts

@@ -120,14 +120,7 @@ export class HydrationCursor {
   has(): boolean {
     let n = this.n
     while (n && n !== this.e) {
-      if (n.nodeType === 1) {
-        if ((n as Element).tagName === 'SCRIPT') {
-          n = n.nextSibling
-          continue
-        }
-        return true
-      }
-      if (n.nodeType === 3 && (n as Text).data.trim() !== '') return true
+      if (n.nodeType === 1 || n.nodeType === 3) return true
       n = n.nextSibling
     }
     return false
@@ -171,17 +164,12 @@ export function hydrateRootImpl(
   const target = container as any as Element | Document
   const isDocument = (container as Node).nodeType === 9
   const body = isDocument ? (target as Document).body : null
-  const root = createFiberRoot(target, {
-    ...options,
-    identifierPrefix: options.identifierPrefix ?? ':R',
-  })
+  const root = createFiberRoot(target, options)
 
   installHydrationScrollGuard()
 
   const normalizedInitialChildren =
     isDocument ? normalizeDocumentChildren(initialChildren) : initialChildren
-  let documentBodyFallback = false
-
   let hydrationError: unknown = null
   beginHydration(root)
   try {
@@ -193,36 +181,7 @@ export function hydrateRootImpl(
   }
   endHydration(root)
 
-  if (hydrationError) {
-    if (!isHydrationBailout(hydrationError)) {
-      throw hydrationError
-    }
-    let recoveryContainer: Element | Document = target
-    let recoveryChildren = normalizedInitialChildren
-    const hostRecovery = getRecoverableHostChildren(hydrationError)
-    if (hostRecovery) {
-      recoveryContainer = hostRecovery[0]
-      recoveryChildren = hostRecovery[1]
-    } else if (body) {
-      const bodyChildren = getRecoverableDocumentBodyChildren(hydrationError)
-      if (bodyChildren != null) {
-        documentBodyFallback = true
-        recoveryContainer = body
-        recoveryChildren = bodyChildren
-      }
-    }
-    resetAfterHydrationFailure(root, recoveryContainer)
-    try {
-      root.i = options.identifierPrefix ?? ':r'
-      root.ic = 0
-      flushSyncWork(() => {
-        renderRoot(root, recoveryChildren)
-      })
-    } catch (clientError) {
-      resetAfterHydrationFailure(root, recoveryContainer)
-      throw clientError
-    }
-  }
+  if (hydrationError && !recoverHydration(root, hydrationError)) throw hydrationError
   drainReplayQueue()
 
   return {
@@ -231,7 +190,7 @@ export function hydrateRootImpl(
         const normalized = isDocument ? normalizeDocumentChildren(children) : children
         renderRoot(
           root,
-          documentBodyFallback ? getStaticDocumentBodyChildren(normalized) ?? normalized : normalized,
+          root.c === body ? getStaticDocumentBodyChildren(normalized) ?? normalized : normalized,
         )
       })
     },
@@ -246,8 +205,9 @@ export function hydrateRootImpl(
 // Head elements that we match against server DOM by attribute signature.
 const HEAD_KEY_ATTRS: Record<string, ReadonlyArray<string>> = {
   link: ['rel', 'href', 'sizes', 'type'],
-  meta: ['name', 'property', 'charset', 'http-equiv'],
+  meta: ['name', 'property', 'charSet', 'httpEquiv'],
   script: ['src', 'type'],
+  style: ['id', 'media', 'nonce', 'title'],
 }
 
 const DOCUMENT_HEAD_TAGS = new Set(['base', 'link', 'meta', 'script', 'style', 'title'])
@@ -262,21 +222,17 @@ function headAttrsMatch(
 ): boolean {
   if (CLAIMED.has(el)) return false
   if (!keys) return true
-  let matched = false
   for (const k of keys) {
-    const propVal = props[k] ?? (k === 'http-equiv' ? props.httpEquiv : undefined)
-    const elVal = el.getAttribute(k)
-    // If neither defines it, skip this key; if one defines it, they must match.
+    const propVal = props[k]
+    const elVal = el.getAttribute(attributeName(k))
     if (propVal == null && elVal == null) continue
-    matched = true
-    if (propVal == null || elVal == null) continue // tolerate missing on either side
-    if (String(propVal) !== elVal) return false
+    if (propVal == null || elVal == null || String(propVal) !== elVal) return false
   }
-  // At least one matching signal must be present.
-  return matched
+  return true
 }
 
 export function beginHydration(root: FiberRoot): void {
+  root.ic = 0
   root.h = true
   hydrationCursors.set(root.r, new HydrationCursor(root.c))
 }
@@ -400,13 +356,24 @@ export function adoptHostDom(fiber: Fiber, parent: Fiber): boolean {
     tag === 'svg' ||
     ((candidate as Element).namespaceURI === 'http://www.w3.org/2000/svg' &&
       tag !== 'foreignobject')
+  const syncHydrationProps =
+    !props.suppressHydrationWarning &&
+    canRecoverHydrationPropMismatch(candidate, tag)
   validateHydrationProps(fiber, candidate as Element, props, tag, isSvg)
   for (const k in props) {
-    if (k === 'children') continue
-    if (k[0] === 'o' && k[1] === 'n' && typeof props[k] == 'function') {
+    if (
+      k === 'children' ||
+      k === 'key' ||
+      k === 'ref' ||
+      k === 'suppressHydrationWarning' ||
+      k === 'suppressContentEditableWarning'
+    ) continue
+    if (
+      syncHydrationProps ||
+      (k[0] === 'o' && k[1] === 'n' && typeof props[k] == 'function')
+    ) {
       setProp(candidate as Element, k, props[k], undefined, isSvg)
     }
-    // Non-event props: trust the server HTML, skip
   }
   // Set up child cursor for this host's children
   hydrationCursors.set(fiber, new HydrationCursor(candidate))
@@ -417,16 +384,24 @@ export function adoptTextDom(fiber: Fiber, parent: Fiber, text: string): boolean
   const cursor = hydrationCursors.get(findHostParent(parent))
   if (!cursor) return false
   const candidate = cursor.take()
-  if (!candidate) onMismatch(fiber, null)
+  if (!candidate) {
+    onMismatch(fiber, null)
+    return false
+  }
   if (candidate.nodeType === 3) {
     if ((candidate as Text).data !== text) {
-      if (process.env.NODE_ENV !== 'production') {
-        failHydration(
-          fiber,
-          new Error(`Hydration text mismatch: expected "${text}" but found "${(candidate as Text).data}".`),
-        )
+      const recovered = failHydration(
+        fiber,
+        process.env.NODE_ENV !== 'production'
+          ? new Error(
+              `Hydration text mismatch: expected "${text}" but found "${(candidate as Text).data}".`,
+            )
+          : undefined,
+        canRecoverHydrationPropMismatch(candidate),
+      )
+      if (recovered) {
+        ;(candidate as Text).data = text
       }
-      failHydration(fiber)
     }
     fiber.dom = candidate
     return true
@@ -452,28 +427,41 @@ export function findHostParent(fiber: Fiber): Fiber {
   throw new Error()
 }
 
-function onMismatch(fiber: Fiber, actualNode: ChildNode | null): never {
-  if (process.env.NODE_ENV !== 'production') {
-    failHydration(
-      fiber,
-      new Error(
-        `Hydration mismatch: expected <${(fiber.type as string) ?? 'text'}> but found ${
-          actualNode ? (actualNode.nodeType === 1 ? (actualNode as Element).tagName : 'text') : 'nothing'
-        }.`,
-      ),
-    )
-  }
-  failHydration(fiber)
+function onMismatch(fiber: Fiber, actualNode: ChildNode | null): void {
+  failHydration(
+    fiber,
+    process.env.NODE_ENV !== 'production'
+      ? new Error(
+          `Hydration mismatch: expected <${(fiber.type as string) ?? 'text'}> but found ${
+            actualNode ? (actualNode.nodeType === 1 ? (actualNode as Element).tagName : 'text') : 'nothing'
+          }.`,
+        )
+      : undefined,
+  )
 }
 
-function failHydration(fiber: Fiber, error: Error = new Error(PROD_HYDRATION_ERROR)): never {
+function failHydration(
+  fiber: Fiber,
+  error: Error = new Error(PROD_HYDRATION_ERROR),
+  recoverInPlace = false,
+): boolean {
   const root = findRoot(fiber)
   if (root?.re) {
     root.re(error)
   }
+  if (recoverInPlace) return true
   abortHydration(error, findHostRecoveryParent(fiber) ?? fiber)
 }
 
+function canRecoverHydrationPropMismatch(node: Node, tag?: string): boolean {
+  return (
+    tag === 'html' ||
+    tag === 'head' ||
+    tag === 'body' ||
+    !!node.ownerDocument?.head?.contains(node)
+  )
+}
+
 function findHostRecoveryParent(fiber: Fiber): Fiber | null {
   if (fiber.tag === FiberTag.Text) {
     let directHost = fiber.parent
@@ -523,6 +511,33 @@ function isSafeHostRecoveryElement(fiber: Fiber): boolean {
   return tag !== 'html' && tag !== 'head' && tag !== 'body'
 }
 
+export function recoverHydration(root: FiberRoot, error: unknown): boolean {
+  if (!isHydrationBailout(error)) return false
+
+  let container = root.c as Element | Document
+  let children = root.r.pp?.children ?? null
+  const hostRecovery = getRecoverableHostChildren(error)
+  if (hostRecovery) {
+    container = hostRecovery[0]
+    children = hostRecovery[1]
+  } else if (container.nodeType === 9) {
+    const bodyChildren = getRecoverableDocumentBodyChildren(error)
+    if (bodyChildren != null) {
+      container = (container as Document).body
+      children = bodyChildren
+    }
+  }
+
+  resetAfterHydrationFailure(root, container)
+  try {
+    flushSyncWork(() => renderRoot(root, children))
+  } catch (clientError) {
+    resetAfterHydrationFailure(root, container)
+    throw clientError
+  }
+  return true
+}
+
 function resetAfterHydrationFailure(
   root: FiberRoot,
   container: Element | Document,
@@ -678,6 +693,7 @@ function validateHydrationProps(
 ): void {
   if (props.suppressHydrationWarning) return
 
+  const recoverInPlace = canRecoverHydrationPropMismatch(el, tag)
   let expected: Element | undefined
 
   for (const k in props) {
@@ -692,16 +708,20 @@ function validateHydrationProps(
     ) continue
 
     if (k === 'dangerouslySetInnerHTML') {
-      const probe = document.createElement('div')
-      probe.innerHTML = value?.__html ?? ''
-      if ((el as HTMLElement).innerHTML !== probe.innerHTML) {
-        if (process.env.NODE_ENV !== 'production') {
-          failHydration(
-            fiber,
-            new Error(`Hydration HTML mismatch inside <${tag}>.`),
-          )
-        }
-        failHydration(fiber)
+      let html = '' + (value?.__html ?? '')
+      if (tag !== 'script' && tag !== 'style') {
+        const probe = document.createElement('div')
+        probe.innerHTML = html
+        html = probe.innerHTML
+      }
+      if ((el as HTMLElement).innerHTML !== html) {
+        failHydration(
+          fiber,
+          process.env.NODE_ENV !== 'production'
+            ? new Error(`Hydration HTML mismatch inside <${tag}>.`)
+            : undefined,
+          recoverInPlace,
+        )
       }
       continue
     }
@@ -711,10 +731,13 @@ function validateHydrationProps(
       if (tag === 'input' || tag === 'textarea') {
         if (k === 'value' || props.value == null) {
           if (value != null && (el as HTMLInputElement).value !== '' + value) {
-            if (process.env.NODE_ENV !== 'production') {
-              failHydration(fiber, new Error(`Hydration ${tag} value mismatch on <${tag}>.`))
-            }
-            failHydration(fiber)
+            failHydration(
+              fiber,
+              process.env.NODE_ENV !== 'production'
+                ? new Error(`Hydration ${tag} value mismatch on <${tag}>.`)
+                : undefined,
+              recoverInPlace,
+            )
           }
         }
         continue
@@ -724,10 +747,13 @@ function validateHydrationProps(
     if (tag === 'input' && (k === 'checked' || k === 'defaultChecked')) {
       if (k === 'checked' || props.checked == null) {
         if (value != null && (el as HTMLInputElement).checked !== !!value) {
-          if (process.env.NODE_ENV !== 'production') {
-            failHydration(fiber, new Error(`Hydration checked mismatch on <input>.`))
-          }
-          failHydration(fiber)
+          failHydration(
+            fiber,
+            process.env.NODE_ENV !== 'production'
+              ? new Error(`Hydration checked mismatch on <input>.`)
+              : undefined,
+            recoverInPlace,
+          )
         }
       }
       continue
@@ -735,10 +761,13 @@ function validateHydrationProps(
 
     if (tag === 'option' && k === 'selected') {
       if (value != null && (el as HTMLOptionElement).selected !== !!value) {
-        if (process.env.NODE_ENV !== 'production') {
-          failHydration(fiber, new Error(`Hydration selected mismatch on <option>.`))
-        }
-        failHydration(fiber)
+        failHydration(
+          fiber,
+          process.env.NODE_ENV !== 'production'
+            ? new Error(`Hydration selected mismatch on <option>.`)
+            : undefined,
+          recoverInPlace,
+        )
       }
       continue
     }
@@ -746,14 +775,19 @@ function validateHydrationProps(
     if (k === 'style') {
       expected ??= createHostNode(tag, isSvg)
       setProp(expected, k, value, undefined, isSvg)
-      if ((el as HTMLElement).style.cssText !== (expected as HTMLElement).style.cssText) {
-        if (process.env.NODE_ENV !== 'production') {
-          failHydration(
-            fiber,
-            new Error(`Hydration style mismatch on <${tag}>.`),
-          )
-        }
-        failHydration(fiber)
+      if (
+        !hydrationStylesMatch(
+          (el as HTMLElement).style,
+          (expected as HTMLElement).style,
+        )
+      ) {
+        failHydration(
+          fiber,
+          process.env.NODE_ENV !== 'production'
+            ? new Error(`Hydration style mismatch on <${tag}>.`)
+            : undefined,
+          recoverInPlace,
+        )
       }
       continue
     }
@@ -771,21 +805,34 @@ function validateHydrationProps(
     }
     const actualValue = el.getAttribute(attr)
     if (expectedValue !== actualValue) {
-      if (attr === 'id' && expectedValue != null && actualValue != null) {
-        continue
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        failHydration(
-          fiber,
-          new Error(
-            `Hydration attribute mismatch on <${tag}> for "${attr}": ` +
-              `expected ${formatHydrationValue(expectedValue)} but found ${formatHydrationValue(actualValue)}.`,
-          ),
-        )
-      }
-      failHydration(fiber)
+      failHydration(
+        fiber,
+        process.env.NODE_ENV !== 'production'
+          ? new Error(
+              `Hydration attribute mismatch on <${tag}> for "${attr}": ` +
+                `expected ${formatHydrationValue(expectedValue)} but found ${formatHydrationValue(actualValue)}.`,
+            )
+          : undefined,
+        recoverInPlace,
+      )
+    }
+  }
+}
+
+function hydrationStylesMatch(
+  actual: CSSStyleDeclaration,
+  expected: CSSStyleDeclaration,
+): boolean {
+  for (let index = 0; index < expected.length; index++) {
+    const property = expected.item(index)
+    if (
+      actual.getPropertyValue(property) !== expected.getPropertyValue(property) ||
+      actual.getPropertyPriority(property) !== expected.getPropertyPriority(property)
+    ) {
+      return false
     }
   }
+  return true
 }
 
 function formatHydrationValue(value: string | null): string {

package/src/dom/features/hydration/stub.ts

@@ -74,6 +74,10 @@ export function isHydrationBailout(_error: unknown): _error is HydrationBailoutE
   return false
 }
 
+export function recoverHydration(_root: FiberRoot, _error: unknown): boolean {
+  return false
+}
+
 export function abortHydration(cause: unknown, fiber: Fiber | null = null): never {
   const error = (cause instanceof Error ? cause : new Error('Hydration mismatch.')) as HydrationBailoutError
   ;(error as any).f = fiber

package/src/dom/reconcile.ts

@@ -27,6 +27,7 @@ import {
   clearHydrationCursor,
   findHostParent as findHydrationHost,
   abortHydration,
+  recoverHydration,
 } from './features/hydration'
 
 // ---------------------------------------------------------------------------
@@ -117,7 +118,12 @@ function flushPending(): void {
         root.p.clear()
         pending.sort((a, b) => fiberDepth(a) - fiberDepth(b))
         for (const fiber of pending) {
-          rerenderFiber(fiber, root)
+          try {
+            rerenderFiber(fiber, root)
+          } catch (error) {
+            if (!recoverHydration(root, error)) throw error
+            break
+          }
         }
         runEffects(root)
       }
@@ -815,7 +821,12 @@ function renderHost(fiber: Fiber, domParent: Node, anchor: Node | null): void {
     const hasOpaqueHydrationChildren =
       props.dangerouslySetInnerHTML != null ||
       (parentTag === 'textarea' && (props.value != null || props.defaultValue != null))
-    if (parentTag !== 'head' && parentTag !== 'html' && !hasOpaqueHydrationChildren) {
+    if (
+      parentTag !== 'head' &&
+      parentTag !== 'html' &&
+      parentTag !== 'body' &&
+      !hasOpaqueHydrationChildren
+    ) {
       const cursor = getHydrationCursor(fiber)
       if (cursor) {
         if (cursor.has()) {

package/src/dom/root-internal.ts

@@ -20,7 +20,7 @@ export function createFiberRoot(
     re: options.onRecoverableError,
     ce: options.onCaughtError,
     ue: options.onUncaughtError,
-    i: options.identifierPrefix ?? ':r',
+    i: options.identifierPrefix,
     ic: 0,
     h: false,
   }