acrylblends 0.6.3 → 0.7.0

package/plugins/acryl-router/src/core/jsx/context-isolation.test.ts

@@ -1,655 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-const importIndex = () => import('./index')
-const importStreaming = () => import('./streaming')
-const importHooks = () => import('./hooks')
-const importAsyncHooks = () => import('node:async_hooks')
-
-/**
- * These tests exercise the non-`AsyncLocalStorage` fallback path. They force
- * every `AsyncLocalStorage` acquisition route to fail (and keep it disabled
- * while the module lazily probes for it), then verify the React-style
- * fail-safe: reading context after `await` returns the default value and never
- * another concurrent request's value.
- */
-describe('JSX context isolation without AsyncLocalStorage', () => {
-  let originalGetBuiltinModule: unknown
-  let originalMainModule: unknown
-  let warnSpy: ReturnType<typeof vi.spyOn>
-
-  beforeEach(() => {
-    // Disable every route `loadAsyncLocalStorage()` tries. These stay in effect
-    // through the first render so the lazy probe caches "unavailable".
-    vi.resetModules()
-    originalGetBuiltinModule = (process as { getBuiltinModule?: unknown }).getBuiltinModule
-    ;(process as { getBuiltinModule?: unknown }).getBuiltinModule = undefined
-    originalMainModule = (process as { mainModule?: unknown }).mainModule
-    ;(process as { mainModule?: unknown }).mainModule = undefined
-    warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-  })
-
-  afterEach(() => {
-    ;(process as { getBuiltinModule?: unknown }).getBuiltinModule = originalGetBuiltinModule
-    ;(process as { mainModule?: unknown }).mainModule = originalMainModule
-    vi.unstubAllGlobals()
-    vi.resetModules()
-    warnSpy.mockRestore()
-  })
-
-  it('falls back to the default value after await and never leaks across concurrent renders', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-
-    const SessionContext = createContext<{ username: string; role: string }>({
-      username: 'nobody',
-      role: 'none',
-    })
-
-    const waits = new Map<string, Promise<void>>()
-    const entered = new Map<string, () => void>()
-
-    const AdminDashboard = async () => {
-      const initialSession = useContext(SessionContext)
-      entered.get(initialSession.username)?.()
-      await waits.get(initialSession.username)
-      const session = useContext(SessionContext)
-      if (session.role !== 'admin') {
-        return jsx('div', {}, `Access Denied for ${session.username}`)
-      }
-      return jsx('div', {}, `Welcome Admin ${session.username}. Secret Data: 42`)
-    }
-
-    const render = async (username: string, role: string): Promise<string> =>
-      `${await jsx(
-        SessionContext.Provider,
-        { value: { username, role } },
-        jsx(AdminDashboard, {})
-      ).toString()}`
-
-    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 = render('admin', 'admin')
-    const attackerReq = render('attacker', 'guest')
-
-    await Promise.all([adminEntered, attackerEntered])
-    resolveAttacker()
-    await Promise.resolve()
-    resolveAdmin()
-
-    const [adminHtml, attackerHtml] = await Promise.all([adminReq, attackerReq])
-
-    // Without AsyncLocalStorage the post-await read sees the default value —
-    // the same fail-safe React's request storage degrades to. The critical
-    // guarantee is that neither render observes the other request's value.
-    expect(adminHtml).toBe('<div>Access Denied for nobody</div>')
-    expect(attackerHtml).toBe('<div>Access Denied for nobody</div>')
-  })
-
-  it('warns once when a post-await read falls back to the default value', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-
-    const ThemeContext = createContext('default')
-    const Reader = async () => {
-      await new Promise((r) => setTimeout(r, 10))
-      return jsx('div', {}, useContext(ThemeContext))
-    }
-    const render = async () =>
-      `${await jsx(ThemeContext.Provider, { value: 'provided' }, jsx(Reader, {})).toString()}`
-
-    expect(await render()).toBe('<div>default</div>')
-    expect(await render()).toBe('<div>default</div>')
-
-    // Degrading to the default value is reported once, not per read.
-    expect(warnSpy).toHaveBeenCalledTimes(1)
-    expect(warnSpy.mock.calls[0][0]).toContain('AsyncLocalStorage')
-  })
-
-  it('clears the fallback warning window after an async render rejects', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-
-    const ThemeContext = createContext('default')
-    const Broken = async () => {
-      await Promise.resolve()
-      throw new Error('boom')
-    }
-
-    await expect(jsx(Broken, {}).toString()).rejects.toThrow('boom')
-
-    useContext(ThemeContext)
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('finds AsyncLocalStorage via process.mainModule.require (Node < 20.16 CJS)', async () => {
-    // Re-enable only the legacy route: a CJS entrypoint exposes the main
-    // module's `require` even where `process.getBuiltinModule` doesn't exist.
-    // Context must then survive `await` with no warning.
-    const { AsyncLocalStorage } = await importAsyncHooks()
-    ;(process as { mainModule?: unknown }).mainModule = {
-      require: (specifier: string) =>
-        specifier === 'node:async_hooks' ? { AsyncLocalStorage } : {},
-    }
-
-    const { createContext, useContext, jsx } = await importIndex()
-
-    const ThemeContext = createContext('default')
-    const Reader = async () => {
-      await new Promise((r) => setTimeout(r, 10))
-      return jsx('div', {}, useContext(ThemeContext))
-    }
-
-    expect(
-      `${await jsx(ThemeContext.Provider, { value: 'provided' }, jsx(Reader, {})).toString()}`
-    ).toBe('<div>provided</div>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('keeps a synchronous render synchronous and does not warn', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-
-    const ThemeContext = createContext('light')
-    const Consumer = () => jsx('span', {}, useContext(ThemeContext))
-
-    const result = jsx(ThemeContext.Provider, { value: 'dark' }, jsx(Consumer, {})).toString()
-
-    // A purely synchronous render must not be forced async by the serializer.
-    expect(result).toBe('<span>dark</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  const drainStream = async (stream: unknown): Promise<string> => {
-    const textDecoder = new TextDecoder()
-    let html = ''
-    for await (const chunk of stream as AsyncIterable<Uint8Array>) {
-      html += textDecoder.decode(chunk)
-    }
-    return html
-  }
-
-  it('restores provider values for the subtree returned by a resumed async component', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-
-    const ThemeContext = createContext('default')
-    const Inner = () => jsx('span', {}, useContext(ThemeContext))
-    const Outer = async () => {
-      await new Promise((r) => setTimeout(r, 10))
-      // Unlike a useContext() call here in the async body (which degrades to
-      // the default), the returned subtree renders with the context values
-      // snapshotted at suspension and restored by the renderer.
-      return jsx(Inner, {})
-    }
-
-    expect(
-      `${await jsx(ThemeContext.Provider, { value: 'provided' }, jsx(Outer, {})).toString()}`
-    ).toBe('<span>provided</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes a Suspense-deferred subtree in the captured request store', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-    const { Suspense, renderToReadableStream } = await importStreaming()
-    const { use } = await importHooks()
-
-    // A `use()`-suspended child takes the deferred re-render path, which on the
-    // fallback path re-establishes the captured render store synchronously.
-    const deferred = new Promise<string>((resolve) => setTimeout(() => resolve('done'), 10))
-    const ThemeContext = createContext('default')
-    const Inner = () => jsx('span', {}, useContext(ThemeContext))
-    const Content = () => {
-      const value = use(deferred)
-      return jsx(ThemeContext.Provider, { value }, jsx(Inner, {}))
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(jsx(Suspense, { fallback: jsx('p', {}, 'Loading') }, jsx(Content, {})))
-    )
-
-    expect(html).toContain('Loading')
-    expect(html).toContain('<span>done</span>')
-    // Providers inside the resumed subtree render in the request store, not in
-    // the module-global fallback — so no degradation warning fires.
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes a Suspense-deferred subtree with outer provider values', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-    const { Suspense, renderToReadableStream } = await importStreaming()
-    const { use } = await importHooks()
-
-    const deferred = new Promise<string>((resolve) => setTimeout(() => resolve('done'), 10))
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      use(deferred)
-      return jsx('span', {}, useContext(ThemeContext))
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(Suspense, { fallback: jsx('p', {}, 'Loading') }, jsx(Content, {}))
-        )
-      )
-    )
-
-    expect(html).toContain('Loading')
-    expect(html).toContain('<span>outer</span>')
-    expect(html).not.toContain('<span>default</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('renders Suspense fallback with outer provider values', async () => {
-    const { createContext, useContext, jsx } = await importIndex()
-    const { Suspense, renderToReadableStream } = await importStreaming()
-    const { use } = await importHooks()
-
-    const deferred = new Promise<string>((resolve) => setTimeout(() => resolve('done'), 10))
-    const ThemeContext = createContext('default')
-    const Fallback = () => jsx('p', {}, `Loading ${useContext(ThemeContext)}`)
-    const Content = () => {
-      const value = use(deferred)
-      return jsx('span', {}, value)
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(Suspense, { fallback: jsx(Fallback, {}) }, jsx(Content, {}))
-        )
-      )
-    )
-
-    expect(html).toContain('<p>Loading outer</p>')
-    expect(html).toContain('<span>done</span>')
-    expect(html).not.toContain('default')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('restores nested provider values in a resumed Suspense subtree', async () => {
-    const { createContext, useContext, jsx, Fragment } = await importIndex()
-    const { Suspense, renderToReadableStream } = await importStreaming()
-    const { use } = await importHooks()
-
-    const deferred = new Promise<string>((resolve) => setTimeout(() => resolve('done'), 10))
-    const ThemeContext = createContext('default')
-    const Inner = () => jsx('span', {}, useContext(ThemeContext))
-    const OuterSibling = () => jsx('em', {}, useContext(ThemeContext))
-    const Content = () => {
-      use(deferred)
-      return jsx(
-        Fragment,
-        {},
-        jsx(ThemeContext.Provider, { value: 'inner' }, jsx(Inner, {})),
-        jsx(OuterSibling, {})
-      )
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(Suspense, { fallback: jsx('p', {}, 'Loading') }, jsx(Content, {}))
-        )
-      )
-    )
-
-    expect(html).toContain('<span>inner</span><em>outer</em>')
-    expect(html).not.toContain('default')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('keeps sibling Suspense resume contexts isolated when they resolve out of order', async () => {
-    const { createContext, useContext, jsx, Fragment } = await importIndex()
-    const { Suspense, renderToReadableStream } = await importStreaming()
-    const { use } = await importHooks()
-
-    const ThemeContext = createContext('default')
-    const waits = new Map<string, Promise<void>>()
-    const entered = new Map<string, () => void>()
-    let resolveFirst!: () => void
-    let resolveSecond!: () => void
-    waits.set(
-      'first',
-      new Promise<void>((resolve) => {
-        resolveFirst = resolve
-      })
-    )
-    waits.set(
-      'second',
-      new Promise<void>((resolve) => {
-        resolveSecond = resolve
-      })
-    )
-    const firstEntered = new Promise<void>((resolve) => {
-      entered.set('first', resolve)
-    })
-    const secondEntered = new Promise<void>((resolve) => {
-      entered.set('second', resolve)
-    })
-    const Content = ({ name }: { name: string }) => {
-      entered.get(name)?.()
-      use(waits.get(name)!)
-      return jsx('span', {}, `${name}:${useContext(ThemeContext)}`)
-    }
-
-    const htmlPromise = drainStream(
-      renderToReadableStream(
-        jsx(
-          Fragment,
-          {},
-          jsx(
-            ThemeContext.Provider,
-            { value: 'one' },
-            jsx(
-              Suspense,
-              { fallback: jsx('p', {}, 'Loading one') },
-              jsx(Content, { name: 'first' })
-            )
-          ),
-          jsx(
-            ThemeContext.Provider,
-            { value: 'two' },
-            jsx(
-              Suspense,
-              { fallback: jsx('p', {}, 'Loading two') },
-              jsx(Content, { name: 'second' })
-            )
-          )
-        )
-      )
-    )
-
-    await Promise.all([firstEntered, secondEntered])
-    resolveSecond()
-    await Promise.resolve()
-    resolveFirst()
-
-    const html = await htmlPromise
-
-    expect(html).toContain('<span>first:one</span>')
-    expect(html).toContain('<span>second:two</span>')
-    expect(html).not.toContain('default')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes ErrorBoundary-deferred children in the captured request store', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-    const { renderToReadableStream } = await importStreaming()
-
-    const deferred = new Promise<string>((resolve) => setTimeout(() => resolve('done'), 10))
-    let resolved: string | undefined
-    deferred.then((value) => {
-      resolved = value
-    })
-    const ThemeContext = createContext('default')
-    const Inner = () => jsx('span', {}, useContext(ThemeContext))
-    const Content = () => {
-      if (!resolved) {
-        // Suspend like use() does so ErrorBoundary defers the re-render.
-        throw deferred
-      }
-      return jsx(ThemeContext.Provider, { value: resolved }, jsx(Inner, {}))
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(ErrorBoundary, { fallback: jsx('p', {}, 'Failed') }, jsx(Content, {}))
-      )
-    )
-
-    expect(html).toContain('<span>done</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes ErrorBoundary-deferred children with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-    const { renderToReadableStream } = await importStreaming()
-
-    const deferred = new Promise<string>((resolve) => setTimeout(() => resolve('done'), 10))
-    let resolved: string | undefined
-    deferred.then((value) => {
-      resolved = value
-    })
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      if (!resolved) {
-        // Suspend like use() does so ErrorBoundary defers the re-render.
-        throw deferred
-      }
-      return jsx('span', {}, useContext(ThemeContext))
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(ErrorBoundary, { fallback: jsx('p', {}, 'Failed') }, jsx(Content, {}))
-        )
-      )
-    )
-
-    expect(html).toContain('<span>outer</span>')
-    expect(html).not.toContain('<span>default</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes ErrorBoundary fallback rendering with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-    const { renderToReadableStream } = await importStreaming()
-
-    const deferred = new Promise((_resolve, reject) =>
-      setTimeout(() => reject(new Error('boom')), 10)
-    )
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      throw deferred
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(
-            ErrorBoundary,
-            {
-              fallbackRender: (error: Error) =>
-                jsx('span', {}, `fallback:${useContext(ThemeContext)}:${error.message}`),
-            },
-            jsx(Content, {})
-          )
-        )
-      )
-    )
-
-    expect(html).toContain('<span>fallback:outer:boom</span>')
-    expect(html).not.toContain('fallback:default')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes ErrorBoundary fallbackRender components with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-    const { renderToReadableStream } = await importStreaming()
-
-    const deferred = new Promise((_resolve, reject) =>
-      setTimeout(() => reject(new Error('boom')), 10)
-    )
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      throw deferred
-    }
-    const Fallback = () => jsx('span', {}, `fallback:${useContext(ThemeContext)}`)
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(
-            ErrorBoundary,
-            {
-              fallbackRender: () => jsx(Fallback, {}),
-            },
-            jsx(Content, {})
-          )
-        )
-      )
-    )
-
-    expect(html).toContain('<span>fallback:outer</span>')
-    expect(html).not.toContain('fallback:default')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes ErrorBoundary fallback prop rendering with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-    const { renderToReadableStream } = await importStreaming()
-
-    const deferred = new Promise((_resolve, reject) =>
-      setTimeout(() => reject(new Error('boom')), 10)
-    )
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      throw deferred
-    }
-    const Fallback = () => jsx('span', {}, `fallback:${useContext(ThemeContext)}`)
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(ErrorBoundary, { fallback: jsx(Fallback, {}) }, jsx(Content, {}))
-        )
-      )
-    )
-
-    expect(html).toContain('<span>fallback:outer</span>')
-    expect(html).not.toContain('fallback:default')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes thenable ErrorBoundary fallback prop rendering with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-    const { renderToReadableStream } = await importStreaming()
-
-    const deferred = new Promise((_resolve, reject) =>
-      setTimeout(() => reject(new Error('boom')), 10)
-    )
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      throw deferred
-    }
-    const Fallback = () => jsx('span', {}, `fallback:${useContext(ThemeContext)}`)
-    const fallback = {
-      then(resolve: (value: unknown) => void) {
-        setTimeout(() => resolve(jsx(Fallback, {})), 0)
-      },
-    }
-
-    const html = await drainStream(
-      renderToReadableStream(
-        jsx(
-          ThemeContext.Provider,
-          { value: 'outer' },
-          jsx(ErrorBoundary, { fallback }, jsx(Content, {}))
-        )
-      )
-    )
-
-    expect(html).toContain('<span>fallback:outer</span>')
-    expect(html).not.toContain('fallback:default')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes synchronous ErrorBoundary fallback rendering with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      throw new Error('boom')
-    }
-
-    expect(
-      `${await jsx(
-        ThemeContext.Provider,
-        { value: 'outer' },
-        jsx(
-          ErrorBoundary,
-          {
-            fallbackRender: (error: Error) =>
-              jsx('span', {}, `fallback:${useContext(ThemeContext)}:${error.message}`),
-          },
-          jsx(Content, {})
-        )
-      ).toString()}`
-    ).toBe('<span>fallback:outer:boom</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes synchronous ErrorBoundary fallbackRender components with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      throw new Error('boom')
-    }
-    const Fallback = () => jsx('span', {}, `fallback:${useContext(ThemeContext)}`)
-
-    expect(
-      `${await jsx(
-        ThemeContext.Provider,
-        { value: 'outer' },
-        jsx(
-          ErrorBoundary,
-          {
-            fallbackRender: () => jsx(Fallback, {}),
-          },
-          jsx(Content, {})
-        )
-      ).toString()}`
-    ).toBe('<span>fallback:outer</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-
-  it('resumes synchronous ErrorBoundary fallback prop rendering with outer provider values', async () => {
-    const { createContext, useContext, jsx, ErrorBoundary } = await importIndex()
-
-    const ThemeContext = createContext('default')
-    const Content = () => {
-      throw new Error('boom')
-    }
-    const Fallback = () => jsx('span', {}, `fallback:${useContext(ThemeContext)}`)
-
-    expect(
-      `${await jsx(
-        ThemeContext.Provider,
-        { value: 'outer' },
-        jsx(ErrorBoundary, { fallback: jsx(Fallback, {}) }, jsx(Content, {}))
-      ).toString()}`
-    ).toBe('<span>fallback:outer</span>')
-    expect(warnSpy).not.toHaveBeenCalled()
-  })
-})