Svelte switch case

Switch case syntax for your Svelte components.

Demo · StackBlitz · NPM Package

⚡ Getting started

Step 1: Add the preprocessor to your Svelte project

# Install it:
npm i -D svelte-switch-case

// Then, in your svelte.config.js
import switchCase from 'svelte-switch-case';

const config = {
  preprocess: [switchCase()],
};

export default config;

Step 2: Start using it in your Svelte components

<!-- Component.svelte -->
<script>
  let animal = 'dog';
</script>

<section>
  {#switch animal}
    {:case "cat"}
      <p>meow</p>
    {:case "dog"}
      <p>woof</p>
    {:default}
      <p>oink?</p>
  {/switch}
</section>

🔍 How it works

svelte-switch-case transpiles the following code

{#switch animal}
  {:case "cat"}
    <p>meow</p>
  {:case "dog"}
    <p>woof</p>
  {:default}
    <p>oink?</p>
{/switch}

into if/else statements

<!-- Injected by svelte-switch-case -->
{#if animal === "cat"}
  <p>meow</p>
{:else if animal === "dog"}
  <p>woof</p>
{:else}
  <p>oink?</p>
{/if}

🙌 Contribute

Found a bug or just had a cool idea? Feel free to open an issue or submit a PR.