JSPM – @vanillaspa/event-bus@1.3.3

Package Exports

@vanillaspa/event-bus
@vanillaspa/event-bus/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vanillaspa/event-bus) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Getting started

To install the event-bus into your project, simply run

npm install @vanillaspa/event-bus

How-To

Now integrate the event-bus into your app:

<script type="module">
  import * as eventbus from '@vanillaspa/event-bus';
  window.eventbus = eventbus;
</script>

This is only a recommendation. You can use it however you like. With the eventbus object attached to the window object, you have access to the event-bus in your WebComponents.

Then simply use eventbus.addEventListener(type, listener) and eventbus.dispatchEvent(event) in your WebComponents.

You are not bound to event bubbling or capturing, which are the standard event propagation mechanisms, but now you can send events even among any objects!

eventbus.addEventListener("click", () => {console.log("click")}, window);
eventbus.dispatchEvent(new Event("click"), window);

EventBus API architecture

EventBus schema

classDiagram
    EventTarget <|-- EventBus
    EventTarget: +addEventListener()
    EventTarget: +removeEventListener()
    EventTarget: +dispatchEvent()
    EventBus: -WeakMap listeners

That's it. Check it out! KISS

Contribute

Please give your warm feedback.