jsx-html

jsx-html render JSX template to HTML.

/// <reference path="https://raw.githubusercontent.com/apiel/jsx-html/latest/jsx.d.ts" />

import { React } from 'https://raw.githubusercontent.com/apiel/jsx-html/latest/mod.ts';

const View = () => <div>Hello</div>;
// render return a Promise
(<View />).render().then((html: string) => console.log(html));

deno run https://raw.githubusercontent.com/apiel/jsx-html/latest/examples/00.tsx

As you would do with React, you need to import React from jsx-html for the transpiler. If you are not feeling confortable with using React as import since it is not React, you can import jsx from jsx-html but you would have to update your tsconfig file: https://github.com/denoland/deno/issues/3572

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "jsx"
    }
}

/// <reference path="https://raw.githubusercontent.com/apiel/jsx-html/latest/jsx.d.ts" />

import { jsx } from 'https://raw.githubusercontent.com/apiel/jsx-html/latest/mod.ts';

const View = () => <div>Hello</div>;
(<View />).render().then(console.log);

Note: prefer using sermver tags version instead of latest to avoid conflict with caching, e.g: import { jsx } from 'https://raw.githubusercontent.com/apiel/jsx-html/1.0.0/mod.ts';.

Async component

Unlike React, components can be asynchrone, so you can fetch for data without to handle states.

import { React } from 'https://raw.githubusercontent.com/apiel/jsx-html/latest/mod.ts';

const Data = async () => {
    const res = await fetch('http://example.com/some/api');
    const content = new Uint8Array(await res.arrayBuffer());
    return <div>{content}</div>;
};

const View = () => (
    <div>
        <Data />
    </div>
);

(<View />).render().then(console.log);