@tanstack/redact 0.0.21 → 0.1.0

package/src/dom/resource-hints.ts

@@ -0,0 +1,115 @@
+import { resourceHintDispatcher, resourceURL, type ResourceHintKind, type ResourceHintOptions } from '../core/resource-hints'
+import { adoptResourceProps, getResources, insertResource, resourceAttribute, resourceSelector } from './resource-store'
+const requestOptions = 'integrity fetchPriority'
+
+function options(input: any, fields: string, as?: string): ResourceHintOptions {
+  const result: ResourceHintOptions = {}
+  for (const name of fields ? fields.split(' ') : []) {
+    const value = input?.[name]
+    if (typeof value === 'string') result[name] = value
+  }
+  const crossOrigin = input?.crossOrigin
+  if (as === 'font' || typeof crossOrigin === 'string') {
+    result.crossOrigin = as !== 'font' && crossOrigin === 'use-credentials' ? crossOrigin : ''
+  }
+  return result
+}
+
+function scriptDestination(as: string): boolean {
+  return /^(script|audioworklet|paintworklet|serviceworker|sharedworker|worker)$/.test(as)
+}
+
+function emit(kind: ResourceHintKind, href: string, props: ResourceHintOptions): void {
+  if (!href || resourceHintDispatcher.emit?.(kind, href, props) || typeof document === 'undefined') return
+  const resources = getResources(document)
+
+  const style = kind === 'stylesheet'
+  const script = kind === 'script' || kind === 'module-script'
+  const preload = kind === 'preload' || kind === 'modulepreload'
+  const as = props.as || 'script'
+  let selector: string
+  let tag = 'link'
+  if (style || script) {
+    selector = resourceSelector(href, style ? 'style' : 'script')
+    if (resources.instances.has(selector)) return
+    const existing = document.querySelector(selector)
+    if (existing) { resources.instances.set(selector, existing); return }
+    adoptResourceProps(props, resources.preloads.get(selector), script)
+    if (style) {
+      props = { rel: 'stylesheet', href, 'data-precedence': props.precedence!, ...props }
+      delete props.precedence
+    } else {
+      tag = 'script'
+      props = { src: href, async: '', ...(kind === 'module-script' ? { type: 'module' } : {}), ...props }
+    }
+  } else {
+    selector = `link[rel="${kind}"]`
+    let resource = ''
+    if (preload) {
+      selector += resourceAttribute('as', as)
+      if (as === 'image' && props.imageSrcSet) {
+        selector += resourceAttribute('imagesrcset', props.imageSrcSet)
+        if (typeof props.imageSizes === 'string') selector += resourceAttribute('imagesizes', props.imageSizes)
+      } else selector += resourceAttribute('href', href)
+      resource = (kind === 'preload' ? as === 'script' || as === 'style' : scriptDestination(as))
+        ? resourceSelector(href, as)
+        : ''
+    } else {
+      selector += resourceAttribute('href', href)
+      if (props.crossOrigin != null) selector += resourceAttribute('crossorigin', props.crossOrigin)
+    }
+    const key = resource || selector
+    if (resources.preloads.has(key)) return
+    resources.preloads.set(key, props)
+    if (document.querySelector(selector) || resource && document.querySelector(resource)) return
+    props = { rel: kind, ...(kind === 'preload' && as === 'image' && props.imageSrcSet ? {} : { href }), ...props }
+  }
+
+  const node = document.createElement(tag)
+  for (const name in props) {
+    const value = props[name]!
+    node.setAttribute(name.toLowerCase(), name === 'href' || name === 'src' ? resourceURL(value) : value)
+  }
+  if (style || script) resources.instances.set(selector, node)
+  insertResource(node, style ? props['data-precedence'] : undefined)
+}
+
+export function prefetchDNS(href: string): void {
+  if (typeof href === 'string') emit('dns-prefetch', href, {})
+}
+
+export function preconnect(href: string, input?: any): void {
+  if (typeof href === 'string') emit('preconnect', href, options(input, ''))
+}
+
+export function preload(href: string, input?: any): void {
+  if (typeof href === 'string' && input && typeof input === 'object' && typeof input.as === 'string' && input.as) {
+    emit('preload', href, options(input, 'as nonce type referrerPolicy imageSrcSet imageSizes media ' + requestOptions, input.as))
+  }
+}
+
+export function preinit(href: string, input?: any): void {
+  if (typeof href === 'string' && input) {
+    if (input.as === 'style') {
+      const props = options(input, 'precedence ' + requestOptions)
+      props.precedence ||= 'default'
+      emit('stylesheet', href, props)
+    } else if (input.as === 'script') {
+      emit('script', href, options(input, 'nonce ' + requestOptions))
+    }
+  }
+}
+
+export function preloadModule(href: string, input?: any): void {
+  if (typeof href === 'string') {
+    const props = options(input, 'as nonce ' + requestOptions, input?.as)
+    if (props.as === 'script') delete props.as
+    emit('modulepreload', href, props)
+  }
+}
+
+export function preinitModule(href: string, input?: any): void {
+  if (typeof href === 'string' && (input == null || typeof input === 'object' && (input.as == null || input.as === 'script'))) {
+    emit('module-script', href, options(input, 'nonce ' + requestOptions))
+  }
+}

