Share Javascript Code Between LWC and Aura

To share JavaScript code between Lightning web components and Aura components, put the code in an ES6 module in a service component.

An ES6 module is a JavaScript file that explicitly exports variables or functions that other modules can use. Modules make it easier to structure your code.

To Understand Javascript module in depth you can refer to this great article – https://javascript.info/modules

To share an ES6 module:

1. Create a service component (library) using the Lightning Web Components programming model.
2. To use the code in a Lightning web component, import and reference it in the component’s JavaScript file.
3. To use the code in an Aura component, use the same syntax that you use to import an Aura component and call its methods.

Let’s understand this with an example.

For the below examples, we would be updating the greetingLwc and myAuraComponent which we have created in Compose Aura Components From Lightning Web Components

Creating A Sevice Component (Library):

Under the path force-app > main > default > lwc create a folder named as greetingService. Under this folder create a file named greetingService.js and greetingService.js-meta.xml. Add the following code respectively:

export function greetings() {
    return 'Hey! have an awesome day :)';
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

Deploy this service component(library). We would be using this service component in an LWC and an Aura component below.

This example is a service component (library). The folder and one JavaScript file must have the same name. In this example, the name is greetingService.

Using A Service Component(library) In Lightning Web Component:

Update the greetingService component with the following code:

import { LightningElement} from 'lwc';
import {greetings} from 'c/greetingService';

export default class GreetingLwc extends LightningElement {
    message;
    setGreetingMessage() {
        this.message = greetings();
    }

}

In the above code block at Line 2, we are importing the reference from our service component.

At Line 7 we are invoking the function which we have imported from the service component.

<template>
    <lightning-card title="LWC">
        <lightning-button variant="brand" label="Click Me" title="Click Me" onclick={setGreetingMessage} slot="actions"></lightning-button>
        
        <p class="slds-p-horizontal_small">
            {message}
        </p>
    </lightning-card>
</template>

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>55.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Add the above lightning web component to an app page. You will get an output like below:

Using A Service Component(library) In An Aura Component:

Add the following code in myAuraComponent:

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="message" type="String"></aura:attribute>
    <c:greetingService aura:id="greetingService"></c:greetingService>

    <lightning:card title="AURA COMPONENT">
        <p class="slds-p-horizontal_small">
            {!v.message}
        </p>

        <aura:set attribute="actions">
            <lightning:button variant="brand" label="Click Me" title="Click Me" onclick="{!c.greetingHandler}"/>
        </aura:set>
    </lightning:card>
</aura:component>	

At Line 3 we are importing the reference of our service component.

({
    greetingHandler : function(component, event, helper) {
        var message = component.find('greetingService').greetings();
        component.set("v.message", message);
    }
})

At Line 3 we are invoking the function which we have imported from our service component.

Add the myAuraComponent to a lightning app page. You will get an output like the below:

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