Props

wybthon.props

props

DOM property application and diffing for element VNodes.

Translates VNode props into batched DOM ops (see wybthon.kernel), including:

• Controlled form elements (value, checked) via DOM properties.
• CSS style objects ({"backgroundColor": "red"} → kebab-cased inline styles).
• Dataset attributes ({"dataset": {"id": 5}} → data-id="5").
• Event delegation for on_click / onClick style handlers.
• Reactive prop bindings: callable prop values are wrapped in their own effect so updates re-apply only the affected prop, never the surrounding component.

Nothing here touches the DOM directly; every applier emits ops against an integer node id, and the kernel applies the whole batch in one bridge crossing at commit time.

This module is consumed by the reconciler; most application code never imports from it directly.

Functions:

Name	Description
to_kebab	Convert a camelCase property name to kebab-case.
is_event_prop	Return True if name looks like an event handler prop.
event_name_from_prop	Convert an on_click / onClick prop name to its DOM event name.
attach_ref	Point props["ref"].current at an id-backed Element when present.
detach_ref	Clear props["ref"].current when a ref prop is present.
apply_props	Emit ops for prop diffs on a node, including events and styles.
apply_initial_props	Emit ops for a fresh set of props on initial mount, wiring reactive bindings.

to_kebab

to_kebab(name: str) -> str

Convert a camelCase property name to kebab-case.

Parameters:

Name	Type	Description	Default
name	str	A camelCase string such as "backgroundColor".	required

Returns:

Type	Description
str	The kebab-cased equivalent (e.g., "background-color").

is_event_prop

is_event_prop(name: str) -> bool

Return True if name looks like an event handler prop.

Both on_click (snake-case) and onClick (camelCase) styles are recognised.

Parameters:

Name	Type	Description	Default
name	str	Prop name to inspect.	required

Returns:

Type	Description
bool	True for event handler props.

event_name_from_prop

event_name_from_prop(name: str) -> str

Convert an on_click / onClick prop name to its DOM event name.

Parameters:

Name	Type	Description	Default
name	str	Event handler prop name.	required

Returns:

Type	Description
str	The DOM event name (e.g., "click", "mouseover").

attach_ref

attach_ref(props: PropsDict, node_id: int) -> None

Point props["ref"].current at an id-backed Element when present.

detach_ref

detach_ref(props: PropsDict) -> None

Clear props["ref"].current when a ref prop is present.

apply_props

apply_props(node_id: int, old_props: PropsDict, new_props: PropsDict) -> None

Emit ops for prop diffs on a node, including events and styles.

Used by the patch path; both old and new props are static (already- resolved) values. For initial mount with potentially reactive prop values, use apply_initial_props.

Parameters:

Name	Type	Description	Default
node_id	int	The target node id.	required
old_props	PropsDict	Previously-applied prop dict.	required
new_props	PropsDict	Newly-resolved prop dict.	required

apply_initial_props

apply_initial_props(node_id: int, new_props: PropsDict) -> None

Emit ops for a fresh set of props on initial mount, wiring reactive bindings.

Callable prop values (excluding event handlers and ref) are treated as reactive bindings: each is wrapped in its own effect so that updates re-apply only that single prop, with no re-render of the surrounding component. Static values are applied once.

Parameters:

Name	Type	Description	Default
node_id	int	The target node id.	required
new_props	PropsDict	Initial prop dict.	required

What's in this module

props contains the prop-level diffing helpers used by the reconciler: attribute set/remove, class and style merging, event handler updates, and a few utilities for normalizing prop names (class_ to class, for_ to for, etc.).

You normally interact with props by passing keyword arguments to tag helpers in wybthon.html or to h. The helpers here document the semantics and edge cases.

Reserved prop names

Name	Purpose
children	Explicit children list (alternative to positional args).
key	Identity hint for keyed list reconciliation.
ref	A Ref populated when the underlying element is mounted.
class_ / className	Both map to the DOM class attribute.
for_ / html_for	Both map to the DOM for attribute.
on_*	Event handlers; see events.
style	A dict of CSS properties or a string.

See also

• reconciler: entry points for rendering and patching.
• events: event delegation details.
• Concepts: DOM Interop