Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ai/nanoevents
Simple and tiny (107 bytes) event emitter library for JavaScript
https://github.com/ai/nanoevents
Last synced: 4 days ago
JSON representation
Simple and tiny (107 bytes) event emitter library for JavaScript
- Host: GitHub
- URL: https://github.com/ai/nanoevents
- Owner: ai
- License: mit
- Created: 2016-09-20T05:47:44.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T07:00:27.000Z (about 1 month ago)
- Last Synced: 2025-01-04T14:33:22.530Z (7 days ago)
- Language: TypeScript
- Homepage:
- Size: 2.05 MB
- Stars: 1,504
- Watchers: 19
- Forks: 47
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - ai/nanoevents - Simple and tiny (107 bytes) event emitter library for JavaScript (TypeScript)
- awesome-tiny-js - nanoevents - Nicer unsubscribe API, but no `*` event, <img align="top" height="24" src="./img/nanoevents.svg"> (Event Emitters)
README
# Nano Events
Simple and tiny event emitter library for JavaScript.
* Only **108 bytes** (minified and brotlied).
It uses [Size Limit] to control size.
* The `on` method returns `unbind` function. You don’t need to save
callback to variable for `removeListener`.
* TypeScript and ES modules support.
* No aliases, just `emit` and `on` methods.
No Node.js [EventEmitter] compatibility.
```js
import { createNanoEvents } from 'nanoevents'
const emitter = createNanoEvents()
const unbind = emitter.on('tick', volume => {
summary += volume
})
emitter.emit('tick', 2)
summary //=> 2
unbind()
emitter.emit('tick', 2)
summary //=> 2
```
[EventEmitter]: https://nodejs.org/api/events.html
[Size Limit]: https://github.com/ai/size-limit
---
Made at Evil Martians, product consulting for developer tools.
---
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Install](#install)
- [TypeScript](#typescript)
- [Mixing to Object](#mixing-to-object)
- [Add Listener](#add-listener)
- [Remove Listener](#remove-listener)
- [Execute Listeners](#execute-listeners)
- [Events List](#events-list)
- [Once](#once)
- [Remove All Listeners](#remove-all-listeners)
## Install
```sh
npm install nanoevents
```
## TypeScript
Nano Events accepts interface with event name
to listener argument types mapping.
```ts
interface Events {
set: (name: string, count: number) => void,
tick: () => void
}
const emitter = createNanoEvents()
// Correct calls:
emitter.emit('set', 'prop', 1)
emitter.emit('tick')
// Compilation errors:
emitter.emit('set', 'prop', '1')
emitter.emit('tick', 2)
```
## Mixing to Object
Because Nano Events API has only just 2 methods,
you could just create proxy methods in your class
or encapsulate them entirely.
```js
class Ticker {
constructor () {
this.emitter = createNanoEvents()
this.internal = setInterval(() => {
this.emitter.emit('tick')
}, 100)
}
stop () {
clearInterval(this.internal)
this.emitter.emit('stop')
}
on (event, callback) {
return this.emitter.on(event, callback)
}
}
```
With Typescript:
```ts
import { createNanoEvents, Emitter } from "nanoevents"
interface Events {
start: (startedAt: number) => void
}
class Ticker {
emitter: Emitter
constructor () {
this.emitter = createNanoEvents()
}
on(event: E, callback: Events[E]) {
return this.emitter.on(event, callback)
}
}
```
## Add Listener
Use `on` method to add listener for specific event:
```js
emitter.on('tick', number => {
console.log(number)
})
emitter.emit('tick', 1)
// Prints 1
emitter.emit('tick', 5)
// Prints 5
```
In case of your listener relies on some particular context
(if it uses `this` within itself) you have to bind required
context explicitly before passing function in as a callback.
```js
var app = {
userId: 1,
getListener () {
return () => {
console.log(this.userId)
}
}
}
emitter.on('print', app.getListener())
```
Note: binding with use of the `.bind()` method won’t work as you might expect
and therefore is not recommended.
## Remove Listener
Methods `on` returns `unbind` function. Call it and this listener
will be removed from event.
```js
const unbind = emitter.on('tick', number => {
console.log('on ' + number)
})
emitter.emit('tick', 1)
// Prints "on 1"
unbind()
emitter.emit('tick', 2)
// Prints nothing
```
## Execute Listeners
Method `emit` will execute all listeners. First argument is event name, others
will be passed to listeners.
```js
emitter.on('tick', (a, b) => {
console.log(a, b)
})
emitter.emit('tick', 1, 'one')
// Prints 1, 'one'
```
## Events List
You can get used events list by `events` property.
```js
const unbind = emitter.on('tick', () => { })
emitter.events //=> { tick: [ [Function] ] }
```
## Once
If you need add event listener only for first event dispatch,
you can use this snippet:
```js
class Ticker {
constructor () {
this.emitter = createNanoEvents()
}
…
once (event, callback) {
const unbind = this.emitter.on(event, (...args) => {
unbind()
callback(...args)
})
return unbind
}
}
```
## Remove All Listeners
```js
emitter.on('event1', () => { })
emitter.on('event2', () => { })
emitter.events = { }
```