UI overview

Added in v1.0.0

---

Table of contents

• app
  • App (type alias)
  • Render (type alias)
  • Trigger (type alias)
  • Update (type alias)
  • createApp
  • runApp
  • runWithRoot
• jsx
  • element
  • fragment
• model
  • Element (type alias)
  • Node
  • TagName (type alias)
  • UINode (type alias)
• utils
  • Produce (type alias)
  • produce

---

app

App (type alias)

Return type of createApp.

Signature

export type App = (root: HTMLElement) => IOO.IOOption<void>;

Added in v1.0.0

Render (type alias)

Type of the render callback of createApp.

Signature

export type Render<TState, TEvent> = (
  trigger: Trigger<TEvent>,
  state: Readonly<TState>,
) => Element;

Added in v1.0.0

Trigger (type alias)

Type of the trigger param passed to the render callback of createApp.

Signature

export type Trigger<TEvent> = (e: TEvent) => void;

Added in v1.0.0

Update (type alias)

Type of the update callback of createApp.

Signature

export type Update<TState, TEvent> = (
  e: TEvent,
) => (state: Readonly<TState>) => TState;

Added in v1.0.0

createApp

Signature

export declare const createApp: <TState, TEvent>(
  initial: TState,
  render: Render<TState, TEvent>,
  update: Update<TState, TEvent>,
) => App;

Example

import { ADT, match } from "ts-adt";
import * as UI from "ui-ts";

type Event = ADT<{
  Click: {};
}>;

const Click: Event = { _type: "Click" };

type State = {
  count: number;
};

const initial: State = {
  count: 0,
};

// you'll probably use JSX for this, like
// <button onClick={() => trigger(Click)}>Count: {state.count}</button>
const render: UI.Render<State, Event> = (trigger, state) =>
  UI.element(
    "button",
    { onClick: () => trigger(Click) },
    "Count: ",
    state.count,
  );

const update: UI.Update<State, Event> = match({
  Click: () =>
    UI.produce<State>((draft) => {
      draft.count++;
    }),
});

// this is an `App` that can later be run with `runApp`
const app = UI.createApp(initial, render, update);

Added in v1.0.0

runApp

Run an App with a certain HTML element, given that element’s ID.

Signature

export declare const runApp: (app: App, rootId?: string | undefined) => void;

Added in v1.0.0

runWithRoot

A low-level function for running an App, in case you can’t get the HTMLElement through document.getElementById.

Signature

export declare const runWithRoot: (app: App, root: HTMLElement) => boolean;

Added in v1.0.0

jsx

element

Signature

export declare const element: (
  tagName: "fragment" | TagName | ((props: Record<string, unknown>) => Element),
  props: Record<string, unknown> | null,
  ...children: (string | number | Element)[]
) => Element;

Added in v1.0.0

fragment

Signature

export declare const fragment: "fragment";

Added in v1.0.0

model

Element (type alias)

Signature

export type Element = ADT<{
  Root: {
    tagName: TagName;
    props: Record<string, unknown> | null;
    children: Element[];
  };
  Text: {
    value: string;
  };
  Fragment: {
    children: Element[];
  };
}>;

Added in v1.0.0

Node

Signature

export declare const Node: UINode;

Added in v1.0.0

TagName (type alias)

Signature

export type TagName = keyof HTMLElementTagNameMap;

Added in v1.0.0

UINode (type alias)

Signature

type UINode = string | number | boolean | Element | UINode[];

Added in v1.0.0

utils

Produce (type alias)

Signature

export type Produce = <TState>(
  recipe: (
    state: Draft<TState>,
    initialState: TState,
  ) => TState | void | undefined,
) => (state?: TState) => TState;

Added in v1.0.0

produce

A thin wrapper around immer’s produce that’s easier to type within an Update function.

Signature

export declare const produce: Produce;

Added in v1.0.0