feat(generator): update for v2

vuetifyjs · May 29, 2019 · 49eb66a · 49eb66a
1 parent 138eaa0
commit 49eb66a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 78 deletions.
diff --git a/generator/index.js b/generator/index.js
@@ -8,30 +8,31 @@ module.exports = (api, opts) => {
     opts = require(`../presets/${opts.preset}`).plugins['vue-cli-plugin-vuetify']
   }
 
-  vuetify.addDependencies(api)
+  // Add imports
+  // Must be before dependencies because of weird bug
+  vuetify.addImports(api)
+  if (!opts.useAlaCarte && opts.usePolyfill) polyfill.addImports(api)
+  if (opts.installFonts) fonts.addImports(api, opts.iconFont)
 
-  if (opts.useAlaCarte) {
-    alaCarte.addDependencies(api)
-  } else if (opts.usePolyfill) {
-    polyfill.addDependencies(api)
-  }
+  // Add dependencies
+  vuetify.addDependencies(api)
+  if (opts.useAlaCarte) alaCarte.addDependencies(api)
+  else if (opts.usePolyfill) polyfill.addDependencies(api)
 
   if (opts.installFonts) {
     fonts.addDependencies(api, opts.iconFont)
-    fonts.addImports(api, opts.iconFont)
   }
 
+  // Update templates
   vuetify.renderFiles(api, opts)
 
   // adapted from https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/generator/index.js#L68-L91
   api.onCreateComplete(() => {
-    vuetify.addImports(api)
     if (!opts.useAlaCarte && opts.usePolyfill) {
       polyfill.updateBabelConfig(api)
       polyfill.updateBrowsersList(api)
-      polyfill.addImports(api)
     }
-    !opts.installFonts && fonts.addLinks(api, opts.iconFont)
+    if(!opts.installFonts) fonts.addLinks(api, opts.iconFont)
     vuetify.setHtmlLang(api, opts.locale)
   })
 }
diff --git a/generator/templates/default/src/plugins/vuetify.js b/generator/templates/default/src/plugins/vuetify.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 <%_ if (useAlaCarte) { _%>
 import Vuetify from 'vuetify/lib'
-import 'vuetify/src/stylus/app.styl'
 <%_ } else { _%>
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
@@ -10,28 +9,36 @@ import 'vuetify/dist/vuetify.min.css'
 import <%= locale.replace(/-/g, '') %> from 'vuetify/<%= typescript ? 'src' : 'es5' %>/locale/<%= locale %>'
 <%_ } _%>
 
