package virtual_dom

  1. Overview
  2. Docs
package virtual_dom
Legend:
Library
Module
Module type
Parameter
Class
Class type
module Element : sig ... end

The values associated with an Element and element like nodes. (that is in practice all nodes that aren't just text).

module Widget : sig ... end
type t =
  1. | None
  2. | Text of Base.string
  3. | Element of Element.t
  4. | Widget of Widget.t
type node_creator := ?key:Base.string -> ?attr:Virtual_dom__.Attr.t -> t Base.list -> t
type node_creator_childless := ?key:Base.string -> ?attr:Virtual_dom__.Attr.t -> Base.unit -> t
module Aliases : sig ... end
val none : t
val text : Base.string -> t
val textf : ('a, Base.unit, Base.string, t) Base.format4 -> 'a
val a : node_creator
val body : node_creator
val button : node_creator
val code : node_creator
val div : node_creator
val main : node_creator
val fieldset : node_creator
val h1 : node_creator
val h2 : node_creator
val h3 : node_creator
val h4 : node_creator
val h5 : node_creator
val h6 : node_creator
val header : node_creator
val html : node_creator
val input : node_creator
val textarea : node_creator
val select : node_creator
val option : node_creator
val label : node_creator
val li : node_creator
val p : node_creator
val pre : node_creator
val section : node_creator
val span : node_creator
val strong : node_creator
val table : node_creator
val tbody : node_creator
val td : node_creator
val th : node_creator
val thead : node_creator
val tr : node_creator
val ul : node_creator
val ol : node_creator
val sexp_for_debugging : ?indent:Base.int -> Base.Sexp.t -> t
val inner_html : tag:Base.string -> attr:Virtual_dom__.Attr.t -> this_html_is_sanitized_and_is_totally_safe_trust_me:Base.string -> t

This function can be used to build a node with the tag and html content of that node provided as a string. If this function was called with ~tag:"div" [] ~this_html...:"<b> hello world</b>" then the resulting node would be <div><b> hello world </b></div>

For totally sanitized content strings, this is fine; but if a user can influence the value of content and you don't have a sanitizer, they can inject code into the page, so use with extreme caution!

val inner_html_svg : tag:Base.string -> attr:Virtual_dom__.Attr.t -> this_html_is_sanitized_and_is_totally_safe_trust_me:Base.string -> t

Same as inner_html but for svg elements

val create : Base.string -> node_creator

key is used by Virtual_dom as a hint during diffing/patching

val create_svg : Base.string -> node_creator

Like create but for svg nodes (i.e. all to be placed inside <svg> tag). This is needed as browsers maintain separate namespaces for html and svg, and failing to use the correct one may result in delayed redraws.

val to_dom : t -> Js_of_ocaml.Dom_html.element Js_of_ocaml.Js.t

Creates a new browser DOM element from a virtual-dom node. Note that calling this function will give you a brand new element, which you then have to put into the DOM yourself. Thus, you should probably not be calling this very often, since Bonsai and Incr_dom both take care calling this function on the top-level view node.

The one situation where to_dom is useful for the typical user is with the Widget API, since building a Widget entails generating the browser DOM element.

val to_raw : t -> Virtual_dom__.Gen_js_api.Ojs.t
val widget : ?info:Base.Sexp.t Base.Lazy.t -> ?destroy: ('s -> Js_of_ocaml.Dom_html.element as 'e Js_of_ocaml.Js.t -> Base.unit) -> ?update:('s -> 'e Js_of_ocaml.Js.t -> 's * 'e Js_of_ocaml.Js.t) -> id:('s * 'e Js_of_ocaml.Js.t) Base.Type_equal.Id.t -> init:(Base.unit -> 's * 'e Js_of_ocaml.Js.t) -> Base.unit -> t

Creates a Node.t that has fine-grained control over the Browser DOM node.

Callbacks =========

init: Returns a Browser DOM Node and a widget state object. The Browser DOM node is mounted into the dom in the location where the Node.t object would otherwise be.

update: Given the previous Browser DOM Node and state, makes any changes necessary to either and returns a new state and Browser DOM Node.

destroy: Called when this Node.t is removed from the Virtual_dom. Performs any necessary cleanup.

Other =====

The id is used to compare widgets, and is used to make sure that the state from one widget doesn't get interpreted as the state for another. Otherwise, you would be able to implement Obj.magic using this API.

WARNING: While other Virtual_dom APIs shield the application from script injection attacks, the Widget.create function allows a developer to bypass these safeguards and manually create DOM nodes which could allow an attacker to change the behavior of the application or exfiltrate data.

In using this API, you are being trusted to understand and follow security best-practices.

val widget_of_module : (module Widget.S with type Input.t = 'input) -> ('input -> t) Base.Staged.t

widget_of_module is very similar to widget, but it pulls all of the callbacks out into a first-class module. Read the comment for widget to learn more.

It is very important that you call widget_of_module exactly once for any "widget class" that you want to construct. Otherwise, the nodes created by it won't be comparable against one another and the widget-diffing will just run destroy, init, destroy, init over and over.

module Patch : sig ... end
module Expert : sig ... end
OCaml

Innovation. Community. Security.

GitHub Discord Twitter Peertube RSS
About
Changelog Releases Industrial Users Academic Users Why OCaml
Ecosystem
Packages Community Events OCaml Planet Jobs
Resources
Install OCaml Get Started Platform Tools Language Manual Standard Library API Books Exercises Papers OCaml Playground Logo
Policies
Carbon Footprint Governance Privacy Code of Conduct