fix(prompts): Fix styling of taskLog + fix README (#301)

Author: MacFJA

examples/basic/package.json

@@ -14,7 +14,8 @@
     "progress": "jiti ./progress.ts",
     "spinner": "jiti ./spinner.ts",
     "spinner-ci": "npx cross-env CI=\"true\" jiti ./spinner-ci.ts",
-    "spinner-timer": "jiti ./spinner-timer.ts"
+    "spinner-timer": "jiti ./spinner-timer.ts",
+    "task-log": "jiti ./task-log.ts"
   },
   "devDependencies": {
     "cross-env": "^7.0.3"

examples/basic/task-log.ts

@@ -0,0 +1,28 @@
+import { setTimeout } from 'node:timers/promises';
+import * as p from '@clack/prompts';
+
+async function main() {
+	p.intro('task log start...');
+
+	const log = p.taskLog({
+		title: 'Running npm install',
+		limit: 5,
+	});
+
+	for await (const line of fakeCommand()) {
+		log.message(line);
+	}
+
+	log.success('Done!');
+
+	p.outro('task log stop...');
+}
+
+async function* fakeCommand() {
+	for (let i = 0; i < 100; i++) {
+		yield `line \x1b[32m${i}\x1b[39m...`;
+		await setTimeout(80);
+	}
+}
+
+main();

packages/prompts/README.md

@@ -253,7 +253,7 @@ When executing a sub-process or a similar sub-task, `taskLog` can be used to ren
 import { taskLog } from '@clack/prompts';
 
 const log = taskLog({
-	message: 'Running npm install'
+	title: 'Running npm install'
 });
 
 for await (const line of npmInstall()) {

packages/prompts/src/common.ts

@@ -4,6 +4,7 @@ import isUnicodeSupported from 'is-unicode-supported';
 import color from 'picocolors';
 
 export const unicode = isUnicodeSupported();
+export const isCI = (): boolean => process.env.CI === 'true';
 export const unicodeOr = (c: string, fallback: string) => (unicode ? c : fallback);
 export const S_STEP_ACTIVE = unicodeOr('◆', '*');
 export const S_STEP_CANCEL = unicodeOr('■', 'x');

packages/prompts/src/spinner.ts

@@ -7,6 +7,7 @@ import {
 	S_STEP_CANCEL,
 	S_STEP_ERROR,
 	S_STEP_SUBMIT,
+	isCI as isCIFn,
 	unicode,
 } from './common.js';
 
@@ -33,7 +34,7 @@ export const spinner = ({
 }: SpinnerOptions = {}): SpinnerResult => {
 	const frames = unicode ? ['◒', '◐', '◓', '◑'] : ['•', 'o', 'O', '0'];
 	const delay = unicode ? 80 : 120;
-	const isCI = process.env.CI === 'true';
+	const isCI = isCIFn();
 
 	let unblock: () => void;
 	let loop: NodeJS.Timeout;

packages/prompts/src/task-log.ts

@@ -2,7 +2,7 @@ import type { Writable } from 'node:stream';
 import { getColumns } from '@clack/core';
 import * as color from 'picocolors';
 import { erase } from 'sisteransi';
-import { type CommonOptions, S_BAR, S_STEP_SUBMIT } from './common.js';
+import { type CommonOptions, S_BAR, S_STEP_SUBMIT, isCI as isCIFn } from './common.js';
 import { log } from './log.js';
 
 export interface TaskLogOptions extends CommonOptions {
@@ -26,11 +26,11 @@ export interface TaskLogCompletionOptions {
 export const taskLog = (opts: TaskLogOptions) => {
 	const output: Writable = opts.output ?? process.stdout;
 	const columns = getColumns(output);
-	const secondarySymbol = color.dim(S_BAR);
+	const secondarySymbol = color.gray(S_BAR);
 	const spacing = opts.spacing ?? 1;
 	const barSize = 3;
 	const retainLog = opts.retainLog === true;
-	const isCI = process.env.CI === 'true';
+	const isCI = isCIFn();
 
 	output.write(`${secondarySymbol}\n`);
 	output.write(`${color.green(S_STEP_SUBMIT)}  ${opts.title}\n`);