An open API service indexing awesome lists of open source software.

https://github.com/hypernym-studio/emitter

A super simple and lightweight event emitter.
https://github.com/hypernym-studio/emitter

emit emitter event event-emitter events javascript-emitter typescript-emitter

Last synced: about 1 month ago
JSON representation

A super simple and lightweight event emitter.

Awesome Lists containing this project

README

          

@hypernym/emitter

A super simple and lightweight event emitter.


Repository
|
Package
|
Releases
|
Discussions


pnpm add @hypernym/emitter


Size: ~0.61 KB min, ~0.33 KB gzip


## Features

- Ultra Lightweight & Powerful
- Framework Independent
- Written in TypeScript
- Native SSR Support
- No External Dependencies
- API Friendly

## CDN

### ESM (minified)

```html

import { createEmitter } from 'https://unpkg.com/@hypernym/emitter/dist/index.min.js'
const emitter = createEmitter()

```

### IIFE (minified)

```html

const { createEmitter } = Emitter
const emitter = createEmitter()

```

### UMD (minified)

```html

const { createEmitter } = Emitter
const emitter = createEmitter()

```

## Usage

### JS

```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

```ts
import { createEmitter } from '@hypernym/emitter'

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

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 = createEmitter()
```

## API

### .on()

- Type: `(id: Key, callback: EventCallback, options?: EventOptions): () => void`

Registers an event listener for a specific event type. Also, supports an optional `object` param for advanced options logic.

Returns a cleanup function that removes the listener when called.

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

// Removes the listener
off()

// Adds scroll listener that will be called only `once`
emitter.on(
'scroll',
({ x, y }) => {
console.log(x, y)
},
{ once: true },
)
```

### .off()

Type: `(id?: Key, callback?: EventCallback): void`

Removes the registered event listeners.

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

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

// Removes specific callback from the `events` map without `id`
emitter.off(undefined, callback)

// Custom scroll callback
const scrollCallback = ({ x, y }) => {
console.log(x, y)
}

// Adds specific scroll listener
emitter.on('scroll', scrollCallback)

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

### .get()

- Type: `(id: Key, optionsId: OptionsID): EventDetails | undefined`

Gets specific event details by `options.id` from the map.

Returns an object `{ id, callback, options }` or `undefined` if not found.

```ts
// Adds scroll event listener with custom options
emitter.on(
'scroll',
({ x, y }) => {
console.log(x, y)
},
{ id: 'custom-scroll', a: true, b: false }, // `id` prop can be any string, number or symbol
)

// Gets event details by options.id `custom-scroll`
const details = emitter.get('scroll', 'custom-scroll')

if (details?.options?.a) console.log('run custom logic...')
```

### .emit()

- Type: `(id: Key, event: Events[Key] | ((details: EventDetails) => void)): void`

Emits a specific event.

```ts
// Emits scroll event with position data
emitter.emit('scroll', { x: 0, y: 0 })

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

// Emits event only `once`
emitter.emit('event-id', ({ id, callback, options }) => {
if (options?.once) {
callback('event-state') // Triggers callback only `once` with event state
emitter.off(id, callback) // Removes callback from the map
}
})

// Emits event with custom logic
emitter.emit('scroll', ({ callback, options }) => {
// Triggers callback with default event state
callback({ x: 0, y: 0 })

// Triggers callback with `custom` event state
if (options?.id === 'custom') callback({ x: 100, y: 100 })
})
```

### .events

- Type: `Map, EventDetails>>`

Main events map.

Stores all registered events.

```ts
emitter.events
```

### .has()

- Type: `(key: keyof Events): boolean`

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

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

### .get()

- Type: `(key: keyof Events): Map, EventDetails> | undefined`

Gets a specific event by `id` from the map.

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

### .delete()

- Type: `(key: keyof Events): boolean`

Deletes a specific event by `id` from the map.

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

### .clear()

- Type: `(): void`

Removes all events from the map.

```ts
emitter.events.clear()
```

### .size

- Type: `number`

Indicates the number of registered events in the map.

```ts
emitter.events.size
```

## License

Developed in 🇭🇷 Croatia, © Hypernym Studio.

Released under the [MIT](LICENSE.txt) license.