From a1c31b6df835a2eb350b484c6a31d7fc7055da81 Mon Sep 17 00:00:00 2001 From: GastroGeek Date: Thu, 16 Aug 2018 11:13:31 +0100 Subject: [PATCH] Refactored imports and Vue.use() based on prompt responses. Added transform-imports to Babel config. --- generator/index.js | 110 ++++++++++++++++++++++++--------------------- index.js | 36 ++++++++++++++- 2 files changed, 95 insertions(+), 51 deletions(-) diff --git a/generator/index.js b/generator/index.js index caa74fd..9489b5a 100644 --- a/generator/index.js +++ b/generator/index.js @@ -1,6 +1,5 @@ const fs = require('fs') const extendPluginOptions = require('../lib/extendPluginOptions') - const message = ` Documentation can be found at: http://quasar-framework.org @@ -16,6 +15,26 @@ Enjoy! - Quasar Team ` module.exports = (api, opts, rootOpts) => { + const + defaultComponents = [ + 'QBtn', + 'QLayout', + 'QLayoutHeader', + 'QLayoutDrawer', + 'QPage', + 'QPageContainer', + 'QToolbar', + 'QToolbarTitle', + 'QList', + 'QListHeader', + 'QItemSeparator', + 'QItem', + 'QItemSide', + 'QItemMain', + ], + defaultDirectives = [], + defaultPlugins = [] + const tsPath = api.resolve('./src/main.ts'), jsPath = api.resolve('./src/main.js'), @@ -27,8 +46,9 @@ module.exports = (api, opts, rootOpts) => { 'quasar-extras': '^2.0.4' }, devDependencies: { + "babel-plugin-transform-imports": "1.5.0", 'stylus': '^0.54.5', - 'stylus-loader': '^3.0.1' + 'stylus-loader': '^3.0.2' } } @@ -46,6 +66,15 @@ module.exports = (api, opts, rootOpts) => { 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 }) @@ -69,24 +98,9 @@ module.exports = (api, opts, rootOpts) => { let lines = '\n' const - components = [ - 'QBtn', - 'QLayout', - 'QLayoutHeader', - 'QLayoutDrawer', - 'QPage', - 'QPageContainer', - 'QToolbar', - 'QToolbarTitle', - 'QList', - 'QListHeader', - 'QItemSeparator', - 'QItem', - 'QItemSide', - 'QItemMain', - ], - directives = [], - plugins = [] + components = defaultComponents, + directives = defaultDirectives, + plugins = defaultPlugins const hasLang = opts.quasar.i18n !== 'en-us', @@ -114,53 +128,49 @@ module.exports = (api, opts, rootOpts) => { lines += `\nimport 'quasar-extras/${feat}'` }) - lines += `\nimport Quasar, ` + // build import + lines += `\nimport ` if (opts.quasar.all) { - lines += `* as All` + lines += `Quasar` } else { - lines += `{` + lines += `{\n Quasar, ` components.concat(directives).concat(plugins) .forEach(part => { lines += `\n ${part},` }) lines += `\n}` } lines += ` from 'quasar'` + // build Vue.use() lines += `\n\nVue.use(Quasar, {` - if (hasIconSet) { - lines += `\n iconSet: iconSet,` - } - if (hasLang) { - lines += `\n i18n: lang,` - } + lines += opts.quasar.all ? ` config: {}` : `\n config: {}` - if (opts.quasar.all) { - lines += `\n components: All,` - lines += `\n directives: All,` - lines += `\n plugins: All` - } - else { - lines += `\n components: {` - components.forEach(comp => { - lines += `\n ${comp},` - }) - lines += `\n },` + // if not 'all' we want to include specific defaults + if (!opts.quasar.all) { + lines+= ',\n components: {' + components + .forEach(part => { lines += `\n ${part},` }) + lines += `\n }` - lines += `\n directives: {` - directives.forEach(directive => { - lines += `\n ${directive},` - }) - lines += `\n },` + lines+= ',\n directives: {' + directives + .forEach(part => { lines += `\n ${part},` }) + lines += `\n }` - lines += `\n plugins: {` - plugins.forEach(plugin => { - lines += `\n ${plugin},` - }) + lines+= ',\n plugins: {' + plugins + .forEach(part => { lines += `\n ${part},` }) lines += `\n }` } - lines += `\n})` + if (hasLang) { + lines += `, i18n: lang` + } + if (hasIconSet) { + lines += `, iconSet: iconSet` + } + lines += ` })` // Now inject additions to main.[js|ts] { diff --git a/index.js b/index.js index 3839405..ccec8fb 100644 --- a/index.js +++ b/index.js @@ -1,13 +1,47 @@ module.exports = (api, options) => { const theme = options.pluginOptions.quasar.theme, - rtl = options.pluginOptions.quasar.rtlSupport + rtl = options.pluginOptions.quasar.rtlSupport, + all = options.pluginOptions.quasar.framework === 'all' if (rtl) { 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 + } + + if ([/[\\/]node_modules[\\/]quasar-framework[\\/]/].some(dep => filepath.match(dep))) { + return false + } + + // 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 .resolve .alias