@angular-eslint/eslint-plugin 20.5.2 → 20.5.3-alpha.1

package/dist/rules/sort-keys-in-type-decorator.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = void 0;
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 const DEFAULT_ORDER = {
@@ -186,3 +186,6 @@ function reportAndFix(context, node, messageId, data, properties, expectedOrder,
         },
     });
 }
+exports.RULE_DOCS_EXTENSION = {
+    rationale: 'Maintaining a consistent order for properties in Angular decorators (@Component, @Directive, @NgModule, @Pipe) makes code more predictable and easier to scan. When all components in a codebase follow the same property order, developers can quickly locate specific metadata without searching. For example, if selector always comes first and providers always comes before changeDetection, you develop muscle memory for where to look. This is especially helpful in large components with many properties. The recommended default order groups related properties logically: identification (selector, name) first, then dependencies (imports, providers), then templates/styles, then configuration options. Consistent ordering also makes code reviews easier, reduces merge conflicts when multiple developers edit decorators, and creates a professional, well-organized codebase.',
+};

package/dist/rules/sort-lifecycle-methods.d.ts

@@ -3,4 +3,7 @@ export type MessageIds = 'lifecycleMethodsNotSorted';
 export declare const RULE_NAME = "sort-lifecycle-methods";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"lifecycleMethodsNotSorted", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
 export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
 //# sourceMappingURL=sort-lifecycle-methods.d.ts.map

