feat: v1 support

Author: rstoenescu

generator/index.js

@@ -3,67 +3,55 @@ const fs = require('fs'),
   extendBabel = require('../lib/extendBabel')
 
 const message = `
-Documentation can be found at: https://quasar-framework.org
+Documentation can be found at: https://v1.quasar-framework.org
 
 Quasar is relying on donations to evolve. We'd be very grateful if you can
 take a look at: https://www.patreon.com/quasarframework
 Any amount is very welcomed.
-If invoices are required, please first contact razvan[email protected]
+If invoices are required, please first contact razvan@quasar-framework.org
 
 Please give us a star on Github if you appreciate our work:
 https://github.com/quasarframework/quasar
 
 Enjoy! - Quasar Team
 `
 
-module.exports = (api, opts, rootOpts) => {
-  const components = opts.quasar.v1
-      ? [
-          'QLayout',
-          'QHeader',
-          'QDrawer',
-          'QPageContainer',
-          'QPage',
-          'QToolbar',
-          'QToolbarTitle',
-          'QBtn',
-          'QIcon',
-          'QList',
-          'QItem',
-          'QItemSection',
-          'QItemLabel'
-        ]
-      : [
-          'QBtn',
-          'QLayout',
-          'QLayoutHeader',
-          'QLayoutDrawer',
-          'QPage',
-          'QPageContainer',
-          'QToolbar',
-          'QToolbarTitle',
-          'QList',
-          'QListHeader',
-          'QItemSeparator',
-          'QItem',
-          'QItemSide',
-          'QItemMain'
-        ],
-    directives = [],
-    plugins = []
-
-  const tsPath = api.resolve('./src/main.ts'),
+const iconMap = {
+  ionicons: 'ionicons-v4',
+  fontawesome: 'fontawesome-v5',
+  mdi: 'mdi-v3'
+}
+
+module.exports = (api, opts) => {
+  const components = [
+    'QLayout',
+    'QHeader',
+    'QDrawer',
+    'QPageContainer',
+    'QPage',
+    'QToolbar',
+    'QToolbarTitle',
+    'QBtn',
+    'QIcon',
+    'QList',
+    'QItem',
+    'QItemSection',
+    'QItemLabel'
+  ]
+
+  const directives = []
+  const plugins = []
+
+  const
+    tsPath = api.resolve('./src/main.ts'),
     jsPath = api.resolve('./src/main.js'),
     hasTS = fs.existsSync(tsPath)
-  const dependencies = opts.quasar.v1
-    ? {
-        quasar: '^1.0.0-beta.1',
-        '@quasar/extras': '^1.0.0'
-      }
-    : {
-        'quasar-framework': '^0.17.0',
-        'quasar-extras': '^2.0.4'
-      }
+
+  const dependencies = {
+    quasar: '^1.0.0-beta.1',
+    '@quasar/extras': '^1.0.0'
+  }
+
   const deps = {
     dependencies,
     devDependencies: {
@@ -81,40 +69,35 @@ module.exports = (api, opts, rootOpts) => {
 
   // modify plugin options
   extendPluginOptions(api, (pluginOptions, transpileDependencies) => {
-    pluginOptions.quasar = {
-      theme: opts.quasar.theme
-    }
+    pluginOptions.quasar = pluginOptions.quasar || {}
+
     if (opts.quasar.rtlSupport) {
-      pluginOptions.quasar.rtlSupport = true
-    }
-    if (opts.quasar.all) {
-      pluginOptions.quasar.importAll = true
+      pluginOptions.quasar.rtlSupport = opts.quasar.rtlSupport
     }
-    if (opts.quasar.v1) {
-      pluginOptions.quasar.v1 = true
+
+    if (opts.quasar.treeShake) {
+      pluginOptions.quasar.treeShake = opts.quasar.treeShake
     }
-    const transpileRegex = opts.quasar.v1
-      ? /[\\/]node_modules[\\/]quasar[\\/]/
-      : /[\\/]node_modules[\\/]quasar-framework[\\/]/
-    transpileDependencies.push(transpileRegex)
+
+    transpileDependencies.push(/[\\/]node_modules[\\/]quasar[\\/]/)
 
     return { pluginOptions, transpileDependencies }
   })
 
   api.render('./templates/common')
+
   if (opts.quasar.rtlSupport) {
     api.render('./templates/rtl')
   }
+
   if (opts.quasar.replaceComponents) {
     const extension = hasTS ? 'ts' : 'js',
       routerFile = api.resolve(`src/router.${extension}`),
       hasRouter = fs.existsSync(routerFile)
 
     api.render(`./templates/with${hasRouter ? '' : 'out'}-router-base`, opts)
     api.render(
-      `./templates/with${hasRouter ? '' : 'out'}-router-${
-        opts.quasar.v1 ? 'v1' : 'legacy'
-      }`,
+      `./templates/with${hasRouter ? '' : 'out'}-router`,
       opts
     )
     if (hasRouter) {
@@ -123,14 +106,15 @@ module.exports = (api, opts, rootOpts) => {
   }
 
   api.onCreateComplete(() => {
-    if (!opts.quasar.all) {
-      extendBabel(api, opts.quasar)
+    if (opts.quasar.treeShake) {
+      extendBabel(api)
     }
 
-    let lines = '\n'
+    const
+      hasIconSet = opts.quasar.iconSet !== 'material-icons',
+      hasLang = opts.quasar.lang !== 'en-us'
 
-    const hasLang = opts.quasar.i18n !== 'en-us',
-      hasIconSet = opts.quasar.iconSet !== 'material-icons'
+    let lines = '\n'
 
     if (!opts.quasar.features.includes(opts.quasar.iconSet)) {
       opts.quasar.features.push(opts.quasar.iconSet)
@@ -139,56 +123,28 @@ module.exports = (api, opts, rootOpts) => {
     lines += `\nimport './styles/quasar.styl'`
 
     if (opts.quasar.features.includes('ie')) {
-      lines += `\nimport 'quasar${
-        opts.quasar.v1 ? '' : '-framework'
-      }/dist/quasar.ie.polyfills'`
+      lines += `\nimport 'quasar/dist/quasar.ie.polyfills'`
     }
-    const v1IconsMap = {
-      'material-icons': 'material-icons',
-      ionicons: 'ionicons-v4',
-      fontawesome: 'fontawesome-v5',
-      mdi: 'mdi-v3'
-    }
-    // Return either legacy or v1 name
-    const getIconSetName = name => (opts.quasar.v1 ? v1IconsMap[name] : name)
+
     if (hasIconSet) {
-      lines += `\nimport iconSet from 'quasar${
-        opts.quasar.v1 ? '' : '-framework'
-      }/${opts.quasar.v1 ? 'icon-set' : 'icons'}/${getIconSetName(
-        opts.quasar.iconSet
-      )}'`
+      const set = iconMap[opts.quasar.iconSet] || opts.quasar.iconSet
+      lines += `\nimport iconSet from 'quasar/icon-set/${set}.js'`
     }
+
     if (hasLang) {
-      lines += `\nimport lang from 'quasar${
-        opts.quasar.v1 ? '' : '-framework'
-      }/i18n/${opts.quasar.i18n}'`
+      lines += `\nimport lang from 'quasar/lang/${opts.quasar.lang}.js'`
     }
-    const iconSets = [
-      'material-icons',
-      'fontawesome-v5',
-      'mdi-v3',
-      'ionicons-v4',
-      'fontawesome',
-      'mdi',
-      'ionicons'
-    ]
+
     opts.quasar.features
       .filter(feat => feat !== 'ie')
       .forEach(feat => {
-        if (iconSets.includes(feat)) feat = getIconSetName(feat)
-        lines += `\nimport '${
-          opts.quasar.v1 ? '@quasar/extras' : 'quasar-extras'
-        }/${feat}${
-          // Path must be iconpack/iconpack.css with @quasar/extras
-          iconSets.includes(feat) && opts.quasar.v1 ? `/${feat}.css` : ''
-        }'`
+        feat = iconMap[feat] || feat
+        lines += `\nimport '@quasar/extras/${feat}/${feat}.css'`
       })
 
     // build import
     lines += `\nimport `
-    if (opts.quasar.all) {
-      lines += `Quasar`
-    } else {
+    if (opts.quasar.treeShake) {
       lines += `{\n  Quasar, `
       components
         .concat(directives)
@@ -197,15 +153,17 @@ module.exports = (api, opts, rootOpts) => {
           lines += `\n  ${part},`
         })
       lines += `\n}`
+    } else {
+      lines += `Quasar`
     }
     lines += ` from 'quasar'`
 
     // build Vue.use()
     lines += `\n\nVue.use(Quasar, {`
     lines += `\n  config: {}`
 
-    // if not 'all' we want to include specific defaults
-    if (!opts.quasar.all) {
+    // if tree-shake was chosen then we want to include specific defaults
+    if (opts.quasar.treeShake) {
       lines += ',\n  components: {'
       components.forEach(part => {
         lines += `\n    ${part},`
@@ -226,10 +184,10 @@ module.exports = (api, opts, rootOpts) => {
     }
 
     if (hasLang) {
-      lines += `, i18n: lang`
+      lines += `,\n  lang: lang`
     }
     if (hasIconSet) {
-      lines += `, iconSet: iconSet`
+      lines += `,\n  iconSet: iconSet`
     }
 
     lines += `\n })`

generator/templates/common/src/styles/quasar.variables.styl

@@ -1,13 +1,12 @@
 // It's highly recommended to change the default colors
 // to match your app's branding.
 
-$primary   = #027be3
+$primary   = #027BE3
 $secondary = #26A69A
-$tertiary  = #555
+$accent    = #9C27B0
 
-$neutral   = #E0E1E2
 $positive  = #21BA45
-$negative  = #DB2828
+$negative  = #C10015
 $info      = #31CCEC
 $warning   = #F2C037
 

generator/templates/with-router-base/src/App.vue

@@ -3,6 +3,3 @@
     <router-view/>
   </div>
 </template>
-
-<style>
-</style>