feat: Add 'sort-by' option (#124)

Author: rschristian

README.md

@@ -115,6 +115,25 @@ jobs:
 }
 ```
 
+### Sorting the list of files
+
+By default, the results table is sorted by filename in ascending order. You can customize this behavior using the `order-by` option:
+
+```diff
+name: Compressed Size
+on: [pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: preactjs/compressed-size-action@v2
+      with:
++       order-by: "Size:desc"
+```
+
+The format is "column:direction", where column is one of "Filename", "Size", or "Change" and direction is "asc" or "desc". For example, "Size:desc" sorts the table by file size in descending order.
+
 ### Customizing the list of files
 
 `compressed-size-action` defaults to tracking the size of all JavaScript files within `dist/` directories - anywhere in your repository, not just at the root. You can change the list of files to be tracked and reported using the `pattern` and `exclude` options, both of which are [minimatch patterns](https://github.com/motemen/minimatch-cheat-sheet/blob/master/README.md):

action.yml

@@ -42,6 +42,9 @@ inputs:
     description: 'A custom working directory to execute the action in relative to repo root (defaults to .)'
   comment-key:
     description: 'Optional key to include in the bot comment to allow for multiple bundle calculations to be posted in separate comments.'
+  sort-by:
+    description: 'The column and direction to sort the results by. The format is "column:direction", where column is one of "Filename", "Size", or "Change" and direction is "asc" or "desc". For example, "Size:desc" sorts the table by file size in descending order.'
+    default: 'Filename:asc'
 
 runs:
   using: 'node20'

src/index.js

@@ -2,7 +2,7 @@ import { getInput, setFailed, startGroup, endGroup, debug } from '@actions/core'
 import { context, getOctokit } from '@actions/github';
 import { exec } from '@actions/exec';
 import SizePlugin from 'size-plugin-core';
-import { getPackageManagerAndInstallScript, diffTable, toBool, stripHash } from './utils.js';
+import { getPackageManagerAndInstallScript, diffTable, toBool, stripHash, getSortOrder } from './utils.js';
 
 /**
  * @typedef {ReturnType<typeof import("@actions/github").getOctokit>} Octokit
@@ -136,7 +136,8 @@ async function run(octokit, context, token) {
 		collapseUnchanged: toBool(getInput('collapse-unchanged')),
 		omitUnchanged: toBool(getInput('omit-unchanged')),
 		showTotal: toBool(getInput('show-total')),
-		minimumChangeThreshold: parseInt(getInput('minimum-change-threshold'), 10)
+		minimumChangeThreshold: parseInt(getInput('minimum-change-threshold'), 10),
+		sortBy: getSortOrder(getInput('sort-by')),
 	});
 
 	let outputRawMarkdown = false;

src/utils.js

@@ -157,6 +157,12 @@ function markdownTable(rows) {
  * @property {number} delta
  */
 
+/**
+ * @typedef {'Filename' | 'Size' | 'Change'} DiffTableColumn
+ * @typedef {'asc' | 'desc'} SortOrder
+ * @typedef {`${DiffTableColumn}:${SortOrder}`} SortBy
+ */
+
 /**
  * Create a Markdown table showing diff data
  * @param {Diff[]} files
@@ -165,10 +171,27 @@ function markdownTable(rows) {
  * @param {boolean} [options.collapseUnchanged]
  * @param {boolean} [options.omitUnchanged]
  * @param {number} [options.minimumChangeThreshold]
+ * @param {SortBy} [options.sortBy]
+ * @returns {string}
  */
-export function diffTable(files, { showTotal, collapseUnchanged, omitUnchanged, minimumChangeThreshold }) {
-	let changedRows = [];
-	let unChangedRows = [];
+export function diffTable(files, { showTotal, collapseUnchanged, omitUnchanged, minimumChangeThreshold, sortBy }) {
+	const changedRows = [],
+		unChangedRows = [];
+
+	const [sortByColumn, sortByDirection] = /** @type {[DiffTableColumn, SortOrder]} */ (sortBy.split(':'));
+
+	const columnIndex = {
+		Filename: 'filename',
+		Size: 'size',
+		Change: 'delta'
+	};
+
+	files.sort((a, b) => {
+		const idx = columnIndex[sortByColumn];
+		return sortByDirection === 'asc'
+			? a[idx].toString().localeCompare(b[idx].toString(), undefined, { numeric: true })
+			: b[idx].toString().localeCompare(a[idx].toString(), undefined, { numeric: true });
+	});
 
 	let totalSize = 0;
 	let totalDelta = 0;
@@ -182,16 +205,16 @@ export function diffTable(files, { showTotal, collapseUnchanged, omitUnchanged,
 
 		if (isUnchanged && omitUnchanged) continue;
 
-		const columns = [
+		const row = [
 			`\`${filename}\``,
 			prettyBytes(size),
 			getDeltaText(delta, originalSize),
 			iconForDifference(delta, originalSize)
 		];
 		if (isUnchanged && collapseUnchanged) {
-			unChangedRows.push(columns);
+			unChangedRows.push(row);
 		} else {
-			changedRows.push(columns);
+			changedRows.push(row);
 		}
 	}
 
