@tanstack/redact 0.0.21 → 0.1.1

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

@@ -1,52 +1,109 @@
 import { FiberTag, type Fiber } from '../../../core'
-import { REACT_PROVIDER_TYPE, REACT_CONSUMER_TYPE } from '../../../react'
+import { REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE, REACT_CONSUMER_TYPE } from '../../../react'
 import {
   registerRenderer,
   registerTypeMatcher,
   installCapability,
   reconcileChildren,
   childrenToArray,
+  renderFiber,
+  getHostParent,
+  getAnchor,
 } from '../../reconcile'
 
-function realReadContext(fiber: Fiber, ctx: any): any {
+let changingProviders = 0
+
+function contextValue(fiber: Fiber, ctx: any): any {
   let p: Fiber | null = fiber.parent
   while (p) {
     if (p.tag === FiberTag.Provider && (p.type as any)._context === ctx) {
-      return (p.pp ?? p.mp)?.value
+      return p.pp?.value
     }
     p = p.parent
   }
   return ctx._currentValue
 }
 
+function remember(fiber: Fiber, ctx: any, value: any): void {
+  ;(fiber.cx ??= new Map()).set(ctx, value)
+}
+
+function realReadContext(fiber: Fiber, ctx: any): any {
+  const value = contextValue(fiber, ctx)
+  remember(fiber, ctx, value)
+  // Initial suspended attempts are discarded. Keep their external context
+  // reads on the boundary so a provider can retry them before a promise settles.
+  let child = fiber
+  let p = fiber.parent
+  while (p) {
+    if (p.tag === FiberTag.Provider && p.type._context === ctx) break
+    if (p.tag === FiberTag.Suspense && p.ms?.f !== child) remember(p, ctx, value)
+    child = p
+    p = p.parent
+  }
+  return value
+}
+
+export function ownContextChanged(fiber: Fiber): boolean {
+  if (!changingProviders) return false
+  const reads = fiber.cx
+  if (reads) {
+    for (const [ctx, value] of reads) {
+      if (!Object.is(value, contextValue(fiber, ctx))) return true
+    }
+  }
+  return false
+}
+
+export function hasContextChanged(fiber: Fiber, includeFallback = true): boolean {
+  if (!changingProviders) return false
+  if (ownContextChanged(fiber)) return true
+  let child = fiber.child
+  while (child) {
+    if (hasContextChanged(child)) return true
+    child = child.sibling
+  }
+  return includeFallback && fiber.tag === FiberTag.Suspense && !!fiber.ms?.f && hasContextChanged(fiber.ms.f)
+}
+
+export function renderContextConsumers(fiber: Fiber): void {
+  if (!changingProviders) return
+  let child = fiber.child
+  while (child) {
+    if (child.tag === FiberTag.Suspense ? hasContextChanged(child) : ownContextChanged(child)) {
+      const domParent = getHostParent(child)
+      renderFiber(child, domParent, getAnchor(child, domParent))
+    } else {
+      renderContextConsumers(child)
+    }
+    child = child.sibling
+  }
+}
+
 function renderProvider(fiber: Fiber, domParent: Node, anchor: Node | null): void {
-  const ctx = (fiber.type as any)._context
   const props = fiber.pp ?? {}
-  const prevValue = ctx._currentValue
-  ctx._currentValue = props.value
+  const changed = fiber.mp && !Object.is(fiber.mp.value, props.value)
+  if (changed) changingProviders++
   try {
     reconcileChildren(fiber, childrenToArray(props.children), domParent, anchor)
   } finally {
-    ctx._currentValue = prevValue
+    if (changed) changingProviders--
   }
-  // Also store the value on the fiber so descendants rendering later (via updates)
-  // can read through by walking up.
-  fiber.ms = props.value
   fiber.mp = props
 }
 
 function renderConsumer(fiber: Fiber, domParent: Node, anchor: Node | null): void {
-  const ctx = (fiber.type as any)._context
+  fiber.cx?.clear()
   const props = fiber.pp ?? {}
   const children = props.children
-  const value = realReadContext(fiber, ctx)
+  const value = realReadContext(fiber, (fiber.type as any)._context)
   const rendered = typeof children == 'function' ? children(value) : null
   reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
   fiber.mp = props
 }
 
 registerTypeMatcher((_type, marker) =>
-  marker === REACT_PROVIDER_TYPE
+  marker === REACT_CONTEXT_TYPE || marker === REACT_PROVIDER_TYPE
     ? FiberTag.Provider
     : marker === REACT_CONSUMER_TYPE
       ? FiberTag.Consumer

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

@@ -1,5 +1,5 @@
 import { FiberTag, type Fiber } from '../../../core'
-import { REACT_PROVIDER_TYPE, REACT_CONSUMER_TYPE } from '../../../react'
+import { REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE, REACT_CONSUMER_TYPE } from '../../../react'
 import {
   registerRenderer,
   registerTypeMatcher,
@@ -7,6 +7,12 @@ import {
   childrenToArray,
 } from '../../reconcile'
 
+export function hasContextChanged(_fiber: Fiber, _includeFallback = true): boolean {
+  return false
+}
+export const ownContextChanged = hasContextChanged
+export function renderContextConsumers(_fiber: Fiber): void {}
+
 // Stub: Context feature disabled. Provider elements render as Fragments
 // (value is never propagated — descendants see only the Context's default).
 // Consumer elements still invoke their function-children with the default
@@ -14,16 +20,15 @@ import {
 // The default `readContext` capability returns `ctx._currentValue` without
 // walking, which matches the no-Provider-fibers-in-tree reality.
 function renderConsumerStub(fiber: Fiber, domParent: Node, anchor: Node | null): void {
-  const ctx = (fiber.type as any)._context
   const props = fiber.pp ?? {}
-  const value = ctx._currentValue
-  const rendered = typeof props.children == 'function' ? props.children(value) : null
+  const rendered = typeof props.children == 'function'
+    ? props.children((fiber.type as any)._context._currentValue) : null
   reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
   fiber.mp = props
 }
 
 registerTypeMatcher((_type, marker) =>
-  marker === REACT_PROVIDER_TYPE
+  marker === REACT_CONTEXT_TYPE || marker === REACT_PROVIDER_TYPE
     ? FiberTag.Fragment
     : marker === REACT_CONSUMER_TYPE
       ? FiberTag.Consumer

package/src/dom/features/forward-ref/full.ts

@@ -1,5 +1,5 @@
 import { FiberTag, type Fiber, type ReactNode } from '../../../core'
-import { ReactSharedInternals, REACT_FORWARD_REF_TYPE } from '../../../react'
+import { REACT_FORWARD_REF_TYPE } from '../../../react'
 import {
   registerRenderer,
   registerTypeMatcher,
@@ -8,42 +8,32 @@ import {
   isThenable,
   handleSuspended,
   handleErrorInRender,
+  getForceRerenderingFiber,
 } from '../../reconcile'
-import { makeDispatcher } from '../../dispatcher'
+import { HOOK_BAILOUT, renderWithHooks } from '../../dispatcher'
 
 function renderForwardRef(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const canBail = fiber === getForceRerenderingFiber() && fiber.pp === fiber.mp
+  fiber.cx?.clear()
   const props = fiber.pp ?? {}
   const render = (fiber.type as any).render
   const ref = fiber.ref ?? (props.ref ?? null)
 
-  const prevDispatcher = ReactSharedInternals.H
-  const prevFiber = ReactSharedInternals.F
-  const prevHook = ReactSharedInternals.K
-  const prevIndex = ReactSharedInternals.I
-  ReactSharedInternals.H = makeDispatcher()
-  ReactSharedInternals.F = fiber
-  ReactSharedInternals.K = null
-  ReactSharedInternals.I = 0
-
-  let rendered: ReactNode
+  let rendered: ReactNode | typeof HOOK_BAILOUT
   try {
     const { ref: _omit, ...rest } = props
-    rendered = render(rest, ref)
+    rendered = renderWithHooks(fiber, render, rest, ref, canBail)
   } catch (e: any) {
     if (isThenable(e)) {
       handleSuspended(fiber, e)
-      rendered = null
+      return
     } else {
       handleErrorInRender(fiber, e)
       return
     }
-  } finally {
-    ReactSharedInternals.H = prevDispatcher
-    ReactSharedInternals.F = prevFiber
-    ReactSharedInternals.K = prevHook
-    ReactSharedInternals.I = prevIndex
   }
 
+  if (rendered === HOOK_BAILOUT) return
   reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
   fiber.mp = props
 }

package/src/dom/features/fragment-refs/index.ts

@@ -0,0 +1 @@
+export { createFragmentInstance, updateFragmentHost, refreshFragmentInstances } from '../../fragment-instance'

package/src/dom/features/fragment-refs/stub.ts

@@ -0,0 +1,3 @@
+export function createFragmentInstance(_fiber: unknown): any { return null }
+export function updateFragmentHost(_fiber: unknown, _adding: boolean): void {}
+export function refreshFragmentInstances(_root: unknown): void {}

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

@@ -7,10 +7,12 @@ import {
   type ReactNode,
 } from '../../../core'
 import { attributeName, STRING_BOOLEAN_ATTRS } from '../../../core/attributes'
-import { createHostNode, setProp } from '../../dom'
+import { createHostNode, setProp, syncTextareaValue } from '../../dom'
+import { queueMutation, queueProp, queueText } from '../../commit'
 import { drainReplayQueue } from '../../event-replay'
-import { discardPendingWork, findRoot, flushSyncWork, renderRoot, unmountFiber } from '../../reconcile'
+import { discardPendingWork, discardPendingEffects, findRoot, flushSyncWork, renderRoot, scheduleRootRender, recoverRootError, unmountFiber } from '../../reconcile'
 import { attachRootFiber, createFiberRoot } from '../../root-internal'
+import { componentStack } from '../../error-info'
 
 // Re-export from event-replay so all hydration concerns live behind one
 // feature boundary — the plugin's stub swap strips drainReplayQueue too.
@@ -146,9 +148,9 @@ export function abortHydration(cause: unknown, fiber: Fiber | null = null): neve
 
 interface HydrateRootOptions {
   identifierPrefix?: string
-  onRecoverableError?: (error: unknown) => void
-  onCaughtError?: (error: unknown) => void
-  onUncaughtError?: (error: unknown) => void
+  onRecoverableError?: import('../../../core').RecoverableErrorHandler
+  onCaughtError?: import('../../../core').RecoverableErrorHandler
+  onUncaughtError?: import('../../../core').RecoverableErrorHandler
 }
 
 interface HydratedRoot {
@@ -186,7 +188,7 @@ export function hydrateRootImpl(
 
   return {
     render(children) {
-      flushSyncWork(() => {
+      scheduleRootRender(root, () => {
         const normalized = isDocument ? normalizeDocumentChildren(children) : children
         renderRoot(
           root,
@@ -224,13 +226,19 @@ function headAttrsMatch(
   if (!keys) return true
   for (const k of keys) {
     const propVal = props[k]
-    const elVal = el.getAttribute(attributeName(k))
+    const elVal = hydrationAttribute(el, attributeName(k))
     if (propVal == null && elVal == null) continue
     if (propVal == null || elVal == null || String(propVal) !== elVal) return false
   }
   return true
 }
 
+function hydrationAttribute(el: Element, name: string): string | null {
+  return name === 'nonce' && 'nonce' in el && el.hasAttribute(name)
+    ? (el as HTMLElement).nonce ?? ''
+    : el.getAttribute(name)
+}
+
 export function beginHydration(root: FiberRoot): void {
   root.ic = 0
   root.h = true
@@ -247,7 +255,7 @@ export function endHydration(root: FiberRoot): void {
  * marker emitted by the server. Returns info + advances the cursor past the
  * marker pair (start comment + fallback/real content + end comment).
  */
-export type BoundaryInfo = [0 | 1, number, Comment, Comment]
+export type BoundaryInfo = [0 | 1 | 2 | 3, number, Comment, Comment]
 
 export function tryConsumeBoundary(parent: Fiber): BoundaryInfo | null {
   const cursor = hydrationCursors.get(findHostParent(parent))
@@ -255,9 +263,9 @@ export function tryConsumeBoundary(parent: Fiber): BoundaryInfo | null {
   const peek = cursor.n
   if (!peek || peek.nodeType !== 8) return null
   const data = (peek as Comment).data
-  const m = /^(\$\??)(\d+)$/.exec(data)
+  const m = /^(\$[?!E]?)(\d+)$/.exec(data)
   if (!m) return null
-  const kind = m[1] === '$?' ? 1 : 0
+  const kind = m[1] === '$?' ? 1 : m[1] === '$!' ? 2 : m[1] === '$E' ? 3 : 0
   const id = Number(m[2])
   const startMark = peek as Comment
   // Advance past the start comment
@@ -265,8 +273,11 @@ export function tryConsumeBoundary(parent: Fiber): BoundaryInfo | null {
   // Locate end comment: closest <!--/$-->
   let endMark: Comment | null = null
   let scan = startMark.nextSibling
+  let depth = 0
   while (scan) {
+    if (scan.nodeType === 8 && /^\$[?!E]?\d+$/.test((scan as Comment).data)) depth++
     if (scan.nodeType === 8 && (scan as Comment).data === '/$') {
+      if (depth) { depth--; scan = scan.nextSibling; continue }
       endMark = scan as Comment
       break
     }
@@ -360,26 +371,43 @@ export function adoptHostDom(fiber: Fiber, parent: Fiber): boolean {
     !props.suppressHydrationWarning &&
     canRecoverHydrationPropMismatch(candidate, tag)
   validateHydrationProps(fiber, candidate as Element, props, tag, isSvg)
+  // Form state can change between server paint and hydration. Initialize reset
+  // defaults without treating the live value or selection as a mismatch.
+  if (tag === 'input' || tag === 'textarea') queueHydrationFormState(candidate as Element, props, tag)
   for (const k in props) {
     if (
-      k === 'children' ||
-      k === 'key' ||
-      k === 'ref' ||
-      k === 'suppressHydrationWarning' ||
-      k === 'suppressContentEditableWarning'
-    ) continue
-    if (
-      syncHydrationProps ||
+      (syncHydrationProps &&
+        k !== 'children' && k !== 'key' && k !== 'ref' &&
+        (k !== 'nonce' || hydrationAttribute(candidate as Element, k) !== props[k]) &&
+        k !== 'suppressHydrationWarning' && k !== 'suppressContentEditableWarning' &&
+        !isHydrationFormProp(tag, k)) ||
       (k[0] === 'o' && k[1] === 'n' && typeof props[k] == 'function')
-    ) {
-      setProp(candidate as Element, k, props[k], undefined, isSvg)
-    }
+    ) queueProp(candidate as Element, k, props[k], undefined, isSvg)
   }
   // Set up child cursor for this host's children
   hydrationCursors.set(fiber, new HydrationCursor(candidate))
   return true
 }
 
+function queueHydrationFormState(el: Element, props: any, tag: string): void {
+  queueMutation(() => {
+    if (tag === 'input') {
+      const input = el as HTMLInputElement
+      if (props.type != null) input.type = props.type
+      const value = props.value ?? props.defaultValue
+      if (value != null && (props.value != null || (input.type !== 'submit' && input.type !== 'reset'))) {
+        input.defaultValue = '' + value
+      }
+      // Mark checked as dirty before changing its default, including clean SSR
+      // inputs whose client default differs. This also preserves radio groups.
+      input.checked = input.checked
+      input.defaultChecked = !!(props.checked ?? props.defaultChecked)
+    } else {
+      syncTextareaValue(el as HTMLTextAreaElement, props, true)
+    }
+  })
+}
+
 export function adoptTextDom(fiber: Fiber, parent: Fiber, text: string): boolean {
   const cursor = hydrationCursors.get(findHostParent(parent))
   if (!cursor) return false
@@ -400,7 +428,7 @@ export function adoptTextDom(fiber: Fiber, parent: Fiber, text: string): boolean
         canRecoverHydrationPropMismatch(candidate),
       )
       if (recovered) {
-        ;(candidate as Text).data = text
+        queueText(candidate as Text, text)
       }
     }
     fiber.dom = candidate
@@ -447,7 +475,7 @@ function failHydration(
 ): boolean {
   const root = findRoot(fiber)
   if (root?.re) {
-    root.re(error)
+    root.re(error, { componentStack: componentStack(fiber) })
   }
   if (recoverInPlace) return true
   abortHydration(error, findHostRecoveryParent(fiber) ?? fiber)
@@ -533,6 +561,7 @@ export function recoverHydration(root: FiberRoot, error: unknown): boolean {
     flushSyncWork(() => renderRoot(root, children))
   } catch (clientError) {
     resetAfterHydrationFailure(root, container)
+    if (recoverRootError(clientError)) return true
     throw clientError
   }
   return true
@@ -542,28 +571,30 @@ function resetAfterHydrationFailure(
   root: FiberRoot,
   container: Element | Document,
 ): void {
-  // Retire subscriptions and queued effects without removing the document shell
-  // or host ancestors retained by the recovery container.
-  unmountFiber(root.r, false)
+  // Retire committed subscriptions and portals without removing the document shell.
+  unmountFiber(root.r, container, false)
   discardPendingWork(root)
+  discardPendingEffects(root)
   clearHydrationContainer(container)
   attachRootFiber(root, container)
   root.h = false
 }
 
 function clearHydrationContainer(container: Element | Document): void {
-  if (container.nodeType === 9) {
-    let node = container.firstChild
-    while (node) {
-      const next = node.nextSibling
-      if (node.nodeType !== 10 /* DOCUMENT_TYPE_NODE */) {
-        container.removeChild(node)
+  queueMutation(() => {
+    if (container.nodeType === 9) {
+      let node = container.firstChild
+      while (node) {
+        const next = node.nextSibling
+        if (node.nodeType !== 10 /* DOCUMENT_TYPE_NODE */) {
+          container.removeChild(node)
+        }
+        node = next
       }
-      node = next
+      return
     }
-    return
-  }
-  ;(container as Element).textContent = ''
+    ;(container as Element).textContent = ''
+  })
 }
 
 function getRecoverableHostChildren(
@@ -687,6 +718,14 @@ function createHostElement(type: string, props: Record<string, unknown>): ReactE
   }
 }
 
+function isHydrationFormProp(tag: string, key: string): boolean {
+  return (
+    ((tag === 'input' || tag === 'textarea' || tag === 'select') && (key === 'value' || key === 'defaultValue')) ||
+    (tag === 'input' && (key === 'checked' || key === 'defaultChecked')) ||
+    (tag === 'option' && key === 'selected')
+  )
+}
+
 function validateHydrationProps(
   fiber: Fiber,
   el: Element,
@@ -711,13 +750,14 @@ function validateHydrationProps(
     ) continue
 
     if (k === 'dangerouslySetInnerHTML') {
-      let html = '' + (value?.__html ?? '')
+      let html = value?.__html
+      if (html == null) continue
       if (tag !== 'script' && tag !== 'style') {
-        const probe = document.createElement('div')
+        const probe = createHostNode(tag, isSvg)
         probe.innerHTML = html
         html = probe.innerHTML
       }
-      if ((el as HTMLElement).innerHTML !== html) {
+      if ((el as HTMLElement).innerHTML !== '' + html) {
         failHydration(
           fiber,
           process.env.NODE_ENV !== 'production'
@@ -729,51 +769,7 @@ function validateHydrationProps(
       continue
     }
 
-    if (k === 'value' || k === 'defaultValue') {
-      if (tag === 'select') continue
-      if (tag === 'input' || tag === 'textarea') {
-        if (k === 'value' || props.value == null) {
-          if (value != null && (el as HTMLInputElement).value !== '' + value) {
-            failHydration(
-              fiber,
-              process.env.NODE_ENV !== 'production'
-                ? new Error(`Hydration ${tag} value mismatch on <${tag}>.`)
-                : undefined,
-              recoverInPlace,
-            )
-          }
-        }
-        continue
-      }
-    }
-
-    if (tag === 'input' && (k === 'checked' || k === 'defaultChecked')) {
-      if (k === 'checked' || props.checked == null) {
-        if (value != null && (el as HTMLInputElement).checked !== !!value) {
-          failHydration(
-            fiber,
-            process.env.NODE_ENV !== 'production'
-              ? new Error(`Hydration checked mismatch on <input>.`)
-              : undefined,
-            recoverInPlace,
-          )
-        }
-      }
-      continue
-    }
-
-    if (tag === 'option' && k === 'selected') {
-      if (value != null && (el as HTMLOptionElement).selected !== !!value) {
-        failHydration(
-          fiber,
-          process.env.NODE_ENV !== 'production'
-            ? new Error(`Hydration selected mismatch on <option>.`)
-            : undefined,
-          recoverInPlace,
-        )
-      }
-      continue
-    }
+    if (isHydrationFormProp(tag, k)) continue
 
     if (k === 'style') {
       expected ??= createHostNode(tag, isSvg)
@@ -805,12 +801,15 @@ function validateHydrationProps(
     } else if (k === 'muted' && !isSvg && (tag === 'video' || tag === 'audio')) {
       // The muted property controls playback; defaultMuted reflects the SSR attribute.
       expectedValue = value ? '' : null
+    } else if (stringifiedBoolean && k.length > 5) {
+      // These attributes use setAttribute string coercion, not DOM property normalization.
+      expectedValue = '' + value
     } else {
       expected ??= createHostNode(tag, isSvg)
       setProp(expected, k, value, undefined, isSvg)
       expectedValue = expected.getAttribute(attr)
     }
-    const actualValue = el.getAttribute(attr)
+    const actualValue = hydrationAttribute(el, attr)
     if (expectedValue !== actualValue) {
       failHydration(
         fiber,

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

@@ -24,7 +24,7 @@ export class HydrationCursor {
   }
 }
 
-export type BoundaryInfo = [0 | 1, number, Comment, Comment]
+export type BoundaryInfo = [0 | 1 | 2 | 3, number, Comment, Comment]
 
 export function beginHydration(_root: FiberRoot): void {
   throw new Error(

package/src/dom/features/index.ts

@@ -9,3 +9,4 @@ import './memo'
 import './forward-ref'
 import './lazy'
 import './class'
+import './activity'

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

@@ -10,6 +10,7 @@ import {
   renderFiber,
   getForceRerenderingFiber,
 } from '../../reconcile'
+import { ownContextChanged, renderContextConsumers } from '../context'
 
 function shallowEqual(a: any, b: any): boolean {
   if (a === b) return true
@@ -33,10 +34,10 @@ function renderMemo(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   // useSyncExternalStore notification), props haven't changed by definition —
   // bailing would swallow the state change and the subscriber never re-runs.
   // rerenderFiber tags the fiber so we skip the gate here.
-  const bypassMemo = fiber === getForceRerenderingFiber()
+  const bypassMemo = fiber.dy || fiber === getForceRerenderingFiber()
   const eq = !bypassMemo && prev && (compare ? compare(prev, props) : shallowEqual(prev, props))
-  if (eq) {
-    // Re-render children with previous output (already in tree)
+  if (eq && !ownContextChanged(fiber)) {
+    renderContextConsumers(fiber)
     return
   }