Share lwc modules as reusable utility components

bestpracticelightning-web-components

So I am looking to implement reusability pattern across Lwc's using utility components. What Im not understanding is limitations of importing modules/dependencies like ShowToastEvent.

If I create a simple test Lwc that imports ShowToastEvent and then dispatches an event the toast renders into UI as expected. However, if I then try to refactor the notification code into a standalone reusable function that is imported into an lwc it doesnt work as expected. The imported function is called successfully but the toast no longer renders – the ShowToastEvent module is no longer reference-able. I have tried both leaving "import { ShowToastEvent } from 'lightning/platformShowToastEvent';" in the original test component and importing it inside the utility component – neither works.

If anyone has created a reusable utility class that leverages modules like ShowToastEvent it'd be great to confirm with you how you've structured your components to make reuse possible.

Ive tried variations like below for the reusable component with no luck so far. The console shows function is recognised by importing 'parent' component, but the toast doesnt render.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

function showNotification(title, message, variant, mode) {
    console.log('called...');
    const evt = new ShowToastEvent({
        title: title,
        message: message,
        variant: variant
    });
    this.dispatchEvent(evt);
}

export { showNotification, ShowToastEvent}

Best Answer

We have created reusable libraries and it is working as expected. For your use case where toast is not working, small change is required where you dispatching event.

import { ShowToastEvent } from 'lightning/platformShowToastEvent'
        
const showMessage = (page, t, m,type ) => {
const toastEvt = new ShowToastEvent({
            title: t,
            message:m,
            variant: type
        });
            page.dispatchEvent(toastEvt);
};
        
        //export it for other
export 
{
    showMessage
}

usage of this library:

import { showMessage} from 'c/commonLibrary';

showMessage(this,'Notification','Your Message','error');

In case of community,it might not work. You can use custom toast model which will use slds-notify slds-notify_toast css class.

Hope this will work for you.

Related Solutions

[SalesForce] Import ES modules in LWC

The LWC compiler only resolves absolute import with the following form: <namespace-name>/<lwc-module-name>. Because of this, you can't directly import an NPM module via import d3 from 'd3';.

You have 2 options if you want to consume an es module from an lwc component:

create a new lwc module (e.g. d3 with a d3.js) and then import your module from your lwc component via the standard import syntax: import d3 from 'c/d3'; (lwc-recipe). This approach should be avoided for large modules because they are sent and evaluated with your component and can create some performance issues.
transform your es module to the UMD format and load it via a static resource (lwc-recipe). If the library attaches properties on the window object you should add them as globals to your .eslintrc.json to avoid linting errors.

[SalesForce] LWC: Share @wire between two components

You can use pubsub for sending data across components - whether wire service or any other event.

Below is listener component:

import { LightningElement, api, track, wire } from 'lwc'; import { CurrentPageReference } from 'lightning/navigation'; import { registerListener, unregisterAllListeners } from 'c/pubsub';

export default class Poc extends LightningElement {
    @track myResponse;
    @wire(CurrentPageReference) pageRef;

    connectedCallback() {
        registerListener('wiredResponse', this.getWiredResponse, this);
    }
    disconnectedCallback() {
        unregisterAllListeners(this);
    }
    getWiredResponse(response) {
        this.myResponse = response;
    }
}

HTML:

<template>
    <template if:true={myResponse}>
        <template if:true={myResponse.data}>
            <div> data - {myResponse.data} </div>
        </template>
        <template if:true={myResponse.error}>
            <div>error - {myResponse.error}</div>
        </template>
    </template>
</template>

You should download and save pubsub module from HERE
Register listener on init (connectCallback) and implement the method to which the response has to be passed. Here its getWiredResponse in which the response from wire service is assigned to myResponse.
Also unregister in disconnected callback.

Firing component:

JS:

import { LightningElement, track, wire } from 'lwc';
import check from '@salesforce/apex/poc.check';
import { CurrentPageReference } from 'lightning/navigation';
import { fireEvent } from 'c/pubsub';

export default class PocTable extends LightningElement {
    @wire(CurrentPageReference) pageRef;

    @track checkResp;

    @wire(check)
    getcheckResp(result) {
        this.checkResp = result;
        console.log('poc table wire => ', JSON.stringify(this.checkResp));
        fireEvent(this.pageRef, 'wiredResponse', this.checkResp);
    }
}

HTML:

<template>
    <template if:true={checkResp.data}>
        <div> checkResp data - {checkResp.data} </div>
    </template>
    <template if:true={checkResp.error}>
        <div> checkResp error - {checkResp.error}</div>
    </template>
</template>

In this you will need fireEvent import and you can fire the event whenever necessary. In this case inside wire service.

In both listener and firing component should have CurrentPageReference.

@wire(CurrentPageReference) pageRef;

IMPORTANT:

When Wire service is implemented on any standard methods like getRecord, it uses Lighning data service, so you dont need any custom functionality to optimise code here.
When wire service is used to invoke apex methods, we should be using Cacheable=true on methods mandatorily. So, even if you use wire service on same method in multiple components, the apex method will return the response only once and the wire service will share the same data resource from client cache. So, it is not really logical/needed to handle the optimisation. If 1 wire output is the input for another wire service in another component, then it makes more sense to implement the same wire service in target component. pubsub is application event and so it should not really be used in this case.
Component extension will not work on wire service. This is because wire service is already optimised and LWC does not really need it that way.

Best Answer

Related Solutions

[SalesForce] Import ES modules in LWC

[SalesForce] LWC: Share @wire between two components

Related Topic