@lwc/babel-plugin-component

@lwc/babel-plugin-component

Summary

This babel plugin does the following transform:

• Global decorator transform:
  • Transform @api decorator to publicProperties and publicMethods static properties.
  • Transform @wire decorator to wire static property.
  • Transform @track decorator to track static property.
• LWC component class sugar syntax:
  • Check for misspelled lifecycle hooks.
  • Import and inject render from a collocated template if a component class doesn't already implement a render method.
• Optimization:
  • If the compiler inject the default template a component, it will also wire the template style to the component.

Installation

npm install babel @lwc/babel-plugin-component

Usage

import babel from '@babel/core';
import lwcPlugin from '@lwc/babel-plugin-component';

const source = `
import { LightningElement } from 'lwc';
export default class extends LightningElement {}`;

const { code } = babel.transformSync(source, {
    plugins: [
        [
            lwcPlugin,
            {
                /* options */
            },
        ],
    ],
});

Options

• name (type: string, optional) - name of the component, e.g. foo in x/foo.
• namespace (type: string, optional) - namepace of the component, e.g. x in x/foo.
• isExplicitImport (type: boolean, optional) - true if this is an explicit import.
• dynamicImports (type: object, optional) - see below:
  • loader (type: string, optional) - loader to use at runtime.
  • strictSpecifier (type: boolean, optional) - true if a strict specifier should be used.
• instrumentation (type: InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the @lwc/errors package for details on the interface.
• apiVersion (type: number, optional) - API version to associate with the compiled component.