sinho 0.1.0

package/src/create_element.ts

@@ -0,0 +1,89 @@
+import {
+  ComponentConstructor,
+  FunctionalComponent,
+  isComponent,
+  JsxProps,
+} from "./component.js";
+import { DomIntrinsicElements, DomProps } from "./dom.js";
+import { Children } from "./intrinsic/Fragment.js";
+import { TagComponent } from "./intrinsic/TagComponent.js";
+import { ClassComponent } from "./intrinsic/ClassComponent.js";
+import { Template, createTemplate } from "./template.js";
+
+/**
+ * Creates a template based on the given component type.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return createElement("div", { id: "app" }, [
+ *     createElement("h1", {}, "Hello, World!"),
+ *   ]);
+ * }
+ * ```
+ */
+export const createElement: (<K extends keyof DomIntrinsicElements & string>(
+  type: K,
+  props?: DomIntrinsicElements[K],
+  children?: Children,
+) => Template) &
+  (<T extends HTMLElement>(
+    ...args: [
+      type: new () => T,
+      ...({} extends JsxProps<T>
+        ? [props?: JsxProps<T>]
+        : [props: JsxProps<T>]),
+      children?: DomProps<T>["children"],
+    ]
+  ) => Template) &
+  (<P extends object>(
+    ...args: [
+      type: FunctionalComponent<P>,
+      ...({} extends P ? [props?: P] : [props: P]),
+      ...(P extends { children?: unknown }
+        ? undefined extends P["children"]
+          ? [children?: P["children"]]
+          : [children: P["children"]]
+        : []),
+    ]
+  ) => Template) = ((
+  type:
+    | (keyof DomIntrinsicElements & string)
+    | ComponentConstructor
+    | FunctionalComponent,
+  props: Record<string, unknown> = {},
+  children?: Children,
+): Template => {
+  if (children != null) {
+    (props as any).children = children;
+  }
+
+  return isComponent(type)
+    ? ClassComponent(type, props)
+    : typeof type == "function"
+      ? createTemplate(() => type(props))
+      : TagComponent(type, props);
+}) as any;
+
+/**
+ * Shorthand for {@link createElement} with convenience methods for intrinsic
+ * elements.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return h.div({ id: "app" }, [
+ *     h.h1({}, "Hello, World!"),
+ *   ]);
+ * }
+ * ```
+ */
+export const h: typeof createElement & {
+  [K in keyof DomIntrinsicElements]: (
+    props?: DomIntrinsicElements[K],
+    children?: Children,
+  ) => Template;
+} = new Proxy(createElement, {
+  get: (target, type) => (props?: object, children?: Children) =>
+    target(type as string, props, children),
+}) as any;