@tanstack/redact 0.0.1

package/src/dom/dom.ts

@@ -0,0 +1,316 @@
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+const BOOLEAN_ATTRS = new Set([
+  'allowfullscreen',
+  'async',
+  'autofocus',
+  'autoplay',
+  'checked',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'formnovalidate',
+  'hidden',
+  'inert',
+  'ismap',
+  'itemscope',
+  'loop',
+  'multiple',
+  'muted',
+  'nomodule',
+  'novalidate',
+  'open',
+  'playsinline',
+  'readonly',
+  'required',
+  'reversed',
+  'selected',
+])
+
+const IDL_ATTRS = new Set([
+  'value',
+  'checked',
+  'selected',
+  'disabled',
+  'multiple',
+  'muted',
+  'readonly',
+  'contentEditable',
+  'spellcheck',
+  'draggable',
+])
+
+export function createHostNode(type: string, isSvg: boolean): Element {
+  if (isSvg || type === 'svg') {
+    return document.createElementNS(SVG_NS, type)
+  }
+  return document.createElement(type)
+}
+
+export function isSvgElement(el: Element): boolean {
+  return (el as any).ownerSVGElement !== undefined || el.tagName === 'svg'
+}
+
+export function setProp(
+  el: Element,
+  name: string,
+  next: any,
+  prev: any,
+  isSvg: boolean,
+): void {
+  if (name === 'children' || name === 'key' || name === 'ref') return
+
+  // defaultValue / defaultChecked are IDL-property-only — they seed the
+  // initial value/checked of a form control on first mount and must NOT be
+  // emitted as HTML attributes (which would leak as `defaultValue="..."`).
+  // Setting `el.defaultValue` on a fresh control also sets the initial
+  // `el.value`, which is what consumers expect. Skip on hydrated DOM so we
+  // don't clobber a live user-typed value.
+  if (name === 'defaultValue' || name === 'defaultChecked') {
+    if (prev === undefined && next != null) {
+      try {
+        ;(el as any)[name] = next
+      } catch {}
+    }
+    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)
+    return
+  }
+
+  if (name === 'style') {
+    setStyle(el as HTMLElement, next, prev)
+    return
+  }
+
+  if (name === 'dangerouslySetInnerHTML') {
+    const nextHtml = next?.__html ?? ''
+    const prevHtml = prev?.__html ?? ''
+    if (nextHtml !== prevHtml) (el as HTMLElement).innerHTML = nextHtml
+    return
+  }
+
+  if (name[0] === 'o' && name[1] === 'n') {
+    setEventHandler(el, name, next, prev)
+    return
+  }
+
+  if (name === 'htmlFor') {
+    if (next == null) el.removeAttribute('for')
+    else el.setAttribute('for', '' + next)
+    return
+  }
+
+  if (!isSvg && IDL_ATTRS.has(name) && name in el) {
+    try {
+      ;(el as any)[name] = next == null ? '' : next
+      return
+    } catch {}
+  }
+
+  if (BOOLEAN_ATTRS.has(name.toLowerCase())) {
+    if (next) el.setAttribute(name, '')
+    else el.removeAttribute(name)
+    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(name)
+      } else {
+        el.setAttribute(name, '' + next)
+      }
+      return
+    }
+  }
+
+  if (next == null || next === false) {
+    el.removeAttribute(name)
+  } else if (next === true) {
+    el.setAttribute(name, '')
+  } else {
+    el.setAttribute(name, '' + next)
+  }
+}
+
+function setStyle(el: HTMLElement, next: any, prev: any): void {
+  const style = el.style
+  if (typeof next === 'string') {
+    style.cssText = next
+    return
+  }
+  if (typeof prev === 'string') style.cssText = ''
+  if (prev && typeof prev === 'object') {
+    for (const k in prev) {
+      if (!next || !(k in next)) setStyleProperty(style, k, '')
+    }
+  }
+  if (next && typeof next === 'object') {
+    for (const k in next) {
+      if (!prev || prev[k] !== next[k]) setStyleProperty(style, k, next[k])
+    }
+  }
+}
+
+function setStyleProperty(style: CSSStyleDeclaration, key: string, value: any): void {
+  if (key[0] === '-') {
+    style.setProperty(key, value == null ? '' : '' + value)
+  } else if (value == null || value === '') {
+    ;(style as any)[key] = ''
+  } else if (typeof value === 'number' && !UNITLESS_STYLE.has(key)) {
+    ;(style as any)[key] = value + 'px'
+  } else {
+    ;(style as any)[key] = '' + value
+  }
+}
+
+const UNITLESS_STYLE = new Set([
+  'animationIterationCount',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'flex',
+  'flexGrow',
+  'flexPositive',
+  'flexShrink',
+  'flexNegative',
+  'flexOrder',
+  'gridArea',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowSpan',
+  'gridRowStart',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnSpan',
+  'gridColumnStart',
+  'fontWeight',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+  'fillOpacity',
+  'floodOpacity',
+  'stopOpacity',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+])
+
+export interface SyntheticEvent extends Event {
+  nativeEvent: Event
+  isDefaultPrevented(): boolean
+  isPropagationStopped(): boolean
+  persist(): void
+  currentTarget: EventTarget & Element
+}
+
+function setEventHandler(el: Element, name: string, next: any, prev: 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
+  // also ignores non-function handlers.
+  if (next != null && typeof next !== 'function') next = null
+
+  const capture = name.endsWith('Capture')
+  const reactEventName = name.slice(2, capture ? -7 : undefined)
+  const eventName = domEventFor(reactEventName, el)
+
+  // Key by the React prop name (not DOM event name) so `onChange` and
+  // `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]
+
+  if (existing && !next) {
+    el.removeEventListener(existing.event, existing.listener, existing.capture)
+    handlers[key] = null
+    return
+  }
+
+  if (!existing && next) {
+    const entry = {
+      current: next as Function,
+      listener: null as any,
+      event: eventName,
+      capture,
+    }
+    entry.listener = (e: Event) => {
+      // React hands handlers a SyntheticEvent that carries `.nativeEvent`.
+      // Many libraries check `event.nativeEvent.isComposing` (react-instantsearch)
+      // or `event.nativeEvent.shiftKey` (UI kits) — without the alias they throw
+      // on `undefined.foo`. Aliasing the native event to itself is the cheapest
+      // way to satisfy the shape without building a full synthetic layer.
+      if ((e as any).nativeEvent === undefined) (e as any).nativeEvent = e
+      entry.current(e)
+    }
+    handlers[key] = entry
+    el.addEventListener(eventName, entry.listener, capture)
+    return
+  }
+
+  if (existing) {
+    // 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)
+      existing.event = eventName
+      existing.capture = capture
+      el.addEventListener(eventName, existing.listener, capture)
+    }
+    existing.current = next
+  }
+}
+
+function domEventFor(reactEventName: string, el: Element): string {
+  const lower = reactEventName.toLowerCase()
+  // React's `onChange` on text-like <input> and <textarea> maps to the
+  // native `input` event so handlers fire on every keystroke. On checkbox,
+  // radio, file inputs, and <select>, React's `onChange` maps to the
+  // native `change` event (which fires on click / option select).
+  if (lower === 'change') {
+    const tag = el.tagName
+    if (tag === 'TEXTAREA') return 'input'
+    if (tag === 'INPUT') {
+      const type = ((el as HTMLInputElement).type || 'text').toLowerCase()
+      if (type !== 'checkbox' && type !== 'radio' && type !== 'file') {
+        return 'input'
+      }
+    }
+  }
+  if (lower === 'doubleclick') return 'dblclick'
+  return lower
+}

