Lightning Components

Component Bundle in Lightning Web Component

Curriculum

• 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)
• Use camel case (each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation) to name a component. e.g. helloWorld
• Camel case component folder names map to kebab-case in markup. e.g. <c-hello-world > where c is the default namespace.
• The component bundle file structure is different for an Aura component and a Lightning Web Component. Here’s how the files map between the two types of component.
• An HTML File, a JavaScript File & a Configuration File should be present in Lightning Web Component. Css File and Other JavaScript file can be optional.
• Separate Controller, Helper & Renderer files in Aura Component is equivalent to one JavaScript file in LWC.

Resource	Aura File	Lightning Web Components File
Markup	helloWorld.cmp	helloWorld.html
Controller	helloWorldController.js	helloWorld.js
Helper	helloWorldHelper.js
Renderer	helloWorldRenderer.js
CSS	helloWorld.css	helloWorld.css
Documentation	helloWorld.auradoc	Not currently available
Design	helloWorld.design	helloWorld.js-meta.xml
SVG	helloWorld.svg	Include in HTML file or upload as a static resource

Before 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,Record Page, App Page, Home page, Community Page, Utility bar, Lightning tab, etc by using tag.

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.



Point 1: <isExposed > is set to true to exposes the component in all orgs, and in Lightning App Builder, Community Builder, and managed packages. It makes the component available from other namespaces.

Point 2: Using <masterLabel> and <description> tag we can provide some meaningful label and description to our custom lwc component which can be seen by admin in the lightning app builder.

Point 3: Using <target> tag we can specify where admin can add lwc component like Account record page, app page or community page.

Point4: Using <property> We can define configurable/custom properties to make generic components. While adding this component to page, admin can set values for it.

When we deploy our component to Org then while adding it to any app page we can see the following important things:


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>