Hacker News Reader

Comment by rmrfchik | Hacker News Reader

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?

View on HN

It’s not the most pretty syntax, but it’s wayyy better than React’s terrible (expression ? … : …) or (expression && …)

react 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.

I 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.

Because React is JS and Svelte isn't

React is JSX*

Nothing preventing them from making an <If condition={…}>…<Else>… component

And 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.

There 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.

you'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.

How would you do it?

I don't know should I stick to mustaches (it can be dictated by other reasons), but if I should: {#if expr} {#elseif expr} {#endif}

These 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.

I much prefer keeping everything XML-ish:

https://www.solidjs.com/docs/latest/api#switchmatch

Reply on news.ycombinator.com