Merge branch 'main' of https://github.com/Mist3rBru/clack into core-multiline

Author: orochaa

examples/basic/package.json

@@ -10,8 +10,10 @@
   },
   "scripts": {
     "start": "jiti ./index.ts",
+    "stream": "jiti ./stream.ts",
     "spinner": "jiti ./spinner.ts",
-    "spinner-ci": "npx cross-env CI=\"true\" jiti ./spinner-ci.ts"
+    "spinner-ci": "npx cross-env CI=\"true\" jiti ./spinner-ci.ts",
+    "spinner-timer": "jiti ./spinner-timer.ts"
   },
   "devDependencies": {
     "jiti": "^1.17.0"

examples/basic/spinner-ci.ts

@@ -7,7 +7,7 @@
  * - There will be no loading dots animation, instead it will be always `...`
  * - Instead of erase the previous message, action that is blocked during CI, it will just write a new one.
  *
- * Issue: https://github.com/natemoo-re/clack/issues/168
+ * Issue: https://github.com/bombshell-dev/clack/issues/168
  */
 import * as p from '@clack/prompts';
 

examples/basic/spinner-timer.ts

@@ -0,0 +1,26 @@
+import * as p from '@clack/prompts';
+
+p.intro('spinner start...');
+
+async function main() {
+	const spin = p.spinner({ indicator: 'timer' });
+
+	spin.start('First spinner');
+
+	await sleep(3_000);
+
+	spin.stop('Done first spinner');
+
+	spin.start('Second spinner');
+	await sleep(5_000);
+
+	spin.stop('Done second spinner');
+
+	p.outro('spinner stop.');
+}
+
+function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+main();

examples/basic/stream.ts

@@ -0,0 +1,36 @@
+import { setTimeout } from 'node:timers/promises';
+import * as p from '@clack/prompts';
+import color from 'picocolors';
+
+async function main() {
+	console.clear();
+
+	await setTimeout(1000);
+
+	p.intro(`${color.bgCyan(color.black(' create-app '))}`);
+
+	await p.stream.step(
+		(async function* () {
+			for (const line of lorem) {
+				for (const word of line.split(' ')) {
+					yield word;
+					yield ' ';
+					await setTimeout(200);
+				}
+				yield '\n';
+				if (line !== lorem.at(-1)) {
+					await setTimeout(1000);
+				}
+			}
+		})()
+	);
+
+	p.outro(`Problems? ${color.underline(color.cyan('https://example.com/issues'))}`);
+}
+
+const lorem = [
+	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+	'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+];
+
+main().catch(console.error);

packages/core/package.json

@@ -15,13 +15,13 @@
   "types": "./dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/natemoo-re/clack",
+    "url": "git+https://github.com/bombshell-dev/clack.git",
     "directory": "packages/core"
   },
   "bugs": {
-    "url": "https://github.com/natemoo-re/clack/issues"
+    "url": "https://github.com/bombshell-dev/clack/issues"
   },
-  "homepage": "https://github.com/natemoo-re/clack/tree/main/packages/core#readme",
+  "homepage": "https://github.com/bombshell-dev/clack/tree/main/packages/core#readme",
   "files": ["dist", "CHANGELOG.md"],
   "keywords": [
     "ask",

packages/core/src/utils/index.ts

@@ -61,7 +61,7 @@ export function block({
 		input.off('keypress', clear);
 		if (hideCursor) output.write(cursor.show);
 
-		// Prevent Windows specific issues: https://github.com/natemoo-re/clack/issues/176
+		// Prevent Windows specific issues: https://github.com/bombshell-dev/clack/issues/176
 		if (input.isTTY && !isWindows) input.setRawMode(false);
 
 		// @ts-expect-error fix for https://github.com/nodejs/node/issues/31762#issuecomment-1441223907

packages/prompts/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @clack/prompts
 
+## 0.10.0
+
+### Minor Changes
+
+- 613179d: Adds a new `indicator` option to `spinner`, which supports the original `"dots"` loading animation or a new `"timer"` loading animation.
+
+  ```ts
+  import * as p from "@clack/prompts";
+
+  const spin = p.spinner({ indicator: "timer" });
+  spin.start("Loading");
+  await sleep(3000);
+  spin.stop("Loaded");
+  ```
+
+- a38b2bc: Adds `stream` API which provides the same methods as `log`, but for iterable (even async) message streams. This is particularly useful for AI responses which are dynamically generated by LLMs.
+
+  ```ts
+  import * as p from "@clack/prompts";
+
+  await p.stream.step(
+    (async function* () {
+      yield* generateLLMResponse(question);
+    })()
+  );
+  ```
+
 ## 0.9.1
 
 ### Patch Changes

packages/prompts/README.md

@@ -2,7 +2,7 @@
 
 Effortlessly build beautiful command-line apps 🪄 [Try the demo](https://stackblitz.com/edit/clack-prompts?file=index.js)
 
-![clack-prompt](https://github.com/natemoo-re/clack/blob/main/.github/assets/clack-demo.gif)
+![clack-prompt](https://github.com/bombshell-dev/clack/blob/main/.github/assets/clack-demo.gif)
 
 ---
 
@@ -188,4 +188,20 @@ log.error('Error!');
 log.message('Hello, World', { symbol: color.cyan('~') });
 ```
 
-[clack-log-prompts](https://github.com/natemoo-re/clack/blob/main/.github/assets/clack-logs.png)
+
+### Stream
+
+When interacting with dynamic LLMs or other streaming message providers, use the `stream` APIs to log messages from an iterable, even an async one.
+
+```js
+import { stream } from '@clack/prompts';
+
+stream.info((function *() { yield 'Info!'; })());
+stream.success((function *() { yield 'Success!'; })());
+stream.step((function *() { yield 'Step!'; })());
+stream.warn((function *() { yield 'Warn!'; })());
+stream.error((function *() { yield 'Error!'; })());
+stream.message((function *() { yield 'Hello'; yield ", World" })(), { symbol: color.cyan('~') });
+```
+
+[clack-log-prompts](https://github.com/bombshell-dev/clack/blob/main/.github/assets/clack-logs.png)

packages/prompts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clack/prompts",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -15,13 +15,13 @@
   "types": "./dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/natemoo-re/clack",
+    "url": "git+https://github.com/bombshell-dev/clack.git",
     "directory": "packages/prompts"
   },
   "bugs": {
-    "url": "https://github.com/natemoo-re/clack/issues"
+    "url": "https://github.com/bombshell-dev/clack/issues"
   },
-  "homepage": "https://github.com/natemoo-re/clack/tree/main/packages/prompts#readme",
+  "homepage": "https://github.com/bombshell-dev/clack/tree/main/packages/prompts#readme",
   "files": ["dist", "CHANGELOG.md"],
   "author": {
     "name": "Nate Moore",

packages/prompts/src/index.ts

@@ -838,7 +838,56 @@ export const log = {
 	},
 };
 
-export const spinner = () => {
+const prefix = `${color.gray(S_BAR)}  `;
+export const stream = {
+	message: async (
+		iterable: Iterable<string> | AsyncIterable<string>,
+		{ symbol = color.gray(S_BAR) }: 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;
+			}
+		}
+		process.stdout.write('\n');
+	},
+	info: (iterable: Iterable<string> | AsyncIterable<string>) => {
+		return stream.message(iterable, { symbol: color.blue(S_INFO) });
+	},
+	success: (iterable: Iterable<string> | AsyncIterable<string>) => {
+		return stream.message(iterable, { symbol: color.green(S_SUCCESS) });
+	},
+	step: (iterable: Iterable<string> | AsyncIterable<string>) => {
+		return stream.message(iterable, { symbol: color.green(S_STEP_SUBMIT) });
+	},
+	warn: (iterable: Iterable<string> | AsyncIterable<string>) => {
+		return stream.message(iterable, { symbol: color.yellow(S_WARN) });
+	},
+	/** alias for `log.warn()`. */
+	warning: (iterable: Iterable<string> | AsyncIterable<string>) => {
+		return stream.warn(iterable);
+	},
+	error: (iterable: Iterable<string> | AsyncIterable<string>) => {
+		return stream.message(iterable, { symbol: color.red(S_ERROR) });
+	},
+};
+
+export interface SpinnerOptions {
+	indicator?: 'dots' | 'timer';
+}
+
+export const spinner = ({ indicator = 'dots' }: SpinnerOptions = {}) => {
 	const frames = unicode ? ['◒', '◐', '◓', '◑'] : ['•', 'o', 'O', '0'];
 	const delay = unicode ? 80 : 120;
 	const isCI = process.env.CI === 'true';
@@ -848,6 +897,7 @@ export const spinner = () => {
 	let isSpinnerActive = false;
 	let _message = '';
 	let _prevMessage: string | undefined = undefined;
+	let _origin: number = performance.now();
 
 	const formatMessage = (symbol: string, msg: string): string => {
 		return format(msg, {
@@ -899,13 +949,21 @@ export const spinner = () => {
 		return msg.replace(/\.+$/, '');
 	};
 
+	const formatTimer = (origin: number): string => {
+		const duration = (performance.now() - origin) / 1000;
+		const min = Math.floor(duration / 60);
+		const secs = Math.floor(duration % 60);
+		return min > 0 ? `[${min}m ${secs}s]` : `[${secs}s]`;
+	};
+
 	const start = (msg = ''): void => {
 		isSpinnerActive = true;
 		unblock = block();
 		_message = parseMessage(msg);
+		_origin = performance.now();
 		process.stdout.write(`${color.gray(S_BAR)}\n`);
 		let frameIndex = 0;
-		let dotsTimer = 0;
+		let indicatorTimer = 0;
 		registerHooks();
 		loop = setInterval(() => {
 			if (isCI && _message === _prevMessage) {
@@ -914,11 +972,18 @@ export const spinner = () => {
 			clearPrevMessage();
 			_prevMessage = _message;
 			const frame = color.magenta(frames[frameIndex]);
-			const loadingDots = isCI ? '...' : '.'.repeat(Math.floor(dotsTimer)).slice(0, 3);
-			_prevMessage = _message;
-			process.stdout.write(formatMessage(frame, _message + loadingDots));
+
+			if (isCI) {
+				process.stdout.write(`${frame}  ${_message}...`);
+			} else if (indicator === 'timer') {
+				process.stdout.write(`${frame}  ${_message} ${formatTimer(_origin)}`);
+			} else {
+				const loadingDots = '.'.repeat(Math.floor(indicatorTimer)).slice(0, 3);
+				process.stdout.write(`${frame}  ${_message}${loadingDots}`);
+			}
+
 			frameIndex = frameIndex + 1 < frames.length ? frameIndex + 1 : 0;
-			dotsTimer = dotsTimer < frames.length ? dotsTimer + 0.125 : 0;
+			indicatorTimer = indicatorTimer < frames.length ? indicatorTimer + 0.125 : 0;
 		}, delay);
 	};
 
@@ -933,7 +998,11 @@ export const spinner = () => {
 					? color.red(S_STEP_CANCEL)
 					: color.red(S_STEP_ERROR);
 		_message = parseMessage(msg ?? _message);
-		process.stdout.write(`${step}  ${_message}\n`);
+		if (indicator === 'timer') {
+			process.stdout.write(`${step}  ${_message} ${formatTimer(_origin)}\n`);
+		} else {
+			process.stdout.write(`${step}  ${_message}\n`);
+		}
 		clearHooks();
 		unblock();
 	};