Vanilla API

function el<K extends keyof HTMLElementTagNameMap>(
  type: K,
  propsOrChild?: Partial<HTMLElementTagNameMap[K]> | ElChild,
  ...children: ElChild[]
): HTMLElementTagNameMap[K]

// These are equivalent
el("p", {}, "Hello")
el("p", "Hello")

// Props detected as object
el("div", { className: "card" }, "content")

// Child detected as string
el("div", "content")

// Child detected as Node
el("div", el("span", "inner"))

// Child detected as array
el("ul", items.map(i => el("li", i)))

type ElChild =
  | string      // → text node
  | number      // → text node (coerced via String())
  | boolean     // → silently skipped
  | null        // → silently skipped
  | undefined   // → silently skipped
  | Node        // → appended directly
  | ElChild[]   // → flattened recursively

function bind<E extends HTMLElement>(
  system: SingleModuleSystem<any>,
  element: E,
  updater: (
    el: E,
    facts: Record<string, unknown>,
    derived: Record<string, unknown>,
  ) => void,
): () => void

const span = el("span");

const cleanup = bind(system, span, (el, facts, derived) => {
  el.textContent = `${facts.count}`;
  el.className = derived.isHigh ? "high" : "low";
});

// Unsubscribe
cleanup();

function bindText(
  system: SingleModuleSystem<any>,
  element: HTMLElement,
  selector: (
    facts: Record<string, unknown>,
    derived: Record<string, unknown>,
  ) => string,
): () => void

const label = el("span");

const cleanup = bindText(system, label, (facts, derived) => {
  return `${derived.doubled} items`;
});

function mount(
  system: SingleModuleSystem<any>,
  container: HTMLElement,
  renderer: (
    facts: Record<string, unknown>,
    derived: Record<string, unknown>,
  ) => Node | Node[],
): () => void

// Array of nodes
mount(system, listEl, (facts) => {
  return items.map(item => el("li", item));
});

// Single node
mount(system, container, (facts) => {
  return el("p", "Loading...");
});

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@directive-run/el"
  }
}

function jsx(type: string, props: Record<string, unknown>): HTMLElement

function Fragment(props: { children?: ElChild | ElChild[] }): DocumentFragment

const items = (
  <>
    <li>One</li>
    <li>Two</li>
  </>
);

namespace JSX {
  type IntrinsicElements = {
    [K in keyof HTMLElementTagNameMap]:
      Omit<Partial<HTMLElementTagNameMap[K]>, "children"> & {
        children?: ElChild | ElChild[];
      };
  };
  type Element = HTMLElement;
}

import { html } from "@directive-run/el/htm";

const element = html`<div className="card">Hello</div>`;