@mpxjs/core 2.7.52 → 2.8.0-beta.2

package/src/observer/watch.js

@@ -1,53 +1,177 @@
-import { isObject, noop } from '../helper/utils'
-import { error } from '../helper/log'
-import Watcher from './watcher'
-import { queueWatcher } from './scheduler'
-
-export function watch (vm, expOrFn, cb, options) {
-  if (isObject(cb)) {
-    options = cb
-    cb = cb.handler
-  }
-  if (typeof cb === 'string') {
-    if (vm.target && vm.target[cb]) {
-      cb = vm.target[cb]
+import { ReactiveEffect } from './effect'
+import { isRef } from './ref'
+import { isReactive } from './reactive'
+import { queuePreFlushCb, queuePostFlushCb } from './scheduler'
+import { currentInstance } from '../core/proxy'
+import {
+  noop,
+  isFunction,
+  isObject,
+  isPlainObject,
+  warn,
+  isArray,
+  remove,
+  callWithErrorHandling
+} from '@mpxjs/utils'
+
+export function watchEffect (effect, options) {
+  return watch(effect, null, options)
+}
+
+export function watchPostEffect (effect, options) {
+  return watch(effect, null, { ...options, flush: 'post' })
+}
+
+export function watchSyncEffect (effect, options) {
+  return watch(effect, null, { ...options, flush: 'sync' })
+}
+
+const warnInvalidSource = (s) => {
+  warn(`Invalid watch source: ${s}\nA watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`)
+}
+
+const shouldTrigger = (value, oldValue) => !Object.is(value, oldValue) || isObject(value)
+
+const processWatchOptionsCompat = (options) => {
+  const newOptions = { ...options }
+  if (options.sync) {
+    newOptions.flush = 'sync'
+  }
+  return newOptions
+}
+
+export function watch (source, cb, options = {}) {
+  let { immediate, deep, flush, immediateAsync } = processWatchOptionsCompat(options)
+  const instance = currentInstance
+  let getter
+  let isMultiSource = false
+  if (isRef(source)) {
+    getter = () => source.value
+  } else if (isReactive(source)) {
+    getter = () => source
+    deep = true
+  } else if (isArray(source)) {
+    isMultiSource = true
+    getter = () =>
+      source.map(s => {
+        if (isRef(s)) {
+          return s.value
+        } else if (isReactive(s)) {
+          return traverse(s)
+        } else if (isFunction(s)) {
+          return callWithErrorHandling(s, instance, 'watch getter')
+        } else {
+          warnInvalidSource(s)
+          return s
+        }
+      })
+  } else if (isFunction(source)) {
+    if (cb) {
+      // getter with cb
+      getter = () => callWithErrorHandling(source, instance, 'watch getter')
     } else {
-      cb = noop
+      // no cb -> simple effect
+      getter = () => {
+        if (instance && instance.isUnmounted()) {
+          return
+        }
+        if (cleanup) {
+          cleanup()
+        }
+        return callWithErrorHandling(source, instance, 'watch callback', [onCleanup])
+      }
     }
+  } else {
+    getter = noop
+    warnInvalidSource(source)
   }
 
-  cb = cb || noop
+  if (cb && deep) {
+    const baseGetter = getter
+    getter = () => traverse(baseGetter())
+  }
 
-  options = options || {}
-  options.user = true
+  let cleanup
+  const onCleanup = (fn) => {
+    cleanup = effect.onStop = () => callWithErrorHandling(fn, instance, 'watch cleanup')
+  }
 
-  if (options.once) {
-    const _cb = cb
-    const onceCb = typeof options.once === 'function'
-      ? options.once
-      : function () { return true }
-    cb = function (...args) {
-      const res = onceCb.apply(this, args)
-      if (res) watcher.teardown()
-      _cb.apply(this, args)
+  let oldValue = isMultiSource ? [] : undefined
+  const job = () => {
+    if (!effect.active) return
+    if (cb) {
+      const newValue = effect.run()
+      if (
+        deep ||
+        (isMultiSource
+          ? newValue.some((v, i) => shouldTrigger(v, oldValue[i]))
+          : shouldTrigger(newValue, oldValue))
+      ) {
+        // cleanup before running cb again
+        if (cleanup) {
+          cleanup()
+        }
+        callWithErrorHandling(cb, instance, 'watch callback', [newValue, oldValue, onCleanup])
+        oldValue = newValue
+      }
+    } else {
+      // watchEffect
+      effect.run()
     }
   }
 
-  const watcher = new Watcher(vm, expOrFn, cb, options)
-  if (!vm._namedWatchers) vm._namedWatchers = {}
-  const name = options.name
-  if (name) {
-    if (vm._namedWatchers[name]) error(`已存在name=${name} 的 watcher，当存在多个 name 相同 watcher 时仅保留当次创建的 watcher，如需都保留请使用不同的 name！`)
-    vm._namedWatchers[name] = watcher
+  let scheduler
+  if (flush === 'sync') {
+    // the scheduler function gets called directly
+    scheduler = job
+  } else if (flush === 'post') {
+    scheduler = () => queuePostFlushCb(job)
+  } else {
+    // default: 'pre'
+    scheduler = () => queuePreFlushCb(job)
   }
-  if (options.immediate) {
-    cb.call(vm.target, watcher.value)
-  } else if (options.immediateAsync) {
-    watcher.immediateAsync = true
-    queueWatcher(watcher)
+
+  job.allowRecurse = !!cb
+
+  const effect = new ReactiveEffect(getter, scheduler)
+
+  if (cb) {
+    if (immediate) {
+      job()
+    } else if (immediateAsync) {
+      queuePreFlushCb(job)
+    } else {
+      oldValue = effect.run()
+    }
+  } else if (flush === 'post') {
+    queuePostFlushCb(effect.run.bind(effect))
+  } else {
+    effect.run()
   }
 
-  return function unwatchFn () {
-    watcher.teardown()
+  return () => {
+    effect.stop()
+    if (instance && instance.scope) {
+      remove(instance.scope.effects, effect)
+    }
+  }
+}
+
+export function traverse (value, seen) {
+  if (!isObject(value)) return value
+  seen = seen || new Set()
+  if (seen.has(value)) return value
+  seen.add(value)
+  if (isRef(value)) {
+    traverse(value.value, seen)
+  } else if (isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      traverse(value[i], seen)
+    }
+  } else if (isPlainObject(value)) {
+    for (const key in value) {
+      traverse(value[key], seen)
+    }
   }
+  return value
 }

package/src/platform/builtInMixins/i18nMixin.js

@@ -1,42 +1,249 @@
 import { BEFORECREATE } from '../../core/innerLifecycle'
-import { observe } from '../../observer/index'
+import { DefaultLocale } from '../../helper/const'
+import { ref, shallowRef, triggerRef } from '../../observer/ref'
+import { watch } from '../../observer/watch'
+import { effectScope } from '../../observer/effectScope'
+import { getCurrentInstance, onUnmounted } from '../../core/proxy'
+import {
+  error,
+  isPlainObject,
+  isNumber,
+  mergeObj,
+  isEmptyObject
+} from '@mpxjs/utils'
+
+let i18n = null
+
+let i18nMethods = null
+
+export function createI18n (options) {
+  if (!options) {
+    error('CreateI18n() can not be called with null or undefined.')
+  }
+  i18nMethods = options.methods
+  const [globalScope, _global] = createGlobal(options)
+  const __instances = new WeakMap()
+  i18n = {
+    get global () {
+      return _global
+    },
+    get locale () {
+      return _global.locale.value || DefaultLocale
+    },
+    set locale (val) {
+      _global.locale.value = val
+    },
+    get fallbackLocale () {
+      return _global.fallbackLocale.value || DefaultLocale
+    },
+    set fallbackLocale (val) {
+      _global.fallbackLocale.value = val
+    },
+    get t () {
+      return _global.t
+    },
+    get tc () {
+      return _global.t
+    },
+    get te () {
+      return _global.te
+    },
+    get tm () {
+      return _global.tm
+    },
+    dispose () {
+      globalScope.stop()
+    },
+    __instances,
+    __getInstance (instance) {
+      return __instances.get(instance)
+    },
+    __setInstance (instance, composer) {
+      __instances.set(instance, composer)
+    },
+    __deleteInstance (instance) {
+      __instances.delete(instance)
+    }
+  }
+  return i18n
+}
+
+function createGlobal (options) {
+  const scope = effectScope()
+  const obj = scope.run(() => createComposer(options))
+  return [scope, obj]
+}
+
+let id = 0
+
+function createComposer (options) {
+  if (i18nMethods == null) {
+    error('CreateI18n() should be called before useI18n() calling.')
+    return
+  }
+  let { __root, inheritLocale = true, fallbackRoot = true } = options
+
+  const locale = ref(
+    __root && inheritLocale
+      ? __root.locale.value
+      : (options.locale || DefaultLocale)
+  )
+
+  const fallbackLocale = ref(
+    __root && inheritLocale
+      ? __root.fallbackLocale.value
+      : (options.fallbackLocale || DefaultLocale)
+  )
+
+  const messages = shallowRef(
+    isPlainObject(options.messages)
+      ? options.messages
+      : { [locale]: {} }
+  )
+
+  // t && tc
+  const t = (...args) => {
+    let ret
+    if (isNumber(args[1])) {
+      // Pluralization
+      ret = i18nMethods.tc(messages.value, locale.value, fallbackLocale.value, ...args)
+    } else {
+      ret = i18nMethods.t(messages.value, locale.value, fallbackLocale.value, ...args)
+    }
+    if (ret === args[0] && fallbackRoot && __root) {
+      ret = __root.t(...args)
+    }
+    return ret
+  }
+
+  // te
+  const te = (...args) => i18nMethods.te(messages.value, locale.value, fallbackLocale.value, ...args)
+
+  // tm
+  const tm = (...args) => i18nMethods.tm(messages.value, locale.value, fallbackLocale.value, ...args)
+
+  const getLocaleMessage = (locale) => messages.value[locale]
+
+  const setLocaleMessage = (locale, message) => {
+    messages.value[locale] = message
+    triggerRef(messages)
+  }
+
+  const mergeLocaleMessage = (locale, message) => {
+    messages.value[locale] = mergeObj(messages.value[locale] || {}, message)
+    triggerRef(messages)
+  }
+
+  if (__root) {
+    watch([__root.locale, __root.fallbackLocale], ([l, fl]) => {
+      if (inheritLocale) {
+        locale.value = l
+        fallbackLocale.value = fl
+      }
+    })
+  }
+
+  return {
+    id: id++,
+    locale,
+    fallbackLocale,
+    get messages () {
+      return messages
+    },
+    get isGlobal () {
+      return __root === undefined
+    },
+    get inheritLocale () {
+      return inheritLocale
+    },
+    set inheritLocale (val) {
+      inheritLocale = val
+      if (val && __root) {
+        locale.value = __root.locale.value
+        fallbackLocale.value = __root.fallbackLocale.value
+      }
+    },
+    get fallbackRoot () {
+      return fallbackRoot
+    },
+    set fallbackRoot (val) {
+      fallbackRoot = val
+    },
+    t,
+    te,
+    tm,
+    getLocaleMessage,
+    setLocaleMessage,
+    mergeLocaleMessage
+  }
+}
+
+function getScope (options) {
+  return isEmptyObject(options) ? 'global' : 'local'
+}
+
+function setupLifeCycle (instance) {
+  onUnmounted(() => {
+    i18n.__deleteInstance(instance)
+  }, instance)
+}
+
+export function useI18n (options) {
+  const instance = getCurrentInstance()
+  if (instance == null) {
+    error('UseI18n() must be called in setup top.')
+    return
+  }
+  const scope = getScope(options)
+  const global = i18n.global
+  if (scope === 'global') return global
+
+  let composer = i18n.__getInstance(instance)
+  if (composer == null) {
+    const composerOptions = Object.assign({}, options)
+    if (global) composerOptions.__root = global
+    composer = createComposer(composerOptions)
+    setupLifeCycle(instance)
+    i18n.__setInstance(instance, composer)
+  }
+  return composer
+}
 
 export default function i18nMixin () {
-  if (global.i18n) {
+  if (i18n) {
     return {
-      // 替换为dataFn注入，再每次组件创建时重新执行获取，处理reLaunch后无法拿到更新后语言的问题
-      data () {
-        return { mpxLocale: global.i18n.locale || 'zh-CN' }
+      computed: {
+        _l () {
+          return i18n.global.locale.value || DefaultLocale
+        },
+        _fl () {
+          return i18n.global.fallbackLocale.value || DefaultLocale
+        }
       },
       [BEFORECREATE] () {
-        this.$i18n = { locale: global.i18n.locale }
-        observe(this.$i18n)
-        this.$watch(() => {
-          return global.i18n.locale
-        }, (locale) => {
-          this.mpxLocale = this.$i18n.locale = locale
-        }, {
-          sync: true
-        })
+        // 挂载$i18n
+        this.$i18n = {
+          get locale () {
+            return i18n.global.locale.value || DefaultLocale
+          },
+          set locale (val) {
+            i18n.global.locale.value = val
+          },
+          get fallbackLocale () {
+            return i18n.global.fallbackLocale.value || DefaultLocale
+          },
+          set fallbackLocale (val) {
+            i18n.global.fallbackLocale.value = val
+          }
+        }
 
-        this.$watch(() => {
-          return this.$i18n.locale
-        }, (locale) => {
-          this.mpxLocale = locale
-        }, {
-          sync: true
+        // 挂载翻译方法，$t等注入方法只能使用global scope
+        Object.keys(i18nMethods).forEach((methodName) => {
+          this['$' + methodName] = (...args) => {
+            if (methodName === 'tc') methodName = 't'
+            return i18n.global[methodName](...args)
+          }
         })
-        // 挂载翻译方法
-        if (global.i18nMethods) {
-          Object.keys(global.i18nMethods).forEach((methodName) => {
-            if (/^__/.test(methodName)) return
-            this['$' + methodName] = (...args) => {
-              // tap i18n.version
-              args.unshift((global.i18n.version, this.mpxLocale))
-              return global.i18nMethods[methodName].apply(this, args)
-            }
-          })
-        }
       }
     }
   }

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

@@ -1,17 +1,16 @@
-import { error } from '../../helper/log'
+import { error } from '@mpxjs/utils'
 import MpxScroll from '../../helper/MpxScroll'
 import { getScrollTop } from '../../helper/MpxScroll/dom'
 
 let ms
 
-function refreshMs (vm) {
+function refreshMs () {
   if (ms) ms.destroy()
   try {
     global.__ms = ms = new MpxScroll()
     return true
   } catch (e) {
-    const location = vm.__mpxProxy && vm.__mpxProxy.options.mpxFileResource
-    error(`MpxScroll init error, please check.`, location, e)
+    error('MpxScroll init error, please check.', undefined, e)
   }
 }
 
@@ -44,7 +43,7 @@ export default function pageScrollMixin (mixinType) {
       this.__lastScrollY = 0
     },
     activated () {
-      if (!refreshMs(this)) {
+      if (!refreshMs()) {
         return
       }
 

package/src/platform/builtInMixins/pageStatusMixin.js

@@ -1,79 +1,101 @@
-import { CREATED } from '../../core/innerLifecycle'
+import { CREATED, ONLOAD, ONSHOW, ONHIDE, ONRESIZE } from '../../core/innerLifecycle'
 
 export default function pageStatusMixin (mixinType) {
-  // 只有tt和ali没有pageLifeTimes支持，需要框架实现，其余平台一律使用原生pageLifeTimes
-  // 由于业务上大量使用了pageShow进行初始化。。。下个版本再移除非必要的pageShow/Hide实现。。。
   if (mixinType === 'page') {
     const pageMixin = {
-      data: {
-        mpxPageStatus: 'show'
-      },
       onShow () {
-        this.mpxPageStatus = 'show'
+        this.__mpxProxy.callHook(ONSHOW)
       },
       onHide () {
-        this.mpxPageStatus = 'hide'
+        this.__mpxProxy.callHook(ONHIDE)
+      },
+      onResize (e) {
+        this.__mpxProxy.callHook(ONRESIZE, [e])
+      },
+      onLoad (query) {
+        this.__mpxProxy.callHook(ONLOAD, [query])
       }
     }
     if (__mpx_mode__ === 'ali') {
-      pageMixin.events = {
-        onResize (e) {
-          this.__resizeEvent = e
-          this.mpxPageStatus = 'resize'
+      let count = 0
+      const resolvedPromise = Promise.resolve()
+      Object.assign(pageMixin, {
+        data: {
+          mpxPageStatus: null
+        },
+        onShow () {
+          // 支付宝首次延时触发，确保同步组件的onShow能够执行
+          if (this.mpxPageStatus === null) {
+            resolvedPromise.then(() => {
+              this.mpxPageStatus = 'show'
+              this.__mpxProxy.callHook(ONSHOW)
+            })
+          } else {
+            this.mpxPageStatus = 'show'
+            this.__mpxProxy.callHook(ONSHOW)
+          }
+        },
+        onHide () {
+          this.mpxPageStatus = 'hide'
+          this.__mpxProxy.callHook(ONHIDE)
+        },
+        events: {
+          onResize (e) {
+            this.__resizeEvent = e
+            this.mpxPageStatus = `resize${count++}`
+            this.__mpxProxy.callHook(ONRESIZE, [e])
+          }
         }
-      }
-    }
-    if (__mpx_mode__ === 'tt') {
-      pageMixin.onResize = function (e) {
-        this.__resizeEvent = e
-        this.mpxPageStatus = 'resize'
-      }
+      })
+      delete pageMixin.onResize
     }
     return pageMixin
   } else {
-    return {
-      [CREATED] () {
-        const options = this.$rawOptions
-        const hasPageShow = options.pageShow || options.pageHide
-        const needPageLifetimes = options.pageLifetimes && __mpx_mode__ === 'ali'
-
-        if (hasPageShow || needPageLifetimes) {
-          let currentPage
-          if (__mpx_mode__ === 'ali') {
-            currentPage = this.$page
-          } else {
-            const pages = getCurrentPages()
-            if (typeof this.getPageId === 'function') {
-              const currentPageId = this.getPageId()
-              for (let page of pages) {
-                if (typeof page.getPageId === 'function' && currentPageId === page.getPageId()) {
-                  currentPage = page
-                  break
-                }
-              }
-            }
-            currentPage = currentPage || pages[pages.length - 1]
-          }
+    if (__mpx_mode__ === 'ali') {
+      return {
+        [CREATED] () {
+          const options = this.__mpxProxy.options
+          const hasHook = this.__mpxProxy.hasHook.bind(this.__mpxProxy)
+          const hasHooks = hasHook(ONSHOW) || hasHook(ONHIDE) || hasHook(ONRESIZE)
+          const pageLifetimes = options.pageLifetimes
+          const currentPage = this.$page
 
-          if (currentPage) {
+          if ((hasHooks || pageLifetimes) && currentPage) {
             this.$watch(() => currentPage.mpxPageStatus, (val) => {
-              if (val) {
-                if (val === 'show' && typeof options.pageShow === 'function') options.pageShow.call(this)
-                if (val === 'hide' && typeof options.pageHide === 'function') options.pageHide.call(this)
-                if (needPageLifetimes) {
-                  const pageLifetimes = options.pageLifetimes
-                  if (val === 'show' && typeof pageLifetimes.show === 'function') pageLifetimes.show.call(this)
-                  if (val === 'hide' && typeof pageLifetimes.hide === 'function') pageLifetimes.hide.call(this)
-                  if (val === 'resize' && typeof pageLifetimes.resize === 'function') pageLifetimes.resize.call(this, currentPage.__resizeEvent)
-                }
+              if (!val) return
+              if (val === 'show') {
+                this.__mpxProxy.callHook(ONSHOW)
+                return pageLifetimes?.show?.call(this)
+              }
+              if (val === 'hide') {
+                this.__mpxProxy.callHook(ONHIDE)
+                return pageLifetimes?.hide?.call(this)
+              }
+              if (/^resize/.test(val)) {
+                const e = currentPage.__resizeEvent
+                this.__mpxProxy.callHook(ONRESIZE, [e])
+                return pageLifetimes?.resize?.call(this, e)
               }
             }, {
-              sync: true,
-              immediate: true
+              sync: true
             })
           }
         }
       }
+    } else {
+      return {
+        pageLifetimes: {
+          show () {
+            this.__mpxProxy.callHook(ONSHOW)
+          },
+          hide () {
+            this.__mpxProxy.callHook(ONHIDE)
+          },
+          resize (e) {
+            this.__mpxProxy.callHook(ONRESIZE, [e])
+          }
+        }
+      }
     }
   }
 }