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

Reading Time: 4 minutes

LWC PubSub

About:

This blog is about PubSub events to communicate between LWC to LWC, Aura to Aura and LWC to Aura and vice versa.

This blog and One PubSub library are written while attending the at Hyderabad event. Great event!!!

Features

  • Subscribe and handle PubSub events using declaratively.
  • 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.
  • Use namespace to define the group the 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:
<c:one_register_event name=”EVENT_NAME” namespace=”astro” aura:id=”first-event”></c:one_register_event>

B. Registering event in LWC:
<c-one_register_event name=”EVENT_NAME” namespace=”astro” class=”first-event”></c-one_register_event>

Handling Events:

A. Handling event in Aura Component:
<c:one_event_handler name=”EVENT_NAME” namespace=”astro” onaction=”{!c.handleEvent}”></c:one_event_handler>

B. Handling event in LWC:
<c-one_event_handler name=”EVENT_NAME” namespace=”astro” onaction={handleEvent}></c-one_event_handler>

Attributes

This component has two 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.

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: 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. fire(): It will fire the pubsub event. It does also accept the data. You can fire the event:

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. register(): It will register the pubsub event. You can register the event:

2.1) LWC: this.template.querySelector(‘.CLASS_NAME’).register();

2.2) Aura: component.find(“AURA_ID”).register();

3. unregister(): It will unregister the PubSub event. You can unregister the event:

3.1) LWC: this.template.querySelector(‘.CLASS_NAME’).unregister();

3.2) Aura: component.find(“AURA_ID”).unregister();

One PubSub Flow

One PubSub for Lightning Web Component and Lightning Component

Example

We are having four components here for the demo. Two are LWC and two are Aura Component. These components will be firing events and the handling event.

Step 1. Create demo_component_1 lightning web component. This component is firing the event.

<template>
    <div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;">
        <h1 style="font-size: 15px;">LWC Component: Firing Event</h1>
        
        <!--Registering the event-->
        <c-one_register_event name="testevent" namespace="astro" class="first-event"></c-one_register_event>
        
        <!--Firing the event in the fireEvent method-->
        <lightning-button label="Fire Event From LWC" onclick={fireEvent}></lightning-button>
    </div>
</template>
import { LightningElement } from 'lwc';
export default class Demo_component_1 extends LightningElement {
    
    fireEvent(){
        //Getting the component using querySelector then firing the event using fire() method.
        this.template.querySelector('.first-event').fire('Fired Event from LWC.');
        
        /*
        You can use this way as well.
        let firstEvent = this.template.querySelector('.first-event');
        firstEvent.fire('Fired Event from LWC.');
        */
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="demo_component_1">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 2. Create demo_component_2 lightning web component. This component is handling the event.

<template>
    <div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;">
        <h1 style="font-size: 15px;">LWC Component: Handling Event</h1>
        
        <!--Handling the event using onaction event-->
        <c-one_event_handler name="testevent" namespace="astro" onaction={handleEvent}></c-one_event_handler>

        <br/>
        <!--Property to show the data from event-->
        {data}
    </div>
</template>
import { LightningElement,track } from 'lwc';

export default class Demo_component_2 extends LightningElement {
    @track data;

    handleEvent(event){
        //The data of event will be in the event.detail.payload
        this.data = event.detail.payload;
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="demo_component_2">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 3. Create aura_component_1 Aura Component. This component is handling the event.

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;">
        <h1 style="font-size: 15px;">Aura Component: Firing Event</h1>
        
        <!--Registering the event-->
        <c:one_register_event name="testevent" namespace="astro" aura:id="first-event"></c:one_register_event>
        
        <!--Firing the event in the fireEvent method-->
        <lightning:button label="Fire Event From Aura" onclick="{!c.fireEvent}"></lightning:button>
    </div>
</aura:component>
({
    fireEvent : function(component, event, helper) {
        //Getting the component using querySelector then firing the event using fire() method.
        component.find("first-event").fire('Fired Event from Aura Component.');
        
        /*
        You can use this way as well.
        var firstEvent = component.find("first-event");
        firstEvent.fire('Fired Event from Aura Component.');
        */
        
    }
})

Step 4. Create aura_component_2 Aura Component. This component is handling the event.

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="data" type="String" />
    <div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;height: 120px;">
        <h1 style="font-size: 15px;">Aura Component: Handling Event</h1>
      
        <!--Handling the event using onaction event-->
        <c:one_event_handler name="testevent" namespace="astro" onaction="{!c.handleEvent}"></c:one_event_handler>

        <br />
        
        <!--Property to show the data from event-->
        {!v.data}
    </div>
</aura:component>
({
    //The data of event will be in the payload param
    handleEvent : function(component, event, helper) {
        component.set("v.data", event.getParam('payload') );
    }
})

Code on gist

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

Leave a Reply