From 3936ece4cce109ecf6ba11497e4e8e41728a2074 Mon Sep 17 00:00:00 2001
From: Shuhei Hayashibara <meikyowise@gmail.com>
Date: Sun, 15 Oct 2023 22:29:41 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20long=20props=20collapse?=
 =?UTF-8?q?=20into=20single=20line=20(#876)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/formatter.test.ts | 52 +++++++++++++++++++++++++++++++++++++
 src/formatter.ts            | 25 ++++++++++--------
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/__tests__/formatter.test.ts b/__tests__/formatter.test.ts
index f2dbdf83..060b8cba 100644
--- 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
index ac1d0761..ed7b3baf 100644
--- 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) {