Introduction
In Salesforce Lightning Web Components (LWC), component development is at the core of building custom functionality. However, as developers, we often encounter challenges related to code organization, reusability, and file size limitations imposed by Salesforce. In this article, we will explore the need to share JavaScript code between LWC components and how to effectively do it.
Understanding the Challenges
Salesforce enforces file size limits for LWC components:
A component's HTML, JavaScript, and CSS files can have a maximum file size of 128 KB (131,072 bytes). Exceeding this limit results in the "Value too long for field" error.
To address these challenges and make our LWC development more efficient, we can utilize various code sharing patterns.
The Basics of Code Sharing
Exporting Code
To share code between LWC components, we must understand the basics of exporting and importing code. Here's how you can export variables and functions from a JavaScript file:
Example of exporting a variable or constant:
export const myConstant = "Shiva Reddy";
Example of exporting a function:
export function getUserName() {
return "MSR";
}
By default, you can export a single function or variable as the default export from a file.
Importing Code
To import code from other JavaScript files, you can use the import keyword. Here's how you can import variables and functions:
Example of importing code:
import { getUserName, myConstant } from "./mySharedFile";
If you want to import all the functions and variables using a wildcard, you can do it like this:
import * as utils from 'c/mySharedFile'; // 'c/' is the Salesforce component module path
Sharing Code Between LWC Components
Let's explore some common scenarios where code sharing between LWC components is beneficial:
Scenario 1: Reusing Code for Data Generation
Consider a scenario where you need to generate dummy data for a Lightning Datatable component. You can create a separate JavaScript file in the same component folder for data generation and import it into your LWC component.
<!-- basicDataTable.html -->
<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
</template>
// basicDataTable.js
import { LightningElement } from 'lwc';
import generateData from './dummyDatagenerator'; // importing dummyDataGenerator file
const columns = [
{ label: 'Label', fieldName: 'name' },
{ label: 'Website', fieldName: 'website', type: 'url' },
{ label: 'Phone', fieldName: 'phone', type: 'phone' },
{ label: 'Balance', fieldName: 'amount', type: 'currency' },
{ label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
];
export default class BasicDatatable extends LightningElement {
data = [];
columns = columns;
connectedCallback() {
const data = generateData({ amountOfRecords: 100 });
this.data = data;
}
}
// dummyDatagenerator.js
export default function generateData({ amountOfRecords }) {
return [...Array(amountOfRecords)].map((_, index) => {
return {
name: `Name (${index})`,
website: 'www.salesforce.com',
amount: Math.floor(Math.random() * 100),
phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
closeAt: new Date(
Date.now() + 86400000 * Math.ceil(Math.random() * 20)
),
};
});
}
Scenario 2: Sharing Picklist Options
In another scenario, you might have a set of picklist options that you want to use across multiple components. You can create a shared utility component to export these options.
<!-- picklistLwc.html -->
<template>
<lightning-combobox
placeholder='Select yourAge'
value={value}
onchange={handleChange}
options={optionsFromUtils}>
</lightning-combobox>
</template>
// picklistLwc.js
import { LightningElement } from 'lwc';
import { selectAge } from "c/lwcUtilsCmp";
export default class TestLwcDatatableClmn extends LightningElement {
age;
get optionsFromUtils() {
return selectAge;
}
handleChange(event) {
this.age = event.detail.value;
}
}
// lwcUtilsCmp.js
const selectAge = [
{ label: "20 years", value: 20 },
{ label: "25 years", value: 25 },
];
export { selectAge };
Conclusion
Sharing JavaScript code between LWC components in Salesforce is essential for promoting code reusability and avoiding file size limitations. By exporting and importing functions and variables, you can create modular and efficient LWC components that streamline your development process. Whether it's generating data or managing picklist options, code sharing can greatly enhance your LWC development workflow in Salesforce.
