Add option to set indent depth of closing brackets (#502)

MrHaila · web-flow · commit b09da872c05f · 2024-09-06T09:06:50.000+02:00
diff --git a/docs/guide/pug-specific-options.md b/docs/guide/pug-specific-options.md
@@ -540,3 +540,74 @@ Output:
 ```pug
 .text-red-400()&attributes(attributes)
 ```
+
+---
+
+## Indent Closing Bracket in Multiline Elements
+
+`pugClosingBracketIndentDepth`
+
+### Description
+
+Define if the closing bracket of a multiline element should be indented to align with the element or its attributes. This only takes effect if the `bracketSameLine` or `pugBracketSameLine` options are set to false.
+
+The benefit of aligning closing brackets with the element's attributes is that elements are easier to comment out.
+
+### Options
+
+**Type:** `choice`  
+**Default:** `0`
+
+#### `0`
+
+Input:
+
+```pug
+foo(
+  bar="baz"
+)
+```
+
+Output:
+
+```pug
+foo(
+  bar="baz"
+)
+```
+
+Comment example:
+
+```pug
+// This will error.
+//foo(
+  bar="baz"
+)
+```
+
+#### `1`
+
+Input:
+
+```pug
+foo(
+  bar="baz"
+)
+```
+
+Output:
+
+```pug
+foo(
+  bar="baz"
+  )
+```
+
+Comment example:
+
+```pug
+// This will work as expected.
+//foo(
+  bar="baz"
+  )
+```
diff --git a/src/options/converge.ts b/src/options/converge.ts
@@ -51,5 +51,6 @@ export function convergeOptions(
     pugFramework: options.pugFramework,
     pugExplicitDiv: options.pugExplicitDiv,
     pugPreserveAttributeBrackets: options.pugPreserveAttributeBrackets,
+    pugClosingBracketIndentDepth: options.pugClosingBracketIndentDepth ?? 0,
   };
 }
