Skip to content

Commit

Permalink
README updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@paritosh64ce
paritosh64ce committed Apr 12, 2024
1 parent 7e4a576 commit f76c2ee
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 101 deletions.
140 changes: 52 additions & 88 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,64 @@
# 🔔 NgxPubSub 🔔
# 🔔 rxjs-pub-sub 🔔

Event publish - subscribe mechanism as Angular service using Observable. You can publish your event along with any data to all the subscribers of your event (event identification is being done using event-name as string). This library also supports historical published values for the new subscribers.
Event publish - subscribe mechanism as Javascript library using Observable. You can publish your event along with any data to all the subscribers of your event (event identification is being done using event-name as string). This library also supports historical published values for the new subscribers.
This library can work with any of your JavaScript code. You just need RxJs along with it.

[![Build Status](https://travis-ci.com/paritosh64ce/ngx-pub-sub.svg?branch=master)](https://travis-ci.com/paritosh64ce/ngx-pub-sub)
[![npm](https://img.shields.io/npm/v/@pscoped/ngx-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/ngx-pub-sub)
[![npm](https://img.shields.io/npm/dt/@pscoped/ngx-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/ngx-pub-sub)
[![npm](https://img.shields.io/github/license/paritosh64ce/ngx-pub-sub.svg)](https://github.com/paritosh64ce/ngx-pub-sub/blob/master/LICENSE)
[![Build Status](https://github.com/paritosh64ce/rxjs-pub-sub/actions/workflows/main.yml/badge.svg)](https://github.com/paritosh64ce/rxjs-pub-sub/actions/workflows/main.yml)
[![npm](https://img.shields.io/npm/v/@pscoped/rxjs-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/rxjs-pub-sub)
[![npm](https://img.shields.io/npm/dt/@pscoped/rxjs-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/rxjs-pub-sub)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/paritosh64ce/rxjs-pub-sub/blob/master/LICENSE)
[![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/paritosh64patel)


[![Dependency Status](https://img.shields.io/david/paritosh64ce/ngx-pub-sub.svg)](https://david-dm.org/paritosh64ce/ngx-pub-sub.svg)
[![devDependency Status](https://img.shields.io/david/dev/paritosh64ce/ngx-pub-sub.svg)](https://david-dm.org/paritosh64ce/ngx-pub-sub.svg#info=devDependencies)
[![codecov](https://codecov.io/gh/paritosh64ce/ngx-pub-sub/branch/master/graph/badge.svg)](https://codecov.io/gh/paritosh64ce/ngx-pub-sub)

Now supports Angular 16 as well!

| Angular | @pscoped/ngx-pub-sub |
|-----------|-----------------------|
till 15 | 5.0.0
16 | 6.0.0

## [Live Demo Link](https://pscoped-ngx-pub-sub-demo.stackblitz.io/)
## [Live Demo Link](https://pscoped-rxjs-pub-sub-demo.stackblitz.io)

## What makes this package special?

1. Simplicity

- Publish you data
```typescript
service.publishEvent('eventName', data)
rxjsPubSub.publishEvent('eventName', data)
```
- Subscribe to your event
```typescript
service.subscribe('eventName', (data: any) => { /* your callback */ })
rxjsPubSub.subscribe('eventName', (data: any) => { /* your callback */ })
```

2. Unique feature
- This service also supports historical values even for new subscribers.
```typescript
service.publishWithHistory('eventName', data) /* new subscribers can have historical values */
service.publishWithLast('eventName', data) /* new subscribers can have last published value */
rxjsPubSub.publishWithHistory('eventName', data) /* new subscribers can have historical values */
rxjsPubSub.publishWithLast('eventName', data) /* new subscribers can have last published values */
```

## How to use

1. Install the module.
1. Install the package.

```console
npm i @pscoped/ngx-pub-sub --save
npm i @pscoped/rxjs-pub-sub --save
```

> I had to scope ( `@pscoped` ) my package with something, because another package having similar name was already published for AngularJS (v 1.x)
> I had to scope ( `@pscoped` ) my package with something, because another package having similar name was already published.

2. Import `NgxPubSub` module into your module

```typescript
import { NgxPubSubModule } from '@pscoped/ngx-pub-sub';

@NgModule({
....
imports: [
.....
NgxPubSubModule
],
....
})
export class AppModule {}
2. - Import the service in your project; be it Angular, React, Vue, or even Vanilla JavaScript code
``` typescript
import { rxjsPubSub } from '@pscoped/rxjs-pub-sub';
```

3. Register the events if you'd like to support events with last or historical values.

```typescript
export class AppComponent {
latestEvent = 'randomLast';
historicalEvent = 'randomHistory';
const latestEvent = 'randomLast';
const historicalEvent = 'randomHistory';

constructor(pubsubSvc: NgxPubSubService) {
pubsubSvc.registerEventWithHistory(this.historicalEvent, 6);
pubsubSvc.registerEventWithLastValue(this.latestEvent, undefined);
}
}
rxjsPubSub.registerEventWithHistory(historicalEvent, 6);
rxjsPubSub.registerEventWithLastValue(latestEvent, undefined);
```

4. Use `NgxPubSubService` and subscribe to your event.
4. Use `rxjsPubSub` and subscribe to your event.

```typescript
export class SubscriberComponent implements OnDestroy {
Expand All @@ -93,15 +70,12 @@ till 15 | 5.0.0
myNumber2: number;
myNumber3: number;

constructor(private pubSub: NgxPubSubService) { }
constructor() { }

ngOnInit() {
this.subscription1 = this.pubSub.subscribe('randomNormal',
data => this.myNumber1 = data);
this.subscription2 = this.pubSub.subscribe('randomHistory',
data => this.myNumber2 = data);
this.subscription3 = this.pubSub.subscribe('randomLast',
data => this.myNumber3 = data);
this.subscription1 = rxjsPubSub.subscribe('randomNormal', data => this.myNumber1 = data);
this.subscription2 = rxjsPubSub.subscribe('randomHistory', data => this.myNumber2 = data);
this.subscription3 = rxjsPubSub.subscribe('randomLast', data => this.myNumber3 = data);
}

ngOnDestroy() {
Expand All @@ -122,17 +96,19 @@ till 15 | 5.0.0
latestEvent = 'randomLast';

random: number;
constructor(private pubsub: NgxPubSubService) { }
constructor() { }

publish() {
this.random = Math.floor(Math.random() * 100);

this.pubsub.publishEvent(this.normalEvent, this.random);
this.pubsub.publishWithHistory(this.historicalEvent, this.random);
this.pubsub.publishWithLast(this.latestEvent, this.random);
rxjsPubSub.publishEvent(this.normalEvent, this.random);
rxjsPubSub.publishWithHistory(this.historicalEvent, this.random);
rxjsPubSub.publishWithLast(this.latestEvent, this.random);
}
}
```
> Note: Just for example here Angular code is show. However, you could use this library with any of your Javascript project (React, Vue, etc).


## Ground Rules

Expand All @@ -142,24 +118,31 @@ till 15 | 5.0.0
2. Once event name is registered for a type (to support either normal, last value support or historical value support), the same name cannot be used to publish/subscribe for another type unless it is completed by someone.
3. Normal events need not to be registered. If event is not found at the time of publishing or subscribing, the same will be registered as a normal event.
4. You can register the events anywhere in your code, however, we recommand to have it at one place only,
i.e. inside the root component of your application, like what you see in [app.component.ts](https://github.com/paritosh64ce/ngx-pub-sub/blob/master/apps/test-app/src/app/app.component.ts)
i.e. inside the root component of your application, like what you see in [app.component.ts](https://github.com/paritosh64ce/rxjs-pub-sub/blob/master/apps/test-app/src/app/app.component.ts)

If an event having name 'randomHistory' is registered to support historical values, the same event name cannot be used to register or publish event with other type (i.e. last value support or normal event) unless it is completed programmatically.

### Below is how the demo application looks like.

![Demo Screenshot](https://raw.githubusercontent.com/paritosh64ce/ngx-pub-sub/master/apps/test-app/src/assets/demo-img-2.gif "ngx-pub-sub demo screenshot")
![Demo Screenshot](https://raw.githubusercontent.com/paritosh64ce/rxjs-pub-sub/master/apps/test-app/src/assets/demo-img-2.gif "rxjs-pub-sub demo screenshot")
_@pscoped/ngx-pub-sub or @pscoped/rxjs-pub-sub - both's demo apps are kind of same_

## About the library
* Motivation: https://www.npmjs.com/package/@pscoped/ngx-pub-sub
* This library has been used by many Angular developers.
* I wanted to make it available to even broader audience.


## Developing and Contributing
> The repository also comes with the demo application. Check the Github repo link.

### Development server

```console
git clone https://github.com/paritosh64ce/ngx-pub-sub.git
cd ngx-pub-sub
git clone https://github.com/paritosh64ce/rxjs-pub-sub.git
cd rxjs-pub-sub
npm i
ng serve
npm start
```

This will start the server for the demo application.
Expand All @@ -169,7 +152,7 @@ Navigate to `http://localhost:4200/`. The app will automatically reload if you c

### Running unit tests

1. Run `npm run test:lib` to execute the `ngx-pub-sub` library test cases.
1. Run `npm run test:lib` to execute the `rxjs-pub-sub` library test cases.
2. Run `npm run coverage:lib` to generate the code-coverage report.


Expand All @@ -182,42 +165,23 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
1. Update README for @pscoped/rxjs-pub-sub
1. Publish @pscoped/rxjs-pub-sub
1. Update the README for @pscoped/ngx-pub-sub, add link to new package, publish
1. uglify the dist content for publish
1. Coverage integration with CI
1. Coverage badge for README
1. Lint integration


## Change Log

> 1.0.0 - 1.0.3:
> Basic functionality and README file updates
> 2.0.0
> Now subscribers can have last or historical values for the event published based on the type the event is registered with.
> 2.0.1 - 2.0.3
> Dev-dependencies and README file updates
> 3.0.0
> Dependencies updated with Angular 8
> 3.0.1 - 3.0.2
> Removed deprecation attribute for `getEventObservable`, added funding to `package.json`
> 5.0.0
> Compatible with Angular 15
> 6.0.0
> Compatible with Angular 16
> 0.0.1 - 1.0.0:
> Basic functionality from `@pscoped/ngx-pub-sub` and README file updates
### Like this work? [Star this repository](https://github.com/paritosh64ce/ngx-pub-sub/stargazers) on GitHub
### Like this work? [Star this repository](https://github.com/paritosh64ce/rxjs-pub-sub/stargazers) on GitHub

### Support
[![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/paritosh64patel)

Motivate, Become a sponsor and get your logo on README with a link to your site. [Become a sponsor](https://simplifyingtechblog.wordpress.com/contact/)

### Got any issue or some feature request on your mind? Post it [here](https://github.com/paritosh64ce/ngx-pub-sub/issues)!
### Got any issue or some feature request on your mind? Post it [here](https://github.com/paritosh64ce/rxjs-pub-sub/issues)!

## License

Expand Down
23 changes: 10 additions & 13 deletions libs/rxjs-pub-sub/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
Event publish - subscribe mechanism as Javascript library using Observable. You can publish your event along with any data to all the subscribers of your event (event identification is being done using event-name as string). This library also supports historical published values for the new subscribers.
This library can work with any of your JavaScript code. You just need RxJs along with it.

[![Build Status](https://github.com/paritosh64ce/ngx-pub-sub/actions/workflows/main.yml/badge.svg)](https://github.com/paritosh64ce/ngx-pub-sub/actions/workflows/main.yml)
[![Build Status](https://github.com/paritosh64ce/rxjs-pub-sub/actions/workflows/main.yml/badge.svg)](https://github.com/paritosh64ce/rxjs-pub-sub/actions/workflows/main.yml)
[![npm](https://img.shields.io/npm/v/@pscoped/rxjs-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/rxjs-pub-sub)
[![npm](https://img.shields.io/npm/dt/@pscoped/rxjs-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/rxjs-pub-sub)
[![npm](https://img.shields.io/github/license/paritosh64ce/ngx-pub-sub.svg)](https://github.com/paritosh64ce/ngx-pub-sub/blob/master/LICENSE)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/paritosh64ce/rxjs-pub-sub/blob/master/LICENSE)
[![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/paritosh64patel)


Expand Down Expand Up @@ -118,13 +118,14 @@ This library can work with any of your JavaScript code. You just need RxJs along
2. Once event name is registered for a type (to support either normal, last value support or historical value support), the same name cannot be used to publish/subscribe for another type unless it is completed by someone.
3. Normal events need not to be registered. If event is not found at the time of publishing or subscribing, the same will be registered as a normal event.
4. You can register the events anywhere in your code, however, we recommand to have it at one place only,
i.e. inside the root component of your application, like what you see in [app.component.ts](https://github.com/paritosh64ce/ngx-pub-sub/blob/master/apps/test-app/src/app/app.component.ts)
i.e. inside the root component of your application, like what you see in [app.component.ts](https://github.com/paritosh64ce/rxjs-pub-sub/blob/master/apps/test-app/src/app/app.component.ts)

If an event having name 'randomHistory' is registered to support historical values, the same event name cannot be used to register or publish event with other type (i.e. last value support or normal event) unless it is completed programmatically.

### Below is how the demo application looks like.

![Demo Screenshot](https://raw.githubusercontent.com/paritosh64ce/ngx-pub-sub/master/apps/test-app/src/assets/demo-img-2.gif "ngx-pub-sub demo screenshot")
![Demo Screenshot](https://raw.githubusercontent.com/paritosh64ce/rxjs-pub-sub/master/apps/test-app/src/assets/demo-img-2.gif "rxjs-pub-sub demo screenshot")
_@pscoped/ngx-pub-sub or @pscoped/rxjs-pub-sub - both's demo apps are kind of same_

## About the library
* Motivation: https://www.npmjs.com/package/@pscoped/ngx-pub-sub
Expand All @@ -138,8 +139,8 @@ If an event having name 'randomHistory' is registered to support historical valu
### Development server

```console
git clone https://github.com/paritosh64ce/ngx-pub-sub.git
cd ngx-pub-sub
git clone https://github.com/paritosh64ce/rxjs-pub-sub.git
cd rxjs-pub-sub
npm i
npm start
```
Expand All @@ -161,11 +162,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular


## TODO:
1. Update README for @pscoped/rxjs-pub-sub
1. Publish @pscoped/rxjs-pub-sub
1. Update the README for @pscoped/ngx-pub-sub, add link to new package, publish
1. uglify the dist content for publish
1. Coverage integration with CI
1. Coverage badge for README
1. Lint integration


Expand All @@ -174,14 +171,14 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
> 0.0.1 - 1.0.0:
> Basic functionality from `@pscoped/ngx-pub-sub` and README file updates
### Like this work? [Star this repository](https://github.com/paritosh64ce/ngx-pub-sub/stargazers) on GitHub
### Like this work? [Star this repository](https://github.com/paritosh64ce/rxjs-pub-sub/stargazers) on GitHub

### Support
[![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/paritosh64patel)

Motivate, Become a sponsor and get your logo on README with a link to your site. [Become a sponsor](https://simplifyingtechblog.wordpress.com/contact/)

### Got any issue or some feature request on your mind? Post it [here](https://github.com/paritosh64ce/ngx-pub-sub/issues)!
### Got any issue or some feature request on your mind? Post it [here](https://github.com/paritosh64ce/rxjs-pub-sub/issues)!

## License

Expand Down

0 comments on commit f76c2ee

Please sign in to comment.