setup

lib/jsx/jsx-dev-runtime.ts

@@ -0,0 +1 @@
+export * from "./jsx-runtime";

lib/jsx/jsx-runtime.ts

@@ -0,0 +1,20 @@
+import { renderJSX } from "./render";
+import type { JSXChildren, RenderedNode } from "./types";
+
+namespace JSX {
+	export type Attributes = Record<string, unknown> & JSXChildren;
+	// Allow any html tag
+	export type IntrinsicElements = Record<string, Attributes>;
+
+	// Declare the shape of JSX rendering result
+	// This is required so the return types of components can be inferred
+	export type Element = RenderedNode;
+}
+
+// Expose the main namespace
+export type { JSX };
+
+// Expose factories
+export const jsx = renderJSX;
+export const jsxs = renderJSX;
+export const jsxDEV = renderJSX;

lib/jsx/render.ts

@@ -0,0 +1,16 @@
+import type { JSX } from "./jsx-runtime";
+import type { FunctionComponent } from "./types";
+
+export function renderJSX<T extends keyof JSX.IntrinsicElements>(
+	tag: string | FunctionComponent | undefined,
+	props: JSX.IntrinsicElements[T],
+) {
+	if (typeof tag === "function") {
+		return tag(props);
+	}
+	if (typeof tag === "undefined") {
+		return {};
+	}
+	const { children, ...rest } = props;
+	return { [tag]: { ...rest } };
+}

lib/jsx/types.ts

@@ -0,0 +1,19 @@
+export type RenderedNode = object;
+
+export type JSXNode =
+	| RenderedNode
+	| (() => JSXNode)
+	| boolean
+	| number
+	| bigint
+	| string
+	| null
+	| undefined;
+
+export interface JSXChildren {
+	children?: JSXNode | JSXNode[] | undefined;
+}
+
+export type FunctionComponent = (
+	props?: Record<string, unknown>,
+) => RenderedNode;