create-vuetify 0.0.6-beta.2

package/src/index.ts

@@ -0,0 +1,177 @@
+import fs, { existsSync, rmSync } from 'node:fs'
+import { join } from 'node:path'
+import { intro, outro, spinner } from '@clack/prompts'
+import { createBanner, initVuetify0, projectArgs } from '@vuetify/cli-shared'
+import { i18n } from '@vuetify/cli-shared/i18n'
+import { defineCommand, runMain } from 'citty'
+import { downloadTemplate } from 'giget'
+import { readPackageJSON, writePackageJSON } from 'pkg-types'
+
+import { version } from '../package.json'
+import { upgrade } from './commands/upgrade'
+import { applyFeatures } from './features'
+import { vuetifyNuxtManual } from './features/vuetify-nuxt-manual'
+import { prompt } from './prompts'
+import { convertProjectToJS } from './utils/convertProjectToJS'
+import { installDependencies } from './utils/installDependencies'
+
+const VUETIFY_0_APP_DEFAULT_NAME = 'vuetify0-app'
+
+export const main = defineCommand({
+  meta: {
+    name: 'create-vuetify',
+    version,
+    description: i18n.t('cli.create.description'),
+  },
+  args: {
+    ...projectArgs(),
+    cwd: {
+      type: 'string',
+      description: 'The current working directory',
+    },
+    features: {
+      type: 'string', // This might need to be array? citty args are usually string/boolean
+      // If user passes --features router,pinia
+      description: 'The features to install (router, pinia, eslint)',
+    },
+    typescript: {
+      type: 'boolean',
+      description: 'Use TypeScript',
+    },
+    packageManager: {
+      type: 'string',
+      description: 'The package manager to use (npm, pnpm, yarn, bun)',
+    },
+    debug: {
+      type: 'boolean',
+      description: 'Show debug logs',
+      default: false,
+    },
+    v0: {
+      type: 'boolean',
+      description: i18n.t('cli.create_v0.description'),
+    },
+  },
+  run: async ({ args }) => {
+    const cwd = args.cwd || process.cwd()
+    const debug = (...msg: any[]) => args.debug && console.log('DEBUG:', ...msg)
+    debug('run args=', JSON.stringify(args, null, 2))
+    debug('VUETIFY_CLI_TEMPLATES_PATH=', process.env.VUETIFY_CLI_TEMPLATES_PATH)
+
+    console.log(createBanner())
+
+    if (args.v0) {
+      await initVuetify0({
+        ...args,
+        defaultName: VUETIFY_0_APP_DEFAULT_NAME,
+        cwd,
+      })
+      return
+    }
+
+    intro(i18n.t('messages.create.intro', { version }))
+
+    const features = typeof args.features === 'string'
+      ? args.features.split(',').filter(Boolean)
+      : args.features
+
+    const rawArgs = args as Record<string, any>
+    const packageManager = rawArgs.packageManager || rawArgs['package-manager']
+
+    const context = await prompt({ ...args, features, packageManager }, cwd)
+    debug('context=', JSON.stringify(context, null, 2))
+    const projectRoot = join(cwd, context.name)
+    debug('projectRoot=', projectRoot)
+
+    if (context.force && existsSync(projectRoot)) {
+      rmSync(projectRoot, { recursive: true, force: true })
+    }
+
+    const templateName = context.type === 'vue'
+      ? `vue/base`
+      : `nuxt/base`
+
+    const s = spinner()
+    s.start(i18n.t('spinners.template.downloading', { template: templateName }))
+
+    if (process.env.VUETIFY_CLI_TEMPLATES_PATH) {
+      const templatePath = join(process.env.VUETIFY_CLI_TEMPLATES_PATH, templateName)
+      debug(`Copying template from ${templatePath}...`)
+      if (existsSync(templatePath)) {
+        debug(`templatePath exists. Copying to ${projectRoot}`)
+        fs.cpSync(templatePath, projectRoot, {
+          recursive: true,
+          filter: src => {
+            return !src.includes('node_modules') && !src.includes('.git') && !src.includes('.DS_Store')
+          },
+        })
+        debug(`Copy complete.`)
+        try {
+          const files = fs.readdirSync(projectRoot)
+          debug('files in projectRoot:', files)
+        } catch (error) {
+          debug('Failed to list files in projectRoot:', error)
+        }
+      } else {
+        debug(`templatePath does not exist: ${templatePath}`)
+      }
+      s.stop(i18n.t('spinners.template.copied'))
+    } else {
+      const templateSource = `gh:vuetifyjs/cli/templates/${templateName}`
+
+      try {
+        await downloadTemplate(templateSource, {
+          dir: projectRoot,
+          force: context.force,
+        })
+        s.stop(i18n.t('spinners.template.downloaded'))
+      } catch (error) {
+        s.stop(i18n.t('spinners.template.failed'))
+        console.error(`Failed to download template: ${error}`)
+        throw error
+      }
+    }
+
+    let pkg
+    pkg = await readPackageJSON(join(projectRoot, 'package.json'))
+
+    s.start(i18n.t('spinners.config.applying'))
+    if (context.features && context.features.length > 0) {
+      await applyFeatures(projectRoot, context.features, pkg, !!context.typescript, context.clientHints)
+    }
+
+    if (context.type === 'nuxt' && (!context.features || !context.features.includes('vuetify-nuxt-module'))) {
+      await vuetifyNuxtManual.apply({ cwd: projectRoot, pkg, isTypescript: !!context.typescript })
+    }
+    s.stop(i18n.t('spinners.config.applied'))
+
+    // Update package.json name
+    const pkgPath = join(projectRoot, 'package.json')
+    if (existsSync(pkgPath)) {
+      if (!pkg) {
+        pkg = await readPackageJSON(pkgPath)
+      }
+      pkg.name = context.name
+      await writePackageJSON(pkgPath, pkg)
+    }
+
+    if (context.type === 'vue' && !context.typescript) {
+      s.start(i18n.t('spinners.convert.js'))
+      await convertProjectToJS(projectRoot)
+      s.stop(i18n.t('spinners.convert.done'))
+    }
+
+    if (context.install && context.packageManager) {
+      s.start(i18n.t('spinners.dependencies.installing_with', { pm: context.packageManager }))
+      await installDependencies(projectRoot, context.packageManager as any)
+      s.stop(i18n.t('spinners.dependencies.installed'))
+    }
+
+    outro(i18n.t('messages.create.generated', { name: context.name, path: projectRoot }))
+  },
+  subCommands: {
+    upgrade,
+  },
+})
+
+runMain(main)

