feat: Support Quasar v2

Author: rstoenescu

Diff for: generator/index.js

@@ -1,5 +1,5 @@
-const fs = require('fs'),
-  extendPluginOptions = require('../lib/extendPluginOptions')
+const fs = require('fs')
+const extendPluginOptions = require('../lib/extendPluginOptions')
 
 const message = `
 Documentation can be found at: https://quasar.dev
@@ -27,13 +27,13 @@ const plugins = []
 
 module.exports = (api, opts) => {
   const
-    quasarPath = api.resolve('./src/quasar.js'),
+    quasarPath = api.resolve('./src/quasar-config.js'),
     tsPath = api.resolve('./src/main.ts'),
     jsPath = api.resolve('./src/main.js'),
     hasTS = fs.existsSync(tsPath)
 
   const dependencies = {
-    quasar: '^1.0.0',
+    quasar: '^2.0.0-alpha.17',
     '@quasar/extras': '^1.0.0'
   }
 
@@ -42,16 +42,10 @@ module.exports = (api, opts) => {
     devDependencies: {}
   }
 
-  if (opts.quasar.cssPreprocessor === 'styl') {
+  if (['sass', 'scss'].includes(opts.quasar.cssPreprocessor)) {
     Object.assign(deps.devDependencies, {
-      stylus: '^0.54.5',
-      'stylus-loader': '^3.0.2'
-    })
-  }
-  else if (['sass', 'scss'].includes(opts.quasar.cssPreprocessor)) {
-    Object.assign(deps.devDependencies, {
-      'node-sass': '^4.13.0',
-      'sass-loader': '^8.0.0'
+      'sass': '^1.29.0',
+      'sass-loader': '^10.1.0'
     })
   }
 
@@ -102,64 +96,56 @@ module.exports = (api, opts) => {
   }
 
   api.onCreateComplete(() => {
-    let lines = `import Vue from 'vue'\n`
+    let qFileLines = ''
 
     const
       hasIconSet = opts.quasar.iconSet !== 'material-icons',
-      hasLang = opts.quasar.lang !== 'en-us'
+      hasLang = opts.quasar.lang !== 'en-US'
 
     if (!opts.quasar.features.includes(opts.quasar.iconSet)) {
       opts.quasar.features.push(opts.quasar.iconSet)
     }
 
     if (opts.quasar.cssPreprocessor !== 'none') {
-      lines += `\nimport './styles/quasar.${opts.quasar.cssPreprocessor}'`
+      qFileLines += `\nimport './styles/quasar.${opts.quasar.cssPreprocessor}'`
     }
     else {
-      lines += `\nimport 'quasar/dist/quasar.css'`
-    }
-
-    if (opts.quasar.features.includes('ie')) {
-      lines += `\nimport 'quasar/dist/quasar.ie.polyfills'`
+      qFileLines += `\nimport 'quasar/dist/quasar.css'`
     }
 
     if (hasIconSet) {
       const set = iconMap[opts.quasar.iconSet] || opts.quasar.iconSet
-      lines += `\nimport iconSet from 'quasar/icon-set/${set}.js'`
+      qFileLines += `\nimport iconSet from 'quasar/icon-set/${set}.js'`
     }
 
     if (hasLang) {
-      lines += `\nimport lang from 'quasar/lang/${opts.quasar.lang}.js'`
+      qFileLines += `\nimport lang from 'quasar/lang/${opts.quasar.lang}.js'`
     }
 
     opts.quasar.features
-      .filter(feat => feat !== 'ie')
       .forEach(feat => {
         feat = iconMap[feat] || feat
-        lines += `\nimport '@quasar/extras/${feat}/${feat}.css'`
+        qFileLines += `\nimport '@quasar/extras/${feat}/${feat}.css'`
       })
 
-    // build import
-    lines += `\nimport { Quasar } from 'quasar'`
-
     // build Vue.use()
-    lines += `\n\nVue.use(Quasar, {`
-    lines += `\n  config: {}`
+    qFileLines += `\n\nexport default {`
+    qFileLines += `\n  config: {}`
 
-    lines += ',\n  plugins: {'
+    qFileLines += ',\n  plugins: {'
     plugins.forEach(part => {
-      lines += `\n   ${part},`
+      qFileLines += `\n   ${part},`
     })
-    lines += `\n  }`
+    qFileLines += `\n  }`
 
     if (hasLang) {
-      lines += `,\n  lang: lang`
+      qFileLines += `,\n  lang: lang`
     }
     if (hasIconSet) {
-      lines += `,\n  iconSet: iconSet`
+      qFileLines += `,\n  iconSet: iconSet`
     }
 
-    lines += `\n })`
+    qFileLines += `\n}`
 
     // Now inject additions to main.[js|ts]
     {
@@ -169,12 +155,13 @@ module.exports = (api, opts) => {
       const mainLines = content.split(/\r?\n/g).reverse()
 
       const index = mainLines.findIndex(line => line.match(/^import/))
-      mainLines[index] += `\nimport './quasar'`
+      mainLines[index] += `\nimport { Quasar } from 'quasar'\nimport quasarConfig from './quasar-config'`
 
       content = mainLines.reverse().join('\n')
+      content = content.replace('createApp(App)', `createApp(App).use(Quasar, quasarConfig)`)
       fs.writeFileSync(mainPath, content, { encoding: 'utf8' })
 
-      fs.writeFileSync(quasarPath, lines, { encoding: 'utf8' })
+      fs.writeFileSync(quasarPath, qFileLines, { encoding: 'utf8' })
     }
 
     if (api.generator.hasPlugin('@vue/cli-plugin-eslint')) {

Diff for: generator/templates/styl/src/styles/quasar.styl

@@ -1,28 +1,30 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import DefaultLayout from './layouts/Default.vue'
 import Home from './views/Home.vue'
 import About from './views/About.vue'
 
-Vue.use(Router)
+const routes = [
+  {
+    path: '/',
+    component: DefaultLayout,
+    children: [
+      {
+        path: '',
+        name: 'home',
+        component: Home
+      },
+      {
+        path: '/about',
+        name: 'about',
+        component: About
+      }
+    ]
+  }
+]
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      component: DefaultLayout,
-      children: [
-        {
-          path: '',
-          name: 'home',
-          component: Home
-        },
-        {
-          path: '/about',
-          name: 'about',
-          component: About
-        }
-      ]
-    }
-  ]
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
 })
+
+export default router

Diff for: generator/templates/styl/src/styles/quasar.variables.styl

@@ -1,28 +1,30 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import DefaultLayout from './layouts/Default.vue'
 import Home from './views/Home.vue'
 import About from './views/About.vue'
 
-Vue.use(Router)
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    component: DefaultLayout,
+    children: [
+      {
+        path: '',
+        name: 'home',
+        component: Home
+      },
+      {
+        path: '/about',
+        name: 'about',
+        component: About
+      }
+    ]
+  }
+]
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      component: DefaultLayout,
-      children: [
-        {
-          path: '',
-          name: 'home',
-          component: Home
-        },
-        {
-          path: '/about',
-          name: 'about',
-          component: About
-        }
-      ]
-    }
-  ]
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
 })
+
+export default router

Diff for: generator/templates/with-router-js/src/router.js

@@ -23,7 +23,7 @@
       v-model="leftDrawerOpen"
       show-if-above
       bordered
-      content-class="bg-grey-2"
+      class="bg-grey-2"
     >
       <q-list>
         <q-item-label header>Navigation</q-item-label>
@@ -100,12 +100,14 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 export default {
   name: 'LayoutDefault',
 
-  data () {
+  setup () {
     return {
-      leftDrawerOpen: false
+      leftDrawerOpen: ref(false)
     }
   }
 }

Diff for: generator/templates/with-router-ts/src/router.ts

@@ -23,7 +23,7 @@
       v-model="leftDrawerOpen"
       show-if-above
       bordered
-      content-class="bg-grey-2"
+      class="bg-grey-2"
     >
       <q-list>
         <q-item-label header>Essential Links</q-item-label>
@@ -82,6 +82,7 @@
 </template>
 
 <script>
+import { ref } from 'vue'
 import HelloWorld from './components/HelloWorld.vue'
 
 export default {
@@ -91,13 +92,10 @@ export default {
     HelloWorld
   },
 
-  data () {
+  setup () {
     return {
-      leftDrawerOpen: false
+      leftDrawerOpen: ref(false)
     }
   }
 }
 </script>
-
-<style>
-</style>

Diff for: generator/templates/with-router/src/layouts/Default.vue

@@ -1,5 +1,9 @@
 const fs = require('fs')
 const path = require('path')
+const webpack = require('webpack')
+
+const getDevlandFile = require('./lib/get-devland-file')
+const { version } = getDevlandFile('quasar/package.json')
 
 function getCssPreprocessor (api) {
   return ['sass', 'scss', 'styl'].find(ext => {
@@ -36,27 +40,36 @@ module.exports = (api, options) => {
         `quasar/src/css/flex-addon.${srcCssExt}`
       )
 
+    chain.plugin('define-quasar')
+      .use(webpack.DefinePlugin, [{
+        __QUASAR_VERSION__: `'${version}'`,
+        __QUASAR_SSR__: false,
+        __QUASAR_SSR_SERVER__: false,
+        __QUASAR_SSR_CLIENT__: false,
+        __QUASAR_SSR_PWA__: false
+      }])
+
     chain.performance.maxEntrypointSize(512000)
 
     const strategy = options.pluginOptions.quasar.importStrategy || 'kebab'
 
     if (['kebab', 'pascal', 'combined'].includes(strategy)) {
       chain.module.rule('vue')
         .use('quasar-auto-import')
-        .loader(path.join(__dirname, 'lib/loader.auto-import.js'))
+        .loader(path.join(__dirname, 'lib/loader.vue-auto-import.js'))
         .options(strategy)
         .before('cache-loader')
+
+      chain.module.rule('transform-quasar-imports')
+        .test(/\.(t|j)sx?$/)
+        .use('transform-quasar-imports')
+          .loader(path.join(__dirname, 'lib/loader.js-auto-import.js'))
     }
     else {
       console.error(`Incorrect setting for quasar > importStrategy (${strategy})`)
       console.error(`Use one of: 'kebab', 'pascal', 'combined'.`)
       console.log()
       process.exit(1)
     }
-
-    chain.module.rule('transform-quasar-imports')
-      .test(/\.(t|j)sx?$/)
-      .use('transform-quasar-imports')
-        .loader(path.join(__dirname, 'lib/loader.transform-quasar-imports.js'))
   })
 }