Bug [babel-plugin-jsx-dom-expressions?]: rendering updates from signals can error for children of a fragment

[andparsons]

Describe the bug

The bug appears to be related to how fragments are hydrated after ssr, and presents when updating a signal under certain conditions.

After a signal update causes a re-render of the jsx containing a call, if the call has:

• a fragment for a direct parent (which can only occur at the top level),
• has at least 1 sibling tag
• and has a text character on the same line as the call

the initial view of the call persists and instead of being replaced, the updated value is appended, sometimes to the line, sometimes to the end of the container.

Your Example Website or App

https://stackblitz.com/edit/solid-ssr-vite-4xaxyh

Steps to Reproduce the Bug or Issue

Given a counter starting at 10 of

<>
  ${count()} <strong>USD</strong>
</>

rendering $10 USD, an +1 update will render as $10 USD11, where it should be $11 USD

Two calls on the same line, like

<>
  ${count()} + ${count() * 0.2} <strong>USD</strong>
</>

can cause the app to crash.

Expected behavior

(Covered above)

Screenshots or Videos

No response

Platform

• OS: macOS 12.6
• Browser: Chrome 109.0.5414.87

Additional context

A reproduction without ssr/hydration does not show the bug https://stackblitz.com/edit/solidjs-template-ts47kx

[lxsmnsyc]

yeah seems like a bug, even if you wrap the SharedCounts with an element.

Edit:
Nvm, seems like a hydration-related issue. The client version did work.

[andparsons]

The appending effect of the bug behaves slightly differently in a different environment like astro as seen here: https://stackblitz.com/edit/github-cbhyay-f9k5yh

[ryansolid]

Thank you so much for the reproductions. They allowed me to test the fix in a number of scenarios and understand where the mismatches were happening. I'm still doing a few tests to make sure the generation is good but I believe I have a fix that works. The problem was for fragments we weren't splitting apart adjacent text nodes and it was throwing off hydration matching. I needed fragments for hydration to have comments to break apart the text nodes. Doing that everything seems to be working.