Svelte 30: Capstone de Composición de Componentes — Un Widget de Acordeón
easy⏱ 5 mincoursesvelte
Estado compartido mediante context, no props
Accordion.svelte guarda openId como $state y expone { isOpen, toggle } mediante setContext. Cada AccordionItem llama a getContext para alcanzar ese mismo objeto compartido — son hermanos en el árbol de componentes, así que pasar esto por props significaría que Accordion reenvía manualmente callbacks a cada hijo. El context evita eso por completo.
<!-- Accordion.svelte -->
<script>
import { setContext } from 'svelte';
let { children } = $props();
let openId = $state(null);
setContext('accordion', {
isOpen: (id) => openId === id,
toggle: (id) => openId = openId === id ? null : id
});
</script>
<div class='accordion'>{@render children()}</div>
Componible por construcción
Nota que App.svelte nunca menciona openId, isOpen, ni toggle — simplemente anida etiquetas AccordionItem dentro de Accordion y le da a cada una un title y algo de markup. Toda la lógica de coordinación está encapsulada dentro de los dos archivos del widget, exactamente como una librería de componentes real.
Permite abrir múltiples paneles a la vez
Cambia openId de un solo valor a un Set de ids abiertos, y actualiza isOpen/toggle en Accordion.svelte en consecuencia, para que más de un ítem pueda permanecer expandido simultáneamente.
Repaso del módulo
Este capstone toca: componentes como archivos (21), snippets para markup reutilizable (22), children para proyección de contenido (23), y context para comunicación entre ramas del árbol (26), además de composición multi-archivo en todo momento. Las props de snippet nombradas (24), los componentes dinámicos (25), class:/style: (27), las acciones (28), y svelte:window (29) son las herramientas restantes en tu caja de herramientas de composición de Svelte 5 — recúrrelas de forma independiente según lo pida cada situación.