@mpxjs/core 2.7.52 → 2.8.0-beta.2

package/src/platform/builtInMixins/pageStatusMixin.web.js

@@ -1,12 +1,17 @@
-import { CREATED } from '../../core/innerLifecycle'
-import { inBrowser } from '../../helper/utils'
+import {
+  CREATED,
+  ONHIDE,
+  ONSHOW,
+  ONLOAD
+} from '../../core/innerLifecycle'
+import { isFunction, isBrowser } from '@mpxjs/utils'
 
 let systemInfo = {}
 
 let count = 0
 
 function getCurrentPageInstance () {
-  let vnode = global.__mpxRouter && global.__mpxRouter.__mpxActiveVnode
+  const vnode = global.__mpxRouter && global.__mpxRouter.__mpxActiveVnode
   let pageInstance
   if (vnode && vnode.componentInstance) {
     pageInstance = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$children[1] : vnode.componentInstance
@@ -33,14 +38,12 @@ function onResize () {
 
   if (_t) {
     _t.mpxPageStatus = `resize${count++}`
-    if (typeof _t.onResize === 'function') {
-      _t.onResize(systemInfo)
-    }
+    isFunction(_t.onResize) && _t.onResize(systemInfo)
   }
 }
 
 // listen resize
-if (inBrowser) {
+if (isBrowser) {
   window.addEventListener('resize', onResize)
 }
 
@@ -52,31 +55,41 @@ export default function pageStatusMixin (mixinType) {
       },
       activated () {
         this.mpxPageStatus = 'show'
-        this.onShow && this.onShow()
+        this.__mpxProxy.callHook(ONSHOW)
       },
       deactivated () {
         this.mpxPageStatus = 'hide'
-        this.onHide && this.onHide()
+        this.__mpxProxy.callHook(ONHIDE)
+      },
+      created () {
+        // onLoad应该在用户声明周期CREATED后再执行，故此处使用原生created声明周期来触发onLoad
+        const query = (global.__mpxRouter && global.__mpxRouter.currentRoute && global.__mpxRouter.currentRoute.query) || {}
+        this.__mpxProxy.callHook(ONLOAD, [query])
       }
     }
   }
   return {
     [CREATED] () {
-      let pageInstance = getCurrentPageInstance()
-      if (!pageInstance) return
-      this.$watch(
-        () => pageInstance.mpxPageStatus,
-        status => {
+      const pageInstance = getCurrentPageInstance()
+      if (!pageInstance) {
+        this.$watch(() => pageInstance.mpxPageStatus, status => {
           if (!status) return
-          const pageLifetimes = (this.$rawOptions && this.$rawOptions.pageLifetimes) || {}
-          // resize
-          if (/^resize[0-9]*$/.test(status) && typeof pageLifetimes.resize === 'function') return pageLifetimes.resize.call(this, systemInfo)
-          // show & hide
-          if (status in pageLifetimes && typeof pageLifetimes[status] === 'function') {
-            pageLifetimes[status].call(this)
+          if (status === 'show') this.__mpxProxy.callHook(ONSHOW)
+          if (status === 'hide') this.__mpxProxy.callHook(ONHIDE)
+          const pageLifetimes = this.__mpxProxy.options.pageLifetimes
+          if (pageLifetimes) {
+            if (/^resize/.test(status) && isFunction(pageLifetimes.resize)) {
+              // resize
+              pageLifetimes.resize.call(this, systemInfo)
+            } else if (isFunction(pageLifetimes[status])) {
+              // show & hide
+              pageLifetimes[status].call(this)
+            }
           }
-        }
-      )
+        }, {
+          sync: true
+        })
+      }
     }
   }
 }

package/src/platform/builtInMixins/proxyEventMixin.js

@@ -1,20 +1,36 @@
-import { setByPath, collectDataset } from '../../helper/utils'
-import { error } from '../../helper/log'
-import EXPORT_MPX from '../../index'
+import { setByPath, error, hasOwn } from '@mpxjs/utils'
+import Mpx from '../../index'
+
+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
+}
 
 export default function proxyEventMixin () {
   const methods = {
     __invoke ($event) {
-      if (typeof EXPORT_MPX.config.proxyEventHandler === 'function') {
+      if (typeof Mpx.config.proxyEventHandler === 'function') {
         try {
-          EXPORT_MPX.config.proxyEventHandler($event)
+          Mpx.config.proxyEventHandler($event)
         } catch (e) {
         }
       }
+      const location = this.__mpxProxy.options.mpxFileResource
       const type = $event.type
       const emitMode = $event.detail && $event.detail.mpxEmit
       if (!type) {
-        throw new Error('Event object must have [type] property!')
+        error('Event object must have [type] property!', location)
+        return
       }
       let fallbackType = ''
       if (type === 'begin' || type === 'end') {
@@ -25,7 +41,8 @@ export default function proxyEventMixin () {
       }
       const target = $event.currentTarget || $event.target
       if (!target) {
-        throw new Error(`[${type}] event object must have [currentTarget/target] property!`)
+        error(`[${type}] event object must have [currentTarget/target] property!`, location)
+        return
       }
       const eventConfigs = target.dataset.eventconfigs || {}
       const curEventConfig = eventConfigs[type] || eventConfigs[fallbackType] || []
@@ -36,24 +53,25 @@ export default function proxyEventMixin () {
           $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 {
-              return item
-            }
-          }) : [$event]
+          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 {
+                return item
+              }
+            })
+            : [$event]
           if (typeof this[callbackName] === 'function') {
             returnedValue = this[callbackName].apply(this, params)
           } else {
-            const location = this.__mpxProxy && this.__mpxProxy.options.mpxFileResource
             error(`Instance property [${callbackName}] is not function, please check.`, location)
           }
         }

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

@@ -1,28 +1,6 @@
-import { setByPath } from '../../helper/utils'
+import { setByPath } from '@mpxjs/utils'
 
 export default function proxyEventMixin () {
-  const methods = {
-    triggerEvent (eventName, eventDetail) {
-      return this.$emit(eventName, {
-        type: eventName,
-        detail: eventDetail
-      })
-    },
-    __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
-      setByPath(this, expr, value)
-    },
-    getOpenerEventChannel () {
-      const router = global.__mpxRouter
-      const eventChannel = router && router.__mpxAction && router.__mpxAction.eventChannel
-      return eventChannel
-    }
-  }
-
   return {
     beforeCreate () {
       const modelEvent = this.$attrs.mpxModelEvent
@@ -32,6 +10,20 @@ export default function proxyEventMixin () {
         })
       }
     },
