Module Sharp_vdom

module Sharp_vdom: sig .. end

An experimental implementation of a VDOM with helpers to link it to signals.

Say s1 is a signal of first name and last name, so its type is (string * string) t, and container is a HTML element of type Dom_html.element Js.t. You can display a message in this element like this:

      let unlink =
        vdom container s1 (fun (first_name, last_name) ->
          tag "div" |* ("class", "message")
          |- text "Hello! You are "
          |- (tag "em" |- text (first_name ^ " " ^ last_name))
        )
      in
      (* Rest of your program. *)
      (* Calling unlink causes the VDOM to be destroyed. *)

type t

VDOM type.

val vdom : Dom_html.element Js.t ->
       'a Sharp_core.t -> ('a -> t) -> unit -> unit

Run the function with the signal's value every time it "changes" value (see document of Sharp.Core for more details on that) and binds the returned VDOM to the given real DOM element. The returned callback can be called to stop reacting to this signal.

type restart_strategy =

`\|`	`Never`
`\|`	`Always`
`\|`	`OnChange`
`\|`	`OnDeepChange`
`\|`	`OnIdentifierChange of string`

When creating a node, a network can be given, the restart strategy determines when this network should be stopped and called again.

val node : ?network:(Dom_html.element Js.t -> unit -> unit) ->
       ?strategy:restart_strategy ->
       ?id:string -> string -> t list -> t

Create a VDOM node of the given HTML tag with the given list of children.

network is a function called when the actual node is created and whose returned function is called when the node is destroyed. strategy is the restart strategy for this node. See restart_strategy. id allows you to identify a node in order to help the VDOM engine to distinguish between nodes.

val element : ?network:(Dom_html.element Js.t -> unit -> unit) ->
       ?strategy:restart_strategy -> ?id:string -> string -> t

Same as node but without children.

val tag : ?network:(Dom_html.element Js.t -> unit -> unit) ->
       ?strategy:restart_strategy -> ?id:string -> string -> t

Alias for element.

val text : ?network:(Dom.text Js.t -> unit -> unit) ->
       ?strategy:restart_strategy -> string -> t

A text node.

val append_child : t -> t -> t

Append a child to a node. The first parameter is the parent.

val prepend_child : t -> t -> t

Prepend a child to a node. The first parameter is the parent.

val set_attribute : string -> string -> t -> t

Set an attribute to a node. The first string is the attribute name and the second its value.

val clear_attribute : string -> t -> t

Remove an attribute from a node.

val (|-) : t -> t -> t

Alias for append_child.

val (|+) : t -> t list -> t

Append several children at once.

val ( |* ) : t -> string * string -> t

Alias for set_attribute (sort of.)

module Linked: sig .. end

val link : ?current:Dom.node Js.t ->
       Dom_html.element Js.t -> t -> Linked.t * (unit -> unit)

Link a VDOM to a node and return a pair with a linked VDOM and a callback to start the subnetworks. This is so that we can use perform_state_post to start the subnetworks after the new state has been recorded.

val unlink : ?remove:bool -> Linked.t -> unit -> unit

val diff_and_patch : Dom_html.element Js.t ->
       Linked.t -> t -> Linked.t * (unit -> unit)

module Element: sig .. end

Helpers for specific elements

module E: Element