Add filename checks

README.md

@@ -71,6 +71,8 @@ If you want more fine-grained configuration, you can instead add a snippet like
 - [lit/no-useless-template-literals](docs/rules/no-useless-template-literals.md)
 - [lit/no-value-attribute](docs/rules/no-value-attribute.md)
 - [lit/quoted-expressions](docs/rules/quoted-expressions.md)
+- [lit/file-name-matches-element-class](docs/rules/file-name-matches-element-class.md)
+- [lit/file-name-matches-element-name](docs/rules/file-name-matches-element-name.md)
 
 
 ## Shareable configurations

docs/rules/file-name-matches-element-class.md

@@ -0,0 +1,39 @@
+# Disallow different name between the class of the lit element and the filename (file-name-matches-element-class)
+
+It's hard to find a class name when the filename does not match (very useful in typescript).
+
+## Rule Details
+
+This rule disallows use of name between file and class.
+
+The following patterns are considered warnings:
+
+```ts
+  // filename: my-file.ts
+  @customElement('not-foo-bar')
+  class FooBarElement extends LitElement {}
+
+  // filename: my-file.js
+  class FooBarElement extends LitElement {}
+  customElements.define('not-foo-bar');
+```
+
+The following patterns are not warnings:
+
+```ts
+  // filename: foo-bar.ts
+  @customElement('foo-bar')
+  class FooBarElement extends LitElement {}
+
+  // filename: foo-bar.js
+  class FooBarElement extends LitElement {}
+  customElements.define('foo-bar');
+```
+
+## Options
+
+You can specify the format of the name of the file `['none', 'snake', 'kebab', 'pascal']`
+
+## When Not To Use It
+
+If you don't care about filename vs element name. 

docs/rules/file-name-matches-element-name.md

@@ -0,0 +1,47 @@
+# Disallow different name between the name of the lit element and the filename (file-name-matches-element-name)
+
+It's hard to find a component name when the filename does not match. Typically when you find a component through the chrome inspector.
+
+## Rule Details
+
+This rule disallows use of name between file and element.
+
+The following patterns are considered warnings:
+
+```ts
+// filename: my-file.ts
+class FooBarElement extends LitElement {}
+
+// filename: my-file.js
+class FooBarElement extends LitElement {}
+
+// filename: my-file.jsx
+class FooBarElement extends LitElement {}
+```
+
+The following patterns are not warnings:
+
+```ts
+// filename: not-related.ts
+class FooBarElement {}
+
+// filename: foo-bar-element.ts
+class FooBarElement LitElement {}
+
+// filename: foo-bar-element.js
+class FooBarElement LitElement {}
+
+// filename: foo-bar-element.jsx
+class FooBarElement LitElement {}
+
+// filename: foo-bar-element.jsx
+class FooBarElement SuperBehavior(LitElement) {}
+```
+
+## Options
+
+You can specify the format of the name of the file `['none', 'snake', 'kebab', 'pascal']`
+
+## When Not To Use It
+
+If you don't care about filename vs class name. 

src/configs/all.ts

@@ -17,7 +17,9 @@ const config = {
     'lit/no-useless-template-literals': 'error',
     'lit/no-value-attribute': 'error',
     'lit/prefer-static-styles': 'error',
-    'lit/quoted-expressions': 'error'
+    'lit/quoted-expressions': 'error',
+    'lit/file-name-matches-element-class': 'error',
+    'lit/file-name-matches-element-name': 'error'
   }
 };
 

src/rules/file-name-matches-element-class.ts

