feat(onpush): handle signals syntax

Author: ProGM

.github/workflows/test.yml

@@ -5,7 +5,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '14', '16', '18' ]
+        node: [ '18', '20', '22', '24' ]
     name: Node ${{ matrix.node }} sample
     steps:
       - uses: actions/checkout@v2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monade/eslint-plugin-angular",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A couple of quality-of-life rules for eslint + angular",
   "main": "src/index.js",
   "scripts": {

src/rules/strategy-onpush.js

@@ -1,4 +1,4 @@
-const { getDecoratorName } = require('../utils');
+const { getDecoratorName, isAngularSignal, hasDecorator } = require('../utils');
 
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
@@ -40,6 +40,33 @@ module.exports = {
           }
         }
 
+        const hasInject = node.body.body.find((e) => {
+          return e.type === "PropertyDefinition" && isAngularSignal(e, "inject");
+        });
+
+        if (hasInject) {
+          return;
+        }
+
+        const hasIOProperty = node.body.body.find((e) => {
+          if (e.type !== "PropertyDefinition") {
+            return false;
+          }
+          if (isAngularSignal(e, "input") ||
+              isAngularSignal(e, "output") ||
+              hasDecorator(e, "Input") ||
+              hasDecorator(e, "Output")
+            ) {
+            return false;
+          }
+
+          return true;
+        });
+
+        if (hasIOProperty) {
+          return;
+        }
+
         const decoratorParams =
           componentDecorator?.expression?.arguments?.[0]?.properties?.map(
             (e) => e.value

src/utils.js

@@ -1,5 +1,27 @@
+function getDecoratorName(decorator) {
+  return decorator?.expression?.callee?.name || decorator?.expression?.name;
+}
+
 module.exports = {
-  getDecoratorName(decorator) {
-    return decorator?.expression?.callee?.name || decorator?.expression?.name;
+  getDecoratorName,
+  /** @param {import('estree').PropertyDefinition} node */
+  /** @param {string} name */
+  isAngularSignal(node, name) {
+    if (node.value?.type !== "CallExpression") {
+      return false;
+    }
+
+    if (node.value.callee?.name !== name) {
+      return false;
+    }
+
+    return true;
+  },
+  /** @param {import('estree').PropertyDefinition} node */
+  /** @param {string} name */
+  hasDecorator(node, name) {
+    return node.decorators?.some((decorator) => {
+      return getDecoratorName(decorator) === name;
+    });
   }
 }

test/strategy-onpush.test.js

@@ -28,6 +28,52 @@ ruleTester.run("strategy-onpush", strategyOnPush, {
         }
       `,
     },
+    {
+      name: "Injected dependency, no strategy onpush",
+      code: `
+        @Component({
+          selector: 'app-root',
+        })
+        public class AppComponent {
+          someService = inject(Service);
+        }
+      `,
+    },
+    {
+      name: "Input, no property",
+      code: `
+        @Component({
+          selector: 'app-root',
+          changeDetection: ChangeDetectionStrategy.OnPush,
+        })
+        public class AppComponent {
+          @Input() someInput: string;
+        }
+      `,
+    },
+    {
+      name: "Input signal, no property",
+      code: `
+        @Component({
+          selector: 'app-root',
+          changeDetection: ChangeDetectionStrategy.OnPush,
+        })
+        public class AppComponent {
+          someInput = input("some");
+        }
+      `,
+    },
+    {
+      name: "property that is not an input nor an output",
+      code: `
+        @Component({
+          selector: 'app-root',
+        })
+        public class AppComponent {
+          someInput = signal();
+        }
+      `,
+    }
   ],
   invalid: [
     {
@@ -57,5 +103,41 @@ public class AppComponent {}`,
         },
       ],
     },
+    {
+      name: "property that is not an input nor an output",
+      code: `
+        @Component({
+          selector: 'app-root',
+        })
+        public class AppComponent {
+          someInput = input('');
+        }`,
+      output: `
+        @Component({
+          selector: 'app-root',
+changeDetection: ChangeDetectionStrategy.OnPush,
+        })
+        public class AppComponent {
+          someInput = input('');
+        }`,
+      errors: [
+        {
+          messageId: "strategyOnPush",
+          suggestions: [
+            {
+              messageId: 'strategyOnPushSuggestion',
+              output: `
+        @Component({
+          selector: 'app-root',
+changeDetection: ChangeDetectionStrategy.OnPush,
+        })
+        public class AppComponent {
+          someInput = input('');
+        }`,
+            },
+          ],
+        },
+      ],
+    }
   ],
 });