Switch case syntax for your Svelte components.
Demo · StackBlitz · NPM Package
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>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}Found a bug or just had a cool idea? Feel free to open an issue or submit a PR.