Emittify - a tiny event emitter

This is a tiny event emitter written with first class Typescript support. It supports caching and has hooks for both React and Solid.

Installation

1yarn add @colorfy-software/emittify

Getting started

Creating an Emitter with types

1// events-core.ts
2
3// import the emittify module
4import Emittify from '@colorfy-software/emittify'
5// importing toast notification component props type to use in the emittify module
6import type { ToastNotificationPropsType } from '@components/ToastNotification'
7
8// Type for the emitter
9// key is the name of the event and value is the type of the event
10interface EventsType {
11  'direct-message-count': number
12  'toast-notification': ToastNotificationPropsType
13}
14
15const emitter = new Emittify<EventsType>({
16  // Cache is used to cache the events and prevent emitting the same event multiple times
17  cachedEvents: ['direct-message-count'],
18})
19
20export default emitter

Sending and listening to events

1// File where you want to use it
2import emitter from './events-core'
3
4// register a listener for the 'toast-notification' event
5emitter.listen('toast-notification', data => {
6  const { message, type } = data // All is typed and auto-completed
7
8  console.log({ message, type })
9}
10
11// emit the 'toast-notification' event
12// All is typed and auto-completed
13emitter.send('toast-notification', {
14  message: 'Hello World',
15  type: 'success'
16}
17
18// emit the 'direct-message-count' event
19emitter.send('direct-message-count', 10)
20
21// get the cached event
22const cachedEvent = emitter.getCache('direct-message-count', 0) // Can provide second argument as default value if none is sent yet

Testing with Jest

If you don't already have a Jest setup file configured, please add the following to your Jest configuration file and create the new jest.setup.js file in project root:

1setupFiles: ['<rootDir>/jest.setup.js'];

You can then add the following line to that setup file to mock the NativeModule.RNPermissions:

1jest.mock('@colorfy-software/emittify', () => require('@colorfy-software/emittify/mock'));

Hooks

For React:

1import Emittify from '@colorfy-software/emittify/react'

For Solid:

1import Emittify from '@colorfy-software/emittify/solid'

Usage

1// import previously created emitter
2import emitter from '../core/events-core.ts'
3
4const Component = () => {
5  // Can provide second argument as default value if none is sent yet. Will as well return cached value as initial value if an event was previously sent and cached
6  const count = emitter.useEventListener('direct-message-count', 0)
7
8  return <button onClick={() => emitter.send('direct-message-count', 100)}>{count}</button>
9}

Methods

send

1// send an event with specified name and value
2emittify.send('event-name', value)

listen

1// listen to events with specified name and triggers a callback on each event
2const listener = emittify.listen('event-name', callback)
3
4// Listener is an object
5listener.id // Unique id for the listener
6listener.event // Name of the event
7listener.clearListener() // Clears the listener

useEventListener

1// emits an event with specified name and value. Returns cached value if one exists, otherwise returns initial value if that is provided
2emittify.useEventListener('event-name', initialValue)
3``
4
5### getCache
6
7```typescript
8// gets the cached value for event name
9emittify.getCache('event-name', initialValue)

clearCache

1// clears cache for given event name
2emittify.clearCache('event-name')

clearAllCache

1// clears all of the cache
2emittify.clearAllCache()

clear

1// clears listeners for given listener id
2emittify.clear('listener-id')