acrylblends 0.6.3 → 0.7.0

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

@@ -1,1744 +0,0 @@
-import DefaultExport, {
-  ErrorBoundary,
-  Fragment,
-  StrictMode,
-  createContext,
-  createElement,
-  jsx,
-  memo,
-  useContext,
-  version,
-} from './index.ts'
-import type { Context, FC, PropsWithChildren } from './index.ts'
-/** @jsxImportSource ./ */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { html, raw } from '../helper/html/index.ts'
-import { Acryl } from '../app.ts'
-import { DOM_MEMO } from './constants.ts'
-import { captureRenderContext } from './context.ts'
-import { Suspense, renderToReadableStream } from './streaming.ts'
-
-interface SiteData {
-  title: string
-  children?: any
-}
-
-describe('JSX middleware', () => {
-  let app: Acryl
-
-  beforeEach(() => {
-    app = new Acryl()
-  })
-
-  it('Should render HTML strings', async () => {
-    app.get('/', (c) => {
-      return c.html(<h1>Hello</h1>)
-    })
-    const res = await app.request('http://localhost/')
-    expect(res.status).toBe(200)
-    expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
-    expect(await res.text()).toBe('<h1>Hello</h1>')
-  })
-
-  it('Should be able to be used with html middleware', async () => {
-    const Layout = (props: SiteData) =>
-      html`<!DOCTYPE html>
-        <html>
-          <head>
-            <title>${props.title}</title>
-          </head>
-          <body>
-            ${props.children}
-          </body>
-        </html>`
-
-    const Content = (props: { siteData: SiteData; name: string }) => (
-      <Layout {...props.siteData}>
-        <h1>{props.name}</h1>
-      </Layout>
-    )
-
-    app.get('/', (c) => {
-      const props = {
-        name: 'JSX',
-        siteData: {
-          title: 'with html middleware',
-        },
-      }
-      return c.html(<Content {...props} />)
-    })
-    const res = await app.request('http://localhost/')
-    expect(res.status).toBe(200)
-    expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
-    expect(await res.text()).toBe(`<!DOCTYPE html>
-        <html>
-          <head>
-            <title>with html middleware</title>
-          </head>
-          <body>
-            <h1>JSX</h1>
-          </body>
-        </html>`)
-  })
-
-  it('Should render async component', async () => {
-    const ChildAsyncComponent = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10))
-      return <span>child async component</span>
-    }
-
-    const AsyncComponent = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10))
-      return (
-        <h1>
-          Hello from async component
-          <ChildAsyncComponent />
-        </h1>
-      )
-    }
-
-    app.get('/', (c) => {
-      return c.html(<AsyncComponent />)
-    })
-    const res = await app.request('http://localhost/')
-    expect(res.status).toBe(200)
-    expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
-    expect(await res.text()).toBe(
-      '<h1>Hello from async component<span>child async component</span></h1>'
-    )
-  })
-
-  it('Should render async component with "html" tagged template strings', async () => {
-    const AsyncComponent = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10))
-      return <h1>Hello from async component</h1>
-    }
-
-    app.get('/', (c) => {
-      // prettier-ignore
-      return c.html(
-        html`<html><body>${(<AsyncComponent />)}</body></html>`
-      )
-    })
-    const res = await app.request('http://localhost/')
-    expect(res.status).toBe(200)
-    expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
-    expect(await res.text()).toBe('<html><body><h1>Hello from async component</h1></body></html>')
-  })
-
-  it('Should handle async component error', async () => {
-    const componentError = new Error('Error from async error component')
-
-    const AsyncComponent = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10))
-      return <h1>Hello from async component</h1>
-    }
-    const AsyncErrorComponent = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0))
-      throw componentError
-    }
-
-    let raisedError: any
-    app.onError((e, c) => {
-      raisedError = e
-      return c.html('<html><body><h1>Error from onError</h1></body></html>', 500)
-    })
-    app.get('/', (c) => {
-      return c.html(
-        <>
-          <AsyncComponent />
-          <AsyncErrorComponent />
-        </>
-      )
-    })
-
-    const res = await app.request('http://localhost/')
-    expect(res.status).toBe(500)
-    expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
-    expect(await res.text()).toBe('<html><body><h1>Error from onError</h1></body></html>')
-    expect(raisedError).toBe(componentError)
-  })
-})
-
-describe('render to string', () => {
-  it('Nested array', () => {
-    const template = (
-      <p>
-        {[[['a']], [['b']]].map((item1) =>
-          item1.map((item2) => item2.map((item3) => <span>{item3}</span>))
-        )}
-      </p>
-    )
-    expect(template.toString()).toBe('<p><span>a</span><span>b</span></p>')
-  })
-
-  it('Component returning an array', () => {
-    const Item = ({ x }: { x: number }) => <span>{x}</span>
-    const Items = () => [0, 1].map((x) => <Item key={x} x={x} />)
-    const template = <Items />
-    expect(template.toString()).toBe('<span>0</span><span>1</span>')
-  })
-
-  it('Component returning a nested array', () => {
-    const Items = () => [['a', 'b'], [<span>c</span>], null]
-    const template = <Items />
-    expect(template.toString()).toBe('ab<span>c</span>')
-  })
-
-  it('Component returning an array preserves escaped string callbacks', () => {
-    const Items = () => [
-      raw('a', [
-        ({ buffer }) => {
-          if (buffer) {
-            buffer[0] += 'b'
-          }
-        },
-      ]),
-    ]
-    expect((<Items />).toString()).toBe('ab')
-  })
-
-  it('Component returning an array escapes strings', async () => {
-    const SyncItems = () => ['<script>alert(1)</script>']
-    const AsyncItems = async () => ['<script>alert(1)</script>']
-    const expected = '&lt;script&gt;alert(1)&lt;/script&gt;'
-
-    expect((<SyncItems />).toString()).toBe(expected)
-    expect((await (<AsyncItems />).toString()).toString()).toBe(expected)
-  })
-
-  it('Component returning an array including async components', async () => {
-    const AsyncItem = async ({ x }: { x: number }) => <span>{x}</span>
-    const Items = () => [0, 1].map((x) => <AsyncItem key={x} x={x} />)
-    const template = <Items />
-    expect((await template.toString()).toString()).toBe('<span>0</span><span>1</span>')
-  })
-
-  it('Component typed as FC returning an array', () => {
-    const Item: FC<{ x: number }> = ({ x }) => <span>{x}</span>
-    const Items: FC = () => [0, 1].map((x) => <Item key={x} x={x} />)
-    const template = <Items />
-    expect(template.toString()).toBe('<span>0</span><span>1</span>')
-  })
-
-  it('Async component returning an array', async () => {
-    const AsyncItems = async () => [<span>a</span>, <span>b</span>]
-    const template = <AsyncItems />
-    expect((await template.toString()).toString()).toBe('<span>a</span><span>b</span>')
-  })
-
-  it('Async component returning an array of async components', async () => {
-    const AsyncItem = async ({ x }: { x: number }) => <span>{x}</span>
-    const AsyncItems = async () => [<AsyncItem key={0} x={0} />, <AsyncItem key={1} x={1} />]
-    const template = <AsyncItems />
-    expect((await template.toString()).toString()).toBe('<span>0</span><span>1</span>')
-  })
-
-  it('Empty elements are rended without closing tag', () => {
-    const template = <input />
-    expect(template.toString()).toBe('<input/>')
-  })
-
-  it('Empty elements with children are rended with children and closing tag', () => {
-    const template = <link>https://example.com</link>
-    expect(template.toString()).toBe('<link>https://example.com</link>')
-  })
-
-  describe('programmatic tag names', () => {
-    it('Should throw when jsx() receives a tag name that can break out of the HTML context', () => {
-      const payloads = [
-        '><script>alert(1)</script><x',
-        'div onmouseover="alert(1)" x=',
-        'div></div><img src=x onerror=alert(1)><div',
-        '!--',
-        '!DOCTYPE',
-        '?xml',
-      ]
-
-      for (const tag of payloads) {
-        expect(() => jsx(tag, {}, 'hello')).toThrow(`Invalid JSX tag name: ${tag}`)
-      }
-    })
-
-    it('Should throw when createElement() receives a tag name that can break out of the HTML context', () => {
-      expect(() => createElement('div onmouseover="alert(1)" x=', {}, 'hello')).toThrow(
-        'Invalid JSX tag name: div onmouseover="alert(1)" x='
-      )
-    })
-
-    it('Should throw when jsx() receives an invalid non-primitive tag name', () => {
-      expect(() => jsx(new String('div') as never, {}, 'hello')).toThrow(
-        'Invalid JSX tag name: div'
-      )
-      expect(() =>
-        jsx({ toString: () => 'div onmouseover="alert(1)" x=' } as never, {}, 'hello')
-      ).toThrow('Invalid JSX tag name: div onmouseover="alert(1)" x=')
-    })
-
-    it('Should allow compatible custom and namespaced tag names', () => {
-      expect(jsx('custom-element', {}, 'hello').toString()).toBe(
-        '<custom-element>hello</custom-element>'
-      )
-      expect(jsx('foo:bar', {}, 'hello').toString()).toBe('<foo:bar>hello</foo:bar>')
-      expect(jsx('x.foo', {}, 'hello').toString()).toBe('<x.foo>hello</x.foo>')
-      expect(jsx('x_bar', {}, 'hello').toString()).toBe('<x_bar>hello</x_bar>')
-      expect(jsx('é', {}, 'hello').toString()).toBe('<é>hello</é>')
-    })
-  })
-
-  it('Props value is null', () => {
-    const template = <span data-hello={null}>Hello</span>
-    expect(template.toString()).toBe('<span>Hello</span>')
-  })
-
-  it('Props value is undefined', () => {
-    const template = <span data-hello={undefined}>Hello</span>
-    expect(template.toString()).toBe('<span>Hello</span>')
-  })
-
-  describe('dangerouslySetInnerHTML', () => {
-    it('Should render dangerouslySetInnerHTML', () => {
-      const template = <span dangerouslySetInnerHTML={{ __html: '" is allowed here' }}></span>
-      expect(template.toString()).toBe('<span>" is allowed here</span>')
-    })
-
-    it('Should get an error if both dangerouslySetInnerHTML and children are specified', () => {
-      expect(() =>
-        (<span dangerouslySetInnerHTML={{ __html: '" is allowed here' }}>Hello</span>).toString()
-      ).toThrow(Error)
-    })
-  })
-
-  // https://en.reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
-  describe('Booleans, Null, and Undefined Are Ignored', () => {
-    it.each([true, false, undefined, null])('%s', (item) => {
-      expect((<span>{item}</span>).toString()).toBe('<span></span>')
-    })
-
-    it('falsy value', () => {
-      const template = <span>{0}</span>
-      expect(template.toString()).toBe('<span>0</span>')
-    })
-  })
-
-  // https://en.reactjs.org/docs/jsx-in-depth.html#props-default-to-true
-  describe('Props Default to “True”', () => {
-    it('default prop value', () => {
-      const template = <span data-hello>Hello</span>
-      expect(template.toString()).toBe('<span data-hello="true">Hello</span>')
-    })
-  })
-
-  // https://html.spec.whatwg.org/#attributes-3
-  describe('Boolean attribute', () => {
-    it('default prop value for checked', () => {
-      const template = <input type='checkbox' checked />
-      expect(template.toString()).toBe('<input type="checkbox" checked=""/>')
-    })
-
-    it('default prop value for checked={true}', () => {
-      const template = <input type='checkbox' checked={true} />
-      expect(template.toString()).toBe('<input type="checkbox" checked=""/>')
-    })
-
-    it('no prop for checked={false}', () => {
-      const template = <input type='checkbox' checked={false} />
-      expect(template.toString()).toBe('<input type="checkbox"/>')
-    })
-
-    it('default prop value for disabled', () => {
-      const template = <input type='checkbox' disabled />
-      expect(template.toString()).toBe('<input type="checkbox" disabled=""/>')
-    })
-
-    it('default prop value for disabled={true}', () => {
-      const template = <input type='checkbox' disabled={true} />
-      expect(template.toString()).toBe('<input type="checkbox" disabled=""/>')
-    })
-
-    it('no prop for disabled={false}', () => {
-      const template = <input type='checkbox' disabled={false} />
-      expect(template.toString()).toBe('<input type="checkbox"/>')
-    })
-
-    it('default prop value for readonly', () => {
-      const template = <input type='checkbox' readonly />
-      expect(template.toString()).toBe('<input type="checkbox" readonly=""/>')
-    })
-
-    it('default prop value for readonly={true}', () => {
-      const template = <input type='checkbox' readonly={true} />
-      expect(template.toString()).toBe('<input type="checkbox" readonly=""/>')
-    })
-
-    it('no prop for readonly={false}', () => {
-      const template = <input type='checkbox' readonly={false} />
-      expect(template.toString()).toBe('<input type="checkbox"/>')
-    })
-
-    it('default prop value for selected', () => {
-      const template = (
-        <option value='test' selected>
-          Test
-        </option>
-      )
-      expect(template.toString()).toBe('<option value="test" selected="">Test</option>')
-    })
-
-    it('default prop value for selected={true}', () => {
-      const template = (
-        <option value='test' selected={true}>
-          Test
-        </option>
-      )
-      expect(template.toString()).toBe('<option value="test" selected="">Test</option>')
-    })
-
-    it('no prop for selected={false}', () => {
-      const template = (
-        <option value='test' selected={false}>
-          Test
-        </option>
-      )
-      expect(template.toString()).toBe('<option value="test">Test</option>')
-    })
-
-    it('default prop value for multiple select', () => {
-      const template = (
-        <select multiple>
-          <option>test</option>
-        </select>
-      )
-      expect(template.toString()).toBe('<select multiple=""><option>test</option></select>')
-    })
-
-    it('default prop value for select multiple={true}', () => {
-      const template = (
-        <select multiple={true}>
-          <option>test</option>
-        </select>
-      )
-      expect(template.toString()).toBe('<select multiple=""><option>test</option></select>')
-    })
-
-    it('no prop for select multiple={false}', () => {
-      const template = (
-        <select multiple={false}>
-          <option>test</option>
-        </select>
-      )
-      expect(template.toString()).toBe('<select><option>test</option></select>')
-    })
-
-    it('should render "false" value properly for other non-defined keys', () => {
-      const template = <input type='checkbox' testkey={false} />
-      expect(template.toString()).toBe('<input type="checkbox" testkey="false"/>')
-    })
-
-    it('should support attributes for elements other than input', () => {
-      const template = (
-        <video controls autoplay>
-          <source src='movie.mp4' type='video/mp4' />
-        </video>
-      )
-      expect(template.toString()).toBe(
-        '<video controls="" autoplay=""><source src="movie.mp4" type="video/mp4"/></video>'
-      )
-    })
-  })
-
-  describe('download attribute', () => {
-    it('<a download={true}></a> should be rendered as <a download=""></a>', () => {
-      const template = <a download={true}></a>
-      expect(template.toString()).toBe('<a download=""></a>')
-    })
-
-    it('<a download={false}></a> should be rendered as <a></a>', () => {
-      const template = <a download={false}></a>
-      expect(template.toString()).toBe('<a></a>')
-    })
-
-    it('<a download></a> should be rendered as <a download=""></a>', () => {
-      const template = <a download></a>
-      expect(template.toString()).toBe('<a download=""></a>')
-    })
-
-    it('<a download="test"></a> should be rendered as <a download="test"></a>', () => {
-      const template = <a download='test'></a>
-      expect(template.toString()).toBe('<a download="test"></a>')
-    })
-  })
-
-  describe('Function', () => {
-    it('should be ignored used in on* props', () => {
-      const onClick = () => {}
-      const template = <button onClick={onClick}>Click</button>
-      expect(template.toString()).toBe('<button>Click</button>')
-    })
-
-    it('should be ignored used in ref props', () => {
-      const ref = () => {}
-      const template = <div ref={ref}>Content</div>
-      expect(template.toString()).toBe('<div>Content</div>')
-    })
-
-    it('should raise an error if used in other props', () => {
-      const onClick = () => {}
-      const template = <button data-handler={onClick}>Click</button>
-      expect(() => template.toString()).toThrow(Error)
-    })
-  })
-
-  // https://en.reactjs.org/docs/jsx-in-depth.html#functions-as-children
-  describe('Functions as Children', () => {
-    it('Function', () => {
-      function Repeat(props: any) {
-        const items = []
-        for (let i = 0; i < props.numTimes; i++) {
-          items.push((props.children as Function)(i))
-        }
-        return <div>{items}</div>
-      }
-
-      function ListOfTenThings() {
-        return (
-          <Repeat numTimes={10}>
-            {(index: string) => <div key={index}>This is item {index} in the list</div>}
-          </Repeat>
-        )
-      }
-
-      const template = <ListOfTenThings />
-      expect(template.toString()).toBe(
-        '<div><div>This is item 0 in the list</div><div>This is item 1 in the list</div><div>This is item 2 in the list</div><div>This is item 3 in the list</div><div>This is item 4 in the list</div><div>This is item 5 in the list</div><div>This is item 6 in the list</div><div>This is item 7 in the list</div><div>This is item 8 in the list</div><div>This is item 9 in the list</div></div>'
-      )
-    })
-  })
-
-  describe('FC', () => {
-    it('Should define the type correctly', () => {
-      const Layout: FC<PropsWithChildren<{ title: string }>> = (props) => {
-        return (
-          <html>
-            <head>
-              <title>{props.title}</title>
-            </head>
-            <body>{props.children}</body>
-          </html>
-        )
-      }
-
-      const Top = (
-        <Layout title='Home page'>
-          <h1>Acryl</h1>
-          <p>Acryl is great</p>
-        </Layout>
-      )
-
-      expect(Top.toString()).toBe(
-        '<html><head><title>Home page</title></head><body><h1>Acryl</h1><p>Acryl is great</p></body></html>'
-      )
-    })
-
-    describe('Booleans, Null, and Undefined Are Ignored', () => {
-      it.each([true, false, undefined, null])('%s', (item) => {
-        const Component: FC = (() => {
-          return item
-        }) as FC
-        const template = <Component />
-        expect(template.toString()).toBe('')
-      })
-
-      it('falsy value', () => {
-        const Component: FC = (() => {
-          return 0
-        }) as unknown as FC
-        const template = <Component />
-        expect(template.toString()).toBe('0')
-      })
-    })
-  })
-
-  describe('style attribute', () => {
-    it('should convert the object to strings', () => {
-      const template = (
-        <h1
-          style={{
-            color: 'red',
-            fontSize: 'small',
-            fontFamily: 'Menlo, Consolas, "DejaVu Sans Mono", monospace',
-          }}
-        >
-          Hello
-        </h1>
-      )
-      expect(template.toString()).toBe(
-        '<h1 style="color:red;font-size:small;font-family:Menlo, Consolas, &quot;DejaVu Sans Mono&quot;, monospace">Hello</h1>'
-      )
-    })
-    it('should not convert the strings', () => {
-      const template = <h1 style='color:red;font-size:small'>Hello</h1>
-      expect(template.toString()).toBe('<h1 style="color:red;font-size:small">Hello</h1>')
-    })
-    it('should render variable without any name conversion', () => {
-      const template = <h1 style={{ '--myVar': 1 }}>Hello</h1>
-      expect(template.toString()).toBe('<h1 style="--myVar:1px">Hello</h1>')
-    })
-
-    describe('CSS injection prevention', () => {
-      it('should drop style values containing ";" to prevent CSS injection', () => {
-        const userInput =
-          'transparent;background:url(https://attacker.example/a.png);position:fixed;top:0'
-        const template = <div style={{ color: userInput }} />
-        const out = template.toString() as string
-        expect(out).not.toContain('background:url')
-        expect(out).not.toContain('position:fixed')
-        expect(out).not.toContain('color:')
-        expect(out).toBe('<div style=""></div>')
-      })
-
-      it('should drop only the unsafe property and keep other safe properties', () => {
-        const template = <div style={{ color: 'red;background:blue', backgroundColor: 'white' }} />
-        const out = template.toString() as string
-        expect(out).toBe('<div style="background-color:white"></div>')
-        expect(out).not.toContain('background:blue')
-      })
-
-      it('should drop style values that try to hide declaration separators in CSS comments', () => {
-        const template = (
-          <div
-            style={{
-              color: 'red/*(*/;background:blue;position:fixed;top:0',
-              backgroundColor: 'white',
-            }}
-          />
-        )
-        const out = template.toString() as string
-        expect(out).toBe('<div style="background-color:white"></div>')
-        expect(out).not.toContain('position:fixed')
-      })
-
-      it('should drop style values that try to expose declarations through CSS curly blocks', () => {
-        const template = (
-          <div
-            style={{
-              color: 'red{;background:blue}',
-              backgroundColor: 'white',
-            }}
-          />
-        )
-        const out = template.toString() as string
-        expect(out).toBe('<div style="background-color:white"></div>')
-        expect(out).not.toContain('background:blue')
-      })
-
-      it('should drop unterminated style values that can swallow following declarations', () => {
-        const template = <div style={{ color: 'red/*', display: 'none' }} />
-        const out = template.toString() as string
-        expect(out).toBe('<div style="display:none"></div>')
-        expect(out).not.toContain('color:')
-      })
-
-      it('should drop style property names that can inject declarations', () => {
-        const template = (
-          <div
-            style={{
-              'color;background-image': 'url(https://attacker.example/a.png)',
-              backgroundColor: 'white',
-            }}
-          />
-        )
-        const out = template.toString() as string
-        expect(out).toBe('<div style="background-color:white"></div>')
-        expect(out).not.toContain('background-image')
-      })
-
-      it('should still HTML-escape safe style values', () => {
-        const template = <h1 style={{ fontFamily: '"DejaVu Sans Mono", monospace' }}>Hello</h1>
-        expect(template.toString()).toBe(
-          '<h1 style="font-family:&quot;DejaVu Sans Mono&quot;, monospace">Hello</h1>'
-        )
-      })
-
-      it('should keep semicolons inside quoted style values', () => {
-        const template = <h1 style={{ fontFamily: '"a;b", sans-serif' }}>Hello</h1>
-        expect(template.toString()).toBe(
-          '<h1 style="font-family:&quot;a;b&quot;, sans-serif">Hello</h1>'
-        )
-      })
-
-      it('should drop quoted style values that use newlines to expose declaration separators', () => {
-        const template = (
-          <div
-            style={{
-              fontFamily: '"\n;background:url(https://attacker.example/a.png)',
-              backgroundColor: 'white',
-            }}
-          />
-        )
-        expect(template.toString()).toBe('<div style="background-color:white"></div>')
-      })
-
-      it('should keep numeric style values working', () => {
-        const template = <div style={{ fontSize: 10, lineHeight: 1.5 }} />
-        expect(template.toString()).toBe('<div style="font-size:10px;line-height:1.5"></div>')
-      })
-
-      it('should not throw when style values contain ";"', () => {
-        expect(() => (<div style={{ color: 'red;evil:1' }} />).toString()).not.toThrow()
-      })
-    })
-  })
-
-  describe('HtmlEscaped in props', () => {
-    it('should not be double-escaped', () => {
-      const escapedString = html`${'<html-escaped-string>'}`
-      const template = <span data-text={escapedString}>Hello</span>
-      expect(template.toString()).toBe('<span data-text="&lt;html-escaped-string&gt;">Hello</span>')
-    })
-  })
-
-  describe('XSS prevention for attribute keys', () => {
-    it('Should skip attribute keys containing double quotes', () => {
-      const props: Record<string, string> = { ['" onfocus="alert(1)']: 'x' }
-      const template = <div {...props}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip attribute keys containing >', () => {
-      const props: Record<string, string> = { ['"><script>alert(1)</script><x x="']: 'x' }
-      const template = <div {...props}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip attribute keys containing <', () => {
-      const props: Record<string, string> = { ['foo<bar']: 'x' }
-      const template = <div {...props}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip attribute keys containing backslashes', () => {
-      const props: Record<string, string> = { ['foo\\bar']: 'x' }
-      const template = <div {...props}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip attribute keys containing backticks', () => {
-      const props: Record<string, string> = { ['foo`bar']: 'x' }
-      const template = <div {...props}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip attribute keys containing spaces', () => {
-      const props: Record<string, string> = { ['foo bar']: 'x' }
-      const template = <div {...props}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should still render valid attributes alongside invalid ones', () => {
-      const props: Record<string, string> = {
-        id: 'safe',
-        ['" onfocus="alert(1)']: 'x',
-        class: 'test',
-      }
-      const template = <div {...props}>Hello</div>
-      expect(template.toString()).toBe('<div id="safe" class="test">Hello</div>')
-    })
-
-    it('Should skip invalid attribute keys before style serialization', () => {
-      const template = <div {...{ ['" onfocus="alert(1)']: { fontSize: 10 } }}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip invalid attribute keys before function prop validation', () => {
-      const template = <div {...{ ['" onfocus="alert(1)']: () => 'x' }}>Hello</div>
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip invalid attribute keys before dangerouslySetInnerHTML handling', () => {
-      const template = (
-        <div {...{ ['" onfocus="alert(1)']: { __html: '<strong>Injected</strong>' } }}>Hello</div>
-      )
-      expect(template.toString()).toBe('<div>Hello</div>')
-    })
-
-    it('Should skip invalid attribute keys with Promise values', async () => {
-      const template = <div {...{ ['" onfocus="alert(1)']: Promise.resolve('x') }}>Hello</div>
-      expect(await template.toString()).toBe('<div>Hello</div>')
-    })
-  })
-
-  describe('head', () => {
-    it('Simple head elements should be rendered as is', () => {
-      const template = (
-        <head>
-          <title>Acryl!</title>
-          <meta name='description' content='A description' />
-          <script src='script.js'></script>
-        </head>
-      )
-      expect(template.toString()).toBe(
-        '<head><title>Acryl!</title><meta name="description" content="A description"/><script src="script.js"></script></head>'
-      )
-    })
-  })
-})
-
-describe('className', () => {
-  it('should convert to class attribute for intrinsic elements', () => {
-    const template = <h1 className='h1'>Hello</h1>
-    expect(template.toString()).toBe('<h1 class="h1">Hello</h1>')
-  })
-
-  it('should convert to class attribute for custom elements', () => {
-    const template = <custom-element className='h1'>Hello</custom-element>
-    expect(template.toString()).toBe('<custom-element class="h1">Hello</custom-element>')
-  })
-
-  it('should not convert to class attribute for custom components', () => {
-    const CustomComponent: FC<{ className: string }> = ({ className }) => (
-      <div data-class-name={className}>Hello</div>
-    )
-    const template = <CustomComponent className='h1' />
-    expect(template.toString()).toBe('<div data-class-name="h1">Hello</div>')
-  })
-})
-
-describe('memo', () => {
-  it('does not reuse the result of a previous render', () => {
-    let counter = 0
-    const Header = memo(() => <title>Test Site {counter}</title>)
-    const Body = () => <span>{counter}</span>
-
-    let template = (
-      <html>
-        <head>
-          <Header />
-        </head>
-        <body>
-          <Body />
-        </body>
-      </html>
-    )
-    expect(template.toString()).toBe(
-      '<html><head><title>Test Site 0</title></head><body><span>0</span></body></html>'
-    )
-
-    counter++
-    template = (
-      <html>
-        <head>
-          <Header />
-        </head>
-        <body>
-          <Body />
-        </body>
-      </html>
-    )
-    expect(template.toString()).toBe(
-      '<html><head><title>Test Site 1</title></head><body><span>1</span></body></html>'
-    )
-  })
-
-  it('does not carry a context value into a later render', () => {
-    const NameContext = createContext('anonymous')
-    const Panel = memo(() => <p>{useContext(NameContext)}</p>)
-    const render = (name: string) =>
-      (
-        <NameContext.Provider value={name}>
-          <Panel />
-        </NameContext.Provider>
-      ).toString()
-
-    expect(render('alice')).toBe('<p>alice</p>')
-    expect(render('bob')).toBe('<p>bob</p>')
-  })
-
-  it('props are updated', () => {
-    const Body = memo(({ counter }: { counter: number }) => <span>{counter}</span>)
-
-    let template = <Body counter={0} />
-    expect(template.toString()).toBe('<span>0</span>')
-
-    template = <Body counter={1} />
-    expect(template.toString()).toBe('<span>1</span>')
-  })
-
-  it('custom propsAreEqual is handed to the DOM renderer', () => {
-    const propsAreEqual = (_: { counter: number }, nextProps: { counter: number }) =>
-      nextProps.counter === 0
-    const Body = memo(({ counter }: { counter: number }) => <span>{counter}</span>, propsAreEqual)
-
-    expect((Body as any)[DOM_MEMO]).toBe(propsAreEqual)
-
-    expect((<Body counter={0} />).toString()).toBe('<span>0</span>')
-    expect((<Body counter={1} />).toString()).toBe('<span>1</span>')
-  })
-})
-
-describe('Fragment', () => {
-  it('Should render children', () => {
-    const template = (
-      <>
-        <p>1</p>
-        <p>2</p>
-      </>
-    )
-    expect(template.toString()).toBe('<p>1</p><p>2</p>')
-  })
-
-  it('Should render children - with `Fragment`', () => {
-    const template = (
-      <Fragment>
-        <p>1</p>
-        <p>2</p>
-      </Fragment>
-    )
-    expect(template.toString()).toBe('<p>1</p><p>2</p>')
-  })
-
-  it('Should render a child', () => {
-    const template = (
-      <>
-        <p>1</p>
-      </>
-    )
-    expect(template.toString()).toBe('<p>1</p>')
-  })
-
-  it('Should render a child - with `Fragment`', () => {
-    const template = (
-      <Fragment>
-        <p>1</p>
-      </Fragment>
-    )
-    expect(template.toString()).toBe('<p>1</p>')
-  })
-
-  it('Should render nothing for empty Fragment', () => {
-    const template = <></>
-    expect(template.toString()).toBe('')
-  })
-
-  it('Should render nothing for undefined', () => {
-    const template = <>{undefined}</>
-    expect(template.toString()).toBe('')
-  })
-})
-
-describe('StrictMode', () => {
-  it('Should render children', () => {
-    const template = (
-      <StrictMode>
-        <p>1</p>
-        <p>2</p>
-      </StrictMode>
-    )
-    expect(template.toString()).toBe('<p>1</p><p>2</p>')
-  })
-})
-
-describe('SVG', () => {
-  it('simple', () => {
-    const template = (
-      <svg>
-        <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' />
-      </svg>
-    )
-    expect(template.toString()).toBe(
-      '<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle></svg>'
-    )
-  })
-
-  it('title element', () => {
-    const template = (
-      <>
-        <head>
-          <title>Document Title</title>
-        </head>
-        <svg>
-          <title>SVG Title</title>
-        </svg>
-      </>
-    )
-    expect(template.toString()).toBe(
-      '<head><title>Document Title</title></head><svg><title>SVG Title</title></svg>'
-    )
-  })
-
-  it('should skip invalid attribute keys in SVG while preserving valid ones', () => {
-    const template = (
-      <svg>
-        <g {...{ ['" onload="alert(1)']: 'x', viewBox: '0 0 10 10' }} />
-      </svg>
-    )
-    expect(template.toString()).toBe('<svg><g viewBox="0 0 10 10"></g></svg>')
-  })
-
-  it('should normalize kebab-case attributes on the <svg> root element', () => {
-    const template = <svg {...{ strokeWidth: '1.5', strokeLinecap: 'round' }} viewBox='0 0 16 16' />
-    expect(template.toString()).toBe(
-      '<svg stroke-width="1.5" stroke-linecap="round" viewBox="0 0 16 16"></svg>'
-    )
-  })
-
-  describe('attribute', () => {
-    describe('camelCase', () => {
-      test.each`
-        key
-        ${'attributeName'}
-        ${'baseFrequency'}
-        ${'calcMode'}
-        ${'clipPathUnits'}
-        ${'diffuseConstant'}
-        ${'edgeMode'}
-        ${'filterUnits'}
-        ${'gradientTransform'}
-        ${'gradientUnits'}
-        ${'kernelMatrix'}
-        ${'kernelUnitLength'}
-        ${'keyPoints'}
-        ${'keySplines'}
-        ${'keyTimes'}
-        ${'lengthAdjust'}
-        ${'limitingConeAngle'}
-        ${'markerHeight'}
-        ${'markerUnits'}
-        ${'markerWidth'}
-        ${'maskContentUnits'}
-        ${'maskUnits'}
-        ${'numOctaves'}
-        ${'pathLength'}
-        ${'patternContentUnits'}
-        ${'patternTransform'}
-        ${'patternUnits'}
-        ${'pointsAtX'}
-        ${'pointsAtY'}
-        ${'pointsAtZ'}
-        ${'preserveAlpha'}
-        ${'preserveAspectRatio'}
-        ${'primitiveUnits'}
-        ${'refX'}
-        ${'refY'}
-        ${'repeatCount'}
-        ${'repeatDur'}
-        ${'specularConstant'}
-        ${'specularExponent'}
-        ${'spreadMethod'}
-        ${'startOffset'}
-        ${'stdDeviation'}
-        ${'stitchTiles'}
-        ${'surfaceScale'}
-        ${'crossorigin'}
-        ${'systemLanguage'}
-        ${'tableValues'}
-        ${'targetX'}
-        ${'targetY'}
-        ${'textLength'}
-        ${'viewBox'}
-        ${'xChannelSelector'}
-        ${'yChannelSelector'}
-      `('$key', ({ key }) => {
-        const template = (
-          <svg>
-            <g {...{ [key]: 'test' }} />
-          </svg>
-        )
-        expect(template.toString()).toBe(`<svg><g ${key}="test"></g></svg>`)
-      })
-    })
-
-    describe('kebab-case', () => {
-      test.each`
-        key
-        ${'alignmentBaseline'}
-        ${'baselineShift'}
-        ${'clipPath'}
-        ${'clipRule'}
-        ${'colorInterpolation'}
-        ${'colorInterpolationFilters'}
-        ${'dominantBaseline'}
-        ${'fillOpacity'}
-        ${'fillRule'}
-        ${'floodColor'}
-        ${'floodOpacity'}
-        ${'fontFamily'}
-        ${'fontSize'}
-        ${'fontSizeAdjust'}
-        ${'fontStretch'}
-        ${'fontStyle'}
-        ${'fontVariant'}
-        ${'fontWeight'}
-        ${'imageRendering'}
-        ${'letterSpacing'}
-        ${'lightingColor'}
-        ${'markerEnd'}
-        ${'markerMid'}
-        ${'markerStart'}
-        ${'overlinePosition'}
-        ${'overlineThickness'}
-        ${'paintOrder'}
-        ${'pointerEvents'}
-        ${'shapeRendering'}
-        ${'stopColor'}
-        ${'stopOpacity'}
-        ${'strikethroughPosition'}
-        ${'strikethroughThickness'}
-        ${'strokeDasharray'}
-        ${'strokeDashoffset'}
-        ${'strokeLinecap'}
-        ${'strokeLinejoin'}
-        ${'strokeMiterlimit'}
-        ${'strokeOpacity'}
-        ${'strokeWidth'}
-        ${'textAnchor'}
-        ${'textDecoration'}
-        ${'textRendering'}
-        ${'transformOrigin'}
-        ${'underlinePosition'}
-        ${'underlineThickness'}
-        ${'unicodeBidi'}
-        ${'vectorEffect'}
-        ${'wordSpacing'}
-        ${'writingMode'}
-      `('$key', ({ key }) => {
-        const template = (
-          <svg>
-            <g {...{ [key]: 'test' }} />
-          </svg>
-        )
-        expect(template.toString()).toBe(
-          `<svg><g ${key.replace(/([A-Z])/g, '-$1').toLowerCase()}="test"></g></svg>`
-        )
-      })
-    })
-
-    describe('data-*', () => {
-      test.each`
-        key
-        ${'data-foo'}
-        ${'data-foo-bar'}
-        ${'data-fooBar'}
-      `('$key', ({ key }) => {
-        const template = (
-          <svg>
-            <g {...{ [key]: 'test' }} />
-          </svg>
-        )
-        expect(template.toString()).toBe(`<svg><g ${key}="test"></g></svg>`)
-      })
-    })
-  })
-})
-
-describe('Context', () => {
-  let ThemeContext: Context<string>
-  let Consumer: FC
-  let ErrorConsumer: FC
-  let AsyncConsumer: FC
-  let AsyncErrorConsumer: FC
-  beforeAll(() => {
-    ThemeContext = createContext('light')
-    Consumer = () => {
-      const theme = useContext(ThemeContext)
-      return <span>{theme}</span>
-    }
-    ErrorConsumer = () => {
-      throw new Error('ErrorConsumer')
-    }
-    AsyncConsumer = async () => {
-      const theme = useContext(ThemeContext)
-      return <span>{theme}</span>
-    }
-    AsyncErrorConsumer = async () => {
-      throw new Error('AsyncErrorConsumer')
-    }
-  })
-
-  describe('with .Provider', () => {
-    it('has a child', () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <Consumer />
-        </ThemeContext.Provider>
-      )
-      expect(template.toString()).toBe('<span>dark</span>')
-    })
-
-    it('has children', () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <div>
-            <Consumer />!
-          </div>
-          <div>
-            <Consumer />!
-          </div>
-        </ThemeContext.Provider>
-      )
-      expect(template.toString()).toBe('<div><span>dark</span>!</div><div><span>dark</span>!</div>')
-    })
-
-    it('escapes a single string child', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>{'<img src=x onerror=alert(1)>'}</ThemeContext.Provider>
-      )
-
-      expect(String(await template.toString())).toBe('&lt;img src=x onerror=alert(1)&gt;')
-    })
-
-    it('escapes a string returned by an asynchronous child', async () => {
-      const Async = async () => '<img src=x onerror=alert(1)>' as any
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <Async />
-        </ThemeContext.Provider>
-      )
-
-      expect(String(await template.toString())).toBe('&lt;img src=x onerror=alert(1)&gt;')
-    })
-
-    it('preserves explicitly trusted content', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          {raw('<strong>trusted</strong>')}
-        </ThemeContext.Provider>
-      )
-
-      expect(await template.toString()).toBe('<strong>trusted</strong>')
-    })
-
-    it('escapes untrusted object stringification', async () => {
-      const object = { toString: () => '<img src=x onerror=alert(1)>' }
-      const asyncObject = { toString: async () => '<img src=x onerror=alert(1)>' }
-      const rawObject = { toString: () => raw('<img src=x onerror=alert(1)>') }
-
-      for (const child of [object, asyncObject, rawObject]) {
-        const template = (
-          <ThemeContext.Provider value='dark'>{child as never}</ThemeContext.Provider>
-        )
-        expect(String(await template.toString())).toBe('&lt;img src=x onerror=alert(1)&gt;')
-      }
-    })
-
-    it('continues to omit unsupported objects in child arrays', async () => {
-      const object = { toString: () => '<img src=x onerror=alert(1)>' }
-      const template = (
-        <ThemeContext.Provider value='dark'>{[object as never, 'safe']}</ThemeContext.Provider>
-      )
-
-      expect(await template.toString()).toBe('safe')
-    })
-
-    it('keeps a direct Promise child unchanged', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>{Promise.resolve('resolved')}</ThemeContext.Provider>
-      )
-
-      expect(await template.toString()).toBe('[object Promise]')
-    })
-
-    it('nested', () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <Consumer />
-          <ThemeContext.Provider value='black'>
-            <Consumer />
-          </ThemeContext.Provider>
-          <Consumer />
-        </ThemeContext.Provider>
-      )
-      expect(template.toString()).toBe('<span>dark</span><span>black</span><span>dark</span>')
-    })
-
-    it('should reset context by error', () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <ErrorConsumer />
-        </ThemeContext.Provider>
-      )
-      expect(() => template.toString()).toThrow()
-
-      const nextRequest = <Consumer />
-      expect(nextRequest.toString()).toBe('<span>light</span>')
-    })
-  })
-
-  describe('<Context> as a provider ', () => {
-    it('has a child', () => {
-      const template = (
-        <ThemeContext value='dark'>
-          <Consumer />
-        </ThemeContext>
-      )
-      expect(template.toString()).toBe('<span>dark</span>')
-    })
-  })
-
-  it('default value', () => {
-    const template = <Consumer />
-    expect(template.toString()).toBe('<span>light</span>')
-  })
-
-  describe('with Suspence', () => {
-    const RedTheme = () => (
-      <ThemeContext.Provider value='red'>
-        <Consumer />
-      </ThemeContext.Provider>
-    )
-
-    it('Should preserve context in sync component', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <Suspense fallback={<RedTheme />}>
-            <Consumer />
-            <ThemeContext.Provider value='black'>
-              <Consumer />
-            </ThemeContext.Provider>
-          </Suspense>
-        </ThemeContext.Provider>
-      )
-      const stream = renderToReadableStream(template)
-
-      const chunks = []
-      const textDecoder = new TextDecoder()
-      for await (const chunk of stream as any) {
-        chunks.push(textDecoder.decode(chunk))
-      }
-
-      expect(chunks).toEqual(['<span>dark</span><span>black</span>'])
-    })
-
-    it('Should preserve context in async component', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <Suspense fallback={<RedTheme />}>
-            <Consumer />
-            <ThemeContext.Provider value='black'>
-              <AsyncConsumer />
-            </ThemeContext.Provider>
-          </Suspense>
-        </ThemeContext.Provider>
-      )
-      const stream = renderToReadableStream(template)
-
-      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:0"></template><span>red</span><!--/$-->',
-        `<template data-acryl-target="H:0"><span>dark</span><span>black</span></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:0')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`,
-      ])
-    })
-  })
-
-  describe('async component', () => {
-    const ParentAsyncConsumer = async () => {
-      const theme = useContext(ThemeContext)
-      return (
-        <div>
-          <span>{theme}</span>
-          <AsyncConsumer />
-        </div>
-      )
-    }
-
-    const ParentAsyncErrorConsumer = async () => {
-      const theme = useContext(ThemeContext)
-      return (
-        <div>
-          <span>{theme}</span>
-          <AsyncErrorConsumer />
-        </div>
-      )
-    }
-
-    it('simple', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <AsyncConsumer />
-        </ThemeContext.Provider>
-      )
-      expect((await template.toString()).toString()).toBe('<span>dark</span>')
-    })
-
-    it('returning an array', async () => {
-      const ArrayConsumer = async () => {
-        await new Promise((resolve) => setTimeout(resolve, 10))
-        return [<span>{useContext(ThemeContext)}</span>, <span>x</span>]
-      }
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <ArrayConsumer />
-        </ThemeContext.Provider>
-      )
-      expect((await template.toString()).toString()).toBe('<span>dark</span><span>x</span>')
-    })
-
-    it('isolates a shared async result between providers', async () => {
-      const sharedResult = Promise.resolve(<Consumer />)
-      const SharedConsumer = () => sharedResult
-      const [dark, black] = await Promise.all([
-        (
-          <ThemeContext.Provider value='dark'>
-            <SharedConsumer />
-          </ThemeContext.Provider>
-        ).toString(),
-        (
-          <ThemeContext.Provider value='black'>
-            <SharedConsumer />
-          </ThemeContext.Provider>
-        ).toString(),
-      ])
-      expect(dark.toString()).toBe('<span>dark</span>')
-      expect(black.toString()).toBe('<span>black</span>')
-    })
-
-    it('nested', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <ParentAsyncConsumer />
-        </ThemeContext.Provider>
-      )
-      expect((await template.toString()).toString()).toBe(
-        '<div><span>dark</span><span>dark</span></div>'
-      )
-    })
-
-    it('should reset context by error', async () => {
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <ParentAsyncErrorConsumer />
-        </ThemeContext.Provider>
-      )
-      await expect(async () => (await template.toString()).toString()).rejects.toThrow()
-
-      const nextRequest = <Consumer />
-      expect(nextRequest.toString()).toBe('<span>light</span>')
-    })
-
-    it('should keep captured context until a resumed async callback settles', async () => {
-      let resolveReader!: () => void
-      const readerWait = new Promise<void>((resolve) => {
-        resolveReader = resolve
-      })
-      let markReaderEntered!: () => void
-      const readerEntered = new Promise<void>((resolve) => {
-        markReaderEntered = resolve
-      })
-
-      const ResumedReader = () => {
-        const resume = captureRenderContext()
-        return resume(async () => {
-          markReaderEntered()
-          await readerWait
-          return <>{useContext(ThemeContext)}</>
-        })
-      }
-
-      const htmlPromise = (
-        <ThemeContext.Provider value='dark'>
-          <ResumedReader />
-        </ThemeContext.Provider>
-      ).toString()
-
-      await readerEntered
-      resolveReader()
-
-      expect(`${await htmlPromise}`).toBe('dark')
-    })
-
-    it('should pop captured context when a resumed callback throws', async () => {
-      const ThrowThenRead = ({ resume }: { resume: ReturnType<typeof captureRenderContext> }) => {
-        try {
-          resume(() => {
-            throw new Error('boom')
-          })
-        } catch {}
-        return <>{useContext(ThemeContext)}</>
-      }
-      const CaptureOuter = () => {
-        const resume = captureRenderContext()
-        return (
-          <ThemeContext.Provider value='inner'>
-            <ThrowThenRead resume={resume} />
-          </ThemeContext.Provider>
-        )
-      }
-
-      expect(
-        `${await (
-          <ThemeContext.Provider value='outer'>
-            <CaptureOuter />
-          </ThemeContext.Provider>
-        ).toString()}`
-      ).toBe('inner')
-    })
-
-    it('should pop captured context when a resumed async callback rejects', async () => {
-      const RejectThenRead = async ({
-        resume,
-      }: {
-        resume: ReturnType<typeof captureRenderContext>
-      }) => {
-        try {
-          await resume(async () => {
-            await Promise.resolve()
-            throw new Error('boom')
-          })
-        } catch {}
-        return <>{useContext(ThemeContext)}</>
-      }
-      const CaptureOuter = () => {
-        const resume = captureRenderContext()
-        return (
-          <ThemeContext.Provider value='inner'>
-            <RejectThenRead resume={resume} />
-          </ThemeContext.Provider>
-        )
-      }
-
-      expect(
-        `${await (
-          <ThemeContext.Provider value='outer'>
-            <CaptureOuter />
-          </ThemeContext.Provider>
-        ).toString()}`
-      ).toBe('inner')
-    })
-
-    it('should isolate async component context between concurrent requests', async () => {
-      const app = new Acryl()
-      const SessionContext = createContext({ username: 'guest', role: 'guest' })
-      const waits = new Map<string, Promise<void>>()
-      const entered = new Map<string, () => void>()
-
-      const AdminDashboard = async ({ wait }: { wait: Promise<void> }) => {
-        entered.get(useContext(SessionContext).username)?.()
-        await wait
-        const session = useContext(SessionContext)
-
-        if (session.role !== 'admin') {
-          return <div>Access Denied for {session.username}</div>
-        }
-
-        return <div>Welcome Admin {session.username}. Secret Data: 42</div>
-      }
-
-      app.get('/', (c) => {
-        const session = {
-          username: c.req.query('user') || 'guest',
-          role: c.req.query('role') || 'guest',
-        }
-        const wait = waits.get(session.username) || Promise.resolve()
-
-        return c.html(
-          <SessionContext.Provider value={session}>
-            <AdminDashboard wait={wait} />
-          </SessionContext.Provider>
-        )
-      })
-
-      let resolveAdmin!: () => void
-      let resolveAttacker!: () => void
-      waits.set(
-        'admin',
-        new Promise<void>((resolve) => {
-          resolveAdmin = resolve
-        })
-      )
-      waits.set(
-        'attacker',
-        new Promise<void>((resolve) => {
-          resolveAttacker = resolve
-        })
-      )
-      const adminEntered = new Promise<void>((resolve) => {
-        entered.set('admin', resolve)
-      })
-      const attackerEntered = new Promise<void>((resolve) => {
-        entered.set('attacker', resolve)
-      })
-
-      const adminReq = app.fetch(new Request('http://localhost/?user=admin&role=admin'))
-      const attackerReq = app.fetch(new Request('http://localhost/?user=attacker&role=guest'))
-
-      await Promise.all([adminEntered, attackerEntered])
-      resolveAttacker()
-      await Promise.resolve()
-      resolveAdmin()
-
-      const [adminRes, attackerRes] = await Promise.all([adminReq, attackerReq])
-      const adminHtml = await adminRes.text()
-      const attackerHtml = await attackerRes.text()
-
-      // Each request must render with exactly its own provided value: no
-      // cross-request leak, and no degradation to the context default.
-      expect(adminHtml).toBe('<div>Welcome Admin admin. Secret Data: 42</div>')
-      expect(attackerHtml).toBe('<div>Access Denied for attacker</div>')
-    })
-  })
-
-  describe('async with html helper', () => {
-    it('should preserve context when using await before html helper', async () => {
-      // Context was being popped before async children resolved
-      const AsyncParentWithHtml = async (props: { children?: any }) => {
-        await new Promise((r) => setTimeout(r, 10))
-        return html`<div>${props.children}</div>`
-      }
-
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <AsyncParentWithHtml>
-            <Consumer />
-          </AsyncParentWithHtml>
-        </ThemeContext.Provider>
-      )
-      expect((await template.toString()).toString()).toBe('<div><span>dark</span></div>')
-    })
-
-    it('should preserve nested context when using await before html helper', async () => {
-      const AsyncParentWithHtml = async (props: { children?: any }) => {
-        await new Promise((r) => setTimeout(r, 10))
-        return html`<div>${props.children}</div>`
-      }
-
-      const template = (
-        <ThemeContext.Provider value='dark'>
-          <AsyncParentWithHtml>
-            <ThemeContext.Provider value='black'>
-              <Consumer />
-            </ThemeContext.Provider>
-          </AsyncParentWithHtml>
-        </ThemeContext.Provider>
-      )
-      expect((await template.toString()).toString()).toBe('<div><span>black</span></div>')
-    })
-  })
-})
-
-describe('ErrorBoundary', () => {
-  it('awaits thenable fallback values', async () => {
-    const Broken = () => {
-      throw new Error('boom')
-    }
-    const fallback = {
-      then(resolve: (value: unknown) => void) {
-        resolve(<span>Recovered</span>)
-      },
-    }
-
-    expect(
-      `${await (
-        <ErrorBoundary fallback={fallback as any}>
-          <Broken />
-        </ErrorBoundary>
-      ).toString()}`
-    ).toBe('<span>Recovered</span>')
-  })
-
-  it('prefers an empty fallback over fallbackRender', async () => {
-    const Broken = () => {
-      throw new Error('boom')
-    }
-    let fallbackRenderCalled = false
-
-    expect(
-      `${await (
-        <ErrorBoundary
-          fallback=''
-          fallbackRender={() => {
-            fallbackRenderCalled = true
-            return <span>fallbackRender</span>
-          }}
-        >
-          <Broken />
-        </ErrorBoundary>
-      ).toString()}`
-    ).toBe('')
-    expect(fallbackRenderCalled).toBe(false)
-  })
-
-  it('renders async rejection fallback with the captured context while streaming', async () => {
-    const ThemeContext = createContext('default')
-    const Fallback = () => <span>{useContext(ThemeContext)}</span>
-    const Broken = async () => {
-      await Promise.resolve()
-      throw new Error('boom')
-    }
-
-    const stream = renderToReadableStream(
-      <ThemeContext.Provider value='outer'>
-        <ErrorBoundary fallbackRender={() => <Fallback />}>
-          <Broken />
-        </ErrorBoundary>
-      </ThemeContext.Provider>
-    )
-    const decoder = new TextDecoder()
-    let html = ''
-    for await (const chunk of stream) {
-      html += decoder.decode(chunk)
-    }
-
-    expect(html).toContain('<span>outer</span>')
-    expect(html).not.toContain('<span>default</span>')
-  })
-})
-
-describe('version', () => {
-  it('should be defined with semantic versioning format', () => {
-    expect(version).toMatch(/^\d+\.\d+\.\d+-acryl-jsx$/)
-  })
-})
-
-describe('default export', () => {
-  ;[
-    'version',
-    'memo',
-    'Fragment',
-    'isValidElement',
-    'createElement',
-    'cloneElement',
-    'ErrorBoundary',
-    'createContext',
-    'useContext',
-    'useState',
-    'useEffect',
-    'useRef',
-    'useCallback',
-    'useReducer',
-    'useDebugValue',
-    'createRef',
-    'forwardRef',
-    'useImperativeHandle',
-    'useSyncExternalStore',
-    'use',
-    'startTransition',
-    'useTransition',
-    'useDeferredValue',
-    'startViewTransition',
-    'useViewTransition',
-    'useMemo',
-    'useLayoutEffect',
-    'useInsertionEffect',
-    'useActionState',
-    'useOptimistic',
-    'Suspense',
-    'StrictMode',
-  ].forEach((key) => {
-    it(key, () => {
-      expect((DefaultExport as any)[key]).toBeDefined()
-    })
-  })
-})