-Vue.use(Vuetify, {
-<%_ if (useTheme) { _%>
+Vue.use(Vuetify)
+
+export default new Vuetify({
+  <%_ if (useTheme) { _%>
   theme: {
-    primary: '#ee44aa',
-    secondary: '#424242',
-    accent: '#82B1FF',
-    error: '#FF5252',
-    info: '#2196F3',
-    success: '#4CAF50',
-    warning: '#FFC107'
-  },
-<%_ } _%>
-<%_ if (useCustomProperties) { _%>
-  options: {
-    customProperties: true
+    <%_ if (useCustomProperties) { _%>
+      options: {
+        customProperties: true
+      },
+    <%_ } _%>
+    themes: {
+      light: {
+        primary: '#ee44aa',
+        secondary: '#424242',
+        accent: '#82B1FF',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107'
+      }
+    }
   },
-<%_ } _%>
-  iconfont: '<%= iconFont %>',
-<%_ if (locale !== 'en') { _%>
-  lang: {
-    locales: { <%= locale.replace(/-/g, '') %> },
-    current: '<%= locale %>'
-  },
-<%_ } _%>
+  <%_ } _%>
+  <%_ if (locale !== 'en') { _%>
+    lang: {
+      locales: { <%= locale.replace(/-/g, '') %> },
+      current: '<%= locale %>'
+    },
+  <%_ } _%>
+  icons: {
+    iconfont: '<%= iconFont %>',
+  }
 })
diff --git a/generator/tools/alaCarte.js b/generator/tools/alaCarte.js
@@ -1,9 +1,9 @@
 function addDependencies (api) {
   api.extendPackage({
     devDependencies: {
-      "vuetify-loader": "^1.0.5",
-      "stylus": "^0.54.5",
-      "stylus-loader": "^3.0.1",
+      "vuetify-loader": "^1.2.2",
+      "sass": "^1.17.4",
+      "sass-loader": "^7.1.0",
     }
   })
 }

diff --git a/generator/tools/fonts.js b/generator/tools/fonts.js
@@ -1,58 +1,54 @@
 const helpers = require('./helpers')
 const fonts = {
-  md: {
-    'package': {
-      'material-design-icons-iconfont': '^3.0.3',
+  mdi: {
+    package: {
+      '@mdi/font': '^3.6.95',
     },
-    'import': 'material-design-icons-iconfont/dist/material-design-icons.css',
-    link: '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">',
+    import: '@mdi/font/css/materialdesignicons.css',
+    link: '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">',
   },
-  mdi: {
-    'package': {
-      '@mdi/font': '^2.6.95',
+  md: {
+    package: {
+      'material-design-icons-iconfont': '^5.0.1',
     },
-    'import': '@mdi/font/css/materialdesignicons.css',
-    link: '<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">',
+    import: 'material-design-icons-iconfont/dist/material-design-icons.css',
+    link: '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">',
   },
   fa: {
-    'package': {
-      '@fortawesome/fontawesome-free': '^5.2.0',
+    package: {
+      '@fortawesome/fontawesome-free': '^5.8.2',
     },
-    'import': '@fortawesome/fontawesome-free/css/all.css',
-    link: '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">',
+    import: '@fortawesome/fontawesome-free/css/all.css',
+    link: '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">',
   },
   fa4: {
-    'package': {
+    package: {
       'font-awesome': '^4.7.0',
     },
-    'import': 'font-awesome/css/font-awesome.css',
+    import: 'font-awesome/css/font-awesome.css',
     link: '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">',
   },
   roboto: {
-    'package': {
+    package: {
       'roboto-fontface': '*',
     },
-    'import': 'roboto-fontface/css/roboto/roboto-fontface.css',
+    import: 'roboto-fontface/css/roboto/roboto-fontface.css',
     link: '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">',
   }
 }
 
 function addDependencies (api, iconFont) {
   api.extendPackage({
     dependencies: {
-      ...fonts['roboto']['package'],
-      ...fonts[iconFont]['package'],
+      ...fonts.roboto.package,
+      ...fonts[iconFont].package,
     }
   })
 }
 
 function addImports (api, iconFont) {
-  try {
-    api.injectImports(api.entryFile, `import '${fonts['roboto']['import']}'`)
-    api.injectImports(api.entryFile, `import '${fonts[iconFont]['import']}'`)
-  } catch(e) {
-    console.error(e)
-  }
+  api.injectImports(api.entryFile, `import '${fonts.roboto.import}'`)
+  api.injectImports(api.entryFile, `import '${fonts[iconFont].import}'`)
 }
 
 function addLinks (api, iconFont) {

diff --git a/generator/tools/polyfill.js b/generator/tools/polyfill.js
@@ -4,7 +4,7 @@ const fs = require('fs')
 function addDependencies (api) {
   api.extendPackage({
     dependencies: {
-      "@babel/polyfill": "^7.0.0-rc.1",
+      "@babel/polyfill": "^7.4.4",
     }
   })
 }
@@ -77,13 +77,7 @@ function updateBrowsersList (api) {
 }
 
 function addImports (api) {
-  helpers.updateFile(api, api.entryFile, lines => {
-    if (!lines.find(l => l.match(/^(import|require).*@babel\/polyfill.*$/))) {
-      lines.unshift('import \'@babel/polyfill\'')
-    }
-
-    return lines
-  })
+  api.injectImports(api.entryFile, `import '@babel/polyfill'`)
 }
 
 module.exports = {

diff --git a/generator/tools/vuetify.js b/generator/tools/vuetify.js
@@ -3,7 +3,7 @@ const helpers = require('./helpers')
 function addDependencies (api) {
   api.extendPackage({
     dependencies: {
-      vuetify: "^1.5.5"
+      vuetify: "^2.0.0-beta.0"
     }
   })
 }
@@ -39,13 +39,8 @@ function renderFiles (api, opts) {
 }
 
 function addImports (api) {
-  helpers.updateFile(api, api.entryFile, lines => {
-    const vueImportIndex = lines.findIndex(line => line.match(/^import Vue/))
-
-    lines.splice(vueImportIndex + 1, 0, `import './plugins/vuetify'`)
-
-    return lines
-  })
+  api.injectImports(api.entryFile, `import vuetify from './plugins/vuetify'`)
+  api.injectRootOptions(api.entryFile, 'vuetify')
 }
 
 function setHtmlLang (api, locale) {