create-vuetify 0.0.6-beta.2

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-vuetify",
+  "version": "0.0.6-beta.2",
+  "description": "Create a new Vuetify project",
+  "type": "module",
+  "bin": {
+    "create-vuetify": "./dist/index.mjs"
+  },
+  "keywords": [],
+  "author": "Andrey Yolkin <andreyyolkin@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@clack/prompts": "^1.0.0-alpha.8",
+    "@types/validate-npm-package-name": "^4.0.2",
+    "citty": "^0.1.6",
+    "giget": "^2.0.0",
+    "kolorist": "^1.8.0",
+    "nypm": "^0.6.2",
+    "pathe": "^2.0.3",
+    "tsdown": "^0.16.6",
+    "vitest": "^4.0.16",
+    "@vuetify/cli-shared": "0.0.6-beta.2"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "magicast": "^0.5.1",
+    "package-manager-detector": "^1.5.0",
+    "pkg-types": "^2.3.0",
+    "tinyexec": "^1.0.2",
+    "validate-npm-package-name": "^7.0.1"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
+}

package/src/commands/upgrade.ts

@@ -0,0 +1,5 @@
+import { commandUpgradeFabric } from '@vuetify/cli-shared'
+
+export const upgrade = commandUpgradeFabric('create-vuetify')
+
+export default upgrade

package/src/features/dependencies/package.json

@@ -0,0 +1,17 @@
+{
+  "dependencies": {
+    "pinia": "^3.0.4",
+    "eslint": "^9.39.2",
+    "eslint-config-vuetify": "^4.3.3",
+    "vuetify-nuxt-module": "^0.19.1",
+    "@nuxt/eslint": "^1.12.1",
+    "@pinia/nuxt": "^0.11.3",
+    "@nuxtjs/i18n": "^10.2.1",
+    "vue-router": "^4.6.4",
+    "vue-i18n": "^11.2.7",
+    "unplugin-vue-router": "^0.19.1",
+    "vite-plugin-vuetify": "^2.1.2",
+    "pathe": "^2.0.3",
+    "@vuetify/loader-shared": "^2.1.1"
+  }
+}

package/src/features/eslint.ts

