feat(ui;vite-plugin): use native Vite (through Rollup) alias on "quas…

…ar" package when in DEV mode; lots of other improvements

ui/build/script.build.javascript.js

@@ -73,7 +73,7 @@ const uglifyJsOptions = {
 
 const builds = [
   {
-    // entry used by @quasar/vite-plugin for DEV only
+    // client entry used by @quasar/vite-plugin for DEV only
     // (has flags untouched; required to replace them)
     rollup: {
       input: {
@@ -87,10 +87,12 @@ const builds = [
     build: {
       unminified: true,
       replace: {
-        __QUASAR_VERSION__: `'${ version }'`
+        __QUASAR_VERSION__: `'${ version }'`,
+        __QUASAR_SSR_SERVER__: false
       }
     }
   },
+
   {
     // SSR server prod entry
     // (no flags; not required to replace them)
@@ -114,6 +116,7 @@ const builds = [
       }
     }
   },
+
   {
     // UMD entry
     rollup: {

vite-plugin/src/js-transform.js

@@ -2,13 +2,6 @@ import importTransformation from 'quasar/dist/transforms/import-transformation.j
 
 const importQuasarRegex = /import\s*\{([\w,\s]+)\}\s*from\s*(['"])quasar\2;?/g
 
-export function jsDevTransform (code) {
-  return code.replace(
-    importQuasarRegex,
-    (_, match) => `import {${match}} from 'quasar/dist/quasar.esm.js'`
-  )
-}
-
 export function jsProdTransform (code, importMap = {}) {
   return code.replace(
     importQuasarRegex,

vite-plugin/src/plugin.js

@@ -1,10 +1,10 @@
 import { normalizePath } from 'vite'
 
 import { getViteConfig } from './vite-config'
-import { jsDevTransform, jsProdTransform } from './js-transform'
 import { vueTransform } from './vue-transform'
 import { createScssTransform } from './scss-transform'
-import { parseViteRequest } from './utils/query'
+import { parseViteRequest } from './query'
+import { jsProdTransform } from './js-transform'
 
 const defaultOptions = {
   runMode: 'web-client',
@@ -15,6 +15,7 @@ const defaultOptions = {
 function getConfigPlugin (opts) {
   return {
     name: 'vite:quasar:vite-conf',
+
     config (viteConf) {
       const vueCfg = viteConf.plugins.find(entry => entry.name === 'vite:vue')
 
@@ -35,20 +36,25 @@ function getScssTransformsPlugin (opts) {
 
   const scssTransform = createScssTransform('scss', sassVariables)
   const sassTransform = createScssTransform('sass', sassVariables)
+  const scssExt = [ '.scss' ]
+  const sassExt = [ '.sass' ]
 
   return {
     name: 'vite:quasar:scss',
+
     enforce: 'pre',
+
     transform (src, id) {
       const { is } = parseViteRequest(id)
 
-      if (is.style('.scss')) {
+      if (is.style(scssExt) === true) {
         return {
           code: scssTransform(src),
           map: null
         }
       }
-      if (is.style('.sass')) {
+
+      if (is.style(sassExt) === true) {
         return {
           code: sassTransform(src),
           map: null
@@ -61,27 +67,30 @@ function getScssTransformsPlugin (opts) {
 }
 
 function getScriptTransformsPlugin (opts) {
-  let jsCodeTransform = jsProdTransform
+  let isDev = false
 
   return {
     name: 'vite:quasar:script',
-    configResolved(resolvedConfig) {
+
+    configResolved (resolvedConfig) {
       if (resolvedConfig.mode === 'development') {
-        jsCodeTransform = jsDevTransform
+        isDev = true
       }
     },
+
     transform (src, id) {
       const { is } = parseViteRequest(id)
 
-      if (is.template()) {
+      if (is.template() === true) {
         return {
-          code: vueTransform(src, opts.autoImportComponentCase, jsCodeTransform),
+          code: vueTransform(src, opts.autoImportComponentCase, isDev),
           map: null // provide source map if available
         }
       }
-      else if (is.script()) {
+
+      if (isDev === false && is.script() === true) {
         return {
-          code: jsCodeTransform(src),
+          code: jsProdTransform(src),
           map: null // provide source map if available
         }
       }

vite-plugin/src/utils/query.js → vite-plugin/src/query.js

@@ -19,39 +19,39 @@
  * @param {string} id
  * @returns {{ filename: string; query: { [key: string]: string; }; is: ViteQueryIs }}
  */
-export function parseViteRequest(id) {
-  const [filename, rawQuery] = id.split('?', 2)
+export function parseViteRequest (id) {
+  const [ filename, rawQuery ] = id.split('?', 2)
   const query = Object.fromEntries(new URLSearchParams(rawQuery))
 
-  const isVueQuery = query.vue !== void 0
+  const is = query.vue !== void 0 // is vue query?
+    ? {
+        vue: () => true,
+        template: () => query.type === void 0 || query.type === 'template',
+        script: (extensions = scriptExt) =>
+          (query.type === void 0 || query.type === 'script') &&
+          isOfExt({ query, extensions }) === true,
+        style: (extensions = styleExt) =>
+          query.type === 'style' && isOfExt({ query, extensions }) === true
+      }
+    : {
+        vue: () => isOfExt({ extensions: vueExt, filename }),
+        template: () => isOfExt({ filename, extensions: vueExt }),
+        script: (extensions = scriptExt) => isOfExt({ filename, extensions }),
+        style: (extensions = styleExt) => isOfExt({ filename, extensions })
+      }
 
   return {
     filename,
     query,
-
-    is: {
-      vue: () => isVueQuery || isOfExt({ extensions: '.vue', filename }),
-      template: () =>
-        isVueQuery
-          ? query.type === void 0 || query.type === 'template'
-          : isOfExt({ filename, extensions: '.vue' }),
-      script: (extensions = ['.js', '.jsx', '.ts', '.tsx', '.vue']) =>
-        isVueQuery
-          ? (query.type === void 0 || query.type === 'script') &&
-            isOfExt({ query, extensions })
-          : isOfExt({ filename, extensions }),
-      style: (extensions = ['.css', '.scss', '.sass']) =>
-        isVueQuery
-          ? query.type === 'style' && isOfExt({ query, extensions })
-          : isOfExt({ filename, extensions }),
-    },
+    is
   }
 }
 
-function isOfExt({ extensions, filename, query }) {
-  extensions = Array.isArray(extensions) ? extensions : [extensions]
+const vueExt = [ '.vue' ]
+const scriptExt = [ '.js', '.jsx', '.ts', '.tsx', '.vue' ]
+const styleExt = [ '.css', '.scss', '.sass' ]
 
-  return extensions.some(
-    (ext) => filename?.endsWith(ext) || query?.[`lang${ext}`] !== void 0
+const isOfExt = ({ extensions, filename, query }) =>
+  extensions.some(
+    ext => filename?.endsWith(ext) || query?.[`lang${ext}`] !== void 0
   )
-}

vite-plugin/src/vite-config.js

@@ -23,8 +23,19 @@ export function getViteConfig (runMode, externalViteCfg) {
     })
   }
   else {
-    viteCfg.optimizeDeps = {
-      exclude: [ 'quasar' ]
+    // Alias "quasar" package to its dev file (which has flags)
+    // to reduce the number of HTTP requests while in DEV mode
+    if (externalViteCfg.mode === 'development') {
+      viteCfg.resolve = {
+        alias: [
+          { find: /^quasar$/, replacement: 'quasar/dist/quasar.esm.js' }
+        ]
+      }
+    }
+    else {
+      viteCfg.optimizeDeps = {
+        exclude: [ 'quasar' ]
+      }
     }
 
     if (runMode === 'ssr-client') {

vite-plugin/src/vue-transform.js

@@ -12,16 +12,19 @@ const compRegex = {
 const dirRegex = new RegExp(`_resolveDirective\\("${autoImportData.regex.directives.replace(/v-/g, '')}"\\)`, 'g')
 const lengthSortFn = (a, b) => b.length - a.length
 
-export function vueTransform (content, autoImportComponentCase, jsCodeTransform) {
+export function vueTransform (content, autoImportComponentCase, isDev) {
   const importList = []
   const importMap = {}
 
   const compList = []
   const dirList = []
 
   const reverseMap = {}
+  const jsImportTransformed = isDev === true
+    ? content
+    : jsProdTransform(content, importMap)
 
-  let code = jsCodeTransform(content, importMap)
+  let code = jsImportTransformed
     .replace(compRegex[autoImportComponentCase], (_, match) => {
       const name = autoImportData.importName[match]
       const reverseName = match.replace(/-/g, '_')
@@ -71,9 +74,9 @@ export function vueTransform (content, autoImportComponentCase, jsCodeTransform)
       .replace(new RegExp(`_directive_(${list})`, 'g'), (_, match) => reverseMap[match])
   }
 
-  const codePrefix = jsCodeTransform === jsProdTransform // is it prod?
-    ? importList.map(name => `import ${name} from '${importTransformation(name)}'`).join(`;`)
-    : `import {${importList.join(',')}} from 'quasar/dist/quasar.esm.js'`
+  const codePrefix = isDev === true // is it dev?
+    ? `import {${importList.join(',')}} from 'quasar'`
+    : importList.map(name => `import ${name} from '${importTransformation(name)}'`).join(`;`)
 
   return codePrefix + ';' + code
 }