Lightning Web Components (LWC) Bundle

In this post, we will go through the Lightning Web Component (LWC) Bundle and all the different files that we can have. There are different types of files that we can create as part of the Lightning Web Components (LWC) Bundle to write a particular type of code to meet the business requirements.

Lightning Web Components (LWC) Bundle

To create a Lightning Web Component, we first need to create a Folder that bundles our component’s files. The folder and its files must have the same name, including capitalization and underscores.

The folder and its files must follow these naming rules.

• Must begin with a lowercase letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Can’t include whitespace
• Can’t end with an underscore
• Can’t contain two consecutive underscores
• Can’t contain a hyphen (dash)

Bofore going into the details, have a look at the below image to get the basic idea of the Lightning Web Component (LWC) Bundle.

HTML File

Every Lightning Web Component that should have a UI must have an HTML file. The root tag for the HTML file is <template>. It should follow the naming convention as a <myComponent>.html such as helloCmp.html. Below is the sample code for an HTML file that displays Text Box to get the Name and greets with the Name.

helloCmp.html

<template>
    <lightning-card title="Lightning Web Component Bundle">
        <div class="slds-p-around_medium lgc-bg">
            <lightning-input type="text" label="Contact Name" placeholder="Enter contact name..." 
                value={strContactName} onchange={changeName}></lightning-input>
                <br/>
                <p>Hello {strContactName}</p>
        </div>
    </lightning-card>
</template>

JavaScript File

Every component must have a JavaScript file. JavaScript files define the HTML element if the component renders UI. It should follow the naming convention as a <myComponent>.js such as helloCmp.js. JavaScript files in Lightning web components are ES6 modules.

Every UI component must include a JavaScript file with at least below code.

import { LightningElement } from 'lwc';
export default class HelloCmp extends LightningElement {
    
}

Below is the sample code for HelloCmp JavaScript file:

helloCmp.js

import { LightningElement } from 'lwc';

export default class HelloCmp extends LightningElement {
    strContactName = '';

    changeName(event){
        this.strContactName = event.target.value;
    }
}

Configuration File

Every component must have a configuration file. This is used to define the metadata values for the component, including the design configuration for Lightning App Builder, Experience Builder, Utility Bar, etc.

It should follow the naming convention as a <myComponent>.js-meta.xml such as helloCmp.js-meta.xml.

Below is the sample code for HelloCmp Configuration file:

helloCmp.js-meta.xml

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

Here, isExposed is set to true to make the Lightning Web Component visible to Lightning App Builder and Experience Builder. We added the target as lightning__AppPage to make this component available for the Application Page.

CSS File

Any Lightning Web Component can include a CSS file. Use standard CSS syntax to style the Lightning Web Components.

It should follow the naming convention as a <myComponent>.css such as helloCmp.css. Below is the sample CSS file:

helloCmp.css

p{
    color: green;
    font-size: 20px;
}

SVG File

We can include the SVG resource in the Lightning Web Component (LWC) Bundle to use as a custom icon for our component in Lightning App Builder and Experience Builder.

To add the custom icon for the component, create a file with the name <component>.svg such as helloCmp.svg and add the SVG markup for the icon. We can only have one SVG per folder.

Here is the sample SVG file:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
    <circle cx="20" cy="20" r="8" stroke="black" stroke-width="1" fill="red" />
</svg>

Also Read: Use SVG in LWC (Lightning Web Component)

__tests__ Folder

We can create a folder called __tests__ for each Lightning Web Component (LWC) Bundle to create Jest tests. Jest runs the JavaScript files in the __tests__ folder. Test files must have the name that ends in .test.js. We can have multiple files or a single file to test multiple scenarios. All files should be inside the __tests__ folder. We can also create Sub Folders inside __tests__ and keep the test files inside these SubFolders.

Additional JavaScript Files for Sharing Code

In addition to the JavaScript file that created the HTML element, we can have more JavaScript files inside the Lightning Web Component Bundle to share common code.

This is how our output looks:

If you don’t want to miss new posts, please Subscribe here.

Check official Salesforce documentation for Lightning Web Component (LWC) Bundle, if you want to know more about it.

Thank You!