@mpxjs/core 2.9.70-alpha.2 → 2.9.70-alpha.3

package/src/platform/createApp.js

@@ -5,7 +5,7 @@ import { makeMap, spreadProp, isBrowser } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
-import { initAppProvides } from './export/apiInject'
+import { initAppProvides } from './export/inject'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -24,19 +24,29 @@ function filterOptions (options, appData) {
   return newOptions
 }
 
-export default function createApp (option, config = {}) {
-  // 在App中挂载mpx对象供周边工具访问，如e2e测试
+export default function createApp (options, config = {}) {
+  const appData = {}
+  // app选项目前不需要进行转换
+  const { rawOptions, currentInject } = transferOptions(options, 'app', false)
   const builtInMixins = [{
+    // 在App中挂载mpx对象供周边工具访问，如e2e测试
     getMpx () {
       return Mpx
     }
   }]
-  const appData = {}
   if (__mpx_mode__ === 'web') {
     builtInMixins.push({
+      beforeCreate () {
+        // for vue provide vm access
+        Object.assign(this, appData, Mpx.prototype)
+        if (isBrowser) {
+          rawOptions.onShow && global.__mpxAppCbs.show.push(rawOptions.onShow.bind(this))
+          rawOptions.onHide && global.__mpxAppCbs.hide.push(rawOptions.onHide.bind(this))
+          rawOptions.onError && global.__mpxAppCbs.error.push(rawOptions.onError.bind(this))
+          rawOptions.onUnhandledRejection && global.__mpxAppCbs.rejection.push(rawOptions.onUnhandledRejection.bind(this))
+        }
+      },
       created () {
-        Object.assign(this, Mpx.prototype)
-        Object.assign(this, appData)
         const current = this.$root.$options?.router?.currentRoute || {}
         const options = {
           path: current.path && current.path.replace(/^\//, ''),
@@ -45,25 +55,13 @@ export default function createApp (option, config = {}) {
           shareTicket: '',
           referrerInfo: {}
         }
+        // web不分冷启动和热启动
         global.__mpxEnterOptions = options
-        this.$options.onLaunch && this.$options.onLaunch.call(this, options)
-        global.__mpxAppCbs = global.__mpxAppCbs || {
-          show: [],
-          hide: [],
-          error: []
-        }
-        if (isBrowser) {
-          if (this.$options.onShow) {
-            this.$options.onShow.call(this, options)
-            global.__mpxAppCbs.show.push(this.$options.onShow.bind(this))
-          }
-          if (this.$options.onHide) {
-            global.__mpxAppCbs.hide.push(this.$options.onHide.bind(this))
-          }
-          if (this.$options.onError) {
-            global.__mpxAppCbs.error.push(this.$options.onError.bind(this))
-          }
-        }
+        global.__mpxLaunchOptions = options
+        rawOptions.onLaunch && rawOptions.onLaunch.call(this, options)
+        global.__mpxAppCbs.show.forEach((cb) => {
+          cb(options)
+        })
       }
     })
   } else if (__mpx_mode__ === 'tenon') {
@@ -77,25 +75,23 @@ export default function createApp (option, config = {}) {
     builtInMixins.push({
       onLaunch () {
         Object.assign(this, Mpx.prototype)
+        initAppProvides(rawOptions.provide, this)
       }
     })
   }
-  // app选项目前不需要进行转换
-  const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   rawOptions.mixins = builtInMixins
   const defaultOptions = filterOptions(spreadProp(mergeOptions(rawOptions, 'app', false), 'methods'), appData)
 
   if (__mpx_mode__ === 'web' || __mpx_mode__ === 'tenon') {
-    global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-    global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
     global.getApp = function () {
       if (!isBrowser) {
         console.error('[Mpx runtime error]: Dangerous API! global.getApp method is running in non browser environments')
       }
       return appData
     }
+    global.__mpxOptionsMap = global.__mpxOptionsMap || {}
+    global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
   } else {
-    initAppProvides(rawOptions)
     defaultOptions.onAppInit && defaultOptions.onAppInit()
     const ctor = config.customCtor || global.currentCtor || App
     ctor(defaultOptions)

package/src/platform/env/event.js

@@ -0,0 +1,105 @@
+import { isBrowser } from '@mpxjs/utils'
+
+function extendEvent (e, extendObj = {}) {
+  Object.keys(extendObj).forEach((key) => {
+    Object.defineProperty(e, key, {
+      value: extendObj[key],
+      enumerable: true,
+      configurable: true,
+      writable: true
+    })
+  })
+}
+
+function createMpxEvent (layer) {
+  let startTimer = null
+  let needTap = true
+  let touchStartX = 0
+  let touchStartY = 0
+  let targetElement = null
+  const isTouchDevice = document && 'ontouchstart' in document.documentElement
+
+  const onTouchStart = (event) => {
+    if (event.targetTouches?.length > 1) {
+      return true
+    }
+    const touches = event.targetTouches
+    targetElement = event.target
+    needTap = true
+    startTimer = null
+    touchStartX = touches[0].pageX
+    touchStartY = touches[0].pageY
+    startTimer = setTimeout(() => {
+      needTap = false
+      sendEvent(targetElement, 'longpress', event)
+      sendEvent(targetElement, 'longtap', event)
+    }, 350)
+  }
+
+  const onTouchMove = (event) => {
+    const touch = event.changedTouches[0]
+    if (
+      Math.abs(touch.pageX - touchStartX) > 1 ||
+      Math.abs(touch.pageY - touchStartY) > 1
+    ) {
+      needTap = false
+      startTimer && clearTimeout(startTimer)
+      startTimer = null
+    }
+  }
+
+  const onTouchEnd = (event) => {
+    if (event.targetTouches?.length > 1) {
+      return true
+    }
+    startTimer && clearTimeout(startTimer)
+    startTimer = null
+    if (needTap) {
+      sendEvent(targetElement, 'tap', event)
+    }
+  }
+
+  const onClick = (event) => {
+    targetElement = event.target
+    sendEvent(targetElement, 'tap', event)
+  }
+
+  const sendEvent = (targetElement, type, event) => {
+    const touchEvent = new CustomEvent(type, {
+      bubbles: true,
+      cancelable: true
+    })
+    const changedTouches = event.changedTouches || []
+    extendEvent(touchEvent, {
+      timeStamp: event.timeStamp,
+      changedTouches,
+      touches: changedTouches,
+      detail: {
+        x: changedTouches[0]?.pageX || event.pageX || 0,
+        y: changedTouches[0]?.pageY || event.pageY || 0
+      }
+    })
+    targetElement && targetElement.dispatchEvent(touchEvent)
+  }
+
+  if (isTouchDevice) {
+    layer.addEventListener('touchstart', onTouchStart, true)
+    layer.addEventListener('touchmove', onTouchMove, true)
+    layer.addEventListener('touchend', onTouchEnd, true)
+  } else {
+    layer.addEventListener('click', onClick, true)
+  }
+}
+
+export function initEvent () {
+  if (isBrowser && !global.__mpxCreatedEvent) {
+    global.__mpxCreatedEvent = true
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+      createMpxEvent(document.body)
+    } else {
+      document.addEventListener('DOMContentLoaded', function () {
+        createMpxEvent(document.body)
+      }, false)
+    }
+  }
+}

package/src/platform/env/index.ios.js

@@ -0,0 +1,61 @@
+import { isFunction, isNumber, isString } from '@mpxjs/utils'
+import { createI18n } from '../builtInMixins/i18nMixin'
+
+export function init (Mpx) {
+  global.__mpx = Mpx
+  global.__mpxAppCbs = global.__mpxAppCbs || {
+    show: [],
+    hide: [],
+    error: [],
+    rejection: []
+  }
+  if (global.i18n) {
+    Mpx.i18n = createI18n(global.i18n)
+  }
+  initGlobalErrorHandling()
+}
+
+function initGlobalErrorHandling () {
+  if (global.ErrorUtils) {
+    const defaultHandler = global.ErrorUtils.getGlobalHandler()
+    global.ErrorUtils.setGlobalHandler((error, isFatal) => {
+      if (global.__mpxAppCbs && global.__mpxAppCbs.error && global.__mpxAppCbs.error.length) {
+        global.__mpxAppCbs.error.forEach((cb) => {
+          cb(error)
+        })
+      } else if (defaultHandler) {
+        defaultHandler(error, isFatal)
+      } else {
+        console.error(`${error.name}: ${error.message}\n`)
+      }
+    })
+  }
+
+  function onUnhandledRejection (event) {
+    if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
+      global.__mpxAppCbs.rejection.forEach((cb) => {
+        cb(event)
+      })
+    } else {
+      console.warn(`UNHANDLED PROMISE REJECTION ${(isNumber(event.id) || isString(event.id)) ? '(id:' + event.id + ')' : ''}: ${event.reason}\n`)
+    }
+  }
+  const rejectionTrackingOptions = {
+    allRejections: true,
+    onUnhandled (id, error) {
+      onUnhandledRejection({ id, reason: error, promise: null })
+    }
+  }
+
+  // 支持 core-js promise polyfill
+  const oldOnUnhandledRejection = global.onunhandledrejection
+  global.onunhandledrejection = function onunhandledrejection (event) {
+    onUnhandledRejection(event)
+    isFunction(oldOnUnhandledRejection) && oldOnUnhandledRejection.call(this, event)
+  }
+  if (global.HermesInternal?.hasPromise?.()) {
+    global.HermesInternal.enablePromiseRejectionTracker?.(rejectionTrackingOptions)
+  } else {
+    require('promise/setimmediate/rejection-tracking').enable(rejectionTrackingOptions)
+  }
+}

package/src/platform/env/index.js

@@ -0,0 +1,8 @@
+import { createI18n } from '../builtInMixins/i18nMixin'
+
+export function init (Mpx) {
+  global.__mpx = Mpx
+  if (global.i18n) {
+    Mpx.i18n = createI18n(global.i18n)
+  }
+}

package/src/platform/env/index.web.js

@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import install from './vuePlugin'
+import { isBrowser, error, warn } from '@mpxjs/utils'
+import { initEvent } from './event'
+
+export function init (Mpx) {
+  global.__mpx = Mpx
+  global.__mpxAppCbs = global.__mpxAppCbs || {
+    show: [],
+    hide: [],
+    error: [],
+    rejection: []
+  }
+  Mpx.__vue = Vue
+  Vue.use(install)
+  initEvent()
+  initGlobalErrorHandling()
+}
+
+function initGlobalErrorHandling () {
+  Vue.config.errorHandler = (e, vm, info) => {
+    error(`Unhandled error occurs${info ? ` during execution of [${info}]` : ''}!`, vm?.__mpxProxy?.options.mpxFileResource, e)
+  }
+  Vue.config.warnHandler = (msg, vm, trace) => {
+    warn(msg, vm?.__mpxProxy?.options.mpxFileResource, trace)
+  }
+
+  if (isBrowser) {
+    window.addEventListener('error', (event) => {
+      if (global.__mpxAppCbs && global.__mpxAppCbs.error && global.__mpxAppCbs.error.length) {
+        global.__mpxAppCbs.error.forEach((cb) => {
+          cb(event.error)
+        })
+      } else {
+        console.error(`${event.type}: ${event.message}\n`)
+      }
+    })
+    window.addEventListener('unhandledrejection', (event) => {
+      if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
+        global.__mpxAppCbs.rejection.forEach((cb) => {
+          cb(event)
+        })
+      } else {
+        console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}\n`)
+      }
+    })
+  }
+}

package/src/{external → platform/env}/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 () {
@@ -60,17 +60,23 @@ export default function install (Vue) {
     data: {
       get () {
         return Object.assign({}, this.$props, this.$data)
-      }
+      },
+      enumerable: true,
+      configurable: true
     },
     dataset: {
       get () {
         return collectDataset(this.$attrs, true)
-      }
+      },
+      enumerable: true,
+      configurable: true
     },
     id: {
       get () {
         return this.$attrs.id || ''
-      }
+      },
+      enumerable: true,
+      configurable: true
     }
   })
 

package/src/platform/export/index.js

@@ -46,4 +46,4 @@ export {
 export {
   provide,
   inject
-} from './apiInject'
+} from './inject'

package/src/platform/export/{apiInject.js → inject.js}

@@ -1,39 +1,30 @@
 import { callWithErrorHandling, isFunction, isObject, warn } from '@mpxjs/utils'
 import { currentInstance } from '../../core/proxy'
 
-const providesMap = {
-  /** 全局 scope */
-  __app: Object.create(null),
-  /** 页面 scope */
-  __pages: Object.create(null)
-}
-
-global.__mpxProvidesMap = providesMap
+/** 全局 scope */
+let appProvides = Object.create(null)
 
 /** @internal createApp() 初始化应用层 scope provide */
-export function initAppProvides (appOptions) {
-  const provideOpt = appOptions.provide
+export function initAppProvides (provideOpt, instance) {
   if (provideOpt) {
     const provided = isFunction(provideOpt)
-      ? callWithErrorHandling(provideOpt.bind(appOptions), appOptions, 'createApp provide function')
+      ? callWithErrorHandling(provideOpt.bind(instance), instance, 'createApp provide function')
       : provideOpt
     if (isObject(provided)) {
-      providesMap.__app = provided
+      appProvides = provided
     } else {
       warn('App provides must be an object or a function that returns an object.')
     }
   }
 }
 
-function resolvePageId (context) {
-  if (context && isFunction(context.getPageId)) {
-    return context.getPageId()
+function resolveProvides (vm) {
+  const provides = vm.provides
+  const parentProvides = vm.parent && vm.parent.provides
+  if (parentProvides === provides) {
+    return (vm.provides = Object.create(parentProvides))
   }
-}
-
-function resolvePageProvides (context) {
-  const pageId = resolvePageId(context)
-  return providesMap.__pages[pageId] || (providesMap.__pages[pageId] = Object.create(null))
+  return provides
 }
 
 export function provide (key, value) {
@@ -42,8 +33,7 @@ export function provide (key, value) {
     warn('provide() can only be used inside setup().')
     return
   }
-  // 小程序无法实现组件父级引用，所以 provide scope 设置为组件所在页面
-  const provides = resolvePageProvides(instance.target)
+  const provides = resolveProvides(instance)
   provides[key] = value
 }
 
@@ -53,11 +43,11 @@ export function inject (key, defaultValue, treatDefaultAsFactory = false) {
     warn('inject() can only be used inside setup()')
     return
   }
-  const provides = resolvePageProvides(instance.target)
-  if (key in provides) {
+  const provides = instance.parent && instance.parent.provides
+  if (provides && key in provides) {
     return provides[key]
-  } else if (key in providesMap.__app) {
-    return providesMap.__app[key]
+  } else if (key in appProvides) {
+    return appProvides[key]
   } else if (arguments.length > 1) {
     return treatDefaultAsFactory && isFunction(defaultValue)
       ? defaultValue.call(instance && instance.target)