Estructuras de Control en Svelte 5

Las estructuras de control en Svelte son herramientas que permiten manejar el flujo lógico dentro de los componentes, como mostrar u ocultar contenido, iterar sobre listas o manejar casos específicos dependiendo de ciertas condiciones. Estas estructuras son fundamentales para crear interfaces dinámicas y reactivas.

1Condicionales `if`

La directiva if permite mostrar u ocultar bloques de contenido dependiendo de una condición.

Ejemplo 1: Mostrar un mensaje si una variable es verdadera

<script>
let isVisible = true;
</script>

{#if isVisible}
<p>Este mensaje es visible</p>
{/if}

Ejemplo 2: Mostrar un mensaje si una variable es falsa

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

{#if !isVisible}
<p>Este mensaje está oculto</p>
{/if}

Ejemplo 3: Condicionales: if y else en Svelte

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

{#if isLoggedIn}
<p>Bienvenido, usuario.</p>
{:else}
<p>Por favor, inicia sesión.</p>
{/if}

2Condicionales `each`

La directiva each se usa para iterar sobre listas o arrays.

Ejemplo 1: Iterar sobre un array de números

<script>
let numbers = [1, 2, 3, 4, 5];
</script>

<ul>
{#each numbers as number}
  <li>{number}</li>
{/each}
</ul>

Ejemplo 2: Iterar sobre un array de objetos

<script>
let users = [
  { name: 'Juan', age: 25 },
  { name: 'Ana', age: 30 },
  { name: 'Carlos', age: 28 }
];
</script>

<ul>
{#each users as user}
  <li>{user.name} - {user.age} años</li>
{/each}
</ul>

Ejemplo 3: Iteración con index

<script>
let fruits = ['Manzana', 'Banana', 'Cereza'];
</script>

<ul>
{#each fruits as fruit, index}
  <li>{index + 1}. {fruit}</li>
{/each}
</ul>

3Estructura `await`

La directiva await se usa para manejar promesas y mostrar contenido mientras se espera una respuesta.

Ejemplo 1: Esperar una promesa y mostrar un mensaje

<script>
let promise = new Promise((resolve) => setTimeout(() => resolve('¡Datos cargados!'), 2000));
</script>

{#await promise}
<p>Cargando...</p>
{:then result}
<p>{result}</p>
{/await}

Ejemplo 2: Manejar error en una promesa

<script>
let promise = new Promise((_, reject) => setTimeout(() => reject('Error al cargar datos'), 2000));
</script>

{#await promise}
<p>Cargando...</p>
{:then result}
<p>{result}</p>
{:catch error}
<p>Error: {error}</p>
{/await}

Ejemplo 3: Múltiples promesas

<script>
let promise1 = new Promise((resolve) => setTimeout(() => resolve('Primer dato cargado'), 1000));
let promise2 = new Promise((resolve) => setTimeout(() => resolve('Segundo dato cargado'), 1500));
</script>

{#await promise1}
<p>Cargando primer dato...</p>
{:then result1}
<p>{result1}</p>
{#await promise2}
  <p>Cargando segundo dato...</p>
{:then result2}
  <p>{result2}</p>
{/await}
{/await}

4each con key

La directiva each también permite usar una clave para cada elemento, optimizando la reactividad.

Ejemplo 1: Iterar con key en una lista de objetos

<script>
let items = [{ id: 1, name: 'Manzana' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Cereza' }];
</script>

<ul>
{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}
</ul>

Ejemplo 2: Usar key para optimizar la actualización de la lista

<script>
let colors = ['Rojo', 'Verde', 'Azul'];
</script>

<ul>
{#each colors as color (color)}
  <li>{color}</li>
{/each}
</ul>

Ejemplo 3: Usar key para un array de objetos con ID único

<script>
let products = [
  { id: 1, name: 'Producto 1' },
  { id: 2, name: 'Producto 2' },
  { id: 3, name: 'Producto 3' }
];
</script>

<ul>
{#each products as product (product.id)}
  <li>{product.name}</li>
{/each}
</ul>

5Bloques if, each y await con else

También puedes usar la directiva else para mostrar contenido alternativo.

Ejemplo 1: Usar else con if

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

{#if isLoggedIn}
<p>Bienvenido</p>
{:else}
<p>Inicia sesión</p>
{/if}

Ejemplo 2: Usar else con each

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

{#each fruits as fruit}
<li>{fruit}</li>
{:else}
<p>No hay frutas disponibles</p>
{/each}

Ejemplo 3: Usar else con await

<script>
let promise = new Promise((resolve) => setTimeout(() => resolve('¡Datos listos!'), 2000));
</script>

{#await promise}
<p>Cargando...</p>
{:then result}
<p>{result}</p>
{:else}
<p>Hubo un problema al cargar los datos</p>
{/await}

Estructuras de Control (`if`, `else`, `each`)

Las estructuras de control en Svelte, como if, else y each, nos permiten estructurar el flujo de la interfaz en función de las condiciones o la iteración de elementos.

Uso de `if`, `else` y `each`

Ejemplo Combinado:

<script>
let user = { name: 'Juan', isLoggedIn: true };
let items = ['Pizza', 'Hamburguesa', 'Pasta'];
</script>

{#if user.isLoggedIn}
<h2>Bienvenido, {user.name}!</h2>
<p>Estos son tus productos favoritos:</p>
<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>
{:else}
<p>Por favor, inicia sesión para ver tus productos favoritos.</p>
{/if}

En este ejemplo, si el usuario está logueado, se muestra su nombre junto con una lista de productos favoritos. Si no está logueado, se muestra un mensaje solicitando el inicio de sesión.

Resumen

Las estructuras de control en Svelte son una herramienta poderosa para gestionar el flujo de tu aplicación, haciendo el código más limpio y reactivo.

Condicionales (if, else): Permiten mostrar o ocultar elementos basados en una condición.
Bucles (each): Iteran sobre arrays u objetos y generan bloques de código dinámicamente.
Bloques await: Permiten manejar promesas de manera eficiente, mostrando contenido mientras se espera una resolución o capturando errores.

Estructuras de Control en Svelte 5

1Condicionales if

2Condicionales each

3Estructura await