4 ms·
Give a quick glance to Svelte. Help me understand, how this syntax {#if expression}...{:else if expression}...{/if} can be seriously invented in our... more civ
by rmrfchik 3y ago
Give a quick glance to Svelte.
Help me understand, how this syntax
{#if expression}...{:else if expression}...{/if}
can be seriously invented in our... more civilized age?
- doctor_eval 3y agoHow would you do it?
- rmrfchik 3y agoI don't know should I stick to mustaches (it can be dictated by other reasons), but if I should: {#if expr} {#elseif expr} {#endif}
- doctor_eval 3y agoThese sigils seem to exist to make it easier to balance the expressions. I personally find {#if} … {/if} much more intuitive. {:else} is an unfortunate compromise necessitated by the fact that elseif is ugly in most imperative languages.
- willmartian 3y agoI much prefer keeping everything XML-ish: https://www.solidjs.com/docs/latest/api#switchmatch https://www.solidjs.com/docs/latest/api#switchmatch
- farazzz 3y agoIt’s not the most pretty syntax, but it’s wayyy better than React’s terrible (expression ? … : …) or (expression && …)
- MobiusHorizons 3y agoreact didn't invent that syntax. This is a standard piece of C like syntax that most (but not all) languages with curly braces share. JSX/TSX used in react don't make this choice for you, you can use any javascript syntax which can be used when passing a value (eg in a function invocation, or variable declaration). If you don't like it, you are perfectly free to declare a variable and set its value using a regular if / else block and use it directly from the template. My point is this is not a syntax decision that React made, but svelte's syntax was (as far as I can tell) a decision.
- farazzz 3y agoI mean, yeah, the ternary operator is part of JS syntax. But it WAS React’s choice to not include any alternative way to if/else add an element (there is an if/else but only for the entire component, not just for conditionally adding one element within a component). So indirectly this is React’s syntax decision.
- Capricorn2481 3y agoBecause React is JS and Svelte isn't
- farazzz 3y agoReact is JSX* Nothing preventing them from making an <If condition={…}>…<Else>… component
- MrJohz 3y agoAnd this is typically how conditionals work in SolidJS, which also uses JSX but adds extra core components to handle conditionals and iteration. In fairness, this is largely because they can better support the reactivity model that SolidJS uses, but it's a convenient side effect.
- leeman2016 3y agoThere is nothing holding anyone back from using (expression ? val1 : val2) in svelte though. So, we're not missing anything that JSX/react has got. The {#if} thingy is just a bonus which is welcome in my opinion.
- wirahx 3y agoyou're equating it to string interpolation. It isn't. It's a compiler directive which disappears when compiled, which is why it is expressed as a brace expression rather than a tag.