fix: 🐛 long props collapse into single line (#876)

shufo · Oct 15, 2023 · 3936ece · 3936ece
1 parent 2624fd1
commit 3936ece
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 11 deletions.
diff --git a/__tests__/formatter.test.ts b/__tests__/formatter.test.ts
@@ -5286,4 +5286,56 @@ describe('formatter', () => {
 
     await util.doubleFormatCheck(content, expected);
   });
+
+  test('long props', async () => {
+    const content = [
+      `@props(['name', 'title' => 'Please Confirm', 'message' => 'Are you sure?', 'level' => 'info', 'icon' => 'heroicon-o-question-mark-circle', 'cancelButtonText' => 'No', 'cancelButtonType' => 'muted', 'affirmButtonText' => 'Yes', 'affirmButtonType' => 'success', 'affirmButtonDisabled' => false])`,
+    ].join('\n');
+
+    const expected = [
+      `@props([`,
+      `    'name',`,
+      `    'title' => 'Please Confirm',`,
+      `    'message' => 'Are you sure?',`,
+      `    'level' => 'info',`,
+      `    'icon' => 'heroicon-o-question-mark-circle',`,
+      `    'cancelButtonText' => 'No',`,
+      `    'cancelButtonType' => 'muted',`,
+      `    'affirmButtonText' => 'Yes',`,
+      `    'affirmButtonType' => 'success',`,
+      `    'affirmButtonDisabled' => false,`,
+      `])`,
+      ``,
+    ].join('\n');
+
+    await util.doubleFormatCheck(content, expected);
+  });
+
+  test('nested long props', async () => {
+    const content = [
+      `<div>`,
+      `@props(['name', 'title' => 'Please Confirm', 'message' => 'Are you sure?', 'level' => 'info', 'icon' => 'heroicon-o-question-mark-circle', 'cancelButtonText' => 'No', 'cancelButtonType' => 'muted', 'affirmButtonText' => 'Yes', 'affirmButtonType' => 'success', 'affirmButtonDisabled' => false])`,
+      `</div>`,
+    ].join('\n');
+
+    const expected = [
+      `<div>`,
+      `    @props([`,
+      `        'name',`,
+      `        'title' => 'Please Confirm',`,
+      `        'message' => 'Are you sure?',`,
+      `        'level' => 'info',`,
+      `        'icon' => 'heroicon-o-question-mark-circle',`,
+      `        'cancelButtonText' => 'No',`,
+      `        'cancelButtonType' => 'muted',`,
+      `        'affirmButtonText' => 'Yes',`,
+      `        'affirmButtonType' => 'success',`,
+      `        'affirmButtonDisabled' => false,`,
+      `    ])`,
+      `</div>`,
+      ``,
+    ].join('\n');
+
+    await util.doubleFormatCheck(content, expected);
+  });
 });
diff --git a/src/formatter.ts b/src/formatter.ts
@@ -193,6 +193,7 @@ export default class Formatter {
       .then((target) => this.preserveBladeBrace(target))
       .then((target) => this.preserveRawBladeBrace(target))
       .then((target) => this.preserveConditions(target))
+      .then((target) => this.preservePropsBlock(target))
       .then((target) => this.preserveInlineDirective(target))
       .then((target) => this.preserveInlinePhpDirective(target))
       .then((target) => this.preserveBladeDirectivesInScripts(target))
@@ -1314,17 +1315,19 @@ export default class Formatter {
 
   async restoreRawPropsBlock(content: any) {
     const regex = this.getRawPropsPlaceholder('(\\d+)');
-    return _.replace(
-      content,
-      new RegExp(regex, 'gms'),
-      (_match: any, p1: any) =>
-        `@props(${util
-          .formatRawStringAsPhp(this.rawPropsBlocks[p1], {
-            ...this.options,
-            printWidth: util.printWidthForInline,
-          })
-          .trimRight()})`,
-    );
+    return _.replace(content, new RegExp(regex, 'gms'), (_match: any, p1: any) => {
+      const placeholder = this.getRawPropsPlaceholder(p1.toString());
+      const matchedLine = content.match(new RegExp(`^(.*?)${placeholder}`, 'gmi')) ?? [''];
+      const indent = detectIndent(matchedLine[0]);
+
+      const formatted = `@props(${util
+        .formatRawStringAsPhp(this.rawPropsBlocks[p1], {
+          ...this.options,
+        })
+        .trim()})`;
+
+      return this.indentRawPhpBlock(indent, formatted);
+    });
   }
 
   isInline(content: any) {