@lwc/babel-plugin-component
v8.7.0
Published
Babel plugin to transform a LWC module
Downloads
383,559
Maintainers
Keywords
Readme
@lwc/babel-plugin-component
Summary
This babel plugin does the following transform:
- Global decorator transform:
- Transform
@api
decorator topublicProperties
andpublicMethods
static properties. - Transform
@wire
decorator towire
static property. - Transform
@track
decorator totrack
static property.
- Transform
- 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 arender
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
const babel = require('@babel/core');
const lwcPlugin = require('@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
inx/foo
.namespace
(type:string
, optional) - namepace of the component, e.g.x
inx/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.