Switch / Case blocks for templates

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: https://github.com/sveltejs/svelte/issues/530 - Feel free to close this and re-open the other issue.

[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

[antony]

Closing, but referring to this: https://github.com/sveltejs/svelte/issues/530#issuecomment-326818286

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)