@mpxjs/core 2.8.32 → 2.9.0-beta.0

package/@types/index.d.ts

@@ -128,6 +128,8 @@ interface ComponentOpt<D, P, C, M, Mi extends Array<any>, S extends Record<any,
 
   pageHide?: () => void
 
+  initData?: Record<string, any>
+
   [index: string]: any
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.8.32",
+  "version": "2.9.0-beta.0",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -47,5 +47,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "76bc52fa3cb4d7c9071d2fb154e23434e7fcb184"
+  "gitHead": "67b611aeae99f916d46ca8d5d9ed784ddf53f05c"
 }

package/src/core/innerLifecycle.js

@@ -10,6 +10,7 @@ export const ONLOAD = '__onLoad__'
 export const ONSHOW = '__onShow__'
 export const ONHIDE = '__onHide__'
 export const ONRESIZE = '__onResize__'
+export const SERVERPREFETCH = '__serverPrefetch__'
 
 export const INNER_LIFECYCLES = [
   BEFORECREATE,
@@ -19,6 +20,7 @@ export const INNER_LIFECYCLES = [
   BEFOREUPDATE,
   UPDATED,
   BEFOREUNMOUNT,
+  SERVERPREFETCH,
   UNMOUNTED,
   ONLOAD,
   ONSHOW,

package/src/core/mergeOptions.js

@@ -132,7 +132,9 @@ function extractObservers (options) {
         },
         deep: true,
         // 延迟触发首次回调，处理转换支付宝时在observer中查询组件的行为，如vant/picker中，如不考虑该特殊情形可用immediate代替
-        immediateAsync: true
+        // immediateAsync: true
+        // 为了数据响应的标准化，不再提供immediateAsync选项，之前处理vant等原生组件跨平台转换遇到的问题推荐使用条件编译patch进行处理
+        immediate: true
       })
     }
   })
@@ -174,7 +176,9 @@ function extractObservers (options) {
             }
           },
           deep,
-          immediateAsync: watchProp
+          // immediateAsync: watchProp
+          // 为了数据响应的标准化，不再提供immediateAsync选项，之前处理vant等原生组件跨平台转换遇到的问题推荐使用条件编译patch进行处理
+          immediate: watchProp
         })
       }
     })
