elixir_script v0.18.0 ElixirScript.VDom

This defines macros for updating a virual dom tree based on patches. This module is used in tandem with the Html module

tree = Html.div [id: "hello"] do
        Html.span do
          "Hello"
        end
      end

rootNode = VDom.create(tree)
:document.getElementById("main").appendChild(rootNode)

newTree = Html.div [id: "world"]


patches = VDom.diff(tree, newTree)
rootNode = VDom.patch(rootNode, patches)

Summary

Macros

Creates a node from the virtual dom tree passed in. This node is used to append to a real DOM element

Takes two nodes and returns a list of differences between the two This node is used to append to a real DOM element

Returns a new node based on the node passed in with the passed in patches applied

Macros

create(element)

Creates a node from the virtual dom tree passed in. This node is used to append to a real DOM element

tree = Html.div [id: "hello"] do
        Html.span do
          "Hello"
        end
      end

rootNode = VDom.create(tree)
:document.getElementById("main").appendChild(rootNode)
diff(tree, newTree)

Takes two nodes and returns a list of differences between the two This node is used to append to a real DOM element

tree = Html.div [id: "hello"]

newTree = Html.div [id: "world"]

patches = VDom.diff(tree, newTree)
patch(root, patches)

Returns a new node based on the node passed in with the passed in patches applied

tree = Html.div [id: "hello"]

rootNode = VDom.create(tree)
:document.getElementById("main").appendChild(rootNode)

newTree = Html.div [id: "world"]


patches = VDom.diff(tree, newTree)
rootNode = VDom.patch(rootNode, patches)