Svelte 38: Capstone del Módulo D: Efectos, Timing y Pulido
easy⏱ 5 mincoursesvelte
Cada toast maneja su propio temporizador con $effect
Extraer ToastItem a su propio componente le da a cada toast un $effect independiente: al montarse llama a setTimeout(dismiss, duration), y la función que ese $effect devuelve se ejecuta como limpieza — ya sea cuando el componente se destruye antes de tiempo (cierre manual) o, en principio, si sus dependencias cambiaran. Esa limpieza devuelta es lo que hace que clearTimeout realmente se dispare, en vez de dejar un temporizador colgado para un toast que ya no existe.
<script>
let { duration, onDismiss } = $props();
$effect(() => {
const timer = setTimeout(onDismiss, duration);
return () => clearTimeout(timer);
});
</script>
clickOutside es solo otra acción con destroy()
El use:clickOutside={() => composerOpen = false} del panel compositor adjunta un listener de clic en document (en fase de captura) que verifica node.contains(event.target), y su destroy() elimina ese listener en el momento en que el panel mismo se elimina — así ningún listener global sobrevive después de que el panel se cierra, sin importar si se cerró por un clic afuera o por cualquier otro camino.
Ensamblá el estudio de toasts
Conectá los botones de disparo rápido, el compositor (transition + clickOutside) y la pila de ToastItem (transition + $effect que se auto-limpia) en un solo widget funcional.
Repaso del Módulo D
Ya cubriste el set completo de herramientas para formularios del mundo real y pulido: todos los bindings nativos (checkbox, grupo de radios, select, textarea) más props $bindable() para tus propios componentes, transiciones incluidas divididas en in:/out:, funciones de transición escritas a mano combinadas con svelte/easing, animate:flip para reordenar listas, motion basado en física con spring, y acciones personalizadas con ciclo de vida completo mediante update()/destroy() — todo lo que este sistema de toasts usa a la vez.