@@ -0,0 +1,72 @@
+/**
+ * @fileoverview Disallow different name between
+ * the class of the lit element and the filename
+ * @author Julien Rousseau <https://github.com/RoXuS>
+ */
+
+import {Rule} from 'eslint';
+import * as ESTree from 'estree';
+import {hasFileName, isValidFilename} from '../util';
+
+const isLitElementClass = (
+  args: Array<ESTree.SpreadElement | ESTree.Expression>
+): boolean => {
+  return args.some((a) => {
+    if (a.type === 'CallExpression') {
+      return isLitElementClass(a.arguments);
+    } else if (a.type === 'Identifier' && a.name === 'LitElement') {
+      return true;
+    }
+    return false;
+  });
+};
+
+const rule: Rule.RuleModule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Enforce usage of the same element class name and filename'
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          transform: {
+            oneOf: [
+              {
+                enum: ['none', 'snake', 'kebab', 'pascal']
+              },
+              {
+                type: 'array',
+                items: {
+                  enum: ['none', 'snake', 'kebab', 'pascal']
+                },
+                minItems: 1,
+                maxItems: 4
+              }
+            ]
+          }
+        }
+      }
+    ]
+  },
+  create(context): Rule.RuleListener {
+    if (!hasFileName(context)) return {};
+    return {
+      'ClassDeclaration, ClassExpression': (node: ESTree.Class): void => {
+        if (
+          node.superClass?.type === 'CallExpression' &&
+          isLitElementClass(node.superClass.arguments)
+        ) {
+          isValidFilename(context, node, node.id?.name || '');
+        }
+      },
+      [`:matches(ClassDeclaration, ClassExpression)[superClass.name=/.*LitElement.*/]`]:
+        (node: ESTree.Class): void => {
+          isValidFilename(context, node, node.id?.name || '');
+        }
+    };
+  }
+};
+
+export = rule;

src/rules/file-name-matches-element-name.ts

@@ -0,0 +1,101 @@
+/**
+ * @fileoverview Disallow different name between
+ * the name of the lit element and the filename
+ * @author Julien Rousseau <https://github.com/RoXuS>
+ */
+
+import {Rule} from 'eslint';
+import * as ESTree from 'estree';
+import {hasFileName, isValidFilename} from '../util';
+
+const kebabCaseToPascalCase = (kebabElementName: string): string => {
+  const camelCaseElementName = kebabElementName.replace(/-./g, (x) =>
+    x[1].toUpperCase()
+  );
+  return (
+    camelCaseElementName.charAt(0).toUpperCase() + camelCaseElementName.slice(1)
+  );
+};
+
+const rule: Rule.RuleModule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Enforce usage of the same element name and filename'
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          transform: {
+            oneOf: [
+              {
+                enum: ['none', 'snake', 'kebab', 'pascal']
+              },
+              {
+                type: 'array',
+                items: {
+                  enum: ['none', 'snake', 'kebab', 'pascal']
+                },
+                minItems: 1,
+                maxItems: 4
+              }
+            ]
+          }
+        }
+      }
+    ]
+  },
+  create(context): Rule.RuleListener {
+    if (!hasFileName(context)) return {};
+    return {
+      'CallExpression[callee.name=customElement]': (
+        node: ESTree.CallExpression & {
+          parent: ESTree.Node & {parent: ESTree.Node};
+        }
+      ): void => {
+        if (
+          node.callee.type === 'Identifier' &&
+          node.callee.name === 'customElement' &&
+          node.parent.parent.type === 'ClassDeclaration'
+        ) {
+          const literalArgument = node.arguments.find(
+            (a) => a.type === 'Literal'
+          );
+          if (
+            literalArgument?.type === 'Literal' &&
+            literalArgument.value &&
+            typeof literalArgument.value === 'string'
+          ) {
+            isValidFilename(
+              context,
+              node,
+              kebabCaseToPascalCase(literalArgument.value)
+            );
+          }
+        }
+      },
+      [`CallExpression[callee.property.name=define]:matches([callee.object.type=Identifier][callee.object.name=customElements],[callee.object.type=MemberExpression][callee.object.property.name=customElements]):exit`]:
+        (node: ESTree.CallExpression): void => {
+          if (node.callee.type === 'MemberExpression') {
+            const literalArgument = node.arguments.find(
+              (a) => a.type === 'Literal'
+            );
+            if (
+              literalArgument?.type === 'Literal' &&
+              literalArgument.value &&
+              typeof literalArgument.value === 'string'
+            ) {
+              isValidFilename(
+                context,
+                node,
+                kebabCaseToPascalCase(literalArgument.value)
+              );
+            }
+          }
+        }
+    };
+  }
+};
+
+export = rule;