Skip to content

feat: Add 'sort-by' option #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rschristian merged 1 commit into from
Nov 17, 2025
Merged

feat: Add 'sort-by' option #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
3 changes: 3 additions & 0 deletions action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
5 changes: 3 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
51 changes: 45 additions & 6 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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';
}
106 changes: 86 additions & 20 deletions tests/__snapshots__/utils.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%) | |
Comment on lines 8 to -12

@rschristian rschristian Nov 17, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change (and the similar ones throughout our snapshots) is from a slight inconsistency with our tests.

In a real use case, size-plugin-core generates the list of files that get passed to our diffTable function that will generate the markdown, and the file list it forms is alphabetically sorted. In our test suite, however, we manually build a list of files and pass it directly to diffTable without sorting it beforehand ourselves.

As such, if you had these exact same files in a real app, the order above is the order you'd really see. Previously we relied on sorting happening prior to forming the table is all.


<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| \`five.js\` | 6.5 kB |
| \`three.js\` | 300 B |

</details>
Expand All @@ -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>
Expand All @@ -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 | |
| :--- | :---: | :---: | :---: |
Expand All @@ -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>

Expand All @@ -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>

Expand Down
14 changes: 12 additions & 2 deletions tests/utils.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 () => {
Expand Down