Guías Técnicas

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.

1Directiva on: - Manejo de eventos

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

Ejemplo 1:

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

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

Ejemplo 2:

html 
<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.

2Directiva bind: - 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:

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

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

Observa el siguiente caso, el estado del checkbox está vinculado a la variable isChecked, y se actualiza automáticamente al cambiar el estado del checkbox.

3Directiva use: - Uso de acciones

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

Ejemplo 1:

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

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

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

Aquí, la acción logNode se aplica al botón y registra el nodo en la consola cuando se renderiza.

4Directiva class: - Condicionales para clases CSS

Permite aplicar clases CSS de forma condicional.

Ejemplo 1:

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

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

Ejemplo 2:

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

5Directiva if: - Condicionales

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

Ejemplo 1:

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

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

Observa el siguiente caso, se muestra un mensaje de error si hasError es true, y un mensaje alternativo si no lo es.

6Directiva each: - Iteración

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

Ejemplo 1:

js 
<script>
let items = ["Item 1", "Item 2", "Item 3"];
</script>

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

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

Ejemplo 2:
Se usa destructuración para acceder directamente a id y name, haciendo el código más limpio.
La clave (id) optimiza la actualización de la lista. 🚀

js 
<script>  
let users = [  
  { id: 1, name: "Alice" },  
  { id: 2, name: "Bob" },  
  { id: 3, name: "Charlie" }  
];  
</script>  

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

Ejemplo 3: En este contexto, el código recorre la lista items y muestra cada name en un <p>. La clave item.id optimiza el renderizado.

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

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

7Directiva await: - Manejo de Promesas

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

Ejemplo 1:

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

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

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

8Directiva key: - 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:

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

js 
{#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.

9Directiva let: - 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:

js 
<script>
let myValue;
</script>

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

Ejemplo 2:

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

10Directiva style: - 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:

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

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

Ejemplo 2:

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

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

11Directiva animate: - 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: Este código utiliza la animación flip de Svelte para aplicar una transición suave cuando los elementos de la lista cambian de posición. La animación se aplica a la lista <ul> y a sus elementos <li>.

js 
<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: La animación flip de Svelte para aplicar una transición cuando el <div> se muestra o se oculta al cambiar el valor de show. El botón alterna el estado de show, activando o desactivando la animación.

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

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

Ejemplo 1: Aquí, se usa la referencia bind:this para asociar el elemento <input> a inputRef, permitiendo que la función focusInput lo enfoque cuando se hace clic en el botón. 🚀

js 
<script>
let inputRef;

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

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