Creating an "group index provider" context
For context
I am developing a group component which places its children in a flex manner.
I want any child of the group (as well as nested ones) be able to access its previous and next sibling sizes in the group, but that seems impossible to do without wrapping each direct child of the group with a context provider.
Also the whole system must be reactive. That is, the children list may get changed or reordered, and the contexts must change accordingly and propagate the updates into the nested children as well.
Explanation
Each child can be any JSX or HTML element, but nested in that child may be a context consumer, which wants to access the index of the direct child of the group widget. So basically there is a context access which may be nested deeply in any of the group's children.
What I tried
The solution I tried was to wrap each child with its own context provider, and pass the index of that child to the provider. But it didn't work because mapping over children requires using the
children helper (or whatever else) for resolving the JSX elements, which effectively calls the component functions. If the context is asserted to be non-null in any of the nested children, the system simply breaks down, throwing an error.I tried using
runWithOwner, but it didn't help. After a bit of research, I have found that some people use a counter and a singular context provider to increment the index of each child, but I imagine the the order that the children are resolved in is not guaranteed to stay the same.
