feat(core+prompts): Refactoring of the append renderer

Author: MacFJA

packages/core/package.json

@@ -50,6 +50,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@macfja/ansi": "^1.0.0",
     "picocolors": "^1.0.0",
     "sisteransi": "^1.0.5"
   },

packages/core/src/index.ts

@@ -9,5 +9,5 @@ export { default as Prompt } from './prompts/prompt.js';
 export { default as SelectPrompt } from './prompts/select.js';
 export { default as SelectKeyPrompt } from './prompts/select-key.js';
 export { default as TextPrompt } from './prompts/text.js';
-export { block, isCancel, getColumns, frameRenderer } from './utils/index.js';
+export { block, isCancel, getColumns, frameRenderer, appendRenderer } from './utils/index.js';
 export { updateSettings, settings } from './utils/settings.js';

packages/core/src/utils/display.ts

@@ -1,4 +1,5 @@
 import type { Writable } from 'node:stream';
+import { stripAnsi, wrap as wrapAnsi } from '@macfja/ansi';
 import { cursor, erase } from 'sisteransi';
 import wrap from 'wrap-ansi';
 import { getColumns } from './index.js';
@@ -47,9 +48,47 @@ function renderFrame(newFrame: string, prevFrame: string, output: Writable): str
 	return frame;
 }
 
+/**
+ * Create a function to render a frame base on the previous call (don't redraw lines that didn't change between 2 calls).
+ *
+ * @param output The Writable where to render
+ * @return The rendering function to call with the new frame to display
+ */
 export function frameRenderer(output: Writable): (frame: string) => void {
 	let prevFrame = '';
 	return (frame: string) => {
 		prevFrame = renderFrame(frame, prevFrame, output);
 	};
 }
+
+/**
+ * Create a function to render the next part of a sentence.
+ * It will automatically wrap (without, if possible, breaking word).
+ *
+ * @param output The Writable where to render
+ * @param joiner The prefix to put in front of each lines
+ * @param removeLeadingSpace if `true` leading space of new lines will be removed
+ * @return The rendering function to call with the next part of the content
+ */
+export function appendRenderer(
+	output: Writable,
+	joiner: string,
+	removeLeadingSpace = true
+): (next: string) => void {
+	let lastLine = joiner;
+	const joinerLength = stripAnsi(joiner).length + 1;
+	const newLineRE = removeLeadingSpace ? /\n */g : /\n/g;
+
+	return (next: string) => {
+		const width = getColumns(output) - joinerLength;
+		const lines =
+			lastLine.substring(0, joiner.length) +
+			wrapAnsi(`${lastLine.substring(joiner.length)}${next}`, width).replace(
+				newLineRE,
+				`\n${joiner}`
+			);
+		output?.write(cursor.move(-999, 0) + erase.lines(1));
+		output?.write(lines);
+		lastLine = lines.substring(Math.max(0, lines.lastIndexOf('\n') + 1));
+	};
+}

packages/prompts/src/stream.ts

@@ -1,37 +1,21 @@
-import { stripVTControlCharacters as strip } from 'node:util';
+import { appendRenderer } from '@clack/core';
 import color from 'picocolors';
 import { S_BAR, S_ERROR, S_INFO, S_STEP_SUBMIT, S_SUCCESS, S_WARN } from './common.js';
 import type { LogMessageOptions } from './log.js';
 
 const prefix = `${color.gray(S_BAR)}  `;
 
-// TODO (43081j): this currently doesn't support custom `output` writables
-// because we rely on `columns` existing (i.e. `process.stdout.columns).
-//
-// If we want to support `output` being passed in, we will need to use
-// a condition like `if (output insance Writable)` to check if it has columns
 export const stream = {
 	message: async (
 		iterable: Iterable<string> | AsyncIterable<string>,
-		{ symbol = color.gray(S_BAR) }: LogMessageOptions = {}
+		{ symbol = color.gray(S_BAR), output = process.stdout }: LogMessageOptions = {}
 	) => {
-		process.stdout.write(`${color.gray(S_BAR)}\n${symbol}  `);
-		let lineWidth = 3;
-		for await (let chunk of iterable) {
-			chunk = chunk.replace(/\n/g, `\n${prefix}`);
-			if (chunk.includes('\n')) {
-				lineWidth = 3 + strip(chunk.slice(chunk.lastIndexOf('\n'))).length;
-			}
-			const chunkLen = strip(chunk).length;
-			if (lineWidth + chunkLen < process.stdout.columns) {
-				lineWidth += chunkLen;
-				process.stdout.write(chunk);
-			} else {
-				process.stdout.write(`\n${prefix}${chunk.trimStart()}`);
-				lineWidth = 3 + strip(chunk.trimStart()).length;
-			}
+		output.write(`${color.gray(S_BAR)}\n${symbol}  `);
+		const renderer = appendRenderer(output, prefix);
+		for await (const chunk of iterable) {
+			renderer(chunk);
 		}
-		process.stdout.write('\n');
+		output.write('\n');
 	},
 	info: (iterable: Iterable<string> | AsyncIterable<string>) => {
 		return stream.message(iterable, { symbol: color.blue(S_INFO) });