@dineroregnskab/eslint-plugin-custom-rules 2.1.3 → 3.0.0

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "singleQuote": true,
+  "endOfLine": "auto",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.workingDirectories": ["./example"]
+}

package/README.md

@@ -18,39 +18,34 @@ Run `npm i` in root and in `/example`.
 
 ### Adding rules
 
-- Add the rule here: `dinero-web-2.0/Dinero.Packages/Dinero.EslintCustomRules/rules`
+- Create a new js rule in this directory: `./rules`
 
-- Add the new js rule to this file `eslint-plugin-custom-rules.js`.
+- Add the new rule to this file `./eslint-plugin-custom-rules.js`.
 
-- You can test the rule by adding some HTML code to test it on here `dinero-web-2.0/Dinero.Packages/Dinero.EslintCustomRules/example`
+- Add the new rule to `./example/.eslintrc.json`
 
-- After adding the rule you can restart the ESLint server in vs code by pressing F1 -> ESLint: Restart ESLint Server.
+- Test the rule by adding some HTML/TS code here `./example/test.html` or `./example/test.ts` and restart the ESLint server in vs code by pressing F1 -> ESLint: Restart ESLint Server.
 
-Add html rules in `test.html` and run test with
+- You can also test the rules via the terminal directly without reloading eslint server and to see code debugging in the rule definition:
 
 ```bash
 npm run testhtml
-```
-
-Add ts rules in `test.ts` and run test with
-
-```bash
 npm run testts
 ```
 
 #### Debugging what the eslint sees
 
-Add a rule, and log it with console log, to see in terminal what is going on. Then run `npm run testhtml` npm script to see it in terminal.
+Add a rule, and log it with console log, to see in terminal if the element function even runs "Program" in this case. Then run `npm run testhtml` npm script to see it in terminal.
 
 ```js
 module.exports = {
     meta: {
-        type: "suggestion",
+        type: 'suggestion',
         docs: {
             description:
-                "Enforce using `danishCurrency` pipe instead of `currency` pipe in Angular HTML templates.",
+                'Enforce using `danishCurrency` pipe instead of `currency` pipe in Angular HTML templates.',
         },
-        fixable: "code",
+        fixable: 'code',
         schema: [],
     },
 
@@ -58,12 +53,11 @@ module.exports = {
         return {
             // Target the entire file and traverse each node
             Program(node) {
-                console.log("Parsed Node Types:", node);
+                console.log('Parsed Node Types:', node);
             },
         };
     },
 };
-
 ```
 
 ### Publish & install new rule locally
@@ -89,7 +83,7 @@ Example:
 
 ```bash
 npm i
-````
+```
 
 > **Note: You need to restart ESLint to apply new rules. Restart the ESLint server in vs code by pressing F1 -> ESLint: Restart ESLint Server or F1 -> reload window**
 

package/eslint-plugin-custom-rules.js

