Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rproenza86/events-distributor
NPM Module. Enable the events/actions communication between Micro Frontend/UI applications. Vanilla javascript implementation. Framework agnostic. CI/CD release train. 100% meaningful unit test coverture.
https://github.com/rproenza86/events-distributor
chai codefactor micro-ui mocha npm-module travis-ci typescript typescript-library
Last synced: about 1 month ago
JSON representation
NPM Module. Enable the events/actions communication between Micro Frontend/UI applications. Vanilla javascript implementation. Framework agnostic. CI/CD release train. 100% meaningful unit test coverture.
- Host: GitHub
- URL: https://github.com/rproenza86/events-distributor
- Owner: rproenza86
- License: gpl-3.0
- Created: 2018-12-21T21:56:08.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-12T14:19:56.000Z (almost 6 years ago)
- Last Synced: 2024-12-15T15:08:23.927Z (about 1 month ago)
- Topics: chai, codefactor, micro-ui, mocha, npm-module, travis-ci, typescript, typescript-library
- Language: JavaScript
- Homepage: https://micro-ui-system.firebaseapp.com/
- Size: 96.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# events-distributor
[](https://travis-ci.org/rproenza86/events-distributor)
[](https://www.codefactor.io/repository/github/rproenza86/events-distributor)
[](https://coveralls.io/github/rproenza86/events-distributor?branch=master)
[](https://www.npmjs.com/package/@rproenza/events-distributor)
[](https://www.npmjs.com/package/@rproenza/events-distributor)
[](https://github.com/rproenza86/events-distributor/blob/master/LICENSE)
> System to enable communication between Micro UI/Frontend applications
## Description
Node.js package to use as NPM module. It will work as a helper utility to support Micro UI/Frontend architectures allowing the event communications among applications or modules.
The use of the `events-distributor` enable the proper encapsulation, low coupling and high cohesion which all scalable system must to have in order to achieve total indecency on his release train and Software Development Life Circle.
## Table of Contents
- [Installation](#installation)
- [How to use](#usage)
- [Test](#test)
- [Contributing](#contributing)
- [Concepts](#concepts)
- [Support](#support)
- [License](#license)
## Installation
```sh
npm install @rproenza/events-distributor --save
yarn add @rproenza/events-distributor
```
## Usage
### Module instantiation
```javascript
import GlobalEventDistributor from '@rproenza/events-distributor';
const eventDistributor = new GlobalEventDistributor();
```
### Application registration
```javascript
/**
* appStore = {
* dispatch: () => {},
* getStore: () => {}
* }
*/
eventDistributor.registerStore(appName, appStore);
```
### Events communications
#### Broadcasting event
```javascript
/**
* eventToBroadCast = {
* type: 'YOUR_GREAT_ACTION_SUCCESS,
* payload: {}
* }
*/
eventDistributor.dispatch(eventToBroadCast);
```
#### Sent event to specific application
```javascript
/**
* directEventToAppB = {
* type: 'YOUR_GREAT_APP_A_ACTION_SUCCESS,
* payload: {}
* }
*/
eventDistributor.dispatch(directEventToAppB, appB.name);
```
### Get an application state
```typescript
/**
* The function parameter is optional.
* If omitted it will be returned the parent's app state
*/
eventDistributor.getState(appTarget: string = '');
```
## Test
```sh
npm run test
```
## Contributing
*(see [Contributing Doc](CONTRIBUTING.md))
## Concepts
> This module was inspired by [redux](https://redux.js.org) and its actions communication system.
### Store
Object with a `dispatch` function.
Ex. this `appA.store` :
```javascript
// Applications
const appA = {
name: 'MicroAppA',
store: {
dispatch: function(event) {
// App's event manipulation
const appACatch = {
...event,
meta: 'Event catch on A'
};
// App logic
eventCatchQueue.push(appACatch);
}
}
};
```
### Events
Object passed as parameter to the `dispatch` function.
> The `events` objects are like Redux's actions. They could hold any structure but there is a preferred framework which will ensure the proper module functioning under good practices.
Ex. of a basic and well structured event:
```javascript
// Applications
const event = {
type: 'UPDATE_TEST_DRIVE_DAY',
payload:{
date: '2018-12-21T05:00:00.000Z'
},
meta: {
appSource: 'AppointmentDatePicker',
eventType: 'BROAD_CAST_ACTION',
state: {
testDrive: {
day: '2018-12-21T05:00:00.000Z',
email: '[email protected]',
firstName: 'Raul',
hasError: false,
isCalculating: false,
lastName: 'Proenza',
phone: '123-624-4321',
time: 'Morning'
}
}
}
};
```
## Support
Create an [Issue](https://github.com/rproenza86/events-distributor/issues) for any bug or feature request.
Expect a response within 2 business days after submitted your [bug report or feature request](https://github.com/rproenza86/events-distributor/issues). However, in many cases you'll see a response within 24 hours.
## License
[](https://github.com/rproenza86/events-distributor/blob/master/LICENSE)
- **[GNU General Public License version 3](LICENSE)**
- Copyright 2025 © Atomic Coders.