Module `Vdom`Source

Virtual DOM

A "Virtual application" (or "Elm-like" application) is described by two types:

model: the current state of the UI,

msg ("messages"): possible state transitions;

and by the following values:

init: the initial state of the application, plus some initial commands to be spawned;

view: a function mapping the current state to a "virtual" DOM tree (vdom);

update: a function that processes messages to update the current state, and potentially spawns some commands.

Commands represents (typically) asynchronous operations, such as querying a server, or waiting for some timer.

Messages can be generated either by a VDOM tree (to encapsulate DOM events) or by commands (to notify their outcome).

Commands

Sourcemodule Cmd : sig ... end

Sourcetype js_object = ..

Sourcemodule Decoder : sig ... end

Custom elements

Sourcemodule Custom : sig ... end

Properties and event handlers

Sourcetype mouse_event = {

x : float;
y : float;
page_x : float;
page_y : float;
element_x : float Lazy.t;
element_y : float Lazy.t;
buttons : int;
alt_key : bool;
ctrl_key : bool;
shift_key : bool;

}

Sourcetype key_event = {

which : int;
alt_key : bool;
ctrl_key : bool;
shift_key : bool;

}

Sourcetype paste_event = {

text : string;
selection_start : int;
selection_end : int;

}

Sourcetype 'msg msg_options = {

msg : 'msg option;
stop_propagation : bool;
prevent_default : bool;

}

Sourcetype +'msg event_handler =

| Decoder : {
1. event_type : string;
2. decoder : 'a msg_options Decoder.t;
3. map : 'a option -> 'msg option;
} -> 'msg event_handler
| CustomEvent of Custom.event -> 'msg option

Sourcetype prop_val =

| String of string
| Int of int
| Float of float
| Bool of bool

Sourcetype 'msg attribute =

| Property of string * prop_val
| Style of string * string
| Handler of 'msg event_handler
| Attribute of string * string

Event handlers

Source

val on : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  string ->
  'msg option Decoder.t ->
  'msg attribute

Sourceval on_with_options : string -> 'msg msg_options Decoder.t -> 'msg attribute

Source