package/src/dom/event-replay.ts

@@ -0,0 +1,55 @@
+/**
+ * Drain the `window.$RE_q` event buffer that the inline runtime populated
+ * before the main bundle was parsed. For each buffered event, re-dispatch a
+ * synthesized event at the original target so handlers attached during
+ * hydration see it.
+ *
+ * Lossy by design: only the event type and target are preserved. Modifier
+ * keys, pointer positions, etc. are zeroed. This is acceptable because the
+ * replay window is a fraction of a second between shell render and full
+ * hydration of a streaming page; users who need pixel-accurate replay won't
+ * lose much beyond that.
+ */
+export function drainReplayQueue(): void {
+  const g = globalThis as any
+  const q = g.$RE_q as Array<[string, EventTarget, number]> | undefined
+  if (!q) return
+
+  // Stop capturing before replaying so we don't re-capture what we dispatch.
+  if (typeof g.$RE_stop === 'function') {
+    try {
+      g.$RE_stop()
+    } catch {}
+  }
+
+  const events = q.splice(0)
+  for (const [type, target] of events) {
+    try {
+      const ev = createEvent(type)
+      target.dispatchEvent(ev)
+    } catch {}
+  }
+}
+
+function createEvent(type: string): Event {
+  switch (type) {
+    case 'click':
+    case 'dblclick':
+    case 'mousedown':
+    case 'mouseup':
+    case 'contextmenu':
+      return new MouseEvent(type, { bubbles: true, cancelable: true })
+    case 'keydown':
+    case 'keyup':
+    case 'keypress':
+      return new KeyboardEvent(type, { bubbles: true, cancelable: true })
+    case 'input':
+      return new InputEvent(type, { bubbles: true, cancelable: true })
+    case 'submit':
+    case 'change':
+    case 'focus':
+    case 'blur':
+    default:
+      return new Event(type, { bubbles: true, cancelable: true })
+  }
+}

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

@@ -0,0 +1,104 @@
+import { FiberTag, type Fiber, type ReactNode } from '../../../core'
+import {
+  registerRenderer,
+  reconcileChildren,
+  childrenToArray,
+  scheduleUpdate,
+  scheduleLifecycle,
+  isThenable,
+  handleSuspended,
+  handleErrorInRender,
+} from '../../reconcile'
+
+function renderClass(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const Ctor = fiber.type as any
+  let instance = fiber.stateNode
+  const props = fiber.pendingProps ?? {}
+  const isNew = !instance
+
+  // 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
+
+  if (isNew) {
+    instance = new Ctor(props, ctxValue)
+    instance.props = props
+    instance.context = ctxValue
+    instance._fiber = fiber
+    instance._enqueueUpdate = (updater: any, cb?: () => void) => {
+      const next = typeof updater === 'function' ? updater(instance.state, instance.props) : updater
+      if (next != null) instance.state = { ...instance.state, ...next }
+      if (cb) {
+        fiber.cleanups ||= []
+        fiber.cleanups.push(cb)
+      }
+      scheduleUpdate(fiber)
+    }
+    instance._forceUpdate = (cb?: () => void) => {
+      if (cb) {
+        fiber.cleanups ||= []
+        fiber.cleanups.push(cb)
+      }
+      scheduleUpdate(fiber)
+    }
+    fiber.stateNode = instance
+    if (Ctor.getDerivedStateFromProps) {
+      const d = Ctor.getDerivedStateFromProps(props, instance.state)
+      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 (!instance.shouldComponentUpdate(props, instance.state, instance.context)) {
+        instance.props = props
+        fiber.memoizedProps = props
+        // Still need to render children with previous output
+        if (fiber.memoizedState?.rendered) {
+          reconcileChildren(fiber, childrenToArray(fiber.memoizedState.rendered), domParent, anchor)
+        }
+        return
+      }
+    }
+    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.memoizedState = { ...(fiber.memoizedState ?? {}), prevProps, prevState }
+  }
+
+  let rendered: ReactNode
+  try {
+    rendered = instance.render()
+  } catch (e: any) {
+    if (isThenable(e)) {
+      handleSuspended(fiber, e)
+      rendered = null
+    } else {
+      handleErrorInRender(fiber, e)
+      return
+    }
+  }
+  fiber.memoizedState = { ...(fiber.memoizedState ?? {}), rendered }
+
+  reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  fiber.memoizedProps = props
+
+  // Schedule lifecycle
+  if (isNew) {
+    if (instance.componentDidMount) {
+      scheduleLifecycle(fiber, () => instance.componentDidMount())
+    }
+  } else if (instance.componentDidUpdate) {
+    const { prevProps, prevState } = fiber.memoizedState ?? {}
+    scheduleLifecycle(fiber, () => instance.componentDidUpdate(prevProps, prevState))
+  }
+}
+
+registerRenderer(FiberTag.Class, renderClass)

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

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

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

