fix: handle skipped questions in when with display option

Author: Sakthieswaran-tech

README.md

@@ -1 +1 @@
-packages/prompts/README.md
+packages/prompts/README.md

packages/inquirer/inquirer.test.ts

@@ -738,6 +738,62 @@ describe('inquirer.prompt(...)', () => {
       ]);
       expect(answers).toEqual({ q: 'foo' });
     });
+
+    it('should display skipped question when `when` returns { ask: false, display: true }', async () => {
+      const writeSpy = vi.spyOn(process.stdout, 'write').mockImplementation(() => true);
+
+      const answers = await inquirer.prompt([
+        {
+          type: 'stub',
+          name: 'q1',
+          message: 'Question 1',
+        },
+        {
+          type: 'stub',
+          name: 'q2',
+          message: 'Question 2',
+          when() {
+            return { ask: false, display: true };
+          },
+        },
+      ]);
+
+      const output = writeSpy.mock.calls.map(([text]) => text).join('');
+      expect(output).toMatch(/Question 2/);
+      expect(output.includes('\x1b[2m')).toBe(true);
+      expect(answers).toEqual({ q1: 'bar' });
+      writeSpy.mockRestore();
+    });
+
+    it('should skip question entirely when `when` returns { ask: false, display: false }', async () => {
+      const writeSpy = vi.spyOn(process.stdout, 'write').mockImplementation(() => true);
+
+      const answers = await inquirer.prompt([
+        {
+          type: 'stub',
+          name: 'q1',
+          message: 'Question 1',
+        },
+        {
+          type: 'stub',
+          name: 'q2',
+          message: 'Question 2',
+          when() {
+            return { ask: false, display: false };
+          },
+        },
+        {
+          type: 'stub',
+          name: 'q3',
+          message: 'Question 3',
+        },
+      ]);
+
+      const output = writeSpy.mock.calls.map(([text]) => text).join('');
+      expect(output).not.toMatch(/Question 2/);
+      expect(answers).toEqual({ q1: 'bar', q3: 'bar' });
+      writeSpy.mockRestore();
+    });
   });
 
   describe('Prefilling answers', () => {

packages/inquirer/package.json

@@ -80,7 +80,8 @@
     "@inquirer/type": "^3.0.9",
     "mute-stream": "^2.0.0",
     "run-async": "^4.0.5",
-    "rxjs": "^7.8.2"
+    "rxjs": "^7.8.2",
+    "yoctocolors-cjs": "^2.1.3"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",

packages/inquirer/src/types.ts

@@ -47,6 +47,11 @@ export interface QuestionMap {
 type KeyValueOrAsyncGetterFunction<T, k extends string, A extends Answers> =
   T extends Record<string, any> ? T[k] | AsyncGetterFunction<T[k], A> : never;
 
+export type CustomWhenResult = {
+  display: boolean;
+  ask: boolean;
+};
+
 export type Question<A extends Answers = Answers, Type extends string = string> = {
   type: Type;
   name: string;
@@ -55,7 +60,7 @@ export type Question<A extends Answers = Answers, Type extends string = string>
   choices?: any;
   filter?: (answer: any, answers: Partial<A>) => any;
   askAnswered?: boolean;
-  when?: boolean | AsyncGetterFunction<boolean, A>;
+  when?: boolean | CustomWhenResult | AsyncGetterFunction<boolean | CustomWhenResult, A>;
 };
 
 type QuestionWithGetters<
@@ -67,7 +72,7 @@ type QuestionWithGetters<
   {
     type: Type;
     askAnswered?: boolean;
-    when?: boolean | AsyncGetterFunction<boolean, A>;
+    when?: boolean | AsyncGetterFunction<boolean | CustomWhenResult, A>;
     filter?(input: any, answers: A): any;
     message: KeyValueOrAsyncGetterFunction<Q, 'message', A>;
     default?: KeyValueOrAsyncGetterFunction<Q, 'default', A>;

packages/inquirer/src/ui/prompt.ts

@@ -6,7 +6,6 @@ import {
   from,
   of,
   concatMap,
-  filter,
   reduce,
   isObservable,
   Observable,
@@ -23,7 +22,9 @@ import type {
   AsyncGetterFunction,
   PromptSession,
   StreamOptions,
+  CustomWhenResult,
 } from '../types.ts';
+import SkippedRenderer from './skipped-renderer.ts';
 
 export const _ = {
   set: (obj: Record<string, unknown>, path: string = '', value: unknown): void => {
@@ -230,16 +231,30 @@ export default class PromptsRunner<A extends Answers> {
       concatMap((question) =>
         of(question).pipe(
           concatMap((question) =>
-            from(
-              this.shouldRun(question).then((shouldRun: boolean | void) => {
-                if (shouldRun) {
-                  return question;
+            from(this.shouldRun(question)).pipe(
+              concatMap((result) => {
+                let ask = true;
+                let display = true;
+                if (typeof result === 'object') {
+                  display = result.display;
+                  ask = result.ask;
+                } else {
+                  ask = result;
                 }
-                return;
+                if (ask || display) {
+                  return of({ question, ask });
+                }
+                return EMPTY;
               }),
-            ).pipe(filter((val) => val != null)),
+            ),
           ),
-          concatMap((question) => defer(() => from(this.fetchAnswer(question)))),
+          concatMap(({ question, ask }) => {
+            if (ask) {
+              return defer(() => from(this.fetchAnswer(question)));
+            }
+            this.displaySkippedQuestion(question);
+            return EMPTY;
+          }),
         ),
       ),
     );
@@ -391,14 +406,23 @@ export default class PromptsRunner<A extends Answers> {
       });
   };
 
+  private displaySkippedQuestion(question: Question<A>) {
+    const renderer = SkippedRenderer[question.type] || SkippedRenderer.default;
+    type RendererFunc<A extends Answers> = (question: Question<A>) => string;
+    const outputText = (renderer as RendererFunc<A>)(question);
+    (this.opt.output || process.stdout).write(`${outputText}\n`);
+  }
+
   /**
    * Close the interface and cleanup listeners
    */
   close = () => {
     this.abortController.abort();
   };
 
-  private shouldRun = async (question: Question<A>): Promise<boolean> => {
+  private shouldRun = async (
+    question: Question<A>,
+  ): Promise<boolean | CustomWhenResult> => {
     if (
       question.askAnswered !== true &&
       _.get(this.answers, question.name) !== undefined
@@ -409,6 +433,11 @@ export default class PromptsRunner<A extends Answers> {
     const { when } = question;
     if (typeof when === 'function') {
       const shouldRun = await runAsync(when)(this.answers);
+      if (typeof shouldRun === 'object') {
+        const display = shouldRun.display;
+        const ask = shouldRun.ask;
+        return { display, ask };
+      }
       return Boolean(shouldRun);
     }
 

packages/inquirer/src/ui/skipped-renderer.ts

@@ -0,0 +1,99 @@
+import colors from 'yoctocolors-cjs';
+import { Answers, Question } from '../types.ts';
+
+type RendererFunction<A extends Answers = Answers> = (question: Question<A>) => string;
+
+type Choice = { name: string; value: string | number };
+
+type TypedQuestion<A extends Answers = Answers, T = string | boolean | number> = Omit<
+  Question<A>,
+  'choices' | 'default'
+> & {
+  choices?: Choice[];
+  default?: T; // now default is typed
+};
+
+type SkippedRendererType<A extends Answers = Answers> = {
+  [key: string]: RendererFunction<A>;
+  confirm: RendererFunction<A>;
+  select: RendererFunction<A>;
+  checkbox: RendererFunction<A>;
+  editor: RendererFunction<A>;
+  password: RendererFunction<A>;
+  default: RendererFunction<A>;
+};
+
+const SkippedRenderer: SkippedRendererType = {
+  confirm: (question: TypedQuestion) => {
+    const defaultVal = question.default;
+    const answerText = defaultVal === true ? 'Yes' : defaultVal === false ? 'No' : '';
+    const prefix = '?';
+    const line = `${prefix} ${question.message} ${answerText}`;
+    return colors.dim(line);
+  },
+
+  select: (question: TypedQuestion) => {
+    const defaultVal = question.default;
+    const prefix = '?';
+    let answerText = String(defaultVal);
+
+    if (question.choices && defaultVal !== undefined) {
+      const selectedChoice = question.choices.find((c) => c.value === defaultVal);
+      answerText = selectedChoice ? selectedChoice.name : String(defaultVal);
+    }
+
+    const line = `${prefix} ${question.message} ${answerText}`;
+    return colors.dim(line);
+  },
+
+  checkbox: (question: TypedQuestion) => {
+    const defaultVal = question.default;
+    const prefix = '?';
+    let answerText = '';
+
+    if (Array.isArray(defaultVal) && question.choices) {
+      const selectedNames = question.choices
+        .filter((c) => defaultVal.includes(c.value))
+        .map((c) => c.name);
+      answerText = selectedNames.join(', ');
+    } else if (defaultVal !== undefined) {
+      answerText = String(defaultVal);
+    }
+
+    const line = `${prefix} ${question.message} ${answerText}`;
+    return colors.dim(line);
+  },
+
+  editor: (question: TypedQuestion) => {
+    const prefix = '?';
+    const answerText = question.default !== undefined ? '[Default Content]' : '';
+    const line = `${prefix} ${question.message} ${answerText}`;
+    return colors.dim(line);
+  },
+
+  password: (question: TypedQuestion) => {
+    const defaultVal = question.default;
+    const prefix = '?';
+    let answerText = '';
+
+    if (defaultVal !== undefined) {
+      answerText = '[PASSWORD SET]';
+    }
+
+    const line = `${prefix} ${question.message} ${answerText}`;
+    return colors.dim(line);
+  },
+
+  default: (question: TypedQuestion) => {
+    const prefix = '?';
+    const answer = question.default !== undefined ? String(question.default) : '';
+    const line = `${prefix} ${question.message} ${answer}`;
+    return colors.dim(line);
+  },
+  list: (question: TypedQuestion) => SkippedRenderer.select(question),
+  rawlist: (question: TypedQuestion) => SkippedRenderer.select(question),
+  input: (question: TypedQuestion) => SkippedRenderer.default(question),
+  number: (question: TypedQuestion) => SkippedRenderer.default(question),
+};
+
+export default SkippedRenderer;

yarn.lock

@@ -4720,6 +4720,7 @@ __metadata:
     run-async: "npm:^4.0.5"
     rxjs: "npm:^7.8.2"
     tshy: "npm:^3.0.2"
+    yoctocolors-cjs: "npm:^2.1.3"
   peerDependencies:
     "@types/node": ">=18"
   peerDependenciesMeta:
@@ -8663,7 +8664,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoctocolors-cjs@npm:^2.1.2":
+"yoctocolors-cjs@npm:^2.1.2, yoctocolors-cjs@npm:^2.1.3":
   version: 2.1.3
   resolution: "yoctocolors-cjs@npm:2.1.3"
   checksum: 10/b2144b38807673a4254dae06fe1a212729550609e606289c305e45c585b36fab1dbba44fe6cde90db9b28be465ec63f4c2a50867aeec6672f6bc36b6c9a361a0