@@ -348,7 +352,7 @@ function transformHOOKS (options) {
     const componentHooksMap = makeMap(convertRule.lifecycle.component)
     for (const key in options) {
       // 使用Component创建page实例，页面专属生命周期&自定义方法需写在methods内部
-      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && !componentHooksMap[key]) {
+      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && key !== 'serverPrefetch' && !componentHooksMap[key]) {
         if (!options.methods) options.methods = {}
         options.methods[key] = options[key]
         delete options[key]

package/src/core/proxy.js

@@ -1,9 +1,9 @@
 import { reactive } from '../observer/reactive'
-import { ReactiveEffect } from '../observer/effect'
+import { ReactiveEffect, pauseTracking, resetTracking } from '../observer/effect'
 import { effectScope } from '../platform/export/index'
 import { watch } from '../observer/watch'
 import { computed } from '../observer/computed'
-import { queueJob, nextTick } from '../observer/scheduler'
+import { queueJob, nextTick, flushPreFlushCbs } from '../observer/scheduler'
 import Mpx from '../index'
 import {
   noop,
@@ -36,6 +36,7 @@ import {
   BEFOREUPDATE,
   UPDATED,
   BEFOREUNMOUNT,
+  SERVERPREFETCH,
   UNMOUNTED,
   ONLOAD,
   ONSHOW,
@@ -119,6 +120,7 @@ export default class MpxProxy {
       // 下次是否需要强制更新全部渲染数据
       this.forceUpdateAll = false
       this.currentRenderTask = null
+      this.propsUpdatedFlag = false
     }
     this.initApi()
   }
@@ -170,7 +172,9 @@ export default class MpxProxy {
   }
 
   propsUpdated () {
+    this.propsUpdatedFlag = true
     const updateJob = this.updateJob || (this.updateJob = () => {
+      this.propsUpdatedFlag = false
       // 只有当前没有渲染任务时，属性更新才需要单独触发updated，否则可以由渲染任务触发updated
       if (this.currentRenderTask?.resolved && this.isMounted()) {
         this.callHook(BEFOREUPDATE)
@@ -477,6 +481,7 @@ export default class MpxProxy {
       return
     }
 
+    pauseTracking()
     // 使用forceUpdateData后清空
     if (!isEmptyObject(this.forceUpdateData)) {
       data = mergeData({}, data, this.forceUpdateData)
@@ -504,12 +509,30 @@ export default class MpxProxy {
     }
 
     this.target.__render(data, callback)
+    resetTracking()
+  }
+
+  toggleRecurse (allowed) {
+    if (this.effect && this.update) this.effect.allowRecurse = this.update.allowRecurse = allowed
+  }
+
+  updatePreRender () {
+    this.toggleRecurse(false)
+    pauseTracking()
+    flushPreFlushCbs(undefined, this.update)
+    resetTracking()
+    this.toggleRecurse(true)
   }
 
   initRender () {
     if (this.options.__nativeRender__) return this.doRender()
 
     const effect = this.effect = new ReactiveEffect(() => {
+      // pre render for props update
+      if (this.propsUpdatedFlag) {
+        this.updatePreRender()
+      }
+
       if (this.target.__injectedRender) {
         try {
           return this.target.__injectedRender()
@@ -522,10 +545,10 @@ export default class MpxProxy {
       }
     }, () => queueJob(update), this.scope)
 
-    const update = this.update = this.effect.run.bind(this.effect)
+    const update = this.update = effect.run.bind(effect)
     update.id = this.uid
     // render effect允许自触发
-    effect.allowRecurse = update.allowRecurse = true
+    this.toggleRecurse(true)
     update()
   }
 
@@ -619,6 +642,7 @@ export const onLoad = createHook(ONLOAD)
 export const onShow = createHook(ONSHOW)
 export const onHide = createHook(ONHIDE)
 export const onResize = createHook(ONRESIZE)
+export const onServerPrefetch = createHook(SERVERPREFETCH)
 export const onPullDownRefresh = createHook('__onPullDownRefresh__')
 export const onReachBottom = createHook('__onReachBottom__')
 export const onShareAppMessage = createHook('__onShareAppMessage__')

package/src/index.js

@@ -29,6 +29,7 @@ export {
   UPDATED,
   BEFOREUNMOUNT,
   UNMOUNTED,
+  SERVERPREFETCH,
   ONLOAD,
   ONSHOW,
   ONHIDE,
@@ -42,6 +43,7 @@ export {
   onUpdated,
   onBeforeUnmount,
   onUnmounted,
+  onServerPrefetch,
   onLoad,
   onShow,
   onHide,

package/src/observer/effect.js

@@ -4,6 +4,19 @@ import { PausedState } from '../helper/const'
 
 let uid = 0
 
+let shouldTrack = true
+const trackStack = []
+
+export function pauseTracking () {
+  trackStack.push(shouldTrack)
+  shouldTrack = false
+}
+
+export function resetTracking () {
+  const last = trackStack.pop()
+  shouldTrack = last === undefined ? true : last
+}
+
 export class ReactiveEffect {
   active = true
   deps = []
@@ -27,17 +40,21 @@ export class ReactiveEffect {
   // run fn and return value
   run () {
     if (!this.active) return this.fn()
-    pushTarget(this)
+    const lastShouldTrack = shouldTrack
     try {
+      pushTarget(this)
+      shouldTrack = true
       return this.fn()
     } finally {
       popTarget()
+      shouldTrack = lastShouldTrack
       this.deferStop ? this.stop() : this.cleanupDeps()
     }
   }
 
   // add dependency to this
   addDep (dep) {
+    if (!shouldTrack) return
     const id = dep.id
     if (!this.newDepIds.has(id)) {
       this.newDepIds.add(id)

package/src/observer/scheduler.js

@@ -17,6 +17,7 @@ let postFlushIndex = 0
 
 const resolvedPromise = Promise.resolve()
 let currentFlushPromise = null
+let currentPreFlushParentJob = null
 
 const RECURSION_LIMIT = 100
 
@@ -68,9 +69,9 @@ export function queueJob (job) {
   // if the job is a watch() callback, the search will start with a +1 index to
   // allow it recursively trigger itself - it is the user's responsibility to
   // ensure it doesn't end up in an infinite loop.
-  if (
-    !queue.length ||
-    !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)
+  if ((!queue.length ||
+    !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) &&
+    job !== currentPreFlushParentJob
   ) {
     if (job.id == null) {
       queue.push(job)
@@ -92,8 +93,9 @@ function queueFlush () {
   }
 }
 
-export function flushPreFlushCbs (seen) {
+export function flushPreFlushCbs (seen, parentJob = null) {
   if (pendingPreFlushCbs.length) {
+    currentPreFlushParentJob = parentJob
     activePreFlushCbs = [...new Set(pendingPreFlushCbs)]
     pendingPreFlushCbs.length = 0
     if (isDev) seen = seen || new Map()
@@ -107,8 +109,9 @@ export function flushPreFlushCbs (seen) {
     }
     activePreFlushCbs = null
     preFlushIndex = 0
+    currentPreFlushParentJob = null
     // recursively flush until it drains
-    flushPreFlushCbs(seen)
+    flushPreFlushCbs(seen, parentJob)
   }
 }
 

package/src/observer/watch.js

@@ -42,7 +42,7 @@ const processWatchOptionsCompat = (options) => {
 }
 
 export function watch (source, cb, options = {}) {
-  let { immediate, deep, flush, immediateAsync } = processWatchOptionsCompat(options)
+  let { immediate, deep, flush } = processWatchOptionsCompat(options)
   const instance = currentInstance
   let getter
   let isMultiSource = false
@@ -139,8 +139,6 @@ export function watch (source, cb, options = {}) {
   if (cb) {
     if (immediate) {
       job()
-    } else if (immediateAsync) {
-      queuePreFlushCb(job)
     } else {
       oldValue = effect.run()
     }

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

@@ -63,7 +63,7 @@ export default function pageStatusMixin (mixinType) {
       },
       created () {
         // onLoad应该在用户声明周期CREATED后再执行，故此处使用原生created声明周期来触发onLoad
-        const query = (global.__mpxRouter && global.__mpxRouter.currentRoute && global.__mpxRouter.currentRoute.query) || {}
+        const query = this.$root.$options?.router?.currentRoute?.query || {}
         this.__mpxProxy.callHook(ONLOAD, [query])
       }
     })
@@ -71,25 +71,27 @@ export default function pageStatusMixin (mixinType) {
 
   Object.assign(mixin, {
     [CREATED] () {
-      const pageInstance = mixinType === 'page' ? this : getCurrentPageInstance()
-      if (pageInstance) {
-        this.$watch(() => pageInstance.mpxPageStatus, status => {
-          if (!status) return
-          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)
+      if (isBrowser) {
+        const pageInstance = mixinType === 'page' ? this : getCurrentPageInstance()
+        if (pageInstance) {
+          this.$watch(() => pageInstance.mpxPageStatus, status => {
+            if (!status) return
+            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
-        })
+          }, {
+            sync: true
+          })
+        }
       }
     }
   })

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

@@ -20,7 +20,7 @@ export default function proxyEventMixin () {
         setByPath(this, expr, value)
       },
       getOpenerEventChannel () {
-        const router = global.__mpxRouter
+        const router = this.$root.$options && this.$root.$options.router
         const eventChannel = router && router.__mpxAction && router.__mpxAction.eventChannel
         return eventChannel
       }

package/src/platform/createApp.js

@@ -1,7 +1,7 @@
 import transferOptions from '../core/transferOptions'
 import mergeOptions from '../core/mergeOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp } from '@mpxjs/utils'
+import { makeMap, spreadProp, isBrowser } from '@mpxjs/utils'
 import * as webLifecycle from '../platform/patch/web/lifecycle'
 import Mpx from '../index'
 
@@ -35,7 +35,7 @@ export default function createApp (option, config = {}) {
       created () {
         Object.assign(this, Mpx.prototype)
         Object.assign(this, appData)
-        const current = (global.__mpxRouter && global.__mpxRouter.currentRoute) || {}
+        const current = this.$root.$options?.router?.currentRoute || {}
         const options = {
           path: current.path && current.path.replace(/^\//, ''),
           query: current.query,
@@ -49,19 +49,24 @@ export default function createApp (option, config = {}) {
           hide: [],
           error: []
         }
-        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))
+        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))
+          }
         }
       }
     })
   } else {
+    if (option.onAppInit) {
+      option.onAppInit()
+    }
     builtInMixins.push({
       onLaunch () {
         Object.assign(this, Mpx.prototype)
@@ -77,6 +82,10 @@ export default function createApp (option, config = {}) {
     global.__mpxOptionsMap = global.__mpxOptionsMap || {}
     global.__mpxOptionsMap[global.currentModuleId] = defaultOptions
     global.getApp = function () {
+      if (!isBrowser) {
+        console.error('[Mpx runtime error]: Dangerous API! global.getApp method is running in non browser environments')
+        return
+      }
       return appData
     }
   } else {

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

@@ -3,7 +3,7 @@ import mergeOptions from '../../../core/mergeOptions'
 import { diffAndCloneA, hasOwn } from '@mpxjs/utils'
 import { getCurrentInstance as getCurrentVueInstance } from '../../export/index'
 import MpxProxy, { setCurrentInstance, unsetCurrentInstance } from '../../../core/proxy'
-import { BEFORECREATE, BEFOREUPDATE, UPDATED, BEFOREUNMOUNT, UNMOUNTED } from '../../../core/innerLifecycle'
+import { BEFORECREATE, BEFOREUPDATE, UPDATED, BEFOREUNMOUNT, UNMOUNTED, SERVERPREFETCH } from '../../../core/innerLifecycle'
 
 function filterOptions (options) {
   const newOptions = {}
@@ -79,6 +79,9 @@ export function getDefaultOptions (type, { rawOptions = {} }) {
     },
     destroyed () {
       if (this.__mpxProxy) this.__mpxProxy.callHook(UNMOUNTED)
+    },
+    serverPrefetch () {
+      if (this.__mpxProxy) this.__mpxProxy.callHook(SERVERPREFETCH)
     }
   }]
   // 为了在builtMixin中可以使用某些rootMixin实现的特性（如数据响应等），此处builtInMixin在rootMixin之后执行，但是当builtInMixin使用存在对应内建生命周期的目标平台声明周期写法时，可能会出现用户生命周期比builtInMixin中的生命周期先执行的情况，为了避免这种情况发生，builtInMixin应该尽可能使用内建生命周期来编写

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

@@ -38,7 +38,9 @@ const APP_HOOKS = [
   'onError',
   'onPageNotFound',
   'onUnhandledRejection',
-  'onThemeChange'
+  'onThemeChange',
+  'onSSRAppCreated',
+  'onAppInit'
 ]
 
 export const LIFECYCLE = {

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

@@ -14,7 +14,8 @@ const APP_HOOKS = [
   'onError',
   'onPageNotFound',
   'onUnhandledRejection',
-  'onThemeChange'
+  'onThemeChange',
+  'onAppInit'
 ]
 
 const PAGE_HOOKS = [