ai/nanoevents

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

npm install nanoevents

interface Events {
  set: (name: string, count: number) => void
  tick: () => void
}

const emitter = createNanoEvents<Events>()

// Correct calls:
emitter.emit('set', 'prop', 1)
emitter.emit('tick')

// Compilation errors:
emitter.emit('set', 'prop', '1')
emitter.emit('tick', 2)

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)
  }
}

import { createNanoEvents, Emitter } from 'nanoevents'

interface Events {
  start: (startedAt: number) => void
}

class Ticker {
  emitter: Emitter

  constructor() {
    this.emitter = createNanoEvents<Events>()
  }

  on<E extends keyof Events>(event: E, callback: Events[E]) {
    return this.emitter.on(event, callback)
  }
}

emitter.on('tick', number => {
  console.log(number)
})

emitter.emit('tick', 1)
// Prints 1
emitter.emit('tick', 5)
// Prints 5

var app = {
  userId: 1,
  getListener() {
    return () => {
      console.log(this.userId)
    }
  }
}
emitter.on('print', app.getListener())

const unbind = emitter.on('tick', number => {
  console.log('on ' + number)
})

emitter.emit('tick', 1)
// Prints "on 1"

unbind()
emitter.emit('tick', 2)
// Prints nothing

emitter.on('tick', (a, b) => {
  console.log(a, b)
})
emitter.emit('tick', 1, 'one')
// Prints 1, 'one'

const unbind = emitter.on('tick', () => {})
emitter.events //=> { tick: [ [Function] ] }

class Ticker {
  constructor () {
    this.emitter = createNanoEvents()
  }
  …
  once (event, callback) {
    const unbind = this.emitter.on(event, (...args) => {
      unbind()
      callback(...args)
    })
    return unbind
  }
}

emitter.on('event1', () => {})
emitter.on('event2', () => {})

emitter.events = {}

// hooks/use-on-emit.js

import { useEffect, useRef } from 'react'

export function useOnEmit(emitter, event, cb) {
  const cbRef = useRef(cb)

  useEffect(() => {
    cbRef.current = cb
  }, [cb])

  useEffect(() => {
    const listener = (...args) => cbRef.current(...args)

    const unbind = emitter.on(event, listener)
    return unbind
  }, [emitter, event])
}

// hooks/use-on-emit.d.ts
import type { Emitter, EventsMap } from 'nanoevents'

export declare function useOnEmit<
  Events extends EventsMap,
  Event extends keyof Events
>(emitter: Emitter<Events>, event: Event, cb: Events[Event]): void

import { createNanoEvents } from 'nanoevents'
import { useOnEmit } from '../hooks/use-on-emit.js'
import { useState } from 'react'

const emitter = createNanoEvents()

export function Counter() {
  const [count, setCount] = useState(0)

  useOnEmit(emitter, 'increment', () => {
    setCount(v => v + 1)
  })

  return <span>{count}</span>
}

export function Increment() {
  return <button onClick={() => emitter.emit('increment')}>Increment</button>
}