diff --git a/src/options/index.ts b/src/options/index.ts
@@ -21,6 +21,7 @@ import {
 import { PUG_ATTRIBUTE_SEPARATOR_OPTION } from './pug-attribute-separator';
 import { PUG_CLASS_LOCATION } from './pug-class-location';
 import { PUG_CLASS_NOTATION } from './pug-class-notation';
+import { PUG_CLOSING_BRACKET_INDENT_DEPTH_OPTION } from './pug-closing-bracket-indent-depth';
 import { PUG_COMMENT_PRESERVE_SPACES_OPTION } from './pug-comment-preserve-spaces';
 import { PUG_EXPLICIT_DIV } from './pug-explicit-div';
 import { PUG_FRAMEWORK } from './pug-framework';
@@ -44,6 +45,7 @@ export const options: SupportOptions = {
   pugArrowParens: PUG_ARROW_PARENS_OPTION,
   pugSemi: PUG_SEMI_OPTION,
   pugBracketSameLine: PUG_BRACKET_SAME_LINE_OPTION,
+  pugClosingBracketIndentDepth: PUG_CLOSING_BRACKET_INDENT_DEPTH_OPTION,
   pugAttributeSeparator: PUG_ATTRIBUTE_SEPARATOR_OPTION,
   pugCommentPreserveSpaces: PUG_COMMENT_PRESERVE_SPACES_OPTION,
   pugSortAttributes: PUG_SORT_ATTRIBUTES_OPTION,
diff --git a/src/options/pug-closing-bracket-indent-depth.ts b/src/options/pug-closing-bracket-indent-depth.ts
@@ -0,0 +1,46 @@
+import type { ChoiceSupportOption } from 'prettier';
+import { CATEGORY_PUG } from './constants';
+
+/** Pug bracket same line option. */
+export const PUG_CLOSING_BRACKET_INDENT_DEPTH_OPTION: ChoiceSupportOption<PugClosingBracketIndentDepth> =
+  {
+    // since: '3.1.0',
+    category: CATEGORY_PUG,
+    type: 'choice',
+    default: 0,
+    description:
+      'Determines the indent level of closing brackets when wrapping attributes.',
+    choices: [
+      {
+        value: 0,
+        description: `
+			Closing bracket aligns with the element.
+			Example:
+			input(
+				type='text',
+				value='my_value',
+				name='my_name',
+				alt='my_alt',
+				autocomplete='on'
+			)
+			`,
+      },
+      {
+        value: 1,
+        description: `
+			Closing bracket aligns with the element's attributes.
+			Example:
+			input(
+				type='text',
+				value='my_value',
+				name='my_name',
+				alt='my_alt',
+				autocomplete='on'
+				)
+			`,
+      },
+    ],
+  };
+
+/** Pug closing bracket indent depth. */
+export type PugClosingBracketIndentDepth = 0 | 1;
diff --git a/src/options/types.ts b/src/options/types.ts
@@ -8,6 +8,7 @@ import type {
 import type { PugAttributeSeparator } from './pug-attribute-separator';
 import type { PugClassLocation } from './pug-class-location';
 import type { PugClassNotation } from './pug-class-notation';
+import type { PugClosingBracketIndentDepth } from './pug-closing-bracket-indent-depth';
 import type { PugCommentPreserveSpaces } from './pug-comment-preserve-spaces';
 import type { PugFramework } from './pug-framework';
 import type { PugIdNotation } from './pug-id-notation';
@@ -35,6 +36,7 @@ export interface PugParserOptions
   pugArrowParens: ArrowParens | null;
   pugSemi: boolean | null;
   pugBracketSameLine: boolean | null;
+  pugClosingBracketIndentDepth: PugClosingBracketIndentDepth;
 
   pugAttributeSeparator: PugAttributeSeparator;
 
diff --git a/src/printer.ts b/src/printer.ts
@@ -71,6 +71,7 @@ import type { PugAttributeSeparator } from './options/pug-attribute-separator';
 import { resolvePugAttributeSeparatorOption } from './options/pug-attribute-separator';
 import type { PugClassLocation } from './options/pug-class-location';
 import type { PugClassNotation } from './options/pug-class-notation';
+import type { PugClosingBracketIndentDepth } from './options/pug-closing-bracket-indent-depth';
 import type { PugCommentPreserveSpaces } from './options/pug-comment-preserve-spaces';
 import { formatPugCommentPreserveSpaces } from './options/pug-comment-preserve-spaces';
 import type { PugFramework } from './options/pug-framework';
@@ -143,6 +144,7 @@ export interface PugPrinterOptions {
   readonly pugFramework: PugFramework;
   readonly pugExplicitDiv: boolean;
   readonly pugPreserveAttributeBrackets: boolean;
+  readonly pugClosingBracketIndentDepth: PugClosingBracketIndentDepth;
 }
 
 /**
@@ -1168,7 +1170,9 @@ export class PugPrinter {
       if (!this.options.pugBracketSameLine) {
         this.result += '\n';
       }
-      this.result += this.indentString.repeat(this.indentLevel);
+      this.result += this.indentString.repeat(
+        this.indentLevel + this.options.pugClosingBracketIndentDepth,
+      );
     }
     this.wrapAttributes = false;
 
diff --git a/tests/options/pugClosingBracketIndentDepth/depth-0.pug b/tests/options/pugClosingBracketIndentDepth/depth-0.pug
@@ -0,0 +1,34 @@
+button(type="submit", (click)="play()", disabled)
+
+hello-framework(
+  [name]="name",
+  [version]="version",
+  (release)="onVersionRelease()"
+)
+
+nav-component(locale-relative-redirect="true", highlight="home", pin="false")
+
+.wrapper(
+  data-nav,
+  data-next="Next",
+  data-prev="Prev",
+  data-slides=4,
+  data-arr=[1, 2, 3, 4, 5, 6],
+  data-obj={ att: 1, attr2: 2 }
+)
+
+div
+  .nested-div-1(
+    type="text",
+    value="my_value1",
+    name="my_name1",
+    alt="my_alt1",
+    autocomplete="on"
+  )
+    .nested-div-2(
+      type="text",
+      value="my_value2",
+      name="my_name2",
+      alt="my_alt2",
+      autocomplete="on"
+    )
diff --git a/tests/options/pugClosingBracketIndentDepth/depth-1.pug b/tests/options/pugClosingBracketIndentDepth/depth-1.pug
@@ -0,0 +1,34 @@
+button(type="submit", (click)="play()", disabled)
+
+hello-framework(
+  [name]="name",
+  [version]="version",
+  (release)="onVersionRelease()"
+  )
+
+nav-component(locale-relative-redirect="true", highlight="home", pin="false")
+
+.wrapper(
+  data-nav,
+  data-next="Next",
+  data-prev="Prev",
+  data-slides=4,
+  data-arr=[1, 2, 3, 4, 5, 6],
+  data-obj={ att: 1, attr2: 2 }
+  )
+
+div
+  .nested-div-1(
+    type="text",
+    value="my_value1",
+    name="my_name1",
+    alt="my_alt1",
+    autocomplete="on"
+    )
+    .nested-div-2(
+      type="text",
+      value="my_value2",
+      name="my_name2",
+      alt="my_alt2",
+      autocomplete="on"
+      )
diff --git a/tests/options/pugClosingBracketIndentDepth/pug-closing-bracket-indent-depth.test.ts b/tests/options/pugClosingBracketIndentDepth/pug-closing-bracket-indent-depth.test.ts
@@ -0,0 +1,38 @@
+import { compareFiles } from 'tests/common';
+import { describe, expect, it } from 'vitest';
+
+describe('Options', () => {
+  describe('pugClosingBracketIndentDepth', () => {
+    it('should handle pugClosingBracketIndentDepth:0', async () => {
+      const { actual, expected } = await compareFiles(import.meta.url, {
+        target: 'depth-0.pug',
+        formatOptions: {
+          pugBracketSameLine: false,
+          pugClosingBracketIndentDepth: 0,
+        },
+      });
+      expect(actual).toBe(expected);
+    });
+
+    it('should handle pugClosingBracketIndentDepth:1', async () => {
+      const { actual, expected } = await compareFiles(import.meta.url, {
+        target: 'depth-1.pug',
+        formatOptions: {
+          pugBracketSameLine: false,
+          pugClosingBracketIndentDepth: 1,
+        },
+      });
+      expect(actual).toBe(expected);
+    });
+
+    it('should default to 0', async () => {
+      const { actual, expected } = await compareFiles(import.meta.url, {
+        target: 'depth-0.pug',
+        formatOptions: {
+          pugBracketSameLine: false,
+        },
+      });
+      expect(actual).toBe(expected);
+    });
+  });
+});
diff --git a/tests/options/pugClosingBracketIndentDepth/unformatted.pug b/tests/options/pugClosingBracketIndentDepth/unformatted.pug
@@ -0,0 +1,25 @@
+button(type="submit", (click)="play()", disabled)
+
+hello-framework([name]="name", [version]="version", (release)="onVersionRelease()")
+
+nav-component(locale-relative-redirect="true", highlight="home", pin="false")
+
+.wrapper(data-nav=true data-next="Next" data-prev="Prev" data-slides=4 data-arr=[1,2,3,4,5,6] data-obj={att: 1, attr2: 2})
+
+div
+  div(
+    class="nested-div-1",
+    type="text",
+    value="my_value1",
+    name="my_name1",
+    alt="my_alt1",
+    autocomplete="on"
+  )
+    div(
+      class="nested-div-2",
+      type="text",
+      value="my_value2",
+      name="my_name2",
+      alt="my_alt2",
+      autocomplete="on"
+    )

Original file line number	Diff line number	Diff line change
`@@ -51,5 +51,6 @@ export function convergeOptions(`
`51`	`51`	`pugFramework: options.pugFramework,`
`52`	`52`	`pugExplicitDiv: options.pugExplicitDiv,`
`53`	`53`	`pugPreserveAttributeBrackets: options.pugPreserveAttributeBrackets,`
	`54`	`+ pugClosingBracketIndentDepth: options.pugClosingBracketIndentDepth ?? 0,`
`54`	`55`	`};`
`55`	`56`	`}`