@hypernym/emitter

A super simple and lightweight event emitter.

Repository ✦ Package ✦ Releases ✦ Discussions

pnpm add @hypernym/emitter

Features

• TypeScript friendly
• Fully tree-shakeable
• No dependencies

_{Package size: ~337 B minified, ~233 B gzip}

CDN

Here are some examples of how to integrate Emitter from a CDN via a script tag.

Also, it is possible to download files manually and serve them accordingly.

ESM (minified)

<script type="module">
  import { createEmitter } from 'https://unpkg.com/@hypernym/emitter/dist/index.min.mjs'
  const emitter = createEmitter()
</script>

IIFE (minified)

<script src="https://unpkg.com/@hypernym/emitter/dist/index.iife.js"></script>
<script>
  const { createEmitter } = Emitter
  const emitter = createEmitter()
</script>

UMD (minified)

<script src="https://unpkg.com/@hypernym/emitter/dist/index.umd.js"></script>
<script>
  const { createEmitter } = Emitter
  const emitter = createEmitter()
</script>

Usage

JS

import { createEmitter } from '@hypernym/emitter'

const emitter = createEmitter()

emitter.on('event-id', (e) => console.log(e.x, e.y))

emitter.emit('event-id', { x: 0, y: 0 })

TS

import { createEmitter, type Emitter } from '@hypernym/emitter'

type Events = {
  'event-id': { x: number; y: number }
  // ...
}

const emitter: Emitter<Events> = createEmitter<Events>()

emitter.on('event-id', (e) => console.log(e.x, e.y))

emitter.emit('event-id', { x: 0, y: 0 })

API

.on()

Registers an event listener for a specific event type.

Returns a cleanup function that removes the listener when called.

emitter.on<K>(id: K, callback: (event: Events[K]) => void): () => void

// Adds click listener
const unsubscribe = emitter.on('scroll', ({ x, y }) => {
  console.log(x, y)
})

// Removes the listener
unsubscribe()

.off()

Removes event listeners.

emitter.off<K>(id?: K | undefined, callback?: ((event: Events[K]) => void) | undefined): void

// Removes all event listeners across all event types
emitter.off()

// Removes all click listeners
emitter.off('click')

// Removes specific scroll callback
emitter.off('scroll', scrollCallback)

.emit()

Emits a specific event.

emitter.emit<K>(id: K, event?: Events[K] | undefined): void

// Emits scroll event with position data
emitter.emit('scroll', { x: window.scrollX, y: window.scrollY })

// Emits event without second parameter
emitter.emit('eventWithoutData')

.events

Main events map.

Stores all registered events.

emitter.events

.has()

Checks if a specific event by id exists in the map.

emitter.events.has(id: string | symbol)

.get()

Gets a specific event by id from the map.

emitter.events.get(id: string | symbol)

.delete()

Deletes a specific event by id from the map.

emitter.events.delete(id: string | symbol)

.clear()

Removes all events from the map.

emitter.events.clear()

Community

Feel free to ask questions or share new ideas.

Use the official discussions to get involved.

License

Developed in 🇭🇷 Croatia, © Hypernym Studio.

Released under the MIT license.