feat: icon/language choice, customProperties, update vuetify to 1.2

generator/index.js

@@ -1,153 +1,23 @@
 module.exports = (api, opts, rootOpts) => {
-  const helpers = require('./helpers')(api)
-
-  api.extendPackage({
-    dependencies: {
-      vuetify: "^1.1.11"
-    }
-  })
-
-  if (opts.useAlaCarte) {
-    api.extendPackage({
-      devDependencies: {
-        "babel-plugin-transform-imports": "^1.4.1",
-        "stylus": "^0.54.5",
-        "stylus-loader": "^3.0.1",
-      }
-    })
-  }
-
-  if (opts.usePolyfill) {
-    api.extendPackage({
-      devDependencies: {
-        "@babel/polyfill": "^7.0.0-beta.49",
-      }
-    })
-  }
-
-  if (api.hasPlugin('electron-builder') === true) {
-    // material icons pkg for electron
-    api.extendPackage({
-      devDependencies: {
-        "material-design-icons-iconfont": "^3.0.3",
-      }
-    })
-
-    try {
-      api.injectImports(helpers.getMain(),
-        `import 'material-design-icons-iconfont/dist/material-design-icons.css'`
-      )
-    } catch(e) {
-      console.error(e)
-    }
-  }
-
-
-  // Render vuetify plugin file
-  api.render(api.hasPlugin('typescript') ? {
-    './src/plugins/vuetify.ts': './templates/default/src/plugins/vuetify.ts'
-  } : {
-    './src/plugins/vuetify.js': './templates/default/src/plugins/vuetify.js'
-  }, opts)
-
-  // Render files if we're replacing
-  const fs = require('fs')
-  const routerPath = api.resolve('./src/router.js')
-  opts.router = fs.existsSync(routerPath)
-
-  if (opts.replaceComponents) {
-    const files = {
-      './src/App.vue': './templates/default/src/App.vue',
-      './src/assets/logo.png': './templates/default/src/assets/logo.png'
-    }
-
-    if (opts.router) {
-      files['./src/views/Home.vue'] = './templates/default/src/views/Home.vue'
-    } else {
-      api.render('./templates/hw')
-    }
-
-    api.render(files, opts)
-  }
+  const alaCarte = require('./tools/alaCarte')
+  const fonts = require('./tools/fonts')
+  const polyfill = require('./tools/polyfill')
+  const vuetify = require('./tools/vuetify')
+
+  vuetify.addDependencies(api)
+  opts.useAlaCarte && alaCarte.addDependencies(api)
+  opts.usePolyfill && polyfill.addDependencies(api)
+  opts.installFonts && fonts.addDependencies(api, opts.iconFont)
+  opts.installFonts && fonts.addImports(api, opts.iconFont)
+  vuetify.renderFiles(api, opts)
 
   // adapted from https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/generator/index.js#L68-L91
   api.onCreateComplete(() => {
-    // Modify main.js
-    helpers.updateFile(helpers.getMain(), lines => {
-      const vueImportIndex = lines.findIndex(line => line.match(/^import Vue/))
-
-      lines.splice(vueImportIndex + 1, 0, 'import \'./plugins/vuetify\'')
-
-      return lines
-    })
-
-    // Add polyfill
-    if (opts.usePolyfill) {
-      helpers.updateBabelConfig(cfg => {
-        if (!cfg.presets) return cfg
-
-        const vuePresetIndex = cfg.presets.findIndex(p => Array.isArray(p) ? p[0] === '@vue/app' : p === '@vue/app')
-        const isArray = Array.isArray(cfg.presets[vuePresetIndex])
-
-        if (vuePresetIndex < 0) return cfg
-
-        if (isArray) {
-          cfg.presets[vuePresetIndex][1]['useBuiltIns'] = 'entry'
-        } else {
-          cfg.presets[vuePresetIndex] = [
-            '@vue/app',
-            {
-              useBuiltIns: 'entry'
-            }
-          ]
-        }
-
-        return cfg
-      })
-
-      helpers.updateFile(helpers.getMain(), lines => {
-        if (!lines.find(l => l.match(/^(import|require).*@babel\/polyfill.*$/))) {
-          lines.unshift('import \'@babel/polyfill\'')
-        }
-
-        return lines
-      })
-    }
-
-    // If a-la-carte, update babel
-    if (opts.useAlaCarte) {
-      helpers.updateBabelConfig(cfg => {
-        if (cfg.plugins === undefined) {
-          cfg.plugins = []
-        }
-
-        cfg.plugins.push([
-          'transform-imports',
-          {
-            vuetify: {
-              transform: 'vuetify/es5/components/${member}',
-              preventFullImport: true
-            }
-          }
-        ])
-
-        return cfg
-      })
-    }
-
-    // Add Material Icons (unless electron)
-    if(api.hasPlugin('electron-builder') === false) {
-      const indexPath = api.resolve('./public/index.html')
-
-      let content = fs.readFileSync(indexPath, { encoding: 'utf8' })
-
-      const lines = content.split(/\r?\n/g).reverse()
-
-      const lastLink = lines.findIndex(line => line.match(/^\s*<link/))
-      lines[lastLink] += '\n    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">'
-
-      content = lines.reverse().join('\n')
-      fs.writeFileSync(indexPath, content, { encoding: 'utf8' })
-    }
+    vuetify.addImports(api)
+    opts.usePolyfill && polyfill.updateBabelConfig(api)
+    opts.usePolyfill && polyfill.addImports(api)
+    opts.useAlaCarte && alaCarte.updateBabelConfig(api)
+    !opts.installFonts && fonts.addLinks(api, opts.iconFont)
+    vuetify.setHtmlLang(api, opts.locale)
   })
 }

