Html (fmlib_browser.Fmlib

A node of the virtual dom represents a node in the dom of the browser. Basically there are text nodes and element nodes.

Possible Name Shadowing

Note that there are many, many, many specific elements and many, many specific attributes . I.e. if you write a function like

    let view ... =
        let open Html in
        let open Attribute in
        div [] [
            h1 [] [text "Chapter 1"];
            p  [] [text "...."];
            ...
        ]

some of the attribute names and html node names might shadow function arguments or other local names in your module. Furthermore there are nodes with the same name as an attribute (e.g. label). The name clash might not be immediately visible because the OCaml compiler complains about some type error.

In order to avoid a lot of typing by not opening the namespaces it might be recommendable to write the above function in the following style

    let view ... =
        let module H = Html in
        let module A = Attribute in
        H.div [] [
            H.h1 [] [text "Chapter 1"];
            H.p  [] [text "...."];
            ...
        ]

Basic Interface

type 'msg t

Type of a virtual dom node potentially generating a message of type 'msg.

val text : string -> 'msg t

text str Create a text node.

val node : string -> 'msg Attribute.t list -> 'msg t list -> 'msg t

node tag attrs children

Create an html element with a tagname, a list of attributes and a list of children.

val node_ns : 
  string ->
  string ->
  'msg Attribute.t list ->
  'msg t list ->
  'msg t

node namespace tag attrs children

Like node, but creates the node within a namespace e.g. "http://www.w3.org/2000/svg" for svg elements.

val svg_node : string -> 'msg Attribute.t list -> 'msg t list -> 'msg t

svg_node tag attrs children

Create an svg element with a tagname, a list of attributes and a list of children. An svg element is a node in the namespace "http://www.w3.org/2000/svg".

val map : ('a -> 'b) -> 'a t -> 'b t

map f vdom

Map a virtual dom vdom creating messages of type 'a to a virtual dom creating messages of type 'b.

val keyed : string -> 'msg Attribute.t list -> (string * 'msg t) list -> 'msg t

keyed tag attrs children

Like node, but add a unique identifier to each child node. This makes adding, removing and modifying child nodes more efficient. The dom diffing algorithm compares child nodes with the same identifier.

Reference Nodes

Reference nodes are nodes whose content is not controlled by the virtual dom. In the virtual dom the reference nodes are inserted by their name.

The contents of reference nodes is controlled via Command.set_reference.

Reference nodes are persistent. Once referenced by reference or initialized or updated by Command.set_reference they exist. Once existing they can be modidfied by Command.set_reference.

The virtual dom can use them or not. They remain in existence.

Reference nodes are a means to improve performance. In the following examples reference nodes might be useful:

Having an editor window in the browser (e.g. CodeMirror): It does not make sense and is quite difficult to control an editor window by the virtual dom. It is better to create a reference node and let the internal state of the editor handled by some other meanss (e.g. CodeMirror code)

Spreadsheet with many cells: In a spreadsheet usully one cell is updated and some cells whose content depends on the edited cell have to be updated as well. Having a reference node for each cell makes it possible to update only the edited and its dependent cells. Having all spreadsheet cells managed by the virtual dom requires a diffing of all cells. This can become quite slow if the spreadsheet is large.

val reference : string -> 'msg t

Insert a reference element into the dom.

Specific elements

Content sectioning

val address : 'msg Attribute.t list -> 'msg t list -> 'msg t

address attrs children

Defines a section containing contact information about a person or organization.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address

val article : 'msg Attribute.t list -> 'msg t list -> 'msg t

article attrs children

Defines self-contained content, which is usable independently of the page. Examples include blog posts, user-submitted comments or interactive widgets.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article

val aside : 'msg Attribute.t list -> 'msg t list -> 'msg t

aside attrs children

Defines content that is not directly related to the main content of the page. This content is often presented as a sidebar or a call-out box.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside

val footer : 'msg Attribute.t list -> 'msg t list -> 'msg t

footer attrs children

Defines the footer for a page or section. It typically contains information about the author, copyright data, or links to related documents.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer

val header : 'msg Attribute.t list -> 'msg t list -> 'msg t

header attrs children

Defines the header of a page or section. It typically contains a logo, the title of the page and navigation elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header

val h1 : 'msg Attribute.t list -> 'msg t list -> 'msg t

h1 attrs children

Defines a section heading. <h1> is the highest section level and <h6> is the lowest.