fix: insert empty text nodes during hydration, where necessary #9729
Conversation
🦋 Changeset detectedLatest commit: 1159b70 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
We can add a non-visible space instead? The issue is that without anything, there is no actual text node for there to be a sibling. |
|
I tried non-visible spaces when we were trying to solve the related issue a while back, that doesn't work either. In the other case we fixed it by appending an empty text node when necessary — can we do that here? |
|
The PR was meant to fix #9695 btw. I tagged the wrong PR by accident. |
We can add a comment so we enforce a node being there, but then we'd have to somehow update it to a text node. However, that seems far more expensive and complicated to do. The alternative is that we don't render the space in SSR and on the client we have another operation call |
Rich-Harris
changed the title
| </script> | ||
|
|
||
| {undefined}<hr/> | ||
| <button onclick={send}>Send Event</button> | ||
| {undefined}<button onclick={() => a += 1}>{a}</button>{undefined}<button onclick={() => b += 1}>{b}</button> |
There was a problem hiding this comment.
Why did you change the test?
There was a problem hiding this comment.
because a) the indirectness (pushing to an array in a separate module) is weird, and hard to debug in a REPL compared to watching something change, and b) it only covers the case where the {undefined} is at the start of a fragment, rather than in the middle as well
#9722 fixed some stuff but broke other stuff. We shouldn't insert whitespace for empty expressions, as that will cause visible hydration mismatch flickers — we really need to try and find a different solution to whatever issue it was fixing (the PR references #9694 but that seems to be concerned with something else?)
Before submitting the PR, please make sure you do the following
feat:,fix:,chore:, ordocs:.Tests and linting
pnpm testand lint the project withpnpm lint