@@ -0,0 +1,65 @@
+import { FiberTag, type Fiber, type ReactNode } from '../../../core'
+import {
+  registerRenderer,
+  reconcileChildren,
+  childrenToArray,
+  scheduleUpdate,
+  isThenable,
+  handleSuspended,
+  handleErrorInRender,
+} from '../../reconcile'
+
+// Stub: Class feature disabled. Class components still render — they're
+// detected by `type.prototype.isReactComponent` in the reconciler regardless —
+// but ONLY the core contract is honored: constructor, `render()`, and
+// `setState` triggering a re-render. Dropped from this stub:
+//   - `contextType` (this.context is always undefined)
+//   - `getDerivedStateFromProps`
+//   - `shouldComponentUpdate`
+//   - `componentDidMount` / `componentDidUpdate` / `componentWillUnmount`
+//   - `getDerivedStateFromError` / `componentDidCatch` (error boundaries)
+// Apps that actually need these should keep the feature on. Apps that just
+// have a handful of legacy class components that do `render() + setState`
+// still work, and save ~400 B min / ~200 B gz.
+function renderClassStub(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const Ctor = fiber.type as any
+  let instance = fiber.stateNode
+  const props = fiber.pendingProps ?? {}
+
+  if (!instance) {
+    instance = new Ctor(props, undefined)
+    instance.props = props
+    instance._fiber = fiber
+    instance._enqueueUpdate = (updater: any, cb?: () => void) => {
+      const next = typeof updater === 'function' ? updater(instance.state, instance.props) : updater
+      if (next != null) instance.state = { ...instance.state, ...next }
+      if (cb) {
+        fiber.cleanups ||= []
+        fiber.cleanups.push(cb)
+      }
+      scheduleUpdate(fiber)
+    }
+    instance._forceUpdate = instance._enqueueUpdate
+    fiber.stateNode = instance
+  } else {
+    instance.props = props
+  }
+
+  let rendered: ReactNode
+  try {
+    rendered = instance.render()
+  } catch (e: any) {
+    if (isThenable(e)) {
+      handleSuspended(fiber, e)
+      rendered = null
+    } else {
+      handleErrorInRender(fiber, e)
+      return
+    }
+  }
+
+  reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  fiber.memoizedProps = props
+}
+
+registerRenderer(FiberTag.Class, renderClassStub)

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

@@ -0,0 +1,57 @@
+import { FiberTag, type Fiber } from '../../../core'
+import { REACT_PROVIDER_TYPE, REACT_CONSUMER_TYPE } from '../../../react'
+import {
+  registerRenderer,
+  registerTypeMatcher,
+  installCapability,
+  reconcileChildren,
+  childrenToArray,
+} from '../../reconcile'
+
+function realReadContext(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.pendingProps ?? p.memoizedProps)?.value
+    }
+    p = p.parent
+  }
+  return ctx._currentValue
+}
+
+function renderProvider(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const ctx = (fiber.type as any)._context
+  const props = fiber.pendingProps ?? {}
+  const prevValue = ctx._currentValue
+  ctx._currentValue = props.value
+  try {
+    reconcileChildren(fiber, childrenToArray(props.children), domParent, anchor)
+  } finally {
+    ctx._currentValue = prevValue
+  }
+  // Also store the value on the fiber so descendants rendering later (via updates)
+  // can read through by walking up.
+  fiber.memoizedState = props.value
+  fiber.memoizedProps = props
+}
+
+function renderConsumer(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const ctx = (fiber.type as any)._context
+  const props = fiber.pendingProps ?? {}
+  const children = props.children
+  const value = realReadContext(fiber, ctx)
+  const rendered = typeof children === 'function' ? children(value) : null
+  reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  fiber.memoizedProps = props
+}
+
+registerTypeMatcher((_type, marker) =>
+  marker === REACT_PROVIDER_TYPE
+    ? FiberTag.Provider
+    : marker === REACT_CONSUMER_TYPE
+      ? FiberTag.Consumer
+      : null,
+)
+registerRenderer(FiberTag.Provider, renderProvider)
+registerRenderer(FiberTag.Consumer, renderConsumer)
+installCapability('readContext', realReadContext)

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

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

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