@@ -1,17 +1,18 @@
-const returnReducerRule = require("./rules/reducers-should-always-return");
-const camelCaseRule = require("./rules/camel-case-attributes");
-const dayjsWithTimeZoneRule = require("./rules/dayjs-with-timezone");
-const useDanishCurrencyPipeRule = require("./rules/use-danish-currency-pipe");
-const replaceFirstWithTakeRule = require("./rules/replace-first-with-take");
-
-const customRulesPlugin = {
-    rules: {
-        "reducers-should-always-return": returnReducerRule,
-        "attr-camel-case-rule": camelCaseRule,
-        "dayjs-with-timezone": dayjsWithTimeZoneRule,
-        "use-danish-currency-pipe": useDanishCurrencyPipeRule,
-        "replace-first-with-take": replaceFirstWithTakeRule,
-    },
+const rules = {
+    'reducers-should-always-return': require('./rules/reducers-should-always-return'),
+    'attr-camel-case-rule': require('./rules/camel-case-attributes'),
+    'dayjs-with-timezone': require('./rules/dayjs-with-timezone'),
+    'use-danish-currency-pipe': require('./rules/use-danish-currency-pipe'),
+    'replace-first-with-take': require('./rules/replace-first-with-take'),
+    'disallow-multiple-calls': require('./rules/disallow-multiple-calls'),
+    'disallow-signal-property-reassignment': require('./rules/disallow-signal-property-reassignment'),
+    'signal-naming-convention': require('./rules/signal-naming-convention'),
+    'filter-before-take': require('./rules/filter-before-take'),
+    'no-viewencapsulation-none': require('./rules/no-viewencapsulation-none'),
 };
 
-module.exports = customRulesPlugin;
+console.log('Custom ESLint rules loaded:', Object.keys(rules)); // Debug log
+
+module.exports = {
+    rules,
+};

package/package.json

@@ -1,23 +1,30 @@
 {
   "name": "@dineroregnskab/eslint-plugin-custom-rules",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "description": "ESLint plugin with custom rules for Dinero Regnskab",
   "main": "eslint-plugin-custom-rules.js",
-  "scripts": {},
+  "scripts": {
+    "prettier:write": "prettier \"./**/*.{ts,html,md,scss,js}\" --write"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "eslint": "^8.53.0"
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.4.1"
   },
   "peerDependencies": {
-    "eslint": ">=8.0.0"
+    "eslint": ">=8.0.0",
+    "@typescript-eslint/parser": ">=7"
   },
   "files": [
     "**/*",
     "!example/**/*"
   ],
   "dependencies": {
-    "@angular-eslint/template-parser": "^17.1.0"
+    "@angular-eslint/template-parser": "17.5.3"
   }
 }

package/rules/camel-case-attributes.js

@@ -11,18 +11,23 @@ module.exports = {
     create(context) {
         return {
             TextAttribute(node) {
-                if ((node.name === 'data-cy' || node.name === 'id') && node.value) {
-                        const camelCasedValue = new RegExp(/^[a-z]+([A-Z]?[a-z]*)*$/);
+                if (
+                    (node.name === 'data-cy' || node.name === 'id') &&
+                    node.value
+                ) {
+                    const camelCasedValue = new RegExp(
+                        /^[a-z]+([A-Z]?[a-z]*)*$/,
+                    );
 
-                        if (!camelCasedValue.test(node.value)) {
-                            context.report({
-                                node,
-                                message:
-                                    'The value of data-cy and id attributes should be in camelCase.',
-                            });
-                        }
+                    if (!camelCasedValue.test(node.value)) {
+                        context.report({
+                            node,
+                            message:
+                                'The value of data-cy and id attributes should be in camelCase.',
+                        });
+                    }
                 }
-            }
-        }
+            },
+        };
     },
 };

package/rules/dayjs-with-timezone.js

@@ -1,9 +1,9 @@
 module.exports = {
     meta: {
-        type: "suggestion",
+        type: 'suggestion',
         docs: {
-            description: "Enforce using dayjs.tz() instead of dayjs()",
-            category: "Best Practices",
+            description: 'Enforce using dayjs.tz() instead of dayjs()',
+            category: 'Best Practices',
             recommended: false,
         },
         fixable: null,
@@ -14,13 +14,13 @@ module.exports = {
         return {
             CallExpression(node) {
                 if (
-                    node.callee.type === "Identifier" &&
-                    node.callee.name === "dayjs"
+                    node.callee.type === 'Identifier' &&
+                    node.callee.name === 'dayjs'
                 ) {
                     context.report({
                         node,
                         message:
-                            "Consider using dayjs.tz() instead of dayjs() for timezone support",
+                            'Consider using dayjs.tz() instead of dayjs() for timezone support',
                     });
                 }
             },

package/rules/disallow-multiple-calls.js

@@ -0,0 +1,33 @@
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Disallow multiple function calls in a single event binding.',
+        },
+        schema: [], // No options for this rule
+    },
+
+    create(context) {
+        return {
+            BoundEvent(node) {
+                if (
+                    node.handler &&
+                    node.handler.ast &&
+                    node.handler.ast.type === 'Chain'
+                ) {
+                    const expressions = node.handler.ast.expressions;
+
+                    // If there are multiple expressions (function calls), report
+                    if (expressions.length > 1) {
+                        context.report({
+                            node,
+                            message:
+                                'Multiple function calls are not allowed in a single event binding. Use one function per event.',
+                        });
+                    }
+                }
+            },
+        };
+    },
+};

package/rules/disallow-signal-property-reassignment.js

@@ -0,0 +1,35 @@
+module.exports = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description:
+                'Avoid reassigning properties of signal values, as it will fail at runtime.',
+        },
+        schema: [], // No options for this rule
+    },
+
+    create(context) {
+        return {
+            AssignmentExpression(node) {
+                // Check if the left-hand side is a MemberExpression
+                if (
+                    node.left.type === 'MemberExpression' &&
+                    node.left.object.type === 'CallExpression' &&
+                    node.left.object.callee.type === 'MemberExpression' &&
+                    node.left.object.callee.property.name === 'get' && // Match `.get()` method
+                    node.left.object.callee.object.type ===
+                        'MemberExpression' &&
+                    node.left.object.callee.object.property.name.endsWith(
+                        'Signal',
+                    ) // Match signals
+                ) {
+                    context.report({
+                        node,
+                        message:
+                            'Reassigning properties of a signal value will fail at runtime. Use a setter or update mechanism instead.',
+                    });
+                }
+            },
+        };
+    },
+};

