acrylblends 0.6.2 → 0.6.3

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

@@ -0,0 +1,557 @@
+import { streamSSE } from './index.ts'
+/** @jsxImportSource ../../jsx */
+import { Context } from '../../context.ts'
+import { ErrorBoundary, Suspense } from '../../jsx/index.ts'
+
+describe('SSE Streaming helper', () => {
+  const req = new Request('http://localhost/')
+  let c: Context
+  beforeEach(() => {
+    c = new Context(req)
+  })
+
+  it('Check streamSSE Response', async () => {
+    let spy
+    const res = streamSSE(c, async (stream) => {
+      spy = vi.spyOn(stream, 'close').mockImplementation(async () => {})
+
+      let id = 0
+      const maxIterations = 5
+
+      while (id < maxIterations) {
+        const message = `Message\nIt is ${id}`
+        await stream.writeSSE({ data: message, event: 'time-update', id: String(id++) })
+        await stream.sleep(10)
+      }
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Transfer-Encoding')).toEqual('chunked')
+    expect(res.headers.get('Content-Type')).toEqual('text/event-stream')
+    expect(res.headers.get('Cache-Control')).toEqual('no-cache')
+    expect(res.headers.get('Connection')).toEqual('keep-alive')
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    for (let i = 0; i < 5; i++) {
+      const { value } = await reader.read()
+      const decodedValue = decoder.decode(value)
+
+      // Check the structure and content of the SSE message
+      let expectedValue = 'event: time-update\n'
+      expectedValue += 'data: Message\n'
+      expectedValue += `data: It is ${i}\n`
+      expectedValue += `id: ${i}\n\n`
+      expect(decodedValue).toBe(expectedValue)
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('Check streamSSE Response if aborted by client', async () => {
+    let aborted = false
+    const res = streamSSE(c, async (stream) => {
+      stream.onAbort(() => {
+        aborted = true
+      })
+      for (let i = 0; i < 3; i++) {
+        await stream.writeSSE({
+          data: `Message ${i}`,
+        })
+        await stream.sleep(1)
+      }
+    })
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const { value } = await reader.read()
+    expect(value).toEqual(new TextEncoder().encode('data: Message 0\n\n'))
+    reader.cancel()
+    expect(aborted).toBeTruthy()
+  })
+
+  it('Check streamSSE Response if aborted by abort signal', async () => {
+    // Emulate an old version of Bun (version 1.1.0) for this specific test case
+    // @ts-expect-error Bun is not typed
+    global.Bun = {
+      version: '1.1.0',
+    }
+    const ac = new AbortController()
+    const req = new Request('http://localhost/', { signal: ac.signal })
+    const c = new Context(req)
+
+    let aborted = false
+    const res = streamSSE(c, async (stream) => {
+      stream.onAbort(() => {
+        aborted = true
+      })
+      for (let i = 0; i < 3; i++) {
+        await stream.writeSSE({
+          data: `Message ${i}`,
+        })
+        await stream.sleep(1)
+      }
+    })
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const { value } = await reader.read()
+    expect(value).toEqual(new TextEncoder().encode('data: Message 0\n\n'))
+    ac.abort()
+    expect(aborted).toBeTruthy()
+  })
+
+  it('Should include retry in the SSE message', async () => {
+    const retryTime = 3000 // 3 seconds
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: 'This is a test message',
+        retry: retryTime,
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+
+    // Check if the retry parameter is included in the SSE message
+    const expectedRetryValue = `retry: ${retryTime}\n\n`
+    expect(decodedValue).toContain(expectedRetryValue)
+  })
+
+  it('Should accept retry: 0 and not skip it', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: 'This is a test message',
+        retry: 0,
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+
+    expect(decodedValue).toContain('retry: 0\n\n')
+  })
+
+  it('Should emit an empty id to reset Last-Event-ID', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: 'reset',
+        id: '',
+      })
+    })
+
+    expect(await res.text()).toBe('data: reset\nid: \n\n')
+  })
+
+  it('Check stream Response if error occurred', async () => {
+    const onError = vi.fn()
+    const res = streamSSE(
+      c,
+      async () => {
+        throw new Error('Test error')
+      },
+      onError
+    )
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toBe('event: error\ndata: Test error\n\n')
+    expect(onError).toBeCalledTimes(1)
+    expect(onError).toBeCalledWith(new Error('Test error'), expect.anything()) // 2nd argument is StreamingApi instance
+  })
+
+  it('Check streamSSE Response via Promise<string>', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({ data: Promise.resolve('Async Message') })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toBe('data: Async Message\n\n')
+  })
+
+  it('Check streamSSE Response via JSX.Element', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({ data: <div>Hello</div> })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toBe('data: <div>Hello</div>\n\n')
+  })
+
+  it('Check streamSSE Response via ErrorBoundary in success case', async () => {
+    const AsyncComponent = async () => Promise.resolve(<div>Async Hello</div>)
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: (
+          <ErrorBoundary fallback={<div>Error</div>}>
+            <AsyncComponent />
+          </ErrorBoundary>
+        ),
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toBe('data: <div>Async Hello</div>\n\n')
+  })
+
+  it('Check streamSSE Response via ErrorBoundary in error case', async () => {
+    const AsyncComponent = async () => Promise.reject()
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: (
+          <ErrorBoundary fallback={<div>Error</div>}>
+            <AsyncComponent />
+          </ErrorBoundary>
+        ),
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toBe('data: <div>Error</div>\n\n')
+  })
+
+  it('Check streamSSE Response via Suspense with a multi-line fallback', async () => {
+    const AsyncComponent = async () => Promise.resolve(<div>Async Hello</div>)
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: (
+          <Suspense fallback={<div>{'Loading...\nPlease wait'}</div>}>
+            <AsyncComponent />
+          </Suspense>
+        ),
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toBe('data: <div>Async Hello</div>\n\n')
+  })
+
+  it('Check streamSSE Response via ErrorBoundary with multi-line content', async () => {
+    const AsyncComponent = async () => Promise.resolve(<div>{'Async\nHello'}</div>)
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: (
+          <ErrorBoundary fallback={<div>Error</div>}>
+            <Suspense fallback={<div>Loading...</div>}>
+              <AsyncComponent />
+            </Suspense>
+          </ErrorBoundary>
+        ),
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toBe('data: <div>Async\ndata: Hello</div>\n\n')
+  })
+
+  it('Check streamSSE Response via sibling Suspense boundaries with multi-line fallbacks', async () => {
+    const One = async () => Promise.resolve(<div>One</div>)
+    const Two = async () => Promise.resolve(<div>Two</div>)
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: (
+          <div>
+            <Suspense fallback={<div>{'Loading1...\nwait'}</div>}>
+              <One />
+            </Suspense>
+            <Suspense fallback={<div>{'Loading2...\nwait'}</div>}>
+              <Two />
+            </Suspense>
+          </div>
+        ),
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    let decodedValue = ''
+    for (;;) {
+      const { done, value } = await reader.read()
+      if (done) {
+        break
+      }
+      decodedValue += decoder.decode(value)
+    }
+    expect(decodedValue).toBe('data: <div><div>One</div><div>Two</div></div>\n\n')
+  })
+
+  it('Check streamSSE Response via nested Suspense boundaries with multi-line fallback and content', async () => {
+    const Inner = async () => Promise.resolve(<div>{'Inner\nContent'}</div>)
+    const Outer = async () =>
+      Promise.resolve(
+        <Suspense fallback={<div>{'B\nb'}</div>}>
+          <Inner />
+        </Suspense>
+      )
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: (
+          <Suspense fallback={<div>{'A\na'}</div>}>
+            <Outer />
+          </Suspense>
+        ),
+      })
+    })
+
+    expect(res).not.toBeNull()
+    expect(res.status).toBe(200)
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    let decodedValue = ''
+    for (;;) {
+      const { done, value } = await reader.read()
+      if (done) {
+        break
+      }
+      decodedValue += decoder.decode(value)
+    }
+    expect(decodedValue).toBe('data: <div>Inner\ndata: Content</div>\n\n')
+  })
+
+  it('Check streamSSE handles \\r (CR) line ending correctly', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: 'Line1\rLine2',
+        event: 'test-cr',
+      })
+    })
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+
+    expect(decodedValue).toBe('event: test-cr\ndata: Line1\ndata: Line2\n\n')
+  })
+
+  it('Check streamSSE handles \\r\\n (CRLF) line ending correctly', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: 'Line1\r\nLine2',
+        event: 'test-crlf',
+      })
+    })
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+
+    expect(decodedValue).toBe('event: test-crlf\ndata: Line1\ndata: Line2\n\n')
+  })
+
+  it('Check streamSSE handles mixed line endings correctly', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: 'A\nB\rC\r\nD',
+        event: 'test-mixed',
+      })
+    })
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+
+    expect(decodedValue).toBe('event: test-mixed\ndata: A\ndata: B\ndata: C\ndata: D\n\n')
+  })
+
+  it('Should throw error if event contains \\n', async () => {
+    const onError = vi.fn()
+    const res = streamSSE(
+      c,
+      async (stream) => {
+        await stream.writeSSE({ data: 'test', event: 'test\nevent' })
+      },
+      onError
+    )
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toContain('event: error')
+    expect(onError).toBeCalledTimes(1)
+  })
+
+  it('Should throw error if event contains \\r', async () => {
+    const onError = vi.fn()
+    const res = streamSSE(
+      c,
+      async (stream) => {
+        await stream.writeSSE({ data: 'test', event: 'test\revent' })
+      },
+      onError
+    )
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toContain('event: error')
+    expect(onError).toBeCalledTimes(1)
+  })
+
+  it('Should throw error if id contains \\n', async () => {
+    const onError = vi.fn()
+    const res = streamSSE(
+      c,
+      async (stream) => {
+        await stream.writeSSE({ data: 'test', id: 'test\nid' })
+      },
+      onError
+    )
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toContain('event: error')
+    expect(onError).toBeCalledTimes(1)
+  })
+
+  it('Should throw error if id contains \\r', async () => {
+    const onError = vi.fn()
+    const res = streamSSE(
+      c,
+      async (stream) => {
+        await stream.writeSSE({ data: 'test', id: 'test\rid' })
+      },
+      onError
+    )
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+    expect(decodedValue).toContain('event: error')
+    expect(onError).toBeCalledTimes(1)
+  })
+
+  it('Check streamSSE handles consecutive \\r correctly', async () => {
+    const res = streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        data: 'Left\r\rRight',
+        event: 'test-double-cr',
+      })
+    })
+
+    if (!res.body) {
+      throw new Error('Body is null')
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    const { value } = await reader.read()
+    const decodedValue = decoder.decode(value)
+
+    // Two \r should produce an empty line in between
+    expect(decodedValue).toBe('event: test-double-cr\ndata: Left\ndata: \ndata: Right\n\n')
+  })
+})

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

