@mpxjs/core 2.9.38 → 2.9.41-react.0

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/{vuePlugin.js → external/vuePlugin.js}

@@ -1,7 +1,7 @@
 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'
+import { PausedState } from '../helper/const'
 
 const hackEffectScope = () => {
   EffectScope.prototype.pause = function () {

package/src/index.js

@@ -1,4 +1,4 @@
-import Vue from './vue'
+import Vue from './external/vue'
 import { error, diffAndCloneA, hasOwn, makeMap } from '@mpxjs/utils'
 import { APIs, InstanceAPIs } from './platform/export/api'
 
@@ -60,6 +60,8 @@ export {
 
 export { getMixin } from './core/mergeOptions'
 
+export { dynamic } from './dynamic/astCache'
+
 export function toPureObject (obj) {
   return diffAndCloneA(obj).clone
 }
@@ -143,7 +145,11 @@ Mpx.config = {
     hostWhitelists Array 类型 支持h5域名白名单安全校验
     apiImplementations webview JSSDK接口 例如getlocation
    */
-  webviewConfig: {}
+  webviewConfig: {},
+   /**
+   * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
+   */
+  rnConfig: {}
 }
 
 global.__mpx = Mpx

package/src/platform/builtInMixins/directiveHelperMixin.android.js

@@ -0,0 +1,2 @@
+import directiveHelperMixin from './directiveHelperMixin.ios'
+export default directiveHelperMixin

package/src/platform/builtInMixins/directiveHelperMixin.ios.js

@@ -0,0 +1,15 @@
+import { warn, type } from '@mpxjs/utils'
+export default function directiveHelperMixin () {
+  return {
+    methods: {
+      __getWxKey (item, key) {
+        const value = key === '*this' ? item : item[key]
+        if (typeof value === 'string' || typeof value === 'number') {
+          return value
+        } else {
+          warn(`wx:key's value should return a string or a number, received: ${type(value)}`, this.__mpxProxy.options.mpxFileResource)
+        }
+      }
+    }
+  }
+}

package/src/platform/builtInMixins/directiveHelperMixin.js

@@ -0,0 +1,3 @@
+export default function directiveHelperMixin () {
+  return {}
+}

package/src/platform/builtInMixins/index.js

@@ -10,10 +10,21 @@ import pageScrollMixin from './pageScrollMixin'
 import componentGenericsMixin from './componentGenericsMixin'
 import getTabBarMixin from './getTabBarMixin'
 import pageRouteMixin from './pageRouteMixin'
+import { dynamicRefsMixin, dynamicRenderHelperMixin, dynamicSlotMixin } from '../../dynamic/dynamicRenderMixin'
+import styleHelperMixin from './styleHelperMixin'
+import directiveHelperMixin from './directiveHelperMixin'
+import { isReact } from '@mpxjs/utils'
 
 export default function getBuiltInMixins (options, type) {
-  let bulitInMixins = []
-  if (__mpx_mode__ === 'web') {
+  let bulitInMixins
+  if (isReact) {
+    bulitInMixins = [
+      proxyEventMixin(),
+      directiveHelperMixin(),
+      styleHelperMixin(type),
+      refsMixin()
+    ]
+  } else if (__mpx_mode__ === 'web') {
     bulitInMixins = [
       proxyEventMixin(),
       refsMixin(),
@@ -41,6 +52,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.android.js

@@ -0,0 +1,2 @@
+import proxyEventMixin from './proxyEventMixin.ios'
+export default proxyEventMixin

package/src/platform/builtInMixins/proxyEventMixin.ios.js

@@ -0,0 +1,49 @@
+import { error } from '@mpxjs/utils'
+import Mpx from '../../index'
+
+export default function proxyEventMixin () {
+  const methods = {
+    __invoke (rawEvent, eventConfig = []) {
+      if (typeof Mpx.config.proxyEventHandler === 'function') {
+        try {
+          Mpx.config.proxyEventHandler(rawEvent)
+        } catch (e) {
+        }
+      }
+      const location = this.__mpxProxy.options.mpxFileResource
+
+      let returnedValue
+      eventConfig.forEach((item) => {
+        const callbackName = item[0]
+        if (callbackName) {
+          const params = item.length > 1
+            ? item.slice(1).map(item => {
+              if (item === '__mpx_event__') {
+                return rawEvent
+              } else {
+                return item
+              }
+            })
+            : [rawEvent]
+          if (typeof this[callbackName] === 'function') {
+            returnedValue = this[callbackName].apply(this, params)
+          } else {
+            error(`Instance property [${callbackName}] is not function, please check.`, location)
+          }
+        }
+      })
+      return returnedValue
+    }
+    // __model (expr, $event, valuePath = ['value'], filterMethod) {
+    //   const innerFilter = {
+    //     trim: val => typeof val === 'string' && val.trim()
+    //   }
+    //   const originValue = valuePath.reduce((acc, cur) => acc[cur], $event.detail)
+    //   const value = filterMethod ? (innerFilter[filterMethod] ? innerFilter[filterMethod](originValue) : typeof this[filterMethod] === 'function' ? this[filterMethod](originValue) : originValue) : originValue
+    //   setByPath(this, expr, value)
+    // }
+  }
+  return {
+    methods
+  }
+}

package/src/platform/builtInMixins/proxyEventMixin.js

@@ -1,5 +1,11 @@
 import { setByPath, error, dash2hump, collectDataset } from '@mpxjs/utils'
 import Mpx from '../../index'
+import contextMap from '../../dynamic/vnode/context'
+
+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 () {
   const methods = {
@@ -12,7 +18,6 @@ export default function proxyEventMixin () {
       }
       const location = this.__mpxProxy.options.mpxFileResource
       const type = $event.type
-      const emitMode = $event.detail && $event.detail.mpxEmit
       if (!type) {
         error('Event object must have [type] property!', location)
         return
@@ -33,22 +38,15 @@ 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]
-        if (emitMode) {
-          $event = $event.detail.data
-        }
         if (callbackName) {
           const params = item.length > 1
             ? item.slice(1).map(item => {
-              // 暂不支持$event.xxx的写法
-              // if (/^\$event/.test(item)) {
-              //   this.__mpxTempEvent = $event
-              //   const value = getByPath(this, item.replace('$event', '__mpxTempEvent'))
-              //   // 删除临时变量
-              //   delete this.__mpxTempEvent
-              //   return value
               if (item === '__mpx_event__') {
                 return $event
               } else {
@@ -56,10 +54,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/refsMixin.android.js

@@ -0,0 +1,2 @@
+import refsMixin from './refsMixin.ios'
+export default refsMixin