Let’s discuss here how to share the code between the lightning web component and Aura web components. To share JavaScript code between Lightning web components and Aura components, put the code in an ES6 module.
1. Create the ES6 module in your Lightning Web Components development environment.
2. Reference the module in a Lightning web component’s JavaScript file.
3. Reference the module in an Aura component.
Example – Create a Shared Code
To share code between components, create an ES6 module and use the standard export statement to export the functionality that your module exposes. Your module can use the standard import statement to use other shared modules. Let’s create an ES6 module and see how it’s used in a Lightning web component. Create a folder for the utils module in the LWC folder in the lightning web component project directory. we will be using this utils code in between LWC and Aura Components.
|
1 2 3 |
cd force-app/main/default/lwc mkdir utils cd utils |
The folder looks like below.
Create a utils.js file in the utils folder. This file is an ES6 module that is export the isFunction
|
1 2 3 4 5 6 7 8 9 |
/* utils.js */ /** * Returns whether provided value is a function * @param {*} value - the value to be checked * @return {boolean} true if the value is a function, false otherwise */ export function isFunction(value) { return typeof value === 'function'; } |
The utils module exports an isFunction() function that returns whether the provided parameter is a function.
Create a utils.js-meta.xml configuration file for the utils module.
|
1 2 3 4 5 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>false</isExposed> </LightningComponentBundle> |
Use Shared Code in LWC
Now you need to import the above create ES6 module utils .create a lightning web component using this command
|
1 |
sfdx force:lightning:component:create --type lwc --componentname libcaller --outputdir force-app\main\default\lwc |
Use this libcaller.html code.
|
1 2 3 4 5 |
<template> <p>LWC Calling Shared Code </p> <p>Is it a function?: {result}</p> <button onclick={checkType}>Check Type</button> </template> |
Use this libcaller.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { LightningElement ,api,track} from 'lwc'; // import the library import { isFunction } from 'c/utils'; export default class Libcaller extends LightningElement { @track result; checkType() { // call the imported library function this.result = isFunction( function () { console.log(" I am a function"); } ); } } |
The c-libcaller component imports the utils module and calls the isFunction function exported by the module. The argument passed into isFunction is a function so the result is set to true. The below code shows how to import the utils code
|
1 2 3 |
import { isFunction } from 'c/utils'; |
The above below code shows how to call the imported function
|
1 2 3 4 5 |
isFunction( function () { console.log(" I am a function"); } ); |
Use this libcaller.js-meta.xml code
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push the changes to scratch org and add to layout for testing. When you click the Check Type button it will call then imported isFucntion module and set the value to the result property.
Use Shared Code in Aura
Using the shared code in Aura is straight and you can able to call the module code like component and pass the aura:id
Create a libcallerAura.cmp .
The libcallerAura Aura component includes a reference to the c:utils ES6 module. We added an aura:id so that we can get a reference to the module in JavaScript code.
|
1 2 3 4 5 6 7 8 9 10 |
<aura:component implements="flexipage:availableForAllPageTypes"> <p>Aura component calling the utils lib</p> <c:utils aura:id="utils" /> <aura:attribute name="isfan" type="boolean" default="false"/> <lightning:button label="Click " title="Click" onclick="{! c.handleClick }"/> <p> Function or not ?: {!v.isfan} </p> </aura:component> |
Create a libcallerAuraController.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
({ handleClick: function(cmp) { // Call the lib here var libCmp = cmp.find('utils'); var result = libCmp.isFunction( function() { console.log(" I am a function"); } ); cmp.set("v.isfan" ,result); console.log("Is it a function?: " + result); } }) |
The component’s controller uses cmp.find(‘utils’) to match the aura:id in markup and get a reference to the module. The utils ES6 module exports isFunction(), which the Aura component calls. The argument passed into isFunction is a function so result is set to true. Click the button and confirm that the Aura component calls the function exported by the ES6 module and set the attribute to true as shown below.
