Lightning Web Component Enhancements

As part of the Spring 23’ release, a lot of Lightning Web Component (LWC) features have been released. These features in enhance your productivity and help us to debug wired properties and synchronize data without having to do a page refresh.

In this post, we will explore these enhanced features, with plenty of examples so you know exactly what to expect.

Salesforce Spring ’23 Release

From the Salesforce Spring ‘23 release, we can use custom formatters (which are available in the Chrome debugger) to debug wired properties and methods. Prior to this release, in order to debug data received with a wired property, we had to use a wired function to return the data and then inspect the deconstructed data and error properties.

Now, with enhanced Lightning Web Components, we can:

• View debug information for wired properties in Browser Console.
• Query DOM elements with refs.
• Explore improved conditional directives.
• Synchronize your component data without a page refresh using the RefreshView API (Beta).

Let’s have a look at these in closer detail.

View Debug Information for Wired Properties in Browser Console

Here is a step-by-step guide for viewing debug information for wired properties in the Browser Console, starting with enabling debug mode for a selected user.

Enable Debug Mode for a Particular User in Org

Enter “Debug” in the Quick Find Box. Click on Debug Mode under Lightning Components. Then enable debug mode for users.

Enable Custom Formatters Under Chrome DevTools

After this, enable custom formatters by going to Preferences, and selecting Enable Custom Formatters under the Console section.

Debug Properties and What They Look Like

Below is an example that demonstrates how to debug wired properties in LWC. DisplayLeads is a Lightning Web Component with a wire adapter to display leads. By using Chrome DevTools, you can debug information.

displayLeads.html is used to display leads in the Lightning Card:

<template>
    <lightning-card title="Leads" icon-name="standard:lead_list">
        <div class="slds-m-around_medium">
            <template if:true={leads.data}>
                <template for:each={leads.data} for:item="lead">
                    <p key={lead.Id}>{lead.Name}</p>
                </template>
            </template>
        </div>
    </lightning-card>
 </template>

lightning web component

displayLeads.js shows the wired function that is used to fetch the leads:

import { LightningElement, wire } from 'lwc';
import getLeadsList from '@salesforce/apex/LeadsService.getLeads';
 
export default class DisplayLeads extends LightningElement {


    @wire(getLeadsList)
    leads;
}

lightning web component

displayLeads.js-meta.xml is used to expose the LWC for the app, record, and homepages:

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

lightning web component

Finally, LeadsService.cls works with the Apex controller to return lead records:

public with sharing class LeadsService {
   
    @AuraEnabled (cacheable = true)
    public static List<Lead> getLeads()
    {
        List<Lead> lstLeads = [SELECT Id,Name FROM Lead LIMIT 2];
        return lstLeads;
    }
}

lightning web component

Final Steps

When a custom component is rendered on UI, to inspect, click on the element in the Elements panel available in Chrome DevTools.

Once the element is clicked, open the Console next to Elements then enter “$0” to return the debug information as you can see below.

Each wired property or method will return the information in the following format:

• Data: Last value that is returned by the wire adapter.
• Config: Last configuration object reported to the wire adapter.
• isDataProvisionedForConfig: To specify if the data provisioned by the wire adapter corresponds to the config. Boolean that returns true when the adapter emits data after config is reported.

Query DOM Elements with Refs

A new Template Refs API has been introduced to reference Lightning Web Component template elements without the need of querySelector during runtime.

The new Template Refs APIworks in compatibility with both shadow DOM and light DOM-rendered Lightning Web Components. To create the references and use in the JavaScript, use a new attribute lwc:ref for an element with a value.

The below example shows how a message value is passed from parent component to child component using refs.

Firstly, there’s sampleParentCmp.html, which is the parent component that has an input field to capture the message and then pass it to the child component on a change event:

<template>
    <lightning-card title="Parent">
        <div class="slds-p-horizontal_small">
            <legend class="slds-form-element__legend slds-form-element__label">Message</legend>
            <lightning-input variant="label-hidden" onchange={handleMessage}></lightning-input>
        </div>
        <c-sample-child lwc:ref="sampleChildCmp"></c-sample-child>
    </lightning-card>
</template>

lightning web components

Below is sampleParentCmp.js: a handleMessage function that uses refs to call in the child component and pass the message value:

import { LightningElement } from 'lwc';


export default class SampleParentCmp extends LightningElement {


    handleMessage(event){
        this.refs.sampleChildCmp.messageToBeDisplayed(event.target.value);
    }
}

lightning web component

From there, sampleParentCmp.js-meta.xml is used to expose the parent component to app, record, and homepages:

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

lightning web component

sampleChild.html is the child component used to display the message received from the parent component:

<template>    
    <lightning-card title="Child">
            <p class="slds-p-horizontal_small">{msg}</p>
    </lightning-card>
</template>

lightning web component

Finally, sampleChild.js is used as a public method to set the message attribute with the value received from the parent component:

import { LightningElement, api } from 'lwc';


export default class SampleChild extends LightningElement {
    msg;


    @api messageToBeDisplayed(strMessage)
    {
        this.msg = strMessage;
    }
}

lightning web component

Below is an example of the kind of message that can be generated between the parent and the child components, shown on UI:

Improved Conditional Directives

Lightning Web Component templates have also now improved conditional directives, so that we now have lwc:if and lwc:elseif instead of if:true and if:false.

This is conditional rendering using if:true and if:false:

<template>
    <template if:true={condition1}>
        Message1
    </template>
    <template if:false={condition1}>
        <template if:true={condition2}>
            Message2
        </template>
        <template if:false={condition2}>
            Message3
        </template>
    </template>
</template>

lightning web component

This is conditional rendering using lwc:if and lwc:elseif:

<template>
    <template lwc:if={condition1}>
        Message1
    </template>
    <template lwc:elseif={condition2}>
        Message2
    </template>
    <template lwc:else>
        Message3
    </template>
</template>

Synchronize Component Data Without a Page Refresh Using the RefreshView API (Beta)

The Refreshview API helps you to synchronize component data without a page refresh. This Refreshview API is similar to force:refreshview in aura components, but this API is built with modern standards that can support both Aura and Lightning Web Components.

This API includes a new module, which is lightning/refresh, and it needs to be imported in order to use the RefreshEvent function. This helps with synchronizing data externally sourced by the component in its specific container view, and supports custom refresh that is triggered by end users.

import { RefreshEvent } from 'lightning/refresh';


export default class SampleRefreshComponent extends LightningElement {
 
  handleRefresh() {
    this.dispatchEvent(new RefreshEvent());
  }
}

Summary

I hope this article helps you to explore new features available for Lightning Web Components in the Spring 23’ release. This post provides a detailed explanation for viewing debug info for wired properties in the browser console, query DOM elements with refs. It also explores improved conditional directives in Lightning Web Components, and demonstrates how to synchronize your component data without a page refresh using the RefreshView API.