Helix (helix.Helix)

Example

open Helix
open Stdweb

let counter () =
  let count = Signal.make 0 in
  let open Html in
  div
    [ style_list [ ("border", "1px solid #eee"); ("padding", "1em") ] ]
    [
      h2 [] [ text "Counter" ];
      div [] [ text "Compute a count." ];
      div []
        [
          button
            [ on_click (fun _ -> Signal.update (fun n -> n + 1) count) ]
            [ text "+" ];
          button
            [ on_click (fun _ -> Signal.update (fun n -> n - 1) count) ]
            [ text "-" ];
          div
            [
              style_list [ ("font-size", "32px") ];
              bind
                (fun n ->
                  if n < 0 then style_list [ ("color", "red") ]
                  else style_list [ ("color", "blue") ]
                )
                count;
            ]
            [ show (fun n -> text (string_of_int n)) count ];
        ];
    ]

let () =
  match Dom.Document.get_element_by_id "root" with
  | Some root -> Html.mount root (counter ())
  | None -> failwith "No #root element found"

type html = Html.html

An alias for Html.html.

type attr = Html.attr

An alias for Html.attr.

type 'a signal = 'a Signal.t

An alias for Signal.t.

val signal : ?equal:('a -> 'a -> bool) -> ?label:string -> 'a -> 'a signal

An alias for Signal.make.

Reactive views

val show : ?label:string -> ('a -> Html.html) -> 'a Signal.t -> Html.html

show to_html signal is a dynamic HTML node created from signal values using to_html.

val show_some : 
  ?label:string ->
  ('a -> Html.html) ->
  'a option Signal.t ->
  Html.html

show_some is similar to show, but operates on reactive option values. When the signal's value is None, Html.empty is rendered.

val show_ok : 
  ?label:string ->
  ('a -> Html.html) ->
  ('a, _) Stdlib.result Signal.t ->
  Html.html

show_ok is similar to show, but operates on reactive result values. When the signal's value is Error _, Html.empty is rendered.

val each : ('a -> Html.html) -> 'a list Signal.t -> Html.html

each to_html signal reactively renders items from signal with to_html.

let items = Signal.make [ 1; 2; 3 ] in
ul [] [ each (fun item -> li [] [ int item ]) items ]

Dynamic attributes

val bind : ('a -> Html.attr) -> 'a Signal.t -> Html.attr

bind to_attr signal is a dynamic HTML attribute created from signal values using to_attr.

let style = Signal.make [ ("color", "red") ] in
div [ Html.bind Html.style style ] [ text "Hello!" ]

val bind_some : ('a -> Html.attr) -> 'a option Signal.t -> Html.attr

bind_some is similar to bind, but operates on reactive option values. When the signal's value is None, an empty attribute is produced.

val bind_ok : ('a -> Html.attr) -> ('a, _) Stdlib.result Signal.t -> Html.attr

bind_ok is similar to bind, but operates on reactive result values. When the signal's value is Error _, an empty attribute is produced.

val toggle : on:('a -> bool) -> Html.attr -> 'a Signal.t -> Html.attr

toggle ~on:pred attr s is attr if pred x is true and Html.empty otherwise, where x is the value of s.

val conditional : on:bool Signal.t -> Html.attr

conditional on:signal an attribute that shows the element if signal is true.

val visible : on:bool Signal.t -> Html.attr

visible ~on:signal is a reactive attribute that controls the display style of HTML elements. When signal is false this attribute is display: none.

module Mouse : sig ... end

Mouse signals.

module Time : sig ... end

Time signals.

module Http : sig ... end

HTTP requests.

module History : sig ... end

Browser location and navigation helpers.

module Router : sig ... end

Reactive routing.

Syntax

let operators are provided to simplify rendering signals to HTML: (let$) and (and$).

Example:

let view user_id todo_title =
  let$ user_id = Signal.map int_of_string site_id in
  and$ todo_title in
  let open Html in
  div [] [ h2 [] [ text "User id: "; text user_id ]; h3 [] [ text "Todo: "; todo_title ] ]

Which is the same as:

let view user_id todo_title =
  let user_id = Signal.map int_of_string site_id in
  show
    (fun (user_id, todo_title) ->
      let open Html in
      div []
        [
          h2 [] [ text "User id: "; text user_id ];
          h3 [] [ text "Todo: "; todo_title ];
        ]
    )
    (Signal.pair user_id todo_title)

Additionally, reactive attributes can be bound with let@ and and@.

val let$ : 'a signal -> ('a -> html) -> html

val and$ : 'a signal -> 'b signal -> ('a * 'b) signal

val let@ : 'a signal -> ('a -> attr) -> attr

val and@ : 'a signal -> 'b signal -> ('a * 'b) signal