Support sorting of attributes

src/options/attribute-sorting/index.ts

@@ -0,0 +1,20 @@
+import { CATEGORY_PUG } from '..';
+
+const pugSortAttributesOption = {
+	since: '1.7.0',
+	category: CATEGORY_PUG,
+	type: 'path',
+	array: true,
+	default: [{ value: [] }],
+	description: ''
+};
+
+export const PUG_SORT_ATTRIBUTES_BEGINNING_OPTION = {
+	...pugSortAttributesOption,
+	description: 'Define a list of patterns for attributes that are sorted to the beginning.'
+};
+
+export const PUG_SORT_ATTRIBUTES_END_OPTION = {
+	...pugSortAttributesOption,
+	description: 'Define a list of patterns for attributes that are sorted at the end.'
+};

src/options/attribute-sorting/utils.ts

@@ -0,0 +1,68 @@
+import { AttributeToken } from 'pug-lexer';
+
+type CompareResult = -1 | 0 | 1;
+
+function compareByIndex(leftIndex: number, rightIndex: number): CompareResult {
+	if (leftIndex !== -1 && rightIndex === -1) {
+		return -1;
+	}
+	if (leftIndex === -1 && rightIndex !== -1) {
+		return 1;
+	}
+	const result = leftIndex - rightIndex;
+	if (result <= -1) {
+		return -1;
+	}
+	if (result >= 1) {
+		return 1;
+	}
+	return 0;
+}
+
+export function compareAttributeToken(
+	a: AttributeToken,
+	b: AttributeToken,
+	sortAttributes: string[],
+	moveToEnd: boolean = false
+): CompareResult {
+	const sortPatterns: RegExp[] = sortAttributes.map((sort) => new RegExp(sort));
+
+	const aName = a.name;
+	const bName = b.name;
+
+	let result: CompareResult = 0;
+
+	if (result === 0) {
+		let aIndex: number = moveToEnd ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
+		let bIndex: number = moveToEnd ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
+		let aFound = false;
+		let bFound = false;
+		for (let index = 0; index < sortPatterns.length; index++) {
+			const pattern = sortPatterns[index];
+			if (!aFound && pattern.test(aName)) {
+				aIndex = index;
+				aFound = true;
+			}
+			if (!bFound && pattern.test(bName)) {
+				bIndex = index;
+				bFound = true;
+			}
+			if (aFound && bFound) {
+				break;
+			}
+		}
+
+		result = compareByIndex(aIndex, bIndex);
+	}
+
+	return result;
+}
+
+export function partialSort<T>(arr: T[], start: number, end: number, compareFn?: (a: T, b: T) => number): T[] {
+	const preSorted: T[] = arr.slice(0, start);
+	const postSorted: T[] = arr.slice(end);
+	const sorted: T[] = arr.slice(start, end).sort(compareFn);
+	arr.length = 0;
+	arr.push(...preSorted.concat(sorted).concat(postSorted));
+	return arr;
+}

src/options/converge.ts

@@ -20,6 +20,8 @@ export function convergeOptions(options: ParserOptions & PugParserOptions): PugP
 		pugSemi: options.pugSemi ?? options.semi,
 		attributeSeparator: options.pugAttributeSeparator ?? options.attributeSeparator,
 		closingBracketPosition: options.pugClosingBracketPosition ?? options.closingBracketPosition,
-		commentPreserveSpaces: options.pugCommentPreserveSpaces ?? options.commentPreserveSpaces
+		commentPreserveSpaces: options.pugCommentPreserveSpaces ?? options.commentPreserveSpaces,
+		pugSortAttributesBeginning: options.pugSortAttributesBeginning,
+		pugSortAttributesEnd: options.pugSortAttributesEnd
 	};
 }

src/options/index.ts

@@ -1,5 +1,6 @@
 import { ParserOptions } from 'prettier';
 import { AttributeSeparator, ATTRIBUTE_SEPARATOR_OPTION, PUG_ATTRIBUTE_SEPARATOR_OPTION } from './attribute-separator';
