add support for @customElement decorator

43081j · May 13, 2019 · d00c889 · d00c889
1 parent 0da36a2
commit d00c889
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 9 deletions.
diff --git a/src/rules/no-constructor-attributes.ts b/src/rules/no-constructor-attributes.ts
@@ -136,6 +136,7 @@ const rule: Rule.RuleModule = {
 
     return {
       'ClassDeclaration,ClassExpression': (node: ESTree.Node): void => {
+        debugger;
         if (
           (node.type === 'ClassExpression' ||
             node.type === 'ClassDeclaration') &&

diff --git a/src/test/rules/attach-shadow-constructor_test.ts b/src/test/rules/attach-shadow-constructor_test.ts
@@ -133,6 +133,22 @@ ruleTester.run('attach-shadow-constructor', rule, {
           column: 11
         }
       ]
+    },
+    {
+      code: `@customElement('x-foo')
+      class A extends Element {
+        connectedCallback() {
+          this.attachShadow();
+        }
+      }`,
+      parser: '@typescript-eslint/parser',
+      errors: [
+        {
+          messageId: 'attachShadowConstructor',
+          line: 4,
+          column: 11
+        }
+      ]
     }
   ]
 });
diff --git a/src/test/rules/guard-super-call_test.ts b/src/test/rules/guard-super-call_test.ts
@@ -137,6 +137,22 @@ ruleTester.run('guard-super-call', rule, {
           column: 11
         }
       ]
+    },
+    {
+      code: `@customElement('x-foo')
+      class A extends Element {
+        connectedCallback() {
+          super.connectedCallback();
+        }
+      }`,
+      parser: '@typescript-eslint/parser',
+      errors: [
+        {
+          messageId: 'guardSuperCall',
+          line: 4,
+          column: 11
+        }
+      ]
     }
   ]
 });
diff --git a/src/test/rules/no-constructor-attributes_test.ts b/src/test/rules/no-constructor-attributes_test.ts
@@ -505,6 +505,25 @@ ruleTester.run('no-constructor-attributes', rule, {
           column: 11
         }
       ]
+    },
+    {
+      code: `@customElement('x-foo')
+      class Foo extends Bar {
+        constructor() {
+          super();
+          this.setAttribute('x', 'y');
+        }
+      }`,
+      parser: '@typescript-eslint/parser',
+      errors: [
+        {
+          message:
+            'Attributes must not be interacted with in the ' +
+            'constructor as the element may not be ready yet.',
+          line: 5,
+          column: 11
+        }
+      ]
     }
   ]
 });
diff --git a/src/test/rules/no-self-class_test.ts b/src/test/rules/no-self-class_test.ts
@@ -209,6 +209,22 @@ ruleTester.run('no-self-class', rule, {
           column: 11
         }
       ]
+    },
+    {
+      code: `@customElement('x-foo')
+      class Foo extends Bar {
+        method() {
+          this.className += 'test';
+        }
+      }`,
+      parser: '@typescript-eslint/parser',
+      errors: [
+        {
+          messageId: 'selfClass',
+          line: 4,
+          column: 11
+        }
+      ]
     }
   ]
 });
diff --git a/src/test/rules/no-typos_test.ts b/src/test/rules/no-typos_test.ts
@@ -162,9 +162,26 @@ ruleTester.run('no-typos', rule, {
     },
     {
       code: `/** @customElement **/
-        class Foo extends HTMLElement {
+        class Foo extends Bar {
+          static get observedAtributes() {}
+        }`,
+      errors: [
+        {
+          messageId: 'member',
+          data: {
+            replacement: 'observedAttributes'
+          },
+          line: 3,
+          column: 22
+        }
+      ]
+    },
+    {
+      code: `@customElement('x-foo')
+        class Foo extends Bar {
           static get observedAtributes() {}
         }`,
+      parser: '@typescript-eslint/parser',
       errors: [
         {
           messageId: 'member',

diff --git a/src/util.ts b/src/util.ts
@@ -1,6 +1,31 @@
 import * as ESTree from 'estree';
 import {AST} from 'eslint';
 
+export interface DecoratorNode extends ESTree.BaseNode {
+  type: 'Decorator';
+  expression: ESTree.Expression;
+}
+
+export type WithDecorators<T extends ESTree.Node> = T & {
+  decorators?: DecoratorNode[];
+};
+
+/**
+ * Determines if a given decorator is the `@customElement` decorator
+ *
+ * @param {DecoratorNode} node Decorator to test
+ * @return {boolean}
+ */
+export function isCustomElementDecorator(node: DecoratorNode): boolean {
+  return (
+    (node.expression.type === 'CallExpression' &&
+      node.expression.callee.type === 'Identifier' &&
+      node.expression.callee.name === 'customElement') ||
+    (node.expression.type === 'Identifier' &&
+      node.expression.name === 'customElement')
+  );
+}
+
 /**
  * Determines if a node is an element class or not.
  *
@@ -12,15 +37,34 @@ export function isCustomElement(
   node: ESTree.Node,
   jsdoc?: AST.Token | null
 ): node is ESTree.Class {
-  return (
-    (node.type === 'ClassExpression' || node.type === 'ClassDeclaration') &&
-    ((node.superClass &&
+  const asDecorated = node as WithDecorators<ESTree.Node>;
+
+  if (node.type === 'ClassExpression' || node.type === 'ClassDeclaration') {
+    if (
+      node.superClass &&
       node.superClass.type === 'Identifier' &&
-      node.superClass.name === 'HTMLElement') ||
-      (jsdoc !== undefined &&
-        jsdoc !== null &&
-        jsdoc.value.includes('@customElement')))
-  );
+      node.superClass.name === 'HTMLElement'
+    ) {
+      return true;
+    }
+
+    if (
+      jsdoc !== undefined &&
+      jsdoc !== null &&
+      jsdoc.value.includes('@customElement')
+    ) {
+      return true;
+    }
+
+    if (
+      asDecorated.decorators !== undefined &&
+      asDecorated.decorators.some(isCustomElementDecorator)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
 }
 
 /**