Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: use @clack/prompts #9219

Merged
merged 3 commits into from
Feb 27, 2023
Merged

feat: use @clack/prompts #9219

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef599f1
use @clack/prompts
Rich-Harris Feb 26, 2023
420d4fb
Update .changeset/mighty-cars-wave.md
Rich-Harris Feb 27, 2023
859b4be
Update packages/create-svelte/bin.js
dummdidumm Feb 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/mighty-cars-wave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'create-svelte': major
Rich-Harris marked this conversation as resolved.
Show resolved Hide resolved
---

feat: use `@clack/prompts`
302 changes: 141 additions & 161 deletions packages/create-svelte/bin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,187 +1,167 @@
#!/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 <script lang="ts">');
} else if (options.types === 'checkjs') {
console.log(bold('✔ Type-checked JavaScript'));
console.log(' https://www.typescriptlang.org/tsconfig#checkJs');
} else if (options.template === 'skeletonlib') {
const warning = yellow('▲');
console.log(
`${warning} You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library`
);
}
if (fs.existsSync(cwd)) {
if (fs.readdirSync(cwd).length > 0) {
const force = await p.confirm({
message: 'Directory not empty. Continue?',
initialValue: false
});

if (options.eslint) {
console.log(bold('✔ ESLint'));
console.log(cyan(' https://github.com/sveltejs/eslint-plugin-svelte3'));
if (force !== true) {
dummdidumm marked this conversation as resolved.
Show resolved Hide resolved
process.exit(1);
}
}
}

if (options.prettier) {
console.log(bold('✔ Prettier'));
console.log(cyan(' https://prettier.io/docs/en/options.html'));
console.log(cyan(' https://github.com/sveltejs/prettier-plugin-svelte#options'));
}
const options = await p.group(
{
template: () =>
p.select({
message: 'Which Svelte app template?',
options: 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 {
label: title,
hint: description,
value: dir
};
})
}),

types: () =>
p.select({
message: 'Add type checking with TypeScript?',
options: [
{
label: 'Yes, using JavaScript with JSDoc comments',
value: 'checkjs'
},
{
label: 'Yes, using TypeScript syntax',
value: 'typescript'
},
{ label: 'No', value: null }
]
}),

features: () =>
p.multiselect({
message: 'Select additional options',
required: false,
options: [
{
value: 'eslint',
label: 'Add ESLint for code linting'
},
{
value: 'prettier',
label: 'Add Prettier for code formatting'
},
{
value: 'playwright',
label: 'Add Playwright for browser testing'
},
{
value: 'vitest',
label: 'Add Vitest for unit testing'
}
]
})
},
{ onCancel: () => process.exit(1) }
);

await create(cwd, {
name: path.basename(path.resolve(cwd)),
template: /** @type {'default' | 'skeleton' | 'skeletonlib'} */ (options.template),
types: options.types,
prettier: options.features.includes('prettier'),
eslint: options.features.includes('eslint'),
playwright: options.features.includes('playwright'),
vitest: options.features.includes('vitest')
});

p.outro(`Your project is ready!`);

if (options.types === 'typescript') {
console.log(bold('✔ Typescript'));
console.log(' Inside Svelte components, use <script lang="ts">\n');
} else if (options.types === 'checkjs') {
console.log(bold('✔ Type-checked JavaScript'));
console.log(cyan(' https://www.typescriptlang.org/tsconfig#checkJs\n'));
} else if (options.template === 'skeletonlib') {
const warning = yellow('▲');
console.log(
`${warning} You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library\n`
);
}

if (options.playwright) {
console.log(bold('✔ Playwright'));
console.log(cyan(' https://playwright.dev'));
}
if (options.features.includes('eslint')) {
console.log(bold('✔ ESLint'));
console.log(cyan(' https://github.com/sveltejs/eslint-plugin-svelte3\n'));
}

if (options.vitest) {
console.log(bold('✔ Vitest'));
console.log(cyan(' https://vitest.dev'));
}
if (options.features.includes('prettier')) {
console.log(bold('✔ Prettier'));
console.log(cyan(' https://prettier.io/docs/en/options.html'));
console.log(cyan(' https://github.com/sveltejs/prettier-plugin-svelte#options\n'));
}

console.log('\nInstall community-maintained integrations:');
console.log(cyan(' https://github.com/svelte-add/svelte-add'));
if (options.features.includes('playwright')) {
console.log(bold('✔ Playwright'));
console.log(cyan(' https://playwright.dev\n'));
}

console.log('\nNext steps:');
let i = 1;
if (options.features.includes('vitest')) {
console.log(bold('✔ Vitest'));
console.log(cyan(' https://vitest.dev\n'));
}

const relative = path.relative(process.cwd(), cwd);
if (relative !== '') {
console.log(` ${i++}: ${bold(cyan(`cd ${relative}`))}`);
}
console.log('Install community-maintained integrations:');
console.log(cyan(' https://github.com/svelte-add/svelte-add'));

console.log(` ${i++}: ${bold(cyan('npm install'))} (or pnpm install, etc)`);
// prettier-ignore
console.log(` ${i++}: ${bold(cyan('git init && git add -A && git commit -m "Initial commit"'))} (optional)`);
console.log(` ${i++}: ${bold(cyan('npm run dev -- --open'))}`);
console.log('\nNext steps:');
let i = 1;

console.log(`\nTo close the dev server, hit ${bold(cyan('Ctrl-C'))}`);
console.log(`\nStuck? Visit us at ${cyan('https://svelte.dev/chat')}`);
const relative = path.relative(process.cwd(), cwd);
if (relative !== '') {
console.log(` ${i++}: ${bold(cyan(`cd ${relative}`))}`);
}

main();
console.log(` ${i++}: ${bold(cyan('npm install'))} (or pnpm install, etc)`);
// prettier-ignore
console.log(` ${i++}: ${bold(cyan('git init && git add -A && git commit -m "Initial commit"'))} (optional)`);
console.log(` ${i++}: ${bold(cyan('npm run dev -- --open'))}`);

console.log(`\nTo close the dev server, hit ${bold(cyan('Ctrl-C'))}`);
console.log(`\nStuck? Visit us at ${cyan('https://svelte.dev/chat')}`);
4 changes: 2 additions & 2 deletions packages/create-svelte/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"bin": "./bin.js",
"main": "./index.js",
"dependencies": {
"kleur": "^4.1.5",
"prompts": "^2.4.2"
"@clack/prompts": "^0.6.0",
"kleur": "^4.1.5"
},
"devDependencies": {
"@playwright/test": "^1.28.1",
Expand Down
21 changes: 19 additions & 2 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.