feat: rework path, remove suggestion prompt (#335)

Author: 43081j

.changeset/short-taxis-cross.md

@@ -0,0 +1,6 @@
+---
+"@clack/prompts": minor
+"@clack/core": minor
+---
+
+Remove `suggestion` prompt and change `path` prompt to be an autocomplete prompt.

packages/core/src/index.ts

@@ -1,4 +1,4 @@
-export type { ClackState as State, ValueWithCursorPart } from './types.js';
+export type { ClackState as State } from './types.js';
 export type { ClackSettings } from './utils/settings.js';
 
 export { default as ConfirmPrompt } from './prompts/confirm.js';
@@ -10,6 +10,5 @@ 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 { default as AutocompletePrompt } from './prompts/autocomplete.js';
-export { default as SuggestionPrompt } from './prompts/suggestion.js';
 export { block, isCancel, getColumns } from './utils/index.js';
 export { updateSettings, settings } from './utils/settings.js';

packages/core/src/prompts/autocomplete.ts

@@ -46,15 +46,14 @@ function normalisedValue<T>(multiple: boolean, values: T[] | undefined): T | T[]
 
 interface AutocompleteOptions<T extends OptionLike>
 	extends PromptOptions<T['value'] | T['value'][], AutocompletePrompt<T>> {
-	options: T[];
+	options: T[] | ((this: AutocompletePrompt<T>) => T[]);
 	filter?: FilterFunction<T>;
 	multiple?: boolean;
 }
 
 export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 	T['value'] | T['value'][]
 > {
-	options: T[];
 	filteredOptions: T[];
 	multiple: boolean;
 	isNavigating = false;
@@ -64,6 +63,7 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 	#cursor = 0;
 	#lastUserInput = '';
 	#filterFn: FilterFunction<T>;
+	#options: T[] | (() => T[]);
 
 	get cursor(): number {
 		return this.#cursor;
@@ -81,11 +81,19 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 		return `${s1}${color.inverse(s2)}${s3.join('')}`;
 	}
 
+	get options(): T[] {
+		if (typeof this.#options === 'function') {
+			return this.#options();
+		}
+		return this.#options;
+	}
+
 	constructor(opts: AutocompleteOptions<T>) {
 		super(opts);
 
-		this.options = opts.options;
-		this.filteredOptions = [...this.options];
+		this.#options = opts.options;
+		const options = this.options;
+		this.filteredOptions = [...options];
 		this.multiple = opts.multiple === true;
 		this.#filterFn = opts.filter ?? defaultFilter;
 		let initialValues: unknown[] | undefined;
@@ -103,7 +111,7 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 
 		if (initialValues) {
 			for (const selectedValue of initialValues) {
-				const selectedIndex = this.options.findIndex((opt) => opt.value === selectedValue);
+				const selectedIndex = options.findIndex((opt) => opt.value === selectedValue);
 				if (selectedIndex !== -1) {
 					this.toggleSelected(selectedValue);
 					this.#cursor = selectedIndex;
@@ -113,16 +121,6 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 
 		this.focusedValue = this.options[this.#cursor]?.value;
 
-		this.on('finalize', () => {
-			if (!this.value) {
-				this.value = normalisedValue(this.multiple, initialValues);
-			}
-
-			if (this.state === 'submit') {
-				this.value = normalisedValue(this.multiple, this.selectedValues);
-			}
-		});
-
 		this.on('key', (char, key) => this.#onKey(char, key));
 		this.on('userInput', (value) => this.#onUserInputChanged(value));
 	}
@@ -141,6 +139,7 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 	#onKey(_char: string | undefined, key: Key): void {
 		const isUpKey = key.name === 'up';
 		const isDownKey = key.name === 'down';
+		const isReturnKey = key.name === 'return';
 
 		// Start navigation mode with up/down arrows
 		if (isUpKey || isDownKey) {
@@ -153,6 +152,8 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 				this.selectedValues = [this.focusedValue];
 			}
 			this.isNavigating = true;
+		} else if (isReturnKey) {
+			this.value = normalisedValue(this.multiple, this.selectedValues);
 		} else {
 			if (this.multiple) {
 				if (
@@ -171,6 +172,10 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 		}
 	}
 
+	deselectAll() {
+		this.selectedValues = [];
+	}
+
 	toggleSelected(value: T['value']) {
 		if (this.filteredOptions.length === 0) {
 			return;
@@ -191,13 +196,22 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 		if (value !== this.#lastUserInput) {
 			this.#lastUserInput = value;
 
+			const options = this.options;
+
 			if (value) {
-				this.filteredOptions = this.options.filter((opt) => this.#filterFn(value, opt));
+				this.filteredOptions = options.filter((opt) => this.#filterFn(value, opt));
 			} else {
-				this.filteredOptions = [...this.options];
+				this.filteredOptions = [...options];
 			}
 			this.#cursor = getCursorForValue(this.focusedValue, this.filteredOptions);
 			this.focusedValue = this.filteredOptions[this.#cursor]?.value;
+			if (!this.multiple) {
+				if (this.focusedValue !== undefined) {
+					this.toggleSelected(this.focusedValue);
+				} else {
+					this.deselectAll();
+				}
+			}
 		}
 	}
 }

packages/core/src/prompts/prompt.ts

@@ -13,6 +13,7 @@ import type { Action } from '../utils/index.js';
 export interface PromptOptions<TValue, Self extends Prompt<TValue>> {
 	render(this: Omit<Self, 'prompt'>): string | undefined;
 	initialValue?: any;
+	initialUserInput?: string;
 	validate?: ((value: TValue | undefined) => string | Error | undefined) | undefined;
 	input?: Readable;
 	output?: Writable;
@@ -25,7 +26,7 @@ export default class Prompt<TValue> {
 	protected output: Writable;
 	private _abortSignal?: AbortSignal;
 
-	protected rl: ReadLine | undefined;
+	private rl: ReadLine | undefined;
 	private opts: Omit<PromptOptions<TValue, Prompt<TValue>>, 'render' | 'input' | 'output'>;
 	private _render: (context: Omit<Prompt<TValue>, 'prompt'>) => string | undefined;
 	private _track = false;
@@ -145,7 +146,9 @@ export default class Prompt<TValue> {
 			});
 			this.rl.prompt();
 
-			this.emit('beforePrompt');
+			if (this.opts.initialUserInput !== undefined) {
+				this._setUserInput(this.opts.initialUserInput, true);
+			}
 
 			this.input.on('keypress', this.onKeypress);
 			setRawMode(this.input, true);

packages/core/src/prompts/suggestion.ts

@@ -23,13 +23,11 @@ export default class TextPrompt extends Prompt<string> {
 		return this._cursor;
 	}
 	constructor(opts: TextOptions) {
-		super(opts);
-
-		this.on('beforePrompt', () => {
-			if (opts.initialValue !== undefined) {
-				this._setUserInput(opts.initialValue, true);
-			}
+		super({
+			...opts,
+			initialUserInput: opts.initialUserInput ?? opts.initialValue,
 		});
+
 		this.on('userInput', (input) => {
 			this._setValue(input);
 		});

packages/core/src/prompts/text.ts

@@ -23,11 +23,3 @@ export interface ClackEvents<TValue> {
 	finalize: () => void;
 	beforePrompt: () => void;
 }
-
-/**
- * Display a value
- */
-export interface ValueWithCursorPart {
-	text: string;
-	type: 'value' | 'cursor_on_value' | 'suggestion' | 'cursor_on_suggestion';
-}