extractPropsAndEvents separates a virtual DOM node’s component properties from its event handlers. It also keeps framework-only data out of component and DOM properties, avoiding duplicated extraction logic during mounting and patching. section 11.2.2 section 12.1.3
Listing 11.10 Extracting the props and events for a component (utils/props.js)
export function extractPropsAndEvents(vdom) {
const { on: events = {}, ...props } = vdom.props
return { props, events }
}
The core implementation uses destructuring: the on property becomes events, the remaining properties become props, and missing handlers produce an empty object. section 11.2.2
The utility has three small responsibilities:
- Extract the on property as event handlers, defaulting to an empty object. section 11.2.2
- Return the remaining properties separately for component construction or DOM attribute setting. section 11.2.2 section 12.2
- Delete key from the copied props object while leaving the virtual DOM node’s original props available to reconciliation. section 12.1.3
Keyed nodes without leaking key
A keyed list can use key to detect moved elements during reconciliation, while extractPropsAndEvents removes key before attributes reach a DOM element or component instance. Event handlers are attached separately. section 12.2 section 11.2.2
Listing 12.3 Removing the key from the props object (utils/props.js)
export function extractPropsAndEvents(vdom) {
const { on: events = {}, ...props } = vdom.props
delete props.key #1
return { props, events }
}
The extended implementation deletes props.key after the rest operation. This removes only the returned copy, preserving key on the virtual DOM node for node comparison. section 12.1.3
