Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: document options for @lwc/compiler and @lwc/babel-plugin-component #3411

Merged
merged 4 commits into from
Mar 30, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions packages/@lwc/babel-plugin-component/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# @lwc/babel-plugin-component

## Summary

This babel plugin does the following transform:

- Global decorator transform:
Expand All @@ -11,3 +13,38 @@ This babel plugin does the following transform:
- 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
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` 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.
- `dynamicImporta` (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.
32 changes: 27 additions & 5 deletions packages/@lwc/compiler/README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
# LWC Compiler

## Summary

@lwc/compiler is an open source project that enables developers to take full control of processing a single Lightning Web Components module for runtime consumption.

## Installation

```sh
yarn add --dev @lwc/compiler
npm install @lwc/compiler
```

## APIs

### `transform`
### `transformSync`

Transform the content of individual file.

```js
import { transform } from '@lwc/compiler';
import { transformSync } from '@lwc/compiler';

const source = `
import { LightningElement } from 'lwc';
Expand All @@ -29,21 +31,41 @@ const options = {
name: 'app',
};

const { code } = await transform(source, filename, options);
const { code } = transformSync(source, filename, options);
```

**Parameters:**

- `source` (string, required) - the source to be transformed can be the content of javascript, HTML, CSS.
- `source` (string, required) - the source to be transformed. Can be the content of a JavaScript, HTML, or CSS file.
- `filename` (string, required) - the source filename with extension.
- `options` (object, required) - the transformation options. The `name` and the `namespace` of the component is a minimum required for transformation.
- `name` (type: `string`, required) - name of the component, e.g. `foo` in `x/foo`.
- `namespace` (type: `string`, required) - namespace of the component, e.g. `x` in `x/foo`.
- `stylesheetConfig` (type: `object`, default: `{}`) - The stylesheet compiler configuration to pass to the `@lwc/style-compiler`.
- `experimentalDynamicComponent` (type: `DynamicImportConfig`, default: `null`) - The configuration to pass to `@lwc/compiler`.
- `experimentalDynamicDirective` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable deprecated dynamic components.
- `enableDynamicComponents` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable dynamic components.
- `outputConfig` (type: `object`, optional) - see below:
- `sourcemap` (type: `boolean`, optional) - if `true`, a sourcemap is generated for the transformed file.
- `minify` (type: `boolean`, optional, deprecated) - this option has no effect.
- `isExplicitImport` (type: `boolean`, optional) - true if this is an explicit import, passed to `@lwc/babel-plugin-component`.
- `preserveHtmlComments` (type: `boolean`, default: `false`) - The configuration to pass to the `@lwc/template-compiler`.
- `scopedStyles` (type: `boolean`, optional) - True if the CSS file being compiled is a scoped stylesheet. Passed to `@lwc/style-compiler`.
- `enableStaticContentOptimization` (type: `boolean`, optional) - True if the static content optimization should be enabled. Passed to `@lwc/template-compiler`.
- `customRendererConfig` (type: `object`, optional) - custom renderer config to pass to `@lwc/template-compiler`. See that package's README for details.
- `enableLwcSpread` (type: `boolean`, default: `false`) - The configuration to pass to the `@lwc/template-compiler`.
- `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller output.

**Return**

- `code` (string) - the compiled source code.
- `map` (object) - the generated source map.
- `warnings` (array, optional) - the array of diagnostic warnings, if any.

### `transform` (deprecated)

Deprecated asynchronous equivalent of `transformSync`.

### `version`

```js
Expand Down