Hey all!
Our team has started the transition from React to Purescript, and though we’re not too far along, we’re loving it so far. The biggest hurdle we’ve run into is creating container components that can be passed their child component(s). We’re struggling because the parent component has to know so much information about the type of the query algebra and slot for the child components. Here’s two examples of the kind of thing I’m talking about:
(1) A component that has an on/off toggle button (easy enough) and a child component that it is passed. If the button is toggled on, it displays the child component. If it is toggled off, it hides the child component.
(2) A component is passed an array of records that look something like this:
{ title :: String, childComponent :: ? }
The container component shows a tab bar along the top with each title (also easy enough). When that button is clicked on, it displays the corresponding child component underneath the tab bar. This one seems like it would be much harder than the first.
Unfortunately all of the examples on the main Halogen repo that involve parent/containers are situations where the container knows what it’s containing at compile time, so they weren’t too helpful here. How would more experienced Halogen-ers go about writing something like this? Take HTML instead of a full component, render the child components, and pass the HTML into the container instead? Create the slots outside of the container, and pass them in?
Thanks in advance!
- Jason