duck.html.components.core.vdom

Lively Component System Virtual DOM.

Module Contents

Classes

LiveVDomNode

Custom VDomNode which maintains close relationship with a component.

VDomNode

Virtual DOM node optimized for fast diffing and minimal patch generation.

API

class duck.html.components.core.vdom.LiveVDomNode(component)[source]

Bases: duck.html.components.core.vdom.VDomNode

Custom VDomNode which maintains close relationship with a component.

Initialization

Initialize LiveVDomNode.

Parameters:

component – The associated component.

__slots__

‘component’

property children
property key
property props
property style
property tag
property text
class duck.html.components.core.vdom.VDomNode(tag: str, key: Optional[Union[str, int]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, children: Optional[List[duck.html.components.core.vdom.VDomNode]] = None, text: Optional[str] = None, component=None)[source]

Virtual DOM node optimized for fast diffing and minimal patch generation.

Variables:

  • tag – HTML tag name (e.g., ‘div’, ‘span’, ‘button’).

  • key – Unique identifier for the node (used in keyed diffing).

  • props – Dictionary of HTML attributes (e.g., {‘class’: ‘btn’}).

  • style – Dictionary of CSS inline styles (e.g., {‘color’: ‘red’}).

  • children – List of child VDomNode instances.

  • text – Inner text content of the element.

Initialization

Initialize a virtual DOM node.

Parameters:

  • tag – The HTML tag of the node (e.g., ‘div’).

  • key – Optional unique key for diffing.

  • props – HTML attributes for the node.

  • style – CSS inline styles for the node.

  • children – List of child virtual DOM nodes.

  • text – Text content of the node, if any.

  • component – The target component.

__repr__()[source]
__slots__

(‘tag’, ‘key’, ‘props’, ‘style’, ‘children’, ‘text’, ‘component’)

__str__

None

static diff(old: duck.html.components.core.vdom.VDomNode, new: duck.html.components.core.vdom.VDomNode) → List[list][source]

Compute a minimal set of patches to transform one virtual DOM tree into another.

This method performs key-based diffing on children and emits compact patch lists using PatchCode. Each patch is a list optimized for fast encoding with MessagePack.

Parameters:

  • old – The previous virtual DOM node.

  • new – The updated virtual DOM node.

Returns:

A list of compact patch operations (lists) in the format: [opcode, key, …data]

Return type:

List[list]

async static diff_and_act(action: Callable, old: duck.html.components.core.vdom.VDomNode, new: duck.html.components.core.vdom.VDomNode) → None[source]

Compute a minimal set of patches to transform one virtual DOM tree into another.

This method performs key-based diffing on children and emits compact patch lists using PatchCode. Each patch is a list optimized for fast encoding with MessagePack.

This method diffs and perform an action on every patch rather than returning a list of all computed patches.

Parameters:

  • action – A synchronous/asynchronous callable to perform on every patch. The first argument to this must be the patch.

  • old – The previous virtual DOM node.

  • new – The updated virtual DOM node.

Returns:

Nothing to return.

Return type:

None

on_insert(node: duck.html.components.core.vdom.VDomNode, parent_node: duck.html.components.core.vdom.VDomNode, index: int)[source]

Event called when node is to be inserted.

on_remove(node: duck.html.components.core.vdom.VDomNode)[source]

Event called when node is to be removed.

to_list() → list[source]

Convert the node into a compact list format for efficient serialization.

Returns:

Serialized representation of the node in the form: [tag, key, props, style, text, [children…]]

Return type:

list