fix: babel transformations & more

Author: rstoenescu

generator/index.js

@@ -1,7 +1,10 @@
-const fs = require('fs')
-const extendPluginOptions = require('../lib/extendPluginOptions')
+const
+  fs = require('fs'),
+  extendPluginOptions = require('../lib/extendPluginOptions'),
+  extendBabel = require('../lib/extendBabel')
+
 const message = `
-Documentation can be found at: http://quasar-framework.org
+Documentation can be found at: https://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
@@ -16,7 +19,7 @@ Enjoy! - Quasar Team
 
 module.exports = (api, opts, rootOpts) => {
   const
-    defaultComponents = [
+    components = [
       'QBtn',
       'QLayout',
       'QLayoutHeader',
@@ -32,8 +35,8 @@ module.exports = (api, opts, rootOpts) => {
       'QItemSide',
       'QItemMain',
     ],
-    defaultDirectives = [],
-    defaultPlugins = []
+    directives = [],
+    plugins = []
 
   const
     tsPath = api.resolve('./src/main.ts'),
@@ -46,7 +49,7 @@ module.exports = (api, opts, rootOpts) => {
       'quasar-extras': '^2.0.4'
     },
     devDependencies: {
-      "babel-plugin-transform-imports": "1.5.0",
+      'babel-plugin-transform-imports': '1.5.0',
       'stylus': '^0.54.5',
       'stylus-loader': '^3.0.2'
     }
@@ -59,23 +62,20 @@ module.exports = (api, opts, rootOpts) => {
   api.extendPackage(deps)
 
   // modify plugin options
-  extendPluginOptions(api, pluginOptions => {
+  extendPluginOptions(api, (pluginOptions, transpileDependencies) => {
     pluginOptions.quasar = {
       theme: opts.quasar.theme
     }
     if (opts.quasar.rtlSupport) {
       pluginOptions.quasar.rtlSupport = true
     }
-
     if (opts.quasar.all) {
-      pluginOptions.quasar.framework = 'all'
-    } else {
-      pluginOptions.quasar.framework = {}
-      pluginOptions.quasar.framework.components = defaultComponents
-      pluginOptions.quasar.framework.directives = defaultDirectives
-      pluginOptions.quasar.framework.plugins = defaultPlugins
-    }
-    return pluginOptions
+      pluginOptions.quasar.importAll = true
+    }
+
+    transpileDependencies.push(/[\\/]node_modules[\\/]quasar-framework[\\/]/)
+
+    return { pluginOptions, transpileDependencies }
   })
 
   api.render('./templates/common')
@@ -95,12 +95,11 @@ module.exports = (api, opts, rootOpts) => {
   }
 
   api.onCreateComplete(() => {
-    let lines = '\n'
+    if (!opts.quasar.all) {
+      extendBabel(api, opts.quasar.theme)
+    }
 
-    const
-      components = defaultComponents,
-      directives = defaultDirectives,
-      plugins = defaultPlugins
+    let lines = '\n'
 
     const
       hasLang = opts.quasar.i18n !== 'en-us',
@@ -143,7 +142,7 @@ module.exports = (api, opts, rootOpts) => {
 
     // build Vue.use()
     lines += `\n\nVue.use(Quasar, {`
-    lines += opts.quasar.all ? ` config: {}` : `\n  config: {}`
+    lines += `\n  config: {}`
 
     // if not 'all' we want to include specific defaults
     if (!opts.quasar.all) {
@@ -170,7 +169,7 @@ module.exports = (api, opts, rootOpts) => {
       lines += `, iconSet: iconSet`
     }
 
-    lines += ` })`
+    lines += `\n })`
 
     // Now inject additions to main.[js|ts]
     {

index.js

@@ -1,54 +1,41 @@
 module.exports = (api, options) => {
-  const
-    theme = options.pluginOptions.quasar.theme,
-    rtl = options.pluginOptions.quasar.rtlSupport,
-    all = options.pluginOptions.quasar.framework === 'all'
-
-  if (rtl) {
+  if (options.pluginOptions.quasar.rtlSupport) {
     process.env.QUASAR_RTL = true
   }
 
   api.chainWebpack(chain => {
-    chain.module.rule('babel')
-      .test(/\.jsx?$/)
-      .exclude
-        .add(filepath => {
-          // always transpile js(x) in Vue files
-          if (/\.vue\.jsx?$/.test(filepath)) {
-            return false
-          }
+    const
+      theme = options.pluginOptions.quasar.theme,
+      importAll = options.pluginOptions.quasar.importAll
 
-          if ([/[\\/]node_modules[\\/]quasar-framework[\\/]/].some(dep => filepath.match(dep))) {
-            return false
-          }
+    if (!importAll) {
+      chain.resolve.extensions
+        .merge([ `.${theme}.js` ])
 
-          // don't transpile anything else in node_modules
-          return /[\\/]node_modules[\\/]/.test(filepath)
-        })
-        .end()
-      .use('babel-loader')
-      .loader('babel-loader')
-        .options({
-          extends: api.resolve('babel.config.js'),
-          plugins: !all ? [
-            [
-              'transform-imports', {
-                quasar: {
-                  transform: `quasar-framework/dist/babel-transforms/imports.${theme}.js`,
-                  preventFullImport: true
-                }
-              }
-            ]
-          ] : []
+      chain.plugin('define')
+        .tap(args => {
+          const { 'process.env': env, ...rest } = args[0]
+          return [{
+            'process.env': Object.assign(
+              {},
+              env,
+              { THEME: JSON.stringify(theme) }
+            ),
+            ...rest
+          }]
         })
+    }
 
-    chain
-      .resolve
-        .alias
-          .set('quasar', api.resolve(`node_modules/quasar-framework/dist/quasar.${theme}.esm.js`))
-          .set('variables', api.resolve(`src/styles/quasar.variables.styl`))
-          .set('quasar-variables', api.resolve(`node_modules/quasar-framework/src/css/core.variables.styl`))
-          .set('quasar-styl', api.resolve(`node_modules/quasar-framework/dist/quasar.${theme}.styl`))
-          .set('quasar-addon-styl', api.resolve(`node_modules/quasar-framework/src/css/flex-addon.styl`))
+    chain.resolve.alias
+      .set(
+        'quasar',
+        importAll
+          ? api.resolve(`node_modules/quasar-framework/dist/quasar.${theme}.esm.js`)
+          : 'quasar-framework'
+      )
+      .set('variables', api.resolve(`src/styles/quasar.variables.styl`))
+      .set('quasar-variables', api.resolve(`node_modules/quasar-framework/src/css/core.variables.styl`))
+      .set('quasar-styl', api.resolve(`node_modules/quasar-framework/dist/quasar.${theme}.styl`))
+      .set('quasar-addon-styl', api.resolve(`node_modules/quasar-framework/src/css/flex-addon.styl`))
   })
 }

lib/extendBabel.js

@@ -0,0 +1,37 @@
+const fs = require('fs')
+
+function updateBabel (babel, theme) {
+  babel.plugins = babel.plugins || []
+  babel.plugins.push([
+    'transform-imports', {
+      quasar: {
+        transform: `quasar-framework/dist/babel-transforms/imports.${theme}.js`,
+        preventFullImport: true
+      }
+    }
+  ])
+  return babel
+}
+
+module.exports = function (api, theme) {
+  console.log('extending babel')
+  const
+    babelPath = api.resolve('babel.config.js'),
+    packageJsonPath = api.resolve('package.json')
+
+  let content, filePath
+
+  if (fs.existsSync(babelPath)) {
+    filePath = babelPath
+    const config = updateBabel(require(filePath), theme)
+    content = `module.exports = ${JSON.stringify(config, null, 2)}`
+  }
+  else if (fs.existsSync(packageJsonPath)) {
+    filePath = packageJsonPath
+    const config = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
+    config.babel = updateBabel(config.babel || {}, theme)
+    content = JSON.stringify(config, null, 2)
+  }
+
+  fs.writeFileSync(filePath, content, 'utf-8')
+}

lib/extendPluginOptions.js

@@ -3,33 +3,36 @@
 const fs = require('fs')
 const isObject = val => val && Object(val) === val
 
-let pluginOptions = null
-
 module.exports = (api, cb) => {
-  // Look up pluginOptions from the vue.config.js file
-  // only do this once when its not yet defined
+  let pluginOptions, transpileDependencies
   const vueConfig = api.resolve('vue.config.js')
 
-  if (!pluginOptions && fs.existsSync(vueConfig)) {
+  if (fs.existsSync(vueConfig)) {
     let projectOptions = require(vueConfig)
 
     if (isObject(projectOptions.pluginOptions)) {
       pluginOptions = projectOptions.pluginOptions
     }
+    if (Array.isArray(projectOptions.transpileDependencies)) {
+      transpileDependencies = projectOptions.transpileDependencies
+    }
   }
 
   api.extendPackage(pkg => {
+    transpileDependencies = transpileDependencies || []
     pluginOptions = pluginOptions || {}
 
     // extend pluginOptions
     // with those already defined in the pkg
-    if (isObject(pkg.vue) && isObject(pkg.vue.pluginOptions)) {
-      Object.assign(pluginOptions, pkg.vue.pluginOptions)
+    if (isObject(pkg.vue)) {
+      if (isObject(pkg.vue.pluginOptions)) {
+        Object.assign(pluginOptions, pkg.vue.pluginOptions)
+      }
+      if (Array.isArray(pkg.vue.transpileDependencies)) {
+        transpileDependencies = pkg.vue.transpileDependencies
+      }
     }
 
-    pluginOptions = cb(pluginOptions)
-    return {
-      vue: { pluginOptions }
-    }
+    return { vue: cb(pluginOptions, transpileDependencies) }
   })
 }