fix+refactor(auto-import): Port the auto-import feature from Quasar CLI (compatible with TS now) #33 #32 #19 #37

Author: rstoenescu

generator/index.js

@@ -1,6 +1,5 @@
 const fs = require('fs'),
-  extendPluginOptions = require('../lib/extendPluginOptions'),
-  extendBabel = require('../lib/extendBabel')
+  extendPluginOptions = require('../lib/extendPluginOptions')
 
 const message = `
 Documentation can be found at: https://quasar.dev
@@ -57,9 +56,7 @@ module.exports = (api, opts) => {
 
   const deps = {
     dependencies,
-    devDependencies: {
-      'babel-plugin-transform-imports': '1.5.0'
-    }
+    devDependencies: {}
   }
 
   if (opts.quasar.cssPreprocessor === 'styl') {
@@ -122,8 +119,6 @@ module.exports = (api, opts) => {
   }
 
   api.onCreateComplete(() => {
-    extendBabel(api)
-
     let lines = `import Vue from 'vue'\n`
 
     const

index.js

@@ -47,11 +47,16 @@ module.exports = (api, options) => {
         .options(strategy)
         .before('cache-loader')
     }
-    else if (![void 0, 'manual'].includes(strategy)) {
+    else if (strategy !== void 0 && strategy !== 'manual') {
       console.error(`Incorrect setting for quasar > importStrategy (${strategy})`)
       console.error(`Use one of: 'kebab', 'pascal', 'combined', 'manual'.`)
       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'))
   })
 }

lib/extendBabel.js

@@ -0,0 +1,7 @@
+module.exports = function getDevlandFile (name) {
+  return require(
+    require.resolve(name, {
+      paths: [ __dirname ]
+    })
+  )
+}

lib/get-devland-file.js

@@ -1,12 +1,9 @@
-function getDevlandFile (name) {
-  return require(
-    require.resolve(name, {
-      paths: [ __dirname ]
-    })
-  )
-}
+const stringifyRequest = require('loader-utils/lib/stringifyRequest')
+const getDevlandFile = require('./get-devland-file.js')
 
 const data = getDevlandFile('quasar/dist/babel-transforms/auto-import.json')
+const importTransform = getDevlandFile('quasar/dist/babel-transforms/imports.js')
+const runtimePath = require.resolve('./runtime.auto-import.js')
 
 const compRegex = {
   '?kebab': new RegExp(data.regex.kebabComponents || data.regex.components, 'g'),
@@ -21,68 +18,76 @@ const funcCompRegex = new RegExp(
 
 const dirRegex = new RegExp(data.regex.directives, 'g')
 
-function extract (content, form) {
-  let comp = content.match(compRegex[form])
-  const directives = content.match(dirRegex)
+function transform (itemArray) {
+  return itemArray
+    .map(name => `import ${name} from '${importTransform(name)}';`)
+    .join(`\n`)
+}
+
+function extract (content, ctx) {
+  let comp = content.match(compRegex[ctx.query])
+  let dir = content.match(dirRegex)
+
+  if (comp === null && dir === null) {
+    return
+  }
+
+  let importStatements = ''
+  let installStatements = ''
 
   if (comp !== null) {
     // avoid duplicates
     comp = Array.from(new Set(comp))
 
     // map comp names only if not pascal-case already
-    if (form !== '?pascal') {
+    if (ctx.query !== '?pascal') {
       comp = comp.map(name => data.importName[name])
     }
 
-    if (form === '?combined') {
+    if (ctx.query === '?combined') {
       // could have been transformed QIcon and q-icon too,
       // so avoid duplicates
       comp = Array.from(new Set(comp))
     }
 
-    comp = comp.join(',')
-  }
-  else {
-    comp = ''
+    importStatements += transform(comp)
+    installStatements += `qInstall(component, 'components', {${comp.join(',')}});`
   }
 
-  return {
-    comp,
+  if (dir !== null) {
+    dir = Array.from(new Set(dir))
+      .map(name => data.importName[name])
 
-    dir: directives !== null
-      ? Array.from(new Set(directives))
-        .map(name => data.importName[name])
-        .join(',')
-      : ''
+    importStatements += transform(dir)
+    installStatements += `qInstall(component, 'directives', {${dir.join(',')}});`
   }
+
+  // stringifyRequest needed so it doesn't
+  // messes up consistency of hashes between builds
+  return `
+${importStatements}
+import qInstall from ${stringifyRequest(ctx, runtimePath)};
+${installStatements}
+`
 }
 
-module.exports = function (content) {
+module.exports = function (content, map) {
+  let newContent = content
+
   if (!this.resourceQuery && funcCompRegex.test(content) === false) {
     const file = this.fs.readFileSync(this.resource, 'utf-8').toString()
-    const { comp, dir } = extract(file, this.query)
+    const code = extract(file, this)
 
-    const hasComp = comp !== ''
-    const hasDir = dir !== ''
-
-    if (hasComp === true || hasDir === true) {
+    if (code !== void 0) {
       const index = this.mode === 'development'
         ? content.indexOf('/* hot reload */')
         : -1
 
-      const code = `\nimport {${comp}${hasComp === true && hasDir === true ? ',' : ''}${dir}} from 'quasar'\n` +
-        (hasComp === true
-          ? `component.options.components = Object.assign(Object.create(component.options.components || null), component.options.components || {}, {${comp}})\n`
-          : '') +
-        (hasDir === true
-          ? `component.options.directives = Object.assign(Object.create(component.options.directives || null), component.options.directives || {}, {${dir}})\n`
-          : '')
-
-      return index === -1
+      newContent = index === -1
         ? content + code
         : content.slice(0, index) + code + content.slice(index)
     }
   }
 
-  return content
+  return this.callback(null, newContent, map)
 }

lib/loader.auto-import.js

@@ -0,0 +1,24 @@
+const getDevlandFile = require('./get-devland-file.js')
+const importTransform = getDevlandFile('quasar/dist/babel-transforms/imports.js')
+
+const regex = /import\s*\{([\w,\s]+)\}\s*from\s*['"]{1}quasar['"]{1}/g
+
+module.exports = function (content, map) {
+  const newContent = content.replace(
+    regex,
+    (_, match) => match.split(',')
+      .map(identifier => {
+        const data = identifier.split(' as ')
+
+        if (data[1] !== void 0) {
+          return `import ${data[1].trim()} from '${importTransform(data[0].trim())}';`
+        }
+
+        const name = data[0].trim()
+        return `import ${name} from '${importTransform(name)}';`
+      })
+      .join('')
+  )
+
+  return this.callback(null, newContent, map)
+}

lib/loader.transform-quasar-imports.js

@@ -0,0 +1,34 @@
+/**
+ * Quasar runtime for auto-importing
+ * components or directives.
+ *
+ * Warning! This file does NOT get transpiled by Babel
+ * but is included into the UI code.
+ *
+ * @param {component} Vue Component object
+ * @param {type}      One of 'components' or 'directives'
+ * @param {items}     Object containing components or directives
+ */
+module.exports = function qInstall (component, type, items) {
+  var opt
+
+  if (typeof component.exports === 'function') {
+    opt = component.exports.extendOptions
+    opt[type] = component.exports.options[type]
+  }
+  else {
+    opt = component.options
+  }
+
+  if (opt[type] === void 0) {
+    opt[type] = items
+  }
+  else {
+    var target = opt[type]
+    for (var i in items) {
+      if (target[i] === void 0) {
+        target[i] = items[i]
+      }
+    }
+  }
+}