fix (no-invalid-extends): respect elementBaseClasses (#102)

We should respect `elementBaseClasses` as acceptable base classes for
custom elements when running the logic in this rule.

If it isn't set, we can default to `HTMLElement` as being the only base
class.

src/rules/no-invalid-extends.ts

@@ -99,6 +99,13 @@ const rule: Rule.RuleModule = {
     const source = context.getSourceCode();
     const elementClasses = new Set<ESTree.Class>();
     const userAllowedSuperNames = context.options[0]?.allowedSuperNames ?? [];
+    const elementBaseClasses = ['HTMLElement'];
+
+    if (Array.isArray(context.settings.wc?.elementBaseClasses)) {
+      elementBaseClasses.push(
+        ...(context.settings.wc.elementBaseClasses as string[])
+      );
+    }
 
     return {
       'ClassExpression,ClassDeclaration': (node: ESTree.Class): void => {
@@ -135,7 +142,9 @@ const rule: Rule.RuleModule = {
           ]);
         } else {
           allowedSuperNames = new Set<string>(userAllowedSuperNames);
-          allowedSuperNames.add('HTMLElement');
+          for (const baseClass of elementBaseClasses) {
+            allowedSuperNames.add(baseClass);
+          }
         }
 
         const formattedSuperNames = formatNames(allowedSuperNames);

src/test/rules/no-invalid-extends_test.ts

@@ -120,6 +120,15 @@ ruleTester.run('no-invalid-extends', rule, {
       code: `@customElement('x-foo')
       class A extends SomeElement {}`,
       parser
+    },
+    {
+      code: `class A extends SomeElement {}
+      customElements.define('a', A);`,
+      settings: {
+        wc: {
+          elementBaseClasses: ['SomeElement']
+        }
+      }
     }
   ],