https://github.com/l-portet/svelte-switch-case

Switch case syntax for Svelte ⚡️
https://github.com/l-portet/svelte-switch-case

preprocess svelte sveltejs sveltekit switch-case

Last synced: 29 days ago
JSON representation

Switch case syntax for Svelte ⚡️

• Host: GitHub
• URL: https://github.com/l-portet/svelte-switch-case
• Owner: l-portet
• License: mit
• Created: 2022-07-25T09:31:29.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-06-23T12:20:39.000Z (over 1 year ago)
• Last Synced: 2024-09-29T11:54:16.061Z (about 1 month ago)
• Topics: preprocess, svelte, sveltejs, sveltekit, switch-case
• Language: TypeScript
• Homepage: https://svelte-switch-case.netlify.app/
• Size: 857 KB
• Stars: 146
• Watchers: 6
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-svelte - svelte-switch-case - Switch case syntax for Svelte. (Integrations / Preprocessing)

README

        


  



Svelte switch case

Switch case syntax for your Svelte components.




  

  





  Demo · StackBlitz · NPM Package






## :zap: Getting started

**Step 1:** Add the preprocessor to your Svelte project

```bash

# Install it:

npm i -D svelte-switch-case

```

```javascript

// 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

```html

  let animal = 'dog';

  {#switch animal}

    {:case "cat"}

      
meow

    {:case "dog"}

      
woof

    {:default}

      
oink?

  {/switch}


```




## :mag: How it works

`svelte-switch-case` transpiles the following code

```html

{#switch animal}

  {:case "cat"}

    
meow

  {:case "dog"}

    
woof

  {:default}

    
oink?

{/switch}

```


into `if/else` statements

```html

{#if animal === "cat"}

  
meow

{:else if animal === "dog"}

  
woof

{:else}

  
oink?

{/if}

```





## :raised_hands: Contribute

Found a bug or just had a cool idea? Feel free to [open an issue](https://github.com/l-portet/svelte-switch-case/issues) or [submit a PR](https://github.com/l-portet/svelte-switch-case/pulls).