Directivas y Estructuras de Control en Svelte

---

Las directivas en Svelte son atributos especiales que se utilizan para modificar el comportamiento de los elementos HTML y enlazarlos con el estado de la aplicación. A continuación, te detallo las directivas más comunes en Svelte, junto con ejemplos.

1on: - Manejo de eventos

Se utiliza para manejar eventos DOM, como clics, entradas de teclado, etc.

Ejemplo 1:

<button on:click={handleClick}>Haz clic</button>

La directiva on:click asocia un evento de clic con el manejador handleClick.

Ejemplo 2:

<input type="text" on:input={handleInput} />

Aquí, la directiva on:input maneja el evento de entrada del <input> y ejecuta la función handleInput cada vez que el valor cambia.

2bind: - Vinculación de valores

Permite vincular un valor entre el componente y el DOM, manteniéndolos sincronizados. Cuando el valor del DOM cambia, también se actualiza el valor en el componente, y viceversa.

Ejemplo 1:

<input bind:value={name} />
<p>Hola, {name}</p>

Aquí, el valor del <input> se vincula con la variable name. Cualquier cambio en el input actualizará automáticamente la variable.

Ejemplo 2:

<input type="checkbox" bind:checked={isChecked} />
<p>{isChecked ? 'Marcado' : 'Desmarcado'}</p>

En este ejemplo, el estado del checkbox está vinculado a la variable isChecked, y se actualiza automáticamente al cambiar el estado del checkbox.

3use: - Uso de acciones

Permite usar una acción de Svelte, que son funciones reutilizables que se aplican a los elementos del DOM.

Ejemplo 1:

<script>
function focus(node) {
  node.focus();
}
</script>

<input use:focus />

La directiva use:focus hace que el <input> reciba el foco al cargarse el componente.

Ejemplo 2:

<script>
function logNode(node) {
  console.log(node);
}
</script>

<button use:logNode>Ver consola</button>

En este ejemplo, la acción logNode se aplica al botón y registra el nodo en la consola cuando se renderiza.

4class: - Condicionales para clases CSS

Permite aplicar clases CSS de forma condicional.

Ejemplo 1:

<button class:active={isActive}>Botón</button>

La clase active se agregará al botón solo cuando la variable isActive sea true.

Ejemplo 2:

<div style:color={isRed ? 'red' : 'blue'}>Texto dinámico</div>

Aquí, el color del texto será red si la variable isRed es true, y blue en caso contrario.

5if: - Condicionales

Permite mostrar u ocultar un bloque de código en función de una expresión booleana.

Ejemplo 1:

{#if isVisible}
<p>Este párrafo es visible.</p>
{/if}

El contenido entre {#if ...} y {/if} solo se renderiza si isVisible es true.

Ejemplo 2:

{#if hasError}
<p>Ha ocurrido un error.</p>
{:else}
<p>Todo está bien.</p>
{/if}

En este ejemplo, se muestra un mensaje de error si hasError es true, y un mensaje alternativo si no lo es.

6each: - Iteración

Permite iterar sobre una lista o un array y renderizar un bloque de código por cada elemento.

Ejemplo 1:

{#each items as item}
<p>{item}</p>
{/each}

Esto generará un <p> para cada elemento en el array items.

Ejemplo 2:

{#each users as user (user.id)}
<p>{user.name}</p>
{/each}

Aquí, se itera sobre la lista users, utilizando el user.id como clave única para mejorar el rendimiento.

7await: - Manejo de Promesas

Se usa para manejar el estado de una promesa (loading, error, etc.) de manera sencilla.

Ejemplo 1:

{#await fetchData() then data}
<p>{data}</p>
{:catch error}
<p>Error: {error}</p>
{/await}

Aquí, se maneja la promesa fetchData(), mostrando un mensaje de carga, los datos si se resuelve, o un error si ocurre algún fallo.

Ejemplo 2:

{#await loadUserData() then user}
<p>{user.name}</p>
{:catch error}
<p>Falló la carga del usuario: {error}</p>
{/await}

En este ejemplo, se carga la información del usuario y se muestra en la interfaz o se maneja un error si la promesa falla.

8key: - Optimización de listas

Se usa en bloques de iteración (each:) para mejorar el rendimiento de la renderización al identificar de manera única cada elemento de la lista.

Ejemplo 1:

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

La directiva key:item.id ayuda a que Svelte gestione de manera más eficiente la actualización de la lista cuando cambia.

Ejemplo 2:

{#each products as product (product.sku)}
<div>{product.name}</div>
{/each}

Al utilizar key:product.sku, se mejora el rendimiento al renderizar productos con un identificador único.

9let: - Declarar variables locales dentro de componentes o elementos.

La directiva let: permite crear variables locales que se pueden vincular dinámicamente a elementos o componentes. Ejemplo 1:

<script>
let myValue;
</script>

<input let:value={myValue} />
<p>Valor actual: {myValue}</p>

Ejemplo 2:

<button let:state="activo">Estado: {state}</button>

10style: - Vincular dinámicamente estilos en línea.

La directiva style: permite enlazar dinámicamente propiedades de estilo CSS a variables reactivas en Svelte. Ejemplo 1:

<script>
let color = 'red';
</script>

<div style:color={color}>Este texto es rojo</div>

Ejemplo 2:

<script>
let fontSize = '20px';
</script>

<p style:font-size={fontSize}>Texto con tamaño dinámico</p>

11animate: - Añadir animaciones entre estados.

La directiva animate: permite añadir animaciones al reordenar elementos en el DOM. Ideal para listas dinámicas o transiciones de estados visuales.

Ejemplo 1:

<script>
import { flip } from 'svelte/animate';
let items = [1, 2, 3];
</script>

<ul animate:flip>
{#each items as item}
  <li>{item}</li>
{/each}
</ul>

Ejemplo 2:

<script>
import { flip } from 'svelte/animate';
let show = true;
</script>

{#if show}
<div animate:flip>Animación Flip</div>
{/if}

<button on:click={() => (show = !show)}>Toggle</button>

12ref: - Obtener una referencia directa a un elemento del DOM.

Ejemplo 1:

<script>
let inputRef;

function focusInput() {
  inputRef.focus();
}
</script>

<input bind:this={inputRef} />
<button on:click={focusInput}>Enfocar Input</button>