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

@knighttower/js-event-bus

v3.3.9

Published

Event bus for your Javascript applications

Downloads

49

Readme

js-event-bus

Simple Event Bus library built for any JavaScript application.

Refactoring and Updates:

---- 2024 ----

  • Distribution files are now in the root of the project
  • Distribution builds to support node / browser / module and other environments
  • Available via NPM (@knighttower/js-event-bus) && JsDelivr (https://cdn.jsdelivr.net/npm/@knighttower/js-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/js-event-bus

Using yarn

yarn add @knighttower/js-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 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/js-event-bus';

Importing in browser application

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

<body>
    <div>Put your content here</div>

    <script src=" https://cdn.jsdelivr.net/npm/@knighttower/js-event-bus@latest/dist/browser/eventBus.min.js "></script>
    <script>
        _eventBus(); // global instance
        // or if you want to use it with scope as 
        const EventBus = new EventBus();
        
        // global and named scoped 
        const eventBus = _eventBus();
        // then you can use it
        window.eventBus.on('my-event', function () {
            console.log('Inside `my-event`');
        });
    </script>
</body>

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