{"id":23338222,"url":"https://github.com/paritosh64ce/rxjs-pub-sub","last_synced_at":"2025-04-09T22:31:04.351Z","repository":{"id":65799602,"uuid":"144892389","full_name":"paritosh64ce/rxjs-pub-sub","owner":"paritosh64ce","description":":bell: 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).","archived":false,"fork":false,"pushed_at":"2025-03-28T22:37:50.000Z","size":2834,"stargazers_count":24,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T19:17:37.503Z","etag":null,"topics":["component-communication","events","javascript","observables","pub-sub","publish","publish-subscribe","rxjs","subscribe"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paritosh64ce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-15T19:02:25.000Z","updated_at":"2024-12-17T05:40:55.000Z","dependencies_parsed_at":"2024-03-29T07:23:32.961Z","dependency_job_id":"f9ad02c8-c3c4-4936-8870-ce2a482b38a3","html_url":"https://github.com/paritosh64ce/rxjs-pub-sub","commit_stats":null,"previous_names":["paritosh64ce/rxjs-pub-sub","paritosh64ce/ngx-pub-sub"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritosh64ce%2Frxjs-pub-sub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritosh64ce%2Frxjs-pub-sub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritosh64ce%2Frxjs-pub-sub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritosh64ce%2Frxjs-pub-sub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paritosh64ce","download_url":"https://codeload.github.com/paritosh64ce/rxjs-pub-sub/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248123384,"owners_count":21051459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-communication","events","javascript","observables","pub-sub","publish","publish-subscribe","rxjs","subscribe"],"created_at":"2024-12-21T03:12:47.618Z","updated_at":"2025-04-09T22:31:04.271Z","avatar_url":"https://github.com/paritosh64ce.png","language":"HTML","funding_links":["https://www.paypal.me/paritosh64patel"],"categories":[],"sub_categories":[],"readme":"# 🔔 rxjs-pub-sub 🔔\n\nEvent 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.\nThis library can work with any of your JavaScript code. You just need RxJs along with it. \n\n[![npm](https://img.shields.io/npm/v/@pscoped/rxjs-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/rxjs-pub-sub)\n[![npm](https://img.shields.io/npm/dt/@pscoped/rxjs-pub-sub.svg)](https://www.npmjs.com/package/@pscoped/rxjs-pub-sub)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/paritosh64ce/rxjs-pub-sub/blob/master/LICENSE)\n[![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/paritosh64patel)\n\n[![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)\n[![Static Badge](https://img.shields.io/badge/Coverage-98.18%25-brightgreen)](https://github.com/paritosh64ce/rxjs-pub-sub/blob/master/coverage/rxjs-pub-sub/index.html)\n\n\n\n## [Live Demo Link](https://pscoped-rxjs-pub-sub-demo.stackblitz.io)\n\n## What makes this package special?\n\n1. Simplicity\n\n    - Publish you data\n    ```typescript\n    rxjsPubSub.publishEvent('eventName', data)\n    ```\n    - Subscribe to your event\n    ```typescript\n    rxjsPubSub.subscribe('eventName', (data: any) =\u003e { /* your callback */ })\n    ```\n\n2. Unique feature\n    - This service also supports historical values even for new subscribers.\n    ```typescript\n    rxjsPubSub.publishWithHistory('eventName', data)   /* new subscribers can have historical values */\n    rxjsPubSub.publishWithLast('eventName', data)      /* new subscribers can have last published values */\n    ```\n\n## How to use\n\n1. Install the package.\n\n    ```console\n    npm i @pscoped/rxjs-pub-sub --save\n    ```\n\n    \u003e I had to scope ( `@pscoped` ) my package with something, because another package having similar name was already published.\n\n2. - Import the service in your project; be it Angular, React, Vue, or even Vanilla JavaScript code\n    ``` typescript\n    import { rxjsPubSub } from '@pscoped/rxjs-pub-sub';\n    ```\n\n3. Register the events if you'd like to support events with last or historical values.\n\n    ```typescript\n    const latestEvent = 'randomLast';\n    const historicalEvent = 'randomHistory';\n\n    rxjsPubSub.registerEventWithHistory(historicalEvent, 6);\n    rxjsPubSub.registerEventWithLastValue(latestEvent, undefined);\n    ```\n\n4. Use `rxjsPubSub` and subscribe to your event.\n\n    ```typescript\n    export class SubscriberComponent implements OnDestroy {\n        \n        subscription1: Subscription;\n        subscription2: Subscription;\n        subscription3: Subscription;\n        myNumber1: number;\n        myNumber2: number;\n        myNumber3: number;\n\n        constructor() { }\n\n        ngOnInit() {\n            this.subscription1 = rxjsPubSub.subscribe('randomNormal', data =\u003e this.myNumber1 = data);\n            this.subscription2 = rxjsPubSub.subscribe('randomHistory', data =\u003e this.myNumber2 = data);\n            this.subscription3 = rxjsPubSub.subscribe('randomLast', data =\u003e this.myNumber3 = data);\n        }\n\n        ngOnDestroy() {\n            this.subscription1.unsubscribe();\n            this.subscription2.unsubscribe();\n            this.subscription3.unsubscribe();\n        }\n    }\n    ```\n\n5. And publish the event.\n\n    ```typescript\n    export class PublisherComponent {\n\n        normalEvent = 'randomNormal';\n        historicalEvent = 'randomHistory';\n        latestEvent = 'randomLast';\n\n        random: number;\n        constructor() { }\n\n        publish() {\n            this.random = Math.floor(Math.random() * 100);\n\n            rxjsPubSub.publishEvent(this.normalEvent, this.random);\n            rxjsPubSub.publishWithHistory(this.historicalEvent, this.random);\n            rxjsPubSub.publishWithLast(this.latestEvent, this.random);\n        }\n    }\n    ```\n\u003e Note: Here Angular code is shown just for the sake of an example. You could use this library with any of your Javascript project (React, Vue, etc) including vanilla JavaScript and TypeScript.\n\n\n## Ground Rules\n\n\u003e Note: Here normal event means event's data will be vanished if no subscriber is there at the time of publishing the event. Historical values or last value will not be provided to the subscribers for such events.\n\n1. An event has to be registered if last value or historical values have to be supported.\n2. 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.\n3. 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.\n4. You can register the events anywhere in your code, however, we recommand to have it at one place only,\ni.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)\n\nIf 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.\n\n### Below is how the demo application looks like.\n\n![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\")  \n _@pscoped/ngx-pub-sub or @pscoped/rxjs-pub-sub - both's demo apps are kind of same_\n\n## About the library\n* Motivation: https://www.npmjs.com/package/@pscoped/ngx-pub-sub\n  * This library has been used by many Angular developers.\n  * I wanted to make it available to even broader audience.\n\n\n## Developing and Contributing\n\u003e The repository also comes with the demo application. Check the Github repo link.\n\n### Development server\n\n```console\ngit clone https://github.com/paritosh64ce/rxjs-pub-sub.git\ncd rxjs-pub-sub\nnpm i\nnpm start\n```\n\nThis will start the server for the demo application.\n\nNavigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n\n### Running unit tests\n\n1. Run `npm run test:lib` to execute the `rxjs-pub-sub` library test cases.\n2. Run `npm run coverage:lib` to generate the code-coverage report.\n\n\n\u003e Make sure to update the tests if you submit a PR, the CI will be affected if any of the tests fails.\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) using [Nrwl Nx](https://nrwl.io/nx).\n\n\n## TODO:\n1. Coverage badge for README\n1. Lint integration\n\n\n## Change Log\n\n\u003e 0.0.1 - 1.0.1:  \n\u003e Basic functionality from `@pscoped/ngx-pub-sub` and README file updates\n\n### Like this work? [Star this repository](https://github.com/paritosh64ce/rxjs-pub-sub/stargazers) on GitHub\n\n### Support\n[![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/paritosh64patel)\n\nMotivate, Become a sponsor and get your logo on README with a link to your site. [Become a sponsor](https://simplifyingtechblog.wordpress.com/contact/)\n\n### Got any issue or some feature request on your mind? Post it [here](https://github.com/paritosh64ce/rxjs-pub-sub/issues)!\n\n## License\n\nMIT @ [paritosh64ce](https://github.com/paritosh64ce)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparitosh64ce%2Frxjs-pub-sub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparitosh64ce%2Frxjs-pub-sub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparitosh64ce%2Frxjs-pub-sub/lists"}