@tanstack/redact 0.0.9 → 0.0.11

package/src/dom/reconcile.ts

@@ -209,20 +209,15 @@ function rerenderFiber(fiber: Fiber, root: FiberRoot): void {
 // Element → children normalization
 // ---------------------------------------------------------------------------
 
-type TextChild = { _text: string }
-type NormalizedChild = ReactElement | TextChild | null
-
-// NEVER use `'_text' in child` to distinguish text wrappers from elements.
-// TanStack's RSC renderable proxies (createRscProxy with renderable: true) are
-// Proxy wrappers around real React elements whose `has` trap returns `true`
-// for ANY string key — so `'_text' in rscProxy` is TRUE even though the proxy
-// is an element. That misidentification set a Text fiber's `pendingProps` to
-// `child._text` (another chained RSC proxy), which then rendered as
-// `[object Object]` when createTextNode stringified the element. React
-// elements always carry `$$typeof`; our text wrapper never does — so the
-// presence of `$$typeof` is the invariant we rely on.
-function isTextChild(child: Exclude<NormalizedChild, null>): child is TextChild {
-  return (child as any).$$typeof === undefined
+// Text children pass through as raw strings — no wrapper. The previous
+// `{_text: string}` shape allocated tens of thousands of objects per
+// stable-list re-render and dominated minor-GC pressure. `typeof === 'string'`
+// is also robust to RSC renderable proxies (which have `has` traps that
+// would fool a `'_text' in child` predicate but can't fool `typeof`).
+type NormalizedChild = ReactElement | string | null
+
+function isTextChild(child: Exclude<NormalizedChild, null>): child is string {
+  return typeof child === 'string'
 }
 
 export function childrenToArray(children: ReactNode): NormalizedChild[] {
@@ -233,11 +228,15 @@ export function childrenToArray(children: ReactNode): NormalizedChild[] {
 
 function pushChildren(node: ReactNode, out: NormalizedChild[]): void {
   if (node == null || typeof node === 'boolean') return
-  if (typeof node === 'string' || typeof node === 'number') {
+  if (typeof node === 'string') {
     // Empty strings render no text node (matches React + the `<!-- -->`
     // separator elision on the SSR side so server/client agree).
     if (node === '') return
-    out.push({ _text: '' + node })
+    out.push(node)
+    return
+  }
+  if (typeof node === 'number') {
+    out.push('' + node)
     return
   }
   if (Array.isArray(node)) {
@@ -298,7 +297,7 @@ function fiberFromChild(child: NormalizedChild, parent: Fiber): Fiber {
   if (!child) return createFiber(FiberTag.Fragment, null, null)
   if (isTextChild(child)) {
     const f = createFiber(FiberTag.Text, null, null)
-    f.pendingProps = child._text
+    f.pendingProps = child
     f.parent = parent
     return f
   }
@@ -344,44 +343,31 @@ export function reconcileChildren(
   domParent: Node,
   anchor: Node | null,
 ): void {
-  // Fast path: unkeyed positional steady-state. The vast majority of real
-  // re-renders hit this case (e.g. a stable list whose items shift props but
-  // not structure). Walk the existing sibling chain and newChildren in
-  // lockstep; if every pair matches by type and neither side has keys or
-  // null gaps, skip the Map / Set / Array allocations and just update
-  // pendingProps / type / ref in place. The render pass below is unchanged.
-  // Falls back to the slow path on the first divergence.
+  // Fast path: unkeyed positional steady-state. Walk the existing sibling
+  // chain and newChildren in lockstep, validating AND committing in one pass.
+  // On any divergence we fall back to the slow path, which rebuilds the
+  // sibling chain anyway — partial pendingProps writes are idempotent.
+  // Skips the Map / Set / existing-array allocation entirely.
   if (!currentRoot?.hydrating) {
     let f: Fiber | null = parent.child
-    let i = 0
     let ok = true
-    for (; i < newChildren.length; i++) {
+    for (let i = 0; i < newChildren.length; i++) {
       const child = newChildren[i]
-      if (child == null) { ok = false; break }
-      if (!f) { ok = false; break }
-      if (f.key != null) { ok = false; break }
-      if (!isTextChild(child) && (child as ReactElement).key != null) { ok = false; break }
-      if (!sameType(f, child)) { ok = false; break }
+      if (child == null || !f || f.key != null) { ok = false; break }
+      if (typeof child === 'string') {
+        if (f.tag !== FiberTag.Text) { ok = false; break }
+        f.pendingProps = child
+      } else {
+        if ((child as ReactElement).key != null) { ok = false; break }
+        if (f.type !== (child as ReactElement).type) { ok = false; break }
+        f.pendingProps = (child as ReactElement).props
+        f.ref = (child as any).ref ?? null
+      }
       f = f.sibling
     }
     if (ok && f === null) {
-      // All matched. Update each fiber's per-render state in place.
-      let g: Fiber | null = parent.child
-      for (let j = 0; j < newChildren.length; j++) {
-        const child = newChildren[j]!
-        if (isTextChild(child)) {
-          g!.pendingProps = child._text
-        } else {
-          // type is already === child.type by sameType; assignment is a
-          // no-op write but keeps the slow-path semantic that we accept
-          // "type identity preserved" matches.
-          g!.pendingProps = (child as ReactElement).props
-          g!.ref = (child as any).ref ?? null
-        }
-        g = g!.sibling
-      }
-      // Pass 2: render forward with per-child anchors. This is the same loop
-      // as the slow path's pass 2.
+      // Pass 2: render forward with per-child anchors. Identical to the slow
+      // path's pass 2.
       for (let r: Fiber | null = parent.child; r; r = r.sibling) {
         let a = anchor
         for (let s: Fiber | null = r.sibling; s; s = s.sibling) {
@@ -481,7 +467,7 @@ export function reconcileChildren(
       claimed.add(match)
       fiber = match
       if (isTextChild(child!)) {
-        fiber.pendingProps = child._text
+        fiber.pendingProps = child
       } else {
         fiber.type = (child as ReactElement).type
         fiber.pendingProps = (child as ReactElement).props
@@ -725,9 +711,7 @@ export function renderFiber(fiber: Fiber, domParent: Node, anchor: Node | null):
 
 function renderText(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   const text = fiber.pendingProps as string
-  // Steady-state fast path: text identity unchanged since last render →
-  // skip the Text.data getter (a native call) and the memoizedProps write.
-  // Static literal-string children hit this on every re-render after mount.
+  // Identity-unchanged fast path: skip the native Text.data write entirely.
   if (fiber.dom && fiber.memoizedProps === text) return
   if (!fiber.dom) {
     const hydrated = currentRoot?.hydrating ? adoptTextDom(fiber, fiber.parent!, text) : false
@@ -735,7 +719,9 @@ function renderText(fiber: Fiber, domParent: Node, anchor: Node | null): void {
       fiber.dom = document.createTextNode(text)
       insertInto(domParent, fiber.dom, anchor)
     }
-  } else if ((fiber.dom as Text).data !== text) {
+  } else {
+    // Past the fast path, and adoptTextDom already realigned `.data` on
+    // hydration — `.data !== text` here is guaranteed, so write directly.
     ;(fiber.dom as Text).data = text
   }
   fiber.memoizedProps = text
@@ -1088,6 +1074,12 @@ export function unmountAllChildren(parent: Fiber, domParent: Node): void {
 // ---------------------------------------------------------------------------
 
 function insertInto(parent: Node, node: Node, anchor: Node | null): void {
+  const projectedHeadParent = getDocumentHeadInsertionParent(parent, node)
+  if (projectedHeadParent) {
+    projectedHeadParent.appendChild(node)
+    return
+  }
+
   // Anchor may have been removed or moved since it was computed (mutations
   // from unmount, boundary reveal, user code, HMR). If it's no longer a child
   // of `parent`, fall back to append — trying to insertBefore a non-child
@@ -1099,6 +1091,15 @@ function insertInto(parent: Node, node: Node, anchor: Node | null): void {
   }
 }
 
+const DOCUMENT_HEAD_TAGS = new Set(['base', 'link', 'meta', 'script', 'style', 'title'])
+
+function getDocumentHeadInsertionParent(parent: Node, node: Node): HTMLHeadElement | null {
+  if (parent.nodeType !== 9 || node.nodeType !== 1) return null
+  const tag = (node as Element).tagName.toLowerCase()
+  if (!DOCUMENT_HEAD_TAGS.has(tag)) return null
+  return (parent as Document).head
+}
+
 function getHostParent(fiber: Fiber): Node {
   let p = fiber.parent
   while (p) {
@@ -1274,4 +1275,3 @@ function isEventProp(name: string): boolean {
     name.charCodeAt(2) >= 65 /* 'A'-ish: any uppercase start (onClick, onChange, …) */
   )
 }
-

package/src/dom/root.ts

@@ -1,4 +1,11 @@
-import { FiberTag, createFiber, type FiberRoot, type ReactNode } from '../core'
+import {
+  FiberTag,
+  REACT_ELEMENT_TYPE,
+  createFiber,
+  type FiberRoot,
+  type ReactElement,
+  type ReactNode,
+} from '../core'
 import { renderRoot, flushSyncWork, batchedUpdates } from './reconcile'
 import {
   beginHydration,
@@ -92,8 +99,10 @@ export function hydrateRoot(
 
   beginHydration(root)
   try {
+    const normalizedInitialChildren =
+      isDocumentContainer(container) ? normalizeDocumentChildren(initialChildren) : initialChildren
     flushSyncWork(() => {
-      renderRoot(root, initialChildren)
+      renderRoot(root, normalizedInitialChildren)
     })
   } finally {
     endHydration(root)
@@ -103,7 +112,7 @@ export function hydrateRoot(
   return {
     render(children) {
       flushSyncWork(() => {
-        renderRoot(root, children)
+        renderRoot(root, isDocumentContainer(container) ? normalizeDocumentChildren(children) : children)
       })
     },
     unmount() {
@@ -114,4 +123,91 @@ export function hydrateRoot(
   }
 }
 
+const HEAD_TAGS = new Set(['base', 'link', 'meta', 'script', 'style', 'title'])
+
+function isDocumentContainer(container: unknown): container is Document {
+  return !!container && (container as Node).nodeType === 9
+}
+
+function normalizeDocumentChildren(children: ReactNode): ReactNode {
+  const list = toChildArray(children)
+  const htmlIndex = list.findIndex((child) => isHostElement(child, 'html'))
+  if (htmlIndex === -1) return children
+
+  const headNodes = list.filter(isHeadElement)
+  if (headNodes.length === 0) return children
+
+  const htmlElement = list[htmlIndex] as ReactElement
+  const normalizedHtml = hoistIntoHtmlHead(htmlElement, headNodes)
+  return list
+    .filter((child, index) => index === htmlIndex || !isHeadElement(child))
+    .map((child) => (child === htmlElement ? normalizedHtml : child))
+}
+
+function hoistIntoHtmlHead(htmlElement: ReactElement, headNodes: ReactNode[]): ReactElement {
+  const htmlChildren = toChildArray(htmlElement.props?.children)
+  const headIndex = htmlChildren.findIndex((child) => isHostElement(child, 'head'))
+  let nextChildren: ReactNode[]
+
+  if (headIndex === -1) {
+    nextChildren = [
+      createHostElement('head', { children: headNodes }),
+      ...htmlChildren,
+    ]
+  } else {
+    const headElement = htmlChildren[headIndex] as ReactElement
+    const existingHeadChildren = toChildArray(headElement.props?.children)
+    const nextHead = {
+      ...headElement,
+      props: {
+        ...headElement.props,
+        children: [...headNodes, ...existingHeadChildren],
+      },
+    }
+    nextChildren = htmlChildren.map((child, index) => (index === headIndex ? nextHead : child))
+  }
+
+  return {
+    ...htmlElement,
+    props: {
+      ...htmlElement.props,
+      children: nextChildren,
+    },
+  }
+}
+
+function toChildArray(children: unknown): ReactNode[] {
+  if (children == null || typeof children === 'boolean') return []
+  if (Array.isArray(children)) return children as ReactNode[]
+  if (isReactElement(children)) return [children]
+  if (typeof children !== 'string' && isIterable(children)) return Array.from(children) as ReactNode[]
+  return [children as ReactNode]
+}
+
+function isHeadElement(value: ReactNode): boolean {
+  return isReactElement(value) && typeof value.type === 'string' && HEAD_TAGS.has(value.type)
+}
+
+function isHostElement(value: ReactNode, tag: string): boolean {
+  return isReactElement(value) && value.type === tag
+}
+
+function isReactElement(value: unknown): value is ReactElement {
+  return !!value && typeof value === 'object' && (value as ReactElement).$$typeof === REACT_ELEMENT_TYPE
+}
+
+function isIterable(value: unknown): value is Iterable<ReactNode> {
+  return !!value && typeof (value as { [Symbol.iterator]?: unknown })[Symbol.iterator] === 'function'
+}
+
+function createHostElement(type: string, props: Record<string, unknown>): ReactElement {
+  return {
+    $$typeof: REACT_ELEMENT_TYPE,
+    type,
+    key: null,
+    ref: null,
+    props,
+  }
+}
+
 export { flushSyncWork as flushSync, batchedUpdates }

package/src/server/bootstrap-script.ts

@@ -6,9 +6,12 @@
  *     main bundle can replay them against un-hydrated subtrees ($RE_q buffer).
  *
  * Wire format:
- *   Fallback:  <!--$?ID--><div hidden id="B:ID">fallback</div><!--/$-->
+ *   Fallback:  <!--$?ID--><div id="B:ID">fallback</div><!--/$-->
  *   Resolved:  emits <div hidden id="S:ID">real</div><script>$RC(ID)</script>
  *              which splices real into place and rewrites the comment to <!--$ID-->.
+ *              The fallback div is visible (it's the user-visible loading
+ *              state); only the resolved-content staging div is `hidden`
+ *              before $RC moves its children inline.
  *
  * Client hydration calls $RH(ID, cb) to register a callback invoked once the
  * boundary has been revealed (or immediately, if it was already revealed).

package/src/server/stream.ts

@@ -8,10 +8,12 @@ import {
 } from './dispatcher'
 import { walk, type SuspendedBoundary } from './walk'
 import { BOUNDARY_REVEAL_RUNTIME, revealScript } from './bootstrap-script'
+import { escapeScript } from './escape'
 
 export interface StreamOptions {
   identifierPrefix?: string
   nonce?: string
+  bootstrapScriptContent?: string | ReadonlyArray<string>
   bootstrapScripts?: ReadonlyArray<string | { src: string; async?: boolean; nonce?: string }>
   bootstrapModules?: ReadonlyArray<string | { src: string; nonce?: string }>
   onError?: (error: unknown) => string | void
@@ -57,12 +59,34 @@ export async function streamHtml(
       shellChunks.push(chunk)
     }
 
-    // 1. Render the shell
-    walk(children, {
-      emit: bufferedEmit,
-      onSuspend: (b) => boundaries.push(b),
-      nextBoundaryId: () => state.nextId++,
-    })
+    // 1. Render the shell. A root-level `use(promise)` has no Suspense
+    // boundary to capture it, but App Router SSR commonly suspends at this
+    // level while resolving the RSC stream. Wait and retry without leaking
+    // partial shell chunks or boundary ids from the aborted attempt.
+    let shellRendered = false
+    let rootRetries = 0
+    while (!shellRendered) {
+      const chunkCount = shellChunks.length
+      const boundaryCount = boundaries.length
+      const nextId = state.nextId
+      try {
+        walk(children, {
+          emit: bufferedEmit,
+          onSuspend: (b) => boundaries.push(b),
+          nextBoundaryId: () => state.nextId++,
+        })
+        shellRendered = true
+      } catch (err) {
+        shellChunks.length = chunkCount
+        boundaries.length = boundaryCount
+        state.nextId = nextId
+        if (!isThenable(err)) throw err
+        if (++rootRetries > 50) {
+          throw new Error('renderToReadableStream exceeded 50 root suspension retries.')
+        }
+        await err
+      }
+    }
 
     // 2. Inject runtime + bootstrap scripts (once, after shell). Skip the
     // reveal/event-replay runtime when nothing needs it — no suspensions to
@@ -71,10 +95,14 @@ export async function streamHtml(
     // matches React's behavior where `renderToReadableStream` of a static
     // tree emits only the markup.
     const hasBootstrap =
+      bootstrapScriptContentToArray(options.bootstrapScriptContent).length > 0 ||
       (options.bootstrapScripts?.length ?? 0) > 0 ||
       (options.bootstrapModules?.length ?? 0) > 0
     if (boundaries.length > 0 || hasBootstrap) {
       shellChunks.push(`<script${nonce ? ` nonce="${nonce}"` : ''}>${BOUNDARY_REVEAL_RUNTIME}</script>`)
+      for (const content of bootstrapScriptContentToArray(options.bootstrapScriptContent)) {
+        shellChunks.push(inlineBootstrapTag(content, nonce))
+      }
       for (const s of options.bootstrapScripts ?? []) {
         shellChunks.push(bootstrapTag(s, 'script', nonce))
       }
@@ -83,7 +111,7 @@ export async function streamHtml(
       }
     }
 
-    if (shellChunks.length) emit(shellChunks.join(''))
+    if (shellChunks.length) emit(normalizeDocumentShell(shellChunks.join('')))
 
     // 3. Stream suspended boundaries as they resolve
     for (const b of boundaries) streamBoundary(b, emit, options, state)
@@ -146,6 +174,59 @@ async function drain(state: OrchestratorState): Promise<void> {
   }
 }
 
+function isThenable(value: unknown): value is Promise<unknown> {
+  return !!value && typeof (value as { then?: unknown }).then === 'function'
+}
+
+function bootstrapScriptContentToArray(
+  content: StreamOptions['bootstrapScriptContent'],
+): string[] {
+  if (content === undefined) return []
+  return typeof content === 'string' ? [content] : [...content]
+}
+
+function inlineBootstrapTag(content: string, defaultNonce: string | undefined): string {
+  const nAttr = defaultNonce ? ` nonce="${defaultNonce}"` : ''
+  return `<script${nAttr}>${escapeScript(content)}</script>`
+}
+
+function normalizeDocumentShell(html: string): string {
+  const doctypeIndex = html.indexOf('<!DOCTYPE html><html')
+  if (doctypeIndex <= 0) return html
+
+  const headPrefix = html.slice(0, doctypeIndex)
+  if (!isHeadPrefix(headPrefix)) return html
+
+  const documentHtml = html.slice(doctypeIndex)
+  const headOpen = documentHtml.match(/<head(?:\s[^>]*)?>/)
+  if (!headOpen || headOpen.index === undefined) return html
+
+  const insertAt = headOpen.index + headOpen[0].length
+  return documentHtml.slice(0, insertAt) + headPrefix + documentHtml.slice(insertAt)
+}
+
+function isHeadPrefix(value: string): boolean {
+  if (!value) return false
+  return stripLeadingHeadTags(value).trim() === ''
+}
+
+function stripLeadingHeadTags(value: string): string {
+  let rest = value
+  let changed = true
+  while (changed) {
+    changed = false
+    const next = rest.replace(
+      /^\s*(?:<meta\b[^>]*>|<link\b[^>]*>|<base\b[^>]*>|<title\b[^>]*>[\s\S]*?<\/title>|<style\b[^>]*>[\s\S]*?<\/style>|<script\b[^>]*>[\s\S]*?<\/script>)/i,
+      '',
+    )
+    if (next !== rest) {
+      rest = next
+      changed = true
+    }
+  }
+  return rest
+}
+
 function bootstrapTag(
   entry: string | { src: string; async?: boolean; nonce?: string },
   kind: 'script' | 'module',

package/src/server/walk.ts

@@ -315,6 +315,10 @@ function walkHost(
   const parentTextState = opts.textState
   const childOpts: WalkOptions = { ...opts, textState: { lastWasText: false } }
 
+  if (tag === 'html' && !hasHeadChild(props.children)) {
+    opts.emit('<head></head>')
+  }
+
   const dangerouslyHtml = props.dangerouslySetInnerHTML?.__html
 
   if (isTextarea && textareaValue != null) {
@@ -353,6 +357,32 @@ function walkHost(
   if (parentTextState) parentTextState.lastWasText = false
 }
 
+function hasHeadChild(children: unknown): boolean {
+  if (children == null || typeof children === 'boolean') return false
+  if (Array.isArray(children)) return children.some(hasHeadChild)
+  if (typeof children !== 'string' && isIterable(children)) {
+    for (const child of children as Iterable<unknown>) {
+      if (hasHeadChild(child)) return true
+    }
+    return false
+  }
+  return isElementOfType(children, 'head')
+}
+
+function isElementOfType(value: unknown, type: string): value is ReactElement {
+  const marker = (value as ReactElement | null)?.$$typeof as unknown
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    (marker === REACT_ELEMENT_TYPE || marker === REACT_LEGACY_ELEMENT_TYPE) &&
+    (value as ReactElement).type === type
+  )
+}
+
+function isIterable(value: unknown): value is Iterable<unknown> {
+  return !!value && typeof (value as { [Symbol.iterator]?: unknown })[Symbol.iterator] === 'function'
+}
+
 function walkComponent(
   fn: Function,
   props: Record<string, any>,

package/src/vite/index.ts

@@ -166,6 +166,8 @@ 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.edge': '@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',
   'react-dom': '@tanstack/redact/dom',