View API

Reference for UI nodes, JSX primitives, lists, attributes, and mounting.

This page lists the supported API for the View module.

Node is intentionally not expanded here. It currently exists as a compatibility alias, but new code and docs should use View.

View

View is the UI node API used by JSX components and lower-level rendering helpers.

View types

1type attrValue =
2  | Static(string)
3  | SignalValue(Signal.t<string>)
4  | Compute(unit => string)
5
6type node

View.node is the renderable value returned by components. View.attrValue is the supported attribute source type.

View.attr

1let attr: (string, string) => (string, View.attrValue)

Create a static attribute entry.

View.signalAttr

1let signalAttr: (string, Signal.t<string>) => (string, View.attrValue)

Create a reactive attribute from a string signal.

View.computedAttr

1let computedAttr: (string, unit => string) => (string, View.attrValue)

Create a reactive attribute from a compute function.

View.Attr

1View.Attr.string: (string, string) => (string, View.attrValue)
2View.Attr.signal: (string, Signal.t<string>) => (string, View.attrValue)
3View.Attr.compute: (string, unit => string) => (string, View.attrValue)

Namespaced aliases for View.attr, View.signalAttr, and View.computedAttr.

View.text

1let text: string => View.node

Create a static text node.

View.int

1let int: int => View.node

Create a static integer text node.

View.float

1let float: float => View.node

Create a static float text node.

View.bool

1let bool: bool => View.node

Create a static boolean text node.

View.signalText

1let signalText: (unit => string) => View.node

Create a reactive text node from a compute function.

View.signalInt

1let signalInt: (unit => int) => View.node

Create a reactive integer text node from a compute function.

View.signalFloat

1let signalFloat: (unit => float) => View.node

Create a reactive float text node from a compute function.

View.fragment

1let fragment: array<View.node> => View.node

Group several nodes without adding a wrapper element.

View.signalFragment

1let signalFragment: Signal.t<array<View.node>> => View.node

Render an array of nodes from a signal and replace the fragment when it changes.

View.each

1let each: (Signal.t<array<'a>>, 'a => View.node) => View.node

Render each item from a reactive array. Updates re-render the list contents.

View.list

1let list: (Signal.t<array<'a>>, 'a => View.node) => View.node

Alias for View.each.

View.eachWithKey

1let eachWithKey: (Signal.t<array<'a>>, 'a => string, 'a => View.node) => View.node

Render a reactive array with keyed DOM reconciliation.

View.keyedList

1let keyedList: (Signal.t<array<'a>>, 'a => string, 'a => View.node) => View.node

Alias for View.eachWithKey.

View.For

1module For: {
2  type props<'item> = {
3    each: Prop.t<array<'item>>,
4    by?: 'item => string,
5    render: 'item => View.node,
6  }
7
8  let make: props<'item> => View.node
9}

JSX list primitive. Pass by to enable keyed reconciliation.

View.KeyedFor

1module KeyedFor: {
2  type props<'item> = {
3    each: Prop.t<array<'item>>,
4    by: 'item => string,
5    render: 'item => View.node,
6  }
7
8  let make: props<'item> => View.node
9}

JSX list primitive that always requires a key function.

View.Show

1module Show: {
2  type props = {
3    when_: Prop.t<bool>,
4    children?: View.node,
5    fallback?: View.node,
6  }
7
8  let make: props => View.node
9}

JSX conditional primitive for boolean branches.

View.Maybe

1module Maybe: {
2  type props<'value> = {
3    value: Prop.t<option<'value>>,
4    render: 'value => View.node,
5    fallback?: View.node,
6  }
7
8  let make: props<'value> => View.node
9}

JSX conditional primitive for option values.

View.Value

1module Value: {
2  type props<'value> = {
3    value: Prop.t<'value>,
4    render: 'value => View.node,
5  }
6
7  let make: props<'value> => View.node
8}

JSX primitive that re-renders a node from one static or reactive value.

View.element

1let element: (
2  string,
3  ~attrs: array<(string, View.attrValue)>=?,
4  ~events: array<(string, Dom.event => unit)>=?,
5  ~children: array<View.node>=?,
6  unit,
7) => View.node

Create an element node for any tag.

View.null

1let null: unit => View.node

Create an empty placeholder text node.

View.empty

1let empty: unit => View.node

Alias for View.null.

View.mount

1let mount: (View.node, Dom.element) => unit

Render a node into a DOM element.

View.mountById

1let mountById: (View.node, string) => unit

Look up a DOM element by id and mount into it.

View.Text

1<View.Text>{value}</View.Text>
2<View.Text value={value} />

JSX text primitive. value or children may be a raw string, Signal.t<string>, Prop.t<string>, or unit => string.

View.Int

1<View.Int>{value}</View.Int>
2<View.Int value={value} />

JSX integer text primitive. value or children may be a raw int, Signal.t<int>, Prop.t<int>, or unit => int.

View.Float

1<View.Float>{value}</View.Float>
2<View.Float value={value} />

JSX float text primitive. value or children may be a raw float, Signal.t<float>, Prop.t<float>, or unit => float.

View.Bool

1<View.Bool>{value}</View.Bool>
2<View.Bool value={value} />

JSX boolean text primitive. value or children may be a raw bool, Signal.t<bool>, Prop.t<bool>, or unit => bool.

Example

1open Xote
2
3let count = Signal.make(0)
4
5let app = () => {
6  <div>
7    <View.Text> "Count: " </View.Text>
8    <View.Int> {count} </View.Int>
9    <button onClick={_ => Signal.update(count, n => n + 1)}>
10      <View.Text> "Increment" </View.Text>
11    </button>
12  </div>
13}
14
15View.mountById(app(), "app")