@tanstack/redact 0.0.21 → 0.1.0

package/src/dom/dispatcher.ts

@@ -1,6 +1,9 @@
-import type { Hook, Fiber, FiberRoot, Effect } from '../core'
-import { ReactSharedInternals, REACT_CONTEXT_TYPE } from '../react'
-import { scheduleUpdate, enqueueEffect, readContext } from './reconcile'
+import type { Hook, Fiber, FiberRoot, Effect, ReactNode } from '../core'
+import { ReactSharedInternals, REACT_CONTEXT_TYPE, startTransition } from '../react'
+import { scheduleUpdate, enqueueEffect, readContext, rememberActivityEffect, handleCommitError } from './reconcile'
+import { REACT_RECOVERABLE_TYPE } from '../core/browser'
+import { queueCommitEffects } from './commit'
+import { deferTransitionPassive } from './features/view-transition'
 
 function getCurrentFiber(): Fiber {
   const f = ReactSharedInternals.F
@@ -14,32 +17,9 @@ function getCurrentFiber(): Fiber {
 }
 
 function nextHook(): Hook {
-  const fiber = getCurrentFiber()
-  const idx = ReactSharedInternals.I++
-
-  let prev = ReactSharedInternals.K
-
-  if (idx === 0) {
-    if (fiber.hooks) {
-      ReactSharedInternals.K = fiber.hooks
-      return fiber.hooks
-    }
-    const h: Hook = { s: undefined, q: undefined, d: undefined, c: undefined, n: null }
-    fiber.hooks = h
-    ReactSharedInternals.K = h
-    return h
-  }
-
-  if (prev && prev.n) {
-    ReactSharedInternals.K = prev.n
-    return prev.n
-  }
-
-  const h: Hook = { s: undefined, q: undefined, d: undefined, c: undefined, n: null }
-  if (prev) prev.n = h
-  else fiber.hooks = h
-  ReactSharedInternals.K = h
-  return h
+  const hooks = getCurrentFiber().hooks ||= []
+  const index = ReactSharedInternals.I++
+  return hooks[index] ||= { s: undefined, q: undefined, d: undefined, c: undefined }
 }
 
 function depsEqual(
@@ -57,110 +37,185 @@ function depsEqual(
 
 type BasicStateAction<S> = S | ((p: S) => S)
 
+function initializeReducer(hook: Hook, fiber: Fiber, initialArg: any, init?: (arg: any) => any): void {
+  hook.s = init ? init(initialArg) : initialArg
+  hook.c = null
+  hook.q = (action: any) => {
+    if (fiber.um || fiber.pd) return
+    ;(hook.c ||= []).push(action)
+    scheduleUpdate(fiber)
+  }
+}
+
+// Reducer slots reuse the effect-cleanup field for pending actions. Zero marks
+// eager state work, null means no update. Replacing arrays lets retries restore
+// pending actions without copying or shifting them.
+function reducePending(hook: Hook, reducer: (state: any, action: any) => any, previous = hook.s): void {
+  const actions = hook.c
+  if (actions == null) return
+  hook.c = null
+  let state = hook.s
+  if (actions) for (const action of actions) state = reducer(state, action)
+  hookFlags |= Object.is(state, previous) ? 2 : 3
+  hook.s = state
+}
+
+let hookEffects: any[] | undefined
+// Bit 1 records a changed value; bit 2 records a processed reducer queue.
+let hookFlags = 0
+export const HOOK_BAILOUT = Symbol()
+
+function resetHookEffects(effects: any[]): void {
+  for (let index = 0; index < effects.length; index += 4) effects[index].d = effects[index + 1]
+}
+
+export function renderWithHooks(
+  fiber: Fiber,
+  render: (props: any, ref?: any) => ReactNode,
+  props: any,
+  ref?: any,
+  canBail = false,
+): ReactNode | typeof HOOK_BAILOUT {
+  const previousDispatcher = ReactSharedInternals.H, previousFiber = ReactSharedInternals.F, previousIndex = ReactSharedInternals.I
+  const previousEffects = hookEffects, previousFlags = hookFlags
+  hookEffects = undefined
+  hookFlags = 0
+  ReactSharedInternals.H = DISPATCHER
+  ReactSharedInternals.F = fiber
+  try {
+    let rendered: ReactNode, attempts = 0
+    do {
+      if (++attempts > 25) throw new Error(process.env.NODE_ENV !== 'production' ? 'Too many re-renders.' : '')
+      if (hookEffects) {
+        resetHookEffects(hookEffects)
+        hookEffects = undefined
+      }
+      ReactSharedInternals.I = 0
+      fiber.dy = false
+      rendered = render(props, ref)
+    } while (fiber.dy)
+    if (canBail && hookFlags === 2) {
+      // React accepts the rendered dependencies on a reducer bailout, but
+      // keeps the previous committed effect descriptions until real work.
+      hookEffects = undefined
+      return HOOK_BAILOUT
+    }
+    if (hookEffects) {
+      const effects: any[] = hookEffects
+      for (let index = 0; index < effects.length; index += 4) {
+        const hook = effects[index], effect = effects[index + 2]
+        rememberActivityEffect(fiber, hook, effect)
+        if (effects[index + 3]) enqueueEffect(fiber, effect)
+      }
+      hookEffects = undefined
+    }
+    return rendered
+  } finally {
+    if (hookEffects) resetHookEffects(hookEffects)
+    hookEffects = previousEffects
+    hookFlags = previousFlags
+    ReactSharedInternals.H = previousDispatcher
+    ReactSharedInternals.F = previousFiber
+    ReactSharedInternals.I = previousIndex
+  }
+}
+
+export function cleanupEffect(hook: Hook, fiber: Fiber): void {
+  if (!hook.c) return
+  const cleanup = hook.c
+  hook.c = null
+  if (fiber.cu) {
+    const index = fiber.cu.indexOf(cleanup)
+    if (index >= 0) fiber.cu.splice(index, 1)
+  }
+  try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+}
+
+function useEffectImpl(type: Effect['t'], create: () => any, deps?: ReadonlyArray<unknown>): void {
+  const hook = nextHook()
+  const fiber = getCurrentFiber()
+  const changed = hook.d === undefined || !depsEqual(hook.d, deps)
+  if (!changed && !fiber.root?.a && !(type === 1 && fiber.root?.sp)) return
+  const previous = hook.d
+  hook.d = deps
+  const effect: Effect = {
+    t: type,
+    c: () => {
+      cleanupEffect(hook, fiber)
+      const cleanup = create()
+      // Each effect owns its cleanup even when hooks return the same function.
+      hook.c = typeof cleanup === 'function' ? () => {
+        if (type === 0) {
+          const dispose = () => {
+            try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+          }
+          if (!deferTransitionPassive(dispose)) queueCommitEffects(dispose)
+        } else cleanup()
+      } : null
+      return hook.c
+    },
+  }
+  if (type === 1) effect.d = () => cleanupEffect(hook, fiber)
+  ;(hookEffects ||= []).push(hook, previous, effect, changed)
+}
+
 // Singleton — every method reads render context via ReactSharedInternals,
 // and per-hook closures live on the hook itself, so nothing is render-local
 // to capture. Allocating a fresh wrapper + 17 method closures per function-
 // component render was pure GC pressure.
 const DISPATCHER = makeDispatcherImpl()
 
-export function makeDispatcher() {
-  return DISPATCHER
-}
-
 function makeDispatcherImpl() {
   return {
     useState<S>(initial: S | (() => S)): [S, (a: BasicStateAction<S>) => void] {
-      return this.useReducer(
-        basicReducer as (state: S, action: BasicStateAction<S>) => S,
-        typeof initial == 'function' ? (initial as () => S)() : initial,
-      )
-    },
-
-    useReducer<S, A>(reducer: (s: S, a: A) => S, initialArg: any, init?: (a: any) => S) {
-      const hook = nextHook()
-      const fiber = getCurrentFiber()
+      const hook = nextHook(), fiber = getCurrentFiber()
       if (hook.q === undefined) {
-        hook.s = init ? init(initialArg) : initialArg
-        const queue: any = { r: reducer }
-        const dispatch = (action: A) => {
-          const currentState = hook.s as S
-          const next = queue.r(currentState, action)
-          if (!Object.is(next, currentState)) {
+        hook.s = hook.d = typeof initial === 'function' ? (initial as () => S)() : initial
+        hook.c = null
+        hook.q = (action: BasicStateAction<S>) => {
+          if (fiber.um || fiber.pd) return
+          if (ReactSharedInternals.F !== fiber && !hook.c) {
+            let next: S
+            try {
+              next = basicReducer(hook.s, action)
+            } catch {
+              hook.c = [action]
+              scheduleUpdate(fiber)
+              return
+            }
+            if (Object.is(next, hook.s)) return
             hook.s = next
+            hook.c = 0
             scheduleUpdate(fiber)
+            return
           }
+          ;(hook.c ||= []).push(action)
+          scheduleUpdate(fiber)
         }
-        queue.d = dispatch
-        hook.q = queue
-      } else {
-        hook.q.r = reducer
       }
-      return [hook.s, hook.q.d] as [S, (a: A) => void]
+      reducePending(hook, basicReducer, hook.d)
+      hook.d = hook.s
+      return [hook.s, hook.q]
     },
 
-    useEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
+    useReducer<S, A>(reducer: (s: S, a: A) => S, initialArg: any, init?: (a: any) => S) {
       const hook = nextHook()
-      const fiber = getCurrentFiber()
-      const prevDeps = hook.d
-      if (prevDeps !== undefined && depsEqual(prevDeps, deps)) return
-      hook.d = deps
-      const effect: Effect = {
-        t: 0,
-        c: () => {
-          // Run the prior cleanup INSIDE the effect run, not during the
-          // dispatch/render phase. If render A → B → C all happen back-to-
-          // back before the passive microtask drains, dispatch-time cleanup
-          // only fires once (between A→B) and fx B + C both run fresh,
-          // leaving two side-fx (e.g. two plot SVGs) in the DOM. Doing
-          // it here, at effect-run time, means every new create first tears
-          // down whatever cleanup is currently live on the hook.
-          if (hook.c) {
-            try { hook.c() } catch {}
-            // The prior cleanup was also pushed onto fiber.cu; remove
-            // it so unmount doesn't double-call it.
-            if (fiber.cu) {
-              const i = fiber.cu.indexOf(hook.c)
-              if (i >= 0) fiber.cu.splice(i, 1)
-            }
-            hook.c = null
-          }
-          const c = create()
-          hook.c = typeof c == 'function' ? c : null
-          return hook.c
-        },
-      }
-      enqueueEffect(fiber, effect)
+      if (hook.q === undefined) initializeReducer(hook, getCurrentFiber(), initialArg, init)
+      reducePending(hook, reducer)
+      hook.d = reducer
+      return [hook.s, hook.q] as [S, (a: A) => void]
+    },
+
+    useEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
+      useEffectImpl(0, create, deps)
     },
 
     useLayoutEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
-      const hook = nextHook()
-      const fiber = getCurrentFiber()
-      const prevDeps = hook.d
-      if (prevDeps !== undefined && depsEqual(prevDeps, deps)) return
-      hook.d = deps
-      const effect: Effect = {
-        t: 1,
-        c: () => {
-          // Mirror useEffect: tear down the prior cleanup at run time so
-          // coalesced renders don't leak side-fx.
-          if (hook.c) {
-            try { hook.c() } catch {}
-            if (fiber.cu) {
-              const i = fiber.cu.indexOf(hook.c)
-              if (i >= 0) fiber.cu.splice(i, 1)
-            }
-            hook.c = null
-          }
-          const c = create()
-          hook.c = typeof c == 'function' ? c : null
-          return hook.c
-        },
-      }
-      enqueueEffect(fiber, effect)
+      useEffectImpl(1, create, deps)
     },
 
     useInsertionEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
-      return this.useLayoutEffect(create, deps)
+      useEffectImpl(2, create, deps)
     },
 
     useRef<T>(initial: T) {
@@ -190,14 +245,16 @@ function makeDispatcherImpl() {
     },
 
     useImperativeHandle<T>(ref: any, factory: () => T, deps?: ReadonlyArray<unknown>) {
-      const hook = nextHook()
-      if (hook.d !== undefined && depsEqual(hook.d, deps)) return
-      hook.d = deps
-      const value = factory()
-      if (ref) {
-        if (typeof ref == 'function') ref(value)
-        else ref.current = value
-      }
+      useEffectImpl(1, () => {
+        if (!ref) return
+        const value = factory()
+        if (typeof ref === 'function') {
+          const cleanup = ref(value)
+          return typeof cleanup === 'function' ? cleanup : () => ref(null)
+        }
+        ref.current = value
+        return () => { ref.current = null }
+      }, deps == null ? undefined : [...deps, ref])
     },
 
     useDebugValue<T>(_value: T, _formatter?: (v: T) => any): void {
@@ -217,13 +274,19 @@ function makeDispatcherImpl() {
     },
 
     useTransition(): [boolean, (fn: () => void) => void] {
-      return [false, (fn: () => void) => fn()]
+      return [false, startTransition]
     },
 
     useDeferredValue<T>(v: T): T {
       return v
     },
 
+    useCacheRefresh(): () => void {
+      // There is no client cache to invalidate. Preserve hook identity and
+      // leave state and scheduling alone, as with the uncached client cache().
+      return this.useCallback(() => {}, [])
+    },
+
     useSyncExternalStore<T>(
       subscribe: (cb: () => void) => () => void,
       getSnapshot: () => T,
@@ -251,26 +314,19 @@ function makeDispatcherImpl() {
       const isHydrating = Boolean(root?.h)
       const value =
         isHydrating && getServerSnapshot ? getServerSnapshot() : getSnapshot()
+      if (!Object.is(hook.s, value)) hookFlags |= 1
       hook.s = value
 
       const deps = [subscribe]
-      if (hook.d === undefined || !depsEqual(hook.d, deps)) {
+      const changed = hook.d === undefined || !depsEqual(hook.d, deps)
+      if (changed || fiber.root?.a) {
+        const previous = hook.d
         hook.d = deps
         const effect: Effect = {
           t: 1,
+          s: true,
           c: () => {
-            if (hook.c) {
-              try {
-                hook.c()
-              } catch {
-                // ignore cleanup failures
-              }
-              if (fiber.cu) {
-                const i = fiber.cu.indexOf(hook.c)
-                if (i >= 0) fiber.cu.splice(i, 1)
-              }
-              hook.c = null
-            }
+            cleanupEffect(hook, fiber)
 
             let unsubscribed = false
             const cleanup = () => {
@@ -293,7 +349,6 @@ function makeDispatcherImpl() {
               }
 
               if (!Object.is(hook.s, next)) {
-                hook.s = next
                 scheduleUpdate(fiber)
               }
             }
@@ -311,12 +366,13 @@ function makeDispatcherImpl() {
             return cleanup
           },
         }
-        enqueueEffect(fiber, effect)
+        ;(hookEffects ||= []).push(hook, previous, effect, changed)
       }
       return value
     },
 
     use<T>(resource: any): T {
+      if (resource?.$$typeof === REACT_RECOVERABLE_TYPE) return undefined as T
       if (resource == null) {
         if (process.env.NODE_ENV !== 'production') {
           throw new Error('use() received null or undefined')
@@ -372,7 +428,7 @@ let idCounter = 0
 function findRootFromFiber(fiber: Fiber): FiberRoot | null {
   let f: Fiber | null = fiber
   while (f) {
-    if (f.root) return f.root
+    if (f.root) return fiber.root = f.root
     f = f.parent
   }
   return null

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
+}