Svelte: Reenvío de Eventos y Patrones Avanzados

Imagina el juego del teléfono roto. Una persona susurra un mensaje, se va pasando de una a otra, y al final el destinatario decide qué hacer con él. Así funciona el reenvío de eventos en Svelte: un componente hijo escucha algo como un click, pero en lugar de resolverlo por su cuenta, pasa el micrófono al padre para que este decida la acción.

Esto es especialmente útil cuando creas componentes reutilizables. Tal vez deseas un botón con estilo y marcado extra, pero no quieres que ese componente decida qué ocurre al pulsarlo. Esa decisión corresponde al padre.

Paso 1 Botón básico. La idea es sencilla. El botón real es un elemento HTML y recibe un controlador onclick que el padre le entrega como prop. Al hacer click, se ejecuta la función del padre. El componente hijo no se casa con ninguna lógica, solo conecta el evento. Es una fábrica de clicks que no opina sobre su destino.

Paso 2 Botón con estilo. Creas un FancyButton que envuelve al Button del paso anterior, le añade una clase para estilos y, críticamente, reenvía el onclick hacia el botón interno. Si olvidaras pasar ese onclick, el click se quedaría atrapado en el wrapper y el padre no se enteraría. FancyButton actúa como un envoltorio transparente que decora sin interferir con el comportamiento.

Paso 3 Uso desde el padre. Importas el FancyButton, declaras un estado count con la utilidad de Svelte y defines handleClick para incrementar count. El flujo es directo. El botón interno dispara el evento nativo, FancyButton solo reenvía el controlador del padre, se ejecuta handleClick y el contador se actualiza en pantalla. Igual que en el teléfono roto bien hecho, Button susurra, FancyButton retransmite y el padre escucha.

Paso 4 Qué pasa si no reenvías. Si creas un BrokenFancyButton que no reenvía onclick, entonces aunque el usuario pulse, el padre nunca recibe el mensaje. La cadena se rompe. Es como un cartero que recoge la carta pero no la entrega.

Paso 5 Reenviar más que clicks. Imagina un TextField que acepta oninput, onfocus y onblur y se los pasa al input nativo. El wrapper no decide nada, solo actúa como relé de eventos. Es un walkie talkie que dice escrito algo, enfocado o desenfocado y el padre lo oye en cada caso. De cara al padre, el TextField se comporta igual que un input normal, con la ventaja de centralizar estilos o estructura.

Paso 6 Control selectivo. El reenvío de eventos en Svelte es explícito. Si no expones onblur en tu TextField, cualquier intento del padre por usar onblur no disparará nada. No es un fallo, es diseño. Como autor del wrapper decides qué eventos componen el API público del componente, manteniendo una interfaz clara y predecible.

Paso 7 La visión general. Primero, los componentes pueden envolver a otros elementos o componentes. Segundo, los eventos pueden quedar atrapados si no reenvías. Tercero, el reenvío hace que el wrapper sea invisible para el padre. Cuarto, el reenvío es explícito, sobrevive lo que eliges exponer. Este patrón convierte tus componentes en piezas reutilizables, transparentes y confiables, sin importar cuántos envoltorios haya en medio.

Paso 8 Componentes controlados vs no controlados. Hasta ahora hablamos de eventos, de cómo el padre se entera de que algo ocurrió. Falta hablar de datos, quién es dueño del valor. Un componente no controlado gestiona su propio estado local, por ejemplo un input con text interno y bind local. El padre no sabe qué está ocurriendo dentro. En cambio, un componente controlado delega el valor en su padre. Con value proporcionado por el padre y vinculación bidireccional, cada cambio en el input sincroniza el estado superior, y cambios desde el padre se reflejan en el hijo. Cuándo elegir. No controlado es simple y autocontenido, ideal para widgets aislados. Controlado es la vía cuando el padre necesita validación, sincronización, compartir estado o trazabilidad. Regla práctica usa controlado cuando el padre debe mandar, usa no controlado cuando el estado local basta.

Paso 9 Mini proyecto Caja de chat con selector de emojis. Se combinan cuatro superpoderes. Props para que el padre indique qué hacer al enviar. Bindings para mantener el input sincronizado con el estado local. Eventos para que el selector de emojis anuncie pulsaciones. Reenvío para que el ChatInput entregue el mensaje listo al padre. El EmojiPicker recibe un callback onselect y lo invoca con el emoji pulsado. El ChatInput mantiene message en estado local, agrega emojis cuando se eligen y al pulsar Enter o el botón de enviar ejecuta onsend con el texto final y limpia el campo. El padre conserva la lista de mensajes y solo necesita añadir el recibido, sin preocuparse por los detalles de tipado o emojis.

Paso 10 Cierre. Partimos de un Button sencillo, lo envolvimos con FancyButton, demostramos el problema con BrokenFancyButton, construimos un TextField que reenvía múltiples eventos, comparamos componentes controlados y no controlados y rematamos con una demo de chat. Con cuatro herramientas props, eventos, bindings y reenvío puedes crear componentes transparentes, reutilizables y potentes. Cada vez que envuelvas un componente, pregúntate si sigues pasando el mensaje. Si la respuesta es sí, tu aplicación se mantiene predecible.

Consejo práctico para Svelte 5. Cuando crees wrappers, define explícitamente las props de eventos que vas a admitir como onclick, oninput, onfocus y reenvíalas al elemento o componente interno. En componentes de entrada de datos, decide si la fuente de la verdad vive en el hijo estado local con $state o en el padre a través de props vinculables con $bindable y bind en el input.

En Q2BSTUDIO diseñamos y construimos aplicaciones a medida y software a medida con enfoque en calidad, rendimiento y escalabilidad. Si buscas un partner para crear tu siguiente plataforma multiplataforma, descubre cómo trabajamos en desarrollo de software y aplicaciones a medida. También somos especialistas en inteligencia artificial e ia para empresas, desde agentes IA hasta automatización de procesos y analítica avanzada. Conoce nuestras capacidades en servicios de inteligencia artificial.

Nuestro equipo cubre extremo a extremo: ciberseguridad y pentesting, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, automatización de procesos, orquestación y despliegue continuo. Combinamos arquitectura robusta con buenas prácticas para crear soluciones seguras y preparadas para crecer.

Palabras clave para ayudarte a encontrar lo que hacemos aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.

Conclusión rápida. Reenvía eventos de forma explícita para que los wrappers no oculten el comportamiento, decide si el valor lo controla el padre o el hijo y combina props, bindings, eventos y reenvío para construir interfaces limpias, escalables y fáciles de mantener con Svelte.