|
| 1 | +- Start Date: 2021-4-29 |
| 2 | +- RFC PR: |
| 3 | +- Svelte Issue: |
| 4 | + |
| 5 | +# Switch Block |
| 6 | + |
| 7 | +## Summary |
| 8 | + |
| 9 | +> This feature is a switch statement but for declaring reactive UI simmilar to `{#if}`. |
| 10 | +> It will behave exactly the same as a switch statement in regular programming. |
| 11 | +
|
| 12 | +## Motivation |
| 13 | + |
| 14 | +> This could be useful for simple single page app that needs to switch between layouts, |
| 15 | +> like if you wanted a login/signup/logout/forgot password page, each page would only |
| 16 | +> have their own seperate elements, but not enough to warrant multiple svelte files. |
| 17 | +
|
| 18 | +> It would be easier to do simple layout changes where you need to modify the layout |
| 19 | +> based on dynamic data and you don't want to do a large amount of `{:else if}` |
| 20 | +> blocks. Plus it would better describe the behaviour of what it's doing. |
| 21 | +
|
| 22 | +> With switch statements you do not have to reference your varible multiple times |
| 23 | +> and possibly use more resources than required. That's the main benefit to |
| 24 | +> switch statements in programming, performance! |
| 25 | +
|
| 26 | +> My reasoning for adding this is mainly syntactic sugar (lots of else if blocks are ugly), |
| 27 | +> but the performance benefits of a switch statement are real. |
| 28 | +
|
| 29 | +## Detailed design |
| 30 | +``` |
| 31 | +{#switch *condition*} -- The default tags could be under the main switch statement, or it could be in a seperate tag as {:default} |
| 32 | + <Default Content> |
| 33 | +{:case *constant expression*} |
| 34 | + <Case specific content> |
| 35 | +{/switch} |
| 36 | +``` |
| 37 | + |
| 38 | +### Technical Background |
| 39 | + |
| 40 | +> There are the standard docs for many languages such as |
| 41 | +> c++ https://docs.microsoft.com/en-us/cpp/cpp/switch-statement-cpp?view=msvc-160 |
| 42 | +> JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch |
| 43 | +> Many languages I have seen just use the standard c syntax so there is no need to list more |
| 44 | +
|
| 45 | +> React just uses normal javascript switch statements and then returns different values. https://sebhastian.com/react-switch/ |
| 46 | +> There is a vue module which brings support for switch statements https://www.npmjs.com/package/v-switch-case |
| 47 | +
|
| 48 | +### Implementation |
| 49 | + |
| 50 | +> It behaves very simmilar to `{#if}`, `{:else if}`, and `{:else}`, but |
| 51 | +> the conditions are static and it's backed by the switch statement of normal javascript. |
| 52 | +> The `{:else}` block is now in the `{#switch}` block, and the `{#if}` and `{#else if}` |
| 53 | +> conditions now are located in `{:case}`. I came to this after I was making a page |
| 54 | +> for doing various account auth related things with login, logout, signup, and reset password |
| 55 | +> which could all be put in one svelte file and didn't need their own files but the switch |
| 56 | +> statement which I use regularly in javsacript doesn't exist. So I had to use `{#else if}` blocks |
| 57 | +> as a bulky, inefficient stand in for a switch statement. |
| 58 | +
|
| 59 | +## How we teach this |
| 60 | + |
| 61 | +> It would talk about the logic |
| 62 | +
|
| 63 | +> Would the acceptance of this proposal mean the Svelte guides must be |
| 64 | +re-organized or altered? Does it change how Svelte is taught to new users |
| 65 | +at any level? |
| 66 | + |
| 67 | +> How should this feature be introduced and taught to existing Svelte |
| 68 | +users? |
| 69 | + |
| 70 | +## Drawbacks |
| 71 | + |
| 72 | +> The only real drawback that I could see is a very minescule bundle size increase, |
| 73 | +> since this is only adding on a new conditional block and not modifying a core feature |
| 74 | +> it most likely wont affect any current projects. |
| 75 | +
|
| 76 | +> It may be confusing to some newer programmers to why you need switch statements when you |
| 77 | +> already have if statements. |
| 78 | +
|
| 79 | +## Alternatives |
| 80 | + |
| 81 | +> Just not do this because you can already do this with relative ease, but this will |
| 82 | +> bring slight performance improvements to apps that use it as well as cleaner syntax. |
| 83 | +
|
| 84 | +## Unresolved questions |
| 85 | + |
| 86 | +> Wether it uses `{:default}` or the default markup tags will just go below the `{#if}` statement. |
0 commit comments