@tanstack/redact 0.0.15 → 0.0.17

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

@@ -6,6 +6,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from '../../../core'
+import { attributeName } from '../../../core/attributes'
 import { createHostNode, setProp } from '../../dom'
 import { drainReplayQueue } from '../../event-replay'
 import { discardPendingWork, findRoot, flushSyncWork, renderRoot } from '../../reconcile'
@@ -119,7 +120,14 @@ export class HydrationCursor {
   has(): boolean {
     let n = this.n
     while (n && n !== this.e) {
-      if (n.nodeType === 1 || n.nodeType === 3) return true
+      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
       n = n.nextSibling
     }
     return false
@@ -163,7 +171,10 @@ 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)
+  const root = createFiberRoot(target, {
+    ...options,
+    identifierPrefix: options.identifierPrefix ?? ':R',
+  })
 
   installHydrationScrollGuard()
 
@@ -202,6 +213,8 @@ export function hydrateRootImpl(
     }
     resetAfterHydrationFailure(root, recoveryContainer)
     try {
+      root.i = options.identifierPrefix ?? ':r'
+      root.ic = 0
       flushSyncWork(() => {
         renderRoot(root, recoveryChildren)
       })
@@ -490,14 +503,19 @@ function findHostRecoveryParent(fiber: Fiber): Fiber | null {
 }
 
 function findNearestSafeHostAboveComposite(fiber: Fiber | null): Fiber | null {
+  let host: Fiber | null = null
   let f = fiber
   while (f) {
     if (f.tag === FiberTag.Host && f.dom) {
-      return isSafeHostRecoveryElement(f) ? f : null
+      if (!isSafeHostRecoveryElement(f)) return null
+      const parentTag = f.parent?.tag as number
+      if (!host || (parentTag > FiberTag.Text && parentTag < FiberTag.Suspense)) {
+        host = f
+      }
     }
     f = f.parent
   }
-  return null
+  return host
 }
 
 function isSafeHostRecoveryElement(fiber: Fiber): boolean {
@@ -535,10 +553,8 @@ function getRecoverableHostChildren(
 ): [Element, ReactNode] | null {
   const host = error.f
   if (
-    !host ||
-    host.tag !== FiberTag.Host ||
+    host?.tag !== FiberTag.Host ||
     !host.dom ||
-    !isSafeHostRecoveryElement(host) ||
     !findNearestSafeHostAboveComposite(host.parent)
   ) {
     return null
@@ -743,7 +759,7 @@ function validateHydrationProps(
     }
 
     const stringifiedBoolean = k.startsWith('aria-') || k.startsWith('data-')
-    const attr = k === 'className' ? 'class' : k === 'htmlFor' ? 'for' : stringifiedBoolean ? k : k.toLowerCase()
+    const attr = attributeName(k, isSvg)
 
     let expectedValue: string | null
     if (value == null || (value === false && !stringifiedBoolean)) {
@@ -755,6 +771,9 @@ 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,

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

@@ -104,7 +104,7 @@ function renderSuspense(fiber: Fiber, domParent: Node, anchor: Node | null): voi
   // Snapshot whether we have an existing committed primary tree before
   // attempting the new render. If the new attempt suspends and we did have a
   // committed primary, we keep it (hidden) rather than destroying it.
-  const hadCommittedPrimary = fiber.mp !== undefined && fiber.child !== null
+  const hadCommittedPrimary = fiber.mp && fiber.child
 
   const prevHandler = suspendHandler
   let pendingThenable: any
@@ -125,12 +125,12 @@ function renderSuspense(fiber: Fiber, domParent: Node, anchor: Node | null): voi
     }
     pendingThenable.then(onSettle, onSettle)
 
-    if (hadCommittedPrimary && fiber.child) {
+    if (hadCommittedPrimary) {
       // Hide the primary subtree's root host doms so the fallback is the only
       // thing visible, but the underlying nodes (and their scroll/state/focus)
       // survive. Save original `display` for the resume path.
       const hidden: Array<[HTMLElement, string]> = []
-      let c: Fiber | null = fiber.child
+      let c: Fiber | null = hadCommittedPrimary
       while (c) {
         hideRootHostDoms(c, hidden)
         c = c.sibling
@@ -172,11 +172,9 @@ function renderSuspense(fiber: Fiber, domParent: Node, anchor: Node | null): voi
 // the root hides the whole element). Used by the hide-on-suspend path.
 function hideRootHostDoms(fiber: Fiber, out: Array<[HTMLElement, string]>): void {
   if (fiber.tag === FiberTag.Host) {
-    const el = fiber.dom as HTMLElement | null
-    if (el) {
-      out.push([el, el.style.display])
-      el.style.display = 'none'
-    }
+    const el = fiber.dom as HTMLElement
+    out.push([el, el.style.display])
+    el.style.display = 'none'
     return
   }
   if (fiber.tag === FiberTag.Portal) return
@@ -294,11 +292,11 @@ function recoverFallbackHydration(fiber: Fiber, fallback: any, parent: HTMLEleme
 
 function rehydrateBoundary(fiber: Fiber): void {
   const state = fiber.ms
-  if (!state || !state.b || !state.e) return
+  if (!state?.b || !state.e) return
 
   const root = findRoot(fiber)
   const parent = state.b.parentNode as Node
-  if (!root || !parent) return
+  if (!(root && parent)) return
 
   // Unmount existing fallback subtree. Its DOM has already been removed by $RC
   // (or at least its container); unmounting here cleans up fibers + fx.

package/src/dom/root-internal.ts

@@ -21,6 +21,7 @@ export function createFiberRoot(
     ce: options.onCaughtError,
     ue: options.onUncaughtError,
     i: options.identifierPrefix ?? ':r',
+    ic: 0,
     h: false,
   }
   rootFiber.root = root
@@ -34,6 +35,7 @@ export function attachRootFiber(
 ): void {
   const rootFiber = createFiber(FiberTag.Root, null, null)
   root.c = container as any
+  root.ic = 0
   rootFiber.root = root
   rootFiber.sn = container
   root.r = rootFiber

package/src/server/escape.ts

@@ -1,3 +1,5 @@
+import { attributeName } from '../core/attributes'
+
 const ATTR_MAP: Record<string, string> = {
   '&': '&amp;',
   '"': '&quot;',
@@ -48,17 +50,6 @@ export const VOID_ELEMENTS = new Set([
 
 export const RAW_TEXT_ELEMENTS = new Set(['script', 'style'])
 
-// Map JSX prop names to HTML attribute names where they differ
-export const ATTR_ALIASES: Record<string, string> = {
-  className: 'class',
-  htmlFor: 'for',
-  httpEquiv: 'http-equiv',
-  acceptCharset: 'accept-charset',
-  crossOrigin: 'crossorigin',
-  viewBox: 'viewBox', // SVG keeps camelCase
-  noModule: 'nomodule',
-}
-
 const BOOLEAN_ATTRS = new Set([
   'allowfullscreen',
   'async',
@@ -87,7 +78,7 @@ const BOOLEAN_ATTRS = new Set([
   'selected',
 ])
 
-export function attrToHtml(name: string, value: unknown): string {
+export function attrToHtml(name: string, value: unknown, isSvg = false): string {
   if (
     name === 'children' ||
     name === 'key' ||
@@ -103,7 +94,7 @@ export function attrToHtml(name: string, value: unknown): string {
   if (name[0] === 'o' && name[1] === 'n' && typeof value === 'function') return ''
   if (value == null) return ''
 
-  const htmlName = ATTR_ALIASES[name] ?? name.toLowerCase()
+  const htmlName = attributeName(name, isSvg)
 
   // aria-* and data-* stringify booleans to `"true"`/`"false"` rather than
   // using boolean-attribute presence semantics — matches React and the ARIA

package/src/server/walk.ts

@@ -44,6 +44,7 @@ export interface WalkOptions {
   nextBoundaryId: () => number
   bootstrapped?: boolean | undefined
   isBoundaryResolution?: boolean | undefined
+  isSvg?: boolean | undefined
   /**
    * Tracks whether the most recent emission within the *current text flow*
    * ended with a text node. When the next emission is also text, we emit a
@@ -232,6 +233,7 @@ function walkHost(
   props: Record<string, any>,
   opts: WalkOptions,
 ): void {
+  const isSvg = opts.isSvg || tag === 'svg'
   // <textarea value="..."> serializes its value as a TEXT CHILD, not an
   // attribute. `defaultValue` is the fallback when `value` is absent. This
   // matches React and the HTML spec — `<textarea value="x">` is not valid
@@ -282,13 +284,13 @@ function walkHost(
     if (isInput && (k === 'defaultValue' || k === 'defaultChecked')) continue
     if (isSelect && (k === 'value' || k === 'defaultValue')) continue
     if (isOption && k === 'selected') continue
-    opts.emit(attrToHtml(k, props[k]))
+    opts.emit(attrToHtml(k, props[k], isSvg))
   }
   if (inputValueAttr !== undefined) {
-    opts.emit(attrToHtml('value', inputValueAttr))
+    opts.emit(attrToHtml('value', inputValueAttr, isSvg))
   }
   if (inputCheckedAttr !== undefined) {
-    opts.emit(attrToHtml('checked', inputCheckedAttr))
+    opts.emit(attrToHtml('checked', inputCheckedAttr, isSvg))
   }
   if (isOption) {
     const selectVal = currentSelectValue()
@@ -313,7 +315,11 @@ function walkHost(
   // Opening a host element starts a fresh text flow context for its children.
   // Children's text separator tracking is independent of the outer context.
   const parentTextState = opts.textState
-  const childOpts: WalkOptions = { ...opts, textState: { lastWasText: false } }
+  const childOpts: WalkOptions = {
+    ...opts,
+    isSvg: isSvg && tag !== 'foreignObject',
+    textState: { lastWasText: false },
+  }
 
   if (tag === 'html' && !hasHeadChild(props.children)) {
     opts.emit('<head></head>')