-
-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: make Layout setting cumulative #86
Conversation
I ain't familiar with Solid, but I wonder: would this work? <Dynamic component={Layout1}>
<Dynamic component={Layout2}>
{props.children}
</Dynamic>
</Dynamic> Wouldn't the following do the trick then? let el = props.children
Layouts.forEach(Layout => {
const child = el
el = <Dynamic component={Layout}>{child}</Dynamic>
}) |
@brillout yes that's what I'm trying to accomplish, that solution unfortunately doesn't work. Just tried it, it will cause hydration errors. For instance: function Layout(props: ParentProps) {
const pageContext = usePageContext();
let el = props.children;
pageContext.config.Layout?.forEach((Layout: FlowComponent) => {
const child = el;
el = <Dynamic component={Layout}>{child}</Dynamic>;
})
return el;
} That would work in React, but not in SolidJS. That's technically also the reason why it's tricky because Solid usually doesn't like "early returns". Anything in Solid component's function body will only run once--Unless it's memoized or is a signal ( I tried a couple other solutions (this current PR using recursion), but no luck. This actually does maintain reactivity I think (based on the other SolidJS libraries using that pattern, I linked them above). But here's an approach that didn't cause hydration errors though:function Layout(props: ParentProps) {
const pageContext = usePageContext();
return (
<For each={pageContext.config.Layout?.reverse() ?? []}>
{(Layout: FlowComponent) => (
<Dynamic component={Layout}>{props.children}</Dynamic>
)}
</For>
);
} Weirdly, the client-side version likes this even if the component tree is ultimately looking like: <Layout1>
{props.children}
</Layout2>
<Layout2>
{props.children}
</Layout2> So, it actually got me thinking... Is
|
Notice there's no hydration errors, there are layouts | Even though I removed the on the getPageElement |
---|---|
Can you point me into the right direction for investigating this behavior?
To replicate this so far:
- On the frontend: https://github.com/Blankeos/solid-hop/tree/demo/nested-layouts
- vike-solid: https://github.com/Blankeos/vike-solid/tree/blankeos/dev
Reqs: Bun
, PNPM
- On vike-solid:
pnpm build
thenbun link
- On the frontend:
bun link vike-solid
thenbun dev
I see. It's beyond my Solid knowledge but maybe Joël has some insights. |
Do you know what code controls the client-side rendering under the hood (Like when the config is set to: I don't think it's I noticed there's something inherently weird with vike-solid's client-side rendering at the moment with cumulative layouts, I just can't figure out which part of the code is causing it. I did the same example on vike-react as well, it works as expected. Problem seems to only happen for vike-solid. ssr-false-vike-solid.mp4 |
In case you didn't see it already: https://github.com/vikejs/vike-solid/blob/main/vike-solid/renderer/onRenderClient.tsx. If you want to experiment starting from a clean slate: https://vike.dev/solid#custom-integration in particular the first two are minimal.
Since |
I've finally done it!!!! AHHHH!I don't know how I fixed it. Apparently it was The blockers I was facing were due to some:
Apparently the recursive solution worked (it kept reactivity, the others didn't but feel free to try as well--it may have just been my dev environment acting up again). vike-solid-nested-finally-works.mp4Should be ready for review now. Feel free to test it out here: |
Oh right, forgot. I might also have to add a "nested layouts" tab in the /examples folder similar to what you did on vike-react. (Let me know if you need that) |
Nice! 💯 Very much looking forward to have Nested Layouts also for Since I ain't that familiar with Solid it's probably we wait on Joël's review next week. |
e43ac4c
to
697a0b0
Compare
Just amended a change. Trimmed some unnecessary lines of code from where I referenced it. Noticed something weird when it's Wondering what could cause this though since it works perfectly on dev. But not on build. I made a repro here: https://github.com/blankeos/solid-vike-nested-layouts
|
I cannot reproduce with following steps:
I don't see any error in the browser dev console nor in the terminal. |
On dev it works fine. It's when it's built that's a problem. Have you tried
|
Indeed I can reproduce now. It seems to be a Vike bug, let me dig & fix. |
Actually, it seems to be caused by your changes. Instead of directly manipulating |
Interesting. Thanks for investigating! Although, I already create a copy called layoutStore. I'll see what I can do about it again later. Thanks for replying on Discord btw. |
If you inject a |
86906ac
to
b1ffd3f
Compare
I'm kinda stuck on this guys. Right now, it works perfectly on Currently developing on the |
Ryan Carniato had a quick look at it: https://x.com/RyanCarniato/status/1802764667754013109. |
BREAKING CHANGE: The `Layout` setting cannot be overriden anymore because it's now cumulative, see: - https://vike.dev/Layout#multiple-layouts - https://vike.dev/Layout#nested-layouts
Great news @brillout , I think I've finally done it! I've tested mostly always on Summary of how I got to the resolution:
|
Neat! 💯 Let's see what Joël thinks. (FYI Solid is quite responsive to bugs, so I wouldn't hesitate reporting bugs.) |
@Blankeos I was testing a few things on my side, and also came to the conclusion that I also managed to kinda fix the issue on my side also by trying to clone |
I removed the usage of |
With those last changes, I think we're good to merge! @Blankeos good for you too? |
Hi @magne4000! Thanks for the additional changes! I see, I remember using Were there no problems with using |
I don't know I didn't try. But mutating |
This PR implements cumulative Layouts for Vike + Solid similar to:
Context:
I'm using these as reference:
MultiProvider
- Wrapping context recursively: https://github.com/solidjs-community/solid-primitives/blob/8e6089531dea15947d9c4671d764fe861413f2e5/packages/context/src/index.ts#L102[Edited this since blockers are resolved]