refactor(utils): relocate code for text styles (#673)

package.json

@@ -96,8 +96,8 @@
     "@vitest/coverage-v8": "1.3.1",
     "@vitest/ui": "1.3.1",
     "benchmark": "^2.1.4",
-    "chromium": "^3.0.3",
     "chrome-launcher": "^1.1.1",
+    "chromium": "^3.0.3",
     "commitizen": "^4.3.0",
     "commitlint-plugin-tense": "^1.0.2",
     "conventional-changelog-angular": "^7.0.0",

packages/utils/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/text-formats';
 export { ExcludeNullFromPropertyTypes } from './lib/types';
 export { exists } from '@code-pushup/models';
 export { Diff, comparePairs, matchArrayItemsByKey } from './lib/diff';

packages/utils/src/lib/reports/formatting.ts

@@ -1,28 +1,21 @@
 import { AuditReport, Table } from '@code-pushup/models';
-import {
-  Hierarchy,
-  NEW_LINE,
-  SPACE,
-  headline,
-  lines,
-  link,
-  section,
-  tableMd,
-} from './md';
+import { Hierarchy, NEW_LINE, SPACE, md } from '../text-formats';
+
+const { headline, lines, link, section, table } = md;
 
 export function tableSection(
-  table: Table | undefined,
+  tableData: Table | undefined,
   options?:
     | {
         heading?: string;
         level?: Hierarchy | 0;
       }
     | string,
-) {
-  if (table == null) {
+): string {
+  if (tableData == null) {
     return '';
   }
-  if (table.rows.length === 0) {
+  if (tableData.rows.length === 0) {
     return '';
   }
   const { heading, level = 4 } =
@@ -32,7 +25,7 @@ export function tableSection(
   // if hierarchy is 0 do not apply heading styles
   const render = (h: string, l: Hierarchy | 0) =>
     l === 0 ? heading : headline(h, l);
-  return lines(heading ? render(heading, level) : false, tableMd(table));
+  return lines(heading ? render(heading, level) : false, table(tableData));
 }
 
 // @TODO extract `Pick<AuditReport, 'docsUrl' | 'description'>` to a reusable schema and type

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
+import { NEW_LINE } from '../text-formats/constants';
 import { metaDescription, tableSection } from './formatting';
-import { NEW_LINE } from './md';
 
 describe('tableSection', () => {
   it('should render complete section', () => {

packages/utils/src/lib/reports/generate-md-report-categoy-section.ts

@@ -1,18 +1,8 @@
 import { AuditReport, Table } from '@code-pushup/models';
 import { slugify } from '../formatting';
+import { SPACE, md } from '../text-formats';
 import { CATEGORIES_TITLE, reportOverviewTableHeaders } from './constants';
 import { metaDescription, tableSection } from './formatting';
-import {
-  SPACE,
-  h2,
-  h3,
-  indentation,
-  li,
-  lines,
-  link,
-  section,
-  style,
-} from './md';
 import { ScoredGroup, ScoredReport } from './types';
 import {
   countCategoryAudits,
@@ -23,6 +13,8 @@ import {
   scoreMarker,
 } from './utils';
 
+const { link, section, h2, lines, li, bold: boldMd, h3, indentation } = md;
+
 export function categoriesOverviewSection(
   report: Pick<ScoredReport, 'categories' | 'plugins'>,
 ): string {
@@ -33,7 +25,7 @@ export function categoriesOverviewSection(
       rows: categories.map(({ title, refs, score }) => ({
         // The heading "ID" is inferred from the heading text in Markdown.
         category: link(`#${slugify(title)}`, title),
-        score: `${scoreMarker(score)}${SPACE}${style(
+        score: `${scoreMarker(score)}${SPACE}${boldMd(
           formatReportScore(score),
         )}`,
         audits: countCategoryAudits(refs, plugins).toString(),
@@ -53,7 +45,7 @@ export function categoriesDetailsSection(
     const categoryTitle = h3(category.title);
     const categoryScore = `${scoreMarker(
       category.score,
-    )}${SPACE}Score:  ${style(formatReportScore(category.score))}`;
+    )}${SPACE}Score:  ${boldMd(formatReportScore(category.score))}`;
 
     const categoryMDItems = category.refs.map(ref => {
       // Add group details
@@ -97,7 +89,7 @@ export function categoryRef(
   );
   const marker = scoreMarker(score, 'square');
   return li(
-    `${marker}${SPACE}${auditTitleAsLink}${SPACE}(_${pluginTitle}_) - ${style(
+    `${marker}${SPACE}${auditTitleAsLink}${SPACE}(_${pluginTitle}_) - ${boldMd(
       (displayValue || value).toString(),
     )}`,
   );
@@ -120,7 +112,7 @@ export function categoryGroupItem(
       const marker = scoreMarker(auditScore, 'square');
       return indentation(
         li(
-          `${marker}${SPACE}${auditTitleLink} - ${style(
+          `${marker}${SPACE}${auditTitleLink} - ${boldMd(
             String(displayValue ?? value),
           )}`,
         ),

packages/utils/src/lib/reports/generate-md-report.ts

@@ -1,5 +1,6 @@
 import { AuditReport, Issue, Report, Table } from '@code-pushup/models';
 import { formatDate, formatDuration } from '../formatting';
+import { SPACE, html, md } from '../text-formats';
 import {
   FOOTER_PREFIX,
   README_LINK,
@@ -11,9 +12,6 @@ import {
   categoriesDetailsSection,
   categoriesOverviewSection,
 } from './generate-md-report-categoy-section';
-import { details } from './html/details';
-import { style as htmlFontStyle } from './html/font-style';
-import { SPACE, h1, h2, h3, lines, link, section, style } from './md';
 import { ScoredReport } from './types';
 import {
   formatReportScore,
@@ -22,12 +20,15 @@ import {
   severityMarker,
 } from './utils';
 
+const { h1, h2, h3, lines, link, section, code: codeMd } = md;
+const { bold: boldHtml, details } = html;
+
 export function auditDetailsAuditValue({
   score,
   value,
   displayValue,
 }: AuditReport) {
-  return `${scoreMarker(score, 'square')} ${htmlFontStyle(
+  return `${scoreMarker(score, 'square')} ${boldHtml(
     String(displayValue ?? value),
   )} (score: ${formatReportScore(score)})`;
 }
@@ -159,7 +160,7 @@ export function reportPluginMeta({ plugins }: Pick<Report, 'plugins'>): Table {
       }) => ({
         plugin: pluginTitle,
         audits: audits.length.toString(),
-        version: style(pluginVersion || '', ['c']),
+        version: codeMd(pluginVersion || ''),
         duration: formatDuration(pluginDuration),
       }),
     ),
@@ -205,7 +206,7 @@ export function reportMetaData({
     rows: [
       {
         commit: commitInfo,
-        version: style(version || '', ['c']),
+        version: codeMd(version || ''),
         duration: formatDuration(duration),
         plugins: plugins.length,
         categories: categories.length,

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

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { AuditReport, Issue } from '@code-pushup/models';
+import { NEW_LINE } from '../text-formats/constants';
 import { tableSection } from './formatting';
 import {
   aboutSection,
@@ -9,7 +10,6 @@ import {
   auditsSection,
   generateMdReport,
 } from './generate-md-report';
-import { NEW_LINE } from './md';
 import { ScoredReport } from './types';
 
 const baseScoredReport = {

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

@@ -5,10 +5,8 @@ import {
   TableColumnObject,
 } from '@code-pushup/models';
 import { pluralize, pluralizeToken } from '../formatting';
+import { html, md } from '../text-formats';
 import { objectToEntries } from '../transform';
-import { details } from './html/details';
-import { h1, h2, lines, link, style, tableMd } from './md';
-import { section } from './md/section';
 import { DiffOutcome } from './types';
 import {
   colorByScoreDiff,
@@ -18,6 +16,18 @@ import {
   scoreMarker,
 } from './utils';
 
+const {
+  h1,
+  h2,
+  lines,
+  link,
+  bold: boldMd,
+  italic: italicMd,
+  table,
+  section,
+} = md;
+const { details } = html;
+
 // to prevent exceeding Markdown comment character limit
 const MAX_ROWS = 100;
 
@@ -32,12 +42,12 @@ export function generateMdReportsDiff(diff: ReportsDiff): string {
 
 function formatDiffHeaderSection(diff: ReportsDiff): string {
   const outcomeTexts: Record<DiffOutcome, string> = {
-    positive: `🥳 Code PushUp report has ${style('improved')}`,
-    negative: `😟 Code PushUp report has ${style('regressed')}`,
-    mixed: `🤨 Code PushUp report has both ${style(
+    positive: `🥳 Code PushUp report has ${boldMd('improved')}`,
+    negative: `😟 Code PushUp report has ${boldMd('regressed')}`,
+    mixed: `🤨 Code PushUp report has both ${boldMd(
       'improvements and regressions',
     )}`,
-    unchanged: `😐 Code PushUp report is ${style('unchanged')}`,
+    unchanged: `😐 Code PushUp report is ${boldMd('unchanged')}`,
   };
   const outcome = mergeDiffOutcomes(
     changesToDiffOutcomes([
@@ -77,7 +87,7 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
   return lines(
     h2('🏷️ Categories'),
     categoriesCount > 0 &&
-      tableMd({
+      table({
         columns: hasChanges ? columns : columns.slice(0, 2),
         rows: [
           ...sortChanges(changed).map(category => ({
@@ -91,8 +101,8 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
           ...added.map(category => ({
             category: formatTitle(category),
             after: formatScoreWithColor(category.score),
-            before: style('n/a (\\*)', ['i']),
-            change: style('n/a (\\*)', ['i']),
+            before: italicMd('n/a (\\*)'),
+            change: italicMd('n/a (\\*)'),
           })),
           ...unchanged.map(category => ({
             category: formatTitle(category),
@@ -104,7 +114,7 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
           hasChanges ? row : { category: row.category, after: row.after },
         ),
       }),
-    added.length > 0 && section(style('(\\*) New category.', ['i'])),
+    added.length > 0 && section(italicMd('(\\*) New category.')),
   );
 }
 
@@ -147,7 +157,7 @@ function formatDiffAuditsSection(diff: ReportsDiff): string {
       rows: sortChanges(diff.audits.changed).map(audit => ({
         plugin: formatTitle(audit.plugin),
         audit: formatTitle(audit),
-        after: `${scoreMarker(audit.scores.after, 'square')} ${style(
+        after: `${scoreMarker(audit.scores.after, 'square')} ${boldMd(
           audit.displayValues.after || audit.values.after.toString(),
         )}`,
         before: `${scoreMarker(audit.scores.before, 'square')} ${
@@ -162,23 +172,22 @@ function formatDiffAuditsSection(diff: ReportsDiff): string {
 function formatGroupsOrAuditsDetails<T extends 'group' | 'audit'>(
   token: T,
   { changed, unchanged }: ReportsDiff[`${T}s`],
-  table: Table,
+  tableData: Table,
 ): string {
   return changed.length === 0
     ? summarizeUnchanged(token, { changed, unchanged })
     : details(
         summarizeDiffOutcomes(changesToDiffOutcomes(changed), token),
         lines(
-          tableMd({
-            ...table,
-            rows: table.rows.slice(0, MAX_ROWS) as never, // use never to avoid typing problem
+          table({
+            ...tableData,
+            rows: tableData.rows.slice(0, MAX_ROWS) as never, // use never to avoid typing problem
           }),
           changed.length > MAX_ROWS &&
-            style(
+            italicMd(
               `Only the ${MAX_ROWS} most affected ${pluralize(
                 token,
               )} are listed above for brevity.`,
-              ['i'],
             ),
           unchanged.length > 0 &&
             summarizeUnchanged(token, { changed, unchanged }),