val on_js : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  string ->
  (js_object -> 'msg option) ->
  'msg attribute

Source

val on_js_with_options : 
  string ->
  (js_object -> 'msg msg_options) ->
  'msg attribute

Source

val onmousedown : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onmousedown_cancel : 
  ?stop_propagation:unit ->
  (mouse_event -> 'msg option) ->
  'msg attribute

Source

val onmouseup : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onclick : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onclick_cancel : 
  ?stop_propagation:unit ->
  (mouse_event -> 'msg option) ->
  'msg attribute

Source

val ondblclick : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val oncontextmenu : 
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onfocus : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  'msg ->
  'msg attribute

Source

val onblur : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  'msg ->
  'msg attribute

Source

val oninput : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (string -> 'msg) ->
  'msg attribute

Pass the value property of the event target.

Source

val onchange_checked : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (bool -> 'msg) ->
  'msg attribute

Pass the checked property of the event targer.

Source

val onchange : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (string -> 'msg) ->
  'msg attribute

Pass the value property of the event target.

Source

val onchange_index : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (int -> 'msg) ->
  'msg attribute

Pass the selected_index property of the event target.

Source

val onmousemove : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onmouseenter : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onmouseleave : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onmouseover : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (mouse_event -> 'msg) ->
  'msg attribute

Source

val onkeydown : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (key_event -> 'msg) ->
  'msg attribute

Source

val onkeydown_cancel : 
  ?stop_propagation:unit ->
  (key_event -> 'msg option) ->
  'msg attribute

Source

val onkeyup : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (key_event -> 'msg) ->
  'msg attribute

Source

val onkeyup_cancel : 
  ?stop_propagation:unit ->
  (key_event -> 'msg option) ->
  'msg attribute

Source

val onpaste : 
  ?prevent_default:unit ->
  ?stop_propagation:unit ->
  (paste_event -> 'msg option) ->
  'msg attribute

Sourceval oncustomevent : (Custom.event -> 'msg option) -> 'msg attribute

Generic DOM properties

Generic DOM properties correspond to actual properties on DOM objects. The name of these properties is usually the same as the corresponding HTML attribute, but not always (e.g. "class" attribute, but "className" property).

Sourceval str_prop : string -> string -> 'msg attribute

Sourceval int_prop : string -> int -> 'msg attribute

Sourceval bool_prop : string -> bool -> 'msg attribute

Sourceval float_prop : string -> float -> 'msg attribute

Sourceval style : string -> string -> 'msg attribute

A sub-field of the "style" DOM property.

Sourceval attr : string -> string -> 'msg attribute

Sourceval int_attr : string -> int -> 'msg attribute

Sourceval float_attr : string -> float -> 'msg attribute

Common DOM properties

Sourceval class_ : string -> 'msg attribute

Sourceval type_ : string -> 'msg attribute

Sourceval type_button : 'msg attribute

Sourceval value : string -> 'msg attribute

Sourceval disabled : bool -> 'msg attribute

Sourceval add_class : string -> 'msg attribute list -> 'msg attribute list

Pseudo-attributes

Pseudo-attributes are interpreted in a special way by the infrastructure.

Sourceval scroll_to_show : align_top:bool -> 'msg attribute

When this pseudo-attribute is first applied to an element, its parent is automatically scrolled (vertically) to show the element.

Sourceval autofocus : 'msg attribute

When this pseudo-attribute is first applied to an element, the element gets focused.

Sourceval autofocus_if_visible : 'msg attribute

When this pseudo-attribute is first applied to an element, the element gets focused if the element is visible in the viewport.

Sourceval autofocus_counter : int -> 'msg attribute

When this pseudo-attribute is first applied to an element, or applied with a different counter as the previous time, the element gets focused.

Sourceval select : 'msg attribute

When this pseudo-attribute is first applied to an input or textarea element, select the content.

Sourceval autosubmit : 'msg attribute

When this pseudo_attribute is first applied to a form element, it will be submitted automatically.

VDOM

Sourcetype +'msg vdom =

| Text of {
1. key : string;
2. txt : string;
}
| Fragment of {
1. key : string;
2. children : 'msg vdom list;
}
| Element of {
1. key : string;
2. ns : string;
3. tag : string;
4. attributes : 'msg attribute list;
5. children : 'msg vdom list;
}
| Map : {
1. key : string;
2. f : 'submsg -> 'msg;
3. child : 'submsg vdom;
} -> 'msg vdom
| Memo : {
1. key : string;
2. f : 'a -> 'msg vdom;
3. arg : 'a;
} -> 'msg vdom
| Custom of {
1. key : string;
2. elt : Custom.t;
3. attributes : 'msg attribute list;
4. propagate_events : bool;
}

Generic VDOM constructors

Sourcetype ('msg, 'res) elt_gen = ?key:string -> ?a:'msg attribute list -> 'res

Sourceval elt : ?ns:string -> string -> ('msg, 'msg vdom list -> 'msg vdom) elt_gen

A generic element.

Sourceval svg_elt : string -> ('msg, 'msg vdom list -> 'msg vdom) elt_gen

A generic element in the SVG namespace.

Sourceval text : ?key:string -> string -> 'msg vdom

A text node.

Sourceval fragment : ?key:string -> 'msg vdom list -> 'msg vdom

A fragment node (not appearing in the dom).

Source

val map_attr : 
  ('msg attribute list -> 'msg attribute list) ->
  'msg vdom ->
  'msg vdom

Map attributes of a vdom element

Sourceval map : ?key:string -> ('a -> 'b) -> 'a vdom -> 'b vdom

Wrap all messages generated by a VDOM tree with the provided function.

Sourceval memo : ?key:string -> ('a -> 'msg vdom) -> 'a -> 'msg vdom

Apply the function to generate a VDOM tree only if the function or its argument have changed (physically) from the previous synchronization.

Note that physical equality is used both for the function and its argument. In particular, this is unlikely to behave as expected if the function is defined inline (as an abstraction) or obtained by a (partial) function application. Instead, the functional argument should be a simple reference to a globally defined function.

TODO: n-ary versions.

Source

val custom : 
  ?key:string ->
  ?a:'msg attribute list ->
  ?propagate_events:unit ->
  Custom.t ->
  'msg vdom

A custom kind of node. Usually not used directly.

Common elements

Sourceval div : ('msg, 'msg vdom list -> 'msg vdom) elt_gen

Sourceval input : ('msg, 'msg vdom list -> 'msg vdom) elt_gen

Sourceval txt_span : ('msg, string -> 'msg vdom) elt_gen

Virtual Application

Sourceval return : ?c:'msg Cmd.t list -> 'model -> 'model * 'msg Cmd.t

Sourcetype ('model, 'msg) app = {

init : 'model * 'msg Cmd.t;
update : 'model -> 'msg -> 'model * 'msg Cmd.t;
view : 'model -> 'msg vdom;

}

Source

val app : 
  init:('model * 'msg Cmd.t) ->
  update:('model -> 'msg -> 'model * 'msg Cmd.t) ->
  view:('model -> 'msg vdom) ->
  unit ->
  ('model, 'msg) app

Source

val simple_app : 
  init:'model ->
  update:('model -> 'msg -> 'model) ->
  view:('model -> 'msg vdom) ->
  unit ->
  ('model, 'msg) app

A simple app does not trigger commands.

Sourceval to_html : 'msg vdom -> string

Convert to HTML

Install

Dune Dependency

Authors

Maintainers

Sources

doc/vdom.base/Vdom/index.html

Module `Vdom`Source

Virtual DOM

Commands

Custom elements

Properties and event handlers

Event handlers

Generic DOM properties

Common DOM properties

Pseudo-attributes

VDOM

Generic VDOM constructors

Common elements

Virtual Application

package vdom

Install

Dune Dependency

Authors

Maintainers

Sources

doc/vdom.base/Vdom/index.html

Module VdomSource

Virtual DOM

Commands

Custom elements

Properties and event handlers

Event handlers

Generic DOM properties

Common DOM properties

Pseudo-attributes

VDOM

Generic VDOM constructors

Common elements

Virtual Application

Module `Vdom`Source