perf(webfont): improve build performance

packages/icons-webfont/.build/build-config.mjs

@@ -0,0 +1,7 @@
+export const strokes = {
+  200: 1,
+  300: 1.5,
+  400: 2,
+}
+
+export const fontHeight = 1000

packages/icons-webfont/.build/build-outline.mjs

@@ -1,18 +1,16 @@
 import outlineStroke from 'svg-outline-stroke'
 import { asyncForEach, getAllIcons, getCompileOptions, getPackageDir, HOME_DIR } from '../../../.build/helpers.mjs'
+import { strokes, fontHeight } from './build-config.mjs'
 import fs from 'fs'
 import { resolve, basename } from 'path'
 import crypto from 'crypto'
 import { glob } from 'glob'
-import { execSync } from 'child_process'
+import { execa } from 'execa'
 
 const DIR = getPackageDir('icons-webfont')
 
-const strokes = {
-  200: 1,
-  300: 1.5,
-  400: 2,
-}
+const args = process.argv.slice(2)
+const debug = args.some(arg => arg === '--debug')
 
 const buildOutline = async () => {
   let filesList = {}
@@ -24,16 +22,24 @@ const buildOutline = async () => {
     const stroke = strokes[strokeName]
 
     await asyncForEach(Object.entries(icons), async ([type, icons]) => {
-      fs.mkdirSync(resolve(DIR, `icons-outlined/${strokeName}/${type}`), { recursive: true })
+      fs.mkdirSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/new`), { recursive: true })
       filesList[type] = []
 
-      await asyncForEach(icons, async function ({ name, content, unicode }) {
-        console.log(type, name);
+      console.log('Start generating strokes for:', strokeName, type)
+
+      const iconsCount = icons.length;
+      const iconsCountChars = iconsCount.toString().length;
+
+      await asyncForEach(icons, async function ({ name, unicode, content }, i) {
+        if (!debug) {
+          process.stdout.clearLine()
+          process.stdout.write(`\r[${(i + 1).toString().padStart(iconsCountChars, ' ')} / ${iconsCount}] ${name}`)
+        }
 
         if (compileOptions.includeIcons.length === 0 || compileOptions.includeIcons.indexOf(name) >= 0) {
 
           if (unicode) {
-            console.log(`Stroke ${strokeName} for:`, name, unicode)
+            if (debug) console.log(`Stroke ${strokeName} for:`, name, unicode)
 
             let filename = `${name}.svg`
             if (unicode) {
@@ -43,8 +49,8 @@ const buildOutline = async () => {
             filesList[type].push(filename)
 
             content = content
-              .replace('width="24"', 'width="1000"')
-              .replace('height="24"', 'height="1000"')
+              .replace('width="24"', `width="${fontHeight}"`)
+              .replace('height="24"', `height="${fontHeight}"`)
 
             content = content
               .replace('stroke-width="2"', `stroke-width="${stroke}"`)
@@ -64,11 +70,16 @@ const buildOutline = async () => {
 
               // Check hash
               if (crypto.createHash('sha1').update(cachedContent).digest("hex") === cachedHash) {
-                console.log('Cached stroke for:', name, unicode)
+                if (debug) console.log('Use cached (optimized) stroke for:', name, unicode)
                 return true;
               }
             }
 
+            if (unicode && fs.existsSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/new/${cachedFilename}`))) {
+              if (debug) console.log('Use cached (not optimized) stroke for:', name, unicode)
+              return true;
+            }
+
             await outlineStroke(content, {
               optCurve: true,
               steps: 4,
@@ -78,52 +89,77 @@ const buildOutline = async () => {
               color: 'black'
             }).then(outlined => {
               // Save file
-              fs.writeFileSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/${filename}`), outlined, 'utf-8')
-
-              // Fix outline
-              execSync(`fontforge -lang=py -script .build/fix-outline.py icons-outlined/${strokeName}/${type}/${filename}`).toString()
-              execSync(`svgo icons-outlined/${strokeName}/${type}/${filename}`).toString()
-
-              // Add hash
-              const fixedFileContent = fs
-                .readFileSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/${filename}`), 'utf-8')
-                .replace(/\n/g, ' ')
-                .trim(),
-                hashString = `<!--!cache:${crypto.createHash('sha1').update(fixedFileContent).digest("hex")}-->`
-
-              // Save file
-              fs.writeFileSync(
-                resolve(DIR, `icons-outlined/${strokeName}/${type}/${filename}`),
-                fixedFileContent + hashString,
-                'utf-8'
-              )
+              fs.writeFileSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/new/${filename}`), outlined, 'utf-8')
+              if (debug) console.log('Created unoptimized stroke for:', name, unicode)
             }).catch(error => console.log(error))
           }
         }
       })
-    })
 
-    // Remove old files
-    await asyncForEach(Object.entries(icons), async ([type, icons]) => {
+      if (!debug) process.stdout.write('\n')
+
+      console.log('Finish generating strokes for:', strokeName, type)
+
+      // Process for new files
+      // Fix outline
+      if (
+        fs.existsSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/new`)) &&
+        (await glob(resolve(DIR, `icons-outlined/${strokeName}/${type}/new/*.svg`))).length > 0
+      ) {
+        console.log('Fix outline using FontForge...')
+        await execa('fontforge', ['-quiet', '-lang=py', '-script', '.build/fix-outline.py', resolve(DIR, `icons-outlined/${strokeName}/${type}/new`)], {
+          stdout: debug ? process.stdout : null,
+          stderr: process.stderr,
+        });
+        console.log('Optimize SVG files using svgo...')
+        await execa('pnpm', ['dlx', 'svgo', resolve(DIR, `icons-outlined/${strokeName}/${type}/new`)], {
+          stdout: debug ? process.stdout : null,
+          stderr: process.stderr,
+        });
+        // Add hash
+        console.log('Add hash to SVG files...')
+        await asyncForEach((await glob(resolve(DIR, `icons-outlined/${strokeName}/${type}/new/*.svg`))), async (dir) => {
+          const filename = basename(dir)
+          const fixedFileContent = fs
+            .readFileSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/new/${filename}`), 'utf-8')
+            .replace(/\n/g, ' ')
+            .trim();
+          const hashString = `<!--!cache:${crypto.createHash('sha1').update(fixedFileContent).digest("hex")}-->`
+          // Save file
+          fs.writeFileSync(
+            resolve(DIR, `icons-outlined/${strokeName}/${type}/${filename}`),
+            fixedFileContent + hashString,
+            'utf-8'
+          )
+        })
+      }
+
+      // Remove unoptimized files directory
+      console.log('Remove unoptimized files directory...')
+      await execa('rm', ['-rf', resolve(DIR, `icons-outlined/${strokeName}/${type}/new`)]);
+
+      // Remove old files
+      console.log('Remove old files...')
       const existedFiles = (await glob(resolve(DIR, `icons-outlined/${strokeName}/${type}/*.svg`))).map(file => basename(file))
       existedFiles.forEach(file => {
         if (filesList[type].indexOf(file) === -1) {
           console.log('Remove:', file)
           fs.unlinkSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/${file}`))
         }
       })
-    })
 
-    // Copy icons from firs to all directory
-    await asyncForEach(Object.entries(icons), async ([type, icons]) => {
+      // Copy icons from firs to all directory
+      console.log('Copy icons from firs to all directory...')
       fs.mkdirSync(resolve(DIR, `icons-outlined/${strokeName}/all`), { recursive: true })
 
       await asyncForEach(icons, async function ({ name, unicode }) {
         const iconName = `u${unicode.toUpperCase()}-${name}`
 
+        if (debug) console.log(`Check ${iconName} for copy`)
+
         if (fs.existsSync(resolve(DIR, `icons-outlined/${strokeName}/${type}/${iconName}.svg`))) {
           // Copy file
-          console.log(`Copy ${iconName} to all directory`)
+          if (debug) console.log(`Copy ${iconName} to all directory`)
 
           fs.copyFileSync(
             resolve(DIR, `icons-outlined/${strokeName}/${type}/${iconName}.svg`),

packages/icons-webfont/.build/build-webfont.mjs

@@ -2,17 +2,11 @@ import { webfont } from "webfont";
 import * as fs from 'fs'
 import template from 'lodash.template'
 import { getPackageDir, getPackageJson, getAliases, types, asyncForEach, toPascalCase } from '../../../.build/helpers.mjs'
+import { strokes, fontHeight } from './build-config.mjs'
 
 const formats = ['ttf', 'woff', 'woff2']
 const p = getPackageJson()
 const DIR = getPackageDir('icons-webfont')
-const fontHeight = 1000
-
-const strokes = {
-  200: 1,
-  300: 1.5,
-  400: 2,
-}
 
 const aliases = getAliases(true)
 
@@ -33,7 +27,7 @@ const getAlliasesFlat = () => {
 }
 
 for (const strokeName in strokes) {
-  asyncForEach(types, async type => {
+  await asyncForEach(types, async type => {
     console.log(`Building ${strokeName} webfont for ${type} icons`)
 
     await webfont({

packages/icons-webfont/.build/build.mjs

@@ -0,0 +1,24 @@
+import { execa } from 'execa';
+
+const args = process.argv.slice(2)
+
+await execa('pnpm', ['run', 'copy'], {
+  stdout: process.stdout,
+  stderr: process.stderr,
+});
+await execa('pnpm', ['run', 'build:prepare'], {
+  stdout: process.stdout,
+  stderr: process.stderr,
+});
+await execa('pnpm', ['run', 'build:outline', ...args], {
+  stdout: process.stdout,
+  stderr: process.stderr,
+});
+await execa('pnpm', ['run', 'build:webfont'], {
+  stdout: process.stdout,
+  stderr: process.stderr,
+});
+await execa('pnpm', ['run', 'build:css'], {
+  stdout: process.stdout,
+  stderr: process.stderr,
+});

packages/icons-webfont/.build/fix-outline.py

@@ -1,17 +1,21 @@
 import os
+import sys
 import fontforge
 
-file = sys.argv[1]
+directory = sys.argv[1]
 
-font = fontforge.font()
-print (f"Correcting outline for {file}")
-glyph = font.createChar(123, file)
-glyph.importOutlines("./" + file)
-glyph.round()
-glyph.simplify()
-glyph.simplify()
-glyph.correctDirection()
-glyph.export("./" + file)
-glyph.clear()
+for filename in os.listdir(directory):
+  if filename.endswith(".svg"):
+    file_path = os.path.join(directory, filename)
+    font = fontforge.font()
+    print(f"Correcting outline for {file_path}")
+    glyph = font.createChar(123, file_path)
+    glyph.importOutlines(file_path)
+    glyph.round()
+    glyph.simplify()
+    glyph.simplify()
+    glyph.correctDirection()
+    glyph.export(file_path)
+    glyph.clear()
 
 print ("Finished fixing svg outline directions!")

packages/icons-webfont/package.json

@@ -16,7 +16,7 @@
     "directory": "packages/icons-webfont"
   },
   "scripts": {
-    "build": "pnpm run copy && pnpm run build:prepare && pnpm run build:outline && pnpm run build:webfont && pnpm run build:css",
+    "build": "node .build/build.mjs",
     "build:prepare": "mkdir -p icons-outlined dist && rm -fdr dist/*",
     "build:outline": "node .build/build-outline.mjs",
     "build:webfont": "rm -fd dist/fonts/* && node .build/build-webfont.mjs",
@@ -46,6 +46,7 @@
     "web"
   ],
   "devDependencies": {
+    "execa": "^9.5.2",
     "sass": "^1.71.1",
     "webfont": "^11.2.26"
   }