Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/TheVishnuKumar/one-pub-sub-lwc

One PubSub: A Declarative PubSub Library for Lightning Web Component and Aura Component
https://github.com/TheVishnuKumar/one-pub-sub-lwc

0to1code aura lightning-web-component lightning-web-components lwc pub-sub pubsub salesforce

Last synced: about 2 months ago
JSON representation

One PubSub: A Declarative PubSub Library for Lightning Web Component and Aura Component

Awesome Lists containing this project

README 

        
One PubSub: A Declarative PubSub Library for Lightning Web Component and Aura Component

-------------





  One Pub Sub








  Deploy to Salesforce




Blog: http://www.0to1code.com/one-pubsub-a-pubsub-library-for-lightning-web-component-and-aura-component/



Features

-------------

- Subscribe and handle PubSub events **declaratively**.

- **namespace** to define the group the events.

- **namespace** based publisher to publish a group of events based on the namespace.

- **pagereference** to consider the event basis on the current page reference.

- Fire the event using **timeout**. This will allows you to perform the action on after defined timeframe.

- One framework for PubSub that works in both **LWC and Aura Component**.

- Reduces code errors.

- **Uniformity** across the LWC and Aura Components to use the PubSub events.

- The pattern of use is quite the same as the Aura Component events. Easy for the Aura Component Developers.



Documentation

-------------

**One Library:** This is a PubSub library to fire and handle events. It is a single solution that can be used in LWC and Aura when it comes to PubSub. It allows you to send and receive an event from:

1. LWC to LWC

2. LWC to Aura

3. Aura to LWC

4. Aura to Aura



The uniformity of using the one library allows you to write the code less error-prone.



**Register Event:**



A. Registering event in Aura Component:


```html



```



B. Registering event in LWC:


```html



```



**Handling Events:**



A. Handling event in Aura Component:


```html



```



B. Handling event in LWC:


```html



```



Attributes

----------

This component has three types of attributes.

1. **name**: This is the required attribute. Define the name of the PubSub event to subscribe and fire.



2. **namespace**: This is an optional attribute. It does allow you to bundle the events for a particular feature/module.


Ex: If you have 6 components on the same screen and 3 - 3 components are related to some functionality. You can separate them using the namespace. You can have 'refresh-list' event name in both the module.

It also allows publishing event basis on the namespace. All of the events that are in the same namespace will be published.



3. **timeout**: This is an optional attribute. The supported type is number and it does take input of milliseconds. If this is defined then the event will be fired after the defined milliseconds in the timeout. It can also be modified on the runtime in the code.

Ex:

```javascript

3.1)LWC: 

let pubsubCmp = this.template.querySelector('.CLASS_NAME');

pubsubCmp.timeout = 5000;

pubsubCmp.publish('Fired Event from LWC.')

```



```javascript

3.2) Aura: 

let pubsubCmp = component.find("AURA_ID");

pubsubCmp.timeout = 5000;

pubsubCmp.publish('Fired Event from Aura Component.');

```



4. **pagereference**: This is an optional attribute. If this is true then register and handlers both respect the current page reference. If this is being used then make sure that both register and handler should have this property marked as true.



Events

------

This component has one type of event.

1. **onaction**: This event fire when any subscribed event received. It returns the data that is passed in the event firing.

You can get payload from this:

```javascript

1.1) LWC: event.detail.payload;

1.2) Aura: event.getParam('payload');

```



Methods

----------

This component three types of method that you can use to fire, register and unregister the PubSub event.

1. **publish()**: It will fire the pubsub event. It does also accept the data. You can fire the event:

```javascript

1.1) LWC: this.template.querySelector('.CLASS_NAME').fire('Fired Event from LWC.');

1.2) Aura: component.find("AURA_ID").fire('Fired Event from Aura Component.');

```



2. **publishToNamespace()**: It will fire the pubsub event for all the evenet that comes in the specified namespace. It does also accept the data. You can fire the event:

```javascript

1.1) LWC: this.template.querySelector('.CLASS_NAME').publishToNamespace('Fired All Events from LWC.');

1.2) Aura: component.find("AURA_ID").publishToNamespace('Fired All Events from Aura Component.');

```



3. **subscribe()**: It will subscribe the pubsub event. You can subscribe the event:

```javascript

2.1) LWC: this.template.querySelector('.CLASS_NAME').subscribe();

2.2) Aura: component.find("AURA_ID").subscribe();

```



4. **unsubscribe()**: It will unsubscribe the pubsub event. You can unsubscribe the event:

```javascript

3.1) LWC: this.template.querySelector('.CLASS_NAME').unsubscribe();

3.2) Aura: component.find("AURA_ID").unsubscribe();

```



**Want to contribute?** Fork the repo and create the pull request.



Code on  gist



Release

-------------

v1.0: Initial Release



v1.1: 

1. Added register api

1. Added unregister api



v1.2: 

1. Added timeout event firing. Fire an event after a defined time.



v1.3

1. Renamed all the components to provide Aura Component alike syntax.

2. publishToNamespace method to fire all the events that are using the specified namespace.

3. Added Page Reference property to respect the current page reference while publishing and handling the events.