Mitt, una biblioteca de Event Bus en JavaScript

Mitt es una biblioteca de gestión de eventos en JavaScript, bajo un patrón de publicación/suscripción que destaca por su sencillez y pequeño tamaño.

Creada por Jason Miller, Mitt es una librería minimalista y extremadamente ligera. Pesa menos de 200 bytes (minificada y comprimida).

Mitt no tiene dependencias, y resulta es especialmente útil en aplicaciones pequeñas o medianas, donde no se requiere la complejidad de otras librerías más grandes y pesadas.

Con Mitt es muy sencillo hacer un patrón como un Event Bus (un mecanismo compartido por componentes para compartir mensajes):

Es una biblioteca muy útil en muchas ocasiones, como por ejemplo para la comunicaicón entre componentes de React, Vue, Svelte, etc.

Uso básico de Mitt

Para empezar a usar Mitt, primero necesitamos instalarlo en nuestro proyecto.

npm install mitt

También puedes incluir Mitt directamente en tu proyecto a través de un CDN:

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>

Una vez que hayas instalado Mitt, puedes empezar a usarlo en tu proyecto. Mitt funciona creando un “bus de eventos” que permite registrar y escuchar eventos personalizados.

import mitt from 'mitt';

const emitter = mitt();

emitter.on('saludo', (mensaje) => {
    console.log(mensaje); // "Hola, mundo!"
});

emitter.emit('saludo', 'Hola, mundo!');

// Más tarde, cuando ya no necesites el listener
emitter.off('saludo', handler);

emitter.off('saludo');

Ejemplo práctico

Veamos cómo juntar todo lo anterior para ver cómo funcionaría el uso de Mitt.

import mitt from 'mitt';

// Crear un bus de eventos
const emitter = mitt();

// Escuchar un evento
emitter.on('saludo', (mensaje) => {
  console.log('Recibido:', mensaje);
});

// Emitir el evento
emitter.emit('saludo', '¡Hola, Mitt!');

Ejemplo en una aplicación con React

He dicho que una de las ventajas de Mitt es que permite hacer comunicaciones entre componentes, incluso entre distintos frameworks, donde las formas habituales serían complicadas.

Vamos a verlo, por ejemplo, en un ejemplo con React. Primero, creamos un bus de eventos global con un patrón Singleton.

Para ello, creamos un archivo eventBus.js:

import mitt from 'mitt';

const eventBus = mitt();

export default eventBus;

Ahora, podemos emitir eventos desde cualquier componente

import eventBus from './eventBus';

const Emisor = () => {
  return (
    <button onClick={() => eventBus.emit('mensaje', 'Hola desde Emisor')}>
      Enviar Mensaje
    </button>
  );
};

export default Emisor;

Ahora podemos escuchar eventos en otro componente, por ejemplo así,

import { useEffect, useState } from 'react';
import eventBus from './eventBus';

const Receptor = () => {
  const [mensaje, setMensaje] = useState('');

  useEffect(() => {
    const handler = (msg) => setMensaje(msg);
    
    eventBus.on('mensaje', handler);

    return () => {
      eventBus.off('mensaje', handler);
    };
  }, []);

  return <p>Mensaje recibido: {mensaje}</p>;
};

export default Receptor;