Props

wybthon.props

props

DOM property application and diffing for element VNodes.

Translates VNode props into DOM attribute, style, and event mutations, 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.

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	Assign el to props["ref"].current when a ref prop is present.
detach_ref	Clear props["ref"].current when a ref prop is present.
apply_props	Apply prop diffs to a concrete DOM element, including events and styles.
apply_initial_props	Apply 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, el: Element) -> None

Assign el to props["ref"].current when a ref prop is present.

detach_ref

detach_ref(props: PropsDict) -> None

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

apply_props

apply_props(el: Element, old_props: PropsDict, new_props: PropsDict) -> None

Apply prop diffs to a concrete DOM element, 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
el	Element	The target DOM element wrapper.	required
old_props	PropsDict	Previously-applied prop dict.	required
new_props	PropsDict	Newly-resolved prop dict.	required

apply_initial_props

apply_initial_props(el: Element, new_props: PropsDict, owner_vnode: Optional[Any] = None) -> None

Apply 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
el	Element	The target DOM element wrapper.	required
new_props	PropsDict	Initial prop dict.	required
owner_vnode	Optional[Any]	Currently unused. Accepted for forward compatibility with reconciler bookkeeping.	None

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

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