fix(utils): ensure multiline logs during spinner are indented properly

Author: matejchalk

packages/utils/src/lib/formatting.ts

@@ -120,3 +120,14 @@ export function truncateDescription(text: string): string {
 export function truncateIssueMessage(text: string): string {
   return truncateText(text, MAX_ISSUE_MESSAGE_LENGTH);
 }
+
+export function transformLines(
+  text: string,
+  fn: (line: string) => string,
+): string {
+  return text.split(/\r?\n/).map(fn).join('\n');
+}
+
+export function indentLines(text: string, identation: number): string {
+  return transformLines(text, line => `${' '.repeat(identation)}${line}`);
+}

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

@@ -1,12 +1,15 @@
+import ansis from 'ansis';
 import { describe, expect, it } from 'vitest';
 import {
   formatBytes,
   formatDate,
   formatDuration,
+  indentLines,
   pluralize,
   pluralizeToken,
   roundDecimals,
   slugify,
+  transformLines,
   truncateText,
 } from './formatting.js';
 
@@ -181,3 +184,48 @@ describe('truncateText', () => {
     );
   });
 });
+
+describe('transformLines', () => {
+  it('should apply custom transformation to each line', () => {
+    let count = 0;
+    expect(
+      transformLines(
+        `export function greet(name = 'World') {\n  console.log('Hello, ' + name + '!');\n}\n`,
+        line => `${ansis.gray(`${++count} | `)}${line}`,
+      ),
+    ).toBe(
+      `
+${ansis.gray('1 | ')}export function greet(name = 'World') {
+${ansis.gray('2 | ')}  console.log('Hello, ' + name + '!');
+${ansis.gray('3 | ')}}
+${ansis.gray('4 | ')}`.trimStart(),
+    );
+  });
+
+  it('should support CRLF line endings', () => {
+    expect(
+      transformLines(
+        'ESLint v9.16.0\r\n\r\nAll files pass linting.\r\n',
+        line => `> ${line}`,
+      ),
+    ).toBe(
+      `
+> ESLint v9.16.0
+> 
+> All files pass linting.
+> `.trimStart(),
+    );
+  });
+});
+
+describe('indentLines', () => {
+  it('should indent each line by given number of spaces', () => {
+    expect(indentLines('ESLint v9.16.0\n\nAll files pass linting.\n', 2)).toBe(
+      `
+  ESLint v9.16.0
+  
+  All files pass linting.
+  `.slice(1), // ignore first line break
+    );
+  });
+});

packages/utils/src/lib/logger.ts

@@ -3,7 +3,7 @@ import os from 'node:os';
 import ora, { type Ora } from 'ora';
 import { dateToUnixTimestamp } from './dates.js';
 import { isEnvVarEnabled } from './env.js';
-import { formatDuration } from './formatting.js';
+import { formatDuration, indentLines, transformLines } from './formatting.js';
 import { settlePromise } from './promises.js';
 
 type GroupColor = Extract<AnsiColors, 'cyan' | 'magenta'>;
@@ -261,7 +261,7 @@ export class Logger {
 
     this.#activeSpinner = undefined;
     this.#activeSpinnerLogs.forEach(message => {
-      this.#log(`  ${message}`);
+      this.#log(indentLines(message, 2));
     });
     this.#activeSpinnerLogs = [];
     process.removeListener('SIGINT', this.#sigintListener);
@@ -276,7 +276,7 @@ export class Logger {
       if (this.#activeSpinner.isSpinning) {
         this.#activeSpinnerLogs.push(this.#format(message, color));
       } else {
-        console.log(this.#format(`  ${message}`, color));
+        console.log(this.#format(indentLines(message, 2), color));
       }
     } else {
       console.log(this.#format(message, color));
@@ -288,15 +288,11 @@ export class Logger {
     if (!this.#groupColor || this.#activeSpinner?.isSpinning) {
       return this.#colorize(message, color);
     }
-    return message
-      .split(/\r?\n/)
-      .map(line =>
-        [
-          this.#colorize('│', this.#groupColor),
-          this.#colorize(line, color),
-        ].join(' '),
-      )
-      .join('\n');
+    return transformLines(
+      message,
+      line =>
+        `${this.#colorize('│', this.#groupColor)} ${this.#colorize(line, color)}`,
+    );
   }
 
   #colorize(text: string, color: AnsiColors | undefined): string {