@lwrjs/client-modules

Lightning Web Runtime :: Application Initialization

The lwr/init module provides APIs which are responsible for:

• importing static dependencies
• defining the root component(s) into the CustomElementRegistry

This results in the root component(s) being renderable by the DOM on first page load.

Definition

interface InitAPI {
    init(rootModules: [string, LightningElement][]): void;
}

Usage

import { init } from 'lwr/init';
import xAppRoot from 'x/appRoot';
import xNav from 'x/nav';

init([
    ['x/appRoot', xAppRoot],
    ['x/nav', xNav],
]);

Configuration

The default lwr/init module used by an LWR route can be overridden with these steps:

1. Create a module exporting an init function which implements the InitAPI interface:

// src/modules/example/init/init.js
export function init(rootModules) {
    rootModules.forEach(([moduleSpecifier, ctor]) => {
        const elementName = toKebabCase(moduleSpecifier);
        customElements.define(elementName, ctor.CustomElementConstructor);
    });
}

1. Configure the init module specifier in lwr.config.json:

{
    "routes": [
        {
            "id": "example",
            "init": "example/init"
        }
    ]
}