fix: add size reporting scripts

Author: kazupon

package.json

@@ -32,6 +32,7 @@
     "build:type": "./scripts/build.sh",
     "build:typed": "pnpm build core-base vue-i18n-core --withTypes",
     "size": "tsx ./scripts/build.ts --size && tsx ./scripts/size.ts",
+    "size:report": "tsx ./scripts/report-size.ts",
     "clean": "run-p clean:*",
     "clean:coverage": "rm -rf ./coverage",
     "clean:dist": "rm -rf ./dist ./packages/**/dist ./docs/.vitepress/dist",
@@ -113,6 +114,7 @@
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
     "listhen": "^1.7.2",
+    "markdown-table": "^3.0.4",
     "mitata": "^1.0.20",
     "npm-run-all2": "^7.0.0",
     "opener": "^1.5.2",

pnpm-lock.yaml

@@ -0,0 +1,110 @@
+import { markdownTable } from 'markdown-table'
+import { existsSync, promises as fs } from 'node:fs'
+import path from 'node:path'
+import { displaySize } from './utils'
+
+import type { BundleReport } from './utils'
+
+type UsageReport = Record<string, BundleReport>
+
+const currDir = path.resolve('temp/size')
+const prevDir = path.resolve('temp/size-prev')
+const sizeHeaders = ['Size', 'Gzip', 'Brotli']
+
+async function rednerFiles(output: string) {
+  const filterFiles = (files: string[]) =>
+    files.filter(file => file[0] !== '_' && !file.endsWith('.txt'))
+
+  const curr = filterFiles(await fs.readdir(currDir))
+  const prev = existsSync(prevDir) ? filterFiles(await fs.readdir(prevDir)) : []
+  const fileList = new Set([...curr, ...prev])
+
+  const rows = []
+  for (const file of fileList) {
+    const currPath = path.resolve(currDir, file)
+    const prevPath = path.resolve(prevDir, file)
+
+    const curr = await importJSON(currPath)
+    const prev = await importJSON(prevPath)
+    const fileName = curr?.file || prev?.file || ''
+
+    if (!curr) {
+      rows.push([`~~${fileName}~~`])
+    } else {
+      rows.push([
+        fileName,
+        `${displaySize(curr.size)}${getDiff(curr.size, prev?.size)}`,
+        `${displaySize(curr.gzip)}${getDiff(curr.gzip, prev?.gzip)}`,
+        `${displaySize(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`
+      ])
+    }
+  }
+
+  output += '### Bundles\n\n'
+  output += markdownTable([['File', ...sizeHeaders], ...rows])
+  output += '\n\n'
+
+  return output
+}
+
+async function importJSON(filePath: string) {
+  if (!existsSync(filePath)) {
+    return undefined
+  }
+  return (await import(filePath, { assert: { type: 'json' } })).default
+}
+
+function getDiff(curr: number, prev: number) {
+  if (prev === undefined) {
+    return ''
+  }
+  const diff = curr - prev
+  if (diff === 0) {
+    return ''
+  }
+  const sign = diff > 0 ? '+' : ''
+  return ` (**${sign}${displaySize(diff)}**)`
+}
+
+async function renderUsages(output: string) {
+  const curr = (await importJSON(
+    path.resolve(currDir, '_usages.json')
+  )) as UsageReport
+  const prev = (await importJSON(
+    path.resolve(prevDir, '_usages.json')
+  )) as UsageReport
+
+  output += '\n### Usages\n\n'
+
+  const data = Object.values(curr)
+    .map(usage => {
+      const prevUsage = prev?.[usage.name]
+      const diffSize = getDiff(usage.size, prevUsage?.size)
+      const diffGzipped = getDiff(usage.gzip, prevUsage?.gzip)
+      const diffBrotli = getDiff(usage.brotli, prevUsage?.brotli)
+
+      return [
+        usage.name,
+        `${displaySize(usage.size)}${diffSize}`,
+        `${displaySize(usage.gzip)}${diffGzipped}`,
+        `${displaySize(usage.brotli)}${diffBrotli}`
+      ]
+    })
+    .filter(usage => !!usage)
+
+  output += `${markdownTable([['Name', ...sizeHeaders], ...data])}\n\n`
+
+  return output
+}
+
+async function main() {
+  let output = '## Size Report\n\n'
+  output = await rednerFiles(output)
+  output = await renderUsages(output)
+  process.stdout.write(output)
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})

scripts/report-size.ts

@@ -5,16 +5,11 @@ import { fileURLToPath } from 'node:url'
 import pc from 'picocolors'
 import { displaySize, sizeTargets } from './utils'
 
+import type { BundleReport } from './utils'
+
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
 const sizeDir = path.resolve(__dirname, '../temp/size')
 
-type BundleReport = {
-  name: string
-  size: number
-  gzip: number
-  brotli: number
-}
-
 async function main() {
   console.log('📏 Checking bundle sizes ...')
   console.log()

scripts/size.ts

@@ -2,6 +2,13 @@ import { promises as fs } from 'node:fs'
 import { dirname, resolve } from 'node:path'
 import pc from 'picocolors'
 
+export type BundleReport = {
+  name: string
+  size: number
+  gzip: number
+  brotli: number
+}
+
 export const targets = async () => {
   const packages = await fs.readdir('packages')
   const files = await Promise.all(