@lwrjs/client-modules

Lightning Web Runtime :: Application Initialization

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

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

This results in the root application 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 application 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:

{
    "modules": [],
    "application": {
        "root": "example/app",
        "init": "example/init"
    }
}