package/src/dom/resource-store.ts

@@ -0,0 +1,52 @@
+import type { ResourceHintOptions } from '../core/resource-hints'
+
+interface Resources {
+  // Connection and preload selectors are disjoint, so one map deduplicates both.
+  preloads: Map<string, ResourceHintOptions>
+  instances: Map<string, Element>
+}
+
+export type ResourceRoot = Document | DocumentFragment
+
+const roots = /*#__PURE__*/ new WeakMap<ResourceRoot, Resources>()
+// Existing document links can satisfy a shadow declaration. Links created by
+// the resource system belong to their original root instead.
+export const createdStylesheets = /*#__PURE__*/ new WeakSet<Element>()
+
+export function resourceAttribute(name: string, value: string): string {
+  return `[${name}="${value.replace(/[\n"\\]/g, char => '\\' + char.charCodeAt(0).toString(16) + ' ')}"]`
+}
+
+export function resourceSelector(href: string, as: string): string {
+  return as === 'style'
+    ? 'link[rel="stylesheet"]' + resourceAttribute('href', href)
+    : 'script[async]' + resourceAttribute('src', href)
+}
+
+export function getResources(root: ResourceRoot): Resources {
+  let resources = roots.get(root)
+  if (!resources) roots.set(root, resources = { preloads: new Map(), instances: new Map() })
+  return resources
+}
+
+export function adoptResourceProps(props: any, prior: ResourceHintOptions | undefined, script: boolean): void {
+  if (prior) for (const name of ['crossOrigin', 'referrerPolicy', script ? 'integrity' : 'title']) {
+    if (props[name] == null && prior[name] != null) props[name] = prior[name]
+  }
+}
+
+export function insertResource(node: Element, precedence?: string, root: ResourceRoot = node.ownerDocument): void {
+  const container = root.nodeType === 9 ? (root as Document).head : root
+  if (precedence != null) {
+    if (node.localName === 'link') createdStylesheets.add(node)
+    let previous: Element | undefined
+    let matched = false
+    for (const sibling of root.querySelectorAll('link[rel="stylesheet"][data-precedence],style[data-precedence]')) {
+      if (sibling.getAttribute('data-precedence') === precedence) matched = true
+      else if (matched) break
+      previous = sibling
+    }
+    if (previous) previous.parentNode!.insertBefore(node, previous.nextSibling)
+    else container.insertBefore(node, container.firstChild)
+  } else container.appendChild(node)
+}

package/src/dom/resources.ts

@@ -0,0 +1,39 @@
+import { resourceURL } from '../core/resource-hints'
+import { setProp } from './dom'
+import { adoptResourceProps, createdStylesheets, getResources, insertResource, resourceAttribute, resourceSelector, type ResourceRoot } from './resource-store'
+
+// Called only during commit. Resource nodes are shared by href and are not
+// owned by a component's placement or unmount operations.
+// The renderer has already checked this host's resource eligibility.
+export function acquireResource(type: string, props: any, container: Node): Element {
+  const script = type === 'script'
+  const style = type === 'style'
+  const ownerDocument = (container.nodeType === 9 ? container : container.ownerDocument) as Document
+  const tree = script ? ownerDocument : container.getRootNode()
+  const root = (tree.nodeType === 9 || tree.nodeType === 11 ? tree : ownerDocument) as ResourceRoot
+  const href = script ? props.src : props.href
+  const resources = getResources(root)
+  const key = resourceSelector(href, script ? 'script' : 'style')
+  let node = resources.instances.get(key)
+  if (node) return node
+  const existing = !style && !script && root !== ownerDocument ? ownerDocument.querySelector(key) : null
+  node = existing && !createdStylesheets.has(existing) && !(existing as any)._p ? existing
+    : root.querySelector(style ? 'style' + resourceAttribute('data-href~', href) : key) || undefined
+  if (node) { resources.instances.set(key, node); return node }
+
+  const next = { ...props }
+  if (!script) {
+    next['data-precedence'] = props.precedence
+    delete next.precedence
+    if (style) { next['data-href'] = props.href; delete next.href }
+  }
+  if (!style) adoptResourceProps(next, getResources(ownerDocument).preloads.get(key), script)
+  node = ownerDocument.createElement(type)
+  for (const name in next) {
+    setProp(node, name, name === 'href' || name === 'src' ? resourceURL(next[name]) : next[name], undefined, false)
+  }
+  if (style && next.dangerouslySetInnerHTML == null && (typeof next.children === 'string' || typeof next.children === 'number' || typeof next.children === 'bigint')) node.textContent = '' + next.children
+  resources.instances.set(key, node)
+  insertResource(node, script ? undefined : props.precedence, root)
+  return node
+}

