if-statementsvelte

Svelte adds spaces when I start inline conditional on a new line. Any way to prevent this?

I have a Svelte component with logic that's structured like this. See in playground here.

<script>
    let a = true
    let b = false
</script>

<p>Hover over the asterisk at the end of this sentence to check boolean statuses.{#if a}
        <span title="a is true">*</span>
    {:else if b}
        <span title="b is true">*</span>
    {/if}
</p>

For code readability, I'd want to put the {#if a} on a new line. If I do this, Svelte adds a space before the asterisk in the rendered component. I don't want this.

Any way to override this behavior?

Solution

  • There is no way to override this in Svelte.

    You could employ various workarounds to improve the situation, e.g. bring the {#if} further forward by adding a line break before the last word "statuses" or add an HTML comment in-between:

    <p>Hover [...] statuses.<!--
-->{#if a}

    You can also use CSS, like setting the containing element to display: flex which eliminates white-space between flex items which allows you to put {#if} on a new line.