@knighttower/event-bus

EVENT BUS

Simple Event Bus library built for any JavaScript application.

⚠ This library has been moved as part of a monorepo to JsUtility -> - JS Utility: Collection of libraries with classes and functions for JavaScript

Refactoring and Updates:

---- 2024 ----

• Consolidated functions into a single class. No need to initialize the class anymore.
• Distribution files are now in the root of the project
• Distribution builds to support node / browser / module and other environments
• Available via NPM (@knighttower/event-bus) && JsDelivr (https://cdn.jsdelivr.net/npm/@knighttower/event-bus@latest/dist/browser/eventBus.min.js)

---- 2023 ----

• Remove some unnecessary methods to make it SOLID

• Remove different file language versions to unify the code into one and ease maintenance

• Fixed and made the code JsDocs and Ts compliant

• Fixed minor code issues

• Added correct distribution files to modules and browser

• Added Vitest unit test (passed)

• Added terser, webpack (for browser window export) and ts (for module export)

• Removed examples folder, the examples are now in the JsDocs comments for Docs creation

• Bump the version to Major since there was a lot of refactoring and changes in the Class API

• "emit" method now receives the 'context' as part of the 'args' only if set since it is not frequently used and allows to pass the data without the need to set "null" as the context, ex:

  • eventBus.emit('event.name', arg1, arg2, arg3)
  • eventBus.emit('event.name', arg1, arg2, {__context: YourInstance}, ...otherArgs) //order is not important

• Fixes to the wild card event match. It now accepts correct wild card in the "on" or "emit" method:

  • eventBus.emit('event.name.*') // matches on('event.name.hello') or on('event.name.hello.world')
  • eventBus.emit('event.*.string') // matches on('event.name.string') but not on('event.name.hello.world')
  • eventBus.on('event.*.string.*') // matches emit('event.name.string.emitter') or emit('event.name.string.hello.world')

(this is an updated and improved fork of js-event-bus by [bcerati])

Installation

Using npm

npm i @knighttower/event-bus

Using yarn

yarn add @knighttower/event-bus

Usage

This library was built so you can use it in any JS application like Node.js apps, browser apps etc. The API is always the same.

Importing in Build or Node.js application

If you want to use it in your Node.js apps you can import the library like this:

import { eventBus } from '@knighttower/event-bus';
//Tip: in node JS you can use the global instance=> eventBus().global();

Importing in browser application

If you want to use it in your Browser apps you can import the library (browser or iife) like this:

    <script src=" https://cdn.jsdelivr.net/npm/@knighttower/event-bus@latest/dist/browser/eventBus.min.js "></script>
    <script>
        // global instance
        eventBus.default().global();
        // then you can use it
        window.eventBus.on('my-event', function () {
            console.log('Inside `my-event`');
        });

        // or if you want to use it with scope as 
        const ev = eventBus.default();
        // then you can use it
        ev.on('my-event', function () {
            console.log('Inside `my-event`');
        });
    </script>

Api of the library

Register to an event

eventBus.on('my-event', function () {
    console.log('Inside `my-event`');
});

With this code, each time my-event is emitted this function will be executed.

Register only one time to an event

eventBus.once('my-event', function () {
    console.log("Inside `my-event`. It'll be executed only one time!");
});

With this code, when my-event is emitted this function will be executed. The next triggers of this event won't execute the callback because it is a one time event.

Register several time to an event

eventBus.exactly(3, 'my-event', function () {
    console.log("Inside `my-event`. It'll be executed only 3 times!");
});

With this code, when my-event is emitted this function will be executed with a maximum of triggers of 3.

Register using wildcards

You can use wildcards to register listeners using a specific pattern.

eventBus.on('my-event.*', function () {
    console.log('Inside `my-event.*`');
});

The callback will be executed with the events like my-event.x.

• my-event.x will trigger the callback ;
• my-event.y will trigger the callback ;
• my-event will not trigger the callback ;
• my-event.x.y will not trigger the callback ;

You can also use multiple wildcards to register listeners using a specific pattern.

eventBus.on('my-event.*.name.**', function () {
    console.log('my-event.*.name.**`');
});

The callback will be executed with the events like my-event.a.name.b.c.

• my-event.a.name.b.c will trigger the callback ;
• my-event.a.name.b will trigger the callback ;
• my-event.name.b will not trigger the callback ;

Emit an event

You can emit an event by calling the emit function. The arguments are the following:

• the name of the event ;
• ... all the arguments. Note: In order to pass the "context" (ex: 'this', or ex: ObjectInstance) to the event, it can be easily added within an object containing the property "__context" as part of the arguments. This will be automatically injected into the event and removed from the Arguments, so no need of sanitation.

Here are some examples:

eventBus.emit('my-event');
eventBus.emit('my-event', 'a', 'b', {__context: someInstance}); // your callback sould be function (a, b) { ... }
eventBus.emit('my-event', 'a', 'b', 'c', {__context: new SomeObject()}); // your callback sould be function (a, b) { ... } and `this` will be set to the context of `SomeObject`. Order is not important.

Detach an event

var callbackForMyEvent = function () {
    console.log('Inside `my-event`.');
};

eventBus.on('my-event', callbackForMyEvent);

eventBus.emit('my-event');

eventBus.detach('my-event', callbackForMyEvent);

This code will emit the event my-event and then detach the given callback for this event. So it'll not be executed anymore.

Detach an event for all the callbacks that have been set before

eventBus.detach('my-event');

This code will remove the event my-event from the event bus.

Remove an event

eventBus.on('my-event', function () {
    console.log('Inside `my-event`.');
});

eventBus.emit('my-event');

eventBus.off('my-event');

This code will emit the event my-event and then detach all the callbacks for this event. So any of them won't be executed anymore.

License

MIT