Create component

Write a component — a function, async function, or generator that returns JSX.

A component is a function that returns a view. Sync functions return JSX. Async functions can await. Generators yield streams or yield* Effects and when.

const const Hello: () => ViewHello = () => <JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>Hello</JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>;

Call Hello from another component as a nested function. Call mount or renderToString with Hello when it is the root.

Props

Pass props as the first argument:

const 
const Greeting: ({ name }: {
    name: string;
}) => ViewGreeting = ({ name: stringname }: { name: stringname: string }) => <JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>Hello, {name: stringname}</JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>;

When you mount a root that needs props, close over them:

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

const 
const Greeting: ({ name }: {
    name: string;
}) => ViewGreeting = ({ name: stringname }: { name: stringname: string }) => <JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>Hello, {name: stringname}</JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>;

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 | null
The **`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) function mount(el: Element, fn: Component, opts?: MountOptions): (() => void)mount(const root: HTMLElementroot, () => 
const Greeting: ({ name }: {
    name: string;
}) => ViewGreeting({ name: stringname: "Ada" }));

Nested functions

A nested function shares the parent fiber. Atoms you declare there still belong to the parent. Keep call order stable across reruns.

import { const atom: AtomFnatom } from "ilha";

const const Label: (props: Record<string, unknown>) => ViewLabel = (props: Record<string, unknown>props: type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type TRecord<string, unknown>) => (
  <JSX.IntrinsicElements.span: HTMLAttributes<HTMLSpanElement>span>{
var String: StringConstructor
(value?: any) => string
Allows manipulation and formatting of text strings and determination and location of substrings within strings.String(props: Record<string, unknown>props.unknowntext)}</JSX.IntrinsicElements.span: HTMLAttributes<HTMLSpanElement>span>
);

const const Card: () => ViewCard = () => {
  const const title: AtomHandle<string>title = atom<string>(init: string | Atom<string> | Effect<string, unknown, AtomRegistry> | Stream<string, unknown, AtomRegistry>, options?: AtomOptions<string> | undefined): AtomHandle<string>atom("Inbox");
  return (
    <JSX.IntrinsicElements.section: HTMLAttributes<HTMLElement>section>
      <const Label: (props: Record<string, unknown>) => ViewLabel text: stringtext={
const title: AtomHandle
() => stringtitle()} />
    </JSX.IntrinsicElements.section: HTMLAttributes<HTMLElement>section>
  );
};

Async component

const const Page: () => Promise<View>Page = async () => {
  const const title: stringtitle = await var Promise: PromiseConstructor
Represents the completion of an asynchronous operationPromise.PromiseConstructor.resolve<string>(value: string): Promise<string> (+2 overloads)
Creates a new resolved promise for the provided value.
@paramvalue A promise.@returnsA promise whose internal state matches the provided promise.resolve("Home");
  return <JSX.IntrinsicElements.h1: HTMLAttributes<HTMLHeadingElement>h1>{const title: stringtitle}</JSX.IntrinsicElements.h1: HTMLAttributes<HTMLHeadingElement>h1>;
};

renderToString waits until the promise settles and later work goes idle.

Generator component

Use a generator when you yield a Stream of views or yield* when(...). See Streams.

JSX config

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "ilha"
  }
}

Markup, events, and lists are in Templating.