Render and hydrate

Render HTML with renderToString and activate it with mount.

A component returns JSX. You turn that into HTML on the server and into a live tree in the browser.

API	Env	Output
`await renderToString(component)`	Server	HTML plus snapshot wrap
`await renderToString(component, { markers: false })`	Server	Inner HTML only
`mount(el, component)`	Client	Live tree
`mount(el, component, { hydrate: true })`	Client	Hydrate existing HTML

Return a view

Prefer JSX. Strings become text nodes.

const const A: () => ViewA = () => <IntrinsicElements[string]: anyp>Hello</IntrinsicElements[string]: anyp>;
const const B: () => stringB = () => "hello";

Server render

import { const atom: AtomFnatom, function renderToString(fn: Component, opts?: RenderToStringOptions): Promise<string>renderToString } from "ilha";

const const Counter: () => ViewCounter = () => {
  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]: anyp>{const count: AtomHandle<number>count}</IntrinsicElements[string]: anyp>;
};

const const html: stringhtml = await function renderToString(fn: Component, opts?: RenderToStringOptions): Promise<string>renderToString(const Counter: () => ViewCounter);

Default output looks like:

<div data-ilha data-ilha-state='{"v":[0]}'>
  <p>0</p>
</div>

Option	Default	Meaning
`snapshot`	`true`	Embed atom values for hydration
`markers`	`true`	Wrap in `<div data-ilha>`
`timeout`	none	Serialize after this many ms even if busy
`captureActions`	`false`	Probe event handlers for server-action calls

Pass { markers: false } when a host already exists (for example a frame target).

renderToString needs a DOM. In Node, ilha registers happy-dom when document is missing.

Mount

import { function mount(el: Element, fn: Component, opts?: MountOptions): () => voidmount } from "ilha";

const const App: () => ViewApp = () => <IntrinsicElements[string]: anyp>Hello</IntrinsicElements[string]: anyp>;

const const root: HTMLElement | nullroot = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app");
if (const root: HTMLElement | nullroot) {
  const const unmount: () => voidunmount = function mount(el: Element, fn: Component, opts?: MountOptions): () => voidmount(const root: HTMLElementroot, const App: () => ViewApp);
}

Hydrate

If the host contains [data-ilha] markup from renderToString, pass hydrate: true:

import { function mount(el: Element, fn: Component, opts?: MountOptions): () => voidmount } from "ilha";

const const App: () => ViewApp = () => <IntrinsicElements[string]: anyp>Hello</IntrinsicElements[string]: anyp>;

const const root: Element | nullroot = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelector)querySelector("[data-ilha]");
if (const root: Element | nullroot) function mount(el: Element, fn: Component, opts?: MountOptions): () => voidmount(const root: Elementroot, const App: () => ViewApp, { hydrate?: boolean | undefinedhydrate: true });

Hydration restores atom snapshots in declaration order, then attaches events. A mismatch logs a warning and does a full mount.

File routes

@ilha/router calls renderToString and mount for you. See Routing.