jsx → html

deno.json

{
  "imports": {
    "./jsx-runtime": "./jsx-runtime.js"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "."
  }
}

jsx-runtime.js

const VOID = new Set([
  "area",
  "base",
  "br",
  "col",
  "embed",
  "hr",
  "img",
  "input",
  "link",
  "meta",
  "param",
  "source",
  "track",
  "wbr",
]);

const jsx = (node, props) =>
  (function* (node, { children, ...attrs } = {}) {
    if (node === jsx) return yield* children;
    if (typeof node === "function") yield* node(props);
    yield `<${node}`;
    for (const key in attrs) yield ` ${key}="${attrs[key]}"`;
    yield `>`;
    if (VOID.has(node)) return;
    Array.isArray(children) ? yield* children : yield children;
    yield `</${node}>`;
  })(node, props).reduce((a, b) => a + b);

export { jsx, jsx as jsxs, jsx as Fragment };