|
1 | 1 | # @salesforce/eslint-plugin-lwc-graph-analyzer
|
2 | 2 |
|
3 |
| -> An ESLint plugin to analyze the data flow graph of a Lightning web component, to ensure the component's offline-ability. |
| 3 | +`eslint-plugin-lwc-graph-analyzer` is an ESLint plugin that analyzes the data flow graph of a Lightning web component, to ensure the component can be statically analyzed, a requirement for LWC data priming and offline use cases. |
4 | 4 |
|
5 | 5 | ## Should I use this plugin?
|
6 | 6 |
|
7 |
| -This plugin wraps the [Komaci static analyzer](https://www.npmjs.com/package/@komaci/static-analyzer), which looks at your component's `@wire` definitions and validates whether the component is offline-able or not. You should use this plugin to ensure that your Lightning web component can take full advantage of the Lightning SDK. |
| 7 | +This plugin wraps the [Komaci static analyzer](https://www.npmjs.com/package/@komaci/static-analyzer), which interrogates your Lightning web component's `@wire` definitions and dependency graph, and validates whether these can be statically analyzed. Static analyzability is a requirement for LWCs to support offline use cases. Using this plugin will help you catch any exceptions to your component's static analyzability, ensuring that it can take full advantage of the Lightning SDK's offline capabilities. |
8 | 8 |
|
9 | 9 | ## Installation
|
10 | 10 |
|
11 |
| -This plugin has not yet been published to a public registry. Instead, clone the repo on your machine. |
| 11 | +To add this plugin to your package/project, install it with your favorite Node.js package manager. |
12 | 12 |
|
13 |
| -``` |
14 |
| -git clone https://github.com/salesforce/eslint-plugin-lwc-graph-analyzer.git |
15 |
| -cd eslint-plugin-lwc-graph-analyzer |
16 |
| -yarn install |
17 |
| -yarn test // Ensures your installation is working properly |
| 13 | +### yarn |
| 14 | + |
| 15 | +```sh |
| 16 | +$ yarn add --dev @salesforce/eslint-plugin-lwc-graph-analyzer |
18 | 17 | ```
|
19 | 18 |
|
20 |
| -Then, from the root of your LWC project run to add the plugin to your `package.json`: |
| 19 | +### npm |
21 | 20 |
|
22 | 21 | ```sh
|
23 |
| -$ yarn add --dev <path to cloned repo>/eslint-plugin-lwc-graph-analyzer |
| 22 | +$ npm install --save-dev @salesforce/eslint-plugin-lwc-graph-analyzer |
24 | 23 | ```
|
25 | 24 |
|
26 |
| -## Usage |
| 25 | +## Configuration |
27 | 26 |
|
28 |
| -Here's an example `.eslintrc` that configures the plugin. Extending the `plugin:@salesforce/lwc-graph-analyzer/recommended` config will enable static analysis on all `.js` and `.html` files used in Lightning web components. |
| 27 | +Here's an example snippet of a `.eslintrc.json` configuration file, that will configure the `eslint-plugin-lwc-graph-analyzer` plugin. Extending the `plugin:@salesforce/lwc-graph-analyzer/recommended` ESLint configuration will enable static analysis on all `.js` and `.html` files used in your Lightning web components. |
29 | 28 |
|
30 | 29 | ```json
|
31 | 30 | {
|
32 | 31 | "extends": ["eslint:recommended", "plugin:@salesforce/lwc-graph-analyzer/recommended"]
|
33 | 32 | }
|
34 | 33 | ```
|
35 | 34 |
|
36 |
| -If you have `.eslintignore` in your project do not add an entry to ignore html files. This will cause the plugin to skip linting on LWC bundles that include html templates. |
| 35 | +In an SFDX project, you would most commonly add this configuration at the root of your LWC "tree"—which by default resides at `force-app/main/default/lwc/`—since the plugin's analysis applies specifically to Lightning web components. |
| 36 | + |
| 37 | +**Note:** If you have a `.eslintignore` configuration in your project, do _not_ add an entry to ignore HTML files. This will cause the plugin to skip linting on LWC bundles that include HTML templates. There are a number of Komaci-based static analysis rules that apply specifically to the HTML template of a Lightning web component bundle. |
0 commit comments