Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trutoo/event-bus
Typesafe cross-platform pubsub event bus ensuring reliable communication between fragments and micro frontends.
https://github.com/trutoo/event-bus
event-communication fragments micro-frontends pubsub typesafe
Last synced: about 2 months ago
JSON representation
Typesafe cross-platform pubsub event bus ensuring reliable communication between fragments and micro frontends.
- Host: GitHub
- URL: https://github.com/trutoo/event-bus
- Owner: trutoo
- License: mit
- Created: 2020-03-02T10:16:41.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-06-03T12:41:56.000Z (8 months ago)
- Last Synced: 2024-11-08T19:47:41.677Z (2 months ago)
- Topics: event-communication, fragments, micro-frontends, pubsub, typesafe
- Language: TypeScript
- Homepage: https://trutoo.github.io/event-bus
- Size: 1.48 MB
- Stars: 144
- Watchers: 3
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Event Bus
[](https://coveralls.io/github/trutoo/event-bus?branch=main)  [![[npm downloads]](https://img.shields.io/npm/dt/@trutoo/event-bus)](https://www.npmjs.com/package/@trutoo/event-bus)  
Simple typesafe cross-platform pubsub communication between different single page applications, web components, fragments, or services. Purposefully built for a micro frontend architecture with a distributed responsibility for deployment. Allowing for framework agnostic and safe communication between different implementations and version. Catch those pesky event errors early :heart:.
---
## Table of Contents
- [Purpose](#purpose)
- [Installation](#installation)
- [Usage](#usage)
- [Advanced Schema](#advanced-schema)
- [API](#api)
- [Register](#register)
- [Unregister](#unregister)
- [Subscribe](#subscribe)
- [Publish](#publish)
- [Get Latest](#get-latest)
- [Get Schema](#get-schema)
---
## Purpose
This project was created to improve upon some of the deficits CustomEvents has in relation to event communication between separate web components or fragments, which often is the preferred way of communication. Below points are some of the benefits of using this pub-sub solution over the native solution.
1. Each fragment can register on a custom named event channel with an optional [JSON schema draft-04](https://tools.ietf.org/html/draft-zyp-json-schema-04) to ensure all future traffic on that channel follows the specification. This means incompatibilities are reported before any payload is sent and every payload will be typesafe.
2. The individual event channels stores the last payload allowing new fragments or asynchronous subscriptions to ask for a replay of the last payloads data as a first callback.
3. CustomEvents require a polyfill to work in older browsers, while this project works out of the box with Internet Explorer 11.
## Installation
Install the package from the [npm registry @trutoo/event-bus](https://www.npmjs.com/package/@trutoo/event-bus) as a production/runtime dependency.
```bash
npm install @trutoo/event-bus
```
or
```bash
yarn add @trutoo/event-bus
```
_**Note: dropped publishing to GitHub packages to simplify releases.**_
Then either import the side effects only exposing a `eventBus` global instance.
```javascript
import '@trutoo/event-bus';
// or
require('@trutoo/event-bus');
eventBus.register(/*...*/);
```
or import the `EventBus` class to create your own instance.
```javascript
import { EventBus } from '@trutoo/event-bus';
// or
const { EventBus } = require('@trutoo/event-bus');
const myEventBus = new EventBus();
myEventBus.register(/*...*/);
```
or using the UMD module and instance.
```html
eventBus.register(/*...*/);
// or
const myEventBus = new EventBus.EventBus();
myEventBus.register(/*...*/);
```
## Usage
Simple event bus registration with communication between a standard web component and a React component, as the event bus is framework agnostic. In addition a basic [JSON schema draft-04](https://tools.ietf.org/html/draft-zyp-json-schema-04) is used to restrict communication to a single boolean. Below outlines the basic usage, but can also be seen under [`/docs`](https://github.com/trutoo/event-bus/tree/main/docs) folder.
`JSON Schema`
```json
{
"type": "boolean"
}
```
`Fragment One - Web Component`
```typescript
class PublisherElement extends HTMLElement {
connectedCallback() {
eventBus.register('namespace:eventName', { type: 'boolean' });
this.render();
this.firstChild && this.firstChild.addEventListener('click', this.send);
}
send() {
eventBus.publish('namespace:eventName', true);
}
render() {
this.innerHTML = `send`;
}
disconnectedCallback() {
this.firstChild && this.firstChild.removeEventListener('click', this.send);
}
}
```
`Fragment Two - React Component`
```typescript
import React, { useState, useEffect } from 'react';
function SubscriberComponent() {
const [isFavorite, setFavorite] = useState(false);
useEffect(() => {
function handleSubscribe(favorite: boolean) {
setFavorite(favorite);
}
eventBus.register('namespace:eventName', { type: 'boolean' });
const sub = eventBus.subscribe('namespace:eventName', handleSubscribe);
return function cleanup() {
sub.unsubscribe();
};
}, []);
return isFavorite ? 'This is a favorite' : 'This is not interesting';
}
```
### Advanced Schema
Following is an example of a more a more complex use-case with a larger [JSON schema draft-04](https://tools.ietf.org/html/draft-zyp-json-schema-04) and registration on multiple channels.
`JSON Schema`
```json
{
"type": "object",
"required": ["name", "amount", "price"],
"properties": {
"name": {
"type": "string"
},
"amount": {
"type": "string"
},
"price": {
"type": "number"
},
"organic": {
"type": "boolean"
},
"stores": {
"type": "array",
"items": {
"type": "object",
"required": [],
"properties": {
"name": {
"type": "string"
},
"url": {
"type": "string"
}
}
}
}
}
}
```
`Fragment - Angular Component`
```typescript
import { Component } from '@angular/core';
import eventSchema from './event-schema.json';
@Component({
selector: 'app-store',
template: 'Add to cart',
})
export class StoreComponent implements OnInit, OnDestroy {
private subs: { unsubscribe(): void }[] = [];
ngOnInit() {
// Register on add to cart channel
eventBus.register('store:addToCart', eventSchema);
// No need to register if no schema is required
this.sub.push(eventBus.subscribe('store:newDeals', this.onNewDeals));
}
onNewDeals() {
/* handle new deals ... */
}
onSend() {
eventBus.publish('store:addToCart', {
name: 'Milk',
amount: '1000 ml',
price: 0.99,
organic: true,
stores: [
{
name: 'ACME Food AB',
url: 'acme-food.com',
},
],
});
}
ngOnDestroy() {
this.subs.forEach((sub) => sub.unsubscribe());
}
}
```
## API
### Register
Register a schema for the specified event type and equality checking on subsequent registers. Subsequent registers must use an equal schema or an error will be thrown.
```typescript
register(channel: string, schema: object): boolean;
```
#### Parameters
| Name | Type | Description |
| ------- | -------- | ---------------------------------------------------- |
| channel | `string` | name of event channel to register schema to |
| schema | `object` | all communication on channel must follow this schema |
**Returns** - returns true if event channel already existed of false if a new one was created.
---
### Unregister
Unregister the schema for the specified event type if channel exists.
```typescript
unregister(channel: string): boolean;
```
#### Parameters
| Name | Type | Description |
| ------- | -------- | ----------------------------------------------- |
| channel | `string` | name of event channel to unregister schema from |
**Returns** - returns true if event channel existed and an existing schema was removed.
---
### Subscribe
Subscribe to an event channel triggering callback on received event matching type,
with an optional replay of last event at initial subscription.
The channel may be the wildcard `'*'` to subscribe to all channels.
```typescript
subscribe(channel: string, callback: Callback): { unsubscribe(): void };
subscribe(channel: string, replay: boolean, callback: Callback): { unsubscribe(): void };
```
Callbacks will be fired when event is published on a subscribed channel with the argument:
```typescript
{
channel: string,
payload: T,
}
```
#### Parameters
| Name | Type | Description |
| -------- | --------------- | --------------------------------------------------------------- |
| channel | `string` | name of event channel to receive data from |
| replay | `boolean=false` | flag indicating if initial description should return last event |
| callback | `function` | function executed on when event channel receives new data |
**Returns** - object containing an unsubscribe method
---
### Publish
Publish to event channel with an optional payload triggering all subscription callbacks.
```typescript
publish(channel: string, payload?: T): void;
```
#### Parameters
| Name | Type | Description |
| ------- | -------- | ---------------------------------------- |
| channel | `string` | name of event channel to send payload on |
| payload | `any` | payload to be sent |
**Returns** - void
---
### Get Latest
Get the latest published payload on the specified event channel.
```typescript
getLatest(channel: string): T | undefined;
```
#### Parameters
| Name | Type | Description |
| ------- | -------- | ---------------------------------------------------------- |
| channel | `string` | name of the event channel to fetch the latest payload from |
**Returns** - the latest payload or `undefined`
---
### Get Schema
Get the schema registered on the specified event channel.
```typescript
getSchema(channel: string): any | undefined;
```
#### Parameters
| Name | Type | Description |
| ------- | -------- | -------------------------------------------------- |
| channel | `string` | name of the event channel to fetch the schema from |
**Returns** - the schema or `undefined`