@divmain/lwc-template-compiler
TypeScript icon, indicating that this package has built-in type declarations

2.35.3 • Public • Published

@lwc/template-compiler

Compile LWC HTML template for consumption at runtime.

Installation

yarn add --dev @lwc/template-compiler

Usage

import compile from '@lwc/template-compiler';

const options = {};
const { code, warnings } = compile(
    `
    <template>
        <h1>Hello World!</h1>
    </template>
`,
    options
);

for (let warning of warnings) {
    console.log(warning.message);
}

console.log(code);

APIs

compile

Compile a LWC template to javascript source code consumable by the engine.

import compile from '@lwc/template-compiler';
const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`, {});

Parameters:

  • source (string, required) - the HTML template source to compile.
  • options (object, required) - the options to used to compile the HTML template source.

Options:

  • experimentalComputedMemberExpression (boolean, optional, false by default) - set to true to enable computed member expression in the template, eg: {list[0].name}.

  • experimentalDynamicDirective (boolean, optional, false by default) - set to true to allow the usage of lwc:dynamic directives in the template.

  • preserveHtmlComments (boolean, optional, false by default) - set to true to disable the default behavior of stripping HTML comments.

  • enableStaticContentOptimization (boolean, optional, true by default) - set to false to disable static content optimizations.

  • enableLwcSpread (boolean, optional, false by default) - set to true to enable lwc:spread directive in the template.

  • enableScopedSlots (boolean, optional, false by default) - set to true to enable lwc:slot-bind and lwc:slot-data directives in the template. These directives are used for scoped slots.

  • customRendererConfig (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.

    • Example 1: Config to match <use> elements under the svg namespace and have href attribute set.

      {
          customRendererConfig: {
              directives: [],
              elements: [
                  {
                      tagName: 'use',
                      namespace: 'http://www.w3.org/2000/svg',
                      attributes: ['href']
                  }
              ]
          }
      }
      
    • Example 2: Config to match <script> elements regardless of the attribute set. Note: When attributes is not specified, attribute matching is skipped.

      {
          customRendererConfig: {
              directives: [],
              elements: [
                  {
                      tagName: 'script'
                  }
              ]
          }
      }
      

Return: The method returns an object with the following fields:

  • code (string) - the compiled template.
  • warnings (array) - the list of warnings produced when compiling the template. Each warning has the following fields:
    • message (string) - the warning message.
    • level (string) - the severity of the warning: info, warning, error.
    • start (number) - the start index in the source code producing the warning.
    • length (number) - the character length in the source code producing the warning.

Readme

Keywords

none

Package Sidebar

Install

npm i @divmain/lwc-template-compiler

Homepage

lwc.dev/

Weekly Downloads

2

Version

2.35.3

License

MIT

Unpacked Size

458 kB

Total Files

116

Last publish

Collaborators

  • divmain