docs: document options for @lwc/compiler and @lwc/babel-plugin-compon…

…ent (#3411)

packages/@lwc/babel-plugin-component/README.md

@@ -1,5 +1,7 @@
 # @lwc/babel-plugin-component
 
+## Summary
+
 This babel plugin does the following transform:
 
 -   Global decorator transform:
@@ -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.

packages/@lwc/compiler/README.md

@@ -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';
@@ -29,21 +31,42 @@ 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.
+    -   `experimentalComplexExpressions` (type: `boolean`, optional) - set to true to enable use of (a subset of) JavaScript expressions in place of template bindings. Passed to `@lwc/template-compiler`.
+    -   `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

packages/@lwc/template-compiler/README.md

@@ -49,6 +49,7 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 **Options:**
 
 -   `experimentalComputedMemberExpression` (boolean, optional, `false` by default) - set to `true` to enable computed member expression in the template, eg: `{list[0].name}`.
+-   `experimentalComplexExpressions` (boolean, optional, `false` by default) - set to `true` to enable use of (a subset of) JavaScript expressions in place of template bindings.
 -   `experimentalDynamicDirective` (boolean, optional, `false` by default) - set to `true` to allow the usage of `lwc:dynamic` directives in the template.
 -   `enableDynamicComponents` (boolean, optional, `false` by default) - set to `true` to enable `lwc:is` directive in the template.
 -   `preserveHtmlComments` (boolean, optional, `false` by default) - set to `true` to disable the default behavior of stripping HTML comments.