Sveltee es un framework de interfaz que, en lugar de ejecutarse en el navegador, compila componentes escritos en HTML, CSS y JavaScript a código optimizado. Con Svelte 5, además de los componantes tradicionlaes, existen archivos de lógica reactiva que usan runas y pueden escribirse en JavaScript o TypeScript.

Componentes .svelte

Un archivo .svelte agrupa la estructura, el comportamiento y los estilos de un componente. El compilador lo transforma en un módulo JavaScript eficiente.

<!-- Archivo: App.svelte -->
<script>
  let contador = 0;

  function incrementar() {
    contador += 1;
  }
</script>

<button onclick={incrementar}>
  Clicks: {contador}
</button>

<style>
  button {
    font-size: 1.5rem;
  }
</style>

Módulos reactivos .svelte.js y .svelte.ts

Desde Svelte 5, los archivos con extensión .svelte.js o .svelte.ts permiten definir estado reactivo y lógica compartida fuera de un componente. El compilador de Svelte los procesa de forma especial para que las runas funcionen.

Por ejemplo, el siguiente módulo expone un contador reactivo que varios componentes pueden importar:

// archivo: contador.svelte.js
export function crearContador() {
  let valor = $state(0);

  function aumentar() {
    valor += 1;
  }

  function disminuir() {
    valor -= 1;
  }

  return {
    get valor() { return valor; },
    aumentar,
    disminuir
  };
}

La versión con tipos es idéntica en comportamiento, pero aprovecha TypeScript para el tipado:

// archivo: contador.svelte.ts
export function crearContador() {
  let valor = $state<number>(0);

  function aumentar(): void {
    valor += 1;
  }

  function disminuir(): void {
    valor -= 1;
  }

  return {
    get valor() { return valor; },
    aumentar,
    disminuir
  };
}

Uso en un componente

Cualquier componente puede importar el módulo reactivo. Como el estado se define con runas, los cambios se propagan automáticamente:

<!-- Archivo: Contador.svelte -->
<script>
  import { crearContador } from './contador.svelte.js';

  const conteo = crearContador();
</script>

<button onclick={conteo.disminuir}>−</button>
<span>{conteo.valor}</span>
<button onclick={conteo.aumentar}>+</button>

Herramientas recomendadas

Para crear un proyecto se puede usar SvelteKit, impulsado por Vite:

npx sv create mi-proyecto
cd mi-proyecto
npm install
npm run dev

También es posible utilizar Vite directamente con la opción svelte mediante npm create vite@latest. Para el soporte de TypeScript, Vite y el plugin de Svelte se encargan de la configuración necesaria.

Para editar el código, el equipo de Svelte mantiene una extensión oficial para VS Code. Además, el comando sv check permite detectar errores desde la terminal.