fix: 🐛 unbalanced x-slot tag behaviour

__tests__/fixtures/snapshots/unmatched_xslot_close_tag.snapshot

@@ -0,0 +1,49 @@
+------------------------------------options----------------------------------------
+{
+  "wrapAttributes": "force-expand-multiline",
+  "wrapAttributesMinAttrs": 1
+}
+------------------------------------content----------------------------------------
+<x-alert>
+    <x-slot:title name="f>oo"
+value="bar">
+        Foo bar
+    </x-slot>
+          <x-slot name="foo">
+           Foo bar
+    </x-slot:title>
+          <x-slot:title>
+        Foo bar
+    </x-slot:title>
+        <x-slot:foo>
+        Foo bar
+              <x-slot:bar>
+            Foo bar
+            </x-slot>
+            Foo bar
+        </x-slot>
+      </x-alert>
+------------------------------------expected----------------------------------------
+<x-alert>
+    <x-slot:title
+        name="f>oo"
+        value="bar"
+    >
+        Foo bar
+    </x-slot>
+    <x-slot
+        name="foo"
+    >
+        Foo bar
+    </x-slot:title>
+    <x-slot:title>
+        Foo bar
+    </x-slot:title>
+    <x-slot:foo>
+        Foo bar
+        <x-slot:bar>
+            Foo bar
+        </x-slot>
+        Foo bar
+    </x-slot>
+</x-alert>

__tests__/formatter.test.ts

@@ -5240,4 +5240,52 @@ describe('formatter', () => {
       extraLiners: [],
     });
   });
+
+  test('unmatched x-slot close tag', async () => {
+    const content = [
+      `<x-alert>`,
+      `    <x-slot:title name="f>oo"`,
+      `value="bar">`,
+      `        Foo bar`,
+      `    </x-slot>`,
+      `          <x-slot name="foo">`,
+      `           Foo bar`,
+      `    </x-slot:title>`,
+      `          <x-slot:title>`,
+      `        Foo bar`,
+      `    </x-slot:title>`,
+      `        <x-slot:foo>`,
+      `        Foo bar`,
+      `              <x-slot:bar>`,
+      `            Foo bar`,
+      `            </x-slot>`,
+      `            Foo bar`,
+      `        </x-slot>`,
+      `      </x-alert>`,
+    ].join('\n');
+
+    const expected = [
+      `<x-alert>`,
+      `    <x-slot:title name="f>oo" value="bar">`,
+      `        Foo bar`,
+      `    </x-slot>`,
+      `    <x-slot name="foo">`,
+      `        Foo bar`,
+      `    </x-slot:title>`,
+      `    <x-slot:title>`,
+      `        Foo bar`,
+      `    </x-slot:title>`,
+      `    <x-slot:foo>`,
+      `        Foo bar`,
+      `        <x-slot:bar>`,
+      `            Foo bar`,
+      `        </x-slot>`,
+      `        Foo bar`,
+      `    </x-slot>`,
+      `</x-alert>`,
+      ``,
+    ].join('\n');
+
+    await util.doubleFormatCheck(content, expected);
+  });
 });

src/formatter.ts

@@ -85,9 +85,11 @@ export default class Formatter {
 
   scripts: any;
 
-  xData: any;
+  xData: Array<string>;
 
-  xInit: any;
+  xInit: Array<string>;
+
+  xSlot: Array<string>;
 
   htmlTags: Array<string>;
 
@@ -171,6 +173,7 @@ export default class Formatter {
     this.directivesInScript = [];
     this.unbalancedDirectives = [];
     this.escapedBladeDirectives = [];
+    this.xSlot = [];
     this.result = [];
     this.diffs = [];
     this.defaultPhpFormatOption = { noPhpSyntaxCheck: this.options.noPhpSyntaxCheck, printWidth: this.wrapLineLength };
@@ -209,10 +212,12 @@ export default class Formatter {
       .then((target) => this.sortHtmlAttributes(target))
       .then((target) => this.preservePhpBlock(target))
       .then((target) => this.preserveHtmlAttributes(target))
+      .then((target) => this.preserveXslot(target))
       .then((target) => this.preserveHtmlTags(target))
       .then((target) => this.formatAsHtml(target))
       .then((target) => this.formatAsBlade(target))
       .then((target) => this.restoreHtmlTags(target))
+      .then((target) => this.restoreXslot(target))
       .then((target) => this.restoreHtmlAttributes(target))
       .then((target) => this.restorePhpBlock(target))
       .then((target) => this.restoreShorthandBinding(target))
@@ -771,6 +776,12 @@ export default class Formatter {
     return _.replace(content, /@@\w*/gim, (match: string) => this.storeEscapedBladeDirective(match));
   }
 
+  async preserveXslot(content: string) {
+    return _.replace(content, /(?<=<\/?)(x-slot:[\w_\\-]+)(?=(?:[^>]*?[^?])?>)/gm, (match: string) =>
+      this.storeXslot(match),
+    );
+  }
+
   async preserveBladeComment(content: any) {
     return _.replace(content, /\{\{--(.*?)--\}\}/gs, (match: string) => this.storeBladeComment(match));
   }
@@ -972,6 +983,10 @@ export default class Formatter {
     return this.getEscapedBladeDirectivePlaceholder((this.escapedBladeDirectives.push(value) - 1).toString());
   }
 
+  storeXslot(value: string) {
+    return this.getXslotPlaceholder((this.xSlot.push(value) - 1).toString());
+  }
+
   storeBladeComment(value: any) {
     return this.getBladeCommentPlaceholder(this.bladeComments.push(value) - 1);
   }
@@ -1122,6 +1137,10 @@ export default class Formatter {
     return _.replace('___escaped_directive_#___', '#', replace);
   }
 
+  getXslotPlaceholder(replace: string) {
+    return _.replace('x-slot --___#___--', '#', replace);
+  }
+
   getBladeCommentPlaceholder(replace: any) {
     return _.replace('___blade_comment_#___', '#', replace);
   }
@@ -1664,6 +1683,13 @@ export default class Formatter {
     );
   }
 
+  restoreXslot(content: string) {
+    return _.replace(content, /x-slot\s*--___(\d+)___--/gms, (_match: string, p1: number) => this.xSlot[p1]).replace(
+      /(?<=<x-slot:[\w\_\-]*)\s+(?=\/?>)/gm,
+      (_match: string) => '',
+    );
+  }
+
   restorePhpComment(content: string) {
     return _.replace(
       content,

src/util.ts

@@ -357,6 +357,7 @@ const escapeTags = [
   '@customdirective',
   '@elsecustomdirective',
   '@endcustomdirective',
+  'x-slot --___\\d+___--',
 ];
 
 export function checkResult(formatted: any) {