@mpxjs/core 2.8.24 → 2.8.25-alpha.12

package/@types/global.d.ts

@@ -1,5 +1,5 @@
 // declaration for mpx mode
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'dd' | 'qa' | 'jd' | 'web' | 'tenon'
 
 // declaration for mpx env
 declare let __mpx_env__: string

package/README.md

@@ -1,4 +1,3 @@
 # 小程序框架 [**MPX** 介绍文档](https://didi.github.io/mpx)
 
 ## 跨平台代码编写指南
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.8.24",
+  "version": "2.8.25-alpha.12",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,11 +19,13 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.8.15",
+    "@mpxjs/utils": "^2.8.23-alpha",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.0.2"
   },
   "peerDependencies": {
+    "@hummer/tenon-store": "^1.7.0",
+    "@hummer/tenon-vue": "^1.5.1",
     "@mpxjs/api-proxy": "^2.7.44",
     "@mpxjs/store": "^2.8.0",
     "vue": "^2.7.10",
@@ -47,5 +49,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "f019e3d3dc8b0c512e3e0f95f3f0b47f716e576c"
+  "gitHead": "faf3231b0c19d3a72f9711dbf03bc2c9b431c8c6"
 }

package/src/convertor/convertor.js

@@ -1,11 +1,13 @@
 import * as wxLifecycle from '../platform/patch/wx/lifecycle'
 import * as aliLifecycle from '../platform/patch/ali/lifecycle'
 import * as webLifecycle from '../platform/patch/web/lifecycle'
+import * as tenonLifecycle from '../platform/patch/tenon/lifecycle'
 import * as swanLifecycle from '../platform/patch/swan/lifecycle'
 import { mergeLifecycle } from './mergeLifecycle'
 import { error } from '@mpxjs/utils'
 import wxToAliRule from './wxToAli'
 import wxToWebRule from './wxToWeb'
+import wxToTenonRule from './wxToTenon'
 import wxToSwanRule from './wxToSwan'
 import wxToQqRule from './wxToQq'
 import wxToTtRule from './wxToTt'