@@ -0,0 +1,32 @@
+import { FiberTag, type Fiber } from '../../../core'
+import { REACT_PROVIDER_TYPE, REACT_CONSUMER_TYPE } from '../../../react'
+import {
+  registerRenderer,
+  registerTypeMatcher,
+  reconcileChildren,
+  childrenToArray,
+} from '../../reconcile'
+
+// 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
+// value, so `<Ctx.Consumer>{v => ...}</Ctx.Consumer>` patterns keep working.
+// 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.pendingProps ?? {}
+  const value = ctx._currentValue
+  const rendered = typeof props.children === 'function' ? props.children(value) : null
+  reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  fiber.memoizedProps = props
+}
+
+registerTypeMatcher((_type, marker) =>
+  marker === REACT_PROVIDER_TYPE
+    ? FiberTag.Fragment
+    : marker === REACT_CONSUMER_TYPE
+      ? FiberTag.Consumer
+      : null,
+)
+registerRenderer(FiberTag.Consumer, renderConsumerStub)

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

@@ -0,0 +1,54 @@
+import { FiberTag, type Fiber, type ReactNode } from '../../../core'
+import { ReactSharedInternals, REACT_FORWARD_REF_TYPE } from '../../../react'
+import {
+  registerRenderer,
+  registerTypeMatcher,
+  reconcileChildren,
+  childrenToArray,
+  isThenable,
+  handleSuspended,
+  handleErrorInRender,
+} from '../../reconcile'
+import { makeDispatcher } from '../../dispatcher'
+
+function renderForwardRef(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const props = fiber.pendingProps ?? {}
+  const render = (fiber.type as any).render
+  const ref = fiber.ref ?? (props.ref ?? null)
+
+  const prevDispatcher = ReactSharedInternals.H
+  const prevFiber = ReactSharedInternals.currentFiber
+  const prevHook = ReactSharedInternals.currentHook
+  const prevIndex = ReactSharedInternals.hookIndex
+  ReactSharedInternals.H = makeDispatcher()
+  ReactSharedInternals.currentFiber = fiber
+  ReactSharedInternals.currentHook = null
+  ReactSharedInternals.hookIndex = 0
+
+  let rendered: ReactNode
+  try {
+    const { ref: _omit, ...rest } = props
+    rendered = render(rest, ref)
+  } catch (e: any) {
+    if (isThenable(e)) {
+      handleSuspended(fiber, e)
+      rendered = null
+    } else {
+      handleErrorInRender(fiber, e)
+      return
+    }
+  } finally {
+    ReactSharedInternals.H = prevDispatcher
+    ReactSharedInternals.currentFiber = prevFiber
+    ReactSharedInternals.currentHook = prevHook
+    ReactSharedInternals.hookIndex = prevIndex
+  }
+
+  reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  fiber.memoizedProps = props
+}
+
+registerTypeMatcher((_type, marker) =>
+  marker === REACT_FORWARD_REF_TYPE ? FiberTag.ForwardRef : null,
+)
+registerRenderer(FiberTag.ForwardRef, renderForwardRef)

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

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