Merge pull request #9 from mike-shine-salesforce/main

Static Analyzer docs

Author: khawkins

lib/docs/no-assignment-expression-assigns-value-to-member-variable.md

@@ -0,0 +1,31 @@
+# no-assignment-expression-assigns-value-to-member-variable
+
+ This rule flags getters in custom components that mutate properties, which prevents the static analyzer from being able to determine a value for the property when priming. To resolve this error, don’t assign or mutate member variables in your getter functions.
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    prop;
+    get input() {
+        const value = 'value';
+        this.prop = value;
+        return value;
+    }
+}
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    prop;
+    get input() {
+        return 'value';
+    }
+}
+```
+
+

lib/docs/no-assignment-expression-for-external-components.md

@@ -0,0 +1,30 @@
+# no-assignment-expression-for-external-components
+
+This rule flags assignment expressions with components created outside of a Salesforce namespace. These external components aren’t supported by assignment expressions.
+
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    prop;
+    get getter() {
+        return (this.prop = 'hi'), this.prop;
+    }
+}
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    @api prop;
+    get getter() {
+        return this.prop;
+    }
+}
+
+```

lib/docs/no-call-expression-references-unsupported-namespace.md

@@ -0,0 +1,24 @@
+# no-call-expression-references-unsupported-namespace
+
+This rule flags getters that invoke a function from an unsupported import. Getters don’t support invoking functions. To resolve this error, review the getter and remove the invocation of functions.
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+import invalid from 'x/invalid';
+export default class Example extends LightningElement {
+    get invalidGetter() {
+        return invalid();
+    }
+}
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {}
+
+```

lib/docs/no-class-refers-to-parent-class-from-unsupported-namespace.md

@@ -0,0 +1,21 @@
+# no-class-refers-to-parent-class-from-unsupported-namespace
+
+This rule flags components that extend from a parent class that’s not supported for Lightning web components, such as a custom class. 
+
+## ❌ Incorrect
+
+```javascript
+import Foo from './foo';
+
+export default class Example extends Foo {}
+
+```
+
+## ✅ Correct
+
+```javascript
+import Foo from 'lightning/recordForm';
+
+export default class Example extends Foo {}
+
+```

lib/docs/no-composition-on-unanalyzable-getter-property.md

@@ -0,0 +1,44 @@
+# no-composition-on-unanalyzable-getter-property
+
+This rule flags iterators, image `src` attributes, or child components that reference an unanalyzable getter. To resolve this error, review the referenced getter and make sure that it’s valid. 
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    prop;
+    get invalidGetter() {
+        this.prop = 'new value'; // mutations not allowed
+        return this.prop;
+    }
+}
+
+```
+
+```html
+<template>
+    <c-child input={invalidGetter}></c-child>
+</template>
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    @api prop;
+    get getter() {
+        return this.prop;
+    }
+}
+
+```
+
+```html
+<template>
+    <c-child input={getter}></c-child>
+</template>
+
+```

lib/docs/no-composition-on-unanalyzable-property-from-unresolvable-wire.md

@@ -0,0 +1,41 @@
+# no-composition-on-unanalyzable-property-from-unresolvable-wire
+
+This rule flags iterators, image `src` attributes, or child components of an LWC template that reference an unanalyzable property, such as an invalid getter, or a wire output from an unsupported or unprimeable wire. To resolve this error, review the property reference and the referenced variable to make sure they’re both valid.
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement, wire, api } from 'lwc';
+import { invalid } from 'x/invalid';
+export default class Example extends LightningElement {
+    @wire(invalid, {})
+    wireOutput;
+}
+
+```
+
+```html
+<template>
+    <c-child input={wireOutput}></c-child>
+</template>
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement, wire, api } from 'lwc';
+import { getRecord } from 'lightning/uiRecordApi';
+export default class Example extends LightningElement {
+    @wire(getRecord, {})
+    wireOutput;
+}
+
+```
+
+```html
+<template>
+    <c-child input={wireOutput}></c-child>
+</template>
+
+```

lib/docs/no-composition-on-unanalyzable-property-missing.md

@@ -0,0 +1,73 @@
+# no-composition-on-unanalyzable-property-missing
+
+This rule flags iterators, image `src` attributes, or child components that reference a property that’s not found in the JavaScript file. This rule also flags a child class that references a property that’s only defined on the parent class. To resolve this error, review the referenced properties and make sure that they’re correctly defined.
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {}
+
+```
+
+```html
+<template>
+    <c-child input={doesNotExist}></c-child>
+</template>
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    @api doesExist;
+}
+
+```
+
+```html
+<template>
+    <c-child input={doesExist}></c-child>
+</template>
+
+```
+
+## 😟 Limitations
+
+This rule flags a child class that references a property that’s only defined on the parent class.
+
+### ❌ Incorrect
+
+```javascript
+import Parent from 'x/parent';
+export default class Example extends Parent {}
+
+```
+
+```html
+<template>
+    <c-child input={existsOnParent}></c-child>
+</template>
+
+```
+
+### ✅ Correct
+
+Update the JavaScript file to explicitly define properties that are referenced in the template.
+
+```javascript
+import Parent from 'x/parent';
+export default class Example extends Parent {
+    @api existsOnParent;
+}
+
+```
+
+```html
+<template>
+    <c-child input={existsOnParent}></c-child>
+</template>
+
+```

lib/docs/no-composition-on-unanalyzable-property-non-public.md

@@ -0,0 +1,37 @@
+# no-composition-on-unanalyzable-property-non-public
+
+This rule flags iterators, image `src` attributes, or child components that reference a property that isn’t public. To resolve this error, review the referenced property to make sure that it’s public and valid.
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    notPublic;
+}
+
+```
+
+```html
+<template>
+    <c-child input={notPublic}></c-child>
+</template>
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    @api public;
+}
+
+```
+
+```html
+<template>
+    <c-child input={public}></c-child>
+</template>
+
+```

lib/docs/no-eval-usage.md

@@ -0,0 +1,27 @@
+# no-eval-usage
+
+This rule flags getters that use the `eval` function. To resolve this error, review the getter and refactor it to remove the `eval` function.
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    get invalid() {
+        return eval('something evil');
+    }
+}
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    get valid() {
+        return 'do no evil';
+    }
+}
+
+```

lib/docs/no-expression-contains-module-level-variable-ref.md

@@ -0,0 +1,31 @@
+# no-expression-contains-module-level-variable-ref
+
+This rule flags getters that reference a variable defined at the module level. To resolve this error, remove the variable from the module level. 
+
+## ❌ Incorrect
+
+```javascript
+import { LightningElement } from 'lwc';
+const moduleValue = 'val';
+export default class Example extends LightningElement {
+    get invalid() {
+        return moduleValue;
+    }
+}
+
+```
+
+## ✅ Correct
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class Example extends LightningElement {
+    get propValue() {
+        return 'val';
+    }
+    get valid() {
+        return this.propValue;
+    }
+}
+
+```