The library did not appear to work as intended. I could only get it to work for a single slot and only if I was rendering 1 child in the slot content.
After some debugging I noticed two issues;
Slots share the same state, settings state on a second slot override the first slots content
It was always choosing children[0] when evaluating children/content
Since all slots shared the same state.content I decided to key the content by the slots name. I also noticed the onChange functions were being called even when the slot in question was not changing. This was due to onChange being an array of update functions and each update was executed when a SlotContent changed. So I applied the same idea to onChange, it is now an object, the key is the slots name and the value is the update function.
To address the issue of only being able to render a single child within SlotContent, I updated it to send all of it's children to apply. Then when slot renders the content it will determine if it should pass all the children, or just render the zero node (in the case of a string being the content).
A working demo with the updates I've made can be found here. Switch the imports for preact-slots to the released version to see the issues.
cj
commented
6 years ago
The library did not appear to work as intended. I could only get it to work for a single slot and only if I was rendering 1 child in the slot content.
After some debugging I noticed two issues;
Since all slots shared the same state.content I decided to key the content by the slots name. I also noticed the onChange functions were being called even when the slot in question was not changing. This was due to onChange being an array of update functions and each update was executed when a SlotContent changed. So I applied the same idea to onChange, it is now an object, the key is the slots name and the value is the update function.
To address the issue of only being able to render a single child within SlotContent, I updated it to send all of it's children to apply. Then when slot renders the content it will determine if it should pass all the children, or just render the zero node (in the case of a string being the content).
A working demo with the updates I've made can be found here. Switch the imports for preact-slots to the released version to see the issues.