Merge pull request #28 from fisker/table-improve

Improve diff table
preactjs · Jun 29, 2020 · 7d0a588 · 7d0a588
2 parents e2bfc4b + 941624b
commit 7d0a588
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 50 deletions.
diff --git 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<details><summary>ℹ️ <strong>View Unchanged</strong></summary>\n\n${outUnchanged}\n\n</details>\n\n`;
+	if (unChangedRows.length !== 0) {
+		const outUnchanged = markdownTable(unChangedRows);
+		out += `\n\n<details><summary>ℹ️ <strong>View Unchanged</strong></summary>\n\n${outUnchanged}\n\n</details>\n\n`;
 	}
 
 	if (showTotal) {

diff --git a/tests/__snapshots__/utils.spec.js.snap b/tests/__snapshots__/utils.spec.js.snap
@@ -5,37 +5,35 @@ 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%) |  |
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
-| Filename | Size | Change | |
-|:--- |:---:|:---:|:---:|
-| \`three.js\` | 300 B | 0 B |  |
-
+| Filename | Size | Change |
+| :--- | :---: | :---: |
+| \`three.js\` | 300 B | 0 B |
 
 </details>
 
 "
 `;
 
 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%) |  |
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
-| Filename | Size | Change | |
-|:--- |:---:|:---:|:---:|
-| \`three.js\` | 300 B | 0 B |  |
-
+| Filename | Size | Change |
+| :--- | :---: | :---: |
+| \`three.js\` | 300 B | 0 B |
 
 </details>
 
@@ -47,45 +45,42 @@ 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`] = `
 "**Size Change:** +9 B (0%) 
 
 **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`] = `
 "**Size Change:** +9 B (0%) 
 
 **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%) | 🆘 |
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
-| 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%) |
 
 </details>
 
@@ -95,15 +90,36 @@ exports[`diffTable 5`] = `
 exports[`diffTable 6`] = `
 "**Size Change:** 0 B 
 
-**Total Size:** 300 B
+**Total Size:** 4.8 kB
+
 
 
 <details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
-| Filename | Size | Change | |
-|:--- |:---:|:---:|:---:|
-| \`three.js\` | 300 B | 0 B |  |
+| 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 |
+
+</details>
+
+"
+`;
+
+exports[`diffTable 7`] = `
+"**Size Change:** 0 B 
+
+**Total Size:** 300 B
+
+
+
+<details><summary>ℹ️ <strong>View Unchanged</strong></summary>
 
+| Filename | Size | Change |
+| :--- | :---: | :---: |
+| \`three.js\` | 300 B | 0 B |
 
 </details>
 

diff --git 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();
 });