Skip to content

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

@andparsons

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions