feat(order-fixer): make array fixer more precise

This change will also make sure that the original indentations are set
correctly after the fixer ran.

Author: ducktordanny

lib/rules/decorator-array-items/order-fixer.util.ts

@@ -11,10 +11,23 @@ export const orderFixer = (
   context: DecoratorArrayItemsRuleContext,
   node: ArrayExpression,
   reverseSort: boolean,
-): RuleFix => {
+): RuleFix | null => {
   const sourceCode = context.getSourceCode();
   const elements = node.elements as Array<Identifier>;
-  const fix = elements.map((el) => sourceCode.getText(el)).sort();
-  if (reverseSort) fix.reverse();
-  return fixer.replaceText(node, `[\n${fix.join(",\n")}\n]`);
+  const sortedElements = elements.map((el) => sourceCode.getText(el)).sort();
+  if (reverseSort) sortedElements.reverse();
+
+  let joinSeparator = ", ";
+  const start = elements?.at(0)?.loc?.start;
+  const end = elements?.at(-1)?.loc?.start;
+  if (start && end && start.line !== end.line) {
+    const indentation = " ".repeat(start.column);
+    joinSeparator = `,\n${indentation}`;
+  }
+
+  const rangeStart = elements?.at(0)?.range?.at(0);
+  const rangeEnd = elements?.at(-1)?.range?.at(-1);
+  if (rangeStart === undefined || rangeEnd === undefined) return null;
+  const fixedText = sortedElements.join(joinSeparator);
+  return fixer.replaceTextRange([rangeStart, rangeEnd], fixedText);
 };

tests/lib/rules/decorator-array-items.spec.ts

@@ -29,16 +29,16 @@ ruleTester.run("decorator-array-items", decoratorArrayItemsRule, {
     AppleService,
     SomethingService,
     TestService,
-    UserStore
+    UserStore,
   ],
   declarations: [
     AppComponent,
     ToArrayPipe,
-    WorkshopPageComponent
+    WorkshopPageComponent,
   ],
   exports: [
     ToArrayPipe,
-    WorkshopPageComponent
+    WorkshopPageComponent,
   ],
 }) export class TestModule {}
     `,
@@ -47,14 +47,38 @@ ruleTester.run("decorator-array-items", decoratorArrayItemsRule, {
   invalid: [
     {
       code: `
+@Component({
+  selector: 'app-test',
+  template: '',
+  standalone: true,
+  imports: [RouterModule, CommonModule, MatButtonModule],
+}) export class TestComponent {}
+      `,
+      output: `
+@Component({
+  selector: 'app-test',
+  template: '',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, RouterModule],
+}) export class TestComponent {}
+      `,
+      errors: [
+        {
+          messageId: "wrongOrderOfDecoratorArrayItems",
+          data: { property: "imports" },
+        },
+      ],
+    },
+    {
+      code: `
 @Component({
   selector: 'app-test',
   template: '',
   standalone: true,
   imports: [
     RouterModule,
     CommonModule,
-    MatButtonModule,
+    MatButtonModule
   ],
 }) export class TestComponent {}
       `,
@@ -83,22 +107,22 @@ ruleTester.run("decorator-array-items", decoratorArrayItemsRule, {
   imports: [
     RouterModule,
     TestStandaloneComponent,
-    CommonModule
+    CommonModule,
   ],
   providers: [
     TestService,
     SomethingService,
     AppleService,
-    UserStore
+    UserStore,
   ],
   declarations: [
     ToArrayPipe,
     AppComponent,
-    WorkshopPageComponent
+    WorkshopPageComponent,
   ],
   exports: [
     WorkshopPageComponent,
-    ToArrayPipe
+    ToArrayPipe,
   ],
 }) export class TestModule {}
       `,
@@ -107,22 +131,22 @@ ruleTester.run("decorator-array-items", decoratorArrayItemsRule, {
   imports: [
     CommonModule,
     RouterModule,
-    TestStandaloneComponent
+    TestStandaloneComponent,
   ],
   providers: [
     AppleService,
     SomethingService,
     TestService,
-    UserStore
+    UserStore,
   ],
   declarations: [
     AppComponent,
     ToArrayPipe,
-    WorkshopPageComponent
+    WorkshopPageComponent,
   ],
   exports: [
     ToArrayPipe,
-    WorkshopPageComponent
+    WorkshopPageComponent,
   ],
 }) export class TestModule {}
       `,