Enquirer multi-step prompts

[MatissJanis]

Awesome work on bringing old listr back to life!

One small nuance that is pretty annoying though: currently listr2 does not have support for multi-step enquirer prompts. It would be amazing, if this feature could be added.

{
  title: "Configure",
  task: async (ctx, task) => {
    ctx.input = await task.prompt([
      {
        type: 'input',
        name: 'name',
        message: 'What is your name?'
      },
      {
        type: 'input',
        name: 'username',
        message: 'What is your username?'
      }
    ]);
  },
}

[cenk1cenk2]

I will have a look. It should be related to the problems with the types. Default types of enquirer was not working correctly for me so i kind of rewrite the parts i required which are not correct at all.

[cenk1cenk2]

It seems I can make this work somehow with making both of the task.prompt thingies an array but it will lose the autocomplete functionality. This task.prompt is a jumper function that calls whatever you select in the first argument without using the type in enquirer. I do not know why but the type was causing problems for me which I forgot already, so I made it this way.

ctx.input = await task.prompt<boolean>([ 'Select', 'Select' ], [ { message: 'Do you love me?', choices: [ 'test', 'test', 'test', 'test' ] }, { message: 'Do you love me?', choices: [ 'test', 'test', 'test', 'test' ] } ])

The thing that this way will not be reliable enough for type-checking at least out of my league to implement. But you can achieve the same thing as follows if you even want an array as an end result as does the original enquirer multiple prompts do.

    ctx.input.push(await task.prompt('input', {
        type: 'input',
        name: 'name',
        message: 'What is your name?'
      })
    ctx.input.push(await task.prompt('input', {
        type: 'input',
        name: 'username',
        message: 'What is your username?'
      })

If this is sufficient enough, please close out the issue. Elsewise it may need more brainstorming or changing it at the core. In the meantime I will try to remember why type was causing problems for me.

[MatissJanis]

Thanks for the super-quick response!

The above solution does indeed work for simple multi-step flows, but not for more advanced cases. For example, if using skip of enquirer.

Is there any particular reason that enquirer interface was changed? It would be very nice it we could use enquirer directly, without a gateway in this package.

[cenk1cenk2]

Since process.stdout is controlled by the package log-update for the default renderer, all packages that uses the stdout stream has to get passed through internally as data or it will mangle the log-update output. The problem that I encountered which I still fail to remember is while using enquirers exported types directly there were some mistakes in the types so I had adjusted them a little as a band-aid fix. While doing that if I used the type option in enquirer I had failed to get the autocomplete features of Typescript not reliable enough, this was a failure of myself. So I exported the type option in to its own variable and made a big switch that returns the prompt class directly. I should have an another go at this.

[cenk1cenk2]

🎉 This issue has been resolved in version 2.1.0-beta.2 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[cenk1cenk2]

Please check out the beta channel, installable by listr2@beta, this required some internal changes and due to it the way of requesting input from the user has changed a little.

Enquirer is now an optional dependency as well because I wanted to do that for quite some time. You should also explicitly install Enquirer to make this work.

I am looking forward to your feedback.

[MatissJanis]

Hey!

Just tested the beta channel. Enquirer arrays now work, which is very nice. However, there's some functionality that we have lost.

Given this prompt definition, the skip step will receive answers = "A" (a string) rather than an object as described in Enquirer docs.

[{
    type: "select",
    name: "firstInput",
    message: "Please select something",
    choices: ["A", "B", "C"],
},
{
    type: "input",
    name: "secondInput",
    message: "Please type something in:",
    skip: function (answers) {
      return answers.firstInput === "A";
    }
}]

Additionally, if validate step is provided, the listr prompt seems to hang-up.

[cenk1cenk2]

Validate seems to work for me like the one below. But skip does not pass in the results before it for me as well. But enquirer does not pass in the variable for skip I am not sure to have to check enquirer first.

      task: async (ctx, task): Promise<Record<string, boolean>> => ctx.input = await task.prompt<{ test: boolean, other: boolean }>([
        {
          type: 'Select',
          name: 'first',
          message: 'Please select something',
          choices: [ 'A', 'B', 'C' ],
          validate: (response): boolean | string => {
            //  i do declare you valid!
            if (response === 'A') {
              return true
            }
          }
        },
        {
          type: 'Input',
          name: 'second',
          message: 'Please type something in:',
          skip: (answers: { first: string }): boolean => {
            console.log(answers)
            return answers.first === 'A'
          }
        }
      ])

The result is not expected.

This seems the same with the enquirer as well.

  await Enquirer.prompt([
    {
      type: 'select',
      name: 'first',
      message: 'Please select something',
      choices: [ 'A', 'B', 'C' ],
      validate: (response): boolean | string => {
        //  i do declare you valid!
        if (response === 'A') {
          return true
        }
      }
    },
    {
      type: 'input',
      name: 'second',
      message: 'Please type something in:',
      skip: (answers: { first: string }): boolean => {
        console.log(answers)
        return answers.first === 'A'
      }
    }
  ])

[cenk1cenk2]

This might be a problem with enquirer itself. I think you can get along with it separating multiple prompts to multiple listr tasks. It might not be the perfect code below but something along those lines.

task = new Listr<Ctx>([
  {
    title: 'This task will get your input.',
    task: async (ctx, task): Promise<Record<string, boolean>> => ctx.input = await task.prompt<{ test: boolean, other: boolean }>({
        type: 'Select',
        name: 'first',
        message: 'Please select something',
        choices: [ 'A', 'B', 'C' ],
        validate: (response): boolean | string => {
          //  i do declare you valid!
          if (response === 'A') {
            return true
          }
        }
      })
  },
  {
    title: 'Now I will show the input value.',
    skip: () => ctx.input === false
    task: async (ctx, task): void => ctx.input = await task.prompt<{ test: boolean, other: boolean }>({
      type: 'Select',
      name: 'first',
      message: 'Please select something',
      choices: [ 'A', 'B', 'C' ],
      validate: (response): boolean | string => {
        //  i do declare you valid!
        if (response === 'A') {
          return true
        }
      }
    }),
    options: {
      persistentOutput: true
    }
  }
], { concurrent: false })

[MatissJanis]

Hey,

Yeah, currently I've separated the prompt tasks in individual listr steps. It's not ideal.. but works for now.

Judging from Enquirer type definitions, the skip method should have received an object. It's interesting that it doesn't.

[cenk1cenk2]

I might open a pull request to enquirer in upcoming days. I will close this issue again for now.

[cenk1cenk2]

🎉 This issue has been resolved in version 2.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