/** @jsxImportSource ../../src/jsx */ import { assertEquals } from '@std/assert' import { Style, css } from '../../src/helper/css/index.ts' import { Suspense, renderToReadableStream } from '../../src/jsx/streaming.ts' import type { HtmlEscapedString } from '../../src/utils/html.ts' import { HtmlEscapedCallbackPhase, resolveCallback } from '../../src/utils/html.ts' Deno.test('JSX', () => { const Component = ({ name }: { name: string }) => {name} const html = (

'}> '} />

) assertEquals(html.toString(), '

<Hono>

') }) Deno.test('JSX: Fragment', () => { const fragment = ( <>

) assertEquals(fragment.toString(), '

') }) Deno.test('JSX: Empty Fragment', () => { const Component = () => <> const html = assertEquals(html.toString(), '') }) Deno.test('JSX: Async Component', async () => { const Component = async ({ name }: { name: string }) => new Promise((resolve) => setTimeout(() => resolve({name}), 10)) const stream = renderToReadableStream(

'} />

) const chunks: string[] = [] const textDecoder = new TextDecoder() // eslint-disable-next-line @typescript-eslint/no-explicit-any for await (const chunk of stream as any) { chunks.push(textDecoder.decode(chunk)) } assertEquals(chunks.join(''), '

<Hono>

') }) Deno.test('JSX: Suspense', async () => { const Content = () => { const content = new Promise((resolve) => setTimeout(() => resolve(

Hello

), 10) ) return content } const stream = renderToReadableStream( Loading...

}> ) const chunks: string[] = [] const textDecoder = new TextDecoder() // eslint-disable-next-line @typescript-eslint/no-explicit-any for await (const chunk of stream as any) { chunks.push(textDecoder.decode(chunk)) } assertEquals(chunks, [ '

', ``, ]) }) Deno.test('JSX: css', async () => { const className = css` color: red; ` const html = (

' ) }) Deno.test('JSX: normalize key', async () => { const className =

const htmlFor =

const crossOrigin =

const httpEquiv =

const itemProp =

const fetchPriority =

const noModule =

const formAction =

assertEquals(className.toString(), '

') assertEquals(htmlFor.toString(), '

') assertEquals(crossOrigin.toString(), '

') assertEquals(httpEquiv.toString(), '

') assertEquals(itemProp.toString(), '

') assertEquals(fetchPriority.toString(), '

') assertEquals(noModule.toString(), '

') assertEquals(formAction.toString(), '

') }) Deno.test('JSX: null or undefined', async () => { const nullHtml =

const undefinedHtml =

// react-jsx :

// precompile :

// Extra whitespace is allowed because it is a specification. assertEquals(nullHtml.toString().replace(/\s+/g, ''), '

') assertEquals(undefinedHtml.toString().replace(/\s+/g, ''), '

') }) Deno.test('JSX: boolean attributes', async () => { const trueHtml =

const falseHtml =

// output is different, but semantics as HTML is the same, so both are OK // react-jsx :

// precompile :

assertEquals(trueHtml.toString().replace('=""', ''), '

') assertEquals(falseHtml.toString(), '

') }) Deno.test('JSX: number', async () => { const html =

assertEquals(html.toString(), '

') }) Deno.test('JSX: style', async () => { const html =

assertEquals(html.toString(), '

') })