Salesforce Easy Learn: Share JavaScript Code in LWC

Hi,

To share code between components, create an ES6 module, and export the variables or functions that you want to share.

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 without polluting the global scope.

Your module structure looks like this:

There are two ways to export functionality from an ES6 module.

A module can export a single default function or variable.
A module can also export named functions or variables.

A module can export a single default function or variable:

The component that imports the function chooses a name to refer to the default export.

It doesn't have to be the name of the function or JavaScript file, that’s just a convention.

The myLibraryjs.js module is in the default namespace(c).

myLibraryjs.html:

No markup needed here as we want to expose functions from this component.

<template>
    
</template>

myLibraryjs.js:

export default function () { 
    return 'Calculator Example';
 };

myLibraryjs.js-meta.xml

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

A module can also export named functions or variables:

Here we are going to export named functions from "jsLibraryModule" component:

jsLibraryModule.HTML: (no changes needed)

<template>
    
</template>

jsLibraryModule.js:

const getRoles = () => {
    return [
        { label: 'Manager', value: 'Manager' },
        { label: 'Assistent Manager', value: 'AstManager' },
    ];
};

const calculate2numbers = (fnumber, snumber) => {
    
    return parseInt(fnumber)+parseInt(snumber);
};

export { getRoles, calculate2numbers };

jsLibraryModule.js-meta.xml:

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

Now let's see how to import the same into other components and invoke the same.

importJSComponent.html:

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small">
            </lightning-icon>
             {message}
        </h3>
        <div slot="footer">
                <lightning-badge label={result}></lightning-badge>                 
        </div>
        <p class="slds-p-horizontal_small">
            <lightning-input value={firstNumber} name="fnumber" label="First Number" 
               onchange={handleChanges}></lightning-input>
            <lightning-input value={secondNumber} name="snumber" label="Second Number"
                 onchange={handleChanges}></lightning-input>
            <br/>
            <lightning-button label="Submit" variant="brand" 
                onclick={handleClick}></lightning-button>
        </p>
    </lightning-card>
</template>

importJSComponent.js:

Here we are importing and calling:

default function:

import myfunction from 'c/myLibraryjs';

Named fucntions:

import {calculate2numbers } from 'c/jsLibraryModule'

import { LightningElement } from 'lwc';
import myfunction from 'c/myLibraryjs';
import {calculate2numbers } from 'c/jsLibraryModule'
export default class ImportJSComponent extends LightningElement {
    message = myfunction();      
    firstNumber=0;
    secondNumber=0;
    result=0;
    handleChanges(event){
        if(event.target.name==='fnumber'){
            this.firstNumber= event.target.value;
        }
        if(event.target.name==='snumber'){
            this.secondNumber= event.target.value;
        }
        
    }
    handleClick(){
        this.result = calculate2numbers(this.firstNumber,this.secondNumber);        
    }
}

importJSComponent.js-meta.xml:

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