fix: allow decorated properties with class fields (#201)

Allows properties decorated with lit property decorators to have class
fields alongside.

This loosens the strictness of the rule under the assumption you have
set `useDefineForClassFields: false` in typescript.

If you use `declare` or `accessor`, those fields will already be ignored
by this rule.

Examples:

```ts
// Error
class X extends LitElement {
  fieldA;
  static properties = {fieldA: {type: String}};
}

// Works now, errored before
class X extends LitElement {
  @Property()
  fieldA;
}

// Worked before, works now
class X extends LitElement {
  @Property()
  declare fieldA;
}

// Worked before, works now
class X extends LitElement {
  declare fieldA;
  static properties = {fieldA: {type: String}};
}

// Worked before, works now
class X extends LitElement {
  @Property()
  accessor fieldA;
}
```

Fixes #193.

Author: 43081j

docs/rules/no-classfield-shadowing.md

@@ -1,11 +1,11 @@
-# Disallows class fields with same name as static properties
+# Disallows class fields with same name as reactive properties
 
-Class fields set with same names as static properties will not trigger updates as expected. They will overwrite
+Class fields set with same names as reactive properties will not trigger updates as expected. They will overwrite
 accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.
 
 ## Rule Details
 
-This rule disallows class fields with same name as static properties.
+This rule disallows class fields with same name as reactive properties.
 
 The following patterns are considered warnings:
 

package-lock.json

@@ -49,8 +49,8 @@
     "eslint": ">= 5"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/plugin-proposal-decorators": "^7.18.10",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/plugin-proposal-decorators": "^7.24.1",
     "@types/chai": "^4.2.16",
     "@types/eslint": "^8.4.6",
     "@types/estree": "^1.0.0",

package.json

@@ -5,7 +5,12 @@
 
 import {Rule} from 'eslint';
 import * as ESTree from 'estree';
-import {getClassFields, getPropertyMap, isLitClass} from '../util';
+import {
+  getClassFields,
+  getPropertyMap,
+  isLitClass,
+  hasLitPropertyDecorator
+} from '../util';
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -22,7 +27,7 @@ const rule: Rule.RuleModule = {
     messages: {
       noClassfieldShadowing:
         'The {{ prop }} property is a class field which has the same name as ' +
-        'static property which could have unintended side-effects.'
+        'a reactive property which could have unintended side-effects.'
     }
   },
 
@@ -34,7 +39,8 @@ const rule: Rule.RuleModule = {
           const classMembers = getClassFields(node);
 
           for (const [prop, {key}] of propertyMap.entries()) {
-            if (classMembers.has(prop)) {
+            const member = classMembers.get(prop);
+            if (member && !hasLitPropertyDecorator(member)) {
               context.report({
                 node: key,
                 messageId: 'noClassfieldShadowing',

src/rules/no-classfield-shadowing.ts

@@ -17,9 +17,7 @@ const parser = require.resolve('@babel/eslint-parser');
 const parserOptions = {
   requireConfigFile: false,
   babelOptions: {
-    plugins: [
-      ['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true}]
-    ]
+    plugins: [['@babel/plugin-proposal-decorators', {version: '2023-11'}]]
   }
 };
 

src/test/rules/attribute-names_test.ts

@@ -21,6 +21,23 @@ const ruleTester = new RuleTester({
   }
 });
 
+const parser = require.resolve('@babel/eslint-parser');
+const parserOptions = {
+  requireConfigFile: false,
+  babelOptions: {
+    plugins: [
+      [
+        '@babel/plugin-proposal-decorators',
+        {
+          version: '2023-11'
+        }
+      ]
+    ]
+  }
+};
+
+const tsParser = require.resolve('@typescript-eslint/parser');
+
 ruleTester.run('no-classfield-shadowing', rule, {
   valid: [
     `class MyElement extends LitElement {
@@ -39,7 +56,32 @@ ruleTester.run('no-classfield-shadowing', rule, {
       properties = {
         foo: { type: String }
       }
-    }`
+    }`,
+    {
+      code: `class MyElement extends LitElement {
+        @property()
+        foo;
+      }`,
+      parser,
+      parserOptions
+    },
+    {
+      code: `class MyElement extends LitElement {
+        @property()
+        accessor foo;
+      }`,
+      parser,
+      parserOptions
+    },
+    {
+      code: `class MyElement extends LitElement {
+        declare foo;
+        static properties = {
+          foo: { type: String }
+        };
+      }`,
+      parser: tsParser
+    }
   ],
 
   invalid: [

src/test/rules/no-classfield-shadowing_test.ts

@@ -25,9 +25,7 @@ const parser = require.resolve('@babel/eslint-parser');
 const parserOptions = {
   requireConfigFile: false,
   babelOptions: {
-    plugins: [
-      ['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true}]
-    ]
+    plugins: [['@babel/plugin-proposal-decorators', {version: '2023-11'}]]
   }
 };
 

src/test/rules/no-property-change-update_test.ts

@@ -9,6 +9,10 @@ export interface BabelProperty extends ESTree.MethodDefinition {
   decorators?: BabelDecorator[];
 }
 
+export type DecoratedNode = ESTree.Node & {
+  decorators?: BabelDecorator[];
+};
+
 /**
  * Returns if given node has a lit identifier
  * @param {ESTree.Node} node
@@ -139,6 +143,9 @@ export function getClassFields(
   return result;
 }
 
+const propertyDecorators = ['state', 'property', 'internalProperty'];
+const internalDecorators = ['state', 'internalProperty'];
+
 /**
  * Get the properties object of an element class
  *
@@ -149,8 +156,6 @@ export function getPropertyMap(
   node: ESTree.Class
 ): ReadonlyMap<string, PropertyMapEntry> {
   const result = new Map<string, PropertyMapEntry>();
-  const propertyDecorators = ['state', 'property', 'internalProperty'];
-  const internalDecorators = ['state', 'internalProperty'];
 
   for (const member of node.body.body) {
     if (
@@ -243,6 +248,31 @@ export function getPropertyMap(
   return result;
 }
 
+/**
+ * Determines if a node has a lit property decorator
+ * @param {ESTree.Node} node Node to test
+ * @return {boolean}
+ */
+export function hasLitPropertyDecorator(node: ESTree.Node): boolean {
+  const decoratedNode = node as DecoratedNode;
+
+  if (!decoratedNode.decorators || !Array.isArray(decoratedNode.decorators)) {
+    return false;
+  }
+
+  for (const decorator of decoratedNode.decorators) {
+    if (
+      decorator.expression.type === 'CallExpression' &&
+      decorator.expression.callee.type === 'Identifier' &&
+      propertyDecorators.includes(decorator.expression.callee.name)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 /**
  * Generates a placeholder string for a given quasi
  *