Custom elements

Register a component as a custom element with define().

define(name, component) registers a custom element. On connect it mounts the component. If the host has data-ilha, it hydrates.

import { const atom: AtomFnatom } from "ilha";
import { const define: (name: string, component: Component) => voiddefine } from "ilha/define";

function define(name: string, component: Component): voiddefine("ilha-counter", () => {
  const const count: AtomHandle<number>count = atom<number>(init: number | Atom<number> | Effect<number, unknown, AtomRegistry> | Stream<number, unknown, AtomRegistry>, options?: AtomOptions<number> | undefined): AtomHandle<number>atom(0);
  return (
    <JSX.IntrinsicElements.button: ButtonHTMLAttributesbutton type?: string | undefinedtype="button" EventProps<HTMLButtonElement>.onclick?: ((event: Targeted<HTMLButtonElement, MouseEvent>) => void) | undefinedonclick={() => const count: AtomHandle<number>count.AtomHandle<number>.update: (f: (current: number) => number) => voidupdate((n: numbern) => n: numbern + 1)}>
      {const count: AtomHandle<number>count}
    </JSX.IntrinsicElements.button: ButtonHTMLAttributesbutton>
  );
});

<ilha-counter></ilha-counter>

Disconnect unmounts. Use this when you want HTML to instantiate the component without a JS mount() call site.