@@ -0,0 +1,75 @@
+import type { Feature } from './types'
+import { existsSync } from 'node:fs'
+import { writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { loadFile } from 'magicast'
+import { getDefaultExportOptions } from 'magicast/helpers'
+import rootPkg from './dependencies/package.json' with { type: 'json' }
+
+export const eslint: Feature = {
+  name: 'eslint',
+  apply: async ({ cwd, pkg, isTypescript }) => {
+    // Check if Nuxt
+    const isNuxt = existsSync(join(cwd, 'nuxt.config.ts'))
+
+    if (isNuxt) {
+      pkg.devDependencies = pkg.devDependencies || {}
+      pkg.devDependencies['eslint'] = rootPkg.dependencies.eslint
+      pkg.devDependencies['@nuxt/eslint'] = rootPkg.dependencies['@nuxt/eslint']
+      pkg.devDependencies['eslint-config-vuetify'] = rootPkg.dependencies['eslint-config-vuetify']
+      pkg.scripts = pkg.scripts || {}
+      pkg.scripts['lint'] = 'eslint'
+      pkg.scripts['lint:fix'] = 'eslint --fix'
+
+      const configPath = join(cwd, 'nuxt.config.ts')
+      const mod = await loadFile(configPath)
+
+      const options = getDefaultExportOptions(mod)
+      if (options) {
+        options.modules ||= []
+        options.modules.push('@nuxt/eslint')
+
+        options.eslint = {
+          config: {
+            import: {
+              package: 'eslint-plugin-import-lite',
+            },
+          },
+        }
+      }
+
+      await writeFile(configPath, mod.generate().code)
+      await writeFile(join(cwd, 'eslint.config.js'), getNuxtEslintContent(isTypescript))
+    } else {
+      pkg.devDependencies = pkg.devDependencies || {}
+      pkg.devDependencies['eslint'] = rootPkg.dependencies.eslint
+      pkg.devDependencies['eslint-config-vuetify'] = rootPkg.dependencies['eslint-config-vuetify']
+      pkg.scripts = pkg.scripts || {}
+      pkg.scripts['lint'] = 'eslint'
+      pkg.scripts['lint:fix'] = 'eslint --fix'
+
+      await writeFile(join(cwd, 'eslint.config.js'), getVueEslintContent(isTypescript))
+    }
+  },
+}
+
+function getVueEslintContent (isTypescript: boolean) {
+  return `import vuetify from 'eslint-config-vuetify'
+
+export default vuetify({
+  ts: ${isTypescript},
+})
+`
+}
+
+function getNuxtEslintContent (isTypescript: boolean) {
+  return `import vuetify from 'eslint-config-vuetify'
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  vuetify({
+    ts: ${isTypescript},
+  }),
+)
+`
+}

package/src/features/i18n.ts

@@ -0,0 +1,108 @@
+import type { Feature } from './types'
+import { existsSync, mkdirSync } from 'node:fs'
+import { writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { loadFile } from 'magicast'
+import { getDefaultExportOptions } from 'magicast/helpers'
+import rootPkg from './dependencies/package.json' with { type: 'json' }
+
+export const i18n: Feature = {
+  name: 'i18n',
+  apply: async ({ cwd, pkg, isTypescript }) => {
+    const ext = isTypescript ? 'ts' : 'js'
+    const isNuxt = existsSync(join(cwd, 'nuxt.config.ts'))
+
+    if (isNuxt) {
+      pkg.dependencies ??= {}
+      pkg.dependencies['@nuxtjs/i18n'] = rootPkg.dependencies['@nuxtjs/i18n']
+
+      const configPath = join(cwd, 'nuxt.config.ts')
+      const mod = await loadFile(configPath)
+      const options = getDefaultExportOptions(mod)
+
+      if (options) {
+        options.modules ||= []
+        options.modules.push('@nuxtjs/i18n')
+
+        // Add basic configuration
+        options.i18n = {
+          vueI18n: './i18n.config.ts',
+        }
+      }
+
+      await writeFile(configPath, mod.generate().code)
+
+      // Create i18n.config.ts
+      await writeFile(join(cwd, `i18n.config.${ext}`), getNuxtI18nConfig(isTypescript))
+    } else {
+      pkg.dependencies ??= {}
+      pkg.dependencies['vue-i18n'] = rootPkg.dependencies['vue-i18n']
+
+      // Create i18n plugin file
+      if (!existsSync(join(cwd, 'src/plugins'))) {
+        mkdirSync(join(cwd, 'src/plugins'), { recursive: true })
+      }
+      await writeFile(join(cwd, `src/plugins/i18n.${ext}`), getVueI18nContent(isTypescript))
+
+      // Register in plugins/index.ts
+      const pluginsPath = join(cwd, `src/plugins/index.${ext}`)
+      if (existsSync(pluginsPath)) {
+        const mod = await loadFile(pluginsPath)
+
+        mod.imports.$prepend({
+          from: './i18n',
+          imported: 'default',
+          local: 'i18n',
+        })
+
+        const registerPlugins = mod.exports.registerPlugins
+        if (registerPlugins && registerPlugins.$type === 'function') {
+          registerPlugins.$body.push('app.use(i18n)')
+        }
+
+        await writeFile(pluginsPath, mod.generate().code)
+      }
+    }
+  },
+}
+
+function getVueI18nContent (_ts: boolean) {
+  return `import { createI18n } from 'vue-i18n'
+
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world',
+    },
+  },
+  ja: {
+    message: {
+      hello: 'こんにちは、世界',
+    },
+  },
+}
+
+export default createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages,
+})
+`
+}
+
+function getNuxtI18nConfig (_ts: boolean) {
+  return `export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      welcome: 'Welcome',
+    },
+    fr: {
+      welcome: 'Bienvenue',
+    },
+  },
+}))
+`
+}

package/src/features/index.ts

@@ -0,0 +1,31 @@
+import type { PackageJson } from 'pkg-types'
+import type { Feature } from './types'
+import { eslint } from './eslint'
+import { i18n } from './i18n'
+import { pinia } from './pinia'
+import { fileRouter, router } from './router'
+import { vuetifyNuxtModule } from './vuetify-nuxt-module'
+
+export const features: Record<string, Feature> = {
+  router,
+  'file-router': fileRouter,
+  pinia,
+  i18n,
+  eslint,
+  'vuetify-nuxt-module': vuetifyNuxtModule,
+}
+
+export async function applyFeatures (
+  cwd: string,
+  featureNames: string[],
+  pkg: PackageJson,
+  isTypescript: boolean,
+  clientHints?: boolean,
+) {
+  for (const name of featureNames) {
+    const feature = features[name]
+    if (feature) {
+      await feature.apply({ cwd, pkg, isTypescript, clientHints })
+    }
+  }
+}

package/src/features/pinia.ts

@@ -0,0 +1,84 @@
+import type { Feature } from './types'
+import { existsSync, mkdirSync } from 'node:fs'
+import { writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { loadFile } from 'magicast'
+import { getDefaultExportOptions } from 'magicast/helpers'
+import rootPkg from './dependencies/package.json' with { type: 'json' }
+
+export const pinia: Feature = {
+  name: 'pinia',
+  apply: async ({ cwd, pkg, isTypescript }) => {
+    const ext = isTypescript ? 'ts' : 'js'
+
+    // Check if Nuxt
+    const isNuxt = existsSync(join(cwd, 'nuxt.config.ts'))
+
+    if (isNuxt) {
+      pkg.dependencies ??= {}
+      pkg.devDependencies ??= {}
+      pkg.dependencies['pinia'] = rootPkg.dependencies.pinia
+      pkg.devDependencies['@pinia/nuxt'] = rootPkg.dependencies['@pinia/nuxt']
+
+      // Update nuxt.config.ts
+      const configPath = join(cwd, 'nuxt.config.ts')
+      const mod = await loadFile(configPath)
+
+      // Assume defineNuxtConfig structure
+      // We need to add to modules array
+      // This is hard with magicast if structure varies.
+      // But for base template it should be standard.
+      const options = getDefaultExportOptions(mod)
+      if (options) {
+        options.modules ||= []
+        options.modules.push('@pinia/nuxt')
+      }
+
+      await writeFile(configPath, mod.generate().code)
+
+      // Create example store
+      const appPath = existsSync(join(cwd, 'app')) ? 'app' : '.'
+      if (!existsSync(join(cwd, appPath, 'stores'))) {
+        mkdirSync(join(cwd, appPath, 'stores'), { recursive: true })
+      }
+      await writeFile(join(cwd, appPath, `stores/app.${ext}`), getStoreContent(isTypescript))
+    } else {
+      pkg.dependencies ??= {}
+      pkg.dependencies['pinia'] = rootPkg.dependencies.pinia
+
+      // Create store file
+      if (!existsSync(join(cwd, 'src/stores'))) {
+        mkdirSync(join(cwd, 'src/stores'), { recursive: true })
+      }
+      await writeFile(join(cwd, `src/stores/app.${ext}`), getStoreContent(isTypescript))
+
+      // Update plugins/index.ts
+      const pluginsPath = join(cwd, `src/plugins/index.${ext}`)
+      const mod = await loadFile(pluginsPath)
+
+      mod.imports.$prepend({
+        from: 'pinia',
+        imported: 'createPinia',
+      })
+
+      const registerPlugins = mod.exports.registerPlugins
+      if (registerPlugins && registerPlugins.$type === 'function') {
+        registerPlugins.$body.push('app.use(createPinia())')
+      }
+
+      await writeFile(pluginsPath, mod.generate().code)
+    }
+  },
+}
+
+function getStoreContent (_ts: boolean) {
+  return `// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})
+`
+}

package/src/features/router.ts

@@ -0,0 +1,147 @@
+import type { Feature } from './types'
+import { existsSync, mkdirSync } from 'node:fs'
+import { writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { builders, loadFile } from 'magicast'
+import { installFeature } from '../utils/installFeature'
+import rootPkg from './dependencies/package.json' with { type: 'json' }
+
+export const router: Feature = {
+  name: 'router',
+  apply: async ({ cwd, pkg, isTypescript }) => {
+    await installFeature('router', cwd)
+
+    const ext = isTypescript ? 'ts' : 'js'
+    pkg.dependencies = pkg.dependencies || {}
+    pkg.dependencies['vue-router'] = rootPkg.dependencies['vue-router']
+
+    // Create router file
+    const routerContent = getRouterContent(isTypescript)
+    if (!existsSync(join(cwd, 'src/router'))) {
+      mkdirSync(join(cwd, 'src/router'), { recursive: true })
+    }
+    await writeFile(join(cwd, `src/router/index.${ext}`), routerContent)
+
+    // Update plugins/index.ts
+    const pluginsPath = join(cwd, `src/plugins/index.${ext}`)
+    const mod = await loadFile(pluginsPath)
+
+    mod.imports.$prepend({
+      from: '../router',
+      imported: 'default',
+      local: 'router',
+    })
+
+    const registerPlugins = mod.exports.registerPlugins
+    if (registerPlugins && registerPlugins.$type === 'function') {
+      registerPlugins.$body.push('app.use(router)')
+    }
+
+    await writeFile(pluginsPath, mod.generate().code)
+  },
+}
+
+export const fileRouter: Feature = {
+  name: 'file-router',
+  apply: async ({ cwd, pkg, isTypescript }) => {
+    await installFeature('file-router', cwd)
+
+    const ext = isTypescript ? 'ts' : 'js'
+    pkg.dependencies = pkg.dependencies || {}
+    pkg.dependencies['vue-router'] = rootPkg.dependencies['vue-router']
+    pkg.devDependencies = pkg.devDependencies || {}
+    pkg.devDependencies['unplugin-vue-router'] = rootPkg.dependencies['unplugin-vue-router']
+
+    // Create router file
+    const routerContent = getFileRouterContent(isTypescript)
+    if (!existsSync(join(cwd, 'src/router'))) {
+      mkdirSync(join(cwd, 'src/router'), { recursive: true })
+    }
+    await writeFile(join(cwd, `src/router/index.${ext}`), routerContent)
+
+    // Update plugins/index.ts
+    const pluginsPath = join(cwd, `src/plugins/index.${ext}`)
+    const mod = await loadFile(pluginsPath)
+
+    mod.imports.$prepend({
+      from: '../router',
+      imported: 'default',
+      local: 'router',
+    })
+
+    const registerPlugins = mod.exports.registerPlugins
+    if (registerPlugins && registerPlugins.$type === 'function') {
+      registerPlugins.$body.push('app.use(router)')
+    }
+
+    await writeFile(pluginsPath, mod.generate().code)
+
+    // Update vite.config.mjs / .mts
+    const viteConfigPath = join(cwd, `vite.config.m${ext}`)
+    if (existsSync(viteConfigPath)) {
+      const viteMod = await loadFile(viteConfigPath)
+
+      viteMod.imports.$prepend({
+        from: 'unplugin-vue-router/vite',
+        imported: 'default',
+        local: 'VueRouter',
+      })
+
+      // Inject VueRouter() before Vue()
+      // This is a bit tricky with magicast if we don't know the structure perfectly.
+      // Usually plugins is an array.
+      const plugins = viteMod.exports.default.plugins || viteMod.exports.default.$args?.[0]?.plugins
+      if (plugins && Array.isArray(plugins)) {
+        // We need to insert before 'vue()' or 'Vue()'
+        // For simplicity, let's unshift it.
+        // Note: unplugin-vue-router MUST be before vue()
+        plugins.unshift(builders.raw('VueRouter()'))
+      }
+
+      await writeFile(viteConfigPath, viteMod.generate().code)
+    }
+  },
+}
+
+function getRouterContent (ts: boolean) {
+  return `/**
+ * router/index.${ts ? 'ts' : 'js'}
+ *
+ * Manual routes for ./src/pages/*.vue
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+import Index from '@/pages/index.vue'
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      component: Index,
+    },
+  ],
+})
+
+export default router
+`
+}
+
+function getFileRouterContent (ts: boolean) {
+  return `/**
+ * router/index.${ts ? 'ts' : 'js'}
+ *
+ * Automatic routes for ./src/pages/*.vue
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router/auto'
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+})
+
+export default router
+`
+}

package/src/features/types.ts

@@ -0,0 +1,13 @@
+import type { PackageJson } from 'pkg-types'
+
+export interface FeatureContext {
+  cwd: string
+  pkg: PackageJson
+  isTypescript: boolean
+  clientHints?: boolean
+}
+
+export interface Feature {
+  name: string
+  apply: (context: FeatureContext) => Promise<void>
+}

package/src/features/vuetify-nuxt-manual.ts

@@ -0,0 +1,47 @@
+import type { Feature } from './types'
+import { existsSync } from 'node:fs'
+import { writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { builders, loadFile } from 'magicast'
+import { getDefaultExportOptions } from 'magicast/helpers'
+import rootPkg from './dependencies/package.json' with { type: 'json' }
+
+export const vuetifyNuxtManual: Feature = {
+  name: 'vuetify-nuxt-manual',
+  apply: async ({ cwd, pkg }) => {
+    // Only applies to Nuxt
+    const configPath = join(cwd, 'nuxt.config.ts')
+    if (!existsSync(configPath)) {
+      return
+    }
+
+    pkg.devDependencies = pkg.devDependencies || {}
+    pkg.devDependencies['vite-plugin-vuetify'] = rootPkg.dependencies['vite-plugin-vuetify']
+    pkg.devDependencies['@vuetify/loader-shared'] = rootPkg.dependencies['@vuetify/loader-shared']
+    pkg.devDependencies['pathe'] = rootPkg.dependencies['pathe']
+
+    const mod = await loadFile(configPath)
+
+    // Add import { transformAssetUrls } from 'vite-plugin-vuetify'
+    mod.imports.$prepend({
+      from: 'vite-plugin-vuetify',
+      imported: 'transformAssetUrls',
+    })
+
+    const options = getDefaultExportOptions(mod)
+    if (options) {
+      options.build ||= {}
+      options.build.transpile ||= []
+      if (!options.build.transpile.includes('vuetify')) {
+        options.build.transpile.push('vuetify')
+      }
+
+      options.vite ||= {}
+      options.vite.vue ||= {}
+      options.vite.vue.template ||= {}
+      options.vite.vue.template.transformAssetUrls = builders.raw('transformAssetUrls')
+    }
+
+    await writeFile(configPath, mod.generate().code)
+  },
+}

package/src/features/vuetify-nuxt-module.ts

@@ -0,0 +1,58 @@
+import type { Feature } from './types'
+import { existsSync, unlinkSync } from 'node:fs'
+import { writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { loadFile } from 'magicast'
+import { getDefaultExportOptions } from 'magicast/helpers'
+import rootPkg from './dependencies/package.json' with { type: 'json' }
+
+export const vuetifyNuxtModule: Feature = {
+  name: 'vuetify-nuxt-module',
+  apply: async ({ cwd, pkg, clientHints }) => {
+    // Only applies to Nuxt
+    const isNuxt = existsSync(join(cwd, 'nuxt.config.ts'))
+    if (!isNuxt) {
+      return
+    }
+
+    pkg.dependencies = pkg.dependencies || {}
+    pkg.dependencies['vuetify-nuxt-module'] = rootPkg.dependencies['vuetify-nuxt-module']
+
+    // Update nuxt.config.ts
+    const configPath = join(cwd, 'nuxt.config.ts')
+    const mod = await loadFile(configPath)
+
+    const manualModulePath = join(cwd, 'modules/vuetify.ts')
+    if (existsSync(manualModulePath)) {
+      unlinkSync(manualModulePath)
+    }
+
+    const options = getDefaultExportOptions(mod)
+    if (options) {
+      options.modules ||= []
+      options.modules.push('vuetify-nuxt-module')
+
+      options.vuetify = {
+        moduleOptions: {
+          /* module options */
+        },
+        vuetifyOptions: {
+          /* vuetify options */
+        },
+      }
+      if (clientHints) {
+        options.vuetify.moduleOptions.ssrClientHints = {
+          reloadOnFirstRequest: false,
+          viewportSize: true,
+          prefersColorScheme: true,
+          prefersReducedMotion: true,
+          prefersColorSchemeOptions: {
+            useBrowserThemeOnly: false,
+          },
+        }
+      }
+    }
+
+    await writeFile(configPath, mod.generate().code)
+  },
+}