`" "` (space) in text nodes replaced with `""` (null string) in each blocks ([email protected]+) about svelte HOT 13 CLOSED

I should have a fix for this ...PRing now

from svelte.

I don't think it's HMR i think is simply hydration...the reproduction works in the REPL too!

from svelte.

Ah, good to know! I originally couldn't reproduce it in the REPL, but didn't try again once I figured out what was happening.

from svelte.

@dummdidumm This is the intended behavior, isn't it? Isn't this just the new {#each} behavior in v5? https://svelte-5-preview.vercel.app/docs/breaking-changes#whitespace-handling-changed

from svelte.

This case doesn't seem to fall into the listed cases there:

• "Whitespace between nodes is collapsed to one whitespace"
  • These whitespace text nodes are not being collapsed into a single space, they are being set to null strings.
• "Whitespace at the start and end of a tag is removed completely"
  • These are whitespace text nodes, not at the beginning or start of a tag
    Certain exceptions apply such as keeping whitespace inside pre tags

And the behavior on full reload versus dynamic reload differ, which presumably is not intended in any case.

from svelte.

Btw i don't even think this is hydration...is probably the each loop thing with a bug

REPL

from svelte.

It does look like <svelte:options preserveWhitespace={true} /> solves the problem, so it's no longer blocking my use case.

However, I did find this behavior to be surprising and, more importantly, very difficult to pin down. Searching for related terms in GitHub Issues and more generally didn't yield any answers. Maybe that'll be improved once the Svelte 5 docs are more discoverable, though the docs don't actually indicate that this behavior should happen.

from svelte.

Crap, I take it back. <svelte:options preserveWhitespace={true} /> does NOT solve the problem for my case. If I've split the original string on any non-word character, I end up with new spaces inserted between every text node: REPL

For clarity, my use case is that I have a "spellcheck" component that splits a string up into labeled parts (words, template variables, other). It then loops through those parts and either renders them directly with {substring} or wraps them in some HTML. It looks something like this:

{#each parsed as part (part.start)}
	{#if part.isVariable}
		<code>{part.substr}</code>
	{:else if !part.isWord && part.substr === '\n'}
		<br />
	{:else if !part.isWord || part.valid}
		{part.substr}
	{:else if part.isWord}
		<span
			role="button"
			class="spelling-error"
			onclick={async (event) => {
				if (event.ctrlKey) await glossary.addTerm(part.substr);
			}}
		>
			{part.substr}
		</span>
	{/if}
{/each}

from svelte.

When preserveWhitespace mode is on, then the whitespace between the {#each words as word} and the {word} and the {/each} is now significant, so I'd say that behavior is expected.

If, after you've split the string, you've lost the information about which elements should have whitespace displayed between them, then there's not anything Svelte is going to be able to do. If you want to conditionally display whitespace, and you know what that condition is, then you could do something like {string + (condition ? ' ' : ''} or something like {string}{#if condition}{' '}{/if}.

from svelte.

The information is not lost. I'm still rendering the whitespace characters via {theWhitespaceChar}. They just become "" text nodes once rendered instead of " " text nodes.

You can see in this REPL that the split text includes entries that are just whitespace strings, and these are not being excluded by the loop. You can also see each entry in the text nodes of the dom, but that their data is set to "" instead of " ".

from svelte.

Gotcha, okay, yeah, it looks like the core of the bug, then is something like: {#each ['foo', ' ', 'bar'] as str}{str}{/each}

Apologies, I had missed that the original REPL had .split(/( )/) rather than .split(' ') / .split(/ /). That's actually a new bit of JS regex behavior to me.

from svelte.

No worries! .split(/( )/) definitely has unexpected behavior if you haven't used it before 🙂

from svelte.

And yep, your minimal case is exactly right: REPL

from svelte.