Conceptos Fundamentales de Svelte

---

¿Qué es un componente en Svelte?

Un componente en Svelte es una unidad reutilizable de interfaz de usuario que combina HTML, CSS y JavaScript en un solo archivo con extensión .svelte. Cada componente encapsula su propia lógica, estructura y estilos, haciendo que el desarrollo sea más modular y mantenible.

Ejemplo básico de un componente:

<script>
let name = "Mundo";
</script>

<style>
h1 {
  color: teal;
}
</style>

<h1>Hola, {name}!</h1>
<button on:click={() => (name = "Svelte")}>Cambiar nombre</button>

En este ejemplo:

• HTML: Define la estructura.
• CSS: Estilos aplicados al componente.
• JavaScript: Lógica del componente.

¿Cómo está compuesto un componente en Svelte?

Ejemplo de estructura:

<script>
let count = 0;

function increment() {
  count += 1;
}
</script>

<style>
button {
  background-color: cornflowerblue;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
</style>

<p>Has hecho clic {count} veces.</p>
<button on:click={increment}>Incrementar</button>

Aquí puedes observar cómo se integran las tres secciones para crear un componente funcional.

Ciclo de vida de un componente en Svelte

Svelte proporciona funciones especiales para manejar el ciclo de vida de un componente. Estas funciones permiten ejecutar código en momentos específicos del ciclo de vida.

Ejemplo:

Este ejemplo en Svelte muestra cómo usar los ciclos de vida onMount y onDestroy. Al montar el componente, se inicia un temporizador que incrementa el contador cada segundo. Al destruir el componente, se limpia el temporizador para evitar errores o pérdidas de memoria.

<script>
// Importa los ciclos de vida de Svelte
import { onMount, onDestroy } from 'svelte';

let timer; // Variable para almacenar el temporizador
let count = 0; // Contador de tiempo

// Este bloque se ejecuta cuando el componente se monta
onMount(() => {
  console.log('Componente montado');
  // Inicia un temporizador que incrementa 'count' cada segundo
  timer = setInterval(() => {
    count += 1;
  }, 1000);
});

// Este bloque se ejecuta cuando el componente se destruye
onDestroy(() => {
  console.log('Componente destruido');
  // Limpia el temporizador para evitar errores
  clearInterval(timer);
});
</script>

<p>Tiempo transcurrido: {count} segundos</p>

Reactividad en Svelte

La reactividad es una característica clave de Svelte. Permite actualizar automáticamente la interfaz cuando cambian los valores de las variables.

Declaración reactiva con $:

El operador $: permite que un bloque de código se reactive automáticamente cuando cambian las dependencias utilizadas en él.

Ejemplo:

En este ejemplo, el operador $: recalcula automáticamente la variable sum cada vez que cambian las variables a o b. Al hacer clic en los botones, se incrementan a o b, lo que actualiza automáticamente la suma sin necesidad de intervención manual. Este enfoque facilita la reactividad en Svelte.

<script>
let a = 2;
let b = 3;

$: sum = a + b; // Se recalcula automáticamente cuando cambian `a` o `b`.
</script>

<p>a: {a}, b: {b}, suma: {sum}</p>
<button on:click={() => a++}>Incrementar a</button>
<button on:click={() => b++}>Incrementar b</button>

Reactividad avanzada en Svelte

$state

Puedes usar variables directamente para la reactividad, pero $state permite agrupar y observar cambios más complejos en un estado global.

$derived

Genera valores derivados de otros estados.

Ejemplo:

<script>
import { writable, derived } from 'svelte/store';

const count = writable(0);
const doubled = derived(count, $count => $count * 2);
</script>

<p>Valor: {$count}</p>
<p>Doble: {$doubled}</p>
<button on:click={() => count.update(n => n + 1)}>Incrementar</button>

$effect

Útil para ejecutar efectos secundarios basados en cambios de valores reactivos.

Ejemplo:

<script>
import { writable } from 'svelte/store';

const count = writable(0);

$: {
  if ($count === 5) {
    alert('¡Llegaste a 5!');
  }
}
</script>

<p>Contador: {$count}</p>
<button on:click={() => count.update(n => n + 1)}>Incrementar</button>

Con estas herramientas, Svelte hace que la reactividad sea simple y poderosa.