@mpxjs/core 2.9.0-beta.3 → 2.9.0-beta.5

package/@types/index.d.ts

@@ -46,7 +46,7 @@ type FullPropType<T> = {
 }
 
 interface Properties {
-  [key: string]: WechatMiniprogram.Component.AllProperty | PropType<any> | FullPropType<any>
+  [key: string]: WechatMiniprogram.Component.AllProperty
 }
 
 interface Methods {
@@ -82,12 +82,12 @@ type PropValueType<Def> = Def extends {
   }
   ? T
   : Def extends (...args: any[]) => infer T
-  ? T
-  : Def extends FullPropType<infer T>
-  ? T
-  : Def extends PropType<infer T>
-  ? T
-  : any;
+    ? T
+    : Def extends FullPropType<infer T>
+      ? T
+      : Def extends PropType<infer T>
+        ? T
+        : any;
 
 type GetPropsType<T> = {
   readonly [K in keyof T]: PropValueType<T[K]>
@@ -240,7 +240,10 @@ export function createApp<T extends WechatMiniprogram.IAnyObject> (opt: WechatMi
 
 type MixinType = 'app' | 'page' | 'component'
 
-export function injectMixins (mixins: object | Array<object>, options?: MixinType | MixinType[] | { types?: MixinType | MixinType[], stage?: number }): Mpx
+export function injectMixins (mixins: object | Array<object>, options?: MixinType | MixinType[] | {
+  types?: MixinType | MixinType[],
+  stage?: number
+}): Mpx
 
 // export function watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
@@ -339,7 +342,7 @@ export interface Ref<T = any> {
    * We need this to be in public d.ts but don't want it to show up in IDE
    * autocomplete, so we use a private Symbol instead.
    */
-    [RefSymbol]: true
+  [RefSymbol]: true
 }
 
 type CollectionTypes = IterableCollections | WeakCollections
@@ -448,7 +451,11 @@ export interface WatchOptions extends WatchEffectOptions {
 
 interface EffectScope {
   run<T> (fn: () => T): T | undefined // 如果作用域不活跃就为 undefined
-  stop (): void
+  stop (fromParent?: boolean): void
+
+  pause (): void
+
+  resume (ignoreDirty?: boolean): void
 }
 
 
@@ -614,7 +621,7 @@ export function onTabItemTap (callback: WechatMiniprogram.Page.ILifetime['onTabI
 export function onSaveExitState (callback: () => void): void
 
 // get instance
-export function getCurrentInstance<T extends ComponentIns<{}, {}, {}>> (): T
+export function getCurrentInstance<T extends ComponentIns<{}, {}, {}>> (): { proxy: T, [x: string]: any }
 
 // I18n
 export function useI18n<Options extends {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.0-beta.3",
+  "version": "2.9.0-beta.5",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.0-beta.3",
+    "@mpxjs/utils": "^2.9.0-beta.4",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -47,5 +47,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "521f0cec1231962f9c071c8b70499772a0a81fda"
+  "gitHead": "874e5d0915a28d527091090ff64ad2d182e43525"
 }

package/src/core/mergeOptions.js

@@ -314,17 +314,19 @@ export function mergeToArray (parent, child, key) {
 function composeHooks (target, includes) {
   Object.keys(target).forEach(key => {
     if (!includes || includes[key]) {
-      const hooksArr = target[key]
-      hooksArr && (target[key] = function (...args) {
-        let result
-        for (let i = 0; i < hooksArr.length; i++) {
-          if (typeof hooksArr[i] === 'function') {
-            const data = hooksArr[i].apply(this, args)
-            data !== undefined && (result = data)
+      const hooks = target[key]
+      if (Array.isArray(hooks)) {
+        target[key] = function (...args) {
+          let result
+          for (let i = 0; i < hooks.length; i++) {
+            if (typeof hooks[i] === 'function') {
+              const data = hooks[i].apply(this, args)
+              data !== undefined && (result = data)
+            }
           }
+          return result
         }
-        return result
-      })
+      }
     }
   })
 }

package/src/core/proxy.js

@@ -312,7 +312,16 @@ export default class MpxProxy {
   watch (source, cb, options) {
     const target = this.target
     const getter = isString(source)
-      ? () => getByPath(target, source)
+      ? () => {
+        // for watch multi path string like 'a.b,c,d'
+        if (source.indexOf(',') > -1) {
+          return source.split(',').map(path => {
+            return getByPath(target, path.trim())
+          })
+        } else {
+          return getByPath(target, source)
+        }
+      }
       : source.bind(target)
 
     if (isObject(cb)) {
@@ -530,6 +539,10 @@ export default class MpxProxy {
   initRender () {
     if (this.options.__nativeRender__) return this.doRender()
 
+    const _i = this.target._i.bind(this.target)
+    const _c = this.target._c.bind(this.target)
+    const _r = this.target._r.bind(this.target)
+    const _sc = this.target._sc.bind(this.target)
     const effect = this.effect = new ReactiveEffect(() => {
       // pre render for props update
       if (this.propsUpdatedFlag) {
@@ -538,7 +551,7 @@ export default class MpxProxy {
 
       if (this.target.__injectedRender) {
         try {
-          return this.target.__injectedRender()
+          return this.target.__injectedRender(_i, _c, _r, _sc)
         } catch (e) {
           warn('Failed to execute render function, degrade to full-set-data mode.', this.options.mpxFileResource, e)
           this.render()

package/src/observer/effect.js

@@ -119,7 +119,9 @@ export class ReactiveEffect {
   }
 
   pause () {
-    this.pausedState = PausedState.paused
+    if (this.pausedState !== PausedState.dirty) {
+      this.pausedState = PausedState.paused
+    }
   }
 
   resume (ignoreDirty = false) {

package/src/platform/builtInMixins/proxyEventMixin.js

@@ -1,4 +1,4 @@
-import { setByPath, error, hasOwn } from '@mpxjs/utils'
+import { setByPath, error, hasOwn, dash2hump } from '@mpxjs/utils'
 import Mpx from '../../index'
 
 const datasetReg = /^data-(.+)$/
@@ -36,6 +36,8 @@ export default function proxyEventMixin () {
       if (type === 'begin' || type === 'end') {
         // 地图的 regionchange 事件会派发 e.type 为 begin 和 end 的事件
         fallbackType = 'regionchange'
+      } else if (/-([a-z])/.test(type)) {
+        fallbackType = dash2hump(type)
       } else if (__mpx_mode__ === 'ali') {
         fallbackType = type.replace(/^./, i => i.toLowerCase())
       }
@@ -89,34 +91,22 @@ export default function proxyEventMixin () {
   }
   if (__mpx_mode__ === 'ali') {
     Object.assign(methods, {
-      triggerEvent (eventName, eventDetail, e) {
+      triggerEvent (eventName, eventDetail) {
         const handlerName = eventName.replace(/^./, matched => matched.toUpperCase()).replace(/-([a-z])/g, (match, p1) => p1.toUpperCase())
         const handler = this.props && (this.props['on' + handlerName] || this.props['catch' + handlerName])
         if (handler && typeof handler === 'function') {
-          let eventObj = {}
-          if (e) {
-            e.detail = Object.assign(e.detail, eventDetail)
-            eventObj = e
-          } else {
-            const dataset = collectDataset(this.props)
-            const id = this.props.id || ''
-            const timeStamp = +new Date()
-            eventObj = {
-              type: eventName,
-              timeStamp,
-              target: { id, dataset, targetDataset: dataset },
-              currentTarget: { id, dataset },
-              detail: eventDetail
-            }
+          const dataset = collectDataset(this.props)
+          const id = this.props.id || ''
+          const timeStamp = +new Date()
+          const eventObj = {
+            type: eventName,
+            timeStamp,
+            target: { id, dataset, targetDataset: dataset },
+            currentTarget: { id, dataset },
+            detail: eventDetail
           }
           handler.call(this, eventObj)
         }
-      },
-      __proxyEvent (e) {
-        const eventName = e.type
-        // 保持和微信一致
-        e.target = e.currentTarget
-        this.triggerEvent(eventName, {}, e)
       }
     })
   }

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

@@ -18,12 +18,6 @@ export default function proxyEventMixin () {
         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)
-      },
-      __proxyEvent (e) {
-        const type = e.type
-        // 保持和微信一致 target 和 currentTarget 相同
-        e.target = e.currentTarget
-        this.triggerEvent(type, {}, e)
       }
     }
   }

package/src/platform/builtInMixins/renderHelperMixin.js

@@ -1,4 +1,4 @@
-import { isObject } from '@mpxjs/utils'
+import { getByPath, hasOwn, isObject } from '@mpxjs/utils'
 
 export default function renderHelperMixin () {
   return {
@@ -21,10 +21,21 @@ export default function renderHelperMixin () {
           }
         }
       },
+      // collect
       _c (key, value) {
+        if (hasOwn(this.__mpxProxy.renderData, key)) {
+          return this.__mpxProxy.renderData[key]
+        }
+        if (value === undefined) {
+          value = getByPath(this, key)
+        }
         this.__mpxProxy.renderData[key] = value
         return value
       },
+      // simple collect
+      _sc (key) {
+        return (this.__mpxProxy.renderData[key] = this[key])
+      },
       _r () {
         this.__mpxProxy.renderWithData()
       }

package/src/platform/createApp.js

@@ -2,10 +2,11 @@ import transferOptions from '../core/transferOptions'
 import mergeOptions from '../core/mergeOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
 import { makeMap, spreadProp, isBrowser } from '@mpxjs/utils'
+import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import * as webLifecycle from '../platform/patch/web/lifecycle'
 import Mpx from '../index'
 
-const webAppHooksMap = makeMap(webLifecycle.LIFECYCLE.APP_HOOKS)
+const webAppHooksMap = makeMap(mergeLifecycle(webLifecycle.LIFECYCLE).app)
 
 function filterOptions (options, appData) {
   const newOptions = {}
@@ -84,7 +85,6 @@ export default function createApp (option, config = {}) {
     global.getApp = function () {
       if (!isBrowser) {
         console.error('[Mpx runtime error]: Dangerous API! global.getApp method is running in non browser environments')
-        return
       }
       return appData
     }

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

@@ -1,8 +1,60 @@
-import {
-  effectScope as vueEffectScope,
-  getCurrentScope as vueGetCurrentScope,
-  onScopeDispose
-} from 'vue'
+import { EffectScope } from 'vue'
+import { hasOwn } from '@mpxjs/utils'
+import { PausedState } from '../../helper/const'
+
+const hackEffectScope = () => {
+  EffectScope.prototype.pause = function () {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        const effect = this.effects[i]
+        // vue2.7中存在对于watcher实例方法的重写(doWatch)，因此无法通过修改Watcher.prototype统一实现pause和resume，只能逐个实例修改实现
+        if (!hasOwn(effect, 'pausedState')) {
+          effect.pausedState = PausedState.resumed
+          const rawUpdate = effect.update
+          effect.update = function () {
+            if (effect.pausedState !== PausedState.resumed) {
+              effect.pausedState = PausedState.dirty
+            } else {
+              rawUpdate.call(effect)
+            }
+          }
+        }
+        if (effect.pausedState !== PausedState.dirty) {
+          effect.pausedState = PausedState.paused
+        }
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause()
+        }
+      }
+    }
+  }
+
+  EffectScope.prototype.resume = function (ignoreDirty = false) {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        const effect = this.effects[i]
+        if (hasOwn(effect, 'pausedState')) {
+          const lastPausedState = effect.pausedState
+          effect.pausedState = PausedState.resumed
+          if (!ignoreDirty && lastPausedState === PausedState.dirty) {
+            effect.update()
+          }
+        }
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].resume(ignoreDirty)
+        }
+      }
+    }
+  }
+}
+
+hackEffectScope()
 
 export {
   // watch
@@ -29,27 +81,12 @@ export {
   // computed
   computed,
   // instance
-  getCurrentInstance
-} from 'vue'
-
-const noop = () => {
-}
-
-const fixEffectScope = (scope) => {
-  scope.pause = noop
-  scope.resume = noop
-  return scope
-}
-
-const effectScope = (detached) => fixEffectScope(vueEffectScope(detached))
-const getCurrentScope = () => fixEffectScope(vueGetCurrentScope())
-
-export {
+  getCurrentInstance,
   // effectScope
   effectScope,
   getCurrentScope,
   onScopeDispose
-}
+} from 'vue'
 
 export {
   // i18n

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

@@ -1,7 +1,7 @@
 import MpxProxy from '../../../core/proxy'
 import builtInKeysMap from '../builtInKeysMap'
 import mergeOptions from '../../../core/mergeOptions'
-import { isFunction, error, diffAndCloneA, hasOwn } from '@mpxjs/utils'
+import { isFunction, error, diffAndCloneA, hasOwn, noop } from '@mpxjs/utils'
 
 function transformApiForProxy (context, currentInject) {
   const rawSetData = context.setData.bind(context)
@@ -45,16 +45,14 @@ function transformApiForProxy (context, currentInject) {
     }
   })
   if (currentInject) {
-    if (currentInject.render) {
-      Object.defineProperties(context, {
-        __injectedRender: {
-          get () {
-            return currentInject.render.bind(context)
-          },
-          configurable: false
-        }
-      })
-    }
+    Object.defineProperties(context, {
+      __injectedRender: {
+        get () {
+          return currentInject.render || noop
+        },
+        configurable: false
+      }
+    })
     if (currentInject.getRefsData) {
       Object.defineProperties(context, {
         __getRefsData: {

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

@@ -9,7 +9,8 @@ const COMPONENT_HOOKS = [
   'deactivated',
   'beforeDestroy',
   'destroyed',
-  'errorCaptured'
+  'errorCaptured',
+  'serverPrefetch'
 ]
 
 const PAGE_HOOKS = [

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

@@ -1,4 +1,4 @@
-import { hasOwn } from '@mpxjs/utils'
+import { hasOwn, noop } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
 import builtInKeysMap from '../builtInKeysMap'
 import mergeOptions from '../../../core/mergeOptions'
@@ -83,16 +83,14 @@ function transformApiForProxy (context, currentInject) {
 
   // 绑定注入的render
   if (currentInject) {
-    if (currentInject.render) {
-      Object.defineProperties(context, {
-        __injectedRender: {
-          get () {
-            return currentInject.render
-          },
-          configurable: false
-        }
-      })
-    }
+    Object.defineProperties(context, {
+      __injectedRender: {
+        get () {
+          return currentInject.render || noop
+        },
+        configurable: false
+      }
+    })
     if (currentInject.getRefsData) {
       Object.defineProperties(context, {
         __getRefsData: {

package/src/vuePlugin.js

@@ -16,22 +16,22 @@ function collectDataset (attrs) {
 }
 
 export default function install (Vue) {
-  Vue.prototype.triggerEvent = function (eventName, eventDetail, e) {
+  Vue.prototype.triggerEvent = function (eventName, eventDetail) {
+    // 输出Web时自定义组件绑定click事件会和web原生事件冲突，组件内部triggerEvent时会导致事件执行两次，将click事件改为_click来规避此问题
+    const escapeEvents = ['click']
+    if (escapeEvents.includes(eventName)) {
+      eventName = '_' + eventName
+    }
     let eventObj = {}
-    if (e) {
-      e.detail = Object.assign(e.detail, eventDetail)
-      eventObj = e
-    } else {
-      const dataset = collectDataset(this.$attrs)
-      const id = this.$attrs.id || ''
-      const timeStamp = +new Date()
-      eventObj = {
-        type: eventName,
-        timeStamp,
-        target: { id, dataset, targetDataset: dataset },
-        currentTarget: { id, dataset },
-        detail: eventDetail
-      }
+    const dataset = collectDataset(this.$attrs)
+    const id = this.$attrs.id || ''
+    const timeStamp = +new Date()
+    eventObj = {
+      type: eventName,
+      timeStamp,
+      target: { id, dataset, targetDataset: dataset },
+      currentTarget: { id, dataset },
+      detail: eventDetail
     }
     return this.$emit(eventName, eventObj)
   }