package/dist/rules/sort-lifecycle-methods.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sort-lifecycle-methods.d.ts","sourceRoot":"","sources":["../../src/rules/sort-lifecycle-methods.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,2BAA2B,CAAC;AACrD,eAAO,MAAM,SAAS,2BAA2B,CAAC;;AAElD,wBAyDG"}
+{"version":3,"file":"sort-lifecycle-methods.d.ts","sourceRoot":"","sources":["../../src/rules/sort-lifecycle-methods.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,2BAA2B,CAAC;AACrD,eAAO,MAAM,SAAS,2BAA2B,CAAC;;AAElD,wBAyDG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/sort-lifecycle-methods.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = void 0;
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 exports.RULE_NAME = 'sort-lifecycle-methods';
@@ -40,3 +40,6 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+exports.RULE_DOCS_EXTENSION = {
+    rationale: "Organizing lifecycle methods in the order they execute (ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy) makes the component lifecycle easier to understand and follow. When methods appear in execution order, developers can mentally trace the component's lifecycle from initialization through destruction just by reading down the file. This natural ordering helps both when writing new code (you know where to add lifecycle logic) and when debugging (you can follow the execution path visually). Randomly ordered lifecycle methods force developers to jump around the file and mentally reconstruct the execution sequence. Consistent ordering is a simple organizational principle that significantly improves code readability.",
+};

package/dist/rules/use-component-selector.d.ts

@@ -3,4 +3,7 @@ export type MessageIds = 'useComponentSelector';
 export declare const RULE_NAME = "use-component-selector";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"useComponentSelector", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
 export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
 //# sourceMappingURL=use-component-selector.d.ts.map

package/dist/rules/use-component-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-component-selector.d.ts","sourceRoot":"","sources":["../../src/rules/use-component-selector.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,sBAAsB,CAAC;AAChD,eAAO,MAAM,SAAS,2BAA2B,CAAC;;AAElD,wBAiCG"}
+{"version":3,"file":"use-component-selector.d.ts","sourceRoot":"","sources":["../../src/rules/use-component-selector.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,sBAAsB,CAAC;AAChD,eAAO,MAAM,SAAS,2BAA2B,CAAC;;AAElD,wBAiCG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/use-component-selector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = void 0;
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 exports.RULE_NAME = 'use-component-selector';
@@ -34,3 +34,6 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+exports.RULE_DOCS_EXTENSION = {
+    rationale: "Every component should have a selector that defines how it's used in templates. Omitting the selector makes the component unusable in templates and can only be used with dynamic component loading or routing, which is rarely the intent. When debugging, components without selectors are harder to identify in the component tree and browser DevTools. If a component is truly only meant for dynamic loading (like a modal or route component), you can disable this rule for that component, but in most cases, every component should have a meaningful selector.",
+};

package/dist/rules/use-component-view-encapsulation.d.ts

@@ -3,4 +3,7 @@ export type MessageIds = 'useComponentViewEncapsulation' | 'suggestRemoveViewEnc
 export declare const RULE_NAME = "use-component-view-encapsulation";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<MessageIds, [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
 export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
 //# sourceMappingURL=use-component-view-encapsulation.d.ts.map

package/dist/rules/use-component-view-encapsulation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-component-view-encapsulation.d.ts","sourceRoot":"","sources":["../../src/rules/use-component-view-encapsulation.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAClB,+BAA+B,GAC/B,oCAAoC,CAAC;AACzC,eAAO,MAAM,SAAS,qCAAqC,CAAC;;AAG5D,wBAwDG"}
+{"version":3,"file":"use-component-view-encapsulation.d.ts","sourceRoot":"","sources":["../../src/rules/use-component-view-encapsulation.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAClB,+BAA+B,GAC/B,oCAAoC,CAAC;AACzC,eAAO,MAAM,SAAS,qCAAqC,CAAC;;AAG5D,wBAwDG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/use-component-view-encapsulation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = void 0;
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 exports.RULE_NAME = 'use-component-view-encapsulation';
@@ -44,3 +44,6 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+exports.RULE_DOCS_EXTENSION = {
+    rationale: "Setting encapsulation to ViewEncapsulation.None disables Angular's view encapsulation, making the component's styles global and affecting the entire application. This breaks component isolation and can cause unexpected styling conflicts throughout your app. When multiple components use ViewEncapsulation.None, their styles can interfere with each other in unpredictable ways, making it extremely difficult to reason about styling. A style intended for one component might accidentally affect completely unrelated components. This defeats one of Angular's key benefits: component style isolation. ViewEncapsulation.None is occasionally necessary for specific edge cases (like styling dynamically inserted content), but it should be avoided in normal component development. Use the default Emulated encapsulation, or ShadowDom for native Shadow DOM, to keep component styles properly isolated.",
+};

package/dist/rules/use-injectable-provided-in.d.ts

@@ -5,4 +5,7 @@ export type MessageIds = 'useInjectableProvidedIn' | 'suggestInjector';
 export declare const RULE_NAME = "use-injectable-provided-in";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<MessageIds, Options, import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
 export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
 //# sourceMappingURL=use-injectable-provided-in.d.ts.map

package/dist/rules/use-injectable-provided-in.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-injectable-provided-in.d.ts","sourceRoot":"","sources":["../../src/rules/use-injectable-provided-in.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,yBAAyB,GAAG,iBAAiB,CAAC;AACvE,eAAO,MAAM,SAAS,+BAA+B,CAAC;;AAGtD,wBA2DG"}
+{"version":3,"file":"use-injectable-provided-in.d.ts","sourceRoot":"","sources":["../../src/rules/use-injectable-provided-in.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,CAAC;IAAE,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,yBAAyB,GAAG,iBAAiB,CAAC;AACvE,eAAO,MAAM,SAAS,+BAA+B,CAAC;;AAGtD,wBA2DG;AAEH,eAAO,MAAM,mBAAmB;;CAE/B,CAAC"}

package/dist/rules/use-injectable-provided-in.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = void 0;
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 exports.RULE_NAME = 'use-injectable-provided-in';
@@ -58,3 +58,6 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+exports.RULE_DOCS_EXTENSION = {
+    rationale: `Using 'providedIn' in the @Injectable() decorator (like '@Injectable({ providedIn: "root" })') enables tree-shaking, which means Angular can remove the service from your production bundle if it's never actually used. Without 'providedIn', services must be registered in a module's providers array, and Angular must include them in the bundle even if they're unused. This can significantly increase bundle size. Additionally, 'providedIn' makes services easier to use (no need to add them to module providers) and makes circular dependencies less likely. The 'providedIn' syntax is the modern, recommended way to provide services.`,
+};

package/dist/rules/use-lifecycle-interface.d.ts

@@ -3,4 +3,7 @@ export type MessageIds = 'useLifecycleInterface';
 export declare const RULE_NAME = "use-lifecycle-interface";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"useLifecycleInterface", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
 export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
 //# sourceMappingURL=use-lifecycle-interface.d.ts.map

package/dist/rules/use-lifecycle-interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-lifecycle-interface.d.ts","sourceRoot":"","sources":["../../src/rules/use-lifecycle-interface.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,uBAAuB,CAAC;AACjD,eAAO,MAAM,SAAS,4BAA4B,CAAC;;AAInD,wBAyEG"}
+{"version":3,"file":"use-lifecycle-interface.d.ts","sourceRoot":"","sources":["../../src/rules/use-lifecycle-interface.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,uBAAuB,CAAC;AACjD,eAAO,MAAM,SAAS,4BAA4B,CAAC;;AAInD,wBAyEG;AAEH,eAAO,MAAM,mBAAmB;;CAE/B,CAAC"}

package/dist/rules/use-lifecycle-interface.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = void 0;
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 exports.RULE_NAME = 'use-lifecycle-interface';
@@ -60,3 +60,6 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+exports.RULE_DOCS_EXTENSION = {
+    rationale: `Implementing lifecycle interfaces (like OnInit, OnDestroy, AfterViewInit) provides TypeScript compile-time checking to ensure you've spelled the lifecycle method names correctly and used the right method signatures. For example, if you typo 'ngOnInit' as 'ngOninit', TypeScript will catch this error if your class implements OnInit. The interfaces also serve as self-documentation, making it immediately clear which lifecycle hooks a component uses. While Angular will still call correctly-named lifecycle methods even without the interface, using the interface leverages TypeScript's type safety to catch errors earlier in development.`,
+};

package/dist/rules/use-pipe-transform-interface.d.ts

@@ -3,4 +3,7 @@ export type MessageIds = 'usePipeTransformInterface';
 export declare const RULE_NAME = "use-pipe-transform-interface";
 declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"usePipeTransformInterface", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
 export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
 //# sourceMappingURL=use-pipe-transform-interface.d.ts.map

package/dist/rules/use-pipe-transform-interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-pipe-transform-interface.d.ts","sourceRoot":"","sources":["../../src/rules/use-pipe-transform-interface.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,2BAA2B,CAAC;AACrD,eAAO,MAAM,SAAS,iCAAiC,CAAC;;AAGxD,wBAgDG"}
+{"version":3,"file":"use-pipe-transform-interface.d.ts","sourceRoot":"","sources":["../../src/rules/use-pipe-transform-interface.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,2BAA2B,CAAC;AACrD,eAAO,MAAM,SAAS,iCAAiC,CAAC;;AAGxD,wBAgDG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/use-pipe-transform-interface.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RULE_NAME = void 0;
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 exports.RULE_NAME = 'use-pipe-transform-interface';
@@ -44,3 +44,6 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+exports.RULE_DOCS_EXTENSION = {
+    rationale: "Implementing the PipeTransform interface provides TypeScript compile-time checking to ensure your pipe has the correct transform() method signature. Without the interface, typos in the method name or incorrect parameters won't be caught until runtime. The interface also serves as self-documentation and enables better IDE support like autocomplete and inline documentation. While Angular requires pipes to have a transform() method, using the PipeTransform interface leverages TypeScript's type system to catch implementation errors during development rather than at runtime.",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin",
-  "version": "20.5.2",
+  "version": "20.5.3-alpha.1",
   "description": "ESLint plugin for Angular applications, following https://angular.dev/style-guide",
   "license": "MIT",
   "main": "dist/index.js",
@@ -19,11 +19,11 @@
   ],
   "dependencies": {
     "ts-api-utils": "^2.1.0",
-    "@angular-eslint/bundled-angular-compiler": "20.5.2",
-    "@angular-eslint/utils": "20.5.2"
+    "@angular-eslint/utils": "20.5.3-alpha.1",
+    "@angular-eslint/bundled-angular-compiler": "20.5.3-alpha.1"
   },
   "devDependencies": {
-    "@angular-eslint/test-utils": "20.5.2"
+    "@angular-eslint/test-utils": "20.5.3-alpha.1"
   },
   "peerDependencies": {
     "@typescript-eslint/utils": "^7.11.0 || ^8.0.0",