render table in HTML instead of markdown for nicer look

.github/actions/metrics-report/src/main.mjs

@@ -29,7 +29,7 @@ async function run() {
     const commentBody = getBodyText([
         ['### Metrics report'],
         [`on commit ${pullRequest.head?.sha} at \`${new Date().toISOString()}\``],
-        getBundleSizeTable(localBundleSizes, baseBundleSizes),
+        [getBundleSizeTable(localBundleSizes, baseBundleSizes)],
     ])
 
     await setComment(commentBody)
@@ -98,10 +98,16 @@ function getBundleSizeTable(localBundleSizes, baseBundleSizes) {
         baseBundleSizes.map((bundleSize) => [bundleSize.bundleSize.label, bundleSize]),
     )
 
-    return [
-        '| Export | Size original | Size minified | Size minified and Brotli compressed |',
-        '| --- | :---: | :---: | :---: |',
-        ...localBundleSizes.flatMap(({ bundleSize, singleExportSizes }) => {
+    return getTableHtml({
+        headers: [
+            'Export',
+            'Size original',
+            'Size minified',
+            'Size minified and Brotli compressed',
+        ],
+        columnAlignments: ['left', 'center', 'center', 'center'],
+        columnWidths: ['30%', '23.5%', '23.5%', '23.5%'],
+        rows: localBundleSizes.flatMap(({ bundleSize, singleExportSizes }) => {
             const baseBundleSize = baseBundleSizesMap.get(bundleSize.label)
 
             const mainBundleRow = getBundleSizeRow(bundleSize, baseBundleSize?.bundleSize)
@@ -123,9 +129,9 @@ function getBundleSizeTable(localBundleSizes, baseBundleSizes) {
                 ]
             }
 
-            return mainBundleRow
+            return [mainBundleRow]
         }),
-    ]
+    })
 }
 
 /**
@@ -143,7 +149,7 @@ function getBundleSizeRow(bundleSize, baseBundleSize, isIndented) {
             bundleSize.sizeBrotliCompressed,
             baseBundleSize?.sizeBrotliCompressed,
         ),
-    ].join(' | ')
+    ]
 }
 
 /**
@@ -178,3 +184,115 @@ function getSizeDifference(size, baseSize) {
 
     return percentageString + (isZero ? '' : isPositive ? ' 🔴' : ' 🟢')
 }
+
+/**
+ * @typedef {object} TableData
+ * @property {('left' | 'center' | 'right' | undefined)[]=} columnAlignments
+ * @property {(string | undefined)[]=} columnWidths
+ * @property {string[]} headers
+ * @property {string[][]} rows
+ */
+
+/**
+ * @param {TableData} param0
+ */
+function getTableHtml({ columnAlignments = [], columnWidths = [], headers, rows }) {
+    return getHtml([
+        {
+            tag: 'table',
+            children: [
+                {
+                    tag: 'thead',
+                    children: [
+                        {
+                            tag: 'tr',
+                            children: headers.map((header, headerIndex) => ({
+                                tag: 'th',
+                                attributes: {
+                                    width: columnWidths[headerIndex],
+                                    align: columnAlignments[headerIndex],
+                                },
+                                children: [header],
+                            })),
+                        },
+                    ],
+                },
+                {
+                    tag: 'tbody',
+                    children: rows.map((row) => ({
+                        tag: 'tr',
+                        children: row.map((cell, cellIndex) => ({
+                            tag: 'td',
+                            attributes: {
+                                align: columnAlignments[cellIndex],
+                            },
+                            children: [cell],
+                        })),
+                    })),
+                },
+            ],
+        },
+    ])
+}
+
+/**
+ * @typedef {object} HtmlElement
+ * @property {string} tag
+ * @property {Record<string, string | undefined>=} attributes
+ * @property {(HtmlElement | string)[]=} children
+ */
+
+/**
+ * @param {(HtmlElement | string)[]} elements
+ */
+function getHtml(elements) {
+    return indent(getHtmlLinesToIndent(elements))
+}
+
+/**
+ * @typedef {(string | LinesToIndent)[]} LinesToIndent
+ */
+
+/**
+ * @param {LinesToIndent} lines
+ * @param {number=} level
+ * @returns {string}
+ */
+function indent(lines, level = 0) {
+    const indentation = ' '.repeat(level * 4)
+    return lines
+        .map((element) => {
+            if (typeof element === 'string') {
+                return indentation + element
+            }
+
+            return indent(element, level + 1)
+        })
+        .join('\n')
+}
+
+/**
+ * @param {(HtmlElement | string)[]} elements
+ * @returns {LinesToIndent}
+ */
+function getHtmlLinesToIndent(elements) {
+    return elements.flatMap((element) => {
+        if (typeof element === 'string') {
+            return element
+        }
+
+        const attributes = Object.entries(element.attributes ?? {})
+            .filter(([, value]) => value !== undefined)
+            .map(([key, value]) => `${key}="${value}"`)
+            .join(' ')
+        const openingTag = `<${element.tag}${attributes ? ' ' + attributes : ''}>`
+        const closingTag = `</${element.tag}>`
+        const innerHtmlLines = element.children ? getHtmlLinesToIndent(element.children) : []
+
+        if (innerHtmlLines.length === 0) {
+            return [openingTag, closingTag]
+        }
+
+        return [openingTag, innerHtmlLines, closingTag]
+    })
+}