Switch / Case blocks for templates

[mjadobson]

I've had a couple times where I've missed a switch equivalent for logic in templates. I have been using long if-elseif chains, but this can get ugly. It's mostly useful for when you want to display different components based on an enum. Haven't seen any other issues about this, but switch statements are commonly used for control flow and I was a bit suprised they were absent in Svelte.

{#switch type}
    {:case 'loading'}
        <Loading />
    {:case 'success'}
        <Content />
    {:case 'timeout'}
        <Timeout />
    {:case 'error'}
        <ErrorMessage />
    {:default}
        <div>{status}</div>
{/switch}

<!-- or -->

{#case type}
    {:when '..'}
    {:else}
{/case}

as opposed to:

{#if type === 'loading'}
        <Loading />
    {:elseif type === 'success'}
        <Content />
    {:elseif type === 'timeout'}
        <Timeout />
    {:elseif type === 'error'}
        <ErrorMessage />
    {:else}
        <div>{status}</div>
{/switch}

<!-- or alternatively -->

<svelte:component this={(()=>{
    switch (type) {
        case 'loading':
            return Loading;
        case 'success':
            return Content;
        case 'timeout':
            return Timeout;
        case 'error':
           return ErrorMessage;
    }
})()}/>

EDIT: Just found this is a dupe: #530 - Feel free to close this and re-open the other issue.

[antony]

Closing, but referring to this: #530 (comment)

I also don't think that having a switch statement really adds huge value, it simply increases the surface area, for no great benefit.

Sorry if this isn't the answer you were looking for.

FWIW your example doesn't help, do it thusly:

import Blah from 'Blah.svelte'
let component = Blah

<svelte:component this={component} />

then change component via whatever means you like (switch, etc)

[mossaiby]

Let us disagree with you on this. The same reasoning could be done in any language that offers a switch statement then! The statement exists for a reason, and helps people organize their code, write less cluttered code, etc. Isn't this the idea behind Svelte? @Rich-Harris

[Kapsonfire-DE]

this usecase can be easily done with an own component as wrapper

<MySwitchComponent cases={{loading: Loading, error: Error}} case={case} />

[dummdidumm]

There's an open RFC about it, discussion should happen there. Also, tagging people won't help get these arguments across. sveltejs/rfcs#49

[pngwn]

@Kapsonfire-DE I don't think that is helpful really, technically that is true of almost any Svelte Syntax.

Anyway there is and RFC about this now, please comment there.

[pngwn]

@dummdidumm too fast for me.

[mossaiby]

Thank you for quick answers! Didn't expect that ;)

IMO the functionality should be implemented in core Svelte, and not a component; there are a lot of other use cases as well. I did not know about the RFC; will check that right now. And I tagged Rich Harris (not this time ;)) because he had commented on the issue, and seemed to me that he only wanted a cleaner syntax (see also #530).