fix(vite): typescript project generation (#316)

ElijahKotyluk · web-flow · commit 1b3d8605db46 · 2022-03-01T20:00:28.000-08:00
diff --git a/packages/vue-cli-plugin-vuetify/generator/index.js b/packages/vue-cli-plugin-vuetify/generator/index.js
@@ -10,8 +10,9 @@ module.exports = (api, opts) => {
 
   if (opts.preset !== 'configure') {
     opts = {
+      hasTS: api.hasPlugin('typescript') || Object.keys(api.generator.pkg.devDependencies).includes('typescript'),
       ...opts,
-      ...require(`../presets/${opts.preset}`).plugins['vue-cli-plugin-vuetify']
+      ...require(`../presets/${opts.preset}`).plugins['vue-cli-plugin-vuetify'],
     }
   }
 
@@ -46,15 +47,15 @@ module.exports = (api, opts) => {
       polyfill.updateBabelConfig(api)
       polyfill.updateBrowsersList(api)
     }
-    
+
     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'))
     }
 
-    const configFile = api.resolve('./vue.config.js');
+    const configFile = api.resolve('./vue.config.js')
 
     if (fileExists(api, configFile)) {
       vuetify.addVuetifyLoaderDocsLink(configFile)
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/components/HelloWorld.js.vue b/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/components/HelloWorld.js.vue
@@ -3,7 +3,11 @@
     <v-row class="text-center">
       <v-col cols="12">
         <v-img
+          <%_ if (useVite) { _%>
           :src="logo"
+          <%_ } else { _%>
+          :src="require('../assets/logo.svg')"
+          <%_ } _%>
           class="my-3"
           contain
           height="200"
@@ -12,12 +16,12 @@
 
       <v-col class="mb-4">
         <h1 class="display-2 font-weight-bold mb-3">
-          <div>Welcome to the Vuetify 3 Alpha</div>
+          Welcome to the Vuetify 3 Alpha
         </h1>
 
-<%_ if (useVite) { _%>
-          <small>Vite Preview</small>
-<%_ } _%>
+        <%_ if (useVite) { _%>
+          <h4>Vite Preview</h4>
+        <%_ } _%>
 
         <p class="subheading font-weight-regular">
           For help and collaboration with other Vuetify developers,
@@ -96,7 +100,9 @@
 </template>
 
 <script>
+<%_ if (useVite) { _%>
 import logo from '../assets/logo.svg'
+<%_ } _%>
 
 export default {
   name: 'HelloWorld',
@@ -134,7 +140,9 @@ export default {
         href: 'https://medium.com/vuetify',
       },
     ],
+    <%_ if (useVite) { _%>
     logo,
+    <%_ } _%>
     whatsNext: [
       {
         text: 'Explore components',
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/components/HelloWorld.ts.vue b/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/components/HelloWorld.ts.vue
@@ -3,7 +3,11 @@
     <v-row class="text-center">
       <v-col cols="12">
         <v-img
+          <%_ if (useVite) { _%>
+          :src="logo"
+          <%_ } else { _%>
           :src="require('../assets/logo.svg')"
+          <%_ } _%>
           class="my-3"
           contain
           height="200"
@@ -15,6 +19,10 @@
           Welcome to Vuetify V3 Alpha
         </h1>
 
+        <%_ if (useVite) { _%>
+          <h4>Vite Preview</h4>
+        <%_ } _%>
+
         <p class="subheading font-weight-regular">
           For help and collaboration with other Vuetify developers,
           <br>please join our online
@@ -94,6 +102,11 @@
 <script lang='ts'>
 import { defineComponent } from 'vue'
 
+<%_ if (useVite) { _%>
+// Logo
+import logo from '../assets/logo.svg'
+<%_ } _%>
+
 export default defineComponent({
   name: 'HelloWorld',
 
@@ -131,6 +144,9 @@ export default defineComponent({
           href: 'https://medium.com/vuetify',
         },
       ],
+      <%_ if (useVite) { _%>
+      logo,
+      <%_ } _%>
       whatsNext: [
         {
           text: 'Explore components',
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/router/index.js b/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/router/index.js
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/router/index.ts b/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/router/index.ts
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/views/HomeView.js.vue b/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/views/HomeView.js.vue
@@ -1,17 +1,18 @@
 <template>
-  <div>
-    <HelloWorld/>
-  </div>
+  <HelloWorld />
 </template>
 
 <script>
+import { defineComponent } from 'vue';
+
+// Components
 import HelloWorld from '../components/HelloWorld.vue';
 
-export default {
-  name: 'Home',
-  
+export default defineComponent({
+  name: 'HomeView',
+
   components: {
     HelloWorld,
   },
-};
+});
 </script>
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/views/HomeView.ts.vue b/packages/vue-cli-plugin-vuetify/generator/templates/v3/src/views/HomeView.ts.vue
@@ -4,10 +4,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+
+// Components
 import HelloWorld from '../components/HelloWorld.vue';
 
 export default defineComponent({
-  name: 'Home',
+  name: 'HomeView',
 
   components: {
     HelloWorld,
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/vite/vite.config.js b/packages/vue-cli-plugin-vuetify/generator/templates/v3/vite/vite.config.js
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vuetify from '@vuetify/vite-plugin'
 
-import path from 'path'
+const path = require('path')
 
 // https://vitejs.dev/config/
 export default defineConfig({
diff --git a/packages/vue-cli-plugin-vuetify/generator/templates/v3/vite/vite.config.ts b/packages/vue-cli-plugin-vuetify/generator/templates/v3/vite/vite.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vuetify from '@vuetify/vite-plugin'
+
+const path = require('path')
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    vuetify({
+      autoImport: true,
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
+  resolve: {
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ]
+  },
+  */
+})
diff --git a/packages/vue-cli-plugin-vuetify/generator/tools/alaCarte.js b/packages/vue-cli-plugin-vuetify/generator/tools/alaCarte.js
@@ -10,7 +10,7 @@ function addDependencies (api, useV3) {
   api.extendPackage(deps)
 }
 
-function addVueConfigPluginOptions(api) {
+function addVueConfigPluginOptions (api) {
   api.extendPackage({
     vue: {
       pluginOptions: {
@@ -30,7 +30,7 @@ function addVueConfigTranspileDependency (api) {
   })
 }
 
-function addVueConfigVuetify(api, useV3) {
+function addVueConfigVuetify (api, useV3) {
   useV3 ? addVueConfigPluginOptions(api) : addVueConfigTranspileDependency(api)
 }
 
diff --git a/packages/vue-cli-plugin-vuetify/generator/tools/fonts.js b/packages/vue-cli-plugin-vuetify/generator/tools/fonts.js
@@ -67,17 +67,16 @@ function addLinks (api, iconFont) {
   })
 }
 
-function addPlugin(api, opts) {
-  opts.hasTS = api.hasPlugin('typescript')
+function addPlugin (api, opts) {
   const ext = opts.hasTS ? 'ts' : 'js'
 
-  api.injectImports(api.entryFile, `import { loadFonts } from './plugins/webfontloader'`)
+  api.injectImports(api.entryFile, 'import { loadFonts } from \'./plugins/webfontloader\'')
 
   api.extendPackage({
     dependencies: {
       webfontloader: '^1.0.0',
     },
-    ...(opts.hasTS && { devDependencies: { '@types/webfontloader': '^1.0.0' }, }),
+    ...(opts.hasTS && { devDependencies: { '@types/webfontloader': '^1.0.0' } }),
   })
 
   api.render({
diff --git a/packages/vue-cli-plugin-vuetify/generator/tools/vite.js b/packages/vue-cli-plugin-vuetify/generator/tools/vite.js
@@ -1,8 +1,8 @@
 function addDependencies (api) {
   api.extendPackage({
     devDependencies: {
-        '@vitejs/plugin-vue': '^1.2.4',
-        '@vuetify/vite-plugin': '^1.0.0-alpha.3',
+        '@vitejs/plugin-vue': '^2.0.0',
+        '@vuetify/vite-plugin': '^1.0.0-alpha.0',
         vite: '^2.0.0',
       },
     scripts: {
@@ -13,10 +13,11 @@ function addDependencies (api) {
   })
 }
 
-function renderFiles(api, opts) {
+function renderFiles (api, opts) {
+  const ext = opts.hasTS ? 'ts' : 'js'
   const files = {
     './index.html': '../templates/v3/vite/index.vite.html',
-    './vite.config.js': '../templates/v3/vite/vite.config.js',
+    [`./vite.config.${ext}`]: `../templates/v3/vite/vite.config.${ext}`,
     './src/styles/_variables.scss': '../templates/v3/vite/styles/_variables.scss',
   }
 
diff --git a/packages/vue-cli-plugin-vuetify/generator/tools/vuetify.js b/packages/vue-cli-plugin-vuetify/generator/tools/vuetify.js
@@ -12,18 +12,17 @@ function addDependencies (api, opts) {
 }
 
 function renderFiles (api, { opts }) {
-  const hasTS = api.hasPlugin('typescript')
-  const ext = hasTS ? 'ts' : 'js'
+  const ext = opts.hasTS ? 'ts' : 'js'
   const pluginFilename = `vuetify.${ext}`
 
   api.render({
     [`./src/plugins/${pluginFilename}`]: opts.useV3 ? '../templates/v3/src/plugins/vuetify.js' : '../templates/default/src/plugins/vuetify.js',
   }, {
     ...opts,
-    typescript: hasTS,
+    typescript: opts.hasTS,
   })
 
-  if (hasTS && opts.useAlaCarte) {
+  if (opts.hasTS && opts.useAlaCarte) {
     api.render({
       './src/shims-vuetify.d.ts': opts.useV3 ? '../templates/v3/src/shims-vuetify.d.ts' : '../templates/default/src/shims-vuetify.d.ts',
     })
@@ -54,7 +53,7 @@ function renderFiles (api, { opts }) {
     }
 
     if (opts.router) {
-      files['./src/views/Home.vue'] = opts.useV3 ? `../templates/v3/src/views/Home.${ext}.vue` : `../templates/default/src/views/Home.${ext}.vue`
+      files['./src/views/HomeView.vue'] = opts.useV3 ? `../templates/v3/src/views/HomeView.${ext}.vue` : `../templates/default/src/views/Home.${ext}.vue`
     }
 
     api.render(files, opts)
@@ -78,7 +77,7 @@ function setHtmlLang (api, locale) {
   })
 }
 
-function addVuetifyLoaderDocsLink(configFile) {
+function addVuetifyLoaderDocsLink (configFile) {
   const vuetifyLoaderLink = '// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader'
 
   let content = fs.readFileSync(configFile, { encoding: 'utf8' })
@@ -88,7 +87,7 @@ function addVuetifyLoaderDocsLink(configFile) {
   fs.writeFileSync(
     configFile,
     content,
-    { encoding: 'utf8' }
+    { encoding: 'utf8' },
   )
 }
 
diff --git a/packages/vue-cli-plugin-vuetify/index.js b/packages/vue-cli-plugin-vuetify/index.js
diff --git a/packages/vue-cli-plugin-vuetify/prompts.js b/packages/vue-cli-plugin-vuetify/prompts.js

Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,9 @@ module.exports = (api, opts) => {`
`10`	`10`
`11`	`11`	`if (opts.preset !== 'configure') {`
`12`	`12`	`opts = {`
	`13`	`+ hasTS: api.hasPlugin('typescript') \|\| Object.keys(api.generator.pkg.devDependencies).includes('typescript'),`
`13`	`14`	`...opts,`
`14`		- ...require(`../presets/${opts.preset}`).plugins['vue-cli-plugin-vuetify']
	`15`	+ ...require(`../presets/${opts.preset}`).plugins['vue-cli-plugin-vuetify'],
`15`	`16`	`}`
`16`	`17`	`}`
`17`	`18`
`@@ -46,15 +47,15 @@ module.exports = (api, opts) => {`
`46`	`47`	`polyfill.updateBabelConfig(api)`
`47`	`48`	`polyfill.updateBrowsersList(api)`
`48`	`49`	`}`
`49`		`-`
	`50`	`+`
`50`	`51`	`if (!opts.installFonts) fonts.addLinks(api, opts.iconFont)`
`51`	`52`	`vuetify.setHtmlLang(api, opts.locale)`
`52`	`53`
`53`	`54`	`if (fileExists(api, 'src/public/index.html')) {`
`54`	`55`	`fs.unlinkSync(api.resolve('src/public/index.html'))`
`55`	`56`	`}`
`56`	`57`
`57`		`- const configFile = api.resolve('./vue.config.js');`
	`58`	`+ const configFile = api.resolve('./vue.config.js')`
`58`	`59`
`59`	`60`	`if (fileExists(api, configFile)) {`
`60`	`61`	`vuetify.addVuetifyLoaderDocsLink(configFile)`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ function addDependencies (api, useV3) {`
`10`	`10`	`api.extendPackage(deps)`
`11`	`11`	`}`
`12`	`12`
`13`		`-function addVueConfigPluginOptions(api) {`
	`13`	`+function addVueConfigPluginOptions (api) {`
`14`	`14`	`api.extendPackage({`
`15`	`15`	`vue: {`
`16`	`16`	`pluginOptions: {`
`@@ -30,7 +30,7 @@ function addVueConfigTranspileDependency (api) {`
`30`	`30`	`})`
`31`	`31`	`}`
`32`	`32`
`33`		`-function addVueConfigVuetify(api, useV3) {`
	`33`	`+function addVueConfigVuetify (api, useV3) {`
`34`	`34`	`useV3 ? addVueConfigPluginOptions(api) : addVueConfigTranspileDependency(api)`
`35`	`35`	`}`
`36`	`36`