package/src/prompts.ts

@@ -0,0 +1,201 @@
+#!/usr/bin/env node
+
+import { existsSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { cancel, confirm, group, multiselect, select, text } from '@clack/prompts'
+import { i18n } from '@vuetify/cli-shared/i18n'
+import { dim } from 'kolorist'
+import { getUserAgent } from 'package-manager-detector'
+import validate from 'validate-npm-package-name'
+
+export interface ProjectOptions {
+  name: string
+  type: 'vue' | 'nuxt'
+  features: string[]
+  typescript?: boolean
+  packageManager?: string
+  install?: boolean
+  force?: boolean
+  clientHints?: boolean
+}
+
+export async function prompt (args: Partial<ProjectOptions>, cwd = process.cwd()): Promise<ProjectOptions> {
+  const options = await group({
+    name: () => {
+      if (args.name) {
+        return Promise.resolve(args.name)
+      }
+      return text({
+        message: i18n.t('prompts.project.name'),
+        initialValue: 'vuetify-project',
+        validate: value => {
+          const { validForNewPackages, errors, warnings } = validate(value ? value.trim() : '')
+          if (!validForNewPackages) {
+            return i18n.t('prompts.project.invalid', { error: (errors || warnings)?.[0] })
+          }
+        },
+      })
+    },
+    force: ({ results }) => {
+      const name = (results.name as string) || args.name
+      const projectRoot = join(cwd, name!)
+
+      if (existsSync(projectRoot) && readdirSync(projectRoot).length > 0) {
+        if (args.force) {
+          return Promise.resolve(true)
+        }
+
+        return confirm({
+          message: i18n.t('prompts.project.overwrite', { path: projectRoot }),
+          initialValue: false,
+        })
+      }
+      return Promise.resolve(args.force || false)
+    },
+    type: () => {
+      if (args.type) {
+        return Promise.resolve(args.type)
+      }
+      return select({
+        message: i18n.t('prompts.framework.select'),
+        initialValue: 'vue',
+        options: [
+          { label: i18n.t('prompts.framework.vue'), value: 'vue' },
+          { label: i18n.t('prompts.framework.nuxt'), value: 'nuxt' },
+        ],
+      })
+    },
+    typescript: ({ results }) => {
+      const type = (results.type as string) || args.type
+
+      if (type === 'vue' && args.typescript === undefined) {
+        return confirm({
+          message: i18n.t('prompts.typescript.use'),
+          initialValue: true,
+        })
+      }
+      return Promise.resolve(args.typescript ?? true)
+    },
+    router: ({ results }) => {
+      if (args.features) {
+        if (args.features.includes('router') && args.features.includes('file-router')) {
+          console.error(i18n.t('prompts.router.conflict'))
+          process.exit(1)
+        }
+        if (args.features.includes('router')) {
+          return Promise.resolve('router')
+        }
+        if (args.features.includes('file-router')) {
+          return Promise.resolve('file-router')
+        }
+        return Promise.resolve('none')
+      }
+
+      const type = (results.type as string) || args.type
+      if (type !== 'vue') {
+        return Promise.resolve('none')
+      }
+
+      return select({
+        message: i18n.t('prompts.router.select'),
+        initialValue: 'router',
+        options: [
+          { label: i18n.t('prompts.router.none'), value: 'none' },
+          { label: i18n.t('prompts.router.standard.label'), value: 'router', hint: i18n.t('prompts.router.standard.hint') },
+          { label: i18n.t('prompts.router.file.label'), value: 'file-router', hint: i18n.t('prompts.router.file.hint') },
+        ],
+      })
+    },
+    features: ({ results }) => {
+      if (args.features) {
+        return Promise.resolve(args.features.filter(f => f !== 'router' && f !== 'file-router'))
+      }
+      const type = (results.type as string) || args.type
+
+      return type === 'vue'
+        ? multiselect({
+            message: i18n.t('prompts.features.select', { hint: dim('↑/↓ to navigate, space to select, a to toggle all, enter to confirm') }),
+            options: [
+              { label: i18n.t('prompts.features.pinia.label'), value: 'pinia', hint: i18n.t('prompts.features.pinia.hint') },
+              { label: i18n.t('prompts.features.eslint.label'), value: 'eslint', hint: i18n.t('prompts.features.eslint.hint') },
+            ],
+            initialValues: ['eslint'],
+            required: false,
+          })
+        : multiselect({
+            message: i18n.t('prompts.features.select', { hint: dim('↑/↓ to navigate, space to select, a to toggle all, enter to confirm') }),
+            options: [
+              { label: i18n.t('prompts.features.pinia.label'), value: 'pinia', hint: i18n.t('prompts.features.pinia.hint') },
+              { label: i18n.t('prompts.features.eslint.label'), value: 'eslint', hint: i18n.t('prompts.features.eslint.hint') },
+              { label: i18n.t('prompts.features.vuetify_nuxt_module.label'), value: 'vuetify-nuxt-module', hint: i18n.t('prompts.features.vuetify_nuxt_module.hint') },
+              { label: i18n.t('prompts.features.i18n.label'), value: 'i18n', hint: i18n.t('prompts.features.i18n.hint') },
+            ],
+            initialValues: ['eslint', 'vuetify-nuxt-module'],
+            required: false,
+          })
+    },
+    clientHints: ({ results }) => {
+      if (args.clientHints !== undefined) {
+        return Promise.resolve(args.clientHints)
+      }
+      const type = (results.type as string) || args.type
+      const features = (results.features as string[]) || args.features || []
+
+      if (type === 'nuxt' && features.includes('vuetify-nuxt-module')) {
+        return confirm({
+          message: i18n.t('prompts.client_hints.enable'),
+          initialValue: false,
+        })
+      }
+      return Promise.resolve(false)
+    },
+    packageManager: () => {
+      if (args.packageManager) {
+        return Promise.resolve(args.packageManager)
+      }
+      if (args.install === false) {
+        return Promise.resolve('none')
+      }
+      return select({
+        message: i18n.t('prompts.package_manager.select'),
+        initialValue: getUserAgent() ?? 'npm',
+        options: [
+          { label: 'npm', value: 'npm' },
+          { label: 'pnpm', value: 'pnpm' },
+          { label: 'yarn', value: 'yarn' },
+          { label: 'deno', value: 'deno' },
+          { label: 'bun', value: 'bun' },
+          { label: 'none', value: 'none' },
+        ],
+      })
+    },
+    install: ({ results }) => {
+      if (args.install !== undefined) {
+        return Promise.resolve(args.install)
+      }
+      const pm = (results.packageManager as string) || args.packageManager
+      if (pm === 'none') {
+        return Promise.resolve(false)
+      }
+      return confirm({
+        message: i18n.t('prompts.install'),
+        initialValue: true,
+      })
+    },
+  }, {
+    onCancel: () => {
+      cancel(i18n.t('prompts.cancel'))
+      process.exit(0)
+    },
+  })
+
+  const features = [
+    ...(options.features as string[]),
+    options.router,
+  ].filter(f => f && f !== 'none')
+
+  return {
+    ...options,
+    features,
+  } as ProjectOptions
+}

package/src/utils/cli/postinstall/index.ts

@@ -0,0 +1 @@
+export { default as pnpm } from './pnpm'

package/src/utils/cli/postinstall/pnpm.ts

@@ -0,0 +1,20 @@
+import { x } from 'tinyexec'
+
+export async function pnpmIgnored (root: string) {
+  const pnpmVersion = (await x(`pnpm`, ['-v'], { nodeOptions: { cwd: root } })).stdout.trim()
+  const [major] = pnpmVersion.split('.').map(Number)
+  if (major && major >= 10) {
+    const detect = (await x('pnpm', ['ignored-builds'], { nodeOptions: { cwd: root } })).stdout
+    if (detect.startsWith('Automatically ignored builds during installation:\n  None')) {
+      return
+    }
+    return detect
+  }
+}
+
+export default async function pnpm (root: string) {
+  const detect = await pnpmIgnored(root)
+  if (detect) {
+    console.warn(detect)
+  }
+}

package/src/utils/cli/preinstall/index.ts

@@ -0,0 +1 @@
+export { default as yarn } from './yarn'

package/src/utils/cli/preinstall/yarn.ts

@@ -0,0 +1,22 @@
+import { appendFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { x } from 'tinyexec'
+
+const templateToAppend = `
+packageExtensions:
+  unplugin-vue-router@*:
+    dependencies:
+      "@vue/compiler-sfc": "*"
+`
+
+export async function yarnFile (root: string) {
+  const pnpmVersion = (await (x('yarn', ['-v'], { nodeOptions: { cwd: root } }))).stdout.trim()
+  const [major] = pnpmVersion.split('.').map(Number)
+  if (major && major >= 2) {
+    appendFileSync(resolve(root, '.yarnrc.yml'), templateToAppend)
+  }
+}
+
+export default async function yarn (root: string) {
+  await yarnFile(root)
+}

package/src/utils/convertProjectToJS.ts

@@ -0,0 +1,98 @@
+import { existsSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { readPackageJSON, writePackageJSON } from 'pkg-types'
+
+export async function convertProjectToJS (projectRoot: string) {
+  // 1. Remove TS specific config files
+  const filesToRemove = [
+    'tsconfig.json',
+    'tsconfig.app.json',
+    'tsconfig.node.json',
+    'env.d.ts',
+  ]
+  for (const file of filesToRemove) {
+    const path = join(projectRoot, file)
+    if (existsSync(path)) {
+      rmSync(path)
+    }
+  }
+
+  // 2. Update package.json
+  const pkgPath = join(projectRoot, 'package.json')
+  if (existsSync(pkgPath)) {
+    const pkg = await readPackageJSON(pkgPath)
+
+    // Remove devDependencies
+    const devDepsToRemove = [
+      '@tsconfig/node22',
+      '@types/node',
+      '@vue/tsconfig',
+      'typescript',
+      'vue-tsc',
+    ]
+    if (pkg.devDependencies) {
+      for (const dep of devDepsToRemove) {
+        delete pkg.devDependencies[dep]
+      }
+      // Remove @types/*
+      for (const dep of Object.keys(pkg.devDependencies)) {
+        if (dep.startsWith('@types/')) {
+          delete pkg.devDependencies[dep]
+        }
+      }
+    }
+
+    // Update scripts
+    if (pkg.scripts) {
+      delete pkg.scripts['type-check']
+      delete pkg.scripts['build-only']
+      if (pkg.scripts.build && pkg.scripts.build.includes('type-check')) {
+        pkg.scripts.build = 'vite build'
+      }
+    }
+
+    await writePackageJSON(pkgPath, pkg)
+  }
+
+  // 3. Rename and transform files
+  function walk (dir: string) {
+    const files = readdirSync(dir)
+    for (const file of files) {
+      const path = join(dir, file)
+      const stat = statSync(path)
+      if (stat.isDirectory()) {
+        walk(path)
+      } else {
+        handleFile(path)
+      }
+    }
+  }
+
+  function handleFile (filePath: string) {
+    if (filePath.endsWith('.vue')) {
+      let content = readFileSync(filePath, 'utf8')
+      // Remove lang="ts"
+      content = content.replace(/\s?lang="ts"/g, '')
+      writeFileSync(filePath, content)
+    } else if (filePath.endsWith('.ts') || filePath.endsWith('.mts')) {
+      let content = readFileSync(filePath, 'utf8')
+
+      // Special handling for plugins/index.ts
+      if (filePath.endsWith('plugins/index.ts')) {
+        content = content.replace(/import type { App } from 'vue'.*\n/, '')
+        content = content.replace(/app: App/, 'app')
+      }
+
+      // Rename file
+      const newPath = filePath.replace(/\.m?ts$/, match => match === '.mts' ? '.mjs' : '.js')
+      writeFileSync(newPath, content)
+      rmSync(filePath)
+    } else if (filePath.endsWith('index.html')) {
+      let content = readFileSync(filePath, 'utf8')
+      content = content.replace('src/main.ts', 'src/main.js')
+      writeFileSync(filePath, content)
+    }
+  }
+
+  walk(projectRoot)
+}

package/src/utils/installDependencies.ts

@@ -0,0 +1,25 @@
+import { installDependencies as installDependencies$1 } from 'nypm'
+import { getUserAgent } from 'package-manager-detector'
+import { pnpm } from './cli/postinstall'
+import { yarn } from './cli/preinstall'
+
+export const packageManager = getUserAgent() ?? 'npm'
+
+export async function installDependencies (root: string = process.cwd(), manager = packageManager) {
+  if (manager === 'yarn') {
+    await yarn(root)
+  }
+  await installDependencies$1({
+    packageManager: manager,
+    cwd: root,
+    silent: true,
+  })
+    .catch(() => {
+      console.error(
+        `Failed to install dependencies using ${manager}.`,
+      )
+    })
+  if (manager === 'pnpm') {
+    await pnpm(root)
+  }
+}

package/src/utils/installFeature.ts

@@ -0,0 +1,25 @@
+import { cpSync, existsSync, mkdtempSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { downloadTemplate } from 'giget'
+
+export async function installFeature (feature: string, cwd: string) {
+  const templateName = `vue/${feature}`
+
+  if (process.env.VUETIFY_CLI_TEMPLATES_PATH) {
+    const templatePath = join(process.env.VUETIFY_CLI_TEMPLATES_PATH, templateName)
+    if (existsSync(templatePath)) {
+      cpSync(templatePath, cwd, { recursive: true })
+    }
+  } else {
+    const tmp = mkdtempSync(join(tmpdir(), 'vuetify-feature-'))
+    try {
+      await downloadTemplate(`gh:vuetifyjs/cli/templates/${templateName}`, {
+        dir: tmp,
+      })
+      cpSync(tmp, cwd, { recursive: true })
+    } finally {
+      rmSync(tmp, { recursive: true, force: true })
+    }
+  }
+}

package/test/conflict.test.ts

@@ -0,0 +1,75 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { x } from 'tinyexec'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+
+const CLI_PATH = path.resolve(__dirname, '../dist/index.mjs')
+const TEMPLATES_PATH = path.resolve(__dirname, '../../../templates')
+const TEMP_DIR = path.resolve(__dirname, '../.test-tmp-conflict')
+
+describe('create-vuetify conflict', () => {
+  beforeAll(() => {
+    if (!fs.existsSync(TEMP_DIR)) {
+      fs.mkdirSync(TEMP_DIR)
+    }
+  })
+
+  afterAll(() => {
+    fs.rmSync(TEMP_DIR, { recursive: true, force: true })
+  })
+
+  const runCli = async (args: string[], cwd: string) => {
+    const proc = x('node', [CLI_PATH, ...args], {
+      nodeOptions: {
+        cwd,
+        env: {
+          ...process.env,
+          VUETIFY_CLI_TEMPLATES_PATH: TEMPLATES_PATH,
+        },
+      },
+      throwOnError: false,
+    })
+
+    for await (const line of proc) {
+      console.log(line)
+    }
+
+    const result = await proc
+    if (result.exitCode !== 0) {
+      console.error('Command failed with exit code:', result.exitCode)
+      console.error('STDERR:', result.stderr)
+      throw new Error(`Process exited with non-zero status (${result.exitCode})`)
+    }
+    return result
+  }
+
+  it('should error when both router and file-router selected via flags', async () => {
+    const projectName = 'test-conflict'
+    const projectPath = path.join(TEMP_DIR, projectName)
+
+    if (fs.existsSync(projectPath)) {
+      fs.rmSync(projectPath, { recursive: true, force: true })
+    }
+
+    // Select both router and file-router
+    const args = [
+      `--name=${projectName}`,
+      '--type=vue',
+      '--typescript',
+      '--features=router,file-router',
+      '--package-manager=pnpm',
+      '--force',
+      '--no-install',
+      '--no-interactive',
+    ]
+
+    console.log(`Running: create-vuetify ${args.join(' ')}`)
+
+    try {
+      await runCli(args, TEMP_DIR)
+      expect.fail('Should have failed')
+    } catch (error: any) {
+      expect(error.message).toContain('Process exited with non-zero status (1)')
+    }
+  })
+})