@mpxjs/core 2.9.36 → 2.9.39

package/src/dynamic/vnode/render.js

@@ -0,0 +1,289 @@
+import cssSelect from './css-select'
+// todo: stringify wxs 模块只能放到逻辑层执行，主要还是因为生成 vdom tree 需要根据 class 去做匹配，需要看下这个代码从哪引入
+import stringify from '@mpxjs/webpack-plugin/lib/runtime/stringify.wxs'
+import Interpreter from './interpreter'
+import { dash2hump, isString, error } from '@mpxjs/utils'
+
+const deepCloneNode = function (val) {
+  return JSON.parse(JSON.stringify(val))
+}
+
+function simpleNormalizeChildren (children) {
+  for (let i = 0; i < children.length; i++) {
+    if (Array.isArray(children[i])) {
+      return Array.prototype.concat.apply([], children)
+    }
+  }
+  return children
+}
+
+export default function _genVnodeTree (astData, contextScope, options) {
+  const { template = {}, styles = [] } = astData || {}
+  const { moduleId, location } = options || {}
+  // 解除引用
+  const templateAst = deepCloneNode(template)
+  // 获取实例 uid
+  const uid = contextScope[0]?.__mpxProxy?.uid || contextScope[0]?.uid
+  // 动态化组件 slots 通过上下文传递，相当于 props
+  const slots = contextScope[0]?.slots || {}
+
+  function createEmptyNode () {
+    return createNode('block')
+  }
+
+  function genVnodeTree (node) {
+    if (node.type === 1) {
+      // wxs 模块不需要动态渲染
+      if (node.tag === 'wxs') {
+        return createEmptyNode()
+      } else if (node.for && !node.forProcessed) {
+        return genFor(node)
+      } else if (node.if && !node.ifProcessed) {
+        return genIf(node)
+      } else if (node.tag === 'slot') {
+        return genSlot(node)
+      } else {
+        const data = genData(node)
+        let children = genChildren(node)
+        // 运行时组件的子组件都通过 slots 属性传递，样式规则在当前组件内匹配后挂载
+        if (node.dynamic) {
+          data.slots = resolveSlot(children.map(item => genVnodeWithStaticCss(deepCloneNode(item))))
+          children = []
+        }
+        return createNode(node.tag, data, children)
+      }
+    } else if (node.type === 3) {
+      return genText(node)
+    }
+  }
+
+  function evalExps (exps) {
+    const interpreter = new Interpreter(contextScope)
+    // 消除引用关系
+    let value
+    try {
+      value = interpreter.eval(JSON.parse(JSON.stringify(exps)))
+    } catch (e) {
+      const errmsg = e.message
+      console.warn(errmsg)
+      error('interprete the expression wrong: ', location, {
+        errType: 'mpx-dynamic-interprete',
+        errmsg
+      })
+    }
+    return value
+  }
+
+  function createNode (tag, data = {}, children = []) {
+    if (Array.isArray(data)) {
+      children = data
+      data = {}
+    }
+    if (typeof tag === 'object') {
+      return tag
+    }
+
+    // 处理 for 循环产生的数组，同时清除空节点
+    children = simpleNormalizeChildren(children).filter(node => !!node?.nt)
+
+    return {
+      nt: tag,
+      d: data,
+      c: children
+    }
+  }
+
+  /**
+   *
+   * 样式隔离的匹配策略优化：
+   *
+   * 条件1： 子组件不能影响到父组件的样式
+   * 条件2： slot 的内容必须在父组件的上下文当中完成样式匹配
+   * 条件3： 匹配过程只能进行一次
+   *
+   * 方案一：根据 moduleId 即作用域来进行匹配
+   * 方案二：根据虚拟树来进行匹配
+   */
+  // function createDynamicNode (moduleId, data = {}, children = []) {
+  //   const { template = {}, styles = [] } = staticMap[moduleId]
+  //   data.$slots = resolveSlot(children) // 将 slot 通过上下文传递到子组件的渲染流程中
+  //   const vnodeTree = _genVnodeTree(template, [data], styles, moduleId)
+  //   return vnodeTree
+  // }
+
+  function resolveSlot (children) {
+    const slots = {}
+    if (children.length) {
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i]
+        const name = child.d?.slot
+        if (name) {
+          const slot = (slots[name] || (slots[name] = []))
+          if (child.tag === 'template') {
+            slot.push.apply(slot, child.children || [])
+          } else {
+            slot.push(child)
+          }
+        } else {
+          (slots.default || (slots.default = [])).push(child)
+        }
+      }
+    }
+    return slots
+  }
+
+  function genData (node) {
+    const res = {
+      uid,
+      moduleId
+    }
+    if (!node.attrsList) {
+      return res
+    }
+
+    node.attrsList.forEach((attr) => {
+      if (attr.name === 'class' || attr.name === 'style') {
+        // class/style 的表达式为数组形式，class/style的计算过程需要放到逻辑层，主要是因为有逻辑匹配的过程去生成 vnodeTree
+        const helper = attr.name === 'class' ? stringify.stringifyClass : stringify.stringifyStyle
+        let value = ''
+        if (attr.__exp) {
+          let valueArr = evalExps(attr.__exp)
+          valueArr = Array.isArray(valueArr) ? valueArr : [valueArr]
+          value = helper(...valueArr)
+          // dynamic style + wx:show
+          const showStyle = valueArr[2]
+          if (showStyle) {
+            value = value + ';' + showStyle
+          }
+        } else {
+          value = attr.value
+        }
+        res[attr.name] = value
+      } else {
+        res[dash2hump(attr.name)] = attr.__exp
+          ? evalExps(attr.__exp)
+          : attr.value
+      }
+    })
+
+    return res
+  }
+
+  function genChildren (node) {
+    const res = []
+    const children = node.children || []
+    if (children.length) {
+      children.forEach((item) => {
+        res.push(genNode(item))
+      })
+    }
+    return res
+  }
+
+  function genNode (node) {
+    if (node.type === 1) {
+      return genVnodeTree(node)
+    } else if (node.type === 3 && node.isComment) {
+      return ''
+      // TODO: 注释暂不处理
+      // return _genComment(node)
+    } else {
+      return genText(node) // 文本节点统一通过 _genText 来生成，type = 2(带有表达式的文本，在 mpx 统一处理为了3) || type = 3(纯文本，非注释)
+    }
+  }
+
+  function genText (node) {
+    return {
+      nt: '#text',
+      ct: node.__exp ? evalExps(node.__exp) : node.text
+    }
+  }
+
+  function genFor (node) {
+    node.forProcessed = true
+
+    const itemKey = node.for.item || 'item'
+    const indexKey = node.for.index || 'index'
+    const scope = {
+      [itemKey]: null,
+      [indexKey]: null
+    }
+    const forExp = node.for
+    const res = []
+    let forValue = evalExps(forExp.__exp)
+
+    // 和微信的模版渲染策略保持一致：当 wx:for 的值为字符串时，会将字符串解析成字符串数组
+    if (isString(forValue)) {
+      forValue = forValue.split('')
+    }
+
+    if (Array.isArray(forValue)) {
+      forValue.forEach((item, index) => {
+        // item、index 模板当中如果没申明，需要给到默认值
+        scope[itemKey] = item
+        scope[indexKey] = index
+
+        contextScope.push(scope)
+
+        // 针对 for 循环避免每次都操作的同一个 node 导致数据的污染的问题
+        res.push(deepCloneNode(genVnodeTree(deepCloneNode(node))))
+
+        contextScope.pop()
+      })
+    }
+
+    return res
+  }
+
+  // 对于 if 而言最终生成 <= 1 节点
+  function genIf (node) {
+    if (!node.ifConditions) {
+      node.ifConditions = []
+      return {} // 一个空节点
+    }
+    node.ifProcessed = true
+
+    const ifConditions = node.ifConditions.slice()
+
+    let res = {} // 空节点
+    for (let i = 0; i < ifConditions.length; i++) {
+      const condition = ifConditions[i]
+      // 非 else 节点
+      if (condition.ifExp) {
+        const identifierValue = evalExps(condition.__exp)
+        if (identifierValue) {
+          res = genVnodeTree(condition.block === 'self' ? node : condition.block)
+          break
+        }
+      } else { // else 节点
+        res = genVnodeTree(condition.block)
+        break
+      }
+    }
+    return res
+  }
+
+  // 暂时不支持作用域插槽
+  function genSlot (node) {
+    const data = genData(node) // 计算属性值
+    const slotName = data.name || 'default'
+    return slots[slotName] || null
+  }
+
+  function genVnodeWithStaticCss (vnodeTree) {
+    styles.forEach((item) => {
+      const [selector, style] = item
+      const nodes = cssSelect(selector, { moduleId })(vnodeTree)
+      nodes?.forEach((node) => {
+        // todo style 合并策略问题：合并过程中缺少了权重关系 style, class 的判断，需要优化
+        node.d.style = node.d.style ? style + node.d.style : style
+      })
+    })
+
+    return vnodeTree
+  }
+
+  const interpreteredVnodeTree = genVnodeTree(templateAst)
+
+  return genVnodeWithStaticCss(interpreteredVnodeTree)
+}