-    methods
+    methods: {
+      __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
+        setByPath(this, expr, value)
+      },
+      getOpenerEventChannel () {
+        const router = global.__mpxRouter
+        const eventChannel = router && router.__mpxAction && router.__mpxAction.eventChannel
+        return eventChannel
+      }
+    }
   }
 }

package/src/platform/builtInMixins/refsMixin.js

@@ -1,30 +1,29 @@
-import { BEFORECREATE, CREATED, BEFOREMOUNT, UPDATED, DESTROYED } from '../../core/innerLifecycle'
-import { noop } from '../../helper/utils'
-import { error } from '../../helper/log'
-import { getEnvObj } from '../../helper/env'
+import { CREATED, BEFOREMOUNT, BEFOREUPDATE, UNMOUNTED } from '../../core/innerLifecycle'
+import { noop, error, getEnvObj } from '@mpxjs/utils'
 
 const envObj = getEnvObj()
 
-const setNodeRef = function (target, ref, context) {
+const setNodeRef = function (target, ref) {
   Object.defineProperty(target.$refs, ref.key, {
     enumerable: true,
     configurable: true,
     get () {
-      return context.__getRefNode(ref) // for nodes, every time being accessed, returns as a new selector context.
+      // for nodes, every time being accessed, returns as a new selector.
+      return target.__getRefNode(ref)
     }
   })
 }
 
-const setComponentRef = function (target, ref, context, isAsync) {
+const setComponentRef = function (target, ref, isAsync) {
   let cacheRef = null
-  const targetRefs = isAsync ? target.$asyncRefs : target.$refs
+  const targetRefs = isAsync ? (target.$asyncRefs || (target.$asyncRefs = {})) : target.$refs
   Object.defineProperty(targetRefs, ref.key, {
     enumerable: true,
     configurable: true,
     get () {
-      // wx由于分包异步化的存在，每次访问refs都需要重新执行selectComponen，避免一直拿到缓存中的placeholder
+      // wx由于分包异步化的存在，每次访问refs都需要重新执行selectComponent，避免一直拿到缓存中的placeholder
       if (__mpx_mode__ === 'wx' || !cacheRef) {
-        return (cacheRef = context.__getRefNode(ref, isAsync))
+        return (cacheRef = target.__getRefNode(ref, isAsync))
       }
       return cacheRef
     }
@@ -32,13 +31,69 @@ const setComponentRef = function (target, ref, context, isAsync) {
 }
 
 export default function getRefsMixin () {
-  let aliMethods
+  const refsMixin = {
+    [BEFOREMOUNT] () {
+      this.__getRefs()
+    },
+    [BEFOREUPDATE] () {
+      this.__getRefs()
+    },
+    methods: {
+      __getRefs () {
+        if (this.__getRefsData) {
+          const refs = this.__getRefsData()
+
+          refs.forEach(ref => {
+            const setRef = ref.type === 'node' ? setNodeRef : setComponentRef
+            setRef(this, ref)
+
+            if (__mpx_mode__ === 'tt' && ref.type === 'component') {
+              setComponentRef(this, ref, true)
+            }
+          })
+        }
+      },
+      __getRefNode (ref, isAsync) {
+        if (!ref) return
+        const selector = ref.selector.replace(/{{mpxCid}}/g, this.__mpxProxy.uid)
+        if (ref.type === 'node') {
+          const query = this.createSelectorQuery ? this.createSelectorQuery() : envObj.createSelectorQuery()
+          return query && (ref.all ? query.selectAll(selector) : query.select(selector))
+        } else if (ref.type === 'component') {
+          if (isAsync) {
+            return new Promise((resolve) => {
+              ref.all ? this.selectAllComponents(selector, resolve) : this.selectComponent(selector, resolve)
+            })
+          } else {
+            return ref.all ? this.selectAllComponents(selector) : this.selectComponent(selector)
+          }
+        }
+      }
+    }
+  }
+
   if (__mpx_mode__ === 'ali') {
+    Object.assign(refsMixin, {
+      data () {
+        return {
+          mpxCid: this.__mpxProxy.uid
+        }
+      },
+      [CREATED] () {
+        this.__updateRef()
+      },
+      [UNMOUNTED] () {
+        // 销毁ref
+        this.__updateRef(true)
+      }
+    })
+
     const proxyMethods = ['boundingClientRect', 'scrollOffset']
 
-    aliMethods = {
-      createSelectorQuery (...rest) {
-        const selectorQuery = my.createSelectorQuery(...rest)
+    Object.assign(refsMixin.methods, {
+      // todo 支付宝基础库升级至2.7.4以上可去除
+      createSelectorQuery (...args) {
+        const selectorQuery = envObj.createSelectorQuery(...args)
         const cbs = []
         proxyMethods.forEach((name) => {
           const originalMethod = selectorQuery[name]
@@ -52,7 +107,7 @@ export default function getRefsMixin () {
         selectorQuery.exec = function (originalCb = noop) {
           const cb = function (results) {
             results.forEach((item, index) => {
-              cbs[index] && cbs[index](item)
+              cbs[index](item)
             })
             originalCb(results)
           }
@@ -60,6 +115,10 @@ export default function getRefsMixin () {
         }
         return selectorQuery
       },
+      // todo 支付宝基础库升级至2.7.4以上可去除
+      createIntersectionObserver (...args) {
+        return envObj.createIntersectionObserver(...args)
+      },
       selectComponent (selector, all) {
         const children = this.__children__ || []
         const result = []
@@ -72,7 +131,7 @@ export default function getRefsMixin () {
           }
         }
         if (selector.lastIndexOf('.') > 0) {
-          const location = this.__mpxProxy && this.__mpxProxy.options.mpxFileResource
+          const location = this.__mpxProxy.options.mpxFileResource
           error('The selectComponent or selectAllComponents only supports the single selector, a composed selector is not supported.', location)
         }
         return all ? result : result[0]
@@ -93,9 +152,11 @@ export default function getRefsMixin () {
         const component = e.detail.component
         const destroyed = e.detail.destroyed
         const className = component.props.className || component.className
-        const identifiers = className ? className.trim().split(/\s+/).map(item => {
-          return `.${item}`
-        }) : []
+        const identifiers = className
+          ? className.trim().split(/\s+/).map(item => {
+            return `.${item}`
+          })
+          : []
         if (component.props.id) {
           identifiers.push(`#${component.props.id}`)
         }
@@ -108,60 +169,8 @@ export default function getRefsMixin () {
           })
         }
       }
-    }
+    })
   }
-  return {
-    [BEFORECREATE] () {
-      this.$refs = {}
-      if (__mpx_mode__ === 'tt') {
-        this.$asyncRefs = {}
-      }
-    },
-    [CREATED] () {
-      this.__updateRef && this.__updateRef()
-    },
-    [BEFOREMOUNT] () {
-      this.__getRefs()
-    },
-    [UPDATED] () {
-      this.__getRefs()
-    },
-    [DESTROYED] () {
-      // 销毁ref
-      this.__updateRef && this.__updateRef(true)
-    },
-    methods: {
-      ...aliMethods,
-      __getRefs () {
-        if (this.__getRefsData) {
-          const refs = this.__getRefsData()
 
-          refs.forEach(ref => {
-            const setRef = ref.type === 'node' ? setNodeRef : setComponentRef
-            setRef(this, ref, this)
-
-            if (__mpx_mode__ === 'tt' && ref.type === 'component') {
-              setComponentRef(this, ref, this, true)
-            }
-          })
-        }
-      },
-      __getRefNode (ref, isAsync) {
-        if (!ref) return
-        let selector = ref.selector.replace(/{{mpxCid}}/g, this.mpxCid)
-        if (ref.type === 'node') {
-          const query = this.createSelectorQuery ? this.createSelectorQuery() : envObj.createSelectorQuery()
-          return query && (ref.all ? query.selectAll(selector) : query.select(selector))
-        } else if (ref.type === 'component') {
-          if (isAsync) {
-            return new Promise((resolve) => {
-              ref.all ? this.selectAllComponents(selector, resolve) : this.selectComponent(selector, resolve)
-            })
-          } else {
-            return ref.all ? this.selectAllComponents(selector) : this.selectComponent(selector)
-          }
-        }
-      }
-    }
-  }
+  return refsMixin
 }

package/src/platform/builtInMixins/refsMixin.web.js

@@ -1,33 +1,6 @@
 import { BEFOREMOUNT, UPDATED } from '../../core/innerLifecycle'
-import { error } from '../../helper/log'
 import * as webApi from '@mpxjs/api-proxy/src/web/api'
 
-function getIdentifier (vnode) {
-  let identifier = ''
-  if (vnode && vnode.data) {
-    if (vnode.data.attrs && vnode.data.attrs.id) identifier += `#${vnode.data.attrs.id}`
-    if (vnode.data.staticClass) identifier += `.${vnode.data.staticClass.split(' ').join('.')}`
-  }
-  return identifier
-}
-
-function walkChildren (vm, selector, context, result, all) {
-  if (vm.$children && vm.$children.length) {
-    for (let i = 0; i < vm.$children.length; i++) {
-      const child = vm.$children[i]
-      if (child.$vnode.context === context && !child.$options.__mpxBuiltIn) {
-        const identifier = getIdentifier(child.$vnode)
-        // todo 这里暂时只支持静态类，且只支持单个选择器，更复杂的需求建议用refs实现
-        if (identifier.indexOf(selector) > -1) {
-          result.push(child)
-          if (!all) return
-        }
-      }
-      walkChildren(child, selector, context, result, all)
-    }
-  }
-}
-
 function getEl (ref) {
   if (ref && ref.nodeType === 1) return ref
   if (ref && ref.$options && ref.$options.__mpxBuiltIn) return ref.$el
@@ -63,26 +36,6 @@ export default function getRefsMixin () {
     },
     [UPDATED] () {
       processRefs(this.$refs || {})
-    },
-    methods: {
-      createSelectorQuery () {
-        return webApi.createSelectorQuery().in(this)
-      },
-      createIntersectionObserver (component, options) {
-        return webApi.createIntersectionObserver(component, options)
-      },
-      selectComponent (selector, all) {
-        const result = []
-        walkChildren(this, selector, this, result, all)
-        if (selector.lastIndexOf('.') > 0) {
-          const location = this.__mpxProxy && this.__mpxProxy.options.mpxFileResource
-          error('The selectComponent or selectAllComponents only supports the single selector, a composed selector is not supported.', location)
-        }
-        return all ? result : result[0]
-      },
-      selectAllComponents (selector) {
-        return this.selectComponent(selector, true)
-      }
     }
   }
 }

package/src/platform/builtInMixins/relationsMixin.js

@@ -1,5 +1,5 @@
-import { isObject } from '../../helper/utils'
-import { CREATED, MOUNTED } from '../../core/innerLifecycle'
+import { isObject } from '@mpxjs/utils'
+import { CREATED, MOUNTED, BEFOREUNMOUNT } from '../../core/innerLifecycle'
 
 const targets = []
 let curTarget = null
@@ -57,7 +57,7 @@ export default function relationsMixin (mixinType) {
               if (child && child.props) {
                 if (child.props.$isCustomComponent) {
                   // 只有relations中声明为后代的节点才能被作为有效子节点
-                  let relation = this.$mpxRelations[child.type.displayName]
+                  const relation = this.$mpxRelations[child.type.displayName]
                   if (relation && (relation.type === 'child' || relation.type === 'descendant')) {
                     child.props.$mpxIsSlot = true
                     list.push(child)
@@ -120,7 +120,7 @@ export default function relationsMixin (mixinType) {
         },
         mpxPropagateFindRelation (child) {
           let cur = this
-          let contexts = []
+          const contexts = []
           let depth = 1
           // 向上查找所有可能匹配的父级relation上下文
           while (cur) {
@@ -138,8 +138,9 @@ export default function relationsMixin (mixinType) {
         }
       },
       onInit () {
-        if (this.$rawOptions.relations) {
-          this.$mpxRelations = transferPath(this.$rawOptions.relations, this.is)
+        const options = this.__mpxProxy.options
+        if (options.relations) {
+          this.$mpxRelations = transferPath(options.relations, this.is)
           this.$relationNodesMap = {}
         }
         if (curTarget && this.props.$mpxIsSlot) {
@@ -183,12 +184,12 @@ export default function relationsMixin (mixinType) {
         this.__mpxCollectRelations()
         this.__mpxExecRelations('linked')
       },
-      beforeDestroy () {
+      [BEFOREUNMOUNT] () {
         this.__mpxExecRelations('unlinked')
       },
       methods: {
         __mpxCollectRelations () {
-          const relations = this.$rawOptions.relations
+          const relations = this.__mpxProxy.options.relations
           if (!relations) return
           Object.keys(relations).forEach(path => {
             const relation = relations[path]
@@ -208,7 +209,7 @@ export default function relationsMixin (mixinType) {
 
           // 当前组件在target的slots当中
           if ((type === 'parent' || type === 'ancestor') && target.$vnode.context === this.$vnode.context) {
-            const targetRelation = target.$rawOptions && target.$rawOptions.relations && target.$rawOptions.relations[this.$options.componentPath]
+            const targetRelation = target?.__mpxProxy.options.relations?.[this.$options.componentPath]
             if (
               targetRelation &&
               targetRelation.type === relationTypeMap[type] &&

package/src/platform/builtInMixins/renderHelperMixin.js

@@ -1,4 +1,4 @@
-import { isObject } from '../../helper/utils'
+import { isObject } from '@mpxjs/utils'
 
 export default function renderHelperMixin () {
   return {

package/src/platform/builtInMixins/showMixin.js

@@ -1,4 +1,4 @@
-export default function pageStatusMixin (mixinType) {
+export default function showMixin (mixinType) {
   if (mixinType === 'component') {
     if (__mpx_mode__ === 'ali') {
       return {

package/src/platform/createApp.js

@@ -1,9 +1,9 @@
 import transferOptions from '../core/transferOptions'
 import mergeOptions from '../core/mergeOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp } from '../helper/utils'
+import { makeMap, spreadProp } from '@mpxjs/utils'
 import * as webLifecycle from '../platform/patch/web/lifecycle'
-import EXPORT_MPX from '../index'
+import Mpx from '../index'
 
 const webAppHooksMap = makeMap(webLifecycle.LIFECYCLE.APP_HOOKS)
 
@@ -26,14 +26,14 @@ export default function createApp (option, config = {}) {
   // 在App中挂载mpx对象供周边工具访问，如e2e测试
   const builtInMixins = [{
     getMpx () {
-      return EXPORT_MPX
+      return Mpx
     }
   }]
   const appData = {}
   if (__mpx_mode__ === 'web') {
     builtInMixins.push({
       created () {
-        Object.assign(this, option.proto)
+        Object.assign(this, Mpx.prototype)
         Object.assign(this, appData)
         const current = (global.__mpxRouter && global.__mpxRouter.currentRoute) || {}
         const options = {
@@ -64,7 +64,7 @@ export default function createApp (option, config = {}) {
   } else {
     builtInMixins.push({
       onLaunch () {
-        Object.assign(this, option.proto)
+        Object.assign(this, Mpx.prototype)
       }
     })
   }

package/src/platform/export/api.js

@@ -0,0 +1,23 @@
+import { set, del, reactive } from '../../observer/reactive'
+import { watch } from '../../observer/watch'
+import { injectMixins } from '../../core/injectMixins'
+
+const APIs = {
+  injectMixins,
+  mixin: injectMixins,
+  observable: reactive,
+  watch,
+  // use,
+  set,
+  delete: del
+}
+
+const InstanceAPIs = {
+  $set: set,
+  $delete: del
+}
+
+export {
+  APIs,
+  InstanceAPIs
+}