Merge commit '3d04c5f7e2f2c52774f9bfe38bcc7198c588e5ed' into cross-tr…

…ansform

packages/core/src/convertor/wxToAli.js

@@ -4,7 +4,7 @@ const NOTSUPPORTS = ['moved', 'relations']
 function notSupportTip (options) {
   NOTSUPPORTS.forEach(key => {
     if (options[key]) {
-      console.error(`不支持将微信组件属性${key}转换至支付宝小程序`)
+      console.error(`Don't support for convert the option【${key}】 of the wx-component into the ali-component`)
       delete options[key]
     }
   })
@@ -24,10 +24,10 @@ export default {
       const newProps = {}
       Object.keys(options.properties).forEach(key => {
         const prop = options.properties[key]
-        if (prop.hasOwnProperty('value')) {
+        if (prop && prop.hasOwnProperty('value')) {
           newProps[key] = prop.value
         } else {
-          newProps[key] = prop()
+          newProps[key] = typeof prop === 'function' ? prop() : ''
         }
       })
       options.props = newProps

packages/core/src/core/mergeOptions.js

@@ -26,7 +26,7 @@ function extractMixins (mergeOptions, options) {
   if (options.mixins) {
     for (const mix of options.mixins) {
       if (typeof mix === 'string') {
-        console.error('暂不支持对字符串协议的【behavior】进行转换')
+        console.error(`Don't support for convert the string-formatted【behavior】into mixin`)
       } else {
         extractMixins(mergeOptions, mix)
       }
@@ -64,7 +64,7 @@ function extractObservers (options) {
   }
   Object.keys(props).forEach(key => {
     const prop = props[key]
-    if (typeof prop.observer === 'function') {
+    if (prop && typeof prop.observer === 'function') {
       mergeWatch(key, {
         handler (...rest) {
           prop.observer.call(this, ...rest)

packages/core/src/core/transferOptions.js

@@ -1,6 +1,7 @@
 import { mergeInjectedMixins } from './injectMixins'
 import mergeOptions from './mergeOptions'
 import { getConvertMode } from '../convertor/getConvertMode'
+import { findItem } from '../helper/utils'
 
 export default function transferOptions (options, type, builtInMixins = []) {
   let currentInject
@@ -18,7 +19,29 @@ export default function transferOptions (options, type, builtInMixins = []) {
   }
   // 转换mode
   options.mpxConvertMode = options.mpxConvertMode || getConvertMode(global.currentSrcMode, __mpx_mode__)
+  if (options.mpxConvertMode === 'wxToAli' && type === 'component') {
+    // ali组件标签无法透传style和class属性
+    options.properties = Object.assign({}, options.properties, {
+      mpxClass: {
+        type: String,
+        value: ''
+      },
+      mpxStyle: {
+        type: String,
+        value: ''
+      }
+    })
+  }
   const rawOptions = mergeOptions(options, type)
+  if (currentInject && currentInject.propKeys) {
+    const computedKeys = Object.keys(options.computed || {})
+    // 头条小程序受限父子组件生命周期顺序的问题，向子组件传递computed属性，子组件初始挂载时是拿不到对应数据的，在此做出提示
+    currentInject.propKeys.forEach(key => {
+      if (findItem(computedKeys, key)) {
+        console.error(`The child component can't achieve the value of computed prop【${key}】when attached, which is governed by the order of current miniprogram's lifecycles `)
+      }
+    })
+  }
   return {
     rawOptions,
     currentInject

packages/core/src/platform/patch/ali/getDefaultOptions.js

@@ -8,6 +8,21 @@ import mergeOptions from '../../../core/mergeOptions'
 
 function transformApiForProxy (context, currentInject) {
   const rawSetData = context.setData.bind(context)
+  if (Object.getOwnPropertyDescriptor(context, 'setData').configurable) {
+    Object.defineProperty(context, 'setData', {
+      get () {
+        return (data, cb) => {
+          // 同步数据到proxy
+          this.$mpxProxy.forceUpdate(data, this.__nativeRender__ || cb)
+          if (this.__nativeRender__) {
+            // 走原生渲染
+            return rawSetData(data, cb)
+          }
+        }
+      },
+      configurable: true
+    })
+  }
   Object.defineProperties(context, {
     __getInitialData: {
       get () {

packages/core/src/platform/patch/wx/getDefaultOptions.js

@@ -13,8 +13,13 @@ function transformProperties (properties) {
   }
   const newProps = {}
   enumerableKeys(properties).forEach(key => {
-    const rawFiled = properties[key]
+    let rawFiled = properties[key]
     let newFiled = null
+    if (rawFiled === null) {
+      rawFiled = {
+        type: null
+      }
+    }
     if (typeof rawFiled === 'function') {
       newFiled = {
         type: rawFiled
@@ -40,7 +45,7 @@ function transformApiForProxy (context, currentInject) {
       get () {
         return (data, cb) => {
           // 同步数据到proxy
-          this.$mpxProxy.forceUpdate(data)
+          this.$mpxProxy.forceUpdate(data, this.__nativeRender__ || cb)
           if (this.__nativeRender__) {
             // 走原生渲染
             let callback = cb

packages/webpack-plugin/lib/native-loader.js

@@ -6,6 +6,7 @@ const config = require('./config')
 const createHelpers = require('./helpers')
 const InjectDependency = require('./dependency/InjectDependency')
 const stringifyQuery = require('./utils/stringify-query')
+const async = require('async')
 
 module.exports = function (content) {
   this.cacheable()
@@ -14,6 +15,8 @@ module.exports = function (content) {
     return content
   }
 
+  const nativeCallback = this.async()
+
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const options = loaderUtils.getOptions(this) || {}
@@ -38,8 +41,6 @@ module.exports = function (content) {
   const hasComment = false
   const isNative = true
 
-  const usingComponents = []
-
   const mode = this._compilation.__mpx__.mode
   const globalSrcMode = this._compilation.__mpx__.srcMode
   const queryObj = loaderUtils.parseQuery(this.resourceQuery || '?')
@@ -49,79 +50,96 @@ module.exports = function (content) {
   const resource = stripExtension(this.resource)
   const isApp = !pagesMap[resource] && !componentsMap[resource]
   const srcMode = localSrcMode || globalSrcMode
-
-  const {
-    getRequireForSrc,
-    getNamedExportsForSrc
-  } = createHelpers(
-    loaderContext,
-    options,
-    moduleId,
-    isProduction,
-    hasScoped,
-    hasComment,
-    usingComponents,
-    needCssSourceMap,
-    srcMode,
-    isNative
-  )
-
-  const typeExtMap = config[srcMode].typeExtMap
-
-  function getRequire (type) {
-    let localQuery = Object.assign({}, queryObj)
-    let src = resource + typeExtMap[type]
-    if (type === 'template' && isApp) {
-      return ''
+  const fs = this._compiler.inputFileSystem
+
+  // 先读取json获取usingComponents信息
+  async.waterfall([
+    (callback) => {
+      fs.readFile(resource + '.json', (err, raw) => {
+        callback(err, raw.toString('utf-8'))
+      })
+    }, (content, callback) => {
+      let usingComponents = [].concat(this._compilation.__mpx__.usingComponents)
+      try {
+        let ret = JSON.parse(content)
+        if (ret.usingComponents) {
+          usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
+        }
+      } catch (e) {
+      }
+      const {
+        getRequireForSrc,
+        getNamedExportsForSrc
+      } = createHelpers(
+        loaderContext,
+        options,
+        moduleId,
+        isProduction,
+        hasScoped,
+        hasComment,
+        usingComponents,
+        needCssSourceMap,
+        srcMode,
+        isNative
+      )
+
+      const typeExtMap = config[srcMode].typeExtMap
+
+      function getRequire (type) {
+        let localQuery = Object.assign({}, queryObj)
+        let src = resource + typeExtMap[type]
+        if (type === 'template' && isApp) {
+          return ''
+        }
+        if (type === 'json') {
+          localQuery.__component = true
+        }
+        src += stringifyQuery(localQuery)
+
+        if (type === 'script') {
+          return getNamedExportsForSrc(type, { src })
+        } else {
+          return getRequireForSrc(type, { src })
+        }
+      }
+
+      // 注入模块id
+      let globalInjectCode = `global.currentModuleId = ${JSON.stringify(moduleId)};\n`
+
+      // 注入构造函数
+      let ctor = 'App'
+      if (pagesMap[resource]) {
+        ctor = mode === 'ali' ? 'Page' : 'Component'
+      } else if (componentsMap[resource]) {
+        ctor = 'Component'
+      }
+      globalInjectCode += `global.currentCtor = ${ctor};\n`
+
+      if (isApp && mode === 'swan') {
+        // 注入swan runtime fix
+        globalInjectCode += 'if (!global.navigator) {\n' +
+          '  global.navigator = {};\n' +
+          '}\n' +
+          'global.navigator.standalone = true;\n'
+      }
+
+      if (srcMode) {
+        globalInjectCode += `global.currentSrcMode = ${JSON.stringify(srcMode)};\n`
+      }
+
+      const dep = new InjectDependency({
+        content: globalInjectCode,
+        index: -3
+      })
+      this._module.addDependency(dep)
+
+      // 触发webpack global var 注入
+      let output = 'global.currentModuleId;\n'
+
+      for (let type in typeExtMap) {
+        output += `/* ${type} */\n${getRequire(type)}\n\n`
+      }
+      callback(null, output)
     }
-    if (type === 'json') {
-      localQuery.__component = true
-    }
-    src += stringifyQuery(localQuery)
-
-    if (type === 'script') {
-      return getNamedExportsForSrc(type, { src })
-    } else {
-      return getRequireForSrc(type, { src })
-    }
-  }
-
-  // 注入模块id
-  let globalInjectCode = `global.currentModuleId = ${JSON.stringify(moduleId)};\n`
-
-  // 注入构造函数
-  let ctor = 'App'
-  if (pagesMap[resource]) {
-    ctor = mode === 'ali' ? 'Page' : 'Component'
-  } else if (componentsMap[resource]) {
-    ctor = 'Component'
-  }
-  globalInjectCode += `global.currentCtor = ${ctor};\n`
-
-  if (isApp && mode === 'swan') {
-    // 注入swan runtime fix
-    globalInjectCode += 'if (!global.navigator) {\n' +
-      '  global.navigator = {};\n' +
-      '}\n' +
-      'global.navigator.standalone = true;\n'
-  }
-
-  if (srcMode) {
-    globalInjectCode += `global.currentSrcMode = ${JSON.stringify(srcMode)};\n`
-  }
-
-  const dep = new InjectDependency({
-    content: globalInjectCode,
-    index: -3
-  })
-  this._module.addDependency(dep)
-
-  // 触发webpack global var 注入
-  let output = 'global.currentModuleId;\n'
-
-  for (let type in typeExtMap) {
-    output += `/* ${type} */\n${getRequire(type)}\n\n`
-  }
-
-  return output
+  ], nativeCallback)
 }

packages/webpack-plugin/lib/platform/template/normalize-component-rules.js

@@ -9,7 +9,7 @@ module.exports = function normalizeComponentRules (cfgs, spec) {
     const supportedTargets = cfg.supportedTargets || spec.supportedTargets
     supportedTargets.forEach((target) => {
       result[target] = function (el) {
-        const rTag = cfg[target] && cfg[target].call(this, el.tag)
+        const rTag = cfg[target] && cfg[target].call(this, el.tag, { attrsMap: el.attrsMap })
         if (rTag) {
           el.tag = rTag
         }