package/src/index.js

@@ -60,6 +60,8 @@ export {
 
 export { getMixin } from './core/mergeOptions'
 
+export { dynamic } from './dynamic/astCache'
+
 export function toPureObject (obj) {
   return diffAndCloneA(obj).clone
 }

package/src/platform/builtInMixins/index.js

@@ -10,6 +10,7 @@ import pageScrollMixin from './pageScrollMixin'
 import componentGenericsMixin from './componentGenericsMixin'
 import getTabBarMixin from './getTabBarMixin'
 import pageRouteMixin from './pageRouteMixin'
+import { dynamicRefsMixin, dynamicRenderHelperMixin, dynamicSlotMixin } from '../../dynamic/dynamicRenderMixin'
 
 export default function getBuiltInMixins (options, type) {
   let bulitInMixins = []
@@ -41,6 +42,13 @@ export default function getBuiltInMixins (options, type) {
         showMixin(type),
         i18nMixin()
       ])
+      if (__mpx_dynamic_runtime__) {
+        bulitInMixins = bulitInMixins.concat([
+          dynamicRenderHelperMixin(),
+          dynamicSlotMixin(),
+          dynamicRefsMixin()
+        ])
+      }
     }
   }
   return bulitInMixins.filter(item => item)

package/src/platform/builtInMixins/proxyEventMixin.js