@@ -220,3 +243,19 @@ export function diffTable(files, { showTotal, collapseUnchanged, omitUnchanged,
 export function toBool(v) {
 	return /^(1|true|yes)$/.test(v);
 }
+
+/**
+ * @param {string} sortBy
+ * @returns {SortBy}
+ */
+export function getSortOrder(sortBy) {
+	const validColumns = ['Filename', 'Size', 'Change'];
+	const validDirections = ['asc', 'desc'];
+
+	const [column, direction] = sortBy.split(':');
+	if (validColumns.includes(column) && validDirections.includes(direction)) {
+		return /** @type {SortBy} */ (sortBy);
+	}
+	console.warn(`Invalid 'order-by' value '${sortBy}', defaulting to 'Filename:asc'`);
+	return 'Filename:asc';
+}

tests/__snapshots__/utils.spec.js.snap

@@ -1,20 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`diffTable 1`] = `
-"**Size Change:** +9 B (+0.06%) 
+"**Size Change:** +9 B (+0.04%) 
 
-**Total Size:** 14.8 kB
+**Total Size:** 21.3 kB
 
 | Filename | Size | Change |  |
 | :--- | :---: | :---: | :---: |
+| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
 | \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |
 | \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |
-| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
 | Filename | Size |
 | :--- | :---: |
+| \`five.js\` | 6.5 kB |
 | \`three.js\` | 300 B |
 
 </details>
@@ -25,14 +26,15 @@ exports[`diffTable 1`] = `
 exports[`diffTable 2`] = `
 "| Filename | Size | Change |  |
 | :--- | :---: | :---: | :---: |
+| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
 | \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |
 | \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |
-| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
 | Filename | Size |
 | :--- | :---: |
+| \`five.js\` | 6.5 kB |
 | \`three.js\` | 300 B |
 
 </details>
@@ -41,34 +43,35 @@ exports[`diffTable 2`] = `
 `;
 
 exports[`diffTable 3`] = `
-"**Size Change:** +9 B (+0.06%) 
+"**Size Change:** +9 B (+0.04%) 
 
-**Total Size:** 14.8 kB
+**Total Size:** 21.3 kB
 
 | Filename | Size | Change |  |
 | :--- | :---: | :---: | :---: |
+| \`five.js\` | 6.5 kB | 0 B |  |
+| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
 | \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |
-| \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |
 | \`three.js\` | 300 B | 0 B |  |
-| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |"
+| \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |"
 `;
 
 exports[`diffTable 4`] = `
-"**Size Change:** +9 B (+0.06%) 
+"**Size Change:** +9 B (+0.04%) 
 
-**Total Size:** 14.8 kB
+**Total Size:** 21.3 kB
 
 | Filename | Size | Change |  |
 | :--- | :---: | :---: | :---: |
+| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
 | \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |
-| \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |
-| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |"
+| \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |"
 `;
 
 exports[`diffTable 5`] = `
-"**Size Change:** +9 B (+0.06%) 
+"**Size Change:** +9 B (+0.04%) 
 
-**Total Size:** 14.8 kB
+**Total Size:** 21.3 kB
 
 | Filename | Size | Change |  |
 | :--- | :---: | :---: | :---: |
@@ -79,8 +82,9 @@ exports[`diffTable 5`] = `
 
 | Filename | Size | Change |
 | :--- | :---: | :---: |
-| \`three.js\` | 300 B | 0 B |
+| \`five.js\` | 6.5 kB | 0 B |
 | \`four.js\` | 4.5 kB | +9 B (+0.2%) |
+| \`three.js\` | 300 B | 0 B |
 
 </details>
 
@@ -90,36 +94,98 @@ exports[`diffTable 5`] = `
 exports[`diffTable 6`] = `
 "**Size Change:** 0 B 
 
-**Total Size:** 14.8 kB
+**Total Size:** 21.3 kB
 
 
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
 | Filename | Size |
 | :--- | :---: |
+| \`five.js\` | 6.5 kB |
+| \`four.js\` | 4.5 kB |
 | \`one.js\` | 5 kB |
-| \`two.js\` | 5 kB |
 | \`three.js\` | 300 B |
-| \`four.js\` | 4.5 kB |
+| \`two.js\` | 5 kB |
 
 </details>
 
 "
 `;
 
 exports[`diffTable 7`] = `
-"**Size Change:** 0 B 
+"**Size Change:** +2.5 kB (+100%) 🆘
+
+**Total Size:** 5 kB
 
-**Total Size:** 300 B
+| Filename | Size | Change |  |
+| :--- | :---: | :---: | :---: |
+| \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |"
+`;
+
+exports[`diffTable 8`] = `
+"**Size Change:** +9 B (+0.04%) 
+
+**Total Size:** 21.3 kB
+
+| Filename | Size | Change |  |
+| :--- | :---: | :---: | :---: |
+| \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |
+| \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |
+| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
+
+<details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
+| Filename | Size |
+| :--- | :---: |
+| \`three.js\` | 300 B |
+| \`five.js\` | 6.5 kB |
 
+</details>
+
+"
+`;
+
+exports[`diffTable 9`] = `
+"**Size Change:** +9 B (+0.04%) 
+
+**Total Size:** 21.3 kB
+
+| Filename | Size | Change |  |
+| :--- | :---: | :---: | :---: |
+| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
+| \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |
+| \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |
+
+<details><summary>ℹ️ <strong>View Unchanged</strong></summary>
+
+| Filename | Size |
+| :--- | :---: |
+| \`three.js\` | 300 B |
+| \`five.js\` | 6.5 kB |
+
+</details>
+
+"
+`;
+
+exports[`diffTable 10`] = `
+"**Size Change:** +9 B (+0.04%) 
+
+**Total Size:** 21.3 kB
+
+| Filename | Size | Change |  |
+| :--- | :---: | :---: | :---: |
+| \`one.js\` | 5 kB | +2.5 kB (+100%) | 🆘 |
+| \`four.js\` | 4.5 kB | +9 B (+0.2%) |  |
+| \`two.js\` | 5 kB | -2.5 kB (-33.33%) | 🎉 |
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
 | Filename | Size |
 | :--- | :---: |
 | \`three.js\` | 300 B |
+| \`five.js\` | 6.5 kB |
 
 </details>
 

tests/utils.spec.js

@@ -47,13 +47,19 @@ test('diffTable', () => {
 			filename: 'four.js',
 			size: 4500,
 			delta: 9
-		}
+		},
+		{
+			filename: 'five.js',
+			size: 6500,
+			delta: 0
+		},
 	];
 	const defaultOptions = {
 		showTotal: true,
 		collapseUnchanged: true,
 		omitUnchanged: false,
-		minimumChangeThreshold: 1
+		minimumChangeThreshold: 1,
+		sortBy: /** @type {const} */ ('Filename:asc')
 	};
 
 	expect(diffTable(files, { ...defaultOptions })).toMatchSnapshot();
@@ -64,6 +70,10 @@ test('diffTable', () => {
 	expect(diffTable(files.map(file => ({...file, delta: 0})), { ...defaultOptions })).toMatchSnapshot();
 
 	expect(diffTable([files[2]], { ...defaultOptions })).toMatchSnapshot();
+
+	expect(diffTable(files, { ...defaultOptions, sortBy: 'Filename:desc' })).toMatchSnapshot();
+	expect(diffTable(files, { ...defaultOptions, sortBy: 'Size:asc' })).toMatchSnapshot();
+	expect(diffTable(files, { ...defaultOptions, sortBy: 'Change:desc' })).toMatchSnapshot();
 });
 
 test('getPackageManagerAndInstallScript', async () => {