refactor(vite): handle config for create-vue projects (#325)

Author: ElijahKotyluk

packages/vue-cli-plugin-vuetify/generator/index.js

@@ -24,7 +24,7 @@ module.exports = (api, opts) => {
 
   // Add dependencies
   vuetify.addDependencies(api, opts)
-  if (opts.useAlaCarte) alaCarte.addDependencies(api, opts.useV3)
+  if (opts.useAlaCarte && !opts.useVite) alaCarte.addDependencies(api, opts.useV3)
   else if (opts.usePolyfill) polyfill.addDependencies(api)
 
   // Vite
@@ -51,14 +51,18 @@ module.exports = (api, opts) => {
     if (!opts.installFonts) fonts.addLinks(api, opts.iconFont)
     vuetify.setHtmlLang(api, opts.locale)
 
-    if (fileExists(api, 'src/public/index.html')) {
-      fs.unlinkSync(api.resolve('src/public/index.html'))
+    if (fileExists(api, './src/public/index.html')) {
+      fs.unlinkSync(api.resolve('./src/public/index.html'))
     }
 
     const configFile = api.resolve('./vue.config.js')
 
     if (fileExists(api, configFile)) {
-      vuetify.addVuetifyLoaderDocsLink(configFile)
+      if (opts.useVite) {
+        fs.unlinkSync(configFile)
+      } else {
+        vuetify.addVuetifyLoaderDocsLink(configFile)
+      }
     }
 
     api.exitLog('Discord community: https://community.vuetifyjs.com')

packages/vue-cli-plugin-vuetify/generator/templates/v3/vite/vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vuetify from '@vuetify/vite-plugin'
+import vuetify from 'vite-plugin-vuetify'
 
 const path = require('path')
 

packages/vue-cli-plugin-vuetify/generator/tools/vite.js

@@ -1,3 +1,6 @@
+const { fileExists } = require('../../util/helpers')
+const { updateFile } = require('./helpers')
+
 function addDependencies (api) {
   api.extendPackage({
     devDependencies: {
@@ -15,15 +18,71 @@ function addDependencies (api) {
 
 function renderFiles (api, opts) {
   const ext = opts.hasTS ? 'ts' : 'js'
+  const viteConfigFile = `./vite.config.${ext}`
+  const viteConfigPath = api.resolve(viteConfigFile)
+
   const files = {
     './index.html': '../templates/v3/vite/index.vite.html',
-    [`./vite.config.${ext}`]: `../templates/v3/vite/vite.config.${ext}`,
     './src/styles/_variables.scss': '../templates/v3/vite/styles/_variables.scss',
   }
 
+  if (!fileExists(api, viteConfigPath)) {
+    files[viteConfigFile] = `../templates/v3/vite/vite.config.${ext}`
+    updateJsConfigTarget(api)
+  }
+  else updateViteConfig(api, viteConfigPath)
+
   api.render(files, opts)
 }
 
+function updateJsConfigTarget(api) {
+  const jsConfigPath = api.resolve('./jsconfig.json')
+
+  if (fileExists(api, jsConfigPath)) {
+    updateFile(api, jsConfigPath, (lines) => {
+      const targetIndex = lines.findIndex(line => line.match(/"target":/))
+
+      if (targetIndex !== -1) {
+        lines[targetIndex] = lines[targetIndex].replace('es5', 'esnext')
+      }
+
+      return lines
+    })
+  }
+}
+
+function updateViteConfig (api, viteConfigPath) {
+  updateFile(api, viteConfigPath, (lines) => {
+    const pluginsIndex = lines.findIndex(line => line.match(/plugins:/))
+    const exportIndex = lines.findIndex(line => line.includes('export default'))
+
+    const vuetifyPluginImport = `\n// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin\nimport vuetify from 'vite-plugin-vuetify'\n`
+    const vuetifyPlugin = '\n\t\tvuetify({ autoImport: true }),\n'
+
+    if (pluginsIndex !== -1) {
+      lines[exportIndex - 2] = vuetifyPluginImport
+      const matchedPlugins = lines[pluginsIndex].match(/(?<=\[).+?(?=\])/)
+
+      if (matchedPlugins !== null) {
+        const currentPluginsArr = matchedPlugins[0].split(',')
+        const allPlugins = ''.concat(
+          currentPluginsArr
+            .map(plugin => `\n\t\t${plugin.trim()}`)
+            .concat(vuetifyPlugin)
+          )
+
+        lines[pluginsIndex] = lines[pluginsIndex].replace(/(?<=\[).+?(?=\])/, allPlugins)
+
+        return lines
+      } else {
+        lines[pluginsIndex] = lines[pluginsIndex].replace(/\[.*\]/, vuetifyPlugin)
+
+        return lines
+      }
+    }
+  })
+}
+
 module.exports = {
   addDependencies,
   renderFiles,