3 files changed, 133 insertions, 0 deletions
diff --git a/vhosts/blog/nuldoc-src/jsx/jsx-runtime.ts b/vhosts/blog/nuldoc-src/jsx/jsx-runtime.ts
new file mode 100644
index 00000000..9571e87d
--- /dev/null
+++ b/vhosts/blog/nuldoc-src/jsx/jsx-runtime.ts
@@ -0,0 +1,27 @@
+import type { Node } from "../dom.ts";
+
+export type JSXElement = {
+  tag: string | FunctionComponent;
+  props: Props;
+};
+
+export type JSXNullNode = false | null | undefined;
+export type JSXSimpleNode = JSXElement | Node | string;
+export type JSXNullableSimpleNode = JSXSimpleNode | JSXNullNode;
+export type JSXNode = JSXNullableSimpleNode | JSXNode[];
+export type RenderableJSXNode = JSXElement;
+
+type Props = { children?: JSXNode } & Record<string, unknown>;
+export type FunctionComponentResult = JSXElement | Promise<JSXElement>;
+type FunctionComponent = (props: Props) => FunctionComponentResult;
+
+export function jsx(
+  tag: string | FunctionComponent,
+  props: Props,
+): JSXElement {
+  return { tag, props };
+}
+
+export { jsx as jsxs };
+
+// TODO: support Fragment
diff --git a/vhosts/blog/nuldoc-src/jsx/render.ts b/vhosts/blog/nuldoc-src/jsx/render.ts
new file mode 100644
index 00000000..8603f6c3
--- /dev/null
+++ b/vhosts/blog/nuldoc-src/jsx/render.ts
@@ -0,0 +1,45 @@
+import type { Element, Node } from "../dom.ts";
+import type {
+  JSXNode,
+  JSXNullableSimpleNode,
+  JSXSimpleNode,
+  RenderableJSXNode,
+} from "myjsx/jsx-runtime";
+
+function transformNode(node: JSXNode): Promise<Node[]> {
+  const flattenNodes: JSXNullableSimpleNode[] = Array.isArray(node)
+    // @ts-ignore prevents infinite recursion
+    ? (node.flat(Infinity) as JSXNullableSimpleNode[])
+    : [node];
+  return Promise.all(
+    flattenNodes
+      .filter((c): c is JSXSimpleNode => c != null && c !== false)
+      .map((c) => {
+        if (typeof c === "string") {
+          return { kind: "text", content: c, raw: false };
+        } else if ("kind" in c) {
+          return c;
+        } else {
+          return renderToDOM(c);
+        }
+      }),
+  );
+}
+
+export async function renderToDOM(
+  element: RenderableJSXNode,
+): Promise<Element> {
+  const { tag, props } = element;
+  if (typeof tag === "string") {
+    const { children, ...attrs } = props;
+    const attrsMap = new Map(Object.entries(attrs)) as Map<string, string>;
+    return {
+      kind: "element",
+      name: tag,
+      attributes: attrsMap,
+      children: await transformNode(children),
+    };
+  } else {
+    return renderToDOM(await tag(props));
+  }
+}
diff --git a/vhosts/blog/nuldoc-src/jsx/types.d.ts b/vhosts/blog/nuldoc-src/jsx/types.d.ts
new file mode 100644
index 00000000..6a9d2b91
--- /dev/null
+++ b/vhosts/blog/nuldoc-src/jsx/types.d.ts
@@ -0,0 +1,61 @@
+import type {
+  FunctionComponentResult,
+  JSXElement,
+  JSXNode,
+} from "myjsx/jsx-runtime";
+
+export { JSXNode };
+
+interface IntrinsicElementType {
+  children?: JSXNode;
+  className?: string;
+  id?: string;
+}
+
+declare global {
+  namespace JSX {
+    type Element = JSXElement;
+    type ElementType =
+      | string
+      // deno-lint-ignore no-explicit-any
+      | ((props: any) => FunctionComponentResult);
+
+    interface IntrinsicElements {
+      a: IntrinsicElementType & { href?: string };
+      article: IntrinsicElementType;
+      body: IntrinsicElementType;
+      button: IntrinsicElementType;
+      canvas: { id?: string; "data-slide-link"?: string };
+      div: IntrinsicElementType;
+      footer: IntrinsicElementType;
+      h1: IntrinsicElementType;
+      h2: IntrinsicElementType;
+      head: unknown;
+      header: IntrinsicElementType;
+      html: IntrinsicElementType & { lang?: string };
+      img: { src: string };
+      li: IntrinsicElementType;
+      link: { rel: string; href: string; type?: string };
+      main: IntrinsicElementType;
+      meta: {
+        charset?: string;
+        name?: string;
+        content?: string;
+        property?: string;
+      };
+      nav: IntrinsicElementType;
+      noscript: IntrinsicElementType;
+      ol: IntrinsicElementType;
+      p: IntrinsicElementType;
+      script: { src: string; type?: string };
+      section: IntrinsicElementType;
+      time: IntrinsicElementType & { datetime?: string };
+      title: IntrinsicElementType;
+      ul: IntrinsicElementType;
+    }
+
+    interface ElementChildrenAttribute {
+      children: unknown;
+    }
+  }
+}