@tanstack/redact 0.0.20 → 0.1.0

package/src/server/dispatcher.ts

@@ -1,18 +1,41 @@
 import { ReactSharedInternals, REACT_CONTEXT_TYPE } from '../react'
+import { isBrowserToken, browserError } from '../core/browser'
+import { resourceHintDispatcher } from '../core/resource-hints'
+import { createResourceHints, type ResourceScope } from './resource-hints'
 
-interface SSRFrame {
+export interface SSRFrame {
   idCounter: number
   identifierPrefix: string
   contextStack: Array<{ context: any; prev: any }>
+  resources?: ReturnType<typeof createResourceHints>
+  shellFlushed?: boolean
+  styleNonce?: string | undefined
 }
 
 let frame: SSRFrame | null = null
 
-export function beginSSR(identifierPrefix = ':R'): void {
-  frame = { idCounter: 0, identifierPrefix, contextStack: [] }
+resourceHintDispatcher.emit = (kind, href, options) => {
+  if (!frame) return false
+  ;(frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).add(kind, href, options)
+  return true
 }
 
-export function endSSR(): void {
+export function beginSSR(identifierPrefix = ':R', nextFrame?: SSRFrame) {
+  const previous = { frame, dispatcher: ReactSharedInternals.H }
+  frame = nextFrame ?? { idCounter: 0, identifierPrefix, contextStack: [] }
+  ReactSharedInternals.H = ssrDispatcher as any
+  return previous
+}
+
+export function currentSSRFrame(): SSRFrame {
+  return frame!
+}
+
+export function recordHostResource(type: string, props: any, scope?: ResourceScope): boolean {
+  return !!frame && (frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).addHost(type, props, scope)
+}
+
+export function endSSR(previous?: ReturnType<typeof beginSSR>): void {
   // Restore any remaining pushed contexts (defensive)
   if (frame) {
     for (let i = frame.contextStack.length - 1; i >= 0; i--) {
@@ -20,7 +43,10 @@ export function endSSR(): void {
       context._currentValue = prev
     }
   }
-  frame = null
+  // Only synchronous renders restore their caller. A stream can finish
+  // after its caller has returned, so it must not reinstall that dispatcher.
+  ReactSharedInternals.H = previous?.dispatcher ?? null
+  frame = previous?.frame ?? null
 }
 
 export function pushContext(context: any, value: any): void {
@@ -59,6 +85,9 @@ export function applyContextSnapshot(snapshot: ContextSnapshot): () => void {
 }
 
 export const ssrDispatcher = {
+  useCacheRefresh() {
+    return () => { throw new Error('Refreshing the cache is not supported during server rendering.') }
+  },
   useState<S>(initial: S | (() => S)) {
     const v = typeof initial === 'function' ? (initial as () => S)() : initial
     return [v, (() => {}) as any] as [S, any]
@@ -113,6 +142,7 @@ export const ssrDispatcher = {
   },
   use<T>(resource: any): T {
     if (resource == null) throw new Error('use() received null or undefined')
+    if (isBrowserToken(resource)) throw browserError(resource)
     if (resource.$$typeof === REACT_CONTEXT_TYPE) {
       return resource._currentValue
     }
@@ -148,11 +178,3 @@ export const ssrDispatcher = {
     throw new Error('use() expected a Promise or Context')
   },
 }
-
-export function installSSRDispatcher(): void {
-  ReactSharedInternals.H = ssrDispatcher as any
-}
-
-export function uninstallSSRDispatcher(): void {
-  ReactSharedInternals.H = null
-}

package/src/server/escape.ts

@@ -1,23 +1,25 @@
 import { attributeName, STRING_BOOLEAN_ATTRS } from '../core/attributes'
 
-const ATTR_MAP: Record<string, string> = {
-  '&': '&amp;',
-  '"': '&quot;',
-  '<': '&lt;',
-  '>': '&gt;',
-}
-const TEXT_MAP: Record<string, string> = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;',
+function escape(value: string, pattern: RegExp): string {
+  let out = ''
+  let start = 0
+  while (pattern.test(value)) {
+    const end = pattern.lastIndex
+    const char = value[end - 1]
+    out += value.slice(start, end - 1) + (
+      char === '&' ? '&amp;' : char === '<' ? '&lt;' : char === '>' ? '&gt;' : '&quot;'
+    )
+    start = end
+  }
+  return out + value.slice(start)
 }
 
 export function escapeAttr(value: string): string {
-  return value.replace(/[&"<>]/g, (c) => ATTR_MAP[c]!)
+  return /[&"<>]/.test(value) ? escape(value, /[&"<>]/g) : value
 }
 
 export function escapeText(value: string): string {
-  return value.replace(/[&<>]/g, (c) => TEXT_MAP[c]!)
+  return /[&<>]/.test(value) ? escape(value, /[&<>]/g) : value
 }
 
 // Raw-text element body escaping: prevent any closing tag for the raw-text
@@ -57,6 +59,7 @@ const BOOLEAN_ATTRS = new Set([
   'autoplay',
   'checked',
   'controls',
+  'credentialless',
   'default',
   'defer',
   'disabled',

package/src/server/renderToString.ts

@@ -1,25 +1,27 @@
 import type { ReactNode } from '../core'
-import { beginSSR, endSSR, installSSRDispatcher, uninstallSSRDispatcher } from './dispatcher'
+import { beginSSR, currentSSRFrame, endSSR } from './dispatcher'
 import { walk } from './walk'
 
 export function renderToString(
   children: ReactNode,
   options: { identifierPrefix?: string } = {},
 ): string {
-  installSSRDispatcher()
-  beginSSR(options.identifierPrefix)
+  const previous = beginSSR(options.identifierPrefix)
   let output = ''
   let id = 0
+  let head = 0
   try {
     walk(children, {
       emit: (s) => {
         output += s
       },
       nextBoundaryId: () => id++,
+      onHead: () => { head = output.length },
     })
+    const hints = currentSSRFrame().resources?.drain()
+    if (hints) output = output.slice(0, head) + hints + output.slice(head)
   } finally {
-    endSSR()
-    uninstallSSRDispatcher()
+    endSSR(previous)
   }
   return output
 }

package/src/server/resource-hints.ts

@@ -0,0 +1,165 @@
+import { resourceKind, resourceURL, type ResourceHintKind, type ResourceHintOptions } from '../core/resource-hints'
+import { attrToHtml, escapeAttr } from './escape'
+import { attributeName } from '../core/attributes'
+
+interface Resource {
+  kind: ResourceHintKind | 'style'
+  href: string
+  options: Record<string, any>
+  sent?: boolean
+  cancelled?: boolean
+  preloaded?: boolean
+  css?: string
+}
+
+export interface ResourceScope {
+  stylesheets?: Map<string, string[]>
+  inline?: Set<string>
+}
+
+function styleText(props: any): string {
+  const html = props.dangerouslySetInnerHTML
+  if (html != null) {
+    if (typeof html !== 'object' || !('__html' in html)) throw new Error('dangerouslySetInnerHTML must be an object with an __html field.')
+    if (props.children != null) throw new Error('Can only set one of children or dangerouslySetInnerHTML.')
+    return html.__html == null ? '' : '' + html.__html
+  }
+  const child = Array.isArray(props.children) ? props.children.length < 2 ? props.children[0] : null : props.children
+  return child == null || typeof child === 'function' || typeof child === 'symbol' ? ''
+    : ('' + child).replace(/(<\/?)(s)(tyle)/gi, (_, prefix: string, s: string, suffix: string) => prefix + '\\' + s.charCodeAt(0).toString(16) + ' ' + suffix)
+}
+
+function markup(resource: Resource, late: boolean): string {
+  const { kind, href, options } = resource
+  const script = kind === 'script' || kind === 'module-script'
+  const style = kind === 'stylesheet'
+  const props: Record<string, any> = script
+    ? { src: href, ...(kind === 'module-script' ? { type: 'module' } : {}), async: true, ...options }
+    : style
+      ? late
+        ? { rel: 'preload', as: 'style', href, crossOrigin: options.crossOrigin, fetchPriority: options.fetchPriority, integrity: options.integrity, media: options.media, hrefLang: options.hrefLang, referrerPolicy: options.referrerPolicy }
+        : { rel: 'stylesheet', href, 'data-precedence': options.precedence!, ...options }
+      : { rel: kind, ...(options.as === 'image' && options.imageSrcSet ? {} : { href }), ...options }
+  let output = script ? '<script' : '<link'
+  for (const name in props) {
+    if (name === 'precedence' || late && name === 'data-precedence') continue
+    const value = name === 'href' || name === 'src' ? resourceURL(props[name]!) : props[name]!
+    output += attrToHtml(name, value).replace(/'/g, '&#x27;')
+  }
+  return output + (script ? '></script>' : '/>')
+}
+
+export function createResourceHints(shellFlushed = false, styleNonce?: string) {
+  const resources = new Map<string, Resource>()
+  const groups: Resource[][] = [[], [], [], [], []]
+  const styles = new Map<string, Resource[]>()
+  const dependencies = new Map<string, string[]>()
+  const visibleInline = new Set<string>()
+  const collector = {
+    add(kind: ResourceHintKind | 'style', href: string, options: ResourceHintOptions): Resource {
+      let type: string = kind
+      let source = href
+      const init = kind === 'style' || kind === 'stylesheet' || kind === 'script' || kind === 'module-script'
+      if (kind === 'preload') {
+        type = options.as!
+        if (type === 'image' && options.imageSrcSet) source = options.imageSrcSet + '\n' + (options.imageSizes || '')
+      } else if (kind === 'modulepreload') type = 'module-' + (options.as || 'script')
+      else if (kind === 'stylesheet') type = 'style'
+      else if (kind === 'preconnect') type += ':' + (options.crossOrigin ?? 'default')
+      const key = JSON.stringify([type, source])
+      const prior = resources.get(key)
+      if (prior && (!init || prior.kind !== 'preload' && prior.kind !== 'modulepreload')) return prior
+
+      const resource: Resource = { kind, href, options: { ...options } }
+      if (kind === 'style' && (!styleNonce || options.nonce === styleNonce)) resource.css = styleText(options)
+      if (prior) {
+        prior.cancelled = true
+        resource.preloaded = !!prior.sent
+        for (const name of ['crossOrigin', 'integrity']) {
+          if (resource.options[name] == null && prior.options[name] != null) resource.options[name] = prior.options[name]!
+        }
+      }
+      resources.set(key, resource)
+      if (kind === 'stylesheet' || kind === 'style') {
+        const precedence = options.precedence!
+        let group = styles.get(precedence)
+        if (!group) styles.set(precedence, group = [])
+        group.push(resource)
+      } else {
+        const group = kind === 'dns-prefetch' || kind === 'preconnect' ? 0
+          : kind === 'preload' && options.as === 'font' ? 1
+          : kind === 'preload' && options.as === 'image' && options.fetchPriority === 'high' ? 2
+          : init ? 3 : 4
+        groups[group]!.push(resource)
+      }
+      return resource
+    },
+    addHost(type: string, props: any, scope?: ResourceScope): boolean {
+      const kind = resourceKind(type, props)
+      if (!kind) return false
+      const resource = collector.add(kind === 'script' && props.type === 'module' ? 'module-script' : kind, kind === 'script' ? props.src : props.href, props)
+      if (shellFlushed && kind === 'stylesheet') {
+        const descriptor = [resourceURL(resource.href), resource.options.precedence]
+        for (const name in resource.options) {
+          if (name === 'href' || name === 'rel' || name === 'precedence' || name === 'data-precedence' || name === 'children' || name === 'dangerouslySetInnerHTML' || name === 'innerHTML' || name === 'style' || name === 'suppressHydrationWarning' || name === 'suppressContentEditableWarning' || name === 'ref' || name === 'key' || /^on/i.test(name) || !/^[a-zA-Z_:][a-zA-Z0-9:_.-]*$/.test(name)) continue
+          const value = resource.options[name]
+          if (value == null || typeof value === 'function' || typeof value === 'symbol' || name === 'hidden' && value === false) continue
+          descriptor.push(attributeName(name), name === 'hidden' ? '' : name === 'src' ? resourceURL('' + value) : '' + value)
+        }
+        ;(scope ? scope.stylesheets ||= new Map() : dependencies).set(resource.href, descriptor)
+      } else if (shellFlushed && kind === 'style') {
+        ;(scope ? scope.inline ||= new Set() : visibleInline).add(resource.options.precedence)
+      }
+      return true
+    },
+    mergeScope(scope: ResourceScope, parent?: ResourceScope): void {
+      if (scope.stylesheets) for (const [href, descriptor] of scope.stylesheets) {
+        ;(parent ? parent.stylesheets ||= new Map() : dependencies).set(href, descriptor)
+      }
+      if (scope.inline) for (const precedence of scope.inline) {
+        ;(parent ? parent.inline ||= new Set() : visibleInline).add(precedence)
+      }
+    },
+    takeStylesheets(): string[][] {
+      const result = Array.from(dependencies.values())
+      dependencies.clear()
+      return result
+    },
+    drain(): string {
+      let output = ''
+      function flush(group: Resource[], precedence?: string) {
+        let remaining = 0
+        let inline = false, hasStylesheets = false
+        let hrefs = '', rules = ''
+        for (const resource of group) {
+          if (!resource.sent && !resource.cancelled) {
+            if (resource.kind === 'style') {
+              if (shellFlushed && !visibleInline.has(precedence!)) { group[remaining++] = resource; continue }
+              inline = true
+              if (resource.css !== undefined) {
+                hrefs += (hrefs ? ' ' : '') + resource.href
+                rules += resource.css
+              }
+            } else {
+              if (resource.kind === 'stylesheet') hasStylesheets = true
+              if (!(shellFlushed && resource.kind === 'stylesheet' && resource.preloaded)) output += markup(resource, shellFlushed)
+            }
+            resource.sent = true
+          }
+        }
+        group.length = remaining
+        if (hrefs || inline && !shellFlushed && !hasStylesheets) {
+          output += `<style${styleNonce !== undefined ? ` nonce="${escapeAttr(styleNonce)}"` : ''}${shellFlushed ? ' media="not all"' : ''} data-precedence="${escapeAttr(precedence!)}"${hrefs ? ` data-href="${escapeAttr(hrefs)}"` : ''}>${rules}</style>`
+        }
+      }
+      for (let index = 0; index < groups.length; index++) {
+        if (index === 3) for (const [precedence, group] of styles) flush(group, precedence)
+        flush(groups[index]!)
+      }
+      shellFlushed = true
+      visibleInline.clear()
+      return output
+    },
+  }
+  return collector
+}