acrylblends 0.6.3 → 0.6.4

package/plugins/acryl-router/src/core/jsx/streaming.test.tsx

@@ -1,1281 +0,0 @@
-/** @jsxImportSource ./ */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { JSDOM } from 'jsdom'
-import { raw } from '../helper/html/index.ts'
-import { HtmlEscapedCallbackPhase, resolveCallback } from '../utils/html.ts'
-import type { HtmlEscapedString } from '../utils/html.ts'
-import { createContext, useContext } from './context.ts'
-import { buildDataStack } from './dom/render.ts'
-import { use } from './hooks/index.ts'
-import { Suspense, renderToReadableStream, StreamingContext } from './streaming.ts'
-
-const unsafeHtml = '<img src=x onerror=alert(1)>'
-const escapedUnsafeHtml = '&lt;img src=x onerror=alert(1)&gt;'
-
-function replacementResult(html: string) {
-  const document = new JSDOM(html, { runScripts: 'dangerously' }).window.document
-  document.querySelectorAll('template, script').forEach((e) => e.remove())
-  return document.body.innerHTML
-}
-
-async function drainStream(stream: unknown): Promise<string> {
-  const textDecoder = new TextDecoder()
-  let html = ''
-  for await (const chunk of stream as any) {
-    html += textDecoder.decode(chunk)
-  }
-  return html
-}
-
-async function stringify(node: { toString(): string | Promise<string> }): Promise<string> {
-  return String(
-    await resolveCallback(await node.toString(), HtmlEscapedCallbackPhase.Stringify, false, {})
-  )
-}
-
-async function readInitialSuspenseChunk(fallback: unknown): Promise<string> {
-  let resolve!: () => void
-  const promise = new Promise<void>((done) => (resolve = done))
-  const Async = async () => {
-    await promise
-    return <span>done</span>
-  }
-  const reader = renderToReadableStream(
-    <Suspense fallback={fallback}>
-      <Async />
-    </Suspense>
-  ).getReader()
-
-  const first = await reader.read()
-  resolve()
-  while (!(await reader.read()).done) {
-    // Drain the retry so it cannot outlive the test.
-  }
-  return new TextDecoder().decode(first.value)
-}
-
-describe('Streaming', () => {
-  let suspenseCounter = 0
-  afterEach(() => {
-    suspenseCounter++
-  })
-
-  it('Suspense / async component returning an array', async () => {
-    const Content = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10))
-      return [<h1>Hello</h1>, <h2>World</h2>]
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks[0]).toBe(
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`
-    )
-    expect(chunks[1]).toContain(
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1><h2>World</h2></template>`
-    )
-  })
-
-  it('preserves callbacks in a streamed async component array', async () => {
-    const phases: number[] = []
-    const Content = async () => [
-      raw('Hello', [({ phase }) => void phases.push(phase)]),
-      <span>World</span>,
-    ]
-
-    const html = await drainStream(renderToReadableStream(<Content />))
-
-    expect(html).toBe('Hello<span>World</span>')
-    expect(phases).toEqual([HtmlEscapedCallbackPhase.BeforeStream, HtmlEscapedCallbackPhase.Stream])
-    suspenseCounter--
-  })
-
-  it('Suspense / renderToReadableStream', async () => {
-    let contentEvaluatedCount = 0
-    const Content = () => {
-      contentEvaluatedCount++
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(() => resolve(<h1>Hello</h1>), 10)
-      )
-      return content
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1>'
-    )
-
-    expect(contentEvaluatedCount).toEqual(1)
-  })
-
-  it('Suspense with StreamingContext', async () => {
-    let contentEvaluatedCount = 0
-    const Content = () => {
-      contentEvaluatedCount++
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(() => resolve(<h1>Hello</h1>), 10)
-      )
-      return content
-    }
-
-    const stream = renderToReadableStream(
-      <StreamingContext value={{ scriptNonce: 'test-nonce' }}>
-        <Suspense fallback={<p>Loading...</p>}>
-          <Content />
-        </Suspense>
-      </StreamingContext>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1></template><script nonce="test-nonce">
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1>'
-    )
-
-    expect(contentEvaluatedCount).toEqual(1)
-  })
-
-  it('`throw promise` inside Suspense', async () => {
-    let contentEvaluatedCount = 0
-    let resolvedContent: HtmlEscapedString | undefined = undefined
-    const Content = () => {
-      contentEvaluatedCount++
-      if (!resolvedContent) {
-        throw new Promise<void>((resolve) =>
-          setTimeout(() => {
-            resolvedContent = (<p>thrown a promise then resolved</p>) as HtmlEscapedString
-            resolve()
-          }, 10)
-        )
-      }
-      return resolvedContent
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><p>thrown a promise then resolved</p></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<p>thrown a promise then resolved</p>'
-    )
-
-    expect(contentEvaluatedCount).toEqual(2)
-  })
-
-  it('simple content inside Suspense', async () => {
-    const Content = () => {
-      return <h1>Hello</h1>
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual(['<h1>Hello</h1>'])
-
-    suspenseCounter -= 1 // fallback is not rendered
-  })
-
-  it('nullish children', async () => {
-    const stream = renderToReadableStream(
-      <div>
-        <Suspense fallback={<p>Loading...</p>}>{[null, undefined]}</Suspense>
-      </div>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual(['<div></div>'])
-
-    suspenseCounter -= 1 // fallback is not rendered
-  })
-
-  it('without children', async () => {
-    const stream = renderToReadableStream(
-      <div>
-        <Suspense fallback={<p>Loading...</p>}></Suspense>
-      </div>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual(['<div></div>'])
-
-    suspenseCounter -= 1 // fallback is not rendered
-  })
-
-  it('only a "false" child', async () => {
-    const stream = renderToReadableStream(
-      <div>
-        <Suspense fallback={<p>Loading...</p>}>{false}</Suspense>
-      </div>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual(['<div></div>'])
-
-    suspenseCounter -= 1 // fallback is not rendered
-  })
-
-  it('async nullish children', async () => {
-    let resolved = false
-    const Content = () => {
-      if (!resolved) {
-        resolved = true
-        throw new Promise<void>((r) =>
-          setTimeout(() => {
-            resolved = true
-            r()
-          }, 10)
-        )
-      }
-      return <h1>Hello</h1>
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-        {[null, undefined]}
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1>'
-    )
-  })
-
-  it('boolean children', async () => {
-    const stream = renderToReadableStream(
-      <div>
-        <Suspense fallback={<p>Loading...</p>}>{[true, false]}</Suspense>
-      </div>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual(['<div></div>'])
-
-    suspenseCounter -= 1 // fallback is not rendered
-  })
-
-  it('async boolean children', async () => {
-    let resolved = false
-    const Content = () => {
-      if (!resolved) {
-        resolved = true
-        throw new Promise<void>((r) =>
-          setTimeout(() => {
-            resolved = true
-            r()
-          }, 10)
-        )
-      }
-      return <h1>Hello</h1>
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-        {[true, false]}
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1>'
-    )
-  })
-
-  it('children Suspense', async () => {
-    const Content1 = () =>
-      new Promise<HtmlEscapedString>((resolve) => setTimeout(() => resolve(<h1>Hello</h1>), 10))
-    const Content2 = () =>
-      new Promise<HtmlEscapedString>((resolve) => setTimeout(() => resolve(<h2>Acryl</h2>), 10))
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Suspense fallback={<p>Loading sub content1...</p>}>
-          <Content1 />
-        </Suspense>
-        <Suspense fallback={<p>Loading sub content2...</p>}>
-          <Content2 />
-        </Suspense>
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1><h2>Acryl</h2>'
-    )
-
-    suspenseCounter += 2
-  })
-
-  it('children Suspense: Suspense and string', async () => {
-    const Content1 = () =>
-      new Promise<HtmlEscapedString>((resolve) => setTimeout(() => resolve(<h1>Hello</h1>), 10))
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Suspense fallback={<p>Loading sub content1...</p>}>
-          <Content1 />
-        </Suspense>
-        Acryl
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1>Acryl'
-    )
-
-    suspenseCounter += 1
-  })
-
-  it('resolve(undefined)', async () => {
-    const Content = async () => {
-      const content = await Promise.resolve(undefined)
-      return <p>{content}</p>
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><p></p></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual('<p></p>')
-  })
-
-  it('resolve(null)', async () => {
-    const Content = async () => {
-      const content = await Promise.resolve(null)
-      return <p>{content}</p>
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><p></p></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual('<p></p>')
-  })
-
-  it('reject()', async () => {
-    const Content = async () => {
-      const content = await Promise.reject()
-      return <p>{content}</p>
-    }
-
-    const onError = vi.fn()
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>,
-      onError
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(onError).toBeCalledTimes(1)
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      '',
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<p>Loading...</p><!--/$-->'
-    )
-  })
-
-  it('closed()', async () => {
-    const Content = async () => {
-      await new Promise<void>((resolve) =>
-        setTimeout(() => {
-          vi.spyOn(ReadableStreamDefaultController.prototype, 'enqueue').mockImplementation(() => {
-            throw new Error('closed')
-          })
-          resolve()
-        }, 10)
-      )
-      return <p>content</p>
-    }
-
-    const onError = vi.fn()
-    const stream = renderToReadableStream(
-      <>
-        <Suspense fallback={<p>Loading...</p>}>
-          <Content />
-        </Suspense>
-        <Suspense fallback={<p>Loading...</p>}>
-          <Content />
-        </Suspense>
-      </>,
-      onError
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(onError).toBeCalledTimes(1)
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$--><template id="H:${
-        suspenseCounter + 1
-      }"></template><p>Loading...</p><!--/$-->`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<p>Loading...</p><!--/$--><p>Loading...</p><!--/$-->'
-    )
-
-    suspenseCounter++
-    await new Promise((resolve) => setTimeout(resolve, 10))
-    vi.restoreAllMocks()
-  })
-
-  it('Multiple "await" call', async () => {
-    const delayedContent = new Promise<HtmlEscapedString>((resolve) =>
-      setTimeout(() => resolve(<h1>Hello</h1>), 10)
-    )
-    const delayedContent2 = new Promise<HtmlEscapedString>((resolve) =>
-      setTimeout(() => resolve(<h2>World</h2>), 10)
-    )
-    const Content = async () => {
-      const content = await delayedContent
-      const content2 = await delayedContent2
-      return (
-        <>
-          {content}
-          {content2}
-        </>
-      )
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1><h2>World</h2></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1><h2>World</h2>'
-    )
-  })
-
-  it('Complex fallback content', async () => {
-    const delayedContent = new Promise<HtmlEscapedString>((resolve) =>
-      setTimeout(() => resolve(<h1>Hello</h1>), 10)
-    )
-
-    const Content = async () => {
-      const content = await delayedContent
-      return content
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense
-        fallback={
-          <>
-            Loading<span>...</span>
-          </>
-        }
-      >
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template>Loading<span>...</span><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1>'
-    )
-  })
-
-  it('renders Suspense fallback with outer context values', async () => {
-    const ThemeContext = createContext('default')
-    const Fallback = () => <p>Loading {useContext(ThemeContext)}</p>
-    const Content = () =>
-      new Promise<HtmlEscapedString>((resolve) => setTimeout(() => resolve(<h1>Done</h1>), 10))
-
-    const stream = renderToReadableStream(
-      <ThemeContext.Provider value='outer'>
-        <Suspense fallback={<Fallback />}>
-          <Content />
-        </Suspense>
-      </ThemeContext.Provider>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks[0]).toBe(
-      `<template id="H:${suspenseCounter}"></template><p>Loading outer</p><!--/$-->`
-    )
-    expect(chunks.join('')).toContain('<h1>Done</h1>')
-    expect(chunks.join('')).not.toContain('default')
-  })
-
-  it('nested Suspense', async () => {
-    const SubContent = () => {
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(() => resolve(<h2>World</h2>), 10)
-      )
-      return content
-    }
-
-    const Content = () => {
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(
-          () =>
-            resolve(
-              <>
-                <h1>Hello</h1>
-                <Suspense fallback={<p>Loading sub content...</p>}>
-                  <SubContent />
-                </Suspense>
-              </>
-            ),
-          10
-        )
-      )
-      return content
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([
-      `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-      `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello</h1><template id=\"H:${
-        suspenseCounter + 1
-      }\"></template><p>Loading sub content...</p><!--/$--></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-      `<template data-acryl-target="H:${suspenseCounter + 1}"><h2>World</h2></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter + 1}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-    ])
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<h1>Hello</h1><h2>World</h2>'
-    )
-    suspenseCounter++
-  })
-
-  it('In multiple Suspense, go ahead in the order of resolved', async () => {
-    const SubContent2 = () => {
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(() => resolve(<p>first</p>), 20)
-      )
-      return content
-    }
-    const SubContent1 = () => {
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(
-          () =>
-            resolve(
-              <Suspense fallback={<p>Loading content2...</p>}>
-                <SubContent2 />
-              </Suspense>
-            ),
-          10
-        )
-      )
-      return content
-    }
-    const SubContent3 = () => {
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(() => resolve(<p>last</p>), 40)
-      )
-      return content
-    }
-
-    const Content = () => {
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(
-          () =>
-            resolve(
-              <>
-                <Suspense fallback={<p>Loading content1...</p>}>
-                  <SubContent1 />
-                </Suspense>
-                <Suspense fallback={<p>Loading content3...</p>}>
-                  <SubContent3 />
-                </Suspense>
-              </>
-            ),
-          10
-        )
-      )
-      return content
-    }
-
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>
-    )
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-      '<p>first</p><p>last</p>'
-    )
-  })
-
-  it('Suspense with resolveStream', async () => {
-    let contentEvaluatedCount = 0
-    const Content = () => {
-      contentEvaluatedCount++
-      const content = new Promise<HtmlEscapedString>((resolve) =>
-        setTimeout(() => resolve(<h1>Hello</h1>), 10)
-      )
-      return content
-    }
-
-    const str = await resolveCallback(
-      await (
-        <Suspense fallback={<p>Loading...</p>}>
-          <Content />
-        </Suspense>
-      ).toString(),
-      HtmlEscapedCallbackPhase.Stream,
-      false,
-      {}
-    )
-
-    expect(str).toEqual('<h1>Hello</h1>')
-    expect(contentEvaluatedCount).toEqual(1)
-  })
-
-  it('renderToReadableStream(str: string)', async () => {
-    const str = '<h1>Hello</h1>'
-    const stream = renderToReadableStream(raw(str))
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual([str])
-  })
-
-  it('renderToReadableStream(promise: Promise<HtmlEscapedString>)', async () => {
-    const stream = renderToReadableStream(Promise.resolve(raw('<h1>Hello</h1>')))
-
-    const chunks = []
-    const textDecoder = new TextDecoder()
-    for await (const chunk of stream as any) {
-      chunks.push(textDecoder.decode(chunk))
-    }
-
-    expect(chunks).toEqual(['<h1>Hello</h1>'])
-
-    suspenseCounter++
-  })
-
-  describe('use()', async () => {
-    it('render to string', async () => {
-      const promise = new Promise((resolve) => setTimeout(() => resolve('Hello from use()'), 0))
-      const Content = () => {
-        const message = use(promise)
-        return <h1>{message}</h1>
-      }
-
-      const str = await resolveCallback(
-        await (
-          <Suspense fallback={<p>Loading...</p>}>
-            <Content />
-          </Suspense>
-        ).toString(),
-        HtmlEscapedCallbackPhase.Stream,
-        false,
-        {}
-      )
-      expect(str).toEqual('<h1>Hello from use()</h1>')
-    })
-
-    it('render to stream', async () => {
-      const promise = new Promise((resolve) => setTimeout(() => resolve('Hello from use()'), 0))
-      const Content = () => {
-        const message = use(promise)
-        return <h1>{message}</h1>
-      }
-
-      const stream = renderToReadableStream(
-        <Suspense fallback={<p>Loading...</p>}>
-          <Content />
-        </Suspense>
-      )
-
-      const chunks = []
-      const textDecoder = new TextDecoder()
-      for await (const chunk of stream as any) {
-        chunks.push(textDecoder.decode(chunk))
-      }
-
-      expect(chunks).toEqual([
-        `<template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$-->`,
-        `<template data-acryl-target="H:${suspenseCounter}"><h1>Hello from use()</h1></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:${suspenseCounter}')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-      ])
-
-      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
-        '<h1>Hello from use()</h1>'
-      )
-    })
-  })
-
-  it('should not throw ERR_INVALID_STATE when reader is cancelled during nested Suspense streaming', async () => {
-    const unhandled: unknown[] = []
-    const onRejection = (e: unknown) => unhandled.push(e)
-    process.on('unhandledRejection', onRejection)
-
-    const SubContent = async () => <h2>World</h2>
-    const Content = async () => (
-      <>
-        <h1>Hello</h1>
-        <Suspense fallback={<p>Loading sub...</p>}>
-          <SubContent />
-        </Suspense>
-      </>
-    )
-
-    const onError = vi.fn()
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>,
-      onError
-    )
-
-    const reader = stream.getReader()
-    const firstChunk = await reader.read()
-    expect(firstChunk.done).toBe(false)
-
-    // Simulate client disconnect
-    await reader.cancel()
-
-    // Wait for nested Suspense callbacks to fire against the closed controller
-    await new Promise((resolve) => setTimeout(resolve))
-
-    expect(unhandled).toHaveLength(0)
-    expect(onError).not.toHaveBeenCalled()
-
-    process.off('unhandledRejection', onRejection)
-  })
-
-  it('should not call onError when reader is cancelled during a slow callback resolution', async () => {
-    const unhandled: unknown[] = []
-    const onRejection = (e: unknown) => unhandled.push(e)
-    process.on('unhandledRejection', onRejection)
-
-    let signalCallbackStarted!: () => void
-    const callbackStarted = new Promise<void>((r) => {
-      signalCallbackStarted = r
-    })
-
-    const Content = async () =>
-      raw('<p>content</p>', [
-        ((opts: any) => {
-          if (opts.phase === HtmlEscapedCallbackPhase.BeforeStream) {
-            signalCallbackStarted()
-            return new Promise<string>((r) => setTimeout(() => r('')))
-          }
-          return undefined
-        }) as any,
-      ])
-
-    const onError = vi.fn()
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading...</p>}>
-        <Content />
-      </Suspense>,
-      onError
-    )
-
-    const reader = stream.getReader()
-    await reader.read()
-
-    await callbackStarted
-    await reader.cancel()
-
-    await new Promise((resolve) => setTimeout(resolve))
-
-    expect(unhandled).toHaveLength(0)
-    expect(onError).not.toHaveBeenCalled()
-
-    process.off('unhandledRejection', onRejection)
-  })
-
-  it('should not throw when cancelled before initial content resolves', async () => {
-    const unhandled: unknown[] = []
-    const onRejection = (e: unknown) => unhandled.push(e)
-    process.on('unhandledRejection', onRejection)
-
-    const onError = vi.fn()
-    const stream = renderToReadableStream(
-      Promise.resolve(raw('<p>slow content</p>') as HtmlEscapedString),
-      onError
-    )
-
-    const reader = stream.getReader()
-    await reader.cancel()
-
-    await new Promise((resolve) => setTimeout(resolve))
-
-    expect(unhandled).toHaveLength(0)
-    expect(onError).not.toHaveBeenCalled()
-
-    process.off('unhandledRejection', onRejection)
-  })
-
-  it('pops buildDataStack when a deferred re-render rejects', async () => {
-    const baseLength = buildDataStack.length
-
-    const deferred = new Promise<string>((resolve) => setTimeout(() => resolve('x'), 10))
-    let first = true
-    const Content = () => {
-      if (first) {
-        // Suspend like use() does so Suspense defers the re-render.
-        first = false
-        throw deferred
-      }
-      throw new Error('boom')
-    }
-
-    const onError = vi.fn(() => '')
-    const stream = renderToReadableStream(
-      <Suspense fallback={<p>Loading</p>}>
-        <Content />
-      </Suspense>,
-      onError
-    )
-    for await (const _ of stream as any) {
-      // drain
-    }
-
-    expect(onError).toHaveBeenCalledTimes(1)
-    // The deferred re-render pushed a stack frame; rejecting must still pop it.
-    expect(buildDataStack.length).toBe(baseLength)
-  })
-
-  it('isolates context between concurrent streaming renders', async () => {
-    // Default value is distinct from both requests so a cross-request leak
-    // (reading the other request's value) would be detectable.
-    const SessionContext = createContext('nobody')
-    const waits = new Map<string, Promise<void>>()
-    const entered = new Map<string, () => void>()
-
-    const Dashboard = async ({ name }: { name: string }) => {
-      // Read context only after suspending, the pattern that previously leaked.
-      entered.get(name)?.()
-      await waits.get(name)
-      return <span>role:{useContext(SessionContext)}</span>
-    }
-
-    const drain = async (value: string) => {
-      return drainStream(
-        renderToReadableStream(
-          <SessionContext.Provider value={value}>
-            <Dashboard name={value} />
-          </SessionContext.Provider>
-        )
-      )
-    }
-
-    let resolveAdmin!: () => void
-    let resolveGuest!: () => void
-    waits.set(
-      'admin',
-      new Promise<void>((resolve) => {
-        resolveAdmin = resolve
-      })
-    )
-    waits.set(
-      'guest',
-      new Promise<void>((resolve) => {
-        resolveGuest = resolve
-      })
-    )
-    const adminEntered = new Promise<void>((resolve) => {
-      entered.set('admin', resolve)
-    })
-    const guestEntered = new Promise<void>((resolve) => {
-      entered.set('guest', resolve)
-    })
-
-    const adminDrain = drain('admin')
-    const guestDrain = drain('guest')
-
-    await Promise.all([adminEntered, guestEntered])
-    resolveGuest()
-    await Promise.resolve()
-    resolveAdmin()
-
-    const [adminHtml, guestHtml] = await Promise.all([adminDrain, guestDrain])
-
-    expect(adminHtml).toContain('role:admin')
-    expect(adminHtml).not.toContain('role:guest')
-    expect(guestHtml).toContain('role:guest')
-    expect(guestHtml).not.toContain('role:admin')
-  })
-
-  describe('escaping', () => {
-    it('escapes string children with an asynchronous sibling', async () => {
-      const Async = async () => <span>done</span>
-      const node = (
-        <Suspense fallback='loading'>
-          {unsafeHtml}
-          <Async />
-        </Suspense>
-      )
-
-      expect(await stringify(node)).toBe(`${escapedUnsafeHtml}<span>done</span>`)
-      const streamed = await drainStream(renderToReadableStream(node))
-      expect(streamed).toContain(escapedUnsafeHtml)
-      expect(streamed).not.toContain(unsafeHtml)
-    })
-
-    it('escapes nested array strings', async () => {
-      expect(await stringify(<Suspense fallback='loading'>{[[[unsafeHtml]]]}</Suspense>)).toBe(
-        escapedUnsafeHtml
-      )
-    })
-
-    it('escapes a primitive fallback in the initial stream chunk', async () => {
-      const initialChunk = await readInitialSuspenseChunk(unsafeHtml)
-
-      expect(initialChunk).toContain(escapedUnsafeHtml)
-      expect(initialChunk).not.toContain(unsafeHtml)
-    })
-
-    it('escapes untrusted object fallbacks', async () => {
-      const object = { toString: () => unsafeHtml }
-      const asyncObject = { toString: async () => unsafeHtml }
-      const rawObject = { toString: () => raw(unsafeHtml) }
-
-      for (const fallback of [object, asyncObject, rawObject]) {
-        const initialChunk = await readInitialSuspenseChunk(fallback)
-        expect(initialChunk).toContain(escapedUnsafeHtml)
-        expect(initialChunk).not.toContain(unsafeHtml)
-      }
-    })
-
-    it('preserves an explicitly trusted fallback', async () => {
-      expect(await readInitialSuspenseChunk(raw('<strong>trusted</strong>'))).toContain(
-        '<strong>trusted</strong>'
-      )
-    })
-
-    it('does not interpret replacement patterns in content', async () => {
-      const content = "literal $& $` $'"
-      const Async = async () => <span>done</span>
-
-      expect(
-        await stringify(
-          <Suspense fallback='loading'>
-            {content}
-            <Async />
-          </Suspense>
-        )
-      ).toBe('literal $&amp; $` $&#39;<span>done</span>')
-    })
-
-    it('escapes untrusted object children', async () => {
-      const object = { toString: () => unsafeHtml }
-      const asyncObject = { toString: async () => unsafeHtml }
-      const rawObject = { toString: () => raw(unsafeHtml) }
-
-      for (const child of [object, asyncObject, rawObject]) {
-        const node = <Suspense fallback='loading'>{child as never}</Suspense>
-        expect(await stringify(node)).toBe(escapedUnsafeHtml)
-        const streamed = await drainStream(renderToReadableStream(node))
-        expect(streamed).toContain(escapedUnsafeHtml)
-        expect(streamed).not.toContain(unsafeHtml)
-      }
-    })
-
-    it('preserves explicitly trusted children', async () => {
-      expect(
-        await stringify(<Suspense fallback='loading'>{raw('<strong>trusted</strong>')}</Suspense>)
-      ).toBe('<strong>trusted</strong>')
-    })
-
-    it('keeps benign object stringification visible', async () => {
-      expect(await stringify(<Suspense fallback='loading'>{{} as never}</Suspense>)).toBe(
-        '[object Object]'
-      )
-    })
-
-    it('keeps a direct Promise child unchanged', async () => {
-      expect(
-        await stringify(<Suspense fallback='loading'>{Promise.resolve('resolved')}</Suspense>)
-      ).toBe('[object Promise]')
-    })
-  })
-})