feature:新增全局组件功能

Author: linrui

lib/mp-compiler/index.js

@@ -4,8 +4,9 @@ const compiler = require('mpvue-template-compiler')
 const babel = require('babel-core')
 const path = require('path')
 const fs = require('fs')
+const deepEqual = require('deep-equal')
 
-const { parseConfig, parseComponentsDeps } = require('./parse')
+const { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents } = require('./parse')
 const { parseComponentsDeps: parseComponentsDepsTs } = require('./parse-ts')
 const { genScript, genStyle, genPageWxml } = require('./templates')
 
@@ -62,7 +63,11 @@ function genComponentWxml (compiled, options, emitFile, emitError, emitWarning)
   return htmlBeautify(wxmlCodeStr)
 }
 
+// 更新全局组件时，需要重新生成wxml，用这个字段保存所有需要更新的页面及其参数
+const cacheCreateWxmlFns = {}
+
 function createWxml (emitWarning, emitError, emitFile, resourcePath, rootComponent, compiled, html) {
+  cacheCreateWxmlFns[resourcePath] = arguments
   const { pageType, moduleId, components, src } = getFileInfo(resourcePath) || {}
 
   // 这儿一个黑魔法，和 webpack 约定的规范写法有点偏差！
@@ -124,53 +129,71 @@ function compileMPScript (script, mpOptioins, moduleId) {
 
   // 处理子组件的信息
   const components = {}
+  const fileInfo = resolveTarget(this.resourcePath, this.options.entry)
   if (originComponents) {
-    const allP = Object.keys(originComponents).map(k => {
-      return new Promise((resolve, reject) => {
-        this.resolve(this.context, originComponents[k], (err, realSrc) => {
-          if (err) return reject(err)
-          const com = covertCCVar(k)
-          const comName = getCompNameBySrc(realSrc)
-          components[com] = { src: comName, name: comName }
-          resolve()
-        })
-      })
+    resolveSrc(originComponents, components, this.resolve, this.context).then(() => {
+      resolveComponent(this.resourcePath, fileInfo, importsMap, components, moduleId)
+    }).catch(err => {
+      console.error(err)
+      resolveComponent(this.resourcePath, fileInfo, importsMap, components, moduleId)
     })
-    Promise.all(allP)
-      .then(res => {
-        components.isCompleted = true
-      })
-      .catch(err => {
-        console.error(err)
-        components.isCompleted = true
-      })
   } else {
-    components.isCompleted = true
+    resolveComponent(this.resourcePath, fileInfo, importsMap, components, moduleId)
   }
 
-  const fileInfo = resolveTarget(this.resourcePath, this.options.entry)
-  cacheFileInfo(this.resourcePath, fileInfo, { importsMap, components, moduleId })
-
   return script
 }
 
 // checkMPEntry 针对 entry main.js 的入口处理
 // 编译出 app, page 的入口js/wxml/json
 
 const startPageReg = /^\^/
-
+let globalComponents
 function compileMP (content, mpOptioins) {
   const { resourcePath, emitError, emitFile, emitWarning, resolve, context, options } = this
 
+  const fileInfo = resolveTarget(resourcePath, options.entry)
+  cacheFileInfo(resourcePath, fileInfo)
+  const { src, name, isApp, isPage } = fileInfo
+
   const babelrc = getBabelrc(mpOptioins.globalBabelrc)
-  const { metadata } = babel.transform(content, { extends: babelrc, plugins: [parseConfig] })
+  // app入口进行全局component解析
+  const { metadata } = babel.transform(content, { extends: babelrc, plugins: isApp ? [parseConfig, parseGlobalComponents] : [parseConfig] })
 
   // metadata: config
-  const { config, rootComponent } = metadata
+  const { config, rootComponent, globalComponents: globalComps } = metadata
+
+  if (isApp) {
+    // 保存旧数据，用于对比
+    const oldGlobalComponents = globalComponents
+    // 开始解析app入口文件时把全局组件清空，解析完成后再进行赋值，标志全局组件解析完成
+    globalComponents = null
+    clearGlobalComponents()
+
+    const handleResult = () => {
+      globalComponents = components
+      // 热更时，如果全局组件更新，需要重新生成所有的wxml
+      if (oldGlobalComponents && !deepEqual(oldGlobalComponents, globalComponents)) {
+        // 更新所有页面的组件
+        Object.keys(cacheResolveComponents).forEach(k => {
+          resolveComponent(...cacheResolveComponents[k])
+        })
+        // 重新生成所有wxml
+        Object.keys(cacheCreateWxmlFns).forEach(k => {
+          createWxml(...cacheCreateWxmlFns[k])
+        })
+      }
+    }
 
-  const fileInfo = resolveTarget(resourcePath, options.entry)
-  cacheFileInfo(resourcePath, fileInfo)
-  const { src, name, isApp, isPage } = fileInfo
+    // 解析全局组件的路径
+    const components = {}
+    resolveSrc(globalComps, components, resolve, context).then(() => {
+      handleResult()
+    }).catch(err => {
+      console.error(err)
+      handleResult()
+    })
+  }
 
   if (isApp || isPage) {
     // 生成入口 json
@@ -213,4 +236,32 @@ function compileMP (content, mpOptioins) {
   return content
 }
 
+function resolveSrc (originComponents, components, resolveFn, context) {
+  return Promise.all(Object.keys(originComponents).map(k => {
+    return new Promise((resolve, reject) => {
+      resolveFn(context, originComponents[k], (err, realSrc) => {
+        if (err) return reject(err)
+        const com = covertCCVar(k)
+        const comName = getCompNameBySrc(realSrc)
+        components[com] = { src: comName, name: comName }
+        resolve()
+      })
+    })
+  }))
+}
+
+const cacheResolveComponents = {}
+function resolveComponent (resourcePath, fileInfo, importsMap, localComponents, moduleId) {
+  // 需要等待全局组件解析完成
+  if (!globalComponents) {
+    setTimeout(resolveComponent, 20, ...arguments)
+  } else {
+    // 保存当前所有参数，在热更时如果全局组件发生变化，需要进行组件更新
+    cacheResolveComponents[resourcePath] = arguments
+    const components = Object.assign({}, globalComponents, localComponents)
+    components.isCompleted = true
+    cacheFileInfo(resourcePath, fileInfo, { importsMap, components, moduleId })
+  }
+}
+
 module.exports = { compileWxml, compileMPScript, compileMP }

lib/mp-compiler/parse.js

@@ -98,4 +98,34 @@ function parseComponentsDeps (babel) {
   return { visitor: componentsVisitor }
 }
 
-module.exports = { parseConfig, parseComponentsDeps }
+// 解析全局components
+let globalComponents = {}
+const globalComponentsVisitor = {
+  CallExpression (path) {
+    const { callee, arguments: args } = path.node
+    const { metadata } = path.hub.file
+    if (!callee.object || !callee.property) {
+      return
+    }
+    if (callee.object.name === 'Vue' && callee.property.name === 'component') {
+      if (!args[0] || args[0].type !== 'StringLiteral') {
+        throw new Error('Vue.component()的第一个参数必须为静态字符串')
+      }
+      if (!args[1]) {
+        throw new Error('Vue.component()需要两个参数')
+      }
+      const { importsMap } = getImportsMap(metadata)
+      globalComponents[args[0].value] = importsMap[args[1].name]
+    }
+    metadata.globalComponents = globalComponents
+  }
+}
+
+function parseGlobalComponents (babel) {
+  return { visitor: globalComponentsVisitor }
+}
+
+function clearGlobalComponents () {
+  globalComponents = {}
+}
+module.exports = { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents }

package.json

@@ -51,6 +51,7 @@
   "dependencies": {
     "babelon": "^1.0.5",
     "consolidate": "^0.14.0",
+    "deep-equal": "^1.0.1",
     "hash-sum": "^1.0.2",
     "js-beautify": "^1.6.14",
     "loader-utils": "^1.1.0",