@@ -1,19 +1,10 @@
-import { setByPath, error, hasOwn, dash2hump } from '@mpxjs/utils'
+import { setByPath, error, dash2hump, collectDataset } from '@mpxjs/utils'
 import Mpx from '../../index'
+import contextMap from '../../dynamic/vnode/context'
 
-const datasetReg = /^data-(.+)$/
-
-function collectDataset (props) {
-  const dataset = {}
-  for (const key in props) {
-    if (hasOwn(props, key)) {
-      const matched = datasetReg.exec(key)
-      if (matched) {
-        dataset[matched[1]] = props[key]
-      }
-    }
-  }
-  return dataset
+function logCallbackNotFound (context, callbackName) {
+  const location = context.__mpxProxy && context.__mpxProxy.options.mpxFileResource
+  error(`Instance property [${callbackName}] is not function, please check.`, location)
 }
 
 export default function proxyEventMixin () {
@@ -48,6 +39,9 @@ export default function proxyEventMixin () {
       }
       const eventConfigs = target.dataset.eventconfigs || {}
       const curEventConfig = eventConfigs[type] || eventConfigs[fallbackType] || []
+      // 如果有 mpxuid 说明是运行时组件，那么需要设置对应的上下文
+      const rootRuntimeContext = contextMap.get(target.dataset.mpxuid)
+      const context = rootRuntimeContext || this
       let returnedValue
       curEventConfig.forEach((item) => {
         const callbackName = item[0]
@@ -71,10 +65,10 @@ export default function proxyEventMixin () {
               }
             })
             : [$event]
-          if (typeof this[callbackName] === 'function') {
-            returnedValue = this[callbackName].apply(this, params)
+          if (typeof context[callbackName] === 'function') {
+            returnedValue = context[callbackName].apply(context, params)
           } else {
-            error(`Instance property [${callbackName}] is not function, please check.`, location)
+            logCallbackNotFound(context, callbackName)
           }
         }
       })

