@tanstack/redact 0.0.21 → 0.1.1

package/src/server/walk.ts

@@ -7,6 +7,7 @@ import {
 } from '../core'
 import {
   REACT_SUSPENSE_TYPE,
+  REACT_CONTEXT_TYPE,
   REACT_PROVIDER_TYPE,
   REACT_CONSUMER_TYPE,
   REACT_FORWARD_REF_TYPE,
@@ -15,6 +16,8 @@ import {
   REACT_STRICT_MODE_TYPE,
   REACT_PROFILER_TYPE,
   REACT_PORTAL_TYPE,
+  REACT_ACTIVITY_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
 } from '../react'
 import {
   attrToHtml,
@@ -27,8 +30,19 @@ import {
   pushContext,
   popContext,
   snapshotContexts,
+  recordHostResource,
+  currentSSRFrame,
   type ContextSnapshot,
 } from './dispatcher'
+import { isBrowserError } from '../core/browser'
+import { resourceKind } from '../core/resource-hints'
+import type { ResourceScope } from './resource-hints'
+
+export interface ServerErrorInfo {
+  componentStack: string
+}
+
+export type BrowserBailoutCallback = (error: Error, errorInfo: ServerErrorInfo) => void
 
 export interface SuspendedBoundary {
   id: number
@@ -36,15 +50,21 @@ export interface SuspendedBoundary {
   children: ReactNode
   thenable: Promise<any>
   contextSnapshot: ContextSnapshot
+  componentStack: string
 }
 
 export interface WalkOptions {
   emit: (chunk: string) => void
+  onHead?: () => void
   onSuspend?: ((boundary: SuspendedBoundary) => void) | undefined
+  onBrowserBailout?: BrowserBailoutCallback | undefined
+  componentStack?: string | undefined
+  thrownInfo?: { componentStack?: string | undefined }
   nextBoundaryId: () => number
   bootstrapped?: boolean | undefined
   isBoundaryResolution?: boolean | undefined
   isSvg?: boolean | undefined
+  resourceScope?: ResourceScope | 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
@@ -150,6 +170,11 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
   const type = el.type
   const props = el.props ?? {}
 
+  if (typeof type === 'string') {
+    walkHost(type, props, opts)
+    return
+  }
+
   if (type === REACT_FRAGMENT_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_PROFILER_TYPE) {
     walkNode(props.children, opts)
     return
@@ -160,8 +185,12 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
     return
   }
 
-  if (typeof type === 'string') {
-    walkHost(type, props, opts)
+  if (type === REACT_ACTIVITY_TYPE) {
+    if (props.mode !== 'hidden') walkNode(props.children, opts)
+    return
+  }
+  if (type === REACT_VIEW_TRANSITION_TYPE) {
+    walkNode(props.children, opts)
     return
   }
 
@@ -172,7 +201,7 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
     return
   }
 
-  if (marker === REACT_PROVIDER_TYPE) {
+  if (marker === REACT_CONTEXT_TYPE || marker === REACT_PROVIDER_TYPE) {
     const ctx = (type as any)._context
     pushContext(ctx, props.value)
     try {
@@ -184,10 +213,9 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
   }
 
   if (marker === REACT_CONSUMER_TYPE) {
-    const ctx = (type as any)._context
     const render = props.children
     if (typeof render === 'function') {
-      walkNode(render(ctx._currentValue), opts)
+      walkNode(render((type as any)._context._currentValue), opts)
     }
     return
   }
@@ -196,8 +224,7 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
     const render = (type as any).render
     const ref = (props as any).ref ?? null
     const { ref: _omit, ...rest } = props as any
-    const rendered = render(rest, ref)
-    walkNode(rendered, opts)
+    walkComponent(render, rest, opts, ref)
     return
   }
 
@@ -209,16 +236,8 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
 
   if (marker === REACT_LAZY_TYPE) {
     const { _payload, _init } = type as any
-    try {
-      const resolved = _init(_payload)
-      walkElement({ ...el, type: resolved } as ReactElement, opts)
-    } catch (thenable: any) {
-      if (isThenable(thenable)) {
-        // Suspend this point
-        throw thenable
-      }
-      throw thenable
-    }
+    const resolved = _init(_payload)
+    walkElement({ ...el, type: resolved } as ReactElement, opts)
     return
   }
 
@@ -234,6 +253,7 @@ function walkHost(
   opts: WalkOptions,
 ): void {
   const isSvg = opts.isSvg || tag === 'svg'
+  if (!isSvg && resourceKind(tag, props) && recordHostResource(tag, props, opts.resourceScope)) return
   // <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
@@ -270,6 +290,7 @@ function walkHost(
     pushSelectContext(val)
   }
   const isOption = tag === 'option'
+  try {
 
   // Prepend the HTML5 doctype to the stream when rendering an <html> root.
   // Without it the browser parses the document in quirks mode, which breaks
@@ -312,6 +333,7 @@ function walkHost(
     return
   }
   opts.emit('>')
+  if (tag === 'head') opts.onHead?.()
   // 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
@@ -322,7 +344,9 @@ function walkHost(
   }
 
   if (tag === 'html' && !hasHeadChild(props.children)) {
-    opts.emit('<head></head>')
+    opts.emit('<head>')
+    opts.onHead?.()
+    opts.emit('</head>')
   }
 
   const dangerouslyHtml = props.dangerouslySetInnerHTML?.__html
@@ -358,9 +382,11 @@ function walkHost(
     walkNode(props.children, childOpts)
   }
   opts.emit(`</${tag}>`)
-  if (isSelect) popSelectContext()
   // Host element closing resets outer flow — next sibling text starts fresh.
   if (parentTextState) parentTextState.lastWasText = false
+  } finally {
+    if (isSelect) popSelectContext()
+  }
 }
 
 function hasHeadChild(children: unknown): boolean {
@@ -393,7 +419,12 @@ function walkComponent(
   fn: Function,
   props: Record<string, any>,
   opts: WalkOptions,
+  ref?: unknown,
 ): void {
+  if (opts.onBrowserBailout) {
+    opts = { ...opts, componentStack: `\n    at ${(fn as any).displayName || fn.name || 'Anonymous'}${opts.componentStack || ''}` }
+  }
+  try {
   if ((fn as any).prototype?.isReactComponent) {
     const ctxType = (fn as any).contextType
     const ctxValue = ctxType ? ctxType._currentValue : undefined
@@ -407,8 +438,15 @@ function walkComponent(
     walkNode(instance.render(), opts)
     return
   }
-  const rendered = (fn as any)(props)
+  const rendered = (fn as any)(props, ref)
   walkNode(rendered, opts)
+  } catch (error) {
+    if (opts.thrownInfo && !opts.thrownInfo.componentStack) opts.thrownInfo.componentStack = opts.componentStack
+    if (isBrowserError(error) && !(error as any).componentStack) {
+      Object.defineProperty(error, 'componentStack', { value: opts.componentStack })
+    }
+    throw error
+  }
 }
 
 function walkSuspense(
@@ -423,26 +461,37 @@ function walkSuspense(
   // Try to render the children synchronously. If a thenable is thrown,
   // record the boundary and emit the fallback.
   const childParts: string[] = []
+  const nested: SuspendedBoundary[] = []
+  const thrownInfo: { componentStack?: string | undefined } = {}
   const childEmit = (s: string) => childParts.push(s)
+  const resourceScope: ResourceScope | undefined = currentSSRFrame().shellFlushed ? {} : undefined
   try {
     walkNode(props.children, {
+      ...opts,
+      resourceScope,
+      thrownInfo,
       emit: childEmit,
-      onSuspend: opts.onSuspend,
+      onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
   } catch (thenable: any) {
-    if (isThenable(thenable)) {
+    nested.length = 0
+    if (isThenable(thenable) || isBrowserError(thenable)) {
       const fallbackParts: string[] = []
-      try {
         walkNode(props.fallback, {
+          ...opts,
           emit: (s) => fallbackParts.push(s),
-          onSuspend: opts.onSuspend,
+          onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
           nextBoundaryId: opts.nextBoundaryId,
         })
-      } catch {
-        // Fallback suspending is unsupported; emit nothing
+      if (isBrowserError(thenable)) {
+        opts.onBrowserBailout?.(thenable, { componentStack: (thenable as any).componentStack || opts.componentStack || '' })
+        opts.emit(`<!--$!${id}-->${fallbackParts.join('')}<!--/$-->`)
+        for (const boundary of nested) opts.onSuspend?.(boundary)
+        return
       }
       emitBoundary(opts, id, fallbackParts.join(''))
+      for (const boundary of nested) opts.onSuspend?.(boundary)
 
       if (opts.onSuspend) {
         opts.onSuspend({
@@ -451,6 +500,7 @@ function walkSuspense(
           children: props.children,
           thenable,
           contextSnapshot,
+          componentStack: thrownInfo.componentStack || opts.componentStack || '',
         })
       }
       return
@@ -458,6 +508,8 @@ function walkSuspense(
     throw thenable
   }
 
+  if (resourceScope) currentSSRFrame().resources?.mergeScope(resourceScope, opts.resourceScope)
+
   // Children rendered fully — emit them wrapped in resolved-boundary markers
   // (`<!--$N-->` / `<!--/$-->`). Without markers, the client hydrator has no
   // way to know this subtree is inside a Suspense, so if the client version
@@ -468,6 +520,7 @@ function walkSuspense(
   opts.emit(`<!--$${id}-->`)
   opts.emit(childParts.join(''))
   opts.emit(`<!--/$-->`)
+  for (const boundary of nested) opts.onSuspend?.(boundary)
 }
 
 function emitBoundary(opts: WalkOptions, id: number, fallbackHTML: string): void {

package/src/vite/index.ts

@@ -12,6 +12,12 @@ export type RedactPreset = 'nano' | 'full'
  * configs as autocompleted options.
  */
 export interface RedactFeatures {
+  /** Activity visibility, retained state and disconnected effects. */
+  activity?: boolean
+  /** DOM instances, events, focus, layout and observers for Fragment refs. */
+  fragmentRefs?: boolean
+  /** Experimental native ViewTransition animations. Opt-in until snapshot parity is complete. */
+  viewTransitions?: boolean
   /**
    * `createPortal`. When `false`, portal elements render in place as a
    * Fragment (the `container` prop is ignored). `renderPortal` and its
@@ -72,6 +78,9 @@ export interface RedactFeatures {
 }
 
 interface ResolvedFeatures {
+  activity: boolean
+  fragmentRefs: boolean
+  viewTransitions: boolean
   portal: boolean
   context: boolean
   suspense: boolean
@@ -85,11 +94,13 @@ interface ResolvedFeatures {
 const PRESET_DEFAULTS: Record<RedactPreset, ResolvedFeatures> = {
   // Opt-in: everything off. Turn individual features on via `features`.
   nano: {
+    activity: false, fragmentRefs: false, viewTransitions: false,
     portal: false, context: false, suspense: false, memo: false,
     forwardRef: false, lazy: false, classComponents: false, hydration: false,
   },
   // Opt-out: everything on (drop-in React parity). Turn features off via `features`.
   full: {
+    activity: true, fragmentRefs: true, viewTransitions: false,
     portal: true, context: true, suspense: true, memo: true,
     forwardRef: true, lazy: true, classComponents: true, hydration: true,
   },
@@ -101,6 +112,9 @@ function resolveFeatures(
 ): ResolvedFeatures {
   const p = PRESET_DEFAULTS[preset]
   return {
+    activity: overrides.activity ?? p.activity,
+    fragmentRefs: overrides.fragmentRefs ?? p.fragmentRefs,
+    viewTransitions: overrides.viewTransitions ?? p.viewTransitions,
     portal: overrides.portal ?? p.portal,
     context: overrides.context ?? p.context,
     suspense: overrides.suspense ?? p.suspense,
@@ -166,7 +180,10 @@ const ALIASES: Record<string, string> = {
   'react/jsx-dev-runtime': '@tanstack/redact/jsx-dev-runtime',
   'react/compiler-runtime': '@tanstack/redact/compiler-runtime',
   'react-dom/client': '@tanstack/redact/dom-client',
+  'react-dom/server.browser': '@tanstack/redact/server',
+  'react-dom/server.bun': '@tanstack/redact/server',
   'react-dom/server.edge': '@tanstack/redact/server',
+  'react-dom/server.node': '@tanstack/redact/server',
   'react-dom/static.edge': '@tanstack/redact/server',
   'react-dom/server': '@tanstack/redact/server',
   'react-dom/test-utils': '@tanstack/redact/dom-test-utils',
@@ -225,10 +242,8 @@ function resolveExport(packageDir: string, sub: string): string | null {
   }
   const key = sub ? './' + sub : '.'
   const exp = pkg.exports?.[key]
-  // Prefer published `import` (dist/.js) over `source` — dist is a single
-  // transformed bundle so Vite's dep optimizer doesn't thrash on dozens of
-  // individual source files. The package keeps cross-subpath imports
-  // external, so there's still only one runtime instance.
+  // Prefer published JavaScript over TypeScript sources. Dist preserves one
+  // file per module, so subpath imports share state and feature boundaries.
   const pick = (v: any): string | null => {
     if (typeof v === 'string') return v
     if (v && typeof v === 'object') {
@@ -388,11 +403,12 @@ export function redact(options: RedactOptions = {}): any {
       // if the flag is off. The stub registers a graceful-degradation
       // matcher (e.g. Portal → Fragment) so user code keeps working.
       if (importer && /[\\/]features[\\/]index\.[jt]sx?$/.test(importer)) {
-        const m = id.match(/^\.\/([a-z-]+)$/)
+        const m = id.match(/^\.\/([a-z-]+)(\/index\.js)?$/)
         if (m) {
-          const name = m[1] as keyof ResolvedFeatures
+          const dir = m[1]!
+          const name = (dir === 'forward-ref' ? 'forwardRef' : dir === 'fragment-refs' ? 'fragmentRefs' : dir === 'view-transition' ? 'viewTransitions' : dir === 'class' ? 'classComponents' : dir) as keyof ResolvedFeatures
           if (name in features && !features[name]) {
-            const r = await this.resolve(`./${name}/stub`, importer, {
+            const r = await this.resolve(`./${dir}/stub${m[2] ? '.js' : ''}`, importer, {
               ...opts,
               skipSelf: true,
             })
@@ -401,13 +417,14 @@ export function redact(options: RedactOptions = {}): any {
         }
       }
 
-      // Hydration swap: hydration isn't self-registering, so it's imported
-      // from reconcile.ts, root.ts, and the Suspense/Lazy feature modules.
-      // Any specifier ending in `/hydration` that resolves to our feature
-      // module gets redirected to the stub when the flag is off.
-      if (!features.hydration && importer && /[\\/]hydration$/.test(id)) {
+      // Peer imports must use the same feature selection as the registration
+      // entrypoint, or an enabled feature can bring a disabled one back in.
+      const peer = id.match(/[\\/](context|hydration|fragment-refs|view-transition)(?:[\\/]index\.js)?$/)
+      const peerKey = peer?.[1] === 'fragment-refs' ? 'fragmentRefs' : peer?.[1] === 'view-transition' ? 'viewTransitions' : peer?.[1] as 'context' | 'hydration' | undefined
+      if (importer && peer && peerKey && !features[peerKey]) {
         const r = await this.resolve(id, importer, { ...opts, skipSelf: true })
-        if (r && /features[\\/]hydration[\\/]index\.(ts|js)$/.test(r.id)) {
+        const resolvedFeature = r?.id.match(/features[\\/](context|hydration|fragment-refs|view-transition)[\\/]index\.(ts|js)$/)
+        if (resolvedFeature?.[1] === peer[1]) {
           return r.id.replace(/index\.(ts|js)$/, 'stub.$1')
         }
       }