a renderless vue component that handles recursion logic
npm install vue-recursionThis is a renderless component that handles the recursion logic and expects the render template as its children.
``cmd`
npm install vue-recursion
To use the component, import it and pass as the prop node the root node.
`vue
`
The most basic recursion example in web are nested list. This is a way of displaying them using the Recursion Component.
`vue`
`html`
As shown, the component receives ~~the data as a tree structure~~ any Record and the rendering template as a child (this case is ), then ~~exposes the children recursive elements in the form of the component v-slot~~ you can use any node attribuite as children to iterate.
~~In the previous example, the renders the child elements of each iteration of the recursion as fragments.~~
~~However, in order to allow more customization in the way a component is rendered, the component also exposes the components as an iterable array. This allows the component to have a root-node element that can later be used to be animated using the Transition Group built-in component~~.
In case a dedicated wrapper is desired around the next rendered iteration, the can be rendered as a nested child inside the iteration
`vue`
Of course, the Recursion component allows the use of custom components as children.
`vue
`vue`
Now, something very important here is the key property in the data objects when using non primitive values as items for the tree.
This component removes the operations down interally in exchange of a more flexible aproach. There'd cases where the component may render childs from an attribuite named sections, children, etc. or may have a more complex schema. For this cases, the previous implementation was not usable, since i'd require an extra parsing step.
Now, the component only exposes the v-slot as`ts`
type t_slotprops
data : T,
slot : unknown,
depth : number,
index : number,
chain : number[],
};
| Property | Type | description |
|---|---|---|
| data | T | this is the node itself, at depth 0 (the root node) is the same value passed as node prop |render function
| slot | unknown | this is the next-recursion iteration's , pass it as the is prop to |depth
| depth | number | The node's depth. The root node's is 0 |index
| index | number | The node's index. The root node's is 0, this is handled manually by the template-defined render logic |chain
| chain | Array is [], this is handled manually by the component |
This component uses vue's generics to infer the node's type. It may not always work tho.
It is not required, but heavily recommended to have a key property of type propertyKey to be used as key prop for the iteration of node's children.
this new aproach is more flexible, which means it is easier to make mistakes; therefore, some suggestions you could use are:
- The inner slot of the is the template used in each iterationArray
- You can use any property as an iterable for the next recursion level, but it is best if it is an and has an _array-suggestive name_ such as _sections_, _children_, _items_.
- The outer wrapper around the in important too. Remember that the prop passed to is the root of the tree; however, in most cases, the root shares similar styling to the rest of the nodes which means that, if its a , it requires an outer ()
- ~~There's no longer a chain property on slot props, this property caused some rerenders that affected performance. It may be added back in the future if said performance issues get fixed~~chain
- the property is back; use with cautioncjs
- Exports are now and esm rather than umd
- This package is now part of a monorepo of renderless components zcomps-monorepo. However, this should not represent any change for the user
- Also, we changed into in the README.md`. It look better, doesnt' it?