@topcli/prompts 1.4.0 → 1.5.1

package/README.md

@@ -51,6 +51,7 @@ question(message: string, options?: PromptOptions): Promise<string>
 ```
 
 Simple prompt, similar to `rl.question()` with an improved UI.
+Use `options.secure` if you need to hide both input and answer.
 Use `options.validators` to handle user input.
 
 **Example**
@@ -156,6 +157,7 @@ export interface Validator {
 export interface QuestionOptions extends SharedOptions {
   defaultValue?: string;
   validators?: Validator[];
+  secure?: boolean;
 }
 
 export interface Choice {

package/index.d.ts

@@ -15,6 +15,7 @@ export interface Validator {
 export interface QuestionOptions extends SharedOptions {
   defaultValue?: string;
   validators?: Validator[];
+  secure?: boolean;
 }
 
 export interface Choice {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topcli/prompts",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Node.js user input library for command-line interfaces.",
   "scripts": {
     "test": "node --no-warnings=ExperimentalWarning --loader=esmock --test test/",
@@ -24,13 +24,15 @@
   "type": "module",
   "devDependencies": {
     "@nodesecure/eslint-config": "^1.8.0",
-    "@types/node": "^20.8.2",
+    "@types/node": "^20.8.5",
     "c8": "^8.0.1",
-    "eslint": "^8.50.0",
-    "esmock": "^2.5.1"
+    "eslint": "^8.51.0",
+    "esmock": "^2.5.2"
   },
   "dependencies": {
-    "is-unicode-supported": "^1.3.0",
+    "@topcli/wcwidth": "^1.0.1",
+    "is-ci": "^3.0.1",
+    "is-unicode-supported": "^2.0.0",
     "kleur": "^4.1.5",
     "strip-ansi": "^7.1.0"
   },

package/src/abstract-prompt.js

@@ -1,6 +1,7 @@
 // Import Node.js Dependencies
 import { EOL } from "node:os";
 import { createInterface } from "node:readline";
+import { Writable } from "node:stream";
 
 // Import Third-party Dependencies
 import stripAnsi from "strip-ansi";
@@ -23,11 +24,23 @@ export class AbstractPrompt {
     this.message = message;
     this.history = [];
     this.agent = PromptAgent.agent();
+    this.mute = false;
 
     if (this.stdout.isTTY) {
       this.stdin.setRawMode(true);
     }
-    this.rl = createInterface({ input, output });
+    this.rl = createInterface({
+      input,
+      output: new Writable({
+        write: (chunk, encoding, callback) => {
+          if (!this.mute) {
+            this.stdout.write(chunk, encoding);
+          }
+          callback();
+        }
+      }),
+      terminal: true
+    });
   }
 
   write(data) {

package/src/confirm-prompt.js

@@ -3,6 +3,8 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
+import stripAnsi from "strip-ansi";
+import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
@@ -65,7 +67,10 @@ export class ConfirmPrompt extends AbstractPrompt {
   }
 
   #onKeypress(resolve, value, key) {
-    this.stdout.moveCursor(-this.#getQuestionQuery().length, 0);
+    this.stdout.moveCursor(
+      -this.stdout.columns,
+      -Math.floor(wcwidth(stripAnsi(this.#getQuestionQuery())) / this.stdout.columns)
+    );
     this.stdout.clearScreenDown();
 
     if (key.name === "return") {
@@ -92,7 +97,11 @@ export class ConfirmPrompt extends AbstractPrompt {
   }
 
   #onQuestionAnswer() {
-    this.clearLastLine();
+    this.stdout.moveCursor(
+      -this.stdout.columns,
+      -(Math.floor(wcwidth(stripAnsi(this.#getQuestionQuery())) / this.stdout.columns) || 1)
+    );
+    this.stdout.clearScreenDown();
     this.write(`${this.selectedValue ? SYMBOLS.Tick : SYMBOLS.Cross} ${kleur.bold(this.message)}${EOL}`);
   }
 

package/src/constants.js

@@ -1,6 +1,7 @@
 // Import Third-party Dependencies
 import kleur from "kleur";
 import isUnicodeSupported from "is-unicode-supported";
+import isCI from "is-ci";
 
 const kMainSymbols = {
   tick: "✔",
@@ -20,7 +21,7 @@ const kFallbackSymbols = {
   active: "(+)",
   inactive: "(-)"
 };
-const kSymbols = isUnicodeSupported() ? kMainSymbols : kFallbackSymbols;
+const kSymbols = isUnicodeSupported() || isCI ? kMainSymbols : kFallbackSymbols;
 const kPointer = kleur.gray(kSymbols.pointer);
 
 export const SYMBOLS = {

package/src/multiselect-prompt.js

@@ -3,16 +3,21 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
+import stripAnsi from "strip-ansi";
+import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
 import { SYMBOLS } from "./constants.js";
 
 export class MultiselectPrompt extends AbstractPrompt {
+  #boundExitEvent = () => void 0;
+  #boundKeyPressEvent = () => void 0;
   #validators;
 
   activeIndex = 0;
   selectedIndexes = [];
+  questionMessage;
 
   get choices() {
     return this.options.choices;
@@ -142,6 +147,70 @@ export class MultiselectPrompt extends AbstractPrompt {
     this.write(`${prefix}${choices ? ` ${formattedChoice}` : ""}${EOL}`);
   }
 
+  #onProcessExit() {
+    this.stdin.off("keypress", this.#boundKeyPressEvent);
+    this.stdout.moveCursor(-this.stdout.columns, 0);
+    this.stdout.clearScreenDown();
+    this.write(SYMBOLS.ShowCursor);
+  }
+
+  #onKeypress(...args) {
+    const [resolve, render, _, key] = args;
+
+    if (key.name === "up") {
+      this.activeIndex = this.activeIndex === 0 ? this.choices.length - 1 : this.activeIndex - 1;
+      render();
+    }
+    else if (key.name === "down") {
+      this.activeIndex = this.activeIndex === this.choices.length - 1 ? 0 : this.activeIndex + 1;
+      render();
+    }
+    else if (key.name === "a") {
+      this.selectedIndexes = this.selectedIndexes.length === this.choices.length ? [] : this.choices.map((_, index) => index);
+      render();
+    }
+    else if (key.name === "space") {
+      const isChoiceSelected = this.selectedIndexes.includes(this.activeIndex);
+
+      if (isChoiceSelected) {
+        this.selectedIndexes = this.selectedIndexes.filter((index) => index !== this.activeIndex);
+      }
+      else {
+        this.selectedIndexes.push(this.activeIndex);
+      }
+
+      render();
+    }
+    else if (key.name === "return") {
+      const labels = this.selectedIndexes.map((index) => this.choices[index].label ?? this.choices[index]);
+      const values = this.selectedIndexes.map((index) => this.choices[index].value ?? this.choices[index]);
+
+      for (const validator of this.#validators) {
+        if (!validator.validate(values)) {
+          const error = validator.error(values);
+          render({ error });
+
+          return;
+        }
+      }
+
+      render({ clearRender: true });
+
+      this.#showAnsweredQuestion(labels.join(", "));
+
+      this.write(SYMBOLS.ShowCursor);
+      this.destroy();
+
+      this.#onProcessExit();
+      process.off("exit", this.#boundExitEvent);
+
+      resolve(values);
+    }
+    else {
+      render();
+    }
+  }
+
   async multiselect() {
     if (this.agent.nextAnswers.length > 0) {
       const answer = this.agent.nextAnswers.shift();
@@ -170,7 +239,10 @@ export class MultiselectPrompt extends AbstractPrompt {
       }
 
       if (clearRender) {
-        this.stdout.moveCursor(0, -2);
+        const questionLineCount = Math.ceil(
+          wcwidth(stripAnsi(this.questionMessage)) / this.stdout.columns
+        );
+        this.stdout.moveCursor(-this.stdout.columns, -(1 + questionLineCount));
         this.stdout.clearScreenDown();
 
         return;
@@ -188,59 +260,11 @@ export class MultiselectPrompt extends AbstractPrompt {
     render({ initialRender: true });
 
     return new Promise((resolve) => {
-      const onKeypress = (value, key) => {
-        if (key.name === "up") {
-          this.activeIndex = this.activeIndex === 0 ? this.choices.length - 1 : this.activeIndex - 1;
-          render();
-        }
-        else if (key.name === "down") {
-          this.activeIndex = this.activeIndex === this.choices.length - 1 ? 0 : this.activeIndex + 1;
-          render();
-        }
-        else if (key.name === "a") {
-          this.selectedIndexes = this.selectedIndexes.length === this.choices.length ? [] : this.choices.map((_, index) => index);
-          render();
-        }
-        else if (key.name === "space") {
-          const isChoiceSelected = this.selectedIndexes.includes(this.activeIndex);
-
-          if (isChoiceSelected) {
-            this.selectedIndexes = this.selectedIndexes.filter((index) => index !== this.activeIndex);
-          }
-          else {
-            this.selectedIndexes.push(this.activeIndex);
-          }
-
-          render();
-        }
-        else if (key.name === "return") {
-          const labels = this.selectedIndexes.map((index) => this.choices[index].label ?? this.choices[index]);
-          const values = this.selectedIndexes.map((index) => this.choices[index].value ?? this.choices[index]);
-
-          for (const validator of this.#validators) {
-            if (!validator.validate(values)) {
-              const error = validator.error(values);
-              render({ error });
-
-              return;
-            }
-          }
-
-          this.stdin.off("keypress", onKeypress);
-
-          render({ clearRender: true });
-
-
-          this.#showAnsweredQuestion(labels.join(", "));
-
-          this.write(SYMBOLS.ShowCursor);
-          this.destroy();
-
-          resolve(values);
-        }
-      };
+      this.#boundKeyPressEvent = this.#onKeypress.bind(this, resolve, render);
+      this.stdin.on("keypress", this.#boundKeyPressEvent);
 
-      this.stdin.on("keypress", onKeypress);
+      this.#boundExitEvent = this.#onProcessExit.bind(this);
+      process.once("exit", this.#boundExitEvent);
     });
   }
 
@@ -251,7 +275,8 @@ export class MultiselectPrompt extends AbstractPrompt {
     if (error) {
       hint += ` ${kleur.red().bold(`[${error}]`)}`;
     }
+    this.questionMessage = `${SYMBOLS.QuestionMark} ${kleur.bold(this.message)} ${hint}`;
 
-    this.write(`${SYMBOLS.QuestionMark} ${kleur.bold(this.message)} ${hint}${EOL}`);
+    this.write(`${this.questionMessage}${EOL}`);
   }
 }

package/src/question-prompt.js

@@ -3,6 +3,8 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
+import stripAnsi from "strip-ansi";
+import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
@@ -10,13 +12,15 @@ import { SYMBOLS } from "./constants.js";
 
 export class QuestionPrompt extends AbstractPrompt {
   #validators;
+  #secure;
 
   constructor(message, options = {}) {
     const {
       stdin = process.stdin,
       stdout = process.stdout,
       defaultValue,
-      validators = []
+      validators = [],
+      secure = false
     } = options;
 
     super(message, stdin, stdout);
@@ -28,6 +32,7 @@ export class QuestionPrompt extends AbstractPrompt {
     this.defaultValue = defaultValue;
     this.tip = this.defaultValue ? ` (${this.defaultValue})` : "";
     this.#validators = validators;
+    this.#secure = Boolean(secure);
     this.questionSuffixError = "";
   }
 
@@ -37,9 +42,11 @@ export class QuestionPrompt extends AbstractPrompt {
 
       this.rl.question(questionQuery, (answer) => {
         this.history.push(questionQuery + answer);
+        this.mute = false;
 
         resolve(answer);
       });
+      this.mute = this.#secure;
     });
   }
 
@@ -54,13 +61,17 @@ export class QuestionPrompt extends AbstractPrompt {
 
   #writeAnswer() {
     const prefix = this.answer ? SYMBOLS.Tick : SYMBOLS.Cross;
-    const answer = kleur.yellow(this.answer ?? "");
-
+    const answer = kleur.yellow(this.#secure ? "CONFIDENTIAL" : this.answer ?? "");
     this.write(`${prefix} ${kleur.bold(this.message)} ${SYMBOLS.Pointer} ${answer}${EOL}`);
   }
 
   #onQuestionAnswer() {
-    this.clearLastLine();
+    const questionLineCount = Math.ceil(
+      wcwidth(stripAnsi(this.#getQuestionQuery() + this.answer)) / this.stdout.columns
+    );
+
+    this.stdout.moveCursor(-this.stdout.columns, -questionLineCount);
+    this.stdout.clearScreenDown();
 
     for (const validator of this.#validators) {
       if (!validator.validate(this.answer)) {

package/src/select-prompt.js

@@ -3,12 +3,16 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
+import stripAnsi from "strip-ansi";
+import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
 import { AbstractPrompt } from "./abstract-prompt.js";
 import { SYMBOLS } from "./constants.js";
 
 export class SelectPrompt extends AbstractPrompt {
+  #boundExitEvent = () => void 0;
+  #boundKeyPressEvent = () => void 0;
   activeIndex = 0;
 
   get choices() {
@@ -113,6 +117,46 @@ export class SelectPrompt extends AbstractPrompt {
     this.write(`${prefix} ${formattedChoice}${EOL}`);
   }
 
+  #onProcessExit() {
+    this.stdin.off("keypress", this.#boundKeyPressEvent);
+    this.stdout.moveCursor(-this.stdout.columns, 0);
+    this.stdout.clearScreenDown();
+    this.write(SYMBOLS.ShowCursor);
+  }
+
+  #onKeypress(...args) {
+    const [resolve, render, _, key] = args;
+
+    if (key.name === "up") {
+      this.activeIndex = this.activeIndex === 0 ? this.choices.length - 1 : this.activeIndex - 1;
+      render();
+    }
+    else if (key.name === "down") {
+      this.activeIndex = this.activeIndex === this.choices.length - 1 ? 0 : this.activeIndex + 1;
+      render();
+    }
+    else if (key.name === "return") {
+      render({ clearRender: true });
+
+      const currentChoice = this.choices[this.activeIndex];
+      const value = currentChoice.value ?? currentChoice;
+
+      if (!this.options.ignoreValues?.includes(value)) {
+        this.#showAnsweredQuestion(currentChoice);
+      }
+
+      this.write(SYMBOLS.ShowCursor);
+      this.destroy();
+
+      this.#onProcessExit();
+      process.off("exit", this.#boundExitEvent);
+      resolve(value);
+    }
+    else {
+      render();
+    }
+  }
+
   async select() {
     if (this.agent.nextAnswers.length > 0) {
       const answer = this.agent.nextAnswers.shift();
@@ -140,7 +184,11 @@ export class SelectPrompt extends AbstractPrompt {
       }
 
       if (clearRender) {
-        this.stdout.moveCursor(0, -2);
+        const questionLineCount = Math.ceil(
+          wcwidth(stripAnsi(this.questionMessage)) / this.stdout.columns
+        );
+
+        this.stdout.moveCursor(-this.stdout.columns, -(1 + questionLineCount));
         this.stdout.clearScreenDown();
 
         return;
@@ -152,39 +200,16 @@ export class SelectPrompt extends AbstractPrompt {
     render({ initialRender: true });
 
     return new Promise((resolve) => {
-      const onKeypress = (value, key) => {
-        if (key.name === "up") {
-          this.activeIndex = this.activeIndex === 0 ? this.choices.length - 1 : this.activeIndex - 1;
-          render();
-        }
-        else if (key.name === "down") {
-          this.activeIndex = this.activeIndex === this.choices.length - 1 ? 0 : this.activeIndex + 1;
-          render();
-        }
-        else if (key.name === "return") {
-          this.stdin.off("keypress", onKeypress);
-
-          render({ clearRender: true });
-
-          const currentChoice = this.choices[this.activeIndex];
-          const value = currentChoice.value ?? currentChoice;
-
-          if (!this.options.ignoreValues?.includes(value)) {
-            this.#showAnsweredQuestion(currentChoice);
-          }
-
-          this.write(SYMBOLS.ShowCursor);
-          this.destroy();
-
-          resolve(value);
-        }
-      };
+      this.#boundKeyPressEvent = this.#onKeypress.bind(this, resolve, render);
+      this.stdin.on("keypress", this.#boundKeyPressEvent);
 
-      this.stdin.on("keypress", onKeypress);
+      this.#boundExitEvent = this.#onProcessExit.bind(this);
+      process.once("exit", this.#boundExitEvent);
     });
   }
 
   #showQuestion() {
-    this.write(`${SYMBOLS.QuestionMark} ${kleur.bold(this.message)}${EOL}`);
+    this.questionMessage = `${SYMBOLS.QuestionMark} ${kleur.bold(this.message)}`;
+    this.write(`${this.questionMessage}${EOL}`);
   }
 }