@@ -19,6 +21,9 @@ let pageMode
 if (__mpx_mode__ === 'web') {
   lifecycleInfo = webLifecycle
   pageMode = ''
+} else if (__mpx_mode__ === 'tenon') {
+  lifecycleInfo = tenonLifecycle
+  pageMode = ''
 } else if (__mpx_mode__ === 'ali') {
   lifecycleInfo = aliLifecycle
   pageMode = ''
@@ -50,6 +55,7 @@ const rulesMap = {
   local: { ...defaultConvertRule },
   default: defaultConvertRule,
   wxToWeb: wxToWebRule,
+  wxToTenon: wxToTenonRule,
   wxToAli: wxToAliRule,
   wxToSwan: wxToSwanRule,
   wxToQq: { ...defaultConvertRule, ...wxToQqRule },

package/src/convertor/getConvertMode.js

@@ -1,6 +1,7 @@
 const convertModes = {
   'wx-ali': 'wxToAli',
   'wx-web': 'wxToWeb',
+  'wx-tenon': 'wxToTenon',
   'wx-swan': 'wxToSwan',
   'wx-qq': 'wxToQq',
   'wx-tt': 'wxToTt',

package/src/convertor/wxToTenon.js

@@ -0,0 +1,86 @@
+import * as wxLifecycle from '../platform/patch/wx/lifecycle'
+import * as tenonLifecycle from '../platform/patch/tenon/lifecycle'
+import { mergeLifecycle } from './mergeLifecycle'
+import { error, isObject, diffAndCloneA, hasOwn } from '@mpxjs/utils'
+import { implemented } from '../core/implement'
+import { CREATED, UNMOUNTED } from '../core/innerLifecycle'
+
+// 暂不支持的wx选项，后期需要各种花式支持
+const unsupported = [
+  'moved',
+  'definitionFilter',
+  'onShareAppMessage',
+  'activated',
+  'deactivated',
+  'pageShow',
+  'pageHide',
+  'onPullDownRefresh',
+  'onReachBottom',
+  'onPageScroll',
+  'onTabItemTap',
+  'onResize',
+  'onUnhandledRejection',
+  'onThemeChange'
+]
+
+function convertErrorDesc (key) {
+  error(`Options.${key} is not supported in runtime conversion from wx to tenon.`, global.currentResource)
+}
+
+function notSupportTip (options) {
+  unsupported.forEach(key => {
+    if (options[key]) {
+      if (!implemented[key]) {
+        process.env.NODE_ENV !== 'production' && convertErrorDesc(key)
+        delete options[key]
+      } else if (implemented[key].remove) {
+        delete options[key]
+      }
+    }
+  })
+}
+
+export default {
+  lifecycle: mergeLifecycle(wxLifecycle.LIFECYCLE),
+  lifecycle2: mergeLifecycle(tenonLifecycle.LIFECYCLE),
+  pageMode: 'blend',
+  // support传递为true以将methods外层的方法函数合入methods中
+  support: true,
+  // wx输出tenon时额外将onLoad代理到CREATED
+  lifecycleProxyMap: Object.assign({}, wxLifecycle.lifecycleProxyMap, {
+    [CREATED]: ['created', 'attached', 'onLoad'],
+    [UNMOUNTED]: ['destroyed', 'detached', 'onUnload', 'unmounted']
+  }),
+  convert (options) {
+    const props = Object.assign({}, options.properties, options.props)
+    if (props) {
+      Object.keys(props).forEach(key => {
+        const prop = props[key]
+        if (prop) {
+          if (hasOwn(prop, 'type')) {
+            const newProp = {}
+            if (hasOwn(prop, 'optionalTypes')) {
+              newProp.type = [prop.type, ...prop.optionalTypes]
+            } else {
+              newProp.type = prop.type
+            }
+            if (hasOwn(prop, 'value')) {
+              // vue中对于引用类型数据需要使用函数返回
+              newProp.default = isObject(prop.value)
+                ? function propFn () {
+                  return diffAndCloneA(prop.value).clone
+                }
+                : prop.value
+            }
+            props[key] = newProp
+          } else {
+            props[key] = prop
+          }
+        }
+      })
+      options.props = props
+      delete options.properties
+    }
+    notSupportTip(options)
+  }
+}

package/src/core/proxy.js

@@ -102,7 +102,7 @@ export default class MpxProxy {
     this.ignoreProxyMap = makeMap(Mpx.config.ignoreProxyWhiteList)
     // 收集setup中动态注册的hooks，小程序与web环境都需要
     this.hooks = {}
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && __mpx_mode__ !== 'tenon') {
       this.scope = effectScope(true)
       // props响应式数据代理
       this.props = {}
@@ -124,8 +124,8 @@ export default class MpxProxy {
   }
 
   created () {
-    if (__mpx_mode__ !== 'web') {
-      // web中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
+    if (__mpx_mode__ !== 'web' && __mpx_mode__ !== 'tenon') {
+      // web和tenon中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
       this.callHook(BEFORECREATE)
       setCurrentInstance(this)
       this.initProps()
@@ -139,7 +139,7 @@ export default class MpxProxy {
     this.state = CREATED
     this.callHook(CREATED)
 
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && __mpx_mode__ !== 'tenon') {
       this.initRender()
     }
 
@@ -210,7 +210,7 @@ export default class MpxProxy {
     }
     // 挂载$rawOptions
     this.target.$rawOptions = this.options
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && __mpx_mode__ !== 'tenon') {
       // 挂载$watch
       this.target.$watch = this.watch.bind(this)
       // 强制执行render

package/src/index.js

@@ -118,7 +118,7 @@ function factory () {
   Object.assign(Mpx, APIs)
   Object.assign(Mpx.prototype, InstanceAPIs)
   // 输出web时在mpx上挂载Vue对象
-  if (__mpx_mode__ === 'web') {
+  if (__mpx_mode__ === 'web' || __mpx_mode__ === 'tenon') {
     Mpx.__vue = Vue
   }
   return Mpx

package/src/platform/builtInMixins/index.js

@@ -26,6 +26,11 @@ export default function getBuiltInMixins (options, type) {
       // 由于relation可能是通过mixin注入的，不能通过当前的用户options中是否存在relations来简单判断是否注入该项mixin
       relationsMixin(type)
     ]
+  } else if (__mpx_mode__ === 'tenon') {
+    bulitInMixins = [
+      proxyEventMixin(),
+      pageStatusMixin(type)
+    ]
   } else {
     // 此为差异抹平类mixins，原生模式下也需要注入也抹平平台差异
     bulitInMixins = [

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

@@ -0,0 +1,40 @@
+import { CREATED, ONSHOW, ONHIDE } from '../../core/innerLifecycle'
+
+export default function pageStatusMixin (mixinType) {
+  if (mixinType === 'page') {
+    return {
+      data: {
+        mpxPageStatus: 'show'
+      },
+      onShow () {
+        this.mpxPageStatus = 'show'
+        this.__mpxProxy.callHook(ONSHOW)
+      },
+      onHide () {
+        this.mpxPageStatus = 'hide'
+        this.__mpxProxy.callHook(ONHIDE)
+      },
+      onBack () {
+        return this.onBack && this.onBack()
+      }
+    }
+  }
+  // components
+  return {
+    [CREATED] () {
+      const pageInstance = global.__currentPageInstance
+      if (!pageInstance) return
+      this.$watch(
+        () => pageInstance.mpxPageStatus,
+        status => {
+          if (!status) return
+          const pageLifetimes = (this.$rawOptions && this.$rawOptions.pageLifetimes) || {}
+          // show & hide
+          if (status in pageLifetimes && typeof pageLifetimes[status] === 'function') {
+            pageLifetimes[status].call(this)
+          }
+        }
+      )
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+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
+      const modelEventId = this.$attrs.mpxModelEventId
+      if (modelEvent && modelEventId) {
+        Hummer.notifyCenter.addEventListener(modelEventId, (e) => {
+          this.$emit('mpxModel', e)
+        })
+      }
+    },
+    beforeDestroy () {
+      const modelEvent = this.$attrs.mpxModelEvent
+      const modelEventId = this.$attrs.mpxModelEventId
+      if (modelEvent && modelEventId) {
+        Hummer.notifyCenter.removeEventListener(modelEventId)
+      }
+    },
+
+    methods
+  }
+}

package/src/platform/createApp.js

@@ -61,6 +61,13 @@ export default function createApp (option, config = {}) {
         }
       }
     })
+  } else if (__mpx_mode__ === 'tenon') {
+    // todo add tenon mixins
+    builtInMixins.push({
+      onLaunch () {
+        // console.log('tenon mixins')
+      }
+    })
   } else {
     builtInMixins.push({
       onLaunch () {
@@ -73,7 +80,7 @@ export default function createApp (option, config = {}) {
   rawOptions.mixins = builtInMixins
   const defaultOptions = filterOptions(spreadProp(mergeOptions(rawOptions, 'app', false), 'methods'), appData)
 
-  if (__mpx_mode__ === 'web') {
+  if (__mpx_mode__ === 'web' || __mpx_mode__ === 'tenon') {
     global.__mpxOptionsMap = global.__mpxOptionsMap || {}
     global.__mpxOptionsMap[global.currentModuleId] = defaultOptions
     global.getApp = function () {

package/src/platform/export/index.tenon.js

@@ -0,0 +1,75 @@
+import {
+  effectScope as vueEffectScope,
+  getCurrentScope as getCurrentVueScope,
+  onScopeDispose
+} from '@hummer/tenon-vue'
+
+import {
+  hasOwn,
+  isValidArrayIndex
+} from '@mpxjs/utils'
+
+export {
+  // watch
+  watchEffect,
+  watchSyncEffect,
+  watchPostEffect,
+  watch,
+  // reactive
+  reactive,
+  isReactive,
+  shallowReactive,
+  markRaw,
+  // ref
+  ref,
+  unref,
+  toRef,
+  toRefs,
+  isRef,
+  customRef,
+  shallowRef,
+  triggerRef,
+  // computed
+  computed,
+  // instance
+  getCurrentInstance
+} from '@hummer/tenon-vue'
+
+export function set (target, key, val) {
+  if (Array.isArray(target) && isValidArrayIndex(key)) {
+    target.length = Math.max(target.length, key)
+    target.splice(key, 1, val)
+    return val
+  }
+  target[key] = val
+  return val
+}
+
+export function del (target, key) {
+  if (Array.isArray(target) && isValidArrayIndex(key)) {
+    target.splice(key, 1)
+    return
+  }
+  if (!hasOwn(target, key)) {
+    return
+  }
+  delete target[key]
+}
+
+const noop = () => {
+}
+
+const fixEffectScope = (scope) => {
+  scope.pause = noop
+  scope.resume = noop
+}
+
+const effectScope = (detached) => fixEffectScope(vueEffectScope(detached))
+const getCurrentScope = () => fixEffectScope(getCurrentVueScope())
+
+export {
+  // effectScope
+  effectScope,
+  getCurrentScope,
+  onScopeDispose
+}

package/src/platform/patch/builtInKeysMap.js

@@ -3,7 +3,7 @@ import { makeMap } from '@mpxjs/utils'
 
 let builtInKeys
 
-if (__mpx_mode__ === 'web') {
+if (__mpx_mode__ === 'web' || __mpx_mode__ === 'tenon') {
   builtInKeys = [
     'proto',
     'mixins',

package/src/platform/patch/index.js

@@ -4,6 +4,7 @@ import { getDefaultOptions as getWxDefaultOptions } from './wx/getDefaultOptions
 import { getDefaultOptions as getAliDefaultOptions } from './ali/getDefaultOptions'
 import { getDefaultOptions as getSwanDefaultOptions } from './swan/getDefaultOptions'
 import { getDefaultOptions as getWebDefaultOptions } from './web/getDefaultOptions'
+import { getDefaultOptions as getTenonDefaultOptions } from './tenon/getDefaultOptions'
 import { error } from '@mpxjs/utils'
 
 export default function createFactory (type) {
@@ -11,7 +12,7 @@ export default function createFactory (type) {
     options.__nativeRender__ = !!isNative
     options.__type__ = type
     let ctor
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && __mpx_mode__ !== 'tenon') {
       if (customCtor) {
         ctor = customCtor
         customCtorType = customCtorType || type
@@ -41,6 +42,8 @@ export default function createFactory (type) {
     let getDefaultOptions
     if (__mpx_mode__ === 'web') {
       getDefaultOptions = getWebDefaultOptions
+    } else if (__mpx_mode__ === 'tenon') {
+      getDefaultOptions = getTenonDefaultOptions
     } else if (__mpx_mode__ === 'ali') {
       getDefaultOptions = getAliDefaultOptions
     } else if (__mpx_mode__ === 'swan') {
@@ -57,7 +60,7 @@ export default function createFactory (type) {
     // 将合并后的用户定义的rawOptions传入获取当前应该注入的内建mixins
     rawOptions.mixins = getBuiltInMixins(rawOptions, type)
     const defaultOptions = getDefaultOptions(type, { rawOptions, currentInject })
-    if (__mpx_mode__ === 'web') {
+    if (__mpx_mode__ === 'web' || __mpx_mode__ === 'tenon') {
       global.__mpxOptionsMap = global.__mpxOptionsMap || {}
       global.__mpxOptionsMap[global.currentModuleId] = defaultOptions
     } else if (ctor) {

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

@@ -0,0 +1,97 @@
+import builtInKeysMap from '../builtInKeysMap'
+import mergeOptions from '../../../core/mergeOptions'
+import { getCurrentInstance as getCurrentVueInstance } from '../../export/index'
+import MpxProxy, { setCurrentInstance, unsetCurrentInstance } from '../../../core/proxy'
+import { diffAndCloneA, warn } from '@mpxjs/utils'
+import { UPDATED, CREATED, MOUNTED, UNMOUNTED } from '../../../core/innerLifecycle'
+
+function filterOptions (options) {
+  const newOptions = {}
+  Object.keys(options).forEach(key => {
+    if (builtInKeysMap[key]) {
+      return
+    }
+    if (key === 'data' || key === 'dataFn') {
+      newOptions.data = function mergeFn () {
+        return Object.assign(
+          diffAndCloneA(options.data || {}).clone,
+          options.dataFn && options.dataFn.call(this)
+        )
+      }
+    } else {
+      newOptions[key] = options[key]
+    }
+  })
+  return newOptions
+}
+
+function initProxy (context, rawOptions) {
+  if (!context.__mpxProxy) {
+    // 缓存options
+    context.$rawOptions = rawOptions
+    // 创建proxy对象
+    context.__mpxProxy = new MpxProxy(rawOptions, context)
+    // todo 待问题修复后需要还原
+    // context.__mpxProxy.callHook(CREATED, Hummer.pageInfo && Hummer.pageInfo.params && [Hummer.pageInfo.params])
+  }
+}
+
+export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
+  const rawSetup = rawOptions.setup
+  if (rawSetup) {
+    rawOptions.setup = (props) => {
+      const { proxy: instance } = getCurrentVueInstance()
+      initProxy(instance, rawOptions)
+      setCurrentInstance(instance.__mpxProxy)
+      const newContext = {
+        triggerEvent: (eventName, eventDetail) => {
+          return instance.$emit(eventName, {
+            type: eventName,
+            detail: eventDetail
+          })
+        },
+        get refs () { return instance.$refs },
+        forceUpdate: instance.$forceUpdate.bind(instance),
+        selectComponent: () => {
+          warn('selectComponent is not supported in Tenon')
+        },
+        selectAllComponents: () => {
+          warn('selectAllComponents is not supported in Tenon')
+        },
+        createSelectorQuery: () => {
+          warn('createSelectorQuery is not supported in Tenon')
+        },
+        createIntersectionObserver: () => {
+          warn('createIntersectionObserver is not supported in Tenon')
+        }
+      }
+      const setupRes = rawSetup(props, newContext)
+      unsetCurrentInstance(instance.__mpxProxy)
+      return setupRes
+    }
+  }
+
+  const hookNames = type === 'page' ? ['onLoad', 'onReady', 'onUnload'] : ['created', 'mounted', 'unmounted']
+  const rootMixins = [{
+    [hookNames[0]] (...params) {
+      if (!this.__mpxProxy) {
+        initProxy(this, rawOptions, currentInject, params)
+      }
+      // todo 待问题修复后需要移除，目前逻辑是已经创建实例的情况下依旧会重复执行
+      this.__mpxProxy.callHook(CREATED, Hummer.pageInfo && Hummer.pageInfo.params && [Hummer.pageInfo.params])
+    },
+    [hookNames[1]] () {
+      this.__mpxProxy && this.__mpxProxy.callHook(MOUNTED, Hummer.pageInfo && Hummer.pageInfo.params && [Hummer.pageInfo.params])
+    },
+    updated () {
+      this.__mpxProxy && this.__mpxProxy.callHook(UPDATED)
+    },
+    [hookNames[2]] () {
+      this.__mpxProxy && this.__mpxProxy.callHook(UNMOUNTED)
+    }
+  }]
+  // 为了在builtMixin中可以使用某些rootMixin实现的特性（如数据响应等），此处builtInMixin在rootMixin之后执行，但是当builtInMixin使用存在对应内建生命周期的目标平台声明周期写法时，可能会出现用户生命周期比builtInMixin中的生命周期先执行的情况，为了避免这种情况发生，builtInMixin应该尽可能使用内建生命周期来编写
+  rawOptions.mixins = rawOptions.mixins ? rootMixins.concat(rawOptions.mixins) : rootMixins
+  rawOptions = mergeOptions(rawOptions, type, false)
+  return filterOptions(rawOptions)
+}

package/src/platform/patch/tenon/lifecycle.js

@@ -0,0 +1,48 @@
+const COMPONENT_HOOKS = [
+  'beforeCreate',
+  'created',
+  'beforeMount',
+  'mounted',
+  'beforeUpdate',
+  'updated',
+  // 'activated',
+  // 'deactivated',
+  'beforeDestroy',
+  'destroyed',
+  'errorCaptured',
+  'beforeUnmount',
+  'unmounted'
+  // 'onPageNotFound'
+]
+
+const PAGE_HOOKS = [
+  ...COMPONENT_HOOKS,
+  'onLoad',
+  'onReady',
+  'onShow',
+  'onHide',
+  'onUnload'
+  // 'onBack',
+  // 'onPullDownRefresh',
+  // 'onReachBottom',
+  // 'onPageScroll',
+  // 'onTabItemTap',
+  // 'onResize'
+]
+
+const APP_HOOKS = [
+  ...COMPONENT_HOOKS,
+  'onLaunch',
+  'onShow',
+  'onHide',
+  'onError'
+  // 'onPageNotFound',
+  // 'onUnhandledRejection',
+  // 'onThemeChange'
+]
+
+export const LIFECYCLE = {
+  APP_HOOKS,
+  PAGE_HOOKS,
+  COMPONENT_HOOKS
+}

package/src/vue.tenon.js

@@ -0,0 +1,13 @@
+import {
+  reactive,
+  computed,
+  toRaw,
+  watch
+} from '@hummer/tenon-vue'
+
+export default {
+  reactive,
+  computed,
+  toRaw,
+  watch
+}