@foundit/broadcasterjs

broadcasterjs

A simple yet powerful pub/sub javascript event bus

• easy to use

• framework agnostic

• minimal footprint

• optimised for SPA applications

• unintrusive as a dependency

• no own dependencies

• Here you can report issues or contribute

• Demo app available

• Source code of the demo app

Usage

No need to initialize separately. Import the 'broadcast' factory function and use to your hearts content.

npm install @foundit/broadcasterjs

import { broadcast } from '@foundit/broadcasterjs'

START A SUBSCRIPTION IN A REACT COMPONENT

useEffect(() => {
  return broadcast.on(['MYBROADCAST-ID', myFlagEmittedCallbackFunction])
}, [myFlagEmittedCallbackFunction])

broadcast.on() returns a unsubscribe function which comes in handy when you want to cleanup on component unmount. If your listener handler function does not depend on the React component it is instanciated, in you can of course omit the return to make it persist.

START SUBSCRIPTION VANILLA JS

const off() = broadcast.on([
  'MYBROADCAST-ID',
  ({ detail }) => {
    document.body.append(detail + ' ')
  },
])

const off() = broadcast.once([
  'MYBROADCAST-ID',
  ({ detail }) => {
    document.body.append(detail + ' ')
  },
])

END SUBSCRIPTION

off() // Use the subscribers return function.

PUBLISH IN REACT & VANILLLA JS (place anywhere)

broadcast.emit('MYBROADCAST-ID', 'Hello world')

TO VISUALLY INSPECT

Click elements tab i chrome devtools, select event-listeners tab in second pane. Active listeners begin with 'broadcast-' + flag name. Expand each listener to see each unique subscriber.

TO DEBUG

Add ?debug=broadcasterjs to your url and open your devtools console.

ADVANCED

The broadcaster functions on,once takes an optional third value and emit takes an optional third argument in the form of a settings object.

{
  debug: boolean (false)
  debugGlobal: boolean (false)
  allowDoublettesSubscribers: boolean (false)
  useLatestSubscriberScope?: boolean (false) // <- internal use
  suppresDebug?: boolean (false) // <- internal use
}

Change log

v 1.1.0 The subscribe functions 'on' and 'once' now return a unsubscribe function (no arguments) that is much more user friendly than the previous off function. 'off' is still available but removed from the documentation.

Commands

Publish to npm: npm publish --access=public Compile typescript: tsc Develop: yarn start