Could if/else and for/in statements be added to JSX?

[willfaught]

Show, Switch, and For seem like workarounds or shims rather than ideal solutions:

<Show when={!data.loading} fallback={<div>Loading...</div>}>
  <h1>Hi, I am {data().name}.</h1>
</Show>

<Show when={data.loading}>
  <div>Loading...</div>
  <Show when={data.error}>
    <div>Error: {data.error}</div>
  </Show>
</Show>

<Switch>
  <Match when={condition1}>
    <p>Outcome 1</p>
  </Match>
  <Match when={condition2}>
    <p>Outcome 2</p>
  </Match>
</Switch>

<For each={data()}>
  {(item, index) =>
    <p>{index}: {item}</p>
  }
</For>

Plus you have to import them:

import { Show } from "solid-js"
import { For } from "solid-js"
import { Switch, Match } from "solid-js"

It seems like it would be better to have some limited templating features:

{if !data.loading}
  <h1>Hi, I am {data().name}.</h1>
{else}
  <div>Loading...</div>
{end}

{if data.loading}
  <div>Loading...</div>
  {if data.error}
    <div>Error: {data.error}</div>
  {end}
{end}

{if condition1}
  <p>Outcome 1</p>
{else if condition2}
  <p>Outcome 2</p>
{end}

{for index, item in data()}
    <p>{index}: {item}</p>
}

These could be transformed into inline functions that are immediately invoked:

function() {
  var result
  if (!data.loading) {
    result = <h1>Hi, I am {data().name}.</h1>
  } else {
    result = <div>Loading...</div>
  }
  return result
}()

function() {
  var result
  if (data.loading) {
    result = <div>Loading...</div>
    if (data.error) {
      result += <div>Error: {data.error}</div> // Or however JSX values are concatenated
    }
  }
  return result
}

function() {
  var result
  if (condition1) {
    result = <p>Outcome 1</p>
  } else if (condition2) {
    result = <p>Outcome 2</p>
  }
  return result
}()

{function() {
  var result
  for (const index, item in data()) {
    result += <p>{index}: {item}</p> // Or however JSX values are concatenated
  }
  return result
}

Maybe that's way out of scope for this project, I dunno.

This seems like an obvious direction to take, so I'm guessing there's a reason why this hasn't been pursued in the past by this or other projects? Maybe it wouldn't work for some reason? Just curious.

[atk]

You can already use ternary statements in JSX blocks:

// Instead of
{if condition1}
  <p>Outcome 1</p>
{else if condition2}
  <p>Outcome 2</p>
{end}
// You can already use
{condition1
  ? <p>Outcome 1</p>
  :  condition2
  ? <p>Outcome 2</p>
  : <></>}

Loops are a bit more difficult, since to make them reactive, you'll need mapArray.