generator/templates/default/src/App.vue

@@ -30,18 +30,50 @@
     >
       <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-btn icon @click.stop="miniVariant = !miniVariant">
+      <%_ if (options.iconFont === 'md') { _%>
         <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
+      <%_ } else if (options.iconFont === 'mdi') { _%>
+        <v-icon v-html="miniVariant ? 'mdi-chevron-right' : 'mdi-chevron-left'"></v-icon>
+      <%_ } else if (options.iconFont === 'fa') { _%>
+        <v-icon v-html="miniVariant ? 'fas fa-chevron-right' : 'fas fa-chevron-left'"></v-icon>
+      <%_ } else if (options.iconFont === 'fa4') { _%>
+        <v-icon v-html="miniVariant ? 'fa-chevron-right' : 'fa-chevron-left'"></v-icon>
+      <%_ } _%>
       </v-btn>
       <v-btn icon @click.stop="clipped = !clipped">
+      <%_ if (options.iconFont === 'md') { _%>
         <v-icon>web</v-icon>
+      <%_ } else if (options.iconFont === 'mdi') { _%>
+        <v-icon>mdi-web</v-icon>
+      <%_ } else if (options.iconFont === 'fa') { _%>
+        <v-icon>fas fa-globe</v-icon>
+      <%_ } else if (options.iconFont === 'fa4') { _%>
+        <v-icon>fa-globe</v-icon>
+      <%_ } _%>
       </v-btn>
       <v-btn icon @click.stop="fixed = !fixed">
-        <v-icon>remove</v-icon>
+      <%_ if (options.iconFont === 'md') { _%>
+        <v-icon>web</v-icon>
+      <%_ } else if (options.iconFont === 'mdi') { _%>
+        <v-icon>mdi-minus</v-icon>
+      <%_ } else if (options.iconFont === 'fa') { _%>
+        <v-icon>fas fa-minus</v-icon>
+      <%_ } else if (options.iconFont === 'fa4') { _%>
+        <v-icon>fa-minus</v-icon>
+      <%_ } _%>
       </v-btn>
       <v-toolbar-title v-text="title"></v-toolbar-title>
       <v-spacer></v-spacer>
       <v-btn icon @click.stop="rightDrawer = !rightDrawer">
+      <%_ if (options.iconFont === 'md') { _%>
         <v-icon>menu</v-icon>
+      <%_ } else if (options.iconFont === 'mdi') { _%>
+        <v-icon>mdi-menu</v-icon>
+      <%_ } else if (options.iconFont === 'fa') { _%>
+        <v-icon>fas fa-bars</v-icon>
+      <%_ } else if (options.iconFont === 'fa4') { _%>
+        <v-icon>fa-bars</v-icon>
+      <%_ } _%>
       </v-btn>
     </v-toolbar>
     <v-content>
@@ -61,7 +93,15 @@
       <v-list>
         <v-list-tile @click="right = !right">
           <v-list-tile-action>
+            <%_ if (options.iconFont === 'md') { _%>
             <v-icon>compare_arrows</v-icon>
+            <%_ } else if (options.iconFont === 'mdi') { _%>
+            <v-icon>mdi-arrows-left-right-bold-outline</v-icon>
+            <%_ } else if (options.iconFont === 'fa') { _%>
+            <v-icon>fas fa-exchange-alt</v-icon>
+            <%_ } else if (options.iconFont === 'fa4') { _%>
+            <v-icon>fa-exchange</v-icon>
+            <%_ } _%>
           </v-list-tile-action>
           <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
         </v-list-tile>
@@ -91,7 +131,15 @@ export default {
       drawer: true,
       fixed: false,
       items: [{
+<%_ if (options.iconFont === 'md') { _%>
         icon: 'bubble_chart',
+<%_ } else if (options.iconFont === 'mdi') { _%>
+        icon: 'mdi-chart-bubble',
+<%_ } else if (options.iconFont === 'fa') { _%>
+        icon: 'fas fa-shapes',
+<%_ } else if (options.iconFont === 'fa4') { _%>
+        icon: 'fa-bullseye',
+<%_ } _%>
         title: 'Inspire'
       }],
       miniVariant: false,