fix: use string-width for emoji-aware column alignment in --list and log output

Author: Benoit COUETIL

bun.lock

@@ -45,6 +45,7 @@
     "re2js": "1.x.x",
     "semver": "7.x.x",
     "split2": "4.x.x",
+    "string-width": "^8.2.0",
     "terminal-link": "5.x.x",
     "yargs": "18.x"
   },

package.json

@@ -137,7 +137,7 @@ export class Commander {
                 let prefix = "";
                 if (argv.childPipelineDepth > 0) prefix = `[${argv.variable.GCL_TRIGGERER}] -> `;
 
-                const namePad = name.padEnd(jobNamePad);
+                const namePad = Utils.padEndVisual(name, jobNamePad);
                 writeStreams.stdout(chalk`{black.bgGreenBright  PASS }${renderDuration(prettyDuration)} {blueBright ${prefix}${namePad}}`);
                 if (coveragePercent) {
                     writeStreams.stdout(chalk` ${coveragePercent}% {grey coverage}`);
@@ -149,7 +149,7 @@ export class Commander {
         if (preScripts.warned.length !== 0) {
             preScripts.warned.sort((a, b) => stages.indexOf(a.stage) - stages.indexOf(b.stage));
             for (const {name, prettyDuration} of preScripts.warned) {
-                const namePad = name.padEnd(jobNamePad);
+                const namePad = Utils.padEndVisual(name, jobNamePad);
                 const safeName = Utils.safeDockerString(name);
                 writeStreams.stdout(chalk`{black.bgYellowBright  WARN }${renderDuration(prettyDuration)} {blueBright ${namePad}}  pre_script\n`);
                 const outputLog = await fs.readFile(`${cwd}/${stateDir}/output/${safeName}.log`, "utf8");
@@ -163,15 +163,15 @@ export class Commander {
         if (afterScripts.warned.length !== 0) {
             afterScripts.warned.sort((a, b) => stages.indexOf(a.stage) - stages.indexOf(b.stage));
             afterScripts.warned.forEach(({name, prettyDuration}) => {
-                const namePad = name.padEnd(jobNamePad);
+                const namePad = Utils.padEndVisual(name, jobNamePad);
                 writeStreams.stdout(chalk`{black.bgYellowBright  WARN }${renderDuration(prettyDuration)} {blueBright ${namePad}}  after_script\n`);
             });
         }
 
         if (preScripts.failed.length !== 0) {
             preScripts.failed.sort((a, b) => stages.indexOf(a.stage) - stages.indexOf(b.stage));
             for (const {name, prettyDuration} of preScripts.failed) {
-                const namePad = name.padEnd(jobNamePad);
+                const namePad = Utils.padEndVisual(name, jobNamePad);
                 const safeName = Utils.safeDockerString(name);
                 writeStreams.stdout(chalk`{black.bgRed  FAIL }${renderDuration(prettyDuration)} {blueBright ${namePad}}\n`);
                 const outputLog = await fs.readFile(`${cwd}/${stateDir}/output/${safeName}.log`, "utf8");
@@ -214,7 +214,7 @@ export class Commander {
 
         let descriptionPadEnd = 11;
         if (hasDescriptions) {
-            jobs.forEach(j => descriptionPadEnd = Math.max(j.description.length, descriptionPadEnd));
+            jobs.forEach(j => descriptionPadEnd = Math.max(Utils.visualWidth(j.description), descriptionPadEnd));
         }
 
         const jobNamePad = parser.jobNamePad;
@@ -224,19 +224,19 @@ export class Commander {
         }
 
         if (hasDescriptions) {
-            writeStreams.stdout(chalk`{grey ${"name".padEnd(jobNamePad)}  ${"description".padEnd(descriptionPadEnd)}}  `);
+            writeStreams.stdout(chalk`{grey ${Utils.padEndVisual("name", jobNamePad)}  ${Utils.padEndVisual("description", descriptionPadEnd)}}  `);
         } else {
-            writeStreams.stdout(chalk`{grey ${"name".padEnd(jobNamePad)}}  `);
+            writeStreams.stdout(chalk`{grey ${Utils.padEndVisual("name", jobNamePad)}}  `);
         }
         writeStreams.stdout(chalk`{grey ${"stage".padEnd(stagePadEnd)}  ${"when".padEnd(whenPadEnd)}}  `);
         writeStreams.stdout(chalk`{grey allow_failure  needs}\n`);
 
         const renderLine = (job: Job) => {
             const needs = job.needs?.filter(n => !n.project && !n.pipeline).map(n => n.job);
             const allowFailure = job.allowFailure ? "true " : "false ";
-            let jobLine = chalk`{blueBright ${job.name.padEnd(jobNamePad)}}  `;
+            let jobLine = chalk`{blueBright ${Utils.padEndVisual(job.name, jobNamePad)}}  `;
             if (hasDescriptions) {
-                jobLine += `${job.description.padEnd(descriptionPadEnd)}  `;
+                jobLine += `${Utils.padEndVisual(job.description, descriptionPadEnd)}  `;
             }
             jobLine += chalk`{yellow ${job.stage.padEnd(stagePadEnd)}}  ${job.when.padEnd(whenPadEnd)}  ${allowFailure.padEnd(11)}`;
             if (needs) {

src/commander.ts

@@ -448,7 +448,7 @@ If you know what you're doing and would like to suppress this warning, use one o
             "";
 
         // [16:33:19 1.37 min] my-job     > hello world
-        return chalk`${timestampPrefix}{blueBright ${prefix}${this.name.padEnd(this.jobNamePad)}}`;
+        return chalk`${timestampPrefix}{blueBright ${prefix}${Utils.padEndVisual(this.name, this.jobNamePad)}}`;
     }
 
     get safeJobName () {

src/job.ts

@@ -13,6 +13,7 @@ import * as parallel from "./parallel.js";
 import {GitData} from "./git-data.js";
 import {ParserIncludes} from "./parser-includes.js";
 import {Producers} from "./producers.js";
+import stringWidth from "string-width";
 import {VariablesFromFiles} from "./variables-from-files.js";
 import {Argv} from "./argv.js";
 import {WriteStreams} from "./write-streams.js";
@@ -206,10 +207,10 @@ export class Parser {
                 if (this.argv.needs && this.argv.job.length > 0) {
                     const found = this.jobs.find(j => j.baseName === job);
                     if (found?.needs) {
-                        jobNeedsLength = found.needs.map(f => f.job.length);
+                        jobNeedsLength = found.needs.map(f => stringWidth(f.job));
                     }
                 }
-                const jobLength = typeof job == "string" ? job.length : job.name.length;
+                const jobLength = typeof job == "string" ? stringWidth(job) : stringWidth(job.name);
                 this._jobNamePad = Math.max(jobLength, this._jobNamePad ?? 0, ...jobNeedsLength);
             });
             if (this.argv.maxJobNamePadding !== null) {

src/parser.ts

@@ -15,6 +15,7 @@ import micromatch from "micromatch";
 import {AxiosRequestConfig} from "axios";
 import path from "path";
 import {Argv} from "./argv.js";
+import stringWidth from "string-width";
 
 type RuleResultOpt = {
     argv: Argv;
@@ -29,6 +30,16 @@ type ExpandWith = {
 };
 
 export class Utils {
+    static visualWidth (str: string): number {
+        return stringWidth(str);
+    }
+
+    static padEndVisual (str: string, targetWidth: number): string {
+        const width = stringWidth(str);
+        if (width >= targetWidth) return str;
+        return str + " ".repeat(targetWidth - width);
+    }
+
     static bashMulti (scripts: string[], cwd = process.cwd()): Promise<{stdout: string; stderr: string; exitCode: number}> {
         return execa(scripts.join(" && \\"), {shell: "bash", cwd});
     }