feat: Use @clack/core instead of @inquirer/*

README.md

@@ -69,3 +69,5 @@ MIT
 
 This project source code is based on **Create Solid** MIT Licensed.
 <https://github.com/solidjs/solid-start/tree/main/packages/create-solid>
+
+`./src/prompts.ts` is based on [`@clack/prompts`](https://github.com/bombshell-dev/clack/tree/45ee73b/packages/prompts) MIT Licensed.

package.json

@@ -27,21 +27,20 @@
     "registry": "https://registry.npmjs.org"
   },
   "devDependencies": {
+    "@clack/core": "^0.3.4",
     "@hono/eslint-config": "^0.0.2",
-    "@inquirer/confirm": "^3.1.0",
-    "@inquirer/input": "^2.1.0",
-    "@inquirer/select": "^2.2.0",
     "@types/node": "^18.11.18",
     "@types/yargs-parser": "^21.0.0",
-    "chalk": "^5.3.0",
     "commander": "^12.1.0",
     "esbuild": "^0.16.17",
     "eslint": "^8.55.0",
     "execa": "^8.0.1",
     "giget": "^1.2.3",
-    "nanospinner": "^1.1.0",
+    "is-unicode-supported": "^2.0.0",
     "np": "^7.6.3",
+    "picocolors": "^1.1.0",
     "prettier": "^3.3.3",
+    "sisteransi": "^1.0.5",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "vitest": "^0.34.6"

src/hooks/dependencies.ts

@@ -1,12 +1,9 @@
 import { exec } from 'node:child_process'
 import type { EventEmitter } from 'node:events'
 import { chdir, exit } from 'node:process'
-import confirm from '@inquirer/confirm'
-import select from '@inquirer/select'
-import chalk from 'chalk'
 import { execa } from 'execa'
-import { createSpinner } from 'nanospinner'
 import { projectDependenciesHook } from '../hook'
+import { confirm, select, spinner } from '../prompts'
 
 type PackageManager = 'npm' | 'bun' | 'pnpm' | 'yarn'
 
@@ -50,7 +47,7 @@ const registerInstallationHook = (
     } else {
       installDeps = await confirm({
         message: 'Do you want to install project dependencies?',
-        default: true,
+        initialValue: true,
       })
     }
 
@@ -63,11 +60,10 @@ const registerInstallationHook = (
     } else {
       packageManager = await select({
         message: 'Which package manager do you want to use?',
-        choices: installedPackageManagerNames.map((template: string) => ({
-          title: template,
+        options: installedPackageManagerNames.map((template: string) => ({
           value: template,
         })),
-        default: currentPackageManager,
+        initialValue: currentPackageManager,
       })
     }
 
@@ -78,20 +74,17 @@ const registerInstallationHook = (
         exit(1)
       }
 
-      const spinner = createSpinner('Installing project dependencies').start()
+      const s = spinner()
+      s.start('Installing project dependencies')
       const proc = exec(knownPackageManagers[packageManager])
-
       const procExit: number = await new Promise((res) => {
         proc.on('exit', (code) => res(code == null ? 0xff : code))
       })
 
       if (procExit === 0) {
-        spinner.success()
+        s.stop('Installed successfully.')
       } else {
-        spinner.stop({
-          mark: chalk.red('×'),
-          text: 'Failed to install project dependencies',
-        })
+        s.stop('Failed to install project dependencies', 1)
         exit(procExit)
       }
 

src/index.ts

@@ -1,13 +1,9 @@
 import EventEmitter from 'node:events'
 import fs from 'node:fs'
 import path from 'node:path'
-import confirm from '@inquirer/confirm'
-import input from '@inquirer/input'
-import select from '@inquirer/select'
-import chalk from 'chalk'
 import { Option, program, type Command } from 'commander'
 import { downloadTemplate } from 'giget'
-import { createSpinner } from 'nanospinner'
+import color from 'picocolors'
 import { version } from '../package.json'
 import { projectDependenciesHook } from './hook'
 import { afterCreateHook } from './hooks/after-create'
@@ -16,6 +12,7 @@ import {
   knownPackageManagerNames,
   registerInstallationHook,
 } from './hooks/dependencies'
+import { confirm, select, spinner, text } from './prompts'
 
 const directoryName = 'templates'
 const config = {
@@ -87,20 +84,21 @@ async function main(
   options: ArgOptions,
   command: Command,
 ) {
-  console.log(chalk.gray(`${command.name()} version ${command.version()}`))
+  console.log(color.gray(`${command.name()} version ${command.version()}`))
 
   const { install, pm, offline, template: templateArg } = options
 
   let target = ''
   if (targetDir) {
     target = targetDir
     console.log(
-      `${chalk.bold(`${chalk.green('✔')} Using target directory`)} … ${target}`,
+      `${color.bold(`${color.green('✔')} Using target directory`)} … ${target}`,
     )
   } else {
-    const answer = await input({
+    const answer = await text({
       message: 'Target directory',
-      default: 'my-app',
+      placeholder: 'my-app',
+      defaultValue: 'my-app',
     })
     target = answer
   }
@@ -115,13 +113,10 @@ async function main(
   const templateName =
     templateArg ||
     (await select({
-      loop: true,
       message: 'Which template do you want to use?',
-      choices: templates.map((template) => ({
-        title: template,
+      options: templates.map((template) => ({
         value: template,
       })),
-      default: 0,
     }))
 
   if (!templateName) {
@@ -136,7 +131,7 @@ async function main(
     if (fs.readdirSync(target).length > 0) {
       const response = await confirm({
         message: 'Directory not empty. Continue?',
-        default: false,
+        initialValue: false,
       })
       if (!response) {
         process.exit(1)
@@ -159,7 +154,8 @@ async function main(
       }),
     )
 
-    const spinner = createSpinner('Cloning the template').start()
+    const s = spinner()
+    s.start('Cloning the template')
 
     await downloadTemplate(
       `gh:${config.user}/${config.repository}/${config.directory}/${templateName}#${config.ref}`,
@@ -169,7 +165,7 @@ async function main(
         force: true,
       },
     ).then(() => {
-      spinner.success()
+      s.stop('Cloned.')
       emitter.emit('dependencies')
     })
 
@@ -200,8 +196,8 @@ async function main(
   }
 
   emitter.on('completed', () => {
-    console.log(chalk.green(`🎉 ${chalk.bold('Copied project files')}`))
-    console.log(chalk.gray('Get started with:'), chalk.bold(`cd ${target}`))
+    console.log(color.green(`🎉 ${color.bold('Copied project files')}`))
+    console.log(color.gray('Get started with:'), color.bold(`cd ${target}`))
   })
 }