Shorthand if/each/...

[deviprsd]

I was thinking if there should exists a shorthand version for logic blocks, it would be an simple alternative to have for small blocks of code. Currently it looks like this

{#if x > 10}
    <span>x is greater than 10</span>
{/if}

{#each cats as cat, i}
    <li>
        <a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
            {i + 1}: {cat.name}
	</a>
    </li>
{/each}

What I had in mind was something that already exists in Angular or similar, like

<span #if={x > 10}>x is greater than 10</span>

<div #if:showPoster>
    <img {src} alt="Website Poster" />
</div>

<li #each={cats as cat, i}>
     <a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
          {i + 1}: {cat.name}
     </a>
</li>

<li #each:cats> // equivalent to {cats as val, idx}
     <a target="_blank" href="https://www.youtube.com/watch?v={val.id}">
          {idx + 1}: {val.name}
     </a>
</li>

How important is this feature to you?
It isn't very important, just a thought and basically starting a discussion. This probably adds another paradigm to Svelte hence increasing the complexity for the compiler, hence would love to hear others opinion

[Rich-Harris]

Thanks, but this does introduce extra complexity, both for the compiler and for people using Svelte. We aim to just have one way to do things wherever possible, otherwise it increases the amount of stuff that people have to learn, and makes the documentation more unwieldy

[avimar]

Hmm, one year later. I'm coming from Riotjs where we had this if={var} functionality without any extra #. Also each, but I'm not as bothered by that.
In the example posted,

{#if showPoster}
    <img {src} alt="Website Poster" />
{/if}

becomes simply:

<img if={showPoster} {src} alt="Website Poster" />

Maybe I'm just "doing it wrong" but e.g. modifying the submit button seems overly verbose:

<button class="btn btn-primary" on:click={update(order)} disabled={loading}>
	{#if loading} <Spinner /> {/if}
	Update Data
	</button>

Upon revisiting, especially with auto-completion on vscode s-if-b <tab> from fivethree.vscode-svelte-snippets or some other package, I guess it's not that bad.

Still, the extreme shorthand for if is a convenience that I quite liked.

(the each syntax could be a bit confusing, I admit.)

[UltraCakeBakery]

I would like to get this issue re-opened @Rich-Harris ."

We aim to just have one way to do things wherever possible, otherwise it increases the amount of stuff that people have to learn, and makes the documentation more unwieldy

I get this point of view, but due to the popularity of other languages I almost want to make the point that it doesn't increase the amount of stuff that people have to learn. Most people who start using Svelte come from Angular, React or Vue anyways.

In the case that they are completely new to front-end development; Why not consider this syntactic sugar? It should literally function the same as if the logic block was wrapping around the element it was added on. This would be the perfect opportunity for people to get started using 'eslint' where using this kind of syntax could throw a warning if desired.

The extra added complexity to the compiler, due to the context and existence of the current logic blocks, I assume isn't "that" much as it has to go over all the element attributes anyways and in that case already knows what element is the target of the shorthand logic blocks.

I want this to be added not because other popular frameworks do it, but because it is easier to read, in some cases more maintainable and generally speaking easier to the eyes when you also have other attributes and event handlers on the same element.

// How we do logic blocks now
{ #if true === true }
    <div class="some-wrapper-element"></div>
{ #else }
    <div class="some-wrapper-element"></div>
{ /if }


// How we do logic blocks now after the code sections are collapsed in the editor
// (now we don't see what the logic block hides or shows)
{ #if true === true }..
{ #else }..
{ /if }

// After this proposal: 
<div class="some-wrapper-element" #if="{ true === true }"></div>
<div class="some-wrapper-element" #else></div>

// After this proposal after the code sections are collapsed in the editor
<div class="some-wrapper-element" #if={ true === true }>..
<div class="some-wrapper-element" #else>...

Is there something else that I'm missing here?

[hannah23280]

I would like to get this issue re-opened @Rich-Harris ."

We aim to just have one way to do things wherever possible, otherwise it increases the amount of stuff that people have to learn, and makes the documentation more unwieldy

I get this point of view, but due to the popularity of other languages I almost want to make the point that it doesn't increase the amount of stuff that people have to learn. Most people who start using Svelte come from Angular, React or Vue anyways.

In the case that they are completely new to front-end development; Why not consider this syntactic sugar? It should literally function the same as if the logic block was wrapping around the element it was added on. This would be the perfect opportunity for people to get started using 'eslint' where using this kind of syntax could throw a warning if desired.

The extra added complexity to the compiler, due to the context and existence of the current logic blocks, I assume isn't "that" much as it has to go over all the element attributes anyways and in that case already knows what element is the target of the shorthand logic blocks.

I want this to be added not because other popular frameworks do it, but because it is easier to read, in some cases more maintainable and generally speaking easier to the eyes when you also have other attributes and event handlers on the same element.

// How we do logic blocks now
{ #if true === true }
    <div class="some-wrapper-element"></div>
{ #else }
    <div class="some-wrapper-element"></div>
{ /if }


// How we do logic blocks now after the code sections are collapsed in the editor
// (now we don't see what the logic block hides or shows)
{ #if true === true }..
{ #else }..
{ /if }

// After this proposal: 
<div class="some-wrapper-element" #if="{ true === true }"></div>
<div class="some-wrapper-element" #else></div>

// After this proposal after the code sections are collapsed in the editor
<div class="some-wrapper-element" #if="{ true === true }">..
<div class="some-wrapper-element" #else>...

Is there something else that I'm missing here?

totally agree. Pls do reopen this case.

[fyyyyy]

This syntax is my least favorite part of svelte, I would even create a wrapper component so i dont have to look at it

<s if={true}>
  <div.../>
</s>