@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

``js
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.