package/src/dom/retained-effects.ts

@@ -0,0 +1,38 @@
+import { FiberTag, type Fiber, type Hook, type Effect } from '../core'
+import { onCommitRollback } from './commit'
+
+export const retainedEffects = new WeakMap<Fiber, Map<Hook, Effect>>()
+
+export function rememberRetainedEffect(fiber: Fiber, hook: Hook, effect: Effect): void {
+  let entries = retainedEffects.get(fiber)
+  if (!entries) {
+    retainedEffects.set(fiber, entries = new Map())
+    onCommitRollback(() => { retainedEffects.delete(fiber) })
+  }
+  const previous = entries.get(hook), target = entries
+  onCommitRollback(() => { if (previous) target.set(hook, previous); else target.delete(hook) })
+  entries.set(hook, effect)
+}
+
+export function setLayoutDisconnected(fiber: Fiber, disconnected: boolean): boolean {
+  const previous = !!fiber.ld
+  if (previous !== disconnected) {
+    onCommitRollback(() => { fiber.ld = previous })
+    fiber.ld = disconnected
+  }
+  return previous
+}
+
+export function walkRetained(fiber: Fiber, visit: (fiber: Fiber) => void, postorder = false): void {
+  if (!postorder) visit(fiber)
+  for (let child = fiber.child; child; child = child.sibling) walkRetained(child, visit, postorder)
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) walkRetained(fiber.ms.f, visit, postorder)
+  if (postorder) visit(fiber)
+}
+
+export function inSuspensePrimary(fiber: Fiber): boolean {
+  for (let child = fiber, parent = fiber.parent; parent; child = parent, parent = parent.parent) {
+    if (parent.tag === FiberTag.Suspense && parent.ms?.d && parent.ms.f !== child) return true
+  }
+  return false
+}

package/src/dom/root-internal.ts