+import { PUG_SORT_ATTRIBUTES_BEGINNING_OPTION, PUG_SORT_ATTRIBUTES_END_OPTION } from './attribute-sorting';
 import {
 	ClosingBracketPosition,
 	CLOSING_BRACKET_POSITION_OPTION,
@@ -46,6 +47,9 @@ export interface PugParserOptions
 
 	commentPreserveSpaces: CommentPreserveSpaces;
 	pugCommentPreserveSpaces: CommentPreserveSpaces | null;
+
+	pugSortAttributesBeginning: string[];
+	pugSortAttributesEnd: string[];
 }
 
 export const options = {
@@ -61,5 +65,7 @@ export const options = {
 	closingBracketPosition: CLOSING_BRACKET_POSITION_OPTION,
 	pugClosingBracketPosition: PUG_CLOSING_BRACKET_POSITION_OPTION,
 	commentPreserveSpaces: COMMENT_PRESERVE_SPACES_OPTION,
-	pugCommentPreserveSpaces: PUG_COMMENT_PRESERVE_SPACES_OPTION
+	pugCommentPreserveSpaces: PUG_COMMENT_PRESERVE_SPACES_OPTION,
+	pugSortAttributesBeginning: PUG_SORT_ATTRIBUTES_BEGINNING_OPTION,
+	pugSortAttributesEnd: PUG_SORT_ATTRIBUTES_END_OPTION
 };

src/printer.ts

@@ -50,6 +50,7 @@ import {
 import { DOCTYPE_SHORTCUT_REGISTRY } from './doctype-shortcut-registry';
 import { createLogger, Logger, LogLevel } from './logger';
 import { AttributeSeparator, resolveAttributeSeparatorOption } from './options/attribute-separator';
+import { compareAttributeToken, partialSort } from './options/attribute-sorting/utils';
 import { ClosingBracketPosition, resolveClosingBracketPositionOption } from './options/closing-bracket-position';
 import { CommentPreserveSpaces, formatCommentPreserveSpaces } from './options/comment-preserve-spaces';
 import { ArrowParens } from './options/common';
@@ -87,6 +88,8 @@ export interface PugPrinterOptions {
 	readonly attributeSeparator: AttributeSeparator;
 	readonly closingBracketPosition: ClosingBracketPosition;
 	readonly commentPreserveSpaces: CommentPreserveSpaces;
+	readonly pugSortAttributesBeginning: string[];
+	readonly pugSortAttributesEnd: string[];
 }
 
 export class PugPrinter {
@@ -124,7 +127,7 @@ export class PugPrinter {
 	private pipelessText: boolean = false;
 	private pipelessComment: boolean = false;
 
-	public constructor(private readonly tokens: ReadonlyArray<Token>, private readonly options: PugPrinterOptions) {
+	public constructor(private tokens: Token[], private readonly options: PugPrinterOptions) {
 		this.indentString = options.pugUseTabs ? '\t' : ' '.repeat(options.pugTabWidth);
 		this.quotes = this.options.pugSingleQuote ? "'" : '"';
 		this.otherQuotes = this.options.pugSingleQuote ? '"' : "'";
@@ -458,6 +461,35 @@ export class PugPrinter {
 			if (this.currentLineLength > this.options.pugPrintWidth) {
 				this.wrapAttributes = true;
 			}
+
+			if (this.options.pugSortAttributesEnd.length > 0) {
+				const startAttributesIndex: number = this.tokens.indexOf(token);
+				const endAttributesIndex: number = tempIndex;
+				if (endAttributesIndex - startAttributesIndex > 2) {
+					this.tokens = partialSort(this.tokens, startAttributesIndex + 1, endAttributesIndex, (a, b) =>
+						compareAttributeToken(
+							a as AttributeToken,
+							b as AttributeToken,
+							this.options.pugSortAttributesEnd,
+							true
+						)
+					);
+				}
+			}
+
+			if (this.options.pugSortAttributesBeginning.length > 0) {
+				const startAttributesIndex: number = this.tokens.indexOf(token);
+				const endAttributesIndex: number = tempIndex;
+				if (endAttributesIndex - startAttributesIndex > 2) {
+					this.tokens = partialSort(this.tokens, startAttributesIndex + 1, endAttributesIndex, (a, b) =>
+						compareAttributeToken(
+							a as AttributeToken,
+							b as AttributeToken,
+							this.options.pugSortAttributesBeginning
+						)
+					);
+				}
+			}
 		}
 		return result;
 	}

tests/options/sortAttributes/formatted.pug

@@ -0,0 +1,3 @@
+span.a.b(style="background: #000")
+img(src="logo.png", alt="Logo")
+div(v-for="value in values", :key="value.key", @click="doSomething(value)")

tests/options/sortAttributes/sort-attributes.test.ts

@@ -0,0 +1,59 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { format } from 'prettier';
+import { AttributeToken } from 'pug-lexer';
+import { compareAttributeToken } from '../../../src/options/attribute-sorting/utils';
+import { plugin } from './../../../src/index';
+
+function createAttributeToken(name: string): AttributeToken {
+	return {
+		name,
+		val: 'dummy',
+		mustEscape: false,
+		type: 'attribute',
+		loc: {
+			start: { line: 0, column: 0 },
+			end: { line: 0, column: 0 }
+		}
+	};
+}
+
+describe('Options', () => {
+	describe('sortAttributes', () => {
+		test('should sort attributes', () => {
+			const expected: string = readFileSync(resolve(__dirname, 'formatted.pug'), 'utf8');
+			const code: string = readFileSync(resolve(__dirname, 'unformatted.pug'), 'utf8');
+			const actual: string = format(code, {
+				parser: 'pug' as any,
+				plugins: [plugin],
+				// @ts-ignore
+				pugSortAttributesBeginning: ['v-for', ':key', 'src', 'alt'],
+				// @ts-ignore
+				pugSortAttributesEnd: ['@click']
+			});
+
+			expect(actual).toBe(expected);
+		});
+	});
+
+	describe('sort utilities', () => {
+		test('compare 1', () => {
+			const expected: ReadonlyArray<string> = ['v-for', ':key', 'src', 'alt'];
+			const code: string[] = ['alt', ':key', 'v-for', 'src'];
+			const actual: string[] = code.sort((a, b) =>
+				compareAttributeToken(createAttributeToken(a), createAttributeToken(b), ['v-for', ':key', 'src', 'alt'])
+			);
+
+			expect(actual).toStrictEqual(expected);
+		});
+		test('compare 2', () => {
+			const expected: ReadonlyArray<string> = ['v-for', ':key', 'src', 'alt', '@click', ':disabled'];
+			const code: string[] = ['v-for', ':disabled', ':key', '@click', 'src', 'alt'];
+			const actual: string[] = code.sort((a, b) =>
+				compareAttributeToken(createAttributeToken(a), createAttributeToken(b), ['@click', ':disabled'], true)
+			);
+
+			expect(actual).toStrictEqual(expected);
+		});
+	});
+});

tests/options/sortAttributes/unformatted.pug

@@ -0,0 +1,3 @@
+span(style="background: #000", class="a b")
+img(alt="Logo", src="logo.png")
+div(v-for="value in values", @click="doSomething(value)", :key="value.key")