Wiring Tree
Structure
A Wiring Tree consists of a root node with wiring nodes beneath it.
{
children: {
todoList: {
findValue: 'todo-list',
serialize: (val, {todoStrings, combine}) => combine(...todoStrings),
children: {
todo: {
isMultiple: true,
findValue: 'todo',
serialize: (val, {checkBoxString}) => {
return `${checkBoxString}${val ? val.textContent : ''}$`
},
children: {
checkbox: {
findValue: 'checkbox',
serialize: val => (val.checked ? '☑️' : '◻️'),
},
},
},
},
},
otherComponent: {
...
}
},
}
The Root Node
The root node is the only node in the wiring tree that does not correspond to an actual dom node. It has two main roles within the tree.
1. Only it's direct children can be serialized
If an object needs to be serialized using
serialize
or toMatchSnapshot
make sure
that's its declared as a direct child of the root.
render
2. It allows new functionality to be returned from If you provide extend
to the root node,
everything returned from extend
will also be
returned from render
All of the following properties are invalid on a root node