From a3617d39f81c400104c6ebd98253c470843ee004 Mon Sep 17 00:00:00 2001 From: Michael Brown Date: Mon, 22 Apr 2024 11:41:28 +1000 Subject: [PATCH 1/6] feat: project name from 1st param with path --- packages/create-vite/src/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index ea22e52c2384a7..ca66dcf5a688ef 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -252,8 +252,7 @@ async function init() { const argTemplate = argv.template || argv.t let targetDir = argTargetDir || defaultTargetDir - const getProjectName = () => - targetDir === '.' ? path.basename(path.resolve()) : targetDir + const getProjectName = () => path.basename(path.resolve(targetDir)) let result: prompts.Answers< 'projectName' | 'overwrite' | 'packageName' | 'framework' | 'variant' From 4607b663d4bcadb6c0b6772dd0f1b1242cd5e39e Mon Sep 17 00:00:00 2001 From: Michael Brown Date: Mon, 22 Apr 2024 14:46:14 +1000 Subject: [PATCH 2/6] docs: project name param doubles as target folder --- docs/guide/index.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/guide/index.md b/docs/guide/index.md index f76d0237918472..c11e5a24f99eaf 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -69,7 +69,7 @@ $ bun create vite Then follow the prompts! -You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run: +You can also directly specify the project name as the first parameter, and then template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run: ```bash # npm 7+, extra double-dash is needed: @@ -85,6 +85,20 @@ pnpm create vite my-vue-app --template vue bun create vite my-vue-app --template vue ``` +The project name parameter also doubles as the target folder for your new Vite project. So the command: + +```bash +npm create vite@latest my-vue-app -- --template vue +``` + +Will create your new project in the folder ./my-vue-app as a sub-folder of the folder from which you invoked the command, as well as setting its project name to "my-vue-app". If your project name/folder parameter contains a path then the project name will be taken from the deepest level folder of that path. So the the command: + +```bash +npm create vite@latest ./my-sub-folder/my-vue-app -- --template vue +``` + +will create the project in that target folder, but set its project name to just "my-vue-app" again. + See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each supported template: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `react-swc`, `react-swc-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`, `solid`, `solid-ts`, `qwik`, `qwik-ts`. You can use `.` for the project name to scaffold in the current directory. From 0f73ef7757a340e426e6d521f2dbfb27168ffc26 Mon Sep 17 00:00:00 2001 From: Michael Brown Date: Mon, 22 Apr 2024 17:19:41 +1000 Subject: [PATCH 3/6] chore: cli test override non-empty with subfolder --- packages/create-vite/__tests__/cli.spec.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/create-vite/__tests__/cli.spec.ts b/packages/create-vite/__tests__/cli.spec.ts index 4f297032834fcf..9ac68afa5d9cb2 100644 --- a/packages/create-vite/__tests__/cli.spec.ts +++ b/packages/create-vite/__tests__/cli.spec.ts @@ -5,9 +5,12 @@ import fs from 'fs-extra' import { afterEach, beforeAll, expect, test } from 'vitest' const CLI_PATH = join(__dirname, '..') +console.log('TCL ~ CLI_PATH:', CLI_PATH) const projectName = 'test-app' const genPath = join(__dirname, projectName) +const genPathWithSubfolder = join(__dirname, 'subfolder', projectName) +console.log('TCL ~ genPathWithSubfolder:', { genPath, genPathWithSubfolder }) const run = ( args: string[], @@ -17,12 +20,13 @@ const run = ( } // Helper to create a non-empty directory -const createNonEmptyDir = () => { +const createNonEmptyDir = (overrideFolder?: string) => { // Create the temporary directory - fs.mkdirpSync(genPath) + const newNonEmptyFolder = overrideFolder || genPath + fs.mkdirpSync(newNonEmptyFolder) // Create a package.json file - const pkgJson = join(genPath, 'package.json') + const pkgJson = join(newNonEmptyFolder, 'package.json') fs.writeFileSync(pkgJson, '{ "foo": "bar" }') } @@ -70,6 +74,14 @@ test('asks to overwrite non-empty target directory', () => { expect(stdout).toContain(`Target directory "${projectName}" is not empty.`) }) +test('asks to overwrite non-empty target directory with subfolder', () => { + createNonEmptyDir(genPathWithSubfolder) + const { stdout } = run([`subfolder/${projectName}`], { cwd: __dirname }) + expect(stdout).toContain( + `Target directory "subfolder/${projectName}" is not empty.`, + ) +}) + test('asks to overwrite non-empty current directory', () => { createNonEmptyDir() const { stdout } = run(['.'], { cwd: genPath }) From e41660cb5787592ac6ba39c8273e3df386d3c3af Mon Sep 17 00:00:00 2001 From: Michael Brown Date: Mon, 22 Apr 2024 17:47:19 +1000 Subject: [PATCH 4/6] chore: new test scaffold react with subfolder --- packages/create-vite/__tests__/cli.spec.ts | 41 +++++++++++++++++++--- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/packages/create-vite/__tests__/cli.spec.ts b/packages/create-vite/__tests__/cli.spec.ts index 9ac68afa5d9cb2..ab65afecff6b51 100644 --- a/packages/create-vite/__tests__/cli.spec.ts +++ b/packages/create-vite/__tests__/cli.spec.ts @@ -5,12 +5,10 @@ import fs from 'fs-extra' import { afterEach, beforeAll, expect, test } from 'vitest' const CLI_PATH = join(__dirname, '..') -console.log('TCL ~ CLI_PATH:', CLI_PATH) const projectName = 'test-app' const genPath = join(__dirname, projectName) const genPathWithSubfolder = join(__dirname, 'subfolder', projectName) -console.log('TCL ~ genPathWithSubfolder:', { genPath, genPathWithSubfolder }) const run = ( args: string[], @@ -37,8 +35,32 @@ const templateFiles = fs .map((filePath) => (filePath === '_gitignore' ? '.gitignore' : filePath)) .sort() -beforeAll(() => fs.remove(genPath)) -afterEach(() => fs.remove(genPath)) +// React starter template +const templateFilesReact = fs + .readdirSync(join(CLI_PATH, 'template-react')) + // _gitignore is renamed to .gitignore + .map((filePath) => (filePath === '_gitignore' ? '.gitignore' : filePath)) + .sort() + +// beforeAll(() => fs.remove(genPath)) +// afterEach(() => fs.remove(genPath)) +beforeAll(() => { + if (fs.existsSync(genPath)) { + fs.removeSync(genPath) + } + if (fs.existsSync(genPathWithSubfolder)) { + fs.removeSync(genPathWithSubfolder) + } +}) + +afterEach(() => { + if (fs.existsSync(genPath)) { + fs.removeSync(genPath) + } + if (fs.existsSync(genPathWithSubfolder)) { + fs.removeSync(genPathWithSubfolder) + } +}) test('prompts for the project name if none supplied', () => { const { stdout } = run([]) @@ -99,6 +121,17 @@ test('successfully scaffolds a project based on vue starter template', () => { expect(templateFiles).toEqual(generatedFiles) }) +test('successfully scaffolds a project with subfolder based on react starter template', () => { + const { stdout } = run([`subfolder/${projectName}`, '--template', 'react'], { + cwd: __dirname, + }) + const generatedFiles = fs.readdirSync(genPathWithSubfolder).sort() + + // Assertions + expect(stdout).toContain(`Scaffolding project in ${genPathWithSubfolder}`) + expect(templateFilesReact).toEqual(generatedFiles) +}) + test('works with the -t alias', () => { const { stdout } = run([projectName, '-t', 'vue'], { cwd: __dirname, From 6ac330358738de586f901d6d8d10f4b2a0309f6a Mon Sep 17 00:00:00 2001 From: Michael Brown Date: Mon, 22 Apr 2024 17:49:37 +1000 Subject: [PATCH 5/6] chore: tidy up --- packages/create-vite/__tests__/cli.spec.ts | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/create-vite/__tests__/cli.spec.ts b/packages/create-vite/__tests__/cli.spec.ts index ab65afecff6b51..7469ac09392696 100644 --- a/packages/create-vite/__tests__/cli.spec.ts +++ b/packages/create-vite/__tests__/cli.spec.ts @@ -42,25 +42,17 @@ const templateFilesReact = fs .map((filePath) => (filePath === '_gitignore' ? '.gitignore' : filePath)) .sort() -// beforeAll(() => fs.remove(genPath)) -// afterEach(() => fs.remove(genPath)) -beforeAll(() => { +const clearAnyPreviousFolders = () => { if (fs.existsSync(genPath)) { fs.removeSync(genPath) } if (fs.existsSync(genPathWithSubfolder)) { fs.removeSync(genPathWithSubfolder) } -}) +} -afterEach(() => { - if (fs.existsSync(genPath)) { - fs.removeSync(genPath) - } - if (fs.existsSync(genPathWithSubfolder)) { - fs.removeSync(genPathWithSubfolder) - } -}) +beforeAll(() => clearAnyPreviousFolders()) +afterEach(() => clearAnyPreviousFolders()) test('prompts for the project name if none supplied', () => { const { stdout } = run([]) From 7fc8d086d9244ae86bbfe07702487921d31421b7 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 5 Nov 2024 13:12:34 +0800 Subject: [PATCH 6/6] chore: revert unnecessary stuff --- docs/guide/index.md | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/docs/guide/index.md b/docs/guide/index.md index c11e5a24f99eaf..f76d0237918472 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -69,7 +69,7 @@ $ bun create vite Then follow the prompts! -You can also directly specify the project name as the first parameter, and then template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run: +You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run: ```bash # npm 7+, extra double-dash is needed: @@ -85,20 +85,6 @@ pnpm create vite my-vue-app --template vue bun create vite my-vue-app --template vue ``` -The project name parameter also doubles as the target folder for your new Vite project. So the command: - -```bash -npm create vite@latest my-vue-app -- --template vue -``` - -Will create your new project in the folder ./my-vue-app as a sub-folder of the folder from which you invoked the command, as well as setting its project name to "my-vue-app". If your project name/folder parameter contains a path then the project name will be taken from the deepest level folder of that path. So the the command: - -```bash -npm create vite@latest ./my-sub-folder/my-vue-app -- --template vue -``` - -will create the project in that target folder, but set its project name to just "my-vue-app" again. - See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each supported template: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `react-swc`, `react-swc-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`, `solid`, `solid-ts`, `qwik`, `qwik-ts`. You can use `.` for the project name to scaffold in the current directory.