@@ -0,0 +1,97 @@
+/** @jsxImportSource ./ */
+
+import type { HtmlEscapedString } from '../utils/html.ts'
+import type { Child, JSXNode } from './base.ts'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { cloneElement, jsx, Fragment } from './base.ts'
+
+describe('cloneElement', () => {
+  it('should clone an element with new props', () => {
+    const element = <div className='original'>Hello</div>
+    const clonedElement = cloneElement(element, { className: 'cloned' })
+    expect((clonedElement as unknown as JSXNode).props.className).toBe('cloned')
+    expect((clonedElement as unknown as JSXNode).props.children).toBe('Hello')
+  })
+
+  it('should clone a children element', () => {
+    const fnElement = ({ message }: { message: string }) => <div>{message}</div>
+    const element = fnElement({ message: 'Hello' })
+    const clonedElement = cloneElement(element, {})
+    expect(element.toString()).toBe('<div>Hello</div>')
+    expect(clonedElement.toString()).toBe('<div>Hello</div>')
+  })
+
+  it('should clone an element with new children', () => {
+    const fnElement = ({ message }: { message: string }) => <div>{message}</div>
+    const element = fnElement({ message: 'Hello' })
+    const clonedElement = cloneElement(element, {}, 'World')
+    expect(element.toString()).toBe('<div>Hello</div>')
+    expect(clonedElement.toString()).toBe('<div>World</div>')
+  })
+
+  it('should self-close a wrapped empty tag', () => {
+    const Hr = ({ ...props }) => <hr {...props} />
+    const element = <Hr />
+    expect(element.toString()).toBe('<hr/>')
+  })
+
+  it('should preserve self-closing empty tag when cloned', () => {
+    const element = <img src='foo.png' />
+    const clonedElement = cloneElement(element, { alt: 'bar' })
+    expect(element.toString()).toBe('<img src="foo.png"/>')
+    expect(clonedElement.toString()).toBe('<img src="foo.png" alt="bar"/>')
+  })
+
+  it('should clone an element with array children', () => {
+    const element = (
+      <div>
+        <span>1</span>
+        <span>2</span>
+      </div>
+    )
+    const clonedElement = cloneElement(element, { className: 'cloned' })
+    expect(clonedElement.toString()).toBe('<div class="cloned"><span>1</span><span>2</span></div>')
+  })
+})
+
+describe('createElement', () => {
+  it('should accept a component that returns a JSXNode', () => {
+    const Partial = ({ name }: { name: string }) => jsx('div', { 'x-partial': name }, name)
+
+    expect((<Partial name='foo' />).toString()).toBe('<div x-partial="foo">foo</div>')
+  })
+
+  it('should preserve the SVG element shape', () => {
+    const ref = { current: null }
+    const element = jsx('svg', { ref }) as unknown as JSXNode
+    expect(element.tag).toBe('svg')
+    expect(element.type).toBe('svg')
+    expect(element.ref).toBe(ref)
+  })
+
+  it('should accept a Child-typed value as a child', () => {
+    const child: Child = <span>inner</span>
+    const element = jsx('div', null, child) as unknown as JSXNode
+    expect(element.toString()).toBe('<div><span>inner</span></div>')
+  })
+
+  it('should escape a string returned by an asynchronous component', async () => {
+    const Async = async () => '<img src=x onerror=alert(1)>' as unknown as HtmlEscapedString
+
+    expect(
+      String(
+        await (
+          <div>
+            <Async />
+          </div>
+        ).toString()
+      )
+    ).toBe('<div>&lt;img src=x onerror=alert(1)&gt;</div>')
+  })
+
+  it('should omit an unsupported object child', () => {
+    const object = { toString: () => 'plain-text' }
+
+    expect((<div>{object as never}</div>).toString()).toBe('<div></div>')
+  })
+})