EventBusLib

EventBusLib is an event bus library for Angular designed to facilitate communication between components in multirepo micro frontend architectures. It allows you to choose between different event handling strategies: pubsub-js, postMessage, and custom events. This flexibility makes it ideal for applications composed of multiple micro frontends that need to communicate with each other seamlessly.

Table of Contents

• Installation
• Usage
  • Getting Started
  • Using Different EventBus Types
  • Example: Communication Between Micro Frontends
• API Documentation
• Build
• Publishing
• Running Unit Tests
• Contributing

Installation

To install the library, you can use npm:

npm install @adrawash1999/event-bus-lib

Usage

Getting Started

1. Import the EventBus and EventBusFactory: Start by importing EventBus and EventBusFactory in your Angular component or service.

   import { EventBus, EventBusFactory } from '@adrawash1999/event-bus-lib';

2. Inject EventBusFactory: In your constructor, inject the EventBusFactory to retrieve the desired event bus implementation.

   export class YourComponent {
     private eventBus: EventBus;
   
     constructor(private eventBusFactory: EventBusFactory) {
       // Here you can choose the type of event bus you want to use
       this.eventBus = this.eventBusFactory.getEventBus('postmessage');
     }
   }

Using Different EventBus Types

The library supports the following event bus implementations:

• pubsub: Utilizes the pubsub-js library for event handling.
• custom-event: Uses the built-in CustomEvent API for custom event dispatching.
• postmessage: Leverages the postMessage API for inter-window communication, making it suitable for micro frontends on different domains.

To use a specific type, call getEventBus(type) and pass the desired type:

this.eventBus = this.eventBusFactory.getEventBus('pubsub'); // or 'custom-event' or 'postmessage'

Example: Communication Between Micro Frontends

Here’s a simple example showcasing how to use the EventBusLib to establish communication between micro frontends:

Micro Frontend 1:

// In Micro Frontend 1 Component
import { Component } from '@angular/core';
import { EventBus, EventBusFactory } from '@adrawash1999/event-bus-lib';

@Component({
  selector: 'app-micro-frontend1',
  templateUrl: './micro-frontend1.component.html',
})
export class MicroFrontend1Component {
  private eventBus: EventBus;

  constructor(private eventBusFactory: EventBusFactory) {
    this.eventBus = this.eventBusFactory.getEventBus('postmessage');
    this.subscribeToEvents();
  }

  private subscribeToEvents(): void {
    this.eventBus.subscribe('shared_event', (msg, data) => {
      console.log(`Received in MF1: ${msg}`, data);
    });
  }

  public triggerEvent(): void {
    this.eventBus.publish('shared_event', { info: 'Hello from Micro Frontend 1!' });
  }
}

Micro Frontend 2:

// In Micro Frontend 2 Component
import { Component } from '@angular/core';
import { EventBus, EventBusFactory } from '@adrawash1999/event-bus-lib';

@Component({
  selector: 'app-micro-frontend2',
  templateUrl: './micro-frontend2.component.html',
})
export class MicroFrontend2Component {
  private eventBus: EventBus;

  constructor(private eventBusFactory: EventBusFactory) {
    this.eventBus = this.eventBusFactory.getEventBus('postmessage');
    this.subscribeToEvents();
  }

  private subscribeToEvents(): void {
    this.eventBus.subscribe('shared_event', (msg, data) => {
      console.log(`Received in MF2: ${msg}`, data);
    });
  }
}

API Documentation

EventBus Interface

Methods

• publish(eventName: string, data: any): void

  • Publishes an event with the specified name and associated data.

• subscribe(eventName: string, callback: (msg: string, data: any) => void): void

  • Subscribes to an event and executes the callback when the event is published.

• unsubscribe(eventName: string): void

  • Unsubscribes from the specified event.

Build

Run the following command to build the library:

ng build event-bus-lib

The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build, navigate to the dist folder and run:

cd dist/event-bus-lib
npm publish --access public

Running Unit Tests

To execute the unit tests via Karma, run:

ng test event-bus-lib

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes.

For any issues or feature requests, please use the issue tracker.

License

This project is licensed under the MIT License. See the LICENSE file for details.