honojs / create-hono

CLI for creating a Hono app
41 stars 12 forks source link

refactor: replace inquirer with prompts #25

Closed ryuapp closed 3 months ago

ryuapp commented 3 months ago

What's for

maybe fix #21 reduce bundle size(~150kb).

Description

prompts may not work properly on Deno due to node compat issues(https://github.com/denoland/deno/issues/17047). I'm not familiar with client libraries, so I chose the library that supports esm and has many stars. And I replaced inquirer with prompts.

I haven't tested with Deno because I don't know how to test with the command(deno run npm:create-hono). But for unit tests, inquirer work properly on Deno.

I leave simple and sloppy tests as an example.

prompts test This may not work properly on Deno. The characters you entered may not be displayed or the selection may not work. ```ts import prompts from "npm:prompts"; const response = await prompts({ type: "text", name: "value", message: "How old are you?", validate: (value) => value < 18 ? `Nightclub is 18+ only` : true, }); console.log(response); const response2 = await prompts({ type: "multiselect", name: "value", message: "Pick colors", choices: [ { title: "Red", value: "#ff0000" }, { title: "Green", value: "#00ff00", disabled: true }, { title: "Blue", value: "#0000ff", selected: true }, ], max: 2, hint: "- Space to select. Return to submit", }); console.log(response2); const response3 = await prompts({ type: "number", name: "value", message: "How old are you?", validate: (value) => value < 18 ? `Nightclub is 18+ only` : true, }); console.log(response3); const response4 = await prompts({ type: "multiselect", name: "value", message: "Pick colors", choices: [ { title: "Red", value: "#ff0000" }, { title: "Green", value: "#00ff00", disabled: true }, { title: "Blue", value: "#0000ff", selected: true }, ], max: 2, hint: "- Space to select. Return to submit", }); console.log(response4); ```
inquirer test This works on Deno. ```ts import { input, select, Separator } from "npm:@inquirer/prompts"; const response = await input({ message: "Enter your name" }); console.log(response); const response1 = await select({ message: "Select a package manager", choices: [ { name: "npm", value: "npm", description: "npm is the most popular package manager", }, { name: "yarn", value: "yarn", description: "yarn is an awesome package manager", }, ], }); console.log(response1); const response2 = await select({ message: "Select a package manager", choices: [ { name: "npm", value: "npm", description: "npm is the most popular package manager", }, { name: "yarn", value: "yarn", description: "yarn is an awesome package manager", }, new Separator(), { name: "jspm", value: "jspm", disabled: true, }, { name: "pnpm", value: "pnpm", disabled: "(pnpm is not available)", }, ], }); console.log(response2); const response3 = await select({ message: "Select a package manager", choices: [ { name: "npm", value: "npm", description: "npm is the most popular package manager", }, { name: "yarn", value: "yarn", description: "yarn is an awesome package manager", }, ], }); console.log(response3); const response4 = await input({ message: "Enter your name" }); console.log(response4); ```
yusukebe commented 3 months ago

@ryuapp

Great! I've done it to pass the CI and use chalk instead of kleur since inquirer uses it.

Let's go with it. Thanks!