package/src/platform/builtInMixins/renderHelperMixin.js

@@ -36,8 +36,8 @@ export default function renderHelperMixin () {
       _sc (key) {
         return (this.__mpxProxy.renderData[key] = this[key])
       },
-      _r (skipPre) {
-        this.__mpxProxy.renderWithData(skipPre)
+      _r (skipPre, vnode) {
+        this.__mpxProxy.renderWithData(skipPre, vnode)
       }
     }
   }

package/src/platform/patch/ali/getDefaultOptions.js

@@ -63,6 +63,26 @@ function transformApiForProxy (context, currentInject) {
         }
       })
     }
+    if (currentInject.moduleId) {
+      Object.defineProperties(context, {
+        __moduleId: {
+          get () {
+            return currentInject.moduleId
+          },
+          configurable: false
+        }
+      })
+    }
+    if (currentInject.dynamic) {
+      Object.defineProperties(context, {
+        __dynamic: {
+          get () {
+            return currentInject.dynamic
+          },
+          configurable: false
+        }
+      })
+    }
   }
 }
 

package/src/platform/patch/wx/getDefaultOptions.js

@@ -101,6 +101,26 @@ function transformApiForProxy (context, currentInject) {
         }
       })
     }
+    if (currentInject.moduleId) {
+      Object.defineProperties(context, {
+        __moduleId: {
+          get () {
+            return currentInject.moduleId
+          },
+          configurable: false
+        }
+      })
+    }
+    if (currentInject.dynamic) {
+      Object.defineProperties(context, {
+        __dynamic: {
+          get () {
+            return currentInject.dynamic
+          },
+          configurable: false
+        }
+      })
+    }
   }
 }
 

package/src/vuePlugin.js

@@ -1,4 +1,4 @@
-import { walkChildren, parseSelector, error, hasOwn } from '@mpxjs/utils'
+import { walkChildren, parseSelector, error, hasOwn, collectDataset } from '@mpxjs/utils'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
 import { EffectScope } from 'vue'
 import { PausedState } from './helper/const'
@@ -55,22 +55,25 @@ const hackEffectScope = () => {
   }
 }
 
-const datasetReg = /^data-(.+)$/
-
-function collectDataset (attrs) {
-  const dataset = {}
-  for (const key in attrs) {
-    if (hasOwn(attrs, key)) {
-      const matched = datasetReg.exec(key)
-      if (matched) {
-        dataset[matched[1]] = attrs[key]
+export default function install (Vue) {
+  Object.defineProperties(Vue.prototype, {
+    data: {
+      get () {
+        return Object.assign({}, this.$props, this.$data)
+      }
+    },
+    dataset: {
+      get () {
+        return collectDataset(this.$attrs, true)
+      }
+    },
+    id: {
+      get () {
+        return this.$attrs.id || ''
       }
     }
-  }
-  return dataset
-}
+  })
 
-export default function install (Vue) {
   Vue.prototype.triggerEvent = function (eventName, eventDetail) {
     // 输出Web时自定义组件绑定click事件会和web原生事件冲突，组件内部triggerEvent时会导致事件执行两次，将click事件改为_click来规避此问题
     const escapeEvents = ['click']
@@ -78,8 +81,8 @@ export default function install (Vue) {
       eventName = '_' + eventName
     }
     let eventObj = {}
-    const dataset = collectDataset(this.$attrs)
-    const id = this.$attrs.id || ''
+    const dataset = this.dataset
+    const id = this.id
     const timeStamp = +new Date()
     eventObj = {
       type: eventName,