refactor(utils): use build-md for markdown formatting

e2e/cli-e2e/tests/__snapshots__/compare.report-diff.md

@@ -4,37 +4,35 @@
 
 ## 🏷️ Categories
 
-|🏷️ Category|⭐ Previous score|⭐ Current score|🔄 Score change|
-|:--|:--:|:--:|:--:|
-|Code style|🟡 54|🟡 **77**|![↑ +23.1](https://img.shields.io/badge/%E2%86%91%20%2B23.1-green)|
-|Bug prevention|🟡 68|🟡 **68**|–|
+| 🏷️ Category   | ⭐ Previous score | ⭐ Current score |                          🔄 Score change                           |
+| :------------- | :--------------: | :-------------: | :----------------------------------------------------------------: |
+| Code style     |      🟡 54       |    🟡 **77**    | ![↑ +23.1](https://img.shields.io/badge/%E2%86%91%20%2B23.1-green) |
+| Bug prevention |      🟡 68       |    🟡 **68**    |                                 –                                  |
 
 ## 🗃️ Groups
 
 <details>
 <summary>👍 <strong>1</strong> group improved</summary>
 
-|🔌 Plugin|🗃️ Group|⭐ Previous score|⭐ Current score|🔄 Score change|
-|:--|:--|:--:|:--:|:--:|
-|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|Suggestions|🟡 50|🟡 **71**|![↑ +21.4](https://img.shields.io/badge/%E2%86%91%20%2B21.4-green)|
+| 🔌 Plugin                                                          | 🗃️ Group   | ⭐ Previous score | ⭐ Current score |                          🔄 Score change                           |
+| :----------------------------------------------------------------- | :---------- | :--------------: | :-------------: | :----------------------------------------------------------------: |
+| [ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin) | Suggestions |      🟡 50       |    🟡 **71**    | ![↑ +21.4](https://img.shields.io/badge/%E2%86%91%20%2B21.4-green) |
 
 3 other groups are unchanged.
 
-
 </details>
 
 ## 🛡️ Audits
 
 <details>
 <summary>👍 <strong>3</strong> audits improved</summary>
 
-|🔌 Plugin|🛡️ Audit|📏 Previous value|📏 Current value|🔄 Value change|
-|:--|:--|:--:|:--:|:--:|
-|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require or disallow method and property shorthand syntax for object literals](https://eslint.org/docs/latest/rules/object-shorthand)|🟥 3 warnings|🟩 **passed**|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require braces around arrow function bodies](https://eslint.org/docs/latest/rules/arrow-body-style)|🟥 1 warning|🟩 **passed**|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require `const` declarations for variables that are never reassigned after declared](https://eslint.org/docs/latest/rules/prefer-const)|🟥 1 warning|🟩 **passed**|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+| 🔌 Plugin                                                          | 🛡️ Audit                                                                                                                                | 📏 Previous value | 📏 Current value |                                   🔄 Value change                                    |
+| :----------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :---------------: | :--------------: | :----------------------------------------------------------------------------------: |
+| [ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin) | [Require or disallow method and property shorthand syntax for object literals](https://eslint.org/docs/latest/rules/object-shorthand)    |   🟥 3 warnings   |  🟩 **passed**   | ![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green) |
+| [ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin) | [Require braces around arrow function bodies](https://eslint.org/docs/latest/rules/arrow-body-style)                                     |   🟥 1 warning    |  🟩 **passed**   | ![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green) |
+| [ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin) | [Require `const` declarations for variables that are never reassigned after declared](https://eslint.org/docs/latest/rules/prefer-const) |   🟥 1 warning    |  🟩 **passed**   | ![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green) |
 
 28 other audits are unchanged.
 
-
 </details>

package.json

@@ -53,6 +53,7 @@
     "@poppinss/cliui": "^6.4.0",
     "@swc/helpers": "0.5.3",
     "ansis": "^3.3.0",
+    "build-md": "^0.4.1",
     "bundle-require": "^4.0.1",
     "cli-table3": "^0.6.3",
     "esbuild": "^0.19.12",

packages/core/src/lib/implementation/persist.unit.test.ts

@@ -83,7 +83,9 @@ describe('persistReport', () => {
 
     const mdReport = await readFile(join(MEMFS_VOLUME, 'report.md'), 'utf8');
     expect(mdReport).toContain('Code PushUp Report');
-    expect(mdReport).toContain('|🏷 Category|⭐ Score|🛡 Audits|');
+    expect(mdReport).toMatch(
+      /\|\s*🏷 Category\s*\|\s*⭐ Score\s*\|\s*🛡 Audits\s*\|/,
+    );
 
     const jsonReport: Report = JSON.parse(
       await readFile(join(MEMFS_VOLUME, 'report.json'), 'utf8'),

packages/utils/package.json

@@ -6,6 +6,7 @@
     "@isaacs/cliui": "^8.0.2",
     "@poppinss/cliui": "^6.4.0",
     "ansis": "^3.3.0",
+    "build-md": "^0.4.1",
     "bundle-require": "^4.0.1",
     "esbuild": "^0.19.2",
     "multi-progress-bars": "^5.0.3",

packages/utils/src/lib/reports/__snapshots__/formatting.unit.test.ts.snap

@@ -3,11 +3,11 @@
 exports[`tableSection > should render complete section 1`] = `
 "### LCP Breakdown
 
-|Phase|% of LCP|Timing|
-|:--:|:--|--:|
-|TTFB|27%|620 ms|
-|Load Delay|25%|580 ms|
-|Load Time|41%|940 ms|
-|Render Delay|6%|140 ms|
+|    Phase     | % of LCP | Timing |
+| :----------: | :------- | -----: |
+|     TTFB     | 27%      | 620 ms |
+|  Load Delay  | 25%      | 580 ms |
+|  Load Time   | 41%      | 940 ms |
+| Render Delay | 6%       | 140 ms |
 "
 `;

packages/utils/src/lib/reports/__snapshots__/generate-md-report-category-section.unit.test.ts.snap

@@ -5,27 +5,30 @@ exports[`categoriesDetails > should render complete categories details 1`] = `
 
 ### Bug Prevention
 
-🟢 Score:  **98**
+🟢 Score: **98**
+
 - 🟥 [No let](#no-let-eslint) (_Eslint_) - **5**
 
 ### Performance
 
-🟡 Score:  **74**
+🟡 Score: **74**
+
 - 🟨 [Largest Contentful Paint](#largest-contentful-paint-lighthouse) (_Lighthouse_) - **2905**
 
 ### Typescript
 
-🔴 Score:  **14**
+🔴 Score: **14**
+
 - 🟩 [No any](#no-any-eslint) (_Eslint_) - **0**
 "
 `;
 
 exports[`categoriesOverviewSection > should render complete categories table 1`] = `
-"|🏷 Category|⭐ Score|🛡 Audits|
-|:--|:--:|:--:|
-|[Bug Prevention](#bug-prevention)|🟢 **98**|1|
-|[Performance](#performance)|🟡 **74**|1|
-|[Typescript](#typescript)|🔴 **14**|1|
+"| 🏷 Category                       |  ⭐ Score  | 🛡 Audits |
+| :-------------------------------- | :-------: | :-------: |
+| [Bug Prevention](#bug-prevention) | 🟢 **98** |     1     |
+| [Performance](#performance)       | 🟡 **74** |     1     |
+| [Typescript](#typescript)         | 🔴 **14** |     1     |
 "
 `;
 

packages/utils/src/lib/reports/__snapshots__/generate-md-report.unit.test.ts.snap

@@ -5,32 +5,31 @@ exports[`aboutSection > should return full about section 1`] = `
 
 Report was created by [Code PushUp](https://github.com/code-pushup/cli#readme) on Wed, Jan 1, 2025, 12:00 AM UTC.
 
-|Plugin|Audits|Version|Duration|
-|:--|:--:|:--:|:--:|
-|Lighthouse|3|\`1.1.1\`|42 ms|
+| Plugin     | Audits | Version | Duration |
+| :--------- | :----: | :-----: | -------: |
+| Lighthouse |   3    | \`1.1.1\` |    42 ms |
 
-|Commit|Version|Duration|Plugins|Categories|Audits|
-|:--|:--:|:--:|:--:|:--:|:--:|
-|ci: update action (535b8e9e557336618a764f3fa45609d224a62837)|\`v1.0.0\`|4.20 s|1|3|3|
+| Commit                                                       | Version  | Duration | Plugins | Categories | Audits |
+| :----------------------------------------------------------- | :------: | -------: | :-----: | :--------: | :----: |
+| ci: update action (535b8e9e557336618a764f3fa45609d224a62837) | \`v1.0.0\` |   4.20 s |    1    |     3      |   3    |
 "
 `;
 
 exports[`auditDetails > should render complete details section 1`] = `
 "<details>
 <summary>🟩 <b>190ms</b> (score: 99)</summary>
 
-|Class Names|Element|
-|:--:|:--:|
-|.btn, .icon|button|
-|.badge, .badge-icon|div|
+|     Class Names     | Element |
+| :-----------------: | :-----: |
+|     .btn, .icon     | button  |
+| .badge, .badge-icon |   div   |
 
 #### Issues
 
-|Severity|Message|Source file|Line(s)|
-|:--:|:--:|:--:|:--:|
-|🚨 <i>error</i>|Use design system components instead of classes|<code>list.component.ts</code>|400-200|
-|🚨 <i>error</i>|File size is 20KB too big|<code>list.component.ts</code>||
-
+|  Severity  | Message                                         | Source file         | Line(s) |
+| :--------: | :---------------------------------------------- | :------------------ | :-----: |
+| 🚨 _error_ | Use design system components instead of classes | \`list.component.ts\` | 400-200 |
+| 🚨 _error_ | File size is 20KB too big                       | \`list.component.ts\` |         |
 
 </details>
 "
@@ -39,62 +38,64 @@ exports[`auditDetails > should render complete details section 1`] = `
 exports[`auditDetailsIssues > should render complete section 1`] = `
 "#### Issues
 
-|Severity|Message|Source file|Line(s)|
-|:--:|:--:|:--:|:--:|
-|ℹ️ <i>info</i>|File \`index.js\` is 56Kb.|<code>index.js</code>||
-|⚠️ <i>warning</i>|Package license is has to be "MIT"|<code>package.json</code>|4|
-|🚨 <i>error</i>|no unused vars|<code>index.js</code>|400-200|
+|   Severity   | Message                            | Source file    | Line(s) |
+| :----------: | :--------------------------------- | :------------- | :-----: |
+|  ℹ️ _info_   | File \`index.js\` is 56Kb.           | \`index.js\`     |         |
+| ⚠️ _warning_ | Package license is has to be "MIT" | \`package.json\` |    4    |
+|  🚨 _error_  | no unused vars                     | \`index.js\`     | 400-200 |
 "
 `;
 
 exports[`auditsSection > should render complete audit section 1`] = `
 "## 🛡️ Audits
 
-### No any (Eslint)
+### No any (ESLint)
 
-🟩 <b>0</b> (score: 100)
+🟩 **0** (score: 100)
 
 No unsafe any assignment
 
-### No let (Eslint)
+### No let (ESLint)
 
-🟥 <b>5 errors</b> (score: 0)
+🟥 **5 errors** (score: 0)
 
 ### Largest contentful paint (Lighthouse)
 
-🟨 <b>0</b> (score: 60)
+🟨 **0** (score: 60)
 
 No unsafe any assignment [📖 Docs](https://web.dev/lcp)
-
 "
 `;
 
 exports[`generateMdReport > should render complete md report 1`] = `
 "# Code PushUp Report
 
-|🏷 Category|⭐ Score|🛡 Audits|
-|:--|:--:|:--:|
-|[Performance](#performance)|🟡 **61**|2|
-|[SEO](#seo)|🟢 **100**|1|
-|[PWA](#pwa)|🔴 **0**|1|
+| 🏷 Category                 |  ⭐ Score   | 🛡 Audits |
+| :-------------------------- | :--------: | :-------: |
+| [Performance](#performance) | 🟡 **61**  |     2     |
+| [SEO](#seo)                 | 🟢 **100** |     1     |
+| [PWA](#pwa)                 |  🔴 **0**  |     1     |
 
 ## 🏷 Categories
 
 ### Performance
 
-🟡 Score:  **61**
+🟡 Score: **61**
+
 - 🔴 Performance Group (_Lighthouse_)
   - 🟨 [Largest Contentful Paint](#largest-contentful-paint-lighthouse) - **2,7 s**
   - 🟩 [Fast Images](#fast-images-lighthouse) - **1**
 
 ### SEO
 
-🟢 Score:  **100**
+🟢 Score: **100**
+
 - 🟥 [Website is crawlable](#website-is-crawlable-lighthouse) (_Lighthouse_) - **0**
 
 ### PWA
 
-🔴 Score:  **0**
+🔴 Score: **0**
+
 - 🟩 [Splash Screen](#splash-screen-lighthouse) (_Lighthouse_) - **1**
 
 ## 🛡️ Audits
@@ -104,45 +105,43 @@ exports[`generateMdReport > should render complete md report 1`] = `
 <details>
 <summary>🟨 <b>2,7 s</b> (score: 67)</summary>
 
-|Phase|% of LCP|Timing|
-|:--:|:--|--:|
-|TTFB|27%|620 ms|
-|Load Delay|25%|580 ms|
-|Load Time|41%|940 ms|
-|Render Delay|6%|140 ms|
-
+|    Phase     | % of LCP | Timing |
+| :----------: | :------- | -----: |
+|     TTFB     | 27%      | 620 ms |
+|  Load Delay  | 25%      | 580 ms |
+|  Load Time   | 41%      | 940 ms |
+| Render Delay | 6%       | 140 ms |
 
 </details>
 
 This is the largest contentful element painted within the viewport. [Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/) [📖 Docs](https://web.dev/lcp)
 
 ### Splash Screen (Lighthouse)
 
-🟩 <b>1</b> (score: 100)
+🟩 **1** (score: 100)
 
 ### Fast Images (Lighthouse)
 
-🟩 <b>1</b> (score: 97)
+🟩 **1** (score: 97)
 
 ### Website is crawlable (Lighthouse)
 
-🟥 <b>0</b> (score: 0)
+🟥 **0** (score: 0)
 
 Search engines are unable to include your pages in search results if they don't have permission to crawl them. [Learn more about crawler directives](https://developer.chrome.com/docs/lighthouse/seo/is-crawlable/).
 
-### No explicit any (Eslint)
+### No explicit any (ESLint)
 
 <details>
 <summary>🟥 <b>63 errors</b> (score: 0)</summary>
 
 #### Issues
 
-|Severity|Message|Source file|Line(s)|
-|:--:|:--:|:--:|:--:|
-|ℹ️ <i>info</i>|File \`index.js\` is 56Kb.|<code>index.js</code>||
-|⚠️ <i>warning</i>|Package license is has to be "MIT"|<code>package.json</code>|4|
-|🚨 <i>error</i>|no unused vars|<code>index.js</code>|400-200|
-
+|   Severity   | Message                            | Source file    | Line(s) |
+| :----------: | :--------------------------------- | :------------- | :-----: |
+|  ℹ️ _info_   | File \`index.js\` is 56Kb.           | \`index.js\`     |         |
+| ⚠️ _warning_ | Package license is has to be "MIT" | \`package.json\` |    4    |
+|  🚨 _error_  | no unused vars                     | \`index.js\`     | 400-200 |
 
 </details>
 
@@ -162,31 +161,34 @@ module.exports = {
   }
 };
 \`\`\`
- [📖 Docs](https://typescript-eslint.io/rules/no-explicit-any/)
 
+[📖 Docs](https://typescript-eslint.io/rules/no-explicit-any/)
 
 ## About
 
 Report was created by [Code PushUp](https://github.com/code-pushup/cli#readme) on Wed, Apr 17, 2024, 12:37 PM UTC.
 
-|Plugin|Audits|Version|Duration|
-|:--|:--:|:--:|:--:|
-|Lighthouse|4|\`1.0.1.beta-1\`|17.97 s|
-|Eslint|1|\`3.71.8\`|17.97 s|
+| Plugin     | Audits |    Version     | Duration |
+| :--------- | :----: | :------------: | -------: |
+| Lighthouse |   4    | \`1.0.1.beta-1\` |  17.97 s |
+| ESLint     |   1    |    \`3.71.8\`    |  17.97 s |
 
-|Commit|Version|Duration|Plugins|Categories|Audits|
-|:--|:--:|:--:|:--:|:--:|:--:|
-|ci: update action (535b8e9e557336618a764f3fa45609d224a62837)|\`v1.0.0\`|42.36 s|2|3|5|
+| Commit                                                       | Version  | Duration | Plugins | Categories | Audits |
+| :----------------------------------------------------------- | :------: | -------: | :-----: | :--------: | :----: |
+| ci: update action (535b8e9e557336618a764f3fa45609d224a62837) | \`v1.0.0\` |  42.36 s |    2    |     3      |   5    |
 
-Made with ❤ by [Code PushUp](https://github.com/code-pushup/cli#readme)"
+---
+
+Made with ❤ by [Code PushUp](https://github.com/code-pushup/cli#readme)
+"
 `;
 
 exports[`tableSection > should render complete section 1`] = `
-"|Phase|% of LCP|Timing|
-|:--:|:--:|:--:|
-|TTFB|27%|620 ms|
-|Load Delay|25%|580 ms|
-|Load Time|41%|940 ms|
-|Render Delay|6%|140 ms|
+"|    Phase     | % of LCP | Timing |
+| :----------: | :------: | :----: |
+|     TTFB     |   27%    | 620 ms |
+|  Load Delay  |   25%    | 580 ms |
+|  Load Time   |   41%    | 940 ms |
+| Render Delay |    6%    | 140 ms |
 "
 `;