diff --git a/.changeset/mighty-cars-wave.md b/.changeset/mighty-cars-wave.md new file mode 100644 index 000000000000..14ae99f6484a --- /dev/null +++ b/.changeset/mighty-cars-wave.md @@ -0,0 +1,5 @@ +--- +'create-svelte': minor +--- + +feat: use `@clack/prompts` diff --git a/packages/create-svelte/bin.js b/packages/create-svelte/bin.js index ac920608233c..f9e109b5e749 100755 --- a/packages/create-svelte/bin.js +++ b/packages/create-svelte/bin.js @@ -1,187 +1,168 @@ #!/usr/bin/env node import fs from 'node:fs'; import path from 'node:path'; -import { bold, cyan, gray, green, yellow } from 'kleur/colors'; -import prompts from 'prompts'; +import * as p from '@clack/prompts'; +import { bold, cyan, grey, yellow } from 'kleur/colors'; import { create } from './index.js'; import { dist } from './utils.js'; -// prettier-ignore -const disclaimer = ` -${bold(cyan('Welcome to SvelteKit!'))} -`; - const { version } = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf-8')); +let cwd = process.argv[2] || '.'; -async function main() { - console.log(gray(`\ncreate-svelte version ${version}`)); - console.log(disclaimer); +console.log(` +${grey(`create-svelte version ${version}`)} +`); - let cwd = process.argv[2] || '.'; +p.intro('Welcome to SvelteKit!'); - if (cwd === '.') { - const opts = await prompts([ - { - type: 'text', - name: 'dir', - message: 'Where should we create your project?\n (leave blank to use current directory)' - } - ]); +if (cwd === '.') { + const dir = await p.text({ + message: 'Where should we create your project?', + placeholder: ' (hit Enter to use current directory)' + }); - if (opts.dir) { - cwd = opts.dir; - } - } + if (p.isCancel(dir)) process.exit(1); - if (fs.existsSync(cwd)) { - if (fs.readdirSync(cwd).length > 0) { - const response = await prompts({ - type: 'confirm', - name: 'value', - message: 'Directory not empty. Continue?', - initial: false - }); - - if (!response.value) { - process.exit(1); - } - } + if (dir) { + cwd = /** @type {string} */ (dir); } +} - const options = /** @type {import('./types/internal').Options} */ ( - await prompts( - [ - { - type: 'select', - name: 'template', - message: 'Which Svelte app template?', - choices: fs.readdirSync(dist('templates')).map((dir) => { - const meta_file = dist(`templates/${dir}/meta.json`); - const { title, description } = JSON.parse(fs.readFileSync(meta_file, 'utf8')); - - return { - title, - description, - value: dir - }; - }) - }, - { - type: 'select', - name: 'types', - message: 'Add type checking with TypeScript?', - initial: false, - choices: [ - { - title: 'Yes, using JavaScript with JSDoc comments', - value: 'checkjs' - }, - { - title: 'Yes, using TypeScript syntax', - value: 'typescript' - }, - { title: 'No', value: null } - ] - }, - { - type: 'toggle', - name: 'eslint', - message: 'Add ESLint for code linting?', - initial: false, - active: 'Yes', - inactive: 'No' - }, - { - type: 'toggle', - name: 'prettier', - message: 'Add Prettier for code formatting?', - initial: false, - active: 'Yes', - inactive: 'No' - }, - { - type: 'toggle', - name: 'playwright', - message: 'Add Playwright for browser testing?', - initial: false, - active: 'Yes', - inactive: 'No' - }, - { - type: 'toggle', - name: 'vitest', - message: 'Add Vitest for unit testing?', - initial: false, - active: 'Yes', - inactive: 'No' - } - ], - { - onCancel: () => { - process.exit(1); - } - } - ) - ); - - options.name = path.basename(path.resolve(cwd)); - - await create(cwd, options); - - console.log(bold(green('\nYour project is ready!'))); - - if (options.types === 'typescript') { - console.log(bold('✔ Typescript')); - console.log(' Inside Svelte components, use