From 83ab359ff34c7fffa0f94ce3cad73ea96ce6eb82 Mon Sep 17 00:00:00 2001 From: fisker Date: Fri, 19 Jun 2020 16:38:43 +0800 Subject: [PATCH 1/2] Improve diff table --- src/utils.js | 65 ++++++++++++++++++-------- tests/__snapshots__/utils.spec.js.snap | 57 +++++++++++----------- 2 files changed, 72 insertions(+), 50 deletions(-) diff --git a/src/utils.js b/src/utils.js index f80cb52..1d27840 100644 --- a/src/utils.js +++ b/src/utils.js @@ -67,6 +67,38 @@ export function iconForDifference(difference) { return icon; } +/** + * Create a Markdown table from text rows + * @param {string[]} rows + */ +function markdownTable(rows) { + if (rows.length == 0) { + return ''; + } + + // Skip all empty columns + while (rows.every(columns => !columns[columns.length - 1])) { + for (const columns of rows) { + columns.pop(); + } + } + + const [firstRow] = rows; + const columnLength = firstRow.length; + if (columnLength === 0) { + return ''; + } + + return [ + // Header + ['Filename', 'Size', 'Change', ''].slice(0, columnLength), + // Align + [':---', ':---:', ':---:', ':---:'].slice(0, columnLength), + // Body + ...rows + ].map(columns => `| ${columns.join(' | ')} |`).join('\n'); +} + /** * @typedef {Object} Diff * @property {string} filename @@ -84,44 +116,39 @@ export function iconForDifference(difference) { * @param {number} [options.minimumChangeThreshold] */ export function diffTable(files, { showTotal, collapseUnchanged, omitUnchanged, minimumChangeThreshold }) { - let out = `| Filename | Size | Change | |\n`; - out += `|:--- |:---:|:---:|:---:|\n`; - - let outUnchanged = out; + let changedRows = []; + let unChangedRows = []; let totalSize = 0; let totalDelta = 0; - let unchanged = 0; - let changed = 0; for (const file of files) { const { filename, size, delta } = file; totalSize += size; totalDelta += delta; const difference = ((delta / size) * 100) | 0; - let deltaText = getDeltaText(delta, difference); - let icon = iconForDifference(difference); - const s = `| \`${filename}\` | ${prettyBytes(size)} | ${deltaText} | ${icon} |\n`; const isUnchanged = Math.abs(delta) < minimumChangeThreshold; if (isUnchanged && omitUnchanged) continue; + const columns = [ + `\`${filename}\``, + prettyBytes(size), + getDeltaText(delta, difference), + iconForDifference(difference) + ]; if (isUnchanged && collapseUnchanged) { - unchanged++; - outUnchanged += s; + unChangedRows.push(columns); } else { - changed++; - out += s; + changedRows.push(columns); } } - // no changes, don't show an empty table - if (!changed) { - out = ''; - } + let out = markdownTable(changedRows); - if (unchanged) { - out += `\n
ℹī¸ View Unchanged\n\n${outUnchanged}\n\n
\n\n`; + if (unChangedRows.length !== 0) { + const outUnchanged = markdownTable(unChangedRows); + out += `\n\n
ℹī¸ View Unchanged\n\n${outUnchanged}\n\n
\n\n`; } if (showTotal) { diff --git a/tests/__snapshots__/utils.spec.js.snap b/tests/__snapshots__/utils.spec.js.snap index 93624c6..2f46a11 100644 --- a/tests/__snapshots__/utils.spec.js.snap +++ b/tests/__snapshots__/utils.spec.js.snap @@ -5,18 +5,17 @@ exports[`diffTable 1`] = ` **Total Size:** 4.8 kB -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| +| Filename | Size | Change | | +| :--- | :---: | :---: | :---: | | \`one.js\` | 5 kB | +2.5 kB (50%) | 🆘 | | \`two.js\` | -5 kB | -2.5 kB (50%) | 🆘 | | \`four.js\` | 4.5 kB | +9 B (0%) | |
ℹī¸ View Unchanged -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| -| \`three.js\` | 300 B | 0 B | | - +| Filename | Size | Change | +| :--- | :---: | :---: | +| \`three.js\` | 300 B | 0 B |
@@ -24,18 +23,17 @@ exports[`diffTable 1`] = ` `; exports[`diffTable 2`] = ` -"| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| +"| Filename | Size | Change | | +| :--- | :---: | :---: | :---: | | \`one.js\` | 5 kB | +2.5 kB (50%) | 🆘 | | \`two.js\` | -5 kB | -2.5 kB (50%) | 🆘 | | \`four.js\` | 4.5 kB | +9 B (0%) | |
ℹī¸ View Unchanged -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| -| \`three.js\` | 300 B | 0 B | | - +| Filename | Size | Change | +| :--- | :---: | :---: | +| \`three.js\` | 300 B | 0 B |
@@ -47,13 +45,12 @@ exports[`diffTable 3`] = ` **Total Size:** 4.8 kB -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| +| Filename | Size | Change | | +| :--- | :---: | :---: | :---: | | \`one.js\` | 5 kB | +2.5 kB (50%) | 🆘 | | \`two.js\` | -5 kB | -2.5 kB (50%) | 🆘 | | \`three.js\` | 300 B | 0 B | | -| \`four.js\` | 4.5 kB | +9 B (0%) | | -" +| \`four.js\` | 4.5 kB | +9 B (0%) | |" `; exports[`diffTable 4`] = ` @@ -61,12 +58,11 @@ exports[`diffTable 4`] = ` **Total Size:** 4.8 kB -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| +| Filename | Size | Change | | +| :--- | :---: | :---: | :---: | | \`one.js\` | 5 kB | +2.5 kB (50%) | 🆘 | | \`two.js\` | -5 kB | -2.5 kB (50%) | 🆘 | -| \`four.js\` | 4.5 kB | +9 B (0%) | | -" +| \`four.js\` | 4.5 kB | +9 B (0%) | |" `; exports[`diffTable 5`] = ` @@ -74,18 +70,17 @@ exports[`diffTable 5`] = ` **Total Size:** 4.8 kB -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| +| Filename | Size | Change | | +| :--- | :---: | :---: | :---: | | \`one.js\` | 5 kB | +2.5 kB (50%) | 🆘 | | \`two.js\` | -5 kB | -2.5 kB (50%) | 🆘 |
ℹī¸ View Unchanged -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| -| \`three.js\` | 300 B | 0 B | | -| \`four.js\` | 4.5 kB | +9 B (0%) | | - +| Filename | Size | Change | +| :--- | :---: | :---: | +| \`three.js\` | 300 B | 0 B | +| \`four.js\` | 4.5 kB | +9 B (0%) |
@@ -98,12 +93,12 @@ exports[`diffTable 6`] = ` **Total Size:** 300 B -
ℹī¸ View Unchanged -| Filename | Size | Change | | -|:--- |:---:|:---:|:---:| -| \`three.js\` | 300 B | 0 B | | +
ℹī¸ View Unchanged +| Filename | Size | Change | +| :--- | :---: | :---: | +| \`three.js\` | 300 B | 0 B |
From 941624b0d3e65adeed6f934c8d014c083ea39aa6 Mon Sep 17 00:00:00 2001 From: fisker Date: Fri, 19 Jun 2020 17:04:41 +0800 Subject: [PATCH 2/2] Test all files `delta: 0` --- tests/__snapshots__/utils.spec.js.snap | 21 +++++++++++++++++++++ tests/utils.spec.js | 1 + 2 files changed, 22 insertions(+) diff --git a/tests/__snapshots__/utils.spec.js.snap b/tests/__snapshots__/utils.spec.js.snap index 2f46a11..ede05be 100644 --- a/tests/__snapshots__/utils.spec.js.snap +++ b/tests/__snapshots__/utils.spec.js.snap @@ -90,6 +90,27 @@ exports[`diffTable 5`] = ` exports[`diffTable 6`] = ` "**Size Change:** 0 B +**Total Size:** 4.8 kB + + + +
ℹī¸ View Unchanged + +| Filename | Size | Change | +| :--- | :---: | :---: | +| \`one.js\` | 5 kB | 0 B | +| \`two.js\` | -5 kB | 0 B | +| \`three.js\` | 300 B | 0 B | +| \`four.js\` | 4.5 kB | 0 B | + +
+ +" +`; + +exports[`diffTable 7`] = ` +"**Size Change:** 0 B + **Total Size:** 300 B diff --git a/tests/utils.spec.js b/tests/utils.spec.js index 118d89d..4352e27 100644 --- a/tests/utils.spec.js +++ b/tests/utils.spec.js @@ -55,6 +55,7 @@ test('diffTable', () => { expect(diffTable(files, { ...defaultOptions, collapseUnchanged: false })).toMatchSnapshot(); expect(diffTable(files, { ...defaultOptions, omitUnchanged: true })).toMatchSnapshot(); expect(diffTable(files, { ...defaultOptions, minimumChangeThreshold: 10 })).toMatchSnapshot(); + expect(diffTable(files.map(file => ({...file, delta: 0})), { ...defaultOptions })).toMatchSnapshot(); expect(diffTable([files[2]], { ...defaultOptions })).toMatchSnapshot(); });