CheatSheet de svelte

Instalar Svelte

Para comenzar con Svelte, necesitas instalar el entorno inicial mediante npx:

npx degit sveltejs/template nombre-proyecto
cd nombre-proyecto
npm install

Esto crea un proyecto base y ejecuta un servidor de desarrollo.

Iniciar un servidor de desarrollo

Una vez instalado, puedes levantar un servidor de desarrollo para ver el proyecto en acción:

npm run dev

Crear un componente

Un componente en Svelte es un archivo .svelte que incluye HTML, CSS y JavaScript.

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

<h1>Hola {name}!</h1>

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

• <script>: Lógica de JavaScript
• <style>: Estilos CSS (scoped por defecto)
• HTML: El marcado que renderiza el componente.

Renderizado dinámico

Las variables en Svelte se renderizan dentro del HTML con llaves {}.

<h1>{name}</h1>

Pasar props a componentes

Los datos pueden ser pasados de un componente padre a uno hijo usando props.

Componente hijo:

<script>
  export let nombre;
</script>

<p>Hola, {nombre}!</p>

Componente padre:

<ComponenteHijo nombre="Svelte" />

Valores por defecto en props

<script>
  export let nombre = "Mundo";
</script>

<p>Hola, {nombre}!</p>

Variables reactivas

Las variables en Svelte son automáticamente reactivas, lo que significa que cualquier cambio en su valor provoca una re-renderización.

<script>
  let contador = 0;
</script>

<button on:click="{() => contador++}">
  Contador: {contador}
</button>

Asignación reactiva

Svelte permite crear declaraciones reactivas con el símbolo $:.

<script>
  let ancho = 100;
  $: area = ancho * ancho;
</script>

<p>El área es: {area}</p>

Reactividad de arrays y objetos

Svelte detecta cambios en propiedades específicas de objetos o arrays mediante la reasignación.

<script>
  let obj = { x: 10, y: 20 };

  function cambiarX() {
    obj.x = 50; // No es reactivo
    obj = { ...obj }; // Esto es reactivo
  }
</script>

Escuchar eventos

Los eventos pueden capturarse con la directiva on:.

<button on:click={incrementar}>
  Incrementar
</button>

Modificadores de eventos

Se pueden agregar modificadores a los eventos, como preventDefault o stopPropagation:

<form on:submit|preventDefault="{submitForm}">
  <!-- Formulario aquí -->
</form>

Event forwarding (reenvío de eventos)

Los componentes pueden reenviar eventos al componente padre:

<!-- ComponenteHijo.svelte -->
<button on:click>Click me</button>

<!-- ComponentePadre.svelte -->
<ComponenteHijo on:click={() => alert('Clicked!')} />

Two-way binding

Svelte permite el binding bidireccional de variables entre inputs y componentes.

<input bind:value={nombre} />
<p>{nombre}</p>

if Condicionales

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

{#if visible}
  <p>Este texto es visible</p>
{:else}
  <p>No es visible</p>
{/if}

Bucles

Los bucles en Svelte se gestionan con each:

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

<ul>
  {#each frutas as fruta}
    <li>{fruta}</li>
  {/each}
</ul>

CSS en componentes

Cada componente en Svelte puede tener sus propios estilos, que se aplican solo a ese componente (scope automático).

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

Estilos globales

Para aplicar estilos globales, se utiliza la palabra clave :global.

<style>
  :global(body) {
    font-family: Arial, sans-serif;
  }
</style>

Creación de una store

Las stores permiten compartir estado entre componentes. Se pueden crear stores usando el módulo writable de Svelte.

import { writable } from 'svelte/store';

export const contador = writable(0);

Uso de stores en componentes

Se puede suscribir una store a un componente usando el símbolo $:

<script>
  import { contador } from './store.js';
</script>

<button on:click="{() => $contador++}">
  Contador: {$contador}
</button>

Writable store

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

  let contador = writable(0);
</script>

<button on:click={() => contador.update(n => n + 1)}>
  Incrementar contador
</button>

<p>Valor del contador: {$contador}</p>

Readable store

Los stores de solo lectura (readable) son útiles para valores constantes o que cambian externamente.

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

  const tiempo = readable(new Date(), set => {
    const interval = setInterval(() => set(new Date()), 1000);
    return () => clearInterval(interval);
  });
</script>

<p>La hora es: {$tiempo}</p>

Svelte ofrece varias funciones para gestionar el ciclo de vida de un componente.

onMount

Se ejecuta cuando el componente es montado en el DOM.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('Componente montado');
  });
</script>

beforeUpdate

Se ejecuta antes de cada actualización.

<script>
  import { beforeUpdate } from 'svelte';

  beforeUpdate(() => {
    console.log('Antes de la actualización');
  });
</script>

afterUpdate

Se ejecuta después de cada actualización.

<script>
  import { afterUpdate } from 'svelte';

  afterUpdate(() => {
    console.log('Después de la actualización');
  });
</script>

onDestroy

Se ejecuta cuando el componente es destruido.

<script>
  import { onDestroy } from 'svelte';

  onDestroy(() => {
    console.log('Componente destruido');
  });
</script>

Transiciones de entrada y salida

Svelte tiene transiciones integradas para animar la entrada y salida de elementos.

<script>
  import { fade } from 'svelte/transition';
  let visible = true;
</script>

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

{#if visible}
  <p in:fade>Hola</p>
{/if}

Animaciones personalizadas

Puedes crear transiciones personalizadas para elementos.

<script>
  import { fly } from 'svelte/transition';
</script>

<p in:fly={{ x: 200, duration: 400 }}>Animado</p>

Animaciones

Para mover elementos en el DOM, Svelte tiene animaciones mediante el módulo animate.

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

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

La API de contexto permite pasar datos entre componentes sin usar props.

Establecer contexto

<script context="module">
  import { setContext } from 'svelte';
  setContext('clave', valor);
</script>

Obtener contexto

<script>
  import { getContext } from 'svelte';
  const valor = getContext('clave');
</script>