Skip to content

Commit 27290f2

Browse files
matejchalkmatejchalk
committed
feat(utils): improve diff md formatting - change icon, n/a cells, percentage space
1 parent d0eb475 commit 27290f2

File tree

6 files changed

+50
-46
lines changed

6 files changed

+50
-46
lines changed

‎packages/utils/src/lib/reports/__snapshots__/report-diff-added.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44

55
## 🏷️ Categories
66

7-
|🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
7+
|🏷️ Category|⭐ Current score|⭐ Previous score|🔄 Score change|
88
|:--|:--:|:--:|:--:|
99
|Bug prevention|🟡 **63**|🟡 68|![🠋 −5](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%925-red)|
10-
|Performance|🟢 **94**|n/a|n/a|
10+
|Performance|🟢 **94**|_n/a (*)_|_n/a (*)_|
1111
|Code style|🟡 **54**|🟡 54|–|
1212

13+
_(*) New category._
14+
1315
## 🎗️ Groups
1416

1517
All of 1 group is unchanged.
@@ -19,9 +21,9 @@ All of 1 group is unchanged.
1921
<details>
2022
<summary>👎 <strong>1</strong> audit regressed</summary>
2123

22-
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
24+
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
2325
|:--|:--|:--:|:--:|:--:|
24-
|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![🠉 +∞%](https://img.shields.io/badge/%F0%9F%A0%89%20%2B%E2%88%9E%25-red)|
26+
|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![🠉 +∞ %](https://img.shields.io/badge/%F0%9F%A0%89%20%2B%E2%88%9E%E2%80%89%25-red)|
2527

2628
48 other audits are unchanged.
2729

‎packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## 🏷️ Categories
66

7-
|🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
7+
|🏷️ Category|⭐ Current score|⭐ Previous score|🔄 Score change|
88
|:--|:--:|:--:|:--:|
99
|Code style|🟢 **100**|🟡 54|![🠉 +46](https://img.shields.io/badge/%F0%9F%A0%89%20%2B46-green)|
1010
|Bug prevention|🟢 **95**|🟡 68|![🠉 +27](https://img.shields.io/badge/%F0%9F%A0%89%20%2B27-green)|
@@ -15,7 +15,7 @@
1515
<details>
1616
<summary>👍 <strong>2</strong> groups improved</summary>
1717

18-
|🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🗠 Score change|
18+
|🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🔄 Score change|
1919
|:--|:--|:--:|:--:|:--:|
2020
|ESLint|Maximum lines limitation|🟢 **100**|🟡 50|![🠉 +50](https://img.shields.io/badge/%F0%9F%A0%89%20%2B50-green)|
2121
|Lighthouse|Performance|🟢 **94**|🟢 92|![🠉 +2](https://img.shields.io/badge/%F0%9F%A0%89%20%2B2-green)|
@@ -28,20 +28,20 @@
2828
<details>
2929
<summary>👍 <strong>12</strong> audits improved</summary>
3030

31-
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
31+
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
3232
|:--|:--|:--:|:--:|:--:|
33-
|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
34-
|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
35-
|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
36-
|ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
37-
|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
38-
|ESLint|Require the use of `===` and `!==`|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
39-
|ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
40-
|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
41-
|ESLint|Disallow missing `key` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
42-
|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![🠋 −8%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%928%25-green)|
43-
|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
44-
|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
33+
|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
34+
|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
35+
|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
36+
|ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
37+
|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
38+
|ESLint|Require the use of `===` and `!==`|🟩 **passed**|🟥 1 warning|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
39+
|ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
40+
|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
41+
|ESLint|Disallow missing `key` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|![🠋 −100 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%E2%80%89%25-green)|
42+
|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![🠋 −8 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%928%E2%80%89%25-green)|
43+
|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![🠋 −4 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%E2%80%89%25-green)|
44+
|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![🠋 −4 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%E2%80%89%25-green)|
4545

4646
40 other audits are unchanged.
4747

‎packages/utils/src/lib/reports/__snapshots__/report-diff-minimal.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<details>
88
<summary>👎 <strong>1</strong> audit regressed</summary>
99

10-
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
10+
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
1111
|:--|:--|:--:|:--:|:--:|
12-
|NPM|Check for outdates NPM packages|🟨 **3 packages are out of date**|🟩 1 package is out of date|![🠉 +200%](https://img.shields.io/badge/%F0%9F%A0%89%20%2B200%25-red)|
12+
|NPM|Check for outdates NPM packages|🟨 **3 packages are out of date**|🟩 1 package is out of date|![🠉 +200 %](https://img.shields.io/badge/%F0%9F%A0%89%20%2B200%E2%80%89%25-red)|
1313

1414
</details>

‎packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## 🏷️ Categories
66

7-
|🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
7+
|🏷️ Category|⭐ Current score|⭐ Previous score|🔄 Score change|
88
|:--|:--:|:--:|:--:|
99
|Bug prevention|🟡 **63**|🟡 68|![🠋 −5](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%925-red)|
1010
|Performance|🟢 **94**|🟢 92|![🠉 +2](https://img.shields.io/badge/%F0%9F%A0%89%20%2B2-green)|
@@ -15,7 +15,7 @@
1515
<details>
1616
<summary>👍 <strong>1</strong> group improved</summary>
1717

18-
|🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🗠 Score change|
18+
|🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🔄 Score change|
1919
|:--|:--|:--:|:--:|:--:|
2020
|Lighthouse|Performance|🟢 **94**|🟢 92|![🠉 +2](https://img.shields.io/badge/%F0%9F%A0%89%20%2B2-green)|
2121

@@ -29,12 +29,12 @@
2929
<details>
3030
<summary>👍 <strong>3</strong> audits improved, 👎 <strong>1</strong> audit regressed</summary>
3131

32-
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
32+
|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
3333
|:--|:--|:--:|:--:|:--:|
34-
|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![🠉 +∞%](https://img.shields.io/badge/%F0%9F%A0%89%20%2B%E2%88%9E%25-red)|
35-
|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![🠋 −8%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%928%25-green)|
36-
|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
37-
|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
34+
|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![🠉 +∞ %](https://img.shields.io/badge/%F0%9F%A0%89%20%2B%E2%88%9E%E2%80%89%25-red)|
35+
|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![🠋 −8 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%928%E2%80%89%25-green)|
36+
|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![🠋 −4 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%E2%80%89%25-green)|
37+
|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![🠋 −4 %](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%E2%80%89%25-green)|
3838

3939
48 other audits are unchanged.
4040

‎packages/utils/src/lib/reports/generate-md-reports-diff.ts

+19-17
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ function formatDiffHeaderSection(diff: ReportsDiff): string {
2727
const outcomeTexts: Record<DiffOutcome, string> = {
2828
positive: `🥳 Code PushUp report has ${style('improved')}`,
2929
negative: `😟 Code PushUp report has ${style('regressed')}`,
30-
neutral: `😐 Code PushUp report is ${style('unchanged')}`,
3130
mixed: `🤨 Code PushUp report has both ${style(
3231
'improvements and regressions',
3332
)}`,
33+
unchanged: `😐 Code PushUp report is ${style('unchanged')}`,
3434
};
3535
const outcome = mergeDiffOutcomes(
3636
changesToDiffOutcomes([
@@ -74,7 +74,7 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
7474
'🏷️ Category',
7575
hasChanges ? '⭐ Current score' : '⭐ Score',
7676
'⭐ Previous score',
77-
'🗠 Score change',
77+
'🔄 Score change',
7878
],
7979
...sortChanges(changed).map(category => [
8080
category.title,
@@ -85,8 +85,8 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
8585
...added.map(category => [
8686
category.title,
8787
formatScoreWithColor(category.score),
88-
'n/a',
89-
'n/a',
88+
style('n/a (*)', ['i']),
89+
style('n/a (*)', ['i']),
9090
]),
9191
...unchanged.map(category => [
9292
category.title,
@@ -97,6 +97,7 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
9797
].map(row => (hasChanges ? row : row.slice(0, 2))),
9898
hasChanges ? ['l', 'c', 'c', 'c'] : ['l', 'c'],
9999
),
100+
added.length > 0 && style('(*) New category.', ['i']),
100101
);
101102
}
102103

@@ -112,7 +113,7 @@ function formatDiffGroupsSection(diff: ReportsDiff): string {
112113
'🎗️ Group',
113114
'⭐ Current score',
114115
'⭐ Previous score',
115-
'🗠 Score change',
116+
'🔄 Score change',
116117
],
117118
rows: sortChanges(diff.groups.changed).map(group => [
118119
group.plugin.title,
@@ -135,7 +136,7 @@ function formatDiffAuditsSection(diff: ReportsDiff): string {
135136
'🛡️ Audit',
136137
'📏 Current value',
137138
'📏 Previous value',
138-
'🗠 Value change',
139+
'🔄 Value change',
139140
],
140141
rows: sortChanges(diff.audits.changed).map(audit => [
141142
audit.plugin.title,
@@ -197,7 +198,8 @@ function formatValueChange({
197198
? Number.POSITIVE_INFINITY
198199
: Number.NEGATIVE_INFINITY
199200
: Math.round((100 * values.diff) / values.before);
200-
const text = `${formatDiffNumber(percentage)}%`;
201+
// eslint-disable-next-line no-irregular-whitespace
202+
const text = `${formatDiffNumber(percentage)} %`;
201203
return colorByScoreDiff(`${marker} ${text}`, scores.diff);
202204
}
203205

@@ -217,10 +219,10 @@ function summarizeUnchanged(
217219
function summarizeDiffOutcomes(outcomes: DiffOutcome[], token: string): string {
218220
return objectToEntries(countDiffOutcomes(outcomes))
219221
.filter(
220-
(entry): entry is [Exclude<DiffOutcome, 'neutral'>, number] =>
221-
entry[0] !== 'neutral' && entry[1] > 0,
222+
(entry): entry is [Exclude<DiffOutcome, 'unchanged'>, number] =>
223+
entry[0] !== 'unchanged' && entry[1] > 0,
222224
)
223-
.map(([outcome, count]) => {
225+
.map(([outcome, count]): string => {
224226
const formattedCount = `<strong>${count}</strong> ${pluralize(
225227
token,
226228
count,
@@ -261,26 +263,26 @@ function changesToDiffOutcomes(changes: Change[]): DiffOutcome[] {
261263
if (change.values != null && change.values.diff !== 0) {
262264
return 'mixed';
263265
}
264-
return 'neutral';
266+
return 'unchanged';
265267
});
266268
}
267269

268270
function mergeDiffOutcomes(outcomes: DiffOutcome[]): DiffOutcome {
269271
if (outcomes.length === 0) {
270-
return 'neutral';
272+
return 'unchanged';
271273
}
272274
if (
273-
outcomes.every(outcome => outcome === 'positive' || outcome === 'neutral')
275+
outcomes.every(outcome => outcome === 'positive' || outcome === 'unchanged')
274276
) {
275277
return 'positive';
276278
}
277279
if (
278-
outcomes.every(outcome => outcome === 'negative' || outcome === 'neutral')
280+
outcomes.every(outcome => outcome === 'negative' || outcome === 'unchanged')
279281
) {
280282
return 'negative';
281283
}
282-
if (outcomes.every(outcome => outcome === 'neutral')) {
283-
return 'neutral';
284+
if (outcomes.every(outcome => outcome === 'unchanged')) {
285+
return 'unchanged';
284286
}
285287
return 'mixed';
286288
}
@@ -291,7 +293,7 @@ function countDiffOutcomes(
291293
return {
292294
positive: outcomes.filter(outcome => outcome === 'positive').length,
293295
negative: outcomes.filter(outcome => outcome === 'negative').length,
294-
neutral: outcomes.filter(outcome => outcome === 'neutral').length,
295296
mixed: outcomes.filter(outcome => outcome === 'mixed').length,
297+
unchanged: outcomes.filter(outcome => outcome === 'unchanged').length,
296298
};
297299
}

‎packages/utils/src/lib/reports/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,4 @@ export type SortableAuditReport = AuditReport & {
2929
plugin: string;
3030
};
3131

32-
export type DiffOutcome = 'positive' | 'negative' | 'neutral' | 'mixed';
32+
export type DiffOutcome = 'positive' | 'negative' | 'mixed' | 'unchanged';

0 commit comments

Comments
 (0)