Without JSX

Build views with h() when you cannot use JSX.

Prefer JSX. When a file cannot use the JSX runtime, call h():

import { const atom: AtomFnatom, function h(type: string | Fragment | ((props: Record<string, unknown>) => unknown), props: Record<string, unknown> | null | undefined, ...rest: View[]): VNodeh } from "ilha";

const const Counter: () => VNodeCounter = () => {
  const const count: AtomHandle<number>count = atom<number>(init: number | Atom<number> | Effect<number, any, any> | Stream<number, any, any>): AtomHandle<number>atom(0);
  return function h(type: string | Fragment | ((props: Record<string, unknown>) => unknown), props: Record<string, unknown> | null | undefined, ...rest: View[]): VNodeh(
    "button",
    {
      type: stringtype: "button",
      onclick: () => voidonclick: () => const count: AtomHandle<number>count.AtomHandle<number>.update(f: (current: number) => number): voidupdate((n: numbern: number) => n: numbern + 1),
    },
    "count: ",
    const count: AtomHandle<number>count,
  );
};

h(type, props, ...children) is the same factory JSX uses. There is no html tagged template in this API.

Tagged templates

If you want markup that looks like the old html tagged-template helper, look at @knighted/jsx. It is a tagged-template JSX runtime. It is not built into Ilha.

It is compatible with Ilha only if the tag emits h() vnodes ($$ilha: 1), not DOM nodes or React.createElement. The package defaults to React; override its createElement / fragment to h and Fragment from ilha if that option exists in the version you install.

Use lowercase event props (onclick, not onClick). Ilha only binds all-lowercase on* keys. class and className both work.

Prefer real JSX or h() for anything you ship. Treat @knighted/jsx as an optional authoring layer, not part of the Ilha contract.