npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@colorfy-software/emittify

v1.0.2

Published

Tiny event library with caching

Downloads

58

Readme

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

yarn add @colorfy-software/emittify

Getting started

Creating an Emitter with types

// events-core.ts

// import the emittify module
import Emittify from '@colorfy-software/emittify'
// importing toast notification component props type to use in the emittify module
import type { ToastNotificationPropsType } from '@components/ToastNotification'

// Type for the emitter
// key is the name of the event and value is the type of the event
interface EventsType {
  'direct-message-count': number
  'toast-notification': ToastNotificationPropsType
}

const emitter = new Emittify<EventsType>({
  // Cache is used to cache the events and prevent emitting the same event multiple times
  cachedEvents: ['direct-message-count'],
})

export default emitter

Sending and listening to events

// File where you want to use it
import emitter from './events-core'

// register a listener for the 'toast-notification' event
emitter.listen('toast-notification', data => {
  const { message, type } = data // All is typed and auto-completed

  console.log({ message, type })
}

// emit the 'toast-notification' event
// All is typed and auto-completed
emitter.send('toast-notification', {
  message: 'Hello World',
  type: 'success'
}

// emit the 'direct-message-count' event
emitter.send('direct-message-count', 10)

// get the cached event
const 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:

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

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

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

Hooks

For React:

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

For Solid:

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

Usage

// import previously created emitter
import emitter from '../core/events-core.ts'

const Component = () => {
  // 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
  const count = emitter.useEventListener('direct-message-count', 0)

  return <button onClick={() => emitter.send('direct-message-count', 100)}>{count}</button>
}

Methods

send

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

listen

// listen to events with specified name and triggers a callback on each event
const listener = emittify.listen('event-name', callback)

// Listener is an object
listener.id // Unique id for the listener
listener.event // Name of the event
listener.clearListener() // Clears the listener

useEventListener

// emits an event with specified name and value. Returns cached value if one exists, otherwise returns initial value if that is provided
emittify.useEventListener('event-name', initialValue)
``

### getCache

```typescript
// gets the cached value for event name
emittify.getCache('event-name', initialValue)

clearCache

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

clearAllCache

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

clear

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