Skip to content

feat(create-vite): add support for custom init commands (create-vue, Nuxt, and SvelteKit) #9406

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

Merged
patak-cat merged 7 commits into from
Aug 26, 2022
+71 −11
Merged

feat(create-vite): add support for custom init commands (create-vue, Nuxt, and SvelteKit) #9406

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1a325cb
fix: should use the `display` field as title whenver possible
haoqunjiang Jul 28, 2022
d5f3198
chore: use upper-case display name for frameworks too
haoqunjiang Jul 28, 2022
6bc8220
feat: support more options with custom init commands
haoqunjiang Jul 28, 2022
b42d460
chore: remove the "Basic" prefix from display names
haoqunjiang Aug 1, 2022
9847658
fix: support Windows with `cross-spawn`
haoqunjiang Aug 2, 2022
a153e9b
refactor: replace `npx` with `npm exec` and `yarn/pnpm dlx`
haoqunjiang Aug 2, 2022
98c6aad
fix: typo (should be a regex)
haoqunjiang Aug 2, 2022
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
68 changes: 59 additions & 9 deletions packages/create-vite/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@
import fs from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { spawnSync } from 'node:child_process'
import minimist from 'minimist'
import prompts from 'prompts'
import {
blue,
cyan,
green,
lightGreen,
lightRed,
magenta,
red,
Expand All @@ -25,6 +27,7 @@ const cwd = process.cwd()
const FRAMEWORKS = [
{
name: 'vanilla',
display: 'Vanilla',
color: yellow,
variants: [
{
Expand All @@ -41,22 +44,36 @@ const FRAMEWORKS = [
},
{
name: 'vue',
display: 'Vue',
color: green,
variants: [
{
name: 'vue',
display: 'JavaScript',
display: 'Basic JavaScript',
Comment thread
haoqunjiang marked this conversation as resolved.
Outdated
color: yellow
},
{
name: 'vue-ts',
display: 'TypeScript',
display: 'Basic TypeScript',
color: blue
},
{
name: 'custom-create-vue',
display: 'Customize with create-vue',
color: green,
customCommand: 'npm create vue@latest TARGET_DIR'
},
{
name: 'custom-nuxt',
display: 'Nuxt',
color: lightGreen,
customCommand: 'npx nuxi init TARGET_DIR'
}
]
},
{
name: 'react',
display: 'React',
color: cyan,
variants: [
{
Expand All @@ -73,6 +90,7 @@ const FRAMEWORKS = [
},
{
name: 'preact',
display: 'Preact',
color: magenta,
variants: [
{
Expand All @@ -89,6 +107,7 @@ const FRAMEWORKS = [
},
{
name: 'lit',
display: 'Lit',
color: lightRed,
variants: [
{
Expand All @@ -105,17 +124,24 @@ const FRAMEWORKS = [
},
{
name: 'svelte',
display: 'Svelte',
color: red,
variants: [
{
name: 'svelte',
display: 'JavaScript',
display: 'Basic JavaScript',
color: yellow
},
{
name: 'svelte-ts',
display: 'TypeScript',
display: 'Basic TypeScript',
color: blue
},
{
name: 'custom-svelte-kit',
display: 'SvelteKit',
color: red,
customCommand: 'npm create svelte@latest TARGET_DIR'
}
]
}
Expand Down Expand Up @@ -191,7 +217,7 @@ async function init() {
choices: FRAMEWORKS.map((framework) => {
const frameworkColor = framework.color
return {
title: frameworkColor(framework.name),
title: frameworkColor(framework.display || framework.name),
value: framework
}
})
Expand All @@ -206,7 +232,7 @@ async function init() {
framework.variants.map((variant) => {
const variantColor = variant.color
return {
title: variantColor(variant.name),
title: variantColor(variant.display || variant.name),
value: variant.name
}
})
Expand Down Expand Up @@ -237,6 +263,33 @@ async function init() {
// determine template
template = variant || framework || template

const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
const pkgManager = pkgInfo ? pkgInfo.name : 'npm'

if (template.startsWith('custom-')) {
const getCustomCommand = (name) => {
for (const f of FRAMEWORKS) {
for (const v of f.variants || []) {
if (v.name === name) {
return v.customCommand
}
}
}
}
const customCommand = getCustomCommand(template)
const fullCustomCommand = customCommand
.replace('TARGET_DIR', targetDir)
.replace(/^npm /, `${pkgManager} `)
// Only yarn doesn't support `@version` in the `create` command
.replace('@latest', () => (pkgManager === 'yarn' ? '' : '@latest'))
Comment thread
haoqunjiang marked this conversation as resolved.
Outdated

const [command, ...args] = fullCustomCommand.split(' ')
const { status } = spawnSync(command, args, {
stdio: 'inherit'
})
process.exit(status ?? 0)
Comment thread
haoqunjiang marked this conversation as resolved.
Outdated
}

console.log(`\nScaffolding project in ${root}...`)

const templateDir = path.resolve(
Expand Down Expand Up @@ -269,9 +322,6 @@ async function init() {

write('package.json', JSON.stringify(pkg, null, 2))

const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
const pkgManager = pkgInfo ? pkgInfo.name : 'npm'

console.log(`\nDone. Now run:\n`)
if (root !== cwd) {
console.log(` cd ${path.relative(cwd, root)}`)
Expand Down