Better-Mitt: A tiny (~400B) TypeScript-first event emitter that improves on Mitt

1 week ago 6

Enhanced tiny (~400b) functional event emitter / pubsub with TypeScript support.

Microscopic: Maintains a small footprint (~400 bytes gzipped)
Useful: Wildcard "*" event type listens to all events
Familiar: Same API as Node's EventEmitter and original Mitt
Functional: Methods don't rely on this
TypeScript Ready: First-class TypeScript support with generic types
Enhanced API: Adds useful methods like once(), clear(), hasListeners(), and listenerCount()
Safer Emission: Protects against modification of handlers during emission

npm install better-mitt # or yarn add better-mitt # or pnpm add better-mitt

import mitt from 'better-mitt' const emitter = mitt()

const mitt = require('better-mitt').default const emitter = mitt()

<script src="https://unpkg.com/better-mitt/dist/index.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/better-mitt/dist/index.min.js"></script> <script> // window.mitt is available const emitter = mitt() </script>

import mitt from 'better-mitt' const emitter = mitt() // listen to an event emitter.on('foo', e => console.log('foo', e)) // listen to all events emitter.on('*', (type, e) => console.log(type, e)) // fire an event emitter.emit('foo', { a: 'b' }) // listen once emitter.once('bar', e => console.log('bar was called once', e)) // check if has listeners if (emitter.hasListeners('foo')) { console.log('Has foo listeners') } // get listener count console.log(`There are ${emitter.listenerCount('foo')} foo listeners`) // clearing all events emitter.clear() // working with handler references function onFoo() {} emitter.on('foo', onFoo) // listen emitter.off('foo', onFoo) // unlisten

This package includes TypeScript definitions. For best type inference, set "strict": true in your tsconfig.json.

import mitt, { Emitter } from 'better-mitt'; // Define your event types type Events = { foo: string; bar?: number; baz: { name: string }; }; // Create a typed emitter const emitter = mitt<Events>(); // Event handlers are properly typed emitter.on('foo', (e) => { // 'e' is inferred as string console.log(e.toUpperCase()); }); emitter.on('baz', (e) => { // 'e' is inferred as { name: string } console.log(e.name); }); // Type checking on emit emitter.emit('foo', 'hello'); // OK emitter.emit('foo', 123); // Error: number is not assignable to string

Creates a mitt event emitter instance.

Returns Emitter

A Map of event names to registered handler functions.

emitter.on(type, handler)

type (String|Symbol): Type of event to listen for, or '*' for all events
handler (Function): Function to call in response to the event

emitter.off(type, [handler])

Remove an event handler for the given type.

type (String|Symbol): Type of event to unregister handler from, or '*'
handler (Function) [optional]: Handler function to remove

If handler is omitted, all handlers of the given type are removed.

emitter.emit(type, event)

Invoke all handlers for the given type. If present, '*' handlers are invoked after type-matched handlers.

type (String|Symbol): The event type to invoke
event (Any): Any value (object is recommended and powerful), passed to each handler

emitter.once(type, handler)

type (String|Symbol): Type of event to listen for, or '*' for all events
handler (Function): Function to call in response to the event

Remove all event handlers.

emitter.hasListeners(type)

Check if there are any listeners for a given event type.

type (String|Symbol): Type of event to check
Returns (Boolean): true if there are listeners for this event type

emitter.listenerCount(type)

Get the number of listeners for a given event type.

type (String|Symbol): Type of event to check
Returns (Number): Number of listeners for this event type

This package works in all modern browsers and IE11+.

If you're forking this package and want to publish your own version, follow these steps:

Create an npm account if you don't already have one
Update the package name, author, and repository information in package.json
Login to npm:
Publish the package:

For more information about publishing to npm, see the npm documentation.

MIT

Read Entire Article

Better-Mitt: A tiny (~400B) TypeScript-first event emitter that improves on Mitt

emitter.on(type, handler)

emitter.off(type, [handler])

emitter.emit(type, event)

emitter.once(type, handler)

emitter.hasListeners(type)

emitter.listenerCount(type)

Related

A masochist's guide to web development

Pwnat

Gemini and Vercel AI SDK Cheatsheet