@tanstack/redact 0.0.21 → 0.1.1

package/src/dom/dom.ts

@@ -9,6 +9,7 @@ const BOOLEAN_ATTRS = new Set([
   'autoplay',
   'checked',
   'controls',
+  'credentialless',
   'default',
   'defer',
   'disabled',
@@ -51,6 +52,54 @@ export function isSvgElement(el: Element): boolean {
   return (el as any).ownerSVGElement !== undefined || el.tagName === 'svg'
 }
 
+export function syncInputValue(el: HTMLInputElement, props: any, prev?: any): void {
+  if (!prev) {
+    el.checked = el.defaultChecked = !!(props.checked ?? props.defaultChecked)
+  } else if (props.checked != null) {
+    el.checked = !!props.checked
+  } else if (props.defaultChecked != null) {
+    el.defaultChecked = !!props.defaultChecked
+  }
+  const value = props.value
+  const fallback = props.defaultValue
+  if (!prev) {
+    if (value == null && (el.type === 'submit' || el.type === 'reset')) return
+    if (value != null || fallback != null) {
+      const initial = '' + (value ?? fallback)
+      if (el.value !== initial) el.value = initial
+      el.defaultValue = initial
+    }
+    return
+  }
+  if (value != null) {
+    // Number inputs keep equivalent user spelling, including trailing zeroes.
+    if (el.type === 'number' ? (value === 0 && el.value === '') || el.value != value : el.value !== '' + value) {
+      el.value = '' + value
+    }
+    const nextDefault = el.type === 'number' && el.value == value ? el.value : '' + value
+    if (el.defaultValue !== nextDefault) el.defaultValue = nextDefault
+  } else if (fallback != null) {
+    if (el.defaultValue !== '' + fallback) el.defaultValue = '' + fallback
+  } else if (prev.defaultValue != null || el.type === 'submit' || el.type === 'reset') {
+    el.removeAttribute('value')
+  }
+}
+
+export function syncTextareaValue(el: HTMLTextAreaElement, props: any, mounting = false): void {
+  if (mounting) {
+    const children = props.children
+    const initial = props.value ?? props.defaultValue ?? (Array.isArray(children) ? children[0] : children) ?? ''
+    el.defaultValue = initial
+    // The strict check also preserves React's clean numeric-default state.
+    if (initial !== '' && el.textContent === initial) el.value = initial
+    return
+  }
+  const value = props.value
+  if (value != null && el.value !== '' + value) el.value = '' + value
+  const fallback = props.defaultValue ?? value ?? ''
+  if (el.defaultValue !== '' + fallback) el.defaultValue = '' + fallback
+}
+
 export function setProp(
   el: Element,
   name: string,
@@ -59,6 +108,14 @@ export function setProp(
   isSvg: boolean,
 ): void {
   if (name === 'children' || name === 'key' || name === 'ref') return
+  // These names need no alias or boolean-attribute normalization.
+  if (name.length > 5 && (name.charCodeAt(0) === 97 || name.charCodeAt(0) === 100)) {
+    if (name.startsWith('aria-') || name.startsWith('data-')) {
+      if (next == null) el.removeAttribute(name)
+      else el.setAttribute(name, '' + next)
+      return
+    }
+  }
   const attr = attributeName(name, isSvg)
 
   // defaultValue / defaultChecked are IDL-property-only — they seed the
@@ -76,19 +133,8 @@ export function setProp(
     return
   }
 
-  if (name === 'className') {
-    if (isSvg) {
-      if (next == null) el.removeAttribute('class')
-      else el.setAttribute('class', '' + next)
-    } else {
-      ;(el as HTMLElement).className = next == null ? '' : '' + next
-    }
-    return
-  }
-
-  if (name === 'class') {
-    if (next == null) el.removeAttribute('class')
-    else el.setAttribute('class', '' + next)
+  if (name === 'className' && !isSvg) {
+    ;(el as HTMLElement).className = next == null ? '' : '' + next
     return
   }
 
@@ -105,17 +151,11 @@ export function setProp(
   }
 
   if (name[0] === 'o' && name[1] === 'n') {
-    setEventHandler(el, name, next, prev)
+    setEventHandler(el, name, next)
     return
   }
 
-  if (name === 'htmlFor') {
-    if (next == null) el.removeAttribute('for')
-    else el.setAttribute('for', '' + next)
-    return
-  }
-
-  if (STRING_BOOLEAN_ATTRS.has(attr)) {
+  if (name === 'className' || name === 'class' || name === 'htmlFor' || STRING_BOOLEAN_ATTRS.has(attr)) {
     if (next == null) el.removeAttribute(attr)
     else el.setAttribute(attr, '' + next)
     return
@@ -128,32 +168,12 @@ export function setProp(
     } catch {}
   }
 
-  if (BOOLEAN_ATTRS.has(name.toLowerCase())) {
-    if (next) el.setAttribute(attr, '')
-    else el.removeAttribute(attr)
-    return
-  }
-
-  // aria-* and data-* attributes stringify booleans to `"true"`/`"false"`
-  // rather than using the HTML boolean-attribute presence/absence semantics.
-  // This matches React and the ARIA spec (aria-hidden="false" is meaningful).
-  if (name.length > 5 && (name.charCodeAt(0) === 97 /* a */ || name.charCodeAt(0) === 100 /* d */)) {
-    if (name.startsWith('aria-') || name.startsWith('data-')) {
-      if (next == null) {
-        el.removeAttribute(attr)
-      } else {
-        el.setAttribute(attr, '' + next)
-      }
-      return
-    }
-  }
+  if (BOOLEAN_ATTRS.has(attr)) next = !!next
 
   if (next == null || next === false) {
     el.removeAttribute(attr)
-  } else if (next === true) {
-    el.setAttribute(attr, '')
   } else {
-    el.setAttribute(attr, '' + next)
+    el.setAttribute(attr, next === true ? '' : next)
   }
 }
 
@@ -241,7 +261,7 @@ export interface SyntheticEvent extends Event {
   currentTarget: EventTarget & Element
 }
 
-function setEventHandler(el: Element, name: string, next: any, prev: any): void {
+function setEventHandler(el: Element, name: string, next: any): void {
   // Only function handlers are accepted. Reject strings/objects/etc — the
   // legacy `onclick="..."` HTML attribute (string handler) is a known XSS
   // vector if a parent spreads untrusted props onto a host element. React
@@ -256,13 +276,11 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
   // `onInput` on the same text input — which both dispatch from the native
   // `input` event — can coexist without clobbering each other's handlers.
   const handlers = ((el as any).__handlers ||= Object.create(null))
-  const key = name
-
-  const existing = handlers[key]
+  const existing = handlers[name]
 
   if (existing && !next) {
-    el.removeEventListener(existing.event, existing.listener, existing.capture)
-    handlers[key] = null
+    el.removeEventListener(existing.event, existing.listener, capture)
+    handlers[name] = null
     return
   }
 
@@ -271,7 +289,6 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
       current: next as Function,
       listener: null as any,
       event: eventName,
-      capture,
     }
     entry.listener = (e: Event) => {
       // React hands handlers a SyntheticEvent that carries `.nativeEvent`.
@@ -282,7 +299,7 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
       if ((e as any).nativeEvent === undefined) (e as any).nativeEvent = e
       entry.current(e)
     }
-    handlers[key] = entry
+    handlers[name] = entry
     el.addEventListener(eventName, entry.listener, capture)
     return
   }
@@ -291,10 +308,9 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
     // Re-bind if the effective DOM event changed (e.g. <input> whose `type`
     // flipped from "text" to "checkbox" — onChange should now follow `change`
     // instead of `input`). This is rare but keeps semantics correct.
-    if (existing.event !== eventName || existing.capture !== capture) {
-      el.removeEventListener(existing.event, existing.listener, existing.capture)
+    if (existing.event !== eventName) {
+      el.removeEventListener(existing.event, existing.listener, capture)
       existing.event = eventName
-      existing.capture = capture
       el.addEventListener(eventName, existing.listener, capture)
     }
     existing.current = next

package/src/dom/error-info.ts

@@ -0,0 +1,15 @@
+import { FiberTag, type Fiber } from '../core'
+
+export function componentStack(fiber: Fiber | null): string {
+  let stack = ''
+  for (; fiber; fiber = fiber.parent) {
+    let type = fiber.type
+    while (type && typeof type === 'object') type = type.type || type.render
+    const name = typeof type === 'string' ? type
+      : typeof type === 'function' ? type.displayName || type.name || 'Anonymous'
+      : fiber.tag === FiberTag.Suspense ? 'Suspense'
+      : fiber.tag === FiberTag.Activity ? 'Activity' : ''
+    if (name) stack += '\n    at ' + name
+  }
+  return stack
+}

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

@@ -0,0 +1,166 @@
+import { FiberTag, type Fiber } from '../../../core'
+import { REACT_ACTIVITY_TYPE } from '../../../react/activity'
+import { onCommitRollback, queueMutation } from '../../commit'
+import { retainedEffects as effects, inSuspensePrimary, setLayoutDisconnected, walkRetained as walk } from '../../retained-effects'
+import {
+  attachRef,
+  childrenToArray,
+  detachRef,
+  enqueueEffect,
+  findRoot,
+  flushFiberCommits,
+  getCurrentRoot,
+  handleCommitError,
+  installCapability,
+  reconcileChildren,
+  registerRenderer,
+  registerTypeMatcher,
+  scheduleLifecycle,
+  scheduleUpdate,
+} from '../../reconcile'
+
+// Retain effect descriptions, not subscriptions, while a subtree is hidden.
+// Weak keys keep this bookkeeping out of fibers that do not use Activity.
+const disconnected = new WeakSet<Fiber>()
+const hiddenDoms = new WeakSet<Fiber>()
+
+function setMembership(set: WeakSet<Fiber>, fiber: Fiber, present: boolean): boolean {
+  const previous = set.has(fiber)
+  if (previous === present) return previous
+  onCommitRollback(() => { if (previous) set.add(fiber); else set.delete(fiber) })
+  if (present) set.add(fiber)
+  else set.delete(fiber)
+  return previous
+}
+
+function isHidden(fiber: Fiber): boolean {
+  if (!(fiber.root ?? findRoot(fiber))?.a) return false
+  for (let parent: Fiber | null = fiber; parent; parent = parent.parent) {
+    if (parent.tag === FiberTag.Activity && parent.pp?.mode === 'hidden') return true
+  }
+  return false
+}
+
+function report(fiber: Fiber, fn: () => void): void {
+  try { fn() } catch (error) { handleCommitError(fiber, error) }
+}
+
+function disconnect(fiber: Fiber): void {
+  if (disconnected.has(fiber)) return
+  setMembership(disconnected, fiber, true)
+  queueMutation(() => {
+    // Insertion effects remain connected, just as they do in React.
+    const insertion = new Set<() => void>()
+    for (const [hook, effect] of effects.get(fiber) ?? []) {
+      if (effect.t === 2 && hook.c) insertion.add(hook.c)
+    }
+    if (fiber.cu) {
+      const keep = fiber.cu.filter(cleanup => insertion.has(cleanup))
+      for (const cleanup of fiber.cu) {
+        if (!insertion.has(cleanup)) report(fiber, cleanup)
+      }
+      fiber.cu = keep.length ? keep : null
+    }
+    for (const [hook, effect] of effects.get(fiber) ?? []) {
+      if (effect.t !== 2) hook.c = null
+    }
+    detachRef(fiber.cr ?? fiber.ref)
+    fiber.cr = null
+    fiber.rc = null
+    const instance = fiber.sn?._fiber === fiber ? fiber.sn : null
+    if (!fiber.ld && instance?.componentWillUnmount) {
+      const props = instance.props, state = instance.state, committed = fiber.ms?.c
+      if (committed) { instance.props = committed.props; instance.state = committed.state }
+      try { report(fiber, () => instance.componentWillUnmount()) }
+      finally { instance.props = props; instance.state = state }
+    }
+  })
+}
+
+function prepare(fiber: Fiber): void {
+  if (!isHidden(fiber) || disconnected.has(fiber)) return
+  if (fiber.mp == null) setMembership(disconnected, fiber, true)
+  else disconnect(fiber)
+}
+
+function needsHiddenDom(fiber: Fiber): boolean {
+  for (let parent = fiber.parent; parent; parent = parent.parent) {
+    if (parent.tag === FiberTag.Activity && parent.pp?.mode === 'hidden') return true
+    if (parent.tag === FiberTag.Host) return false
+    // A portal starts a new DOM tree, but keeps the parent's Activity state.
+    if (parent.tag === FiberTag.Portal) return isHidden(parent)
+  }
+  return false
+}
+
+function syncDom(fiber: Fiber): void {
+  if (!(fiber.root ?? findRoot(fiber))?.a) return
+  if (!fiber.dom || (fiber.tag !== FiberTag.Host && fiber.tag !== FiberTag.Text)) return
+  if (needsHiddenDom(fiber)) {
+    setMembership(hiddenDoms, fiber, true)
+    queueMutation(() => {
+      if (fiber.tag === FiberTag.Text) fiber.dom!.nodeValue = ''
+      else (fiber.dom as HTMLElement).style.setProperty('display', 'none', 'important')
+    })
+  } else if (setMembership(hiddenDoms, fiber, false)) {
+    // A Suspense fallback can remain active after its Activity is revealed.
+    // Its preserved primary DOM must stay hidden until that boundary resumes.
+    for (let parent = fiber.parent; parent; parent = parent.parent) {
+      if (parent.tag === FiberTag.Suspense && parent.ms?.d?.some(([node]: [Node, string]) => node === fiber.dom)) return
+    }
+    const props = fiber.pp
+    queueMutation(() => {
+      if (fiber.tag === FiberTag.Text) fiber.dom!.nodeValue = props
+      else {
+        const display = props?.style?.display
+        ;(fiber.dom as HTMLElement).style.display = display == null || typeof display === 'boolean' ? '' : ('' + display).trim()
+      }
+    })
+  }
+}
+
+function reconnect(fiber: Fiber): void {
+  syncDom(fiber)
+  if (isHidden(fiber) || inSuspensePrimary(fiber) || !setMembership(disconnected, fiber, false)) return
+  setLayoutDisconnected(fiber, false)
+  const instance = fiber.sn?._fiber === fiber ? fiber.sn : null
+  if (fiber.tag === FiberTag.Host || fiber.tag === FiberTag.Resource) attachRef(fiber, fiber.dom)
+  else if (instance || fiber.tag === FiberTag.Fragment) attachRef(fiber, fiber.sn)
+  for (const effect of effects.get(fiber)?.values() ?? []) {
+    if (effect.t !== 2) enqueueEffect(fiber, effect)
+  }
+  if (instance?.componentDidMount) {
+    scheduleLifecycle(fiber, () => instance.componentDidMount())
+  }
+  flushFiberCommits(fiber)
+}
+
+function finish(fiber: Fiber): void {
+  if (fiber.tag === FiberTag.Suspense && (fiber.root ?? findRoot(fiber))?.a) walk(fiber, reconnect, true)
+  else syncDom(fiber)
+}
+
+function renderActivity(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const root = fiber.root ?? findRoot(fiber)
+  if (root) root.a = true
+  const props = fiber.pp ?? {}
+  // Hidden content is absent from server HTML. Mount it after hydration so it
+  // cannot consume a following visible sibling's hydration cursor.
+  if (getCurrentRoot()?.h && props.mode === 'hidden' && !fiber.mp) {
+    fiber.mp = props
+    queueMicrotask(() => scheduleUpdate(fiber))
+    return
+  }
+  if (isHidden(fiber)) walk(fiber, prepare)
+  else walk(fiber, syncDom)
+  reconcileChildren(fiber, childrenToArray(props.children), domParent, anchor)
+  walk(fiber, reconnect, true)
+  fiber.mp = props
+}
+
+installCapability('isActivityHidden', isHidden)
+installCapability('activityIsDisconnected', fiber => disconnected.has(fiber))
+installCapability('prepareActivityFiber', prepare)
+installCapability('syncActivity', finish)
+registerTypeMatcher(type => type === REACT_ACTIVITY_TYPE ? FiberTag.Activity : null)
+registerRenderer(FiberTag.Activity, renderActivity)

package/src/dom/features/activity/index.ts

@@ -0,0 +1 @@
+export * from './full'

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

@@ -0,0 +1,14 @@
+import { FiberTag, type Fiber } from '../../../core'
+import { REACT_ACTIVITY_TYPE } from '../../../react/activity'
+import { childrenToArray, reconcileChildren, registerRenderer, registerTypeMatcher } from '../../reconcile'
+
+// Explicit small-preset downgrade: hidden children unmount instead of being
+// retained. Showing them again creates fresh state, DOM, effects, and refs.
+function renderActivity(fiber: Fiber, parent: Node, anchor: Node | null): void {
+  const props = fiber.pp ?? {}
+  reconcileChildren(fiber, props.mode === 'hidden' ? [] : childrenToArray(props.children), parent, anchor)
+  fiber.mp = props
+}
+
+registerTypeMatcher(type => type === REACT_ACTIVITY_TYPE ? FiberTag.Activity : null)
+registerRenderer(FiberTag.Activity, renderActivity)

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

@@ -1,4 +1,5 @@
 import { FiberTag, type Fiber, type ReactNode } from '../../../core'
+import { checkpointCommit, rewindCommit, queueBeforeMutation, queueMutation } from '../../commit'
 import {
   registerRenderer,
   reconcileChildren,
@@ -8,17 +9,30 @@ import {
   isThenable,
   handleSuspended,
   handleErrorInRender,
+  readContext,
+  attachRef,
+  syncRefIfChanged,
+  isActivityHidden,
+  layoutIsDisconnected,
+  RenderErrorCapture,
+  handleCommitError,
 } from '../../reconcile'
 
 function renderClass(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  fiber.cx?.clear()
   const Ctor = fiber.type as any
   let instance = fiber.sn
   const props = fiber.pp ?? {}
   const isNew = !instance
+  const previous = fiber.ms?.c
+  let didRender = true
+  let captured = fiber.ms?.error instanceof RenderErrorCapture ? fiber.ms.error as RenderErrorCapture : undefined
+  if (captured) delete fiber.ms.error
 
   // Class contextType: read the current value of the subscribed context so
   // `this.context` reflects the nearest Provider. Evaluated every render.
-  const ctxValue = Ctor.contextType ? Ctor.contextType._currentValue : undefined
+  const ctxValue = Ctor.contextType ? readContext(fiber, Ctor.contextType) : undefined
+  const contextChanged = instance && !Object.is(instance.context, ctxValue)
 
   if (isNew) {
     instance = new Ctor(props, ctxValue)
@@ -47,39 +61,31 @@ function renderClass(fiber: Fiber, domParent: Node, anchor: Node | null): void {
       if (d) instance.state = { ...instance.state, ...d }
     }
   } else {
-    const prevProps = instance.props
-    const prevState = instance.state
     // Refresh context on every render — Providers higher up may have changed.
     instance.context = ctxValue
     if (Ctor.getDerivedStateFromProps) {
       const d = Ctor.getDerivedStateFromProps(props, instance.state)
       if (d) instance.state = { ...instance.state, ...d }
     }
-    if (instance.shouldComponentUpdate) {
+    if (!captured && instance.shouldComponentUpdate && !contextChanged) {
       if (!instance.shouldComponentUpdate(props, instance.state, instance.context)) {
-        instance.props = props
-        fiber.mp = props
-        // Still need to render children with previous output
-        if (fiber.ms?.r) {
-          reconcileChildren(fiber, childrenToArray(fiber.ms.r), domParent, anchor)
-        }
-        return
+        didRender = false
       }
     }
     instance.props = props
-    // New snapshot must win over any stale one from a previous render —
-    // otherwise componentDidUpdate keeps seeing the original props and can
-    // ping-pong setState forever.
-    fiber.ms = { ...(fiber.ms ?? {}), p: prevProps, s: prevState }
+  }
+  if (captured && Ctor.getDerivedStateFromError) {
+    const update = Ctor.getDerivedStateFromError(captured.error)
+    if (update != null) instance.state = { ...instance.state, ...update }
   }
 
   let rendered: ReactNode
   try {
-    rendered = instance.render()
+    rendered = captured && !Ctor.getDerivedStateFromError ? null : didRender ? instance.render() : fiber.ms?.r
   } catch (e: any) {
     if (isThenable(e)) {
       handleSuspended(fiber, e)
-      rendered = null
+      return
     } else {
       handleErrorInRender(fiber, e)
       return
@@ -87,24 +93,62 @@ function renderClass(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   }
   fiber.ms = { ...(fiber.ms ?? {}), r: rendered }
 
-  reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  const canCatch = Ctor.getDerivedStateFromError || instance.componentDidCatch
+  if (canCatch) fiber.ms.b = Ctor
+  if (canCatch && fiber.root) fiber.root.eb = true
+  const checkpoint = canCatch ? checkpointCommit(fiber) : -1
+  try {
+    reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  } catch (error) {
+    if (!(error instanceof RenderErrorCapture) || error.boundary !== fiber) throw error
+    rewindCommit(checkpoint)
+    captured = error
+    didRender = true
+    if (Ctor.getDerivedStateFromError) {
+      const update = Ctor.getDerivedStateFromError(error.error)
+      if (update != null) instance.state = { ...instance.state, ...update }
+      try { rendered = instance.render() } catch (fallbackError) {
+        handleErrorInRender(fiber, fallbackError)
+        return
+      }
+    } else rendered = null
+    fiber.ms = { ...(fiber.ms ?? {}), r: rendered }
+    reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  }
   fiber.mp = props
+  const state = instance.state
+  queueMutation(() => { fiber.ms.c = { props, state } })
+
+  if (isNew) attachRef(fiber, instance)
+  else syncRefIfChanged(fiber, instance)
 
   // Schedule lifecycle
   if (isNew) {
-    if (instance.componentDidMount || instance.componentWillUnmount) {
-      scheduleLifecycle(fiber, () => {
-        // An abandoned render never mounted, so it has no unmount lifecycle.
-        if (instance.componentWillUnmount) {
-          fiber.cu ||= []
-          fiber.cu.push(() => instance.componentWillUnmount())
+    if (instance.componentDidMount) {
+      scheduleLifecycle(fiber, () => instance.componentDidMount())
+    }
+  } else if (previous && didRender) {
+    let snapshot: any
+    if (instance.getSnapshotBeforeUpdate && !layoutIsDisconnected(fiber)) {
+      queueBeforeMutation(() => {
+        if (!fiber.um && !fiber.pd && !isActivityHidden(fiber) && !layoutIsDisconnected(fiber)) {
+          try { snapshot = instance.getSnapshotBeforeUpdate(previous.props, previous.state) }
+          catch (error) { handleCommitError(fiber, error) }
         }
-        instance.componentDidMount?.()
       })
     }
-  } else if (instance.componentDidUpdate) {
-    const { p, s } = fiber.ms ?? {}
-    scheduleLifecycle(fiber, () => instance.componentDidUpdate(p, s))
+    if (instance.componentDidUpdate) {
+      scheduleLifecycle(fiber, () => instance.componentDidUpdate(previous.props, previous.state, snapshot))
+    }
+  }
+  if (captured) {
+    const error = captured.error
+    const info = { componentStack: captured.stack }
+    scheduleLifecycle(fiber, () => {
+      try { fiber.root?.ce?.(error, { ...info, errorBoundary: instance }) }
+      catch (callbackError) { setTimeout(() => { throw callbackError }) }
+      instance.componentDidCatch?.(error, info)
+    })
   }
 }