acrylblends 0.6.3 → 0.6.4

package/plugins/acryl-router/src/core/jsx/dom/intrinsic-element/components.test.tsx

@@ -1,1344 +0,0 @@
-/** @jsxImportSource ../../ */
-import { JSDOM, ResourceLoader } from 'jsdom'
-import { Suspense, render } from '../index.ts'
-import { useState } from '../../hooks/index.ts'
-import { clearCache, composeRef } from './components.ts'
-
-describe('intrinsic element', () => {
-  let CustomResourceLoader: typeof ResourceLoader
-  beforeAll(() => {
-    global.requestAnimationFrame = (cb) => setTimeout(cb)
-
-    CustomResourceLoader = class CustomResourceLoader extends ResourceLoader {
-      fetch(url: string) {
-        return url.includes('invalid')
-          ? Promise.reject('Invalid URL')
-          : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (Promise.resolve(Buffer.from('')) as any)
-      }
-    }
-  })
-
-  let dom: JSDOM
-  let root: HTMLElement
-  beforeEach(() => {
-    clearCache()
-
-    dom = new JSDOM('<html><head></head><body><div id="root"></div></body></html>', {
-      runScripts: 'dangerously',
-      resources: new CustomResourceLoader(),
-    })
-    global.document = dom.window.document
-    global.HTMLElement = dom.window.HTMLElement
-    global.SVGElement = dom.window.SVGElement
-    global.Text = dom.window.Text
-    global.FormData = dom.window.FormData
-    global.CustomEvent = dom.window.CustomEvent
-    root = document.getElementById('root') as HTMLElement
-  })
-
-  describe('document metadata', () => {
-    describe('title element', () => {
-      it('should be inserted into head', () => {
-        const App = () => {
-          return (
-            <div>
-              <title>Document Title</title>
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<title>Document Title</title>')
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should be updated', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <title>Document Title {count}</title>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<title>Document Title 0</title>')
-        expect(root.innerHTML).toBe('<div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<title>Document Title 1</title>')
-      })
-
-      it('should be removed when unmounted', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              {count === 1 && <title>Document Title {count}</title>}
-              <div>{count}</div>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<title>Document Title 1</title>')
-        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
-      })
-
-      it('should be inserted bottom of head if existing element is removed', async () => {
-        document.head.innerHTML = '<title>Existing Title</title>'
-
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              {count === 1 && <title>Document Title {count}</title>}
-              <div>{count}</div>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<title>Existing Title</title>')
-        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        document.head.querySelector('title')?.remove()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<title>Document Title 1</title>')
-        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
-      })
-
-      it('should be inserted before existing title element', async () => {
-        document.head.innerHTML = '<title>Existing Title</title>'
-
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              {count === 1 && <title>Document Title {count}</title>}
-              <div>{count}</div>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<title>Existing Title</title>')
-        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<title>Document Title 1</title><title>Existing Title</title>'
-        )
-        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<title>Existing Title</title>')
-        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
-      })
-    })
-
-    describe('link element', () => {
-      it('should be inserted into head', () => {
-        const App = () => {
-          return (
-            <div>
-              <link rel='stylesheet' href='style.css' precedence='default' />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<link href="style.css" rel="stylesheet" data-precedence="default">'
-        )
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should be updated', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <link rel='stylesheet' href={`style${count}.css`} precedence='default' />
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<link href="style0.css" rel="stylesheet" data-precedence="default">'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<link href="style1.css" rel="stylesheet" data-precedence="default">'
-        )
-      })
-
-      it('should not do special behavior if disabled is present', () => {
-        const App = () => {
-          return (
-            <div>
-              <link rel='stylesheet' href={'style.css'} precedence='default' disabled={true} />
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe(
-          '<div><link rel="stylesheet" href="style.css" precedence="default" disabled=""></div>'
-        )
-      })
-
-      it('should be ordered by precedence attribute', () => {
-        const App = () => {
-          return (
-            <div>
-              <link rel='stylesheet' href='style-a.css' precedence='default' />
-              <link rel='stylesheet' href='style-b.css' precedence='high' />
-              <link rel='stylesheet' href='style-c.css' precedence='default' />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<link href="style-a.css" rel="stylesheet" data-precedence="default"><link href="style-c.css" rel="stylesheet" data-precedence="default"><link href="style-b.css" rel="stylesheet" data-precedence="high">'
-        )
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should be de-duplicated by href attribute', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <link rel='stylesheet' href='style-a.css' precedence='default' />
-              <link rel='stylesheet' href='style-b.css' precedence='high' />
-              {count === 1 && (
-                <>
-                  <link rel='stylesheet' href='style-a.css' precedence='default' />
-                  <link rel='stylesheet' href='style-c.css' precedence='other' />
-                </>
-              )}
-              <button onClick={() => setCount(count + 1)}>+</button>
-              {count}
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<link href="style-a.css" rel="stylesheet" data-precedence="default"><link href="style-b.css" rel="stylesheet" data-precedence="high">'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<link href="style-a.css" rel="stylesheet" data-precedence="default"><link href="style-b.css" rel="stylesheet" data-precedence="high"><link href="style-c.css" rel="stylesheet" data-precedence="other">'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
-      })
-
-      it('should be preserved when unmounted', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              {count === 1 && <link rel='stylesheet' href='style.css' precedence='default' />}
-              <div>{count}</div>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<link href="style.css" rel="stylesheet" data-precedence="default">'
-        )
-        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<link href="style.css" rel="stylesheet" data-precedence="default">'
-        )
-        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
-      })
-
-      it('should be blocked by blocking attribute', async () => {
-        const Component = () => {
-          return (
-            <Suspense fallback={<div>Loading...</div>}>
-              <div>
-                <link
-                  rel='stylesheet'
-                  href='http://localhost/style.css'
-                  precedence='default'
-                  blocking='render'
-                />
-                Content
-              </div>
-            </Suspense>
-          )
-        }
-        const App = () => {
-          const [show, setShow] = useState(false)
-          return (
-            <div>
-              {show && <Component />}
-              <button onClick={() => setShow(true)}>Show</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(root.innerHTML).toBe('<div><div>Loading...</div><button>Show</button></div>')
-        await new Promise((resolve) => setTimeout(resolve))
-        await Promise.resolve()
-        expect(root.innerHTML).toBe('<div><div>Content</div><button>Show</button></div>')
-      })
-
-      describe('React 19 compatibility', () => {
-        type LinkSignatureInput = {
-          rel: string
-          href: string
-          hrefLang?: string
-          type?: string
-          title?: string
-          media?: string
-          as?: string
-          crossOrigin?: string
-          sizes?: string
-          dataPrecedence?: string
-        }
-
-        const sig = (v: LinkSignatureInput) =>
-          [
-            v.rel,
-            v.href,
-            v.hrefLang ?? '',
-            v.type ?? '',
-            v.title ?? '',
-            v.media ?? '',
-            v.as ?? '',
-            v.crossOrigin ?? '',
-            v.sizes ?? '',
-            v.dataPrecedence ?? '',
-          ].join('|')
-
-        const headLinkSignatures = () =>
-          Array.from(document.head.querySelectorAll('link')).map((el) =>
-            sig({
-              rel: el.getAttribute('rel') ?? '',
-              href: el.getAttribute('href') ?? '',
-              hrefLang: el.getAttribute('hreflang') ?? '',
-              type: el.getAttribute('type') ?? '',
-              title: el.getAttribute('title') ?? '',
-              media: el.getAttribute('media') ?? '',
-              as: el.getAttribute('as') ?? '',
-              crossOrigin: el.getAttribute('crossorigin') ?? '',
-              sizes: el.getAttribute('sizes') ?? '',
-              dataPrecedence: el.getAttribute('data-precedence') ?? '',
-            })
-          )
-
-        const assertHeadLinks = (
-          node: unknown,
-          expected: string[],
-          expectedRootInnerHTML?: string
-        ) => {
-          render(node as never, root)
-          expect(headLinkSignatures()).toEqual(expected)
-          if (expectedRootInnerHTML !== undefined) {
-            expect(root.innerHTML).toBe(expectedRootInnerHTML)
-          }
-        }
-
-        it('should keep canonical and alternates in source order', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='canonical' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='ja' href='https://example.com/ja/about' />
-            </div>,
-            [
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-              sig({ rel: 'alternate', href: 'https://example.com/ja/about', hrefLang: 'ja' }),
-            ]
-          )
-        })
-
-        it('should keep alternate-canonical-alternate order', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-              <link rel='canonical' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='ja' href='https://example.com/ja/about' />
-            </div>,
-            [
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'alternate', href: 'https://example.com/ja/about', hrefLang: 'ja' }),
-            ]
-          )
-        })
-
-        it('should not de-duplicate canonical links', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='canonical' href='https://example.com/en/about' />
-              <link rel='canonical' href='https://example.com/en/about' />
-            </div>,
-            [
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-            ]
-          )
-        })
-
-        it('should not de-duplicate alternate links', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-            </div>,
-            [
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-            ]
-          )
-        })
-
-        it('should de-duplicate stylesheet with precedence', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='stylesheet' href='/style.css' precedence='default' />
-              <link rel='stylesheet' href='/style.css' precedence='default' />
-            </div>,
-            [sig({ rel: 'stylesheet', href: '/style.css', dataPrecedence: 'default' })]
-          )
-        })
-
-        it('should not de-duplicate stylesheet against preload with same href', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='preload' href='/style.css' as='style' />
-              <link rel='stylesheet' href='/style.css' precedence='default' />
-              <link rel='stylesheet' href='/style.css' precedence='default' />
-            </div>,
-            [
-              sig({ rel: 'stylesheet', href: '/style.css', dataPrecedence: 'default' }),
-              sig({ rel: 'preload', href: '/style.css', as: 'style' }),
-            ]
-          )
-        })
-
-        it('should keep stylesheet links without precedence in root', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='stylesheet' href='/style.css' />
-              <link rel='stylesheet' href='/style.css' />
-            </div>,
-            [],
-            '<div><link rel="stylesheet" href="/style.css"><link rel="stylesheet" href="/style.css"></div>'
-          )
-        })
-
-        it('should keep different stylesheets with same precedence', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='stylesheet' href='/a.css' precedence='default' />
-              <link rel='stylesheet' href='/b.css' precedence='default' />
-            </div>,
-            [
-              sig({ rel: 'stylesheet', href: '/a.css', dataPrecedence: 'default' }),
-              sig({ rel: 'stylesheet', href: '/b.css', dataPrecedence: 'default' }),
-            ]
-          )
-        })
-
-        it('should not de-duplicate preload links', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='preload' href='/font.woff2' as='font' crossOrigin='' />
-              <link rel='preload' href='/font.woff2' as='font' crossOrigin='' />
-            </div>,
-            [
-              sig({ rel: 'preload', href: '/font.woff2', as: 'font', crossOrigin: '' }),
-              sig({ rel: 'preload', href: '/font.woff2', as: 'font', crossOrigin: '' }),
-            ]
-          )
-        })
-
-        it('should not de-duplicate modulepreload links', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='modulepreload' href='/module.js' />
-              <link rel='modulepreload' href='/module.js' />
-            </div>,
-            [
-              sig({ rel: 'modulepreload', href: '/module.js' }),
-              sig({ rel: 'modulepreload', href: '/module.js' }),
-            ]
-          )
-        })
-
-        it('should keep links from two components', () => {
-          const Head = () => (
-            <>
-              <link rel='canonical' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='ja' href='https://example.com/ja/about' />
-            </>
-          )
-          const Body = () => (
-            <>
-              <link rel='canonical' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='ja' href='https://example.com/ja/about' />
-            </>
-          )
-          assertHeadLinks(
-            <div>
-              <Head />
-              <Body />
-            </div>,
-            [
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-              sig({ rel: 'alternate', href: 'https://example.com/ja/about', hrefLang: 'ja' }),
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-              sig({ rel: 'alternate', href: 'https://example.com/ja/about', hrefLang: 'ja' }),
-            ]
-          )
-        })
-
-        it('should hoist from deep nested component and keep duplicates', () => {
-          const Nested = () => (
-            <div>
-              <div>
-                <link rel='canonical' href='https://example.com/en/about' />
-              </div>
-            </div>
-          )
-          assertHeadLinks(
-            <div>
-              <link rel='canonical' href='https://example.com/en/about' />
-              <Nested />
-            </div>,
-            [
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-            ]
-          )
-        })
-
-        it('should keep mixed links and de-duplicate only stylesheet', () => {
-          assertHeadLinks(
-            <div>
-              <link rel='canonical' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-              <link rel='stylesheet' href='/style.css' precedence='default' />
-              <link rel='preload' href='/font.woff2' as='font' crossOrigin='' />
-              <link rel='canonical' href='https://example.com/en/about' />
-              <link rel='alternate' hrefLang='en' href='https://example.com/en/about' />
-              <link rel='stylesheet' href='/style.css' precedence='default' />
-              <link rel='preload' href='/font.woff2' as='font' crossOrigin='' />
-            </div>,
-            [
-              sig({ rel: 'stylesheet', href: '/style.css', dataPrecedence: 'default' }),
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-              sig({ rel: 'preload', href: '/font.woff2', as: 'font', crossOrigin: '' }),
-              sig({ rel: 'canonical', href: 'https://example.com/en/about' }),
-              sig({ rel: 'alternate', href: 'https://example.com/en/about', hrefLang: 'en' }),
-              sig({ rel: 'preload', href: '/font.woff2', as: 'font', crossOrigin: '' }),
-            ]
-          )
-        })
-      })
-    })
-
-    describe('style element', () => {
-      it('should be inserted into head', () => {
-        const App = () => {
-          return (
-            <div>
-              <style href='red' precedence='default'>
-                {'body { color: red; }'}
-              </style>
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="red" data-precedence="default">body { color: red; }</style>'
-        )
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should be updated', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <style href='color' precedence='default'>{`body { color: ${
-                count % 2 ? 'red' : 'blue'
-              }; }`}</style>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="color" data-precedence="default">body { color: blue; }</style>'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="color" data-precedence="default">body { color: red; }</style>'
-        )
-      })
-
-      it('should be preserved when unmounted', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              {count === 1 && (
-                <style href='red' precedence='default'>
-                  {'body { color: red; }'}
-                </style>
-              )}
-              <div>{count}</div>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="red" data-precedence="default">body { color: red; }</style>'
-        )
-        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="red" data-precedence="default">body { color: red; }</style>'
-        )
-        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
-      })
-
-      it('should be de-duplicated by href attribute', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <style href='red' precedence='default'>
-                {'body { color: red; }'}
-              </style>
-              <style href='blue' precedence='default'>
-                {'body { color: blue; }'}
-              </style>
-              <style href='green' precedence='default'>
-                {'body { color: green; }'}
-              </style>
-              {count === 1 && (
-                <>
-                  <style href='blue' precedence='default'>
-                    {'body { color: blue; }'}
-                  </style>
-                  <style href='yellow' precedence='default'>
-                    {'body { color: yellow; }'}
-                  </style>
-                </>
-              )}
-              <button onClick={() => setCount(count + 1)}>+</button>
-              {count}
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="red" data-precedence="default">body { color: red; }</style><style data-href="blue" data-precedence="default">body { color: blue; }</style><style data-href="green" data-precedence="default">body { color: green; }</style>'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="red" data-precedence="default">body { color: red; }</style><style data-href="blue" data-precedence="default">body { color: blue; }</style><style data-href="green" data-precedence="default">body { color: green; }</style><style data-href="yellow" data-precedence="default">body { color: yellow; }</style>'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
-      })
-
-      it('should be ordered by precedence attribute', () => {
-        const App = () => {
-          return (
-            <div>
-              <style href='red' precedence='default'>
-                {'body { color: red; }'}
-              </style>
-              <style href='green' precedence='high'>
-                {'body { color: green; }'}
-              </style>
-              <style href='blue' precedence='default'>
-                {'body { color: blue; }'}
-              </style>
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<style data-href="red" data-precedence="default">body { color: red; }</style><style data-href="blue" data-precedence="default">body { color: blue; }</style><style data-href="green" data-precedence="high">body { color: green; }</style>'
-        )
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should not do special behavior if href is present', () => {
-        const template = (
-          <html>
-            <head></head>
-            <body>
-              <style>{'body { color: red; }'}</style>
-              <h1>World</h1>
-            </body>
-          </html>
-        )
-        render(template, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe(
-          '<html><head></head><body><style>body { color: red; }</style><h1>World</h1></body></html>'
-        )
-      })
-    })
-
-    describe('meta element', () => {
-      it('should be inserted into head', () => {
-        const App = () => {
-          return (
-            <div>
-              <meta name='description' content='description' />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<meta name="description" content="description">')
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should be updated', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <meta name='description' content={`description ${count}`} />
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<meta name="description" content="description 0">')
-        expect(root.innerHTML).toBe('<div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<meta name="description" content="description 1">')
-      })
-
-      it('should not do special behavior if itemProp is present', () => {
-        const App = () => {
-          return (
-            <div>
-              <meta name='description' content='description' itemProp='test' />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe(
-          '<div><meta name="description" content="description" itemprop="test">Content</div>'
-        )
-      })
-
-      it('should ignore precedence attribute', () => {
-        const App = () => {
-          return (
-            <div>
-              <meta name='description-a' content='description-a' precedence='default' />
-              <meta name='description-b' content='description-b' precedence='high' />
-              <meta name='description-c' content='description-c' precedence='default' />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<meta name="description-a" content="description-a"><meta name="description-b" content="description-b"><meta name="description-c" content="description-c">'
-        )
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should be de-duplicated by name attribute', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <meta name='description-a' content='description-a' />
-              <meta name='description-b' content='description-b' />
-              {count === 1 && (
-                <>
-                  <meta name='description-a' content='description-a' />
-                  <meta name='description-c' content='description-c' />
-                </>
-              )}
-              <button onClick={() => setCount(count + 1)}>+</button>
-              {count}
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<meta name="description-a" content="description-a"><meta name="description-b" content="description-b">'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<meta name="description-a" content="description-a"><meta name="description-b" content="description-b"><meta name="description-c" content="description-c">'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
-      })
-    })
-
-    describe('script element', () => {
-      it('should be inserted into head', async () => {
-        const App = () => {
-          return (
-            <div>
-              <script src='script.js' async={true} />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<script src="script.js" async=""></script>')
-        expect(root.innerHTML).toBe('<div>Content</div>')
-      })
-
-      it('should be updated', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <script src={`script${count}.js`} async={true} />
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<script src="script0.js" async=""></script>')
-        expect(root.innerHTML).toBe('<div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<script src="script1.js" async=""></script>')
-      })
-
-      it('should be de-duplicated by src attribute with async=true', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              <script src='script-a.js' async={true} />
-              <script src='script-b.js' async={true} />
-              {count === 1 && (
-                <>
-                  <script src='script-a.js' async={true} />
-                  <script src='script-c.js' async={true} />
-                </>
-              )}
-              <button onClick={() => setCount(count + 1)}>+</button>
-              {count}
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<script src="script-a.js" async=""></script><script src="script-b.js" async=""></script>'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe(
-          '<script src="script-a.js" async=""></script><script src="script-b.js" async=""></script><script src="script-c.js" async=""></script>'
-        )
-        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
-      })
-
-      it('should be preserved when unmounted', async () => {
-        const App = () => {
-          const [count, setCount] = useState(0)
-          return (
-            <div>
-              {count === 1 && <script src='script.js' async={true} />}
-              <div>{count}</div>
-              <button onClick={() => setCount(count + 1)}>+</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<script src="script.js" async=""></script>')
-        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(document.head.innerHTML).toBe('<script src="script.js" async=""></script>')
-        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
-      })
-
-      it('should be fired onLoad event', async () => {
-        const onLoad = vi.fn()
-        const onError = vi.fn()
-        const App = () => {
-          return (
-            <div>
-              <script
-                src='http://localhost/script.js'
-                async={true}
-                onLoad={onLoad}
-                onError={onError}
-              />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<script src="http://localhost/script.js" async=""></script>'
-        )
-        await Promise.resolve()
-        await new Promise((resolve) => setTimeout(resolve))
-        expect(onLoad).toBeCalledTimes(1)
-        expect(onError).not.toBeCalled()
-      })
-
-      it('should be fired onError event', async () => {
-        const onLoad = vi.fn()
-        const onError = vi.fn()
-        const App = () => {
-          return (
-            <div>
-              <script
-                src='http://localhost/invalid.js'
-                async={true}
-                onLoad={onLoad}
-                onError={onError}
-              />
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe(
-          '<script src="http://localhost/invalid.js" async=""></script>'
-        )
-        await Promise.resolve()
-        await new Promise((resolve) => setTimeout(resolve))
-        await Promise.resolve()
-        await new Promise((resolve) => setTimeout(resolve))
-        await Promise.resolve()
-        await new Promise((resolve) => setTimeout(resolve))
-        await Promise.resolve()
-        await new Promise((resolve) => setTimeout(resolve))
-        expect(onLoad).not.toBeCalled()
-        expect(onError).toBeCalledTimes(1)
-      })
-
-      it('should not register load handlers when the tag has no de-duplication key', () => {
-        const addEventListener = vi.fn<HTMLElement['addEventListener']>()
-        const onLoad = vi.fn()
-        const onError = vi.fn()
-
-        const App = () => {
-          return (
-            <div>
-              <title
-                ref={(e: HTMLTitleElement) => {
-                  if (!e) {
-                    return
-                  }
-                  const originalAddEventListener = e.addEventListener.bind(e)
-                  addEventListener.mockImplementation((...args) =>
-                    originalAddEventListener(...args)
-                  )
-                  e.addEventListener = addEventListener
-                }}
-                onLoad={onLoad}
-                onError={onError}
-              >
-                Document Title
-              </title>
-              Content
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('<title>Document Title</title>')
-        expect(root.innerHTML).toBe('<div>Content</div>')
-        expect(addEventListener).not.toBeCalled()
-        expect(onLoad).not.toBeCalled()
-        expect(onError).not.toBeCalled()
-      })
-
-      it('should be blocked by blocking attribute', async () => {
-        const Component = () => {
-          return (
-            <Suspense fallback={<div>Loading...</div>}>
-              <div>
-                <script src='http://localhost/script.js' async={true} blocking='render' />
-                Content
-              </div>
-            </Suspense>
-          )
-        }
-        const App = () => {
-          const [show, setShow] = useState(false)
-          return (
-            <div>
-              {show && <Component />}
-              <button onClick={() => setShow(true)}>Show</button>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
-        root.querySelector('button')?.click()
-        await Promise.resolve()
-        expect(root.innerHTML).toBe('<div><div>Loading...</div><button>Show</button></div>')
-        await new Promise((resolve) => setTimeout(resolve))
-        await Promise.resolve()
-        expect(root.innerHTML).toBe('<div><div>Content</div><button>Show</button></div>')
-      })
-
-      it('should be inserted into body if has no props', async () => {
-        const App = () => {
-          return (
-            <div>
-              <script>alert('Hello')</script>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        // prettier-ignore
-        expect(root.innerHTML).toBe('<div><script>alert(\'Hello\')</script></div>')
-      })
-
-      it('should be inserted into body if has only src prop', async () => {
-        const App = () => {
-          return (
-            <div>
-              <script src='script.js'></script>
-            </div>
-          )
-        }
-        render(<App />, root)
-        expect(document.head.innerHTML).toBe('')
-        expect(root.innerHTML).toBe('<div><script src="script.js"></script></div>')
-      })
-    })
-
-    it('accept ref object', async () => {
-      const ref = { current: null }
-      const App = () => {
-        return (
-          <div>
-            <script src='script-a.js' ref={ref} async={true} />
-          </div>
-        )
-      }
-      render(<App />, root)
-      expect(ref.current).toBe(document.head.querySelector('script'))
-    })
-
-    it('accept ref function', async () => {
-      const ref = vi.fn()
-      const App = () => {
-        return (
-          <div>
-            <script src='script-a.js' ref={ref} async={true} />
-          </div>
-        )
-      }
-      render(<App />, root)
-      expect(ref).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('form element', () => {
-    it('should accept Function as action', () => {
-      const action = vi.fn()
-      const App = () => {
-        return (
-          <form action={action} method='post'>
-            <input type='text' name='name' value='Hello' />
-            <button type='submit'>Submit</button>
-          </form>
-        )
-      }
-      render(<App />, root)
-      root.querySelector('button')?.click()
-      expect(action).toBeCalledTimes(1)
-      const formData = action.mock.calls[0][0]
-      expect(formData.get('name')).toBe('Hello')
-    })
-
-    it('should accept string as action', () => {
-      const App = () => {
-        return (
-          <form action={'/entries'} method='post'>
-            <button type='submit'>Submit</button>
-          </form>
-        )
-      }
-      render(<App />, root)
-      expect(root.innerHTML).toBe(
-        '<form method="post" action="/entries"><button type="submit">Submit</button></form>'
-      )
-    })
-
-    it('toggle show / hide form', async () => {
-      const action = vi.fn()
-      const App = () => {
-        const [show, setShow] = useState(false)
-        return (
-          <div>
-            {show && (
-              <form action={action} method='post'>
-                <input type='text' name='name' value='Hello' />
-              </form>
-            )}
-            <button onClick={() => setShow((status) => !status)}>Toggle</button>
-          </div>
-        )
-      }
-      render(<App />, root)
-      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
-      root.querySelector('button')?.click()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe(
-        '<div><form method="post"><input type="text" name="name" value="Hello"></form><button>Toggle</button></div>'
-      )
-      root.querySelector('button')?.click()
-      await Promise.resolve()
-      await Promise.resolve()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
-    })
-  })
-
-  describe('input element', () => {
-    it('should accept Function as formAction', () => {
-      const action = vi.fn()
-      const App = () => {
-        return (
-          <form>
-            <input type='text' name='name' value='Hello' />
-            <input type='submit' value='Submit' formAction={action} />
-          </form>
-        )
-      }
-      render(<App />, root)
-      root.querySelector<HTMLInputElement>('input[type="submit"]')?.click()
-      expect(action).toBeCalledTimes(1)
-      const formData = action.mock.calls[0][0]
-      expect(formData.get('name')).toBe('Hello')
-    })
-
-    it('should accept string as formAction', () => {
-      const App = () => {
-        return (
-          <form method='post'>
-            <input type='submit' formAction={'/entries'} value='Submit' />
-          </form>
-        )
-      }
-      render(<App />, root)
-      expect(root.innerHTML).toBe('<form method="post"><input type="submit" value="Submit"></form>')
-    })
-
-    it('toggle show / hide input', async () => {
-      const action = vi.fn()
-      const App = () => {
-        const [show, setShow] = useState(false)
-        return (
-          <div>
-            {show && (
-              <form method='post'>
-                <input type='submit' formAction={action} value='Submit' />
-              </form>
-            )}
-            <button onClick={() => setShow((status) => !status)}>Toggle</button>
-          </div>
-        )
-      }
-      render(<App />, root)
-      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
-      root.querySelector('button')?.click()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe(
-        '<div><form method="post"><input type="submit" value="Submit"></form><button>Toggle</button></div>'
-      )
-      root.querySelector('button')?.click()
-      await Promise.resolve()
-      await Promise.resolve()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
-    })
-  })
-
-  describe('button element', () => {
-    it('should accept Function as formAction', () => {
-      const action = vi.fn()
-      const App = () => {
-        return (
-          <form>
-            <input type='text' name='name' value='Hello' />
-            <button type='submit' formAction={action}>
-              Submit
-            </button>
-          </form>
-        )
-      }
-      render(<App />, root)
-      root.querySelector('button')?.click()
-      expect(action).toBeCalledTimes(1)
-      const formData = action.mock.calls[0][0]
-      expect(formData.get('name')).toBe('Hello')
-    })
-
-    it('should accept string as formAction', () => {
-      const App = () => {
-        return (
-          <form method='post'>
-            <button type='submit' formAction={'/entries'}>
-              Submit
-            </button>
-          </form>
-        )
-      }
-      render(<App />, root)
-      expect(root.innerHTML).toBe(
-        '<form method="post"><button type="submit">Submit</button></form>'
-      )
-    })
-
-    it('toggle show / hide', async () => {
-      const action = vi.fn()
-      const App = () => {
-        const [show, setShow] = useState(false)
-        return (
-          <div>
-            {show && (
-              <form method='post'>
-                <button formAction={action}>Submit</button>
-              </form>
-            )}
-            <button id='toggle' onClick={() => setShow((status) => !status)}>
-              Toggle
-            </button>
-          </div>
-        )
-      }
-      render(<App />, root)
-      expect(root.innerHTML).toBe('<div><button id="toggle">Toggle</button></div>')
-      root.querySelector<HTMLButtonElement>('#toggle')?.click()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe(
-        '<div><form method="post"><button>Submit</button></form><button id="toggle">Toggle</button></div>'
-      )
-      root.querySelector<HTMLButtonElement>('#toggle')?.click()
-      await Promise.resolve()
-      await Promise.resolve()
-      await Promise.resolve()
-      expect(root.innerHTML).toBe('<div><button id="toggle">Toggle</button></div>')
-    })
-  })
-})
-
-describe('internal utility method', () => {
-  describe('composeRef()', () => {
-    it('should compose a ref object', () => {
-      const ref = { current: null }
-      const cbCleanUp = vi.fn()
-      const cb = vi.fn().mockReturnValue(cbCleanUp)
-      const composed = composeRef(ref, cb)
-      const cleanup = composed('ref')
-      expect(ref.current).toBe('ref')
-      expect(cb).toBeCalledWith('ref')
-      expect(cbCleanUp).not.toBeCalled()
-      cleanup()
-      expect(ref.current).toBe(null)
-      expect(cbCleanUp).toBeCalledTimes(1)
-    })
-
-    it('should compose a function', () => {
-      const ref = vi.fn()
-      const cbCleanUp = vi.fn()
-      const cb = vi.fn().mockReturnValue(cbCleanUp)
-      const composed = composeRef(ref, cb)
-      const cleanup = composed('ref')
-      expect(ref).toBeCalledWith('ref')
-      expect(cb).toBeCalledWith('ref')
-      expect(cbCleanUp).not.toBeCalled()
-      cleanup()
-      expect(ref).toBeCalledWith(null)
-      expect(cbCleanUp).toBeCalledTimes(1)
-    })
-
-    it('should compose a function returns a cleanup function', () => {
-      const refCleanUp = vi.fn()
-      const ref = vi.fn().mockReturnValue(refCleanUp)
-      const cbCleanUp = vi.fn()
-      const cb = vi.fn().mockReturnValue(cbCleanUp)
-      const composed = composeRef(ref, cb)
-      const cleanup = composed('ref')
-      expect(ref).toBeCalledWith('ref')
-      expect(cb).toBeCalledWith('ref')
-      expect(refCleanUp).not.toBeCalled()
-      expect(cbCleanUp).not.toBeCalled()
-      cleanup()
-      expect(ref).toHaveBeenCalledTimes(1)
-      expect(refCleanUp).toBeCalledTimes(1)
-      expect(cbCleanUp).toBeCalledTimes(1)
-    })
-  })
-})