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 { function 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, any, any> | Stream<number, any, any>): AtomHandle<number>atom(0);
  return (
    <IntrinsicElements[string]: anybutton
      type: stringtype="button"
      onclick: () => voidonclick={() => const count: AtomHandle<number>count.AtomHandle<number>.update(f: (current: number) => number): voidupdate((n: numbern: number) => n: numbern + 1)}
    >
      {const count: AtomHandle<number>count}
    </IntrinsicElements[string]: anybutton>
  );
});

<ilha-counter></ilha-counter>

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