Passing data from route to layout in solid-start

[rich orchid]

I have a group of pages with one parent layout (ie /menu/lunch, /menu/dinner, with the layout under menu.tsx). The layout has a tab bar listing each of the pages under /menu. The color of this tab bar should change depending on the current route. Therefore I would like to be able to specify the color in the routeData of that route and read it from the layout but it appears this is not possible (and I can see why things would get confusing if this were the case). What is the best way to pass data from a route to its parent layout?

[umbral karma]

Most likely you want to use a <ContextProvider> that wraps the layout, and use the context in the route component to change i.e. the color in that context. https://www.solidjs.com/tutorial/stores_context?solved

You can also have a global signal exported that is read from the layout and set in the route https://www.solidjs.com/tutorial/stores_nocontext?solved

[rich orchid]

Ah okay, so would this still work during SSR as long as I set the signal in the component body (as opposed to on mount)

[umbral karma]

Yeah, I just tested it 🙂

[rich orchid]

Great! thank you!

[rich orchid]

Looks like this does not work when js is turned off. For example the html is delivered with the wrong color and then the color is changed on hydration

[umbral karma]

I tested it with js disabled? Mind sharing your code?

[rich orchid]

The code is private but here is a reproduction: https://github.com/nonphoto/solid-start-test

[umbral karma]

Cool, I can try and run it tomorrow, in the mean time here's what I would try without having access to debugging:

• set style on a normal div within the suspense part
• use a plain signal instead of a store

[rich orchid]

Ah okay I see why this might not work on Html I will try it inside of suspense. It would be great to be able to set a property directly on html though, sort of like how Meta and Title add things to the head no matter where they appear in the component tree