@vidact/runtime 0.2.0-beta.4 → 0.2.0-beta.5

package/src/compiled/core.ts

@@ -25,6 +25,7 @@ import {
   isHydrating,
   isHydrationMismatch,
   noteHydrationStructuralParent,
+  skipHydrationRange,
   withoutHydration,
   withHydrationComponentRange,
   withHydrationInsertion,
@@ -172,7 +173,6 @@ const narrowSourceOperations: SourceOperations = [
 type RenderValue = CompiledRenderValue
 
 export function deferred(render: () => CompiledRenderValue): StructuralBinding {
-  noteHydrationStructuralParent()
   return [
     STRUCTURAL,
     (parent, before) => {
@@ -189,7 +189,6 @@ export function retainedActivity(
   modeInput: 'visible' | 'hidden' | CompiledBinding<'visible' | 'hidden'>,
   render: () => CompiledRenderValue,
 ): StructuralBinding {
-  noteHydrationStructuralParent()
   const context = activeContextFrame ?? activeOwner?.[2] ?? null
   const rootIdentity = activeOwner?.[3] ?? activeRootIdentity
   if (rootIdentity === null) {
@@ -334,7 +333,6 @@ export function profiled(
   render: () => CompiledRenderValue,
 ): StructuralBinding {
   if (!DEV) return deferred(render)
-  noteHydrationStructuralParent()
   const context = activeContextFrame ?? activeOwner?.[2] ?? null
   const rootIdentity = activeOwner?.[3] ?? activeRootIdentity
   if (rootIdentity === null) {
@@ -495,7 +493,6 @@ export function errorBoundary(
   fallback: (error: unknown, reset: () => void) => CompiledRenderValue,
   onError?: CompiledErrorHandler,
 ): StructuralBinding {
-  noteHydrationStructuralParent()
   const context = activeContextFrame ?? activeOwner?.[2] ?? null
   const rootIdentity = activeOwner?.[3] ?? activeRootIdentity
   if (rootIdentity === null) {
@@ -582,7 +579,6 @@ export function suspense(
   render: () => CompiledRenderValue,
   fallback: () => CompiledRenderValue,
 ): StructuralBinding {
-  noteHydrationStructuralParent()
   const context = activeContextFrame ?? activeOwner?.[2] ?? null
   const rootIdentity = activeOwner?.[3] ?? activeRootIdentity
   if (rootIdentity === null) {
@@ -614,11 +610,17 @@ export function suspense(
       let removeResourceListener = noop
       let generation = 0
       let boundary: ErrorBoundaryHandler
+      // Server content is on screen but the client suspended while hydrating it (a lazy
+      // chunk still loading, say). The server nodes are kept until the next publish,
+      // which renders client-side and replaces them — the same shape as a claimed
+      // pending fallback, without ever showing the fallback over content the visitor
+      // can already see.
+      let dehydrated = false
 
       const publish = (
         read: () => CompiledRenderValue,
         kind: 'content' | 'fallback',
-        detachedHydrationProbe = false,
+        replaceServerNodes = false,
       ): void => {
         const currentParent = rangeParent(start, end, 'Suspense boundary')
         const nextOwner = createOwner(
@@ -626,8 +628,8 @@ export function suspense(
           rootIdentity,
           kind === 'content' ? boundary : parentErrorBoundary,
         )
-        const serverNodes = detachedHydrationProbe ? nodesBetween(start, end) : []
-        const [fragment, nodes] = detachedHydrationProbe
+        const serverNodes = replaceServerNodes ? nodesBetween(start, end) : []
+        const [fragment, nodes] = replaceServerNodes
           ? withoutHydration(() => stageRender(read, nextOwner))
           : hydratedRange === undefined || currentKind !== null
             ? stageRender(read, nextOwner)
@@ -662,9 +664,20 @@ export function suspense(
           runOwnerTask(lifetimeOwner, () => attempt(false))
         }
         removeResourceListener = subscribeResource(failure.resource, retry)
+        if (
+          currentKind === null &&
+          hydratedRange !== undefined &&
+          pendingMarker === undefined &&
+          isHydrating()
+        ) {
+          dehydrated = true
+          skipHydrationRange(start, end)
+          return
+        }
         if (currentKind !== 'fallback') {
           try {
-            publish(fallback, 'fallback')
+            publish(fallback, 'fallback', dehydrated)
+            dehydrated = false
             if (pendingMarker !== undefined) {
               currentNodes = [pendingMarker, ...currentNodes]
             }
@@ -679,7 +692,8 @@ export function suspense(
       const attempt = (initial: boolean): void => {
         const attemptGeneration = beginAttempt()
         try {
-          publish(render, 'content', initial && pendingMarker !== undefined)
+          publish(render, 'content', (initial && pendingMarker !== undefined) || dehydrated)
+          dehydrated = false
         } catch (error) {
           if (!isSuspension(error)) {
             if (initial || !routeOwnerError(lifetimeOwner, error)) throw error
@@ -2904,7 +2918,8 @@ function structural(
   mount: StructuralBinding[1],
   hydrationKind?: StructuralBinding[2],
 ): StructuralBinding {
-  if (hydrationKind !== undefined) noteHydrationStructuralParent()
+  // Only lists carry an array marker; a slot-kind structural must not bias the claim.
+  if (hydrationKind === 'array') noteHydrationStructuralParent()
   let mounted = false
   const owner = activeOwner ?? scopeOwners.get(scope)!
   const context = activeContextFrame ?? owner[2]

package/src/hydration-bridge.ts

@@ -28,6 +28,7 @@ export interface HydrationOperations {
   readonly claimSlotRange: (parent: Node) => HydrationRange | undefined
   readonly borrowSlotRange: (parent: Node, current: boolean) => HydrationRange | undefined
   readonly claimSuspenseFallback: (parent: Node) => Comment | undefined
+  readonly skipRange: (start: Comment, end: Comment) => void
   readonly withoutHydration: <Result>(operation: () => Result) => Result
   readonly withInsertion: <Result>(parent: Node, before: Node, operation: () => Result) => Result
   readonly insertionPoint: () => readonly [parent: Node, before: Node] | undefined
@@ -39,6 +40,14 @@ export interface HydrationMismatchInfo {
   readonly message: string
 }
 
+/**
+ * Marker comment prefix of the server ↔ hydrate protocol (`<!--v2:b-->` … `<!--/v2:b-->`).
+ * Bumped whenever the set of markers or their meaning changes, so a stale server render
+ * fails hydration loudly instead of being claimed wrongly. `v2` dropped the per-element
+ * and per-text markers of `vidact:v1`; the hydrator infers those from the DOM.
+ */
+export const HYDRATION_PREFIX = 'v2'
+
 export class HydrationMismatch extends Error {
   constructor(message: string) {
     super(message)
@@ -150,6 +159,10 @@ export function claimHydrationSuspenseFallback(parent: Node): Comment | undefine
   return hydration?.claimSuspenseFallback(parent)
 }
 
+export function skipHydrationRange(start: Comment, end: Comment): void {
+  hydration?.skipRange(start, end)
+}
+
 export function withoutHydration<Result>(operation: () => Result): Result {
   return hydration === undefined ? operation() : hydration.withoutHydration(operation)
 }

package/src/hydration.ts

@@ -1,11 +1,10 @@
 import {
+  HYDRATION_PREFIX,
   HydrationMismatch,
   installHydrationOperations,
   type HydrationRange,
 } from './hydration-bridge.ts'
 
-const HYDRATION_PREFIX = 'vidact:v1'
-
 interface HydrationState {
   readonly host: ParentNode
   readonly root: HydrationRange
@@ -32,7 +31,7 @@ export function beginHydration(host: ParentNode): () => void {
   const ranges = scanRanges(host)
   const root = ranges.roots[0]
   if (root === undefined || ranges.roots.length !== 1) {
-    throw mismatch('expected exactly one vidact:v1 root marker range')
+    throw mismatch(`expected exactly one ${HYDRATION_PREFIX} root marker range`)
   }
   activeHydration = {
     host,
@@ -129,10 +128,17 @@ export function claimHydrationElement(
   if (state.pendingStructuralParents > 0) state.pendingStructuralParents = 0
   state.claimedElements.add(element)
   state.claimedElementCount += 1
-  state.cursors.set(element, element.firstChild)
+  state.cursors.set(element, initialCursor(element))
   return element
 }
 
+/**
+ * Called by a compiled list right before its container element is claimed. Lists are the
+ * only structural bindings whose server markup carries an `a` marker, so they are the
+ * only ones that may prefer a candidate containing one — for a conditional, Suspense or
+ * any other structural child that bias would pick an unrelated element that happens to
+ * hold a list (see `claimHydrationElement`).
+ */
 export function noteHydrationStructuralParent(): void {
   if (activeHydration !== undefined) activeHydration.pendingStructuralParents += 1
 }
@@ -188,14 +194,6 @@ export function claimHydrationNode(parent: Node, node: Node): boolean {
   if (state === undefined) return false
   enterHydrationSlot(state, parent)
   const next = cursor(state, parent)
-  if (isMarker(next, `${HYDRATION_PREFIX}:s`)) {
-    const end = findClosingSibling(next, `${HYDRATION_PREFIX}:s`)
-    if (next.nextSibling !== node || node.nextSibling !== end) {
-      throw mismatch(`server node range does not contain exactly the expected ${node.nodeName}`)
-    }
-    setHydrationCursor(state, parent, end.nextSibling)
-    return true
-  }
   if (next !== node) {
     throw mismatch(`expected existing ${node.nodeName} at the current hydration position`)
   }
@@ -220,9 +218,19 @@ export function claimHydrationComponentMount(parent: Node, start: Comment, end:
 }
 
 export function claimHydrationText(parent: Node, expected: string): Text | null | undefined {
-  return claimHydrationTextRange(parent, expected)?.[2]
+  const state = activeHydration
+  if (state === undefined) return undefined
+  enterHydrationSlot(state, parent)
+  return claimTextPrefix(state, parent, expected)
 }
 
+/**
+ * Claims the text for a scalar binding together with a range it can later swap an
+ * element or collection into. The server emits no markers around text, so the binding
+ * borrows the enclosing child-slot markers when the slot holds exactly this text — the
+ * common case, and no DOM is touched. A text node shared with adjacent scalars (one
+ * parsed node for several array items) gets fresh anchor comments instead.
+ */
 export function claimHydrationTextRange(
   parent: Node,
   expected: string,
@@ -230,26 +238,54 @@ export function claimHydrationTextRange(
   const state = activeHydration
   if (state === undefined) return undefined
   enterHydrationSlot(state, parent)
-  const start = cursor(state, parent)
-  if (!isMarker(start, `${HYDRATION_PREFIX}:t`)) {
-    throw mismatch('expected a vidact:v1 text marker')
+  const at = cursor(state, parent)
+  const slotStart = at === null ? parent.lastChild : at.previousSibling
+  const text = claimTextPrefix(state, parent, expected)
+  const slotEnd = text === null ? at : text.nextSibling
+  if (
+    isMarker(slotStart, `${HYDRATION_PREFIX}:b`) &&
+    isMarker(slotEnd, `/${HYDRATION_PREFIX}:b`) &&
+    findClosingSibling(slotStart, `${HYDRATION_PREFIX}:b`) === slotEnd
+  ) {
+    return [slotStart, slotEnd, text]
   }
-  const end = findClosingSibling(start, `${HYDRATION_PREFIX}:t`)
-  const nodes: Node[] = []
-  for (let node = start.nextSibling; node !== null && node !== end; node = node.nextSibling) {
-    nodes.push(node)
+  const start = document.createComment('')
+  const end = document.createComment('')
+  const reference = text ?? at
+  parent.insertBefore(start, reference)
+  parent.insertBefore(end, text === null ? reference : text.nextSibling)
+  return [start, end, text]
+}
+
+/**
+ * The server renders a scalar as bare text, and nothing at all for an empty one. Adjacent
+ * scalars in one collection parse into a single text node, so a claim takes only its own
+ * prefix and splits the rest off for the next claim.
+ */
+function claimTextPrefix(state: HydrationState, parent: Node, expected: string): Text | null {
+  const node = cursor(state, parent)
+  if (expected === '') {
+    if (node instanceof Text && node.data === '') {
+      setHydrationCursor(state, parent, node.nextSibling)
+      return node
+    }
+    // Nothing to consume, but closing slot markers at the cursor still need passing.
+    setHydrationCursor(state, parent, node)
+    return null
   }
-  if (nodes.length > 1 || (nodes.length === 1 && !(nodes[0] instanceof Text))) {
-    throw mismatch('server text marker must contain at most one text node')
+  if (!(node instanceof Text)) {
+    throw mismatch(
+      `expected server text ${JSON.stringify(expected)} in ${describeNode(parent)}; found ${describeNode(node)}`,
+    )
   }
-  const text = (nodes[0] as Text | undefined) ?? null
-  if ((text?.data ?? '') !== expected) {
+  if (!node.data.startsWith(expected)) {
     throw mismatch(
-      `server text ${JSON.stringify(text?.data ?? '')} does not match ${JSON.stringify(expected)}`,
+      `server text ${JSON.stringify(node.data)} does not match ${JSON.stringify(expected)}`,
     )
   }
-  setHydrationCursor(state, parent, end.nextSibling)
-  return [start, end, text]
+  if (node.data.length > expected.length) node.splitText(expected.length)
+  setHydrationCursor(state, parent, node.nextSibling)
+  return node
 }
 
 export function claimHydrationArrayRange(parent: Node): HydrationRange | undefined {
@@ -259,7 +295,7 @@ export function claimHydrationArrayRange(parent: Node): HydrationRange | undefin
   const start = cursor(state, parent)
   if (!isMarker(start, `${HYDRATION_PREFIX}:a`)) {
     throw mismatch(
-      `expected a vidact:v1 array marker in ${parent.nodeName}; found ${JSON.stringify(markerValue(start as Node) ?? start?.nodeName ?? null)}`,
+      `expected a ${HYDRATION_PREFIX} array marker in ${describeNode(parent)}; found ${JSON.stringify(markerValue(start as Node) ?? start?.nodeName ?? null)}`,
     )
   }
   const end = findClosingSibling(start, `${HYDRATION_PREFIX}:a`)
@@ -281,7 +317,7 @@ export function claimHydrationSlotRange(parent: Node): HydrationRange | undefine
   const start = cursor(state, parent)
   if (!isMarker(start, `${HYDRATION_PREFIX}:b`)) {
     throw mismatch(
-      `expected a vidact:v1 child-slot marker in ${parent.nodeName}; found ${JSON.stringify(markerValue(start as Node) ?? start?.nodeName ?? null)} after ${JSON.stringify(markerValue(start?.previousSibling as Node) ?? start?.previousSibling?.nodeName ?? null)}; insertion=${JSON.stringify(markerValue(activeInsertionPoint?.[1] as Node) ?? activeInsertionPoint?.[1]?.nodeName ?? null)}`,
+      `expected a ${HYDRATION_PREFIX} child-slot marker in ${describeNode(parent)}; found ${JSON.stringify(markerValue(start as Node) ?? start?.nodeName ?? null)} after ${JSON.stringify(markerValue(start?.previousSibling as Node) ?? start?.previousSibling?.nodeName ?? null)}; insertion=${JSON.stringify(markerValue(activeInsertionPoint?.[1] as Node) ?? activeInsertionPoint?.[1]?.nodeName ?? null)}`,
     )
   }
   const end = findClosingSibling(start, `${HYDRATION_PREFIX}:b`)
@@ -312,6 +348,37 @@ export function borrowHydrationSlotRange(
   return [start, findClosingSibling(start, `${HYDRATION_PREFIX}:b`)]
 }
 
+/**
+ * Claims everything between two markers as-is, without hydrating into it. A Suspense
+ * boundary uses this when the server rendered its content but the client cannot
+ * produce it yet (a lazy chunk still loading): the server DOM stays on screen as a
+ * dehydrated boundary and the client render replaces it once the resource resolves.
+ * The elements and component ranges inside are marked claimed so `finishHydration`'s
+ * accounting still balances.
+ */
+export function skipHydrationRange(start: Comment, end: Comment): void {
+  const state = requireHydration()
+  const parent = start.parentNode
+  if (parent === null || end.parentNode !== parent) throw mismatch('detached server marker range')
+  for (const element of collectPostorderElements([start, end])) {
+    if (state.claimedElements.has(element)) continue
+    state.claimedElements.add(element)
+    state.claimedElementCount += 1
+  }
+  // Component ranges are sorted by document position and every earlier one is already
+  // claimed, so the ones inside this range sit contiguously at the current index.
+  while (state.componentIndex < state.components.length) {
+    const componentStart = state.components[state.componentIndex]![0]
+    const inside =
+      (start.compareDocumentPosition(componentStart) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 &&
+      (componentStart.compareDocumentPosition(end) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0
+    if (!inside) break
+    state.componentIndex += 1
+  }
+  state.pendingStructuralParents = 0
+  setHydrationCursor(state, parent, end)
+}
+
 export function claimHydrationSuspenseFallback(parent: Node): Comment | undefined {
   const state = activeHydration
   if (state === undefined) return undefined
@@ -368,10 +435,14 @@ function requireHydration(): HydrationState {
 }
 
 function cursor(state: HydrationState, parent: Node): Node | null {
-  if (!state.cursors.has(parent)) state.cursors.set(parent, parent.firstChild)
+  if (!state.cursors.has(parent)) state.cursors.set(parent, initialCursor(parent))
   return state.cursors.get(parent) ?? null
 }
 
+function initialCursor(parent: Node): Node | null {
+  return parent.firstChild
+}
+
 function enterHydrationSlot(state: HydrationState, parent: Node): void {
   const slots = state.slots.get(parent) ?? []
   let start = cursor(state, parent)
@@ -401,6 +472,17 @@ function mismatch(message: string): HydrationMismatch {
   return new HydrationMismatch(message)
 }
 
+/** `DIV.class-a[data-x]` — enough of an element to find it in the server markup. */
+function describeNode(node: Node | null | undefined): string {
+  if (!(node instanceof Element)) return node?.nodeName ?? 'null'
+  const classes = node.classList.length === 0 ? '' : `.${[...node.classList].join('.')}`
+  const data = [...node.attributes]
+    .filter((attribute) => attribute.name.startsWith('data-') || attribute.name === 'id')
+    .map((attribute) => `[${attribute.name}]`)
+    .join('')
+  return `${node.nodeName}${classes}${data}`
+}
+
 function markerValue(node: Node): string | undefined {
   return node instanceof Comment ? node.data : undefined
 }
@@ -423,6 +505,9 @@ function findClosingSibling(start: Comment, kind: string): Comment {
   throw mismatch(`missing closing ${kind} marker`)
 }
 
+/** Paired markers; `p` (pending fallback) is a lone marker and stays out of the stacks. */
+const RANGE_MARKER = new RegExp(`^\\/?${HYDRATION_PREFIX}:([abchr])$`)
+
 function scanRanges(host: ParentNode): {
   roots: HydrationRange[]
   components: HydrationRange[]
@@ -433,9 +518,9 @@ function scanRanges(host: ParentNode): {
   const walker = document.createTreeWalker(host, NodeFilter.SHOW_COMMENT)
   for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
     const comment = node as Comment
-    const match = comment.data.match(/^\/?vidact:v1:([abchrst])$/)
+    const match = RANGE_MARKER.exec(comment.data)
     if (match === null) continue
-    const kind = match[1] as 'a' | 'b' | 'c' | 'h' | 'r' | 's' | 't'
+    const kind = match[1] as 'a' | 'b' | 'c' | 'h' | 'r'
     if (!comment.data.startsWith('/')) {
       const stack = stacks.get(kind) ?? []
       stack.push(comment)
@@ -443,12 +528,12 @@ function scanRanges(host: ParentNode): {
       continue
     }
     const start = stacks.get(kind)?.pop()
-    if (start === undefined) throw mismatch(`orphan closing vidact:v1:${kind} marker`)
+    if (start === undefined) throw mismatch(`orphan closing ${HYDRATION_PREFIX}:${kind} marker`)
     if (kind === 'r') roots.push([start, comment])
     if (kind === 'c') components.push([start, comment])
   }
   if ([...stacks.values()].some((stack) => stack.length !== 0)) {
-    throw mismatch('unclosed vidact:v1 hydration marker')
+    throw mismatch(`unclosed ${HYDRATION_PREFIX} hydration marker`)
   }
   components.sort(([left], [right]) => {
     const position = left.compareDocumentPosition(right)
@@ -478,7 +563,7 @@ function collectPostorderElements(root: HydrationRange): Element[] {
       }
       if (opaqueDepth === 0 && child instanceof Element) visit(child)
     }
-    if (opaqueDepth !== 0) throw mismatch('unbalanced vidact:v1 raw HTML marker range')
+    if (opaqueDepth !== 0) throw mismatch(`unbalanced ${HYDRATION_PREFIX} raw HTML marker range`)
   }
   let opaqueDepth = 0
   for (let node = root[0].nextSibling; node !== null && node !== root[1]; node = node.nextSibling) {
@@ -492,7 +577,7 @@ function collectPostorderElements(root: HydrationRange): Element[] {
     }
     if (opaqueDepth === 0 && node instanceof Element) visit(node)
   }
-  if (opaqueDepth !== 0) throw mismatch('unbalanced vidact:v1 raw HTML marker range')
+  if (opaqueDepth !== 0) throw mismatch(`unbalanced ${HYDRATION_PREFIX} raw HTML marker range`)
   return elements
 }
 
@@ -547,6 +632,7 @@ export function installHydration(): void {
     claimSlotRange: claimHydrationSlotRange,
     borrowSlotRange: borrowHydrationSlotRange,
     claimSuspenseFallback: claimHydrationSuspenseFallback,
+    skipRange: skipHydrationRange,
     withoutHydration,
     withInsertion: withHydrationInsertion,
     insertionPoint: hydrationInsertionPoint,

package/src/raw-html.ts

@@ -3,7 +3,7 @@ import {
   mountCompiledPropTransition,
   type CompiledPropTransition,
 } from './compiled/core.ts'
-import { HydrationMismatch, isHydrating } from './hydration-bridge.ts'
+import { HYDRATION_PREFIX, HydrationMismatch, isHydrating } from './hydration-bridge.ts'
 
 const RAW_HTML_PUBLICATION_PRIORITY = 100
 const rawHtmlHosts = new WeakSet<HTMLElement>()
@@ -46,9 +46,9 @@ function hasEqualHydrationRawChildren(container: Node, expected: DocumentFragmen
   const end = container.lastChild
   if (
     !(start instanceof Comment) ||
-    start.data !== 'vidact:v1:h' ||
+    start.data !== `${HYDRATION_PREFIX}:h` ||
     !(end instanceof Comment) ||
-    end.data !== '/vidact:v1:h'
+    end.data !== `/${HYDRATION_PREFIX}:h`
   ) {
     return false
   }

package/src/server.ts

@@ -228,7 +228,8 @@ const VOID_ELEMENTS = new Set([
   'wbr',
 ])
 
-const HYDRATION_PREFIX = 'vidact:v1'
+// Mirrors HYDRATION_PREFIX in hydration-bridge.ts; the server entry stays free of client modules.
+const HYDRATION_PREFIX = 'v2'
 const UNSAFE_HTML = typeof __VIDACT_UNSAFE_HTML__ !== 'undefined' && __VIDACT_UNSAFE_HTML__
 
 let activeRender: RenderContext | undefined
@@ -411,7 +412,7 @@ function createServerElement(
       (context) =>
         Object.hasOwn(props ?? {}, 'children')
           ? multipleChildren
-            ? serializeChildren(props?.children as ServerChild, context, true)
+            ? serializeChildren(props?.children as ServerChild, context)
             : serializeSlot(props?.children as ServerChild, context)
           : '',
       'transparent',
@@ -487,9 +488,12 @@ function serializeIntrinsicContents(
     const children =
       rawHtml === undefined
         ? hasChildren
-          ? multipleChildren
-            ? serializeChildren(props?.children as ServerChild, context, !isRawTextElement(type))
-            : serializeSlot(props?.children as ServerChild, context, !isRawTextElement(type))
+          ? serializeElementChildren(
+              type,
+              props?.children as ServerChild,
+              multipleChildren,
+              context,
+            )
           : ''
         : context.hydrationMarkers
           ? hydrationRange('h', assertSafeHydrationRawHtml(rawHtml))
@@ -830,19 +834,14 @@ function isServerSuspension(value: unknown): value is ServerSuspension {
   return typeof value === 'object' && value !== null && SERVER_SUSPENSION in value
 }
 
-function serializeChild(value: ServerChild, context: RenderContext, markScalar = true): string {
-  if (value === null || value === undefined || typeof value === 'boolean') {
-    return context.hydrationMarkers && markScalar ? hydrationRange('t', '') : ''
-  }
-  if (isServerNode(value)) {
-    const content = value[SERVER_NODE](context)
-    return context.hydrationMarkers && value[SERVER_NODE_KIND] === 'intrinsic'
-      ? hydrationRange('s', content)
-      : content
-  }
-  if (isRenderable(value)) return serializeChild(cloneRenderable(value), context, markScalar)
+function serializeChild(value: ServerChild, context: RenderContext): string {
+  // Empty scalars render nothing and intrinsic elements and text render bare: the
+  // hydrator infers both from the DOM inside the enclosing child slot.
+  if (value === null || value === undefined || typeof value === 'boolean') return ''
+  if (isServerNode(value)) return value[SERVER_NODE](context)
+  if (isRenderable(value)) return serializeChild(cloneRenderable(value), context)
   if (Array.isArray(value)) {
-    const content = value.map((child) => serializeChild(child, context, markScalar)).join('')
+    const content = value.map((child) => serializeChild(child, context)).join('')
     return context.hydrationMarkers ? hydrationRange('a', content) : content
   }
   if (typeof value === 'object' || typeof value === 'function' || typeof value === 'symbol') {
@@ -852,7 +851,7 @@ function serializeChild(value: ServerChild, context: RenderContext, markScalar =
   if (context.activityHidden && content !== '') {
     throw new TypeError('initially hidden Activity server children require a host element root')
   }
-  return context.hydrationMarkers && markScalar ? hydrationRange('t', content) : content
+  return content
 }
 
 function hasRenderableChild(value: ServerChild): boolean {
@@ -1108,27 +1107,45 @@ function escapeAttribute(value: string): string {
   return escapeText(value).replaceAll('"', '"').replaceAll("'", ''')
 }
 
-function serializeChildren(
+function serializeElementChildren(
+  type: string,
   value: ServerChild,
+  multipleChildren: boolean,
   context: RenderContext,
-  markScalar: boolean,
 ): string {
+  if (!isRawTextElement(type)) {
+    return multipleChildren ? serializeChildren(value, context) : serializeSlot(value, context)
+  }
+  // The HTML parser treats the contents of <script>, <style>, <textarea> and <title> as
+  // text, so a hydration marker here would surface as literal content — a visible
+  // "<!--v2:b-->" inside the textarea until hydration replaced it. The client claims the
+  // parsed text node directly instead.
+  const hydrationMarkers = context.hydrationMarkers
+  context.hydrationMarkers = false
+  try {
+    return multipleChildren ? serializeChildren(value, context) : serializeSlot(value, context)
+  } finally {
+    context.hydrationMarkers = hydrationMarkers
+  }
+}
+
+function serializeChildren(value: ServerChild, context: RenderContext): string {
   return Array.isArray(value)
-    ? value.map((child) => serializeSlot(child, context, markScalar)).join('')
-    : serializeSlot(value, context, markScalar)
+    ? value.map((child) => serializeSlot(child, context)).join('')
+    : serializeSlot(value, context)
 }
 
-function serializeSlot(value: ServerChild, context: RenderContext, markScalar = true): string {
-  const content = serializeChild(value, context, markScalar)
+function serializeSlot(value: ServerChild, context: RenderContext): string {
+  const content = serializeChild(value, context)
   return context.hydrationMarkers ? hydrationRange('b', content) : content
 }
 
-function hydrationRange(kind: 'a' | 'b' | 'c' | 'h' | 'r' | 's' | 't', content: string): string {
+function hydrationRange(kind: 'a' | 'b' | 'c' | 'h' | 'r', content: string): string {
   return `<!--${HYDRATION_PREFIX}:${kind}-->${content}<!--/${HYDRATION_PREFIX}:${kind}-->`
 }
 
 function assertSafeHydrationRawHtml(value: string): string {
-  if (/<!--\/?vidact:v\d+:/i.test(value)) {
+  if (/<!--\/?(?:vidact:)?v\d+:[a-z]-->/i.test(value)) {
     throw new Error('raw HTML cannot contain Vidact hydration marker syntax')
   }
   return value