Dala.Ui.Diff (dala v0.0.8)

Copy Markdown View Source

Diff engine for incremental UI updates.

Compares two UI trees (as Dala.Ui.Node structs) and produces a minimal set of patches to transform the old tree into the new tree.

Patch format

Patches are tuples tagged with an action:

{:replace, id, node}           # Replace entire node
{:update_props, id, props}     # Update props on existing node
{:insert, parent_id, index, node}  # Insert new node
{:remove, id}                  # Remove node

Usage

old_tree = Dala.Ui.Node.from_map(old_map, "root")
new_tree = Dala.Ui.Node.from_map(new_map, "root")
patches = Dala.Ui.Diff.diff(old_tree, new_tree)

Node identity

Nodes are identified by the :id field in Dala.Ui.Node. This must be stable across renders for proper reconciliation.

Summary

Types

node_id()
patch()

Functions

diff(old, new)

Compute the diff between two UI trees.

Types

node_id()

@type node_id() :: String.t() | atom()

patch()

@type patch() ::
  {:replace, node_id(), Dala.Ui.Node.t()}
  | {:update_props, node_id(), map()}
  | {:insert, node_id(), non_neg_integer(), Dala.Ui.Node.t()}
  | {:remove, node_id()}

Functions

diff(old, new)

@spec diff(Dala.Ui.Node.t() | nil, Dala.Ui.Node.t() | nil) :: [patch()]

Compute the diff between two UI trees.

Returns a list of patches to transform old_tree into new_tree.