package bonsai

  1. Overview
  2. Docs
Legend:
Library
Module
Module type
Parameter
Class
Class type
val name : string

The name of the component. This is used to identify the component while debugging, and to annotate error messages. If you can't think of a good name, a reasonable fallback is Source_code_position.to_string [%here].

module Input : sig ... end

A component receives read-only input, either from the output of other components or from an external system (e.g. data from a server). The input is frequently dynamic, but may also be constant.

module Model : sig ... end

A component's "model" is a state machine that the component can both read and write to. Because both the input and model are readable, it can be hard to decide whether to request some data from the input or the model. It is highly recommended to put only the data that needs mutation in Model.t, and the rest in Input.t.

module Action : sig ... end

Components can change their own model by issuing "actions" that perform the state transition. If you think of the state machine as having states of type Model.t, then the transitions between those nodes would be of type Action.t.

module Result : sig ... end

While UI components stereotypically produce some kind of "view", with Bonsai, components are small and easy enough to compose that Bonsai components frequently produce intermediate results which are then wired into other components.

val apply_action : inject:(Action.t -> unit Ui_effect.t) -> schedule_event:(unit Ui_effect.t -> unit) -> Input.t -> Model.t -> Action.t -> Model.t

When an action is raised by this component (via an Event.t), Bonsai will eventually pass that action back to this component's apply_action function. This function is responsible for producing a new model given the current model and the incoming action.

apply_action may emit further actions via schedule_event or use Async to arrange for schedule_event to be called later.

val compute : inject:(Action.t -> unit Ui_effect.t) -> Input.t -> Model.t -> Result.t

compute is a function from input and model to the component's result. In a component that produces a view, this function could be thought of as the "view computation function".

This function is also given an "inject" function which converts this component's Action.t to a global Event.t which can be given to Bonsai to schedule. Frequently, inject (or some wrapper around it) is included in the result as a handler for some kind of user input.

For example, the result may contain a Vdom button node that has an "on click" handler which calls inject to trigger an action.