solidjs
Spreading children in SSR is rendered first before the parent
Describe the bug
Given the following code:
<a {...props} />
Solid generates the following SSR code:
ssrElement('a', {...props}, undefined, true)
which has a problem: spreading evaluates all getters, in which case since children is compiled into a getter, children is rendered earlier than the container, which causes hydration keys to be in incorrect order where the parent doesn't gets the last iteration of the hydration key instead of receiving the first iteration.
Example failing key sequence
Current value 0-0-0-0-0-0 X4 // DocumentHead
Current value 0-0-0-0-1 M3 // DocumentHtml
Current value 0-0-0-0-2-0 P3 // DocumentMain
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-1 provider
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-1 P4 // Page
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-4-0 ye // Link
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-5-0 ye
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-6-0 ye
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-7-0 ye
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-8-0 ye
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-9-0 ye
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-10-0 ye
Current value 0-0-0-0-2-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-11-0 ye
Current value 0-0-0-0-3-1 C2 // DocumentScript
Current value 0-0-0-0-3-2 C2
Current value 0-0-0-0-4 M3
Your Example Website or App
(Reproduced in a very complex way) https://discord.com/channels/722131463138705510/722167424186843267/1019971227810529340
Steps to Reproduce the Bug or Issue
(Repro with the code above)
Expected behavior
ssrElement should evaluate first before the children gets evaluated. I'm not sure of a faster way to do this without doing a mergeProps-like implementation (or something like the previous ssrSpread) but I am thinking of something like this:
ssrElement(element, [propsA, propsB, propsC], ...)
Correct key sequence
Current value 0-0-0-0-0 C2 // DocumentHtml
Current value 0-0-0-0-1-0 R // DocumentHead
Current value 0-0-0-0-2 C2
Current value 0-0-0-0-3-0 X3 // Document Main
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-1 provider
Current value 0-0-0-0-4-1 P3 // Page
Current value 0-0-0-0-4-2 P3
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-0 wrap
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-3-0 ye // Link
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-4-0 ye
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-5-0 ye
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-6-0 ye
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-7-0 ye
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-8-0 ye
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-9-0 ye
Current value 0-0-0-0-3-1-0-0-0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0-1-10-0 ye
Screenshots or Videos
No response
Platform
(Not applicable)
Additional context
No response
I believe this is fixed in babel-plugin-jsx-dom-expressions 0.34.9. You will need to blowout your package lock. I will bump version in next Solid release.
