From 5f401f17f70524c658773b5630ba8cfda605a803 Mon Sep 17 00:00:00 2001 From: edvardsanta Date: Tue, 9 Apr 2024 14:57:27 -0300 Subject: [PATCH 1/6] Create help argument - help argument will be used as "--help" and by default it is false --- packages/create-vite/src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index ea22e52c2384a7..765388452278c1 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -22,7 +22,8 @@ import { const argv = minimist<{ t?: string template?: string -}>(process.argv.slice(2), { string: ['_'] }) + help: boolean +}>(process.argv.slice(2), { default: { help: false }, string: ['_'] }) const cwd = process.cwd() type ColorFunc = (str: string | number) => string From b560ccfec108f62b2d69a50028b34df6808593d3 Mon Sep 17 00:00:00 2001 From: edvardsanta Date: Tue, 9 Apr 2024 19:51:21 -0300 Subject: [PATCH 2/6] Create function to display help - i want to find a way to decouple the text from the code --- packages/create-vite/src/index.ts | 48 ++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index 765388452278c1..a930e4acf8e2c6 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -251,7 +251,8 @@ const defaultTargetDir = 'vite-project' async function init() { const argTargetDir = formatTargetDir(argv._[0]) const argTemplate = argv.template || argv.t - + const help = argv.help + showHelper(help) let targetDir = argTargetDir || defaultTargetDir const getProjectName = () => targetDir === '.' ? path.basename(path.resolve()) : targetDir @@ -566,6 +567,51 @@ function editFile(file: string, callback: (content: string) => string) { fs.writeFileSync(file, callback(content), 'utf-8') } +function showHelper(help: boolean) { + const formattedHelpText = getUsageInfo() + + if (help) { + prompts({ + type: 'text', + name: 'help text', + message: formattedHelpText, + }) + process.exit(0) + } +} + +function getUsageInfo() { + const formattedFrameworkNames = getFormattedVariantNames() + return `Usage: create-vite [OPTION]... [DIRECTORY] +Create a new JavaScript project based on Vite. + +With no arguments, start an interactive command line dialog. + +Options: + -t, --template NAME use this template + +Available templates: +${formattedFrameworkNames.join('\n')}` +} + +function getFormattedVariantNames() { + const variantNames: string[] = [] + FRAMEWORKS.forEach((framework) => { + if ( + framework.name !== 'others' && + framework.variants && + framework.variants.length > 0 + ) { + framework.variants.forEach((variant) => { + const colorize = framework.color + variantNames.push(colorize(variant.name)) + }) + } + }) + + return variantNames +} + init().catch((e) => { console.error(e) }) From 47392ba1026cc703ea3c48e4b2c6c8363165c750 Mon Sep 17 00:00:00 2001 From: edvardsanta Date: Thu, 11 Apr 2024 01:12:44 -0300 Subject: [PATCH 3/6] Modified display - Using alias to define template and help --- packages/create-vite/__tests__/cli.spec.ts | 12 ++++++ packages/create-vite/src/index.ts | 47 +++++++++------------- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/create-vite/__tests__/cli.spec.ts b/packages/create-vite/__tests__/cli.spec.ts index e34d4e14f6e4cf..c79912b907fceb 100644 --- a/packages/create-vite/__tests__/cli.spec.ts +++ b/packages/create-vite/__tests__/cli.spec.ts @@ -103,3 +103,15 @@ test('accepts command line override for --overwrite', () => { const { stdout } = run(['.', '--overwrite', 'ignore'], { cwd: genPath }) expect(stdout).not.toContain(`Current directory is not empty.`) }) + +test('return help usage how to use create-vite with -h alias', () => { + const { stdout } = run(['--help'], { cwd: __dirname }) + const message = 'Usage: create-vite [OPTION]... [DIRECTORY]' + expect(stdout).toContain(message) +}) + +test('return help usage how to use create-vite', () => { + const { stdout } = run(['--h'], { cwd: __dirname }) + const message = 'Usage: create-vite [OPTION]... [DIRECTORY]' + expect(stdout).toContain(message) +}) diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index a930e4acf8e2c6..05b0252a2fcd84 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -20,10 +20,13 @@ import { // Avoids autoconversion to number of the project name by defining that the args // non associated with an option ( _ ) needs to be parsed as a string. See #4606 const argv = minimist<{ - t?: string template?: string - help: boolean -}>(process.argv.slice(2), { default: { help: false }, string: ['_'] }) + help?: boolean +}>(process.argv.slice(2), { + default: { help: false }, + alias: { h: 'help', t: 'template' }, + string: ['_'], +}) const cwd = process.cwd() type ColorFunc = (str: string | number) => string @@ -251,8 +254,13 @@ const defaultTargetDir = 'vite-project' async function init() { const argTargetDir = formatTargetDir(argv._[0]) const argTemplate = argv.template || argv.t + const help = argv.help - showHelper(help) + if (help) { + showHelper() + return + } + let targetDir = argTargetDir || defaultTargetDir const getProjectName = () => targetDir === '.' ? path.basename(path.resolve()) : targetDir @@ -567,17 +575,9 @@ function editFile(file: string, callback: (content: string) => string) { fs.writeFileSync(file, callback(content), 'utf-8') } -function showHelper(help: boolean) { +function showHelper() { const formattedHelpText = getUsageInfo() - - if (help) { - prompts({ - type: 'text', - name: 'help text', - message: formattedHelpText, - }) - process.exit(0) - } + console.log(formattedHelpText) } function getUsageInfo() { @@ -595,21 +595,12 @@ ${formattedFrameworkNames.join('\n')}` } function getFormattedVariantNames() { - const variantNames: string[] = [] - FRAMEWORKS.forEach((framework) => { - if ( - framework.name !== 'others' && - framework.variants && - framework.variants.length > 0 - ) { - framework.variants.forEach((variant) => { - const colorize = framework.color - variantNames.push(colorize(variant.name)) - }) - } + return FRAMEWORKS.filter( + (framework) => framework.name !== 'others' && framework.variants.length > 0, + ).map((framework) => { + const variantNames = framework.variants.map((variant) => variant.name) + return `${variantNames.join(' ')}` }) - - return variantNames } init().catch((e) => { From adfcd0e12e92af0e14caab96934e354cef120b99 Mon Sep 17 00:00:00 2001 From: edvardsanta Date: Thu, 6 Jun 2024 11:37:27 -0300 Subject: [PATCH 4/6] Decouple help message for improved maintainability - To improve maintainability, the help message has been moved to a separate file. - Implemented the suggestions provided in the pull request. --- packages/create-vite/src/help.ts | 13 +++++++++++++ packages/create-vite/src/index.ts | 24 +++++++----------------- 2 files changed, 20 insertions(+), 17 deletions(-) create mode 100644 packages/create-vite/src/help.ts diff --git a/packages/create-vite/src/help.ts b/packages/create-vite/src/help.ts new file mode 100644 index 00000000000000..e1116e44cd3dee --- /dev/null +++ b/packages/create-vite/src/help.ts @@ -0,0 +1,13 @@ +const helpMessage = `Usage: create-vite [OPTION]... [DIRECTORY] +Create a new Vite project in JavaScript or TypeScript. + +With no arguments, start an interactive command line dialog. + +Options: + -t, --template NAME use this template + +Available templates:` +export function getUsageInfo(formattedFrameworkNames: string[]): string { + return `${helpMessage} +${formattedFrameworkNames.join('\n')}` +} diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index 05b0252a2fcd84..b66d24039f7d3d 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -16,6 +16,7 @@ import { reset, yellow, } from 'kolorist' +import { getUsageInfo } from './help' // Avoids autoconversion to number of the project name by defining that the args // non associated with an option ( _ ) needs to be parsed as a string. See #4606 @@ -576,30 +577,19 @@ function editFile(file: string, callback: (content: string) => string) { } function showHelper() { - const formattedHelpText = getUsageInfo() - console.log(formattedHelpText) -} - -function getUsageInfo() { const formattedFrameworkNames = getFormattedVariantNames() - return `Usage: create-vite [OPTION]... [DIRECTORY] -Create a new JavaScript project based on Vite. - -With no arguments, start an interactive command line dialog. - -Options: - -t, --template NAME use this template - -Available templates: -${formattedFrameworkNames.join('\n')}` + const formattedHelpText = getUsageInfo(formattedFrameworkNames) + console.log(formattedHelpText) } function getFormattedVariantNames() { return FRAMEWORKS.filter( (framework) => framework.name !== 'others' && framework.variants.length > 0, ).map((framework) => { - const variantNames = framework.variants.map((variant) => variant.name) - return `${variantNames.join(' ')}` + const variantNames = framework.variants + .filter((variant) => !variant.customCommand) + .map((variant) => variant.name) + return variantNames.join('\n') }) } From 442b883641e8a7aa858794d911d17d125a1b3f52 Mon Sep 17 00:00:00 2001 From: edvardsanta Date: Thu, 6 Jun 2024 11:38:38 -0300 Subject: [PATCH 5/6] modified test --- packages/create-vite/__tests__/cli.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-vite/__tests__/cli.spec.ts b/packages/create-vite/__tests__/cli.spec.ts index c79912b907fceb..5ffee3bf9fd8e4 100644 --- a/packages/create-vite/__tests__/cli.spec.ts +++ b/packages/create-vite/__tests__/cli.spec.ts @@ -104,13 +104,13 @@ test('accepts command line override for --overwrite', () => { expect(stdout).not.toContain(`Current directory is not empty.`) }) -test('return help usage how to use create-vite with -h alias', () => { +test('return help usage how to use create-vite', () => { const { stdout } = run(['--help'], { cwd: __dirname }) const message = 'Usage: create-vite [OPTION]... [DIRECTORY]' expect(stdout).toContain(message) }) -test('return help usage how to use create-vite', () => { +test('return help usage how to use create-vite with -h alias', () => { const { stdout } = run(['--h'], { cwd: __dirname }) const message = 'Usage: create-vite [OPTION]... [DIRECTORY]' expect(stdout).toContain(message) From 41fe022284485373142d0fc40aa8e401f96a7bfc Mon Sep 17 00:00:00 2001 From: bluwy Date: Thu, 13 Jun 2024 22:43:58 +0800 Subject: [PATCH 6/6] chore: hardcode the help message --- packages/create-vite/src/help.ts | 13 ---------- packages/create-vite/src/index.ts | 41 +++++++++++++++++-------------- 2 files changed, 22 insertions(+), 32 deletions(-) delete mode 100644 packages/create-vite/src/help.ts diff --git a/packages/create-vite/src/help.ts b/packages/create-vite/src/help.ts deleted file mode 100644 index e1116e44cd3dee..00000000000000 --- a/packages/create-vite/src/help.ts +++ /dev/null @@ -1,13 +0,0 @@ -const helpMessage = `Usage: create-vite [OPTION]... [DIRECTORY] -Create a new Vite project in JavaScript or TypeScript. - -With no arguments, start an interactive command line dialog. - -Options: - -t, --template NAME use this template - -Available templates:` -export function getUsageInfo(formattedFrameworkNames: string[]): string { - return `${helpMessage} -${formattedFrameworkNames.join('\n')}` -} diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index b66d24039f7d3d..ce52b4f63f10c7 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -16,7 +16,6 @@ import { reset, yellow, } from 'kolorist' -import { getUsageInfo } from './help' // Avoids autoconversion to number of the project name by defining that the args // non associated with an option ( _ ) needs to be parsed as a string. See #4606 @@ -30,6 +29,27 @@ const argv = minimist<{ }) const cwd = process.cwd() +// prettier-ignore +const helpMessage = `\ +Usage: create-vite [OPTION]... [DIRECTORY] + +Create a new Vite project in JavaScript or TypeScript. +With no arguments, start the CLI in interactive mode. + +Options: + -t, --template NAME use a specific template + +Available templates: +${yellow ('vanilla-ts vanilla' )} +${green ('vue-ts vue' )} +${cyan ('react-ts react' )} +${cyan ('react-swc-ts react-swc')} +${magenta ('preact-ts preact' )} +${lightRed ('lit-ts lit' )} +${red ('svelte-ts svelte' )} +${blue ('solid-ts solid' )} +${lightBlue('qwik-ts qwik' )}` + type ColorFunc = (str: string | number) => string type Framework = { name: string @@ -258,7 +278,7 @@ async function init() { const help = argv.help if (help) { - showHelper() + console.log(helpMessage) return } @@ -576,23 +596,6 @@ function editFile(file: string, callback: (content: string) => string) { fs.writeFileSync(file, callback(content), 'utf-8') } -function showHelper() { - const formattedFrameworkNames = getFormattedVariantNames() - const formattedHelpText = getUsageInfo(formattedFrameworkNames) - console.log(formattedHelpText) -} - -function getFormattedVariantNames() { - return FRAMEWORKS.filter( - (framework) => framework.name !== 'others' && framework.variants.length > 0, - ).map((framework) => { - const variantNames = framework.variants - .filter((variant) => !variant.customCommand) - .map((variant) => variant.name) - return variantNames.join('\n') - }) -} - init().catch((e) => { console.error(e) })