package/rules/filter-before-take.js

@@ -0,0 +1,58 @@
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Ensure `filter()` comes before `take(1)` in a `pipe()`.',
+        },
+        messages: {
+            filterBeforeTake:
+                '`filter()` must come before `take(1)` in a `pipe()` to ensure proper data filtering.',
+        },
+        schema: [],
+    },
+
+    create(context) {
+        return {
+            CallExpression(node) {
+                // Check if the callee is a `pipe()` method
+                if (
+                    node.callee.type === 'MemberExpression' &&
+                    node.callee.property.name === 'pipe'
+                ) {
+                    const pipeArguments = node.arguments;
+
+                    let filterIndex = -1;
+                    let takeIndex = -1;
+
+                    // Iterate over arguments to find the positions of `filter` and `take(1)`
+                    pipeArguments.forEach((arg, index) => {
+                        if (
+                            arg.type === 'CallExpression' &&
+                            arg.callee.name === 'filter'
+                        ) {
+                            filterIndex = index;
+                        }
+                        if (
+                            arg.type === 'CallExpression' &&
+                            arg.callee.name === 'take' &&
+                            arg.arguments.length === 1 &&
+                            arg.arguments[0].type === 'Literal' &&
+                            arg.arguments[0].value === 1
+                        ) {
+                            takeIndex = index;
+                        }
+                    });
+
+                    // Report if `take(1)` appears before `filter`
+                    if (takeIndex !== -1 && filterIndex > takeIndex) {
+                        context.report({
+                            node: pipeArguments[takeIndex],
+                            messageId: 'filterBeforeTake',
+                        });
+                    }
+                }
+            },
+        };
+    },
+};

package/rules/no-viewencapsulation-none.js