@@ -1,10 +1,10 @@
-import { FiberTag, createFiber, type Fiber, type FiberRoot } from '../core'
+import { FiberTag, createFiber, type Fiber, type FiberRoot, type RecoverableErrorHandler } from '../core'
 
 export interface RootOptionsInternal {
   identifierPrefix?: string
-  onRecoverableError?: (error: unknown) => void
-  onCaughtError?: (error: unknown) => void
-  onUncaughtError?: (error: unknown) => void
+  onRecoverableError?: RecoverableErrorHandler
+  onCaughtError?: RecoverableErrorHandler
+  onUncaughtError?: RecoverableErrorHandler
 }
 
 export function createFiberRoot(

package/src/dom/root.ts

@@ -1,13 +1,14 @@
-import type { ReactNode } from '../core'
-import { renderRoot, flushSyncWork, batchedUpdates } from './reconcile'
+import type { ReactNode, RecoverableErrorHandler } from '../core'
+import { renderRoot, scheduleRootRender, flushSyncWork, batchedUpdates } from './reconcile'
 import { hydrateRootImpl } from './features/hydration'
 import { createFiberRoot } from './root-internal'
+import { queueMutation } from './commit'
 
 export interface RootOptions {
   identifierPrefix?: string
-  onRecoverableError?: (error: unknown) => void
-  onCaughtError?: (error: unknown) => void
-  onUncaughtError?: (error: unknown) => void
+  onRecoverableError?: RecoverableErrorHandler
+  onCaughtError?: RecoverableErrorHandler
+  onUncaughtError?: RecoverableErrorHandler
 }
 
 export interface Root {
@@ -21,16 +22,13 @@ export function createRoot(container: Element | DocumentFragment, options: RootO
   let firstRender = true
   return {
     render(children) {
-      if (firstRender) {
-        firstRender = false
-        // Match real React's `clearContainer` semantics: blow away any pre-render
-        // markup (server-rendered placeholder, splash shells, etc.) on the
-        // initial commit so it doesn't stack with the React tree.
-        if ((container as Node).nodeType === 1 /* ELEMENT_NODE */) {
-          ;(container as Element).textContent = ''
+      scheduleRootRender(root, () => {
+        if (firstRender) {
+          queueMutation(() => {
+            firstRender = false
+            if ((container as Node).nodeType === 1) container.textContent = ''
+          })
         }
-      }
-      flushSyncWork(() => {
         renderRoot(root, children)
       })
     },

package/src/react/activity.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from '../core'
+
+export const REACT_ACTIVITY_TYPE = Symbol.for('react.activity')
+
+export interface ActivityProps {
+  children?: ReactNode
+  mode?: 'hidden' | 'visible'
+}
+
+export const Activity = REACT_ACTIVITY_TYPE as any as (props: ActivityProps) => any

package/src/react/element.ts

@@ -4,17 +4,21 @@ import {
   REACT_FRAGMENT_TYPE,
   type ReactElement,
   type ReactNode,
+  type Ref,
 } from '../core'
+import type { FragmentInstance } from '../dom/fragment-instance'
 
 export const Fragment = REACT_FRAGMENT_TYPE as unknown as (props: {
   children?: ReactNode
+  key?: string | number
+  ref?: Ref<FragmentInstance>
 }) => ReactElement
 
 const RESERVED_PROPS: Record<string, 1> = { key: 1, ref: 1, __self: 1, __source: 1 }
 
 export function createElement(
   type: any,
-  config: Record<string, any> | null,
+  config?: Record<string, any> | null,
   ...children: ReactNode[]
 ): ReactElement {
   let key: string | null = null
@@ -46,7 +50,7 @@ export function createElement(
 
 export function cloneElement(
   element: ReactElement,
-  config: Record<string, any> | null,
+  config?: Record<string, any> | null,
   ...children: ReactNode[]
 ): ReactElement {
   let key = element.key

package/src/react/hooks.ts

@@ -5,7 +5,8 @@ import type {
   DependencyList,
 } from '../core'
 import type { Context } from './context'
-import { getDispatcher } from './shared-internals'
+import { getDispatcher, ReactSharedInternals } from './shared-internals'
+import type { BrowserToken } from '../core/browser'
 
 export function useState<S>(initial: S | (() => S)): [S, Dispatch<SetStateAction<S>>] {
   return getDispatcher().useState(initial)
@@ -82,12 +83,20 @@ export function useSyncExternalStore<T>(
   return getDispatcher().useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
 
-export function use<T>(resource: PromiseLike<T> | { _currentValue: T } | { $$typeof: symbol; _currentValue: T }): T {
+export function use(resource: BrowserToken): undefined
+export function use<T>(resource: PromiseLike<T> | { _currentValue: T } | { $$typeof: symbol; _currentValue: T }): T
+export function use<T>(resource: BrowserToken | PromiseLike<T> | { _currentValue: T } | { $$typeof: symbol; _currentValue: T }): T {
   return getDispatcher().use(resource)
 }
 
+export function unstable_useCacheRefresh(): () => void {
+  return getDispatcher().useCacheRefresh()
+}
+
 export function startTransition(fn: () => void): void {
-  fn()
+  const previous = ReactSharedInternals.T
+  ReactSharedInternals.T = previous || new Set()
+  try { fn() } finally { ReactSharedInternals.T = previous }
 }
 
 export function useActionState<S, P>(

package/src/react/index.ts

@@ -39,6 +39,7 @@ export {
   useOptimistic,
   useEffectEvent,
   startTransition,
+  unstable_useCacheRefresh,
 } from './hooks'
 export {
   createContext,
@@ -64,10 +65,18 @@ export {
 } from './suspense'
 export { REACT_PORTAL_TYPE } from './portal'
 export { Children } from './children'
+export { ViewTransition, addTransitionType, REACT_VIEW_TRANSITION_TYPE } from './view-transition'
+export type { ViewTransitionProps, ViewTransitionClass, ViewTransitionInstance, ViewTransitionPseudoElement } from './view-transition'
+export { Activity, REACT_ACTIVITY_TYPE } from './activity'
+export type { ActivityProps } from './activity'
+export type { FragmentInstance } from '../dom/fragment-instance'
 export { ReactSharedInternals } from './shared-internals'
 
 // Stub exports
 export const cache = <T extends Function>(fn: T): T => fn
+// The client/DOM-server entry has no RSC cache lifetime, matching React's
+// client export. The upstream Flight renderer remains responsible for RSC.
+export const cacheSignal = (): AbortSignal | null => null
 export const act = async (fn: () => any) => {
   const r = fn()
   if (r && typeof r.then == 'function') await r
@@ -101,12 +110,15 @@ import {
   useOptimistic,
   useEffectEvent,
   startTransition,
+  unstable_useCacheRefresh,
 } from './hooks'
 import { createContext } from './context'
 import { Component, PureComponent } from './class'
 import { memo, forwardRef, lazy } from './memo'
 import { Suspense, StrictMode, Profiler } from './suspense'
 import { Children } from './children'
+import { ViewTransition, addTransitionType } from './view-transition'
+import { Activity } from './activity'
 
 export default {
   createElement,
@@ -135,6 +147,7 @@ export default {
   useOptimistic,
   useEffectEvent,
   startTransition,
+  unstable_useCacheRefresh,
   createContext,
   Component,
   PureComponent,
@@ -145,5 +158,10 @@ export default {
   StrictMode,
   Profiler,
   Children,
+  ViewTransition,
+  Activity,
+  addTransitionType,
+  cache,
+  cacheSignal,
   version: '19.2.3',
 }

package/src/react/shared-internals.ts

@@ -1,4 +1,4 @@
-import type { Fiber, Hook } from '../core'
+import type { Fiber } from '../core'
 
 export interface Dispatcher {
   useState<S>(initial: S | (() => S)): [S, (s: S | ((p: S) => S)) => void]
@@ -25,13 +25,14 @@ export interface Dispatcher {
     getServerSnapshot?: () => T,
   ): T
   use<T>(promiseOrContext: any): T
+  useCacheRefresh(): () => void
 }
 
 interface SharedInternals {
   H: Dispatcher | null
   F: Fiber | null
-  K: Hook | null
   I: number
+  T?: Set<string> | null | undefined
 }
 
 // Stash the singleton on `globalThis` under a registered symbol. Module-scoped
@@ -52,7 +53,6 @@ export const ReactSharedInternals: SharedInternals =
   (g[KEY] = {
     H: null,
     F: null,
-    K: null,
     I: 0,
   })
 

package/src/react/view-transition.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from '../core'
+import { ReactSharedInternals } from './shared-internals'
+
+export const REACT_VIEW_TRANSITION_TYPE = Symbol.for('react.view_transition')
+
+export type ViewTransitionClass = string | Record<string, string>
+export interface ViewTransitionPseudoElement {
+  animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation
+  getAnimations(): Animation[]
+  getComputedStyle(): CSSStyleDeclaration
+}
+
+export interface ViewTransitionInstance {
+  name: string
+  group: ViewTransitionPseudoElement
+  imagePair: ViewTransitionPseudoElement
+  old: ViewTransitionPseudoElement
+  new: ViewTransitionPseudoElement
+}
+
+type ViewTransitionEvent = (instance: ViewTransitionInstance, types: string[]) => void | (() => void)
+export interface ViewTransitionProps {
+  children?: ReactNode
+  name?: string | Record<string, string> | undefined
+  default?: ViewTransitionClass | undefined
+  enter?: ViewTransitionClass | undefined
+  exit?: ViewTransitionClass | undefined
+  update?: ViewTransitionClass | undefined
+  share?: ViewTransitionClass | undefined
+  onEnter?: ViewTransitionEvent | undefined
+  onExit?: ViewTransitionEvent | undefined
+  onUpdate?: ViewTransitionEvent | undefined
+  onShare?: ViewTransitionEvent | undefined
+}
+
+// Animation support belongs to the optional DOM feature, not this public entry.
+export const ViewTransition = REACT_VIEW_TRANSITION_TYPE as unknown as (props: ViewTransitionProps) => any
+
+export function addTransitionType(type: string): void {
+  ReactSharedInternals.T?.add(type)
+}

package/src/server/bootstrap-script.ts

@@ -20,9 +20,17 @@
  * listeners for a small set of interactive events and push them into a buffer.
  * The bundle drains and replays them via the replay code in @tanstack/redact/dom.
  */
+import { escapeAttr } from './escape'
+
 export const BOUNDARY_REVEAL_RUNTIME =
   `(function(){` +
-    `var c={};` +
+    `var c={},r=new Map;` +
+    `function place(n,v){` +
+      `var a=document.head.querySelectorAll('link[rel="stylesheet"][data-precedence],style[data-precedence]'),t=a.length?a[a.length-1]:null,p=t;` +
+      `for(var k=0;k<a.length;k++){if(a[k].getAttribute("data-precedence")===v)p=a[k];else if(p!==t)break}` +
+      `document.head.insertBefore(n,p?p.nextSibling:document.head.firstChild);` +
+    `}` +
+    `function load(n,e){return new Promise(function(y,x){n.onload=function(){e.p=null;y()};n.onerror=function(){e.p=null;x()}})}` +
     `window.$RH=function(i,f){` +
       `if(!document.getElementById("B:"+i))f();` +
       `else c[i]=f;` +
@@ -30,6 +38,10 @@ export const BOUNDARY_REVEAL_RUNTIME =
     `window.$RC=function(i){` +
       `var s=document.getElementById("S:"+i),b=document.getElementById("B:"+i);` +
       `if(!s||!b)return;` +
+      `var a=document.querySelectorAll('body link[rel="stylesheet"][data-precedence],body style[data-precedence]');` +
+      `for(var j=0;j<a.length;j++){` +
+        `var n=a[j];if(n.getAttribute("media")==="not all")n.removeAttribute("media");place(n,n.getAttribute("data-precedence"));` +
+      `}` +
       `var p=b.parentNode,m=b.previousSibling;` +
       `while(s.firstChild)p.insertBefore(s.firstChild,b);` +
       `s.parentNode.removeChild(s);` +
@@ -37,6 +49,25 @@ export const BOUNDARY_REVEAL_RUNTIME =
       `if(m&&m.nodeType===8)m.data="$"+i;` +
       `if(c[i]){var f=c[i];delete c[i];f()}` +
     `};` +
+    `window.$RL=function(i,d){` +
+      `var w=[];for(var j=0;j<d.length;j++){` +
+        `var a=d[j],e=r.get(a[0]);if(!e){` +
+          `var n=null,l=document.querySelectorAll('link[rel="stylesheet"]');for(var k=0;k<l.length;k++)if(l[k].getAttribute("href")===a[0]){n=l[k];break}` +
+          `e={n:n,p:null};r.set(a[0],e);if(!n){` +
+            `n=e.n=document.createElement("link");n.rel="stylesheet";n.href=a[0];n.setAttribute("data-precedence",a[1]);` +
+            `for(var k=2;k<a.length;k+=2)n.setAttribute(a[k],a[k+1]);` +
+            `e.p=load(n,e);place(n,a[1]);` +
+          `}` +
+        `}` +
+        `var m=e.n.getAttribute("media");if(e.p&&(!m||matchMedia(m).matches))w.push(e.p);` +
+      `}` +
+      `Promise.all(w).then(function(){$RC(i)},function(){$RB(i,1)});` +
+    `};` +
+    `window.$RB=function(i,e){` +
+      `var b=document.getElementById("B:"+i);if(!b)return;` +
+      `var m=b.previousSibling;if(m&&m.nodeType===8)m.data=(e?"$E":"$!")+i;` +
+      `b.removeAttribute("id");if(c[i]){var f=c[i];delete c[i];f()}` +
+    `};` +
     `var q=[];window.$RE_q=q;` +
     `var evs=["click","submit","input","change","keydown"];` +
     `function h(e){q.push([e.type,e.target,e.timeStamp])}` +
@@ -45,11 +76,11 @@ export const BOUNDARY_REVEAL_RUNTIME =
   `})();`
 
 export function injectBootstrapScript(nonce?: string): string {
-  const n = nonce ? ` nonce="${nonce}"` : ''
+  const n = nonce ? ` nonce="${escapeAttr(nonce)}"` : ''
   return `<script${n}>${BOUNDARY_REVEAL_RUNTIME}</script>`
 }
 
-export function revealScript(id: number, nonce?: string): string {
-  const n = nonce ? ` nonce="${nonce}"` : ''
-  return `<script${n}>$RC(${id})</script>`
+export function revealScript(id: number, nonce?: string, styles?: string[][]): string {
+  const n = nonce ? ` nonce="${escapeAttr(nonce)}"` : ''
+  return `<script${n}>${styles?.length ? `$RL(${id},${JSON.stringify(styles).replace(/</g, '\\u003c')})` : `$RC(${id})`}</script>`
 }