Sistema de templating de Svelte

Svelte, como otros frameworks frontend (por ejemplo Angular o VueJS), también tiene un sistema propio de templating para los componentes. El templating es la sintaxis que usa cada framework o lenguaje para poder tener cierta lógica dentro del HTML de los componentes, por ejemplo: condicionales, bucles, propiedades lógicas, aritméticas, etc.

Lo más básico es Pintar variables y usarlas en atributos en Svelte, es decir, declarar variables en la parte Javascript de los componentes para usarlas en el HTML de forma reactiva.

Condicionales

En Svelte también se pueden crear etiquetas HTML que se rendericen o no dependiendo de una variable o expresión booleana. En caso de que la expresión se resuelva a false el nodo del ni siquiera se añade al DOM.

Ejemplo básico:

<script>
  let isUserLogged = false;
</script>

{#if isUserLogged}
  <button>Login</button>
{/if}

Como ves la sintaxis es muy sencilla y legible (a mi personalmente no me convence demasiado, prefiero la de VueJS dentro de las propias etiquetas.

Este tipo de sintaxis en las vistas de Svelte funciona creando estas etiquetas, la de apertura con el símbolo # y la de cierre con /. Pero, como pasa a la hora de pintar variables, dentro de las llaves se puede poner instrucciones de Javascript que retornen el valor que necesitas, ejemplo:

<script>
  let users = [];
</script>

{#if users.length === 0}
  <p>No users</p>
{/if}

Condicionales con else y elseif

La sintaxis para el else es algo extraña:

<script>
  let users = [];
</script>

{#if !users.length}
  <p>No users</p>
{:else}
  <p>Users count: {users.length}</p>
{/if}

Me resulta extraño que cada etiqueta de Svelte empiece por un símbolo distinto #:/, pero es lo que hay.

También se puede hacer elseif, se hace usando la misma etiqueta que el else pero poniendo else if:

<script>
  let temperature = 20;
</script>

{#if temperature > 35}
  <p>Too hot!</p>
{:else if temperature < 0}
  <p>Too cold!</p>
{:else}
  <p>Just perfect!</p>
{/if}

Bucles each

Si tienes la necesidad de pintar varios elementos en el HTML iguales, por ejemplo para una lista, tabla o colección, puedes usar el each de Svelte para recorrer una variable o expresión que sea un array y por cada item pintar algo, ejemplo:

<script>
  let users = ["Jhon", "Richard"];
</script>

{#each users as user}
  <p>{user}</p>
{/each}

Es un poco extraño porque dentro del each primero se pone la variable a recorrer y luego el nombre de cada item, normalmente en los lenguajes de programación esto suele ser al revés.

Si necesitas el index del item que se está recorriendo lo puedes declarar así:

<script>
  let users = ["Jhon", "Richard"];
</script>

{#each users as user, index}
  <p>{index} - {user}</p>
{/each}

Incluso puedes hacer destructuring de cada item:

<script>
  let users = [
    {
      name: "Jhon",
      surname: "Doe"
    },
    {
      name: "Richard",
      surname: "Harris"
    }
  ]
</script>

{#each users as {name}, index}
  <p>{index} - {name}</p>
{/each}