@@ -0,0 +1,51 @@
+module.exports = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description:
+                'Warn against using `encapsulation: ViewEncapsulation.None` in `@Component` because it breaks Angular modularity.',
+        },
+        messages: {
+            noViewEncapsulationNone:
+                'Avoid using `ViewEncapsulation.None` as it disables Angulars modular styling system, which can lead to unintended style leakage and maintenance challenges. Use it only when absolutely necessary and no alternative solution exists.',
+        },
+        schema: [], // No options
+    },
+    create(context) {
+        return {
+            CallExpression(node) {
+                // Check if the decorator is `@Component`
+                if (
+                    node.callee.type === 'Identifier' &&
+                    node.callee.name === 'Component'
+                ) {
+                    const decoratorArguments = node.arguments;
+                    if (
+                        decoratorArguments.length === 1 &&
+                        decoratorArguments[0].type === 'ObjectExpression'
+                    ) {
+                        const properties = decoratorArguments[0].properties;
+
+                        // Look for `encapsulation` property with value `ViewEncapsulation.None`
+                        const encapsulationProperty = properties.find(
+                            (prop) =>
+                                prop.type === 'Property' &&
+                                prop.key.name === 'encapsulation' &&
+                                prop.value.type === 'MemberExpression' &&
+                                prop.value.object.name ===
+                                    'ViewEncapsulation' &&
+                                prop.value.property.name === 'None',
+                        );
+
+                        if (encapsulationProperty) {
+                            context.report({
+                                node: encapsulationProperty,
+                                messageId: 'noViewEncapsulationNone',
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+};

package/rules/reducers-should-always-return.js

@@ -10,7 +10,9 @@ function hasReturnStatement(node) {
     if (node.type === 'IfStatement') {
         return (
             hasReturnStatement(node.consequent) &&
-            (node.alternate !== null ? hasReturnStatement(node.alternate) : false)
+            (node.alternate !== null
+                ? hasReturnStatement(node.alternate)
+                : false)
         );
     }
 

package/rules/replace-first-with-take.js

@@ -1,13 +1,11 @@
-const eslintUtils = require("eslint-utils");
-
 module.exports = {
     meta: {
-        type: "suggestion",
+        type: 'suggestion',
         docs: {
             description:
-                "Replace `first()` with `take(1)` and require `filter()` to be used with `take(1)` in pipe.",
+                'Replace `first()` with `take(1)` and require `filter()` to be used with `take(1)` in pipe.',
         },
-        fixable: "code",
+        fixable: 'code',
         schema: [],
     },
 
@@ -17,98 +15,46 @@ module.exports = {
             CallExpression(node) {
                 // Check if the callee (function being called) is `first`
                 if (
-                    node.callee.type === "Identifier" &&
-                    node.callee.name === "first" &&
+                    node.callee.type === 'Identifier' &&
+                    node.callee.name === 'first' &&
                     node.arguments.length === 0
                 ) {
                     context.report({
                         node,
                         message:
-                            "Replace `first()` with `take(1)` to avoid errors if no value is ever emitted.",
-                        fix(fixer) {
-                            return fixer.replaceText(node, "take(1)");
-                        },
+                            'Replace `first()` with `take(1)` to avoid errors if no value is ever emitted.',
                     });
                 }
 
                 // Check for `pipe()` with `take(1)`
                 if (
-                    node.callee.type === "MemberExpression" &&
-                    node.callee.property.name === "pipe"
+                    node.callee.type === 'MemberExpression' &&
+                    node.callee.property.name === 'pipe'
                 ) {
                     const pipeArguments = node.arguments;
 
                     // Check if `take(1)` is present
                     const hasTakeOne = pipeArguments.some(
                         (arg) =>
-                            arg.type === "CallExpression" &&
-                            arg.callee.name === "take" &&
+                            arg.type === 'CallExpression' &&
+                            arg.callee.name === 'take' &&
                             arg.arguments.length === 1 &&
-                            arg.arguments[0].value === 1
+                            arg.arguments[0].value === 1,
                     );
 
                     // Check if `filter()` is present
                     const hasFilter = pipeArguments.some(
                         (arg) =>
-                            arg.type === "CallExpression" &&
-                            arg.callee.name === "filter"
+                            arg.type === 'CallExpression' &&
+                            arg.callee.name === 'filter',
                     );
 
-                    // If `take(1)` is used without `filter()`, autofix to add `filter()`
+                    // Report an error if `take(1)` is used without `filter()`
                     if (hasTakeOne && !hasFilter) {
                         context.report({
                             node,
                             message:
-                                "Using `take(1)` requires `filter()` to be used in the same pipe to avoid `null` or `undefined` values which will trigger an error.",
-                            fix(fixer) {
-                                const sourceCode = context.getSourceCode();
-                                const firstArg = pipeArguments[0];
-
-                                const fixes = [
-                                    // Add the `filter()` inside the pipe
-                                    fixer.insertTextBefore(
-                                        firstArg,
-                                        "filter((value) => Boolean(value ?? false)), "
-                                    ),
-                                ];
-
-                                // Check if `filter` is imported, if not, add the import
-                                const importDeclaration =
-                                    sourceCode.ast.body.find(
-                                        (node) =>
-                                            node.type === "ImportDeclaration" &&
-                                            node.source.value ===
-                                                "rxjs/operators"
-                                    );
-
-                                if (importDeclaration) {
-                                    const filterImported =
-                                        importDeclaration.specifiers.some(
-                                            (specifier) =>
-                                                specifier.imported.name ===
-                                                "filter"
-                                        );
-
-                                    if (!filterImported) {
-                                        fixes.push(
-                                            fixer.insertTextBefore(
-                                                importDeclaration.specifiers[0],
-                                                "filter, "
-                                            )
-                                        );
-                                    }
-                                } else {
-                                    // Add a new import if none exist
-                                    fixes.push(
-                                        fixer.insertTextBefore(
-                                            sourceCode.ast.body[0],
-                                            'import { filter } from "rxjs/operators";\n'
-                                        )
-                                    );
-                                }
-
-                                return fixes;
-                            },
+                                'Using `take(1)` requires `filter()` to be used in the same pipe to avoid `null` or `undefined` values which will trigger an error. Example `filter((value) => Boolean(value ?? false)),`',
                         });
                     }
                 }

package/rules/signal-naming-convention.js

@@ -0,0 +1,61 @@
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Ensure variables initialized with "signal()" or "input()" have valid naming conventions.',
+        },
+        messages: {
+            missingSignal: 'Variable "{{ name }}" should end with "Signal".',
+            invalidSuffix:
+                'Variable "{{ name }}" should end with "Signal". Invalid suffix "{{ invalidSuffix }}".',
+        },
+        schema: [],
+    },
+    create(context) {
+        const invalidSuffixes = [
+            'ComputedSignal',
+            'WriteableSignal',
+            'InputSignal',
+            'OutputSignal',
+            'LinkedSignal',
+        ];
+
+        return {
+            PropertyDefinition(node) {
+                // Check if the initializer exists and is a CallExpression
+                if (node.value && node.value.type === 'CallExpression') {
+                    const { callee } = node.value;
+
+                    // Check if the function called is named "signal" or "input"
+                    if (
+                        callee.type === 'Identifier' &&
+                        (callee.name === 'signal' || callee.name === 'input')
+                    ) {
+                        const variableName = node.key.name;
+
+                        // Check for invalid suffixes
+                        const invalidSuffix = invalidSuffixes.find((suffix) =>
+                            variableName.endsWith(suffix),
+                        );
+
+                        if (invalidSuffix) {
+                            context.report({
+                                node: node.key,
+                                messageId: 'invalidSuffix',
+                                data: { name: variableName, invalidSuffix },
+                            });
+                        } else if (!variableName.endsWith('Signal')) {
+                            // Ensure the variable name ends with "Signal"
+                            context.report({
+                                node: node.key,
+                                messageId: 'missingSignal',
+                                data: { name: variableName },
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+};

package/rules/use-danish-currency-pipe.js

@@ -1,11 +1,11 @@
 module.exports = {
     meta: {
-        type: "suggestion",
+        type: 'suggestion',
         docs: {
             description:
-                "Enforce using `danishCurrency` pipe instead of `currency` pipe in Angular HTML templates.",
+                'Enforce using `danishCurrency` pipe instead of `currency` pipe in Angular HTML templates.',
         },
-        fixable: "code",
+        fixable: 'code',
         schema: [],
     },
 
@@ -24,18 +24,18 @@ module.exports = {
 
                     const startLine = templateContent
                         .slice(0, matchStart)
-                        .split("\n").length;
+                        .split('\n').length;
                     const startColumn =
                         matchStart -
-                        templateContent.lastIndexOf("\n", matchStart) -
+                        templateContent.lastIndexOf('\n', matchStart) -
                         1;
 
                     const endLine = templateContent
                         .slice(0, matchEnd)
-                        .split("\n").length;
+                        .split('\n').length;
                     const endColumn =
                         matchEnd -
-                        templateContent.lastIndexOf("\n", matchEnd) -
+                        templateContent.lastIndexOf('\n', matchEnd) -
                         1;
 
                     context.report({