jsx를 서버측 HTML 템플릿으로 사용

소스 코드: https://github.com/taowen/incremental-html/tree/main/packages/jsx-to-html

// filename: newsletter.tsx
import { jsxToHtml } from '@incremental-html/jsx-to-html'

// server is an express router
server.get('/newsletter', async (req, resp) => {
    const html: string = await jsxToHtml(<div>hello</div>);
    resp.status(200).set({ 'Content-Type': 'text/html' }).end(html);
})

tsconfig.json는 jsxToHtml을 사용하여 *.tsx를 번역하려면 다음과 같이 구성해야 합니다.

{
    "compilerOptions": {
//...
        "jsx": "react",
        "jsxFactory": "jsxToHtml.createElement",
        "jsxFragmentFactory": "jsxToHtml.Fragment",
//...
}

비동기 컨텍스트

jsxToHtml을 node.js의 대안으로 사용할 수 있습니다async_hooks.
런타임 트릭이 없으며 모든 환경(deno, cloudflare 작업자 등 포함)에서 작동합니다.

test('component with context', async () => {
    const C1 = async (props: {}, ctx: { msg: string }) => {
        await new Promise<void>(resolve => resolve());
        return <div>{ctx.msg}</div>
    }
    const result = <context msg="hello"><C1 /></context>
    expect(await jsxToHtml(result, { msg: 'original msg' })).toBe('<div>\nhello\n</div>');
})

컨텍스트는 자동으로 트리 아래로 전달됩니다.<context>는 중간에 컨텍스트를 변경하는 내장 구성 요소입니다.