Guías Técnicas

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.

1Condicional 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

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

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

Ejemplo 2: Mostrar un mensaje si una variable es falsa

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

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

Ejemplo 3: Condicionales: if y else en Svelte

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

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

2Condicional each

La directivaeach se usa para iterar sobre listas o arrays.

Ejemplo 1: Iterar sobre un array de números

js 
<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

js 
<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

js 
<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

js 
<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

js 
<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

js 
<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

js 
<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

js 
<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

js 
<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

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

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

Ejemplo 2: Usar else con each

js 
<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

js 
<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:

js 
<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 escenario, 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.