@all I try to describe this issue in the following. Please give feedback to improve it.
==
This issue deals with the question how to create dynamic list components.
A dynamic list component is a component that consists of a dynamic number of child components (of same kind) in a specific order.
List of child components is dynamic and may change:
- create/add (new) child
- remove child
- change order of children
- change of child state may cause change of list component state
Components exchange data (state, events, actions) via streams (sources and sinks). Those streams have to be connected appropriately. Communication appears between:
child -> parentparent -> childparent -> childrenchild -> parent -> grandparentgrandparent -> parent -> childchild -> child (siblings)
or in short:
grandparent <-> parent <-> child(ren)
- identify/distinguish children
- share state between parent and children
- circular dependency (
parent -> child -> parent) - connecting dynamic number of sources and sinks
- forward child sinks (side effects) to grandparent
TodoMVC is a popular example of this use case.
- text field to add new child to list
- show children
- all
- only active
- only completed
- show count of active children
- show count of completed children
- clear completed children
- delete child
- edit child task description
- change active state of all shown children
Note: You might count other elements (input field at the top, label and buttons at the bottom) among parent. However, parent can also be a plain list and its grandparent adds other elements (to control it). I leave this design decision open. The screenshot shows what belongs at least to parent (list component).
- create/add (new) child
- show filtered children (active/completed)
- delete child
- clear completed children (delete children based on their active state)
- edit child task description
- change of child's active state might causes change of shown children (if list is filtered) and might lead to a state change of parent
- change active state of all shown children
Note: change order of children is not a feature of common TodoMVC, but an obvious example would be a button to sort items.
Components exchange data (state, events, actions) via streams (sources and sinks). Those streams have to be connected appropriately. Communication appears between:
child -> parent- child tells parent to remove it (child)
parent -> child- change active state
child -> parent -> grandparent- in a bottom-up approach you might expose child/parent state to grandparent (for example (to calculate) count of active/completed children)
grandparent -> parent -> child- change active state of all shown children is triggered by parent or grandparent (depends on design decision, see screenshot note above)
No child -> child (siblings) communication in this example.
- identify/distinguish children
- delete child: which child component should be deleted?
- edit child: which child component should be edited?
- change active state of child: which child?
- share state between parent and children
- parent filters children based on their state (active/completed)
- parent deletes children based on their state (completed)
- circular dependency (
parent -> child -> parent)- parent creates children and needs a stream that indicates when to delete a child, but child sink (delete child) is part of this stream
- connecting dynamic number of sources and sinks
- how do we get DOM/vtree of children
- forward child sinks (side effects) to grandparent
- in a bottom-up approach, you can consider combination of children's DOM sources as parent DOM source (that is passed to the grandparent) to be an example
- if child components would have other side effects (for example HTTP requests) then those child sinks have to be combined in a similar way