Feature request: Option to trim whitespace between tags

[trbrc]

Problem

Svelte's handling of whitespace in templates is supposed to be consistent with HTML. However, the way HTML handles whitespace makes styling of inline blocks notoriously difficult in some cases, with no satisfactory workaround. There are basically two types of workarounds, each with their own frustrating problems:

1. Either you change your styling so it removes the spaces. This is often requires complicated, unintuitive and fragile workarounds in your CSS. Most of the strategies I'm aware of can have unintended consequences in some situations.
2. Or you change the markup to remove all the spacing. This is possible, but now you are severely impacting the readability of your component to achieve a certain styling.

Strategy 2 is arguably even trickier in a Svelte template, where spaces may or may not appear inside other components or slots, or around {#if} or {#each} blocks. Blocks appear to already have some heuristics to avoid unnecessary spaces, but that also makes it harder to predict where spaces will need to be avoided or not.

I'm used to JSX, where whitespace is automatically trimmed, and you have to insert it manually with {" "} when you want it. While this can cause its own occasional oddities, it's always much easier to add spaces explicitly than to remove them, and it allows the formatting of a template to be optimised for readability.

Suggestion

It would be very helpful if there was a way to opt in to similar behaviour for a Svelte component. I think the natural way to do it would be by using <svelte:options>:

<svelte:options trimWhitespace={true} />

I don't understand the details of how whitespace is handled in the compiler, but I think the compiler would just need to remove any calls to space() from svelte/internal.

[stalkerg]

I suppose it's duplicate of #189

[neuronetio]

I think that {#each} and {#if} blocks should not add any empty text node too (because of performance).
If you have a lot of DOM nodes and in between each node there is a text node inserted (even empty) - it will drastically affect rendering speed (DOM nodes are really slow of course).

[neuronetio]

sometimes those text nodes are out of control https://svelte.dev/repl/902d4ccfcc5745d0b927b6db6be4f441?version=3

[neuronetio]

I've created an issue for empty text nodes here #3586

[stalkerg]

Ok, who can implement this proposal? Personal for me I want to add a feature when you can control space trimming per nodes, like <div :trim></div>. But global config for a component also need.