Feature/mod strict mutable

src/rules/strict-mutable.ts

@@ -1,8 +1,23 @@
 import { Rule } from 'eslint';
+import ts from 'typescript';
 import { parseDecorator, stencilComponentContext } from '../utils';
 
 const mutableProps = new Map<string, any>();
-
+const ASSIGN_TOKENS = [
+  ts.SyntaxKind.EqualsToken,
+  ts.SyntaxKind.PlusEqualsToken,
+  ts.SyntaxKind.MinusEqualsToken,
+  ts.SyntaxKind.AsteriskEqualsToken,
+  ts.SyntaxKind.AsteriskAsteriskEqualsToken,
+  ts.SyntaxKind.SlashEqualsToken,
+  ts.SyntaxKind.PercentEqualsToken,
+  ts.SyntaxKind.LessThanLessThanEqualsToken,
+  ts.SyntaxKind.GreaterThanGreaterThanEqualsToken,
+  ts.SyntaxKind.GreaterThanGreaterThanGreaterThanEqualsToken,
+  ts.SyntaxKind.AmpersandEqualsToken,
+  ts.SyntaxKind.BarEqualsToken,
+  ts.SyntaxKind.CaretEqualsToken
+];
 const rule: Rule.RuleModule = {
   meta: {
     docs: {
@@ -23,56 +38,53 @@ const rule: Rule.RuleModule = {
       if (!stencil.isComponent()) {
         return;
       }
-      const originalNode = parserServices.esTreeNodeToTSNodeMap.get(node);
       const parsed = parseDecorator(node);
       const mutable = parsed && parsed.length && parsed[0].mutable || false;
       if (mutable) {
-        const varName = originalNode.parent.name.escapedText;
+        const varName = node.parent.key.name;
         mutableProps.set(varName, node);
       }
     }
 
-    function getName(expression: any) {
-      if (expression.left && expression.left.name) {
-        return expression.left.name;
+    function removeVar(name: any) {
+      if (!name) {
+        return;
+      }
+      if (name.escapedText) {
+        mutableProps.delete(name.escapedText);
       }
-      return null;
     }
 
-    function parseExpression(expression: any): any {
-      if (!expression) {
-        return null;
-      }
-      if (expression.expression) {
-        return parseExpression(expression.expression);
+    function getArray(value: any | any[]): any[] {
+      if (!value) {
+        return [];
       }
-      if (expression.openingElement) {
-        return expression.openingElement.attributes &&
-          expression.openingElement.attributes.nextContainer &&
-          parseExpression(expression.openingElement.attributes.nextContainer.body);
+      return Array.isArray(value) ? value : [value];
+    }
+
+    function checkStatement(st: any) {
+      if (!st) {
+        return;
       }
-      return expression && getName(expression);
+      const { expression, thenStatement, elseStatement } = st;
+      [...getArray(thenStatement), ...getArray(elseStatement), expression].filter((ex) => !!ex).forEach(checkExpression);
     }
 
-    function removeUsedVars(statements: any[]) {
-      statements
-        .map((st) => st.expression && parseExpression(st.expression))
-        .filter((name) => !!name)
-        .forEach((name) => {
-          mutableProps.delete(name.escapedText);
-        });
-      statements
-        .filter((st) => st.thenStatement && st.thenStatement.statements)
-        .map((st) => st.thenStatement.statements)
-        .forEach((st) => {
-          removeUsedVars(st);
-        });
-      statements
-        .filter((st) => st.elseStatement)
-        .forEach((st) => {
-          const sts = Array.isArray(st.elseStatement) ? st.elseStatement : [st.elseStatement];
-          removeUsedVars(sts);
-        });
+    function checkExpression(expr: any) {
+      if (!expr) {
+        return;
+      }
+      const { expression, left, openingElement, body, nextContainer, statements, thenStatement } = expr;
+      if (left && left.name && expr.operatorToken && ASSIGN_TOKENS.includes(expr.operatorToken.kind)) {
+        removeVar(left.name);
+      }
+      if (openingElement) {
+        getArray(openingElement.attributes).forEach(checkExpression);
+      }
+      [...getArray(thenStatement), expression, body, nextContainer].filter((ex) => !!ex).forEach(checkExpression);
+      if (statements) {
+        statements.forEach(checkStatement);
+      }
     }
 
     return {
@@ -85,7 +97,9 @@ const rule: Rule.RuleModule = {
         const originalNode = parserServices.esTreeNodeToTSNodeMap.get(node);
         const statements = originalNode.body.statements;
         if (statements && statements.length) {
-          removeUsedVars(statements);
+          statements.forEach((st: any) => {
+            checkStatement(st);
+          });
         }
       },
       'ClassDeclaration:exit': (node: any) => {
@@ -94,11 +108,11 @@ const rule: Rule.RuleModule = {
         }
         stencil.rules['ClassDeclaration:exit'](node);
         mutableProps.forEach((varNode, varName) => {
-          const originalNode = parserServices.esTreeNodeToTSNodeMap.get(varNode);
+          const originalNode = parserServices.esTreeNodeToTSNodeMap.get(varNode.parent);
           const text = originalNode.getFullText();
           const parsed = parseDecorator(varNode);
           context.report({
-            node: varNode,
+            node: varNode.parent,
             message: `@Prop() "${varName}" should not be mutable`,
             fix(fixer) {
               const options = parsed && parsed.length && parsed[0] || {};

src/utils.ts

@@ -2,6 +2,8 @@ import ts from 'typescript';
 // @ts-ignore
 import { getStaticValue } from 'eslint-utils';
 
+const SyntaxKind = ts.SyntaxKind;
+
 export function isPrivate(originalNode: ts.Node) {
   if (originalNode.modifiers) {
     return originalNode.modifiers.some(m => (
@@ -20,7 +22,7 @@ export function getDecorator(node: any, decoratorName?: string): any | any[] {
 }
 
 export function parseDecorator(decorator: any) {
-  if (decorator && decorator.expression.type === 'CallExpression') {
+  if (decorator && decorator.expression && decorator.expression.type === 'CallExpression') {
     return decorator.expression.arguments.map((a: any) => {
       const parsed = getStaticValue(a);
       return parsed ? parsed.value : undefined;
@@ -78,3 +80,76 @@ export const stencilLifecycle = [
   'componentDidUpdate',
   'render'
 ];
+
+const TOKEN_TO_TEXT: { readonly [P in ts.SyntaxKind]?: string } = {
+  [SyntaxKind.OpenBraceToken]: '{',
+  [SyntaxKind.CloseBraceToken]: '}',
+  [SyntaxKind.OpenParenToken]: '(',
+  [SyntaxKind.CloseParenToken]: ')',
+  [SyntaxKind.OpenBracketToken]: '[',
+  [SyntaxKind.CloseBracketToken]: ']',
+  [SyntaxKind.DotToken]: '.',
+  [SyntaxKind.DotDotDotToken]: '...',
+  [SyntaxKind.SemicolonToken]: ',',
+  [SyntaxKind.CommaToken]: ',',
+  [SyntaxKind.LessThanToken]: '<',
+  [SyntaxKind.GreaterThanToken]: '>',
+  [SyntaxKind.LessThanEqualsToken]: '<=',
+  [SyntaxKind.GreaterThanEqualsToken]: '>=',
+  [SyntaxKind.EqualsEqualsToken]: '==',
+  [SyntaxKind.ExclamationEqualsToken]: '!=',
+  [SyntaxKind.EqualsEqualsEqualsToken]: '===',
+  [SyntaxKind.InstanceOfKeyword]: 'instanceof',
+  [SyntaxKind.ExclamationEqualsEqualsToken]: '!==',
+  [SyntaxKind.EqualsGreaterThanToken]: '=>',
+  [SyntaxKind.PlusToken]: '+',
+  [SyntaxKind.MinusToken]: '-',
+  [SyntaxKind.AsteriskToken]: '*',
+  [SyntaxKind.AsteriskAsteriskToken]: '**',
+  [SyntaxKind.SlashToken]: '/',
+  [SyntaxKind.PercentToken]: '%',
+  [SyntaxKind.PlusPlusToken]: '++',
+  [SyntaxKind.MinusMinusToken]: '--',
+  [SyntaxKind.LessThanLessThanToken]: '<<',
+  [SyntaxKind.LessThanSlashToken]: '</',
+  [SyntaxKind.GreaterThanGreaterThanToken]: '>>',
+  [SyntaxKind.GreaterThanGreaterThanGreaterThanToken]: '>>>',
+  [SyntaxKind.AmpersandToken]: '&',
+  [SyntaxKind.BarToken]: '|',
+  [SyntaxKind.CaretToken]: '^',
+  [SyntaxKind.ExclamationToken]: '!',
+  [SyntaxKind.TildeToken]: '~',
+  [SyntaxKind.AmpersandAmpersandToken]: '&&',
+  [SyntaxKind.BarBarToken]: '||',
+  [SyntaxKind.QuestionToken]: '?',
+  [SyntaxKind.ColonToken]: ':',
+  [SyntaxKind.EqualsToken]: '=',
+  [SyntaxKind.PlusEqualsToken]: '+=',
+  [SyntaxKind.MinusEqualsToken]: '-=',
+  [SyntaxKind.AsteriskEqualsToken]: '*=',
+  [SyntaxKind.AsteriskAsteriskEqualsToken]: '**=',
+  [SyntaxKind.SlashEqualsToken]: '/=',
+  [SyntaxKind.PercentEqualsToken]: '%=',
+  [SyntaxKind.LessThanLessThanEqualsToken]: '<<=',
+  [SyntaxKind.GreaterThanGreaterThanEqualsToken]: '>>=',
+  [SyntaxKind.GreaterThanGreaterThanGreaterThanEqualsToken]: '>>>=',
+  [SyntaxKind.AmpersandEqualsToken]: '&=',
+  [SyntaxKind.BarEqualsToken]: '|=',
+  [SyntaxKind.CaretEqualsToken]: '^=',
+  [SyntaxKind.AtToken]: '@',
+  [SyntaxKind.InKeyword]: 'in',
+  [SyntaxKind.UniqueKeyword]: 'unique',
+  [SyntaxKind.KeyOfKeyword]: 'keyof',
+  [SyntaxKind.NewKeyword]: 'new',
+  [SyntaxKind.ImportKeyword]: 'import',
+  [SyntaxKind.ReadonlyKeyword]: 'readonly'
+};
+
+/**
+ * Returns the string form of the given TSToken SyntaxKind
+ * @param kind the token's SyntaxKind
+ * @returns the token applicable token as a string
+ */
+export function getTextForTokenKind(kind: ts.SyntaxKind): string | undefined {
+  return TOKEN_TO_TEXT[kind];
+}

tests/lib/rules/strict-mutable/strict-mutable.good.tsx

@@ -6,11 +6,14 @@ export class SampleTag {
   @Prop({ mutable: false }) readonly testNotMutable?: boolean;
   @Prop({ mutable: true }) mutableInJsx?: boolean;
   @Prop({ mutable: true }) mutableInJsx2?: boolean;
+  @Prop({ mutable: true }) testMutableReturn?: boolean;
 
   private internalMethod() {
     const test = 'hi';
-    this.testMutable = 'other value';
-    return 'ok';
+    if (!this.testNotMutable) {
+      this.testMutable = 'other value';
+    }
+    return this.testMutableReturn = true;
   }
 
   private onClick(e: Event) {
@@ -23,7 +26,21 @@ export class SampleTag {
   }
 
   render() {
-    this.mutableInJsx2 = false;
-    return (<div onClick={(e) => this.mutableInJsx = true}>test</div>);
+    return (
+      <div class="class" onClick={(e) => this.mutableInJsx = true}>
+        {this.values.map((value, index) => {
+          return (
+            <div
+              onClick={() => (this.mutableInJsx2 = index)}
+              class={{
+                'label': true,
+                selected: index === this.selected
+              }}>
+              <span>{value}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 }

tests/lib/rules/strict-mutable/strict-mutable.wrong.tsx

@@ -2,6 +2,9 @@
 export class SampleTag {
   @Prop({ mutable: false }) readonly test?: string;
   @Prop({ mutable: true }) testMutable?: string;
+  /**
+   * Some property comment
+   */
   @Prop({ mutable: true, attribute: 'some-attr', reflect: true }) testMutable2?: string;
 
   private internalMethod() {