Svelte

En el Radar compartido: Adopt (valoración de la edición aportada).

Cómo funciona

El compilador transforma componentes en código para actualizar el DOM. Svelte 5 hace explícita la reactividad mediante runes y facilita composición con snippets.

Ejemplo de uso

Un contador mínimo ilustra estado y actualización de la vista:

<script>
  let cantidad = $state(0);
</script>
<button onclick={() => cantidad += 1}>
  Cantidad: {cantidad}
</button>

Runes de Svelte 5

Rune	Uso
$state	Estado reactivo (también objetos y arrays profundos)
$derived	Valor calculado a partir de otros; se recalcula solo si cambian
$effect	Efecto secundario que se ejecuta cuando cambian sus dependencias
$props	Recibir props del componente
$bindable	Prop que admite enlace bidireccional (bind:)

Componente con props, estado derivado y snippets

<script lang="ts">
  type Cuota = { numero: number; fecha: string; valor: number; pagada: boolean };
  let { cuotas, fila }: { cuotas: Cuota[]; fila?: import('svelte').Snippet<[Cuota]> } = $props();

  let soloPendientes = $state(false);
  let visibles = $derived(soloPendientes ? cuotas.filter((c) => !c.pagada) : cuotas);
  let totalPendiente = $derived(cuotas.filter((c) => !c.pagada).reduce((s, c) => s + c.valor, 0));
</script>

<label><input type="checkbox" bind:checked={soloPendientes} /> Solo pendientes</label>
<p>Total pendiente: {totalPendiente.toLocaleString('es-CO')}</p>

<ul>
  {#each visibles as cuota (cuota.numero)}
    <li>
      {#if fila}{@render fila(cuota)}{:else}Cuota {cuota.numero}: {cuota.valor}{/if}
    </li>
  {/each}
</ul>

Los snippets sustituyen a los slots y permiten pasar fragmentos de marcado con parámetros.

SvelteKit en una página

src/routes/creditos/[id]/
├── +page.svelte        # interfaz
├── +page.server.ts     # load y acciones de formulario, solo en servidor
└── +error.svelte

// +page.server.ts
import { error, fail } from '@sveltejs/kit';

export const load = async ({ params, locals }) => {
  const credito = await locals.api.credito(params.id);
  if (!credito) error(404, 'Crédito no encontrado');
  return { credito };
};

export const actions = {
  pagar: async ({ request, params, locals }) => {
    const datos = await request.formData();
    const monto = Number(datos.get('monto'));
    if (!(monto > 0)) return fail(400, { monto, error: 'Monto inválido' });
    await locals.api.registrarPago(params.id, monto);
  },
};

Las acciones de formulario funcionan sin JavaScript y se mejoran con use:enhance. Los adapters permiten desplegar en Node, contenedores, plataformas serverless o sitios estáticos.

Por qué elegirlo

Ventaja	A tener en cuenta
Bundles pequeños y buen rendimiento	Ecosistema de componentes menor que el de React
Sintaxis cercana a HTML, curva corta	Menos personas con experiencia en el mercado
Reactividad explícita con runes	Migración de Svelte 4 a 5 en proyectos antiguos

Usa Vite por debajo y se prueba con Vitest y Testing Library (component testing).

Criterios de implementación

Evaluar librerías requeridas, experiencia del equipo y estrategia de renderizado. Mantener pruebas de componentes y verificar teclado, etiquetas y estados de error.