@mpxjs/core 2.7.52 → 2.8.0-beta.2

package/src/core/transferOptions.js

@@ -1,8 +1,7 @@
 import { mergeInjectedMixins } from './injectMixins'
 import mergeOptions from './mergeOptions'
 import { getConvertMode } from '../convertor/getConvertMode'
-import { findItem } from '../helper/utils'
-import { warn } from '../helper/log'
+import { warn, findItem } from '@mpxjs/utils'
 
 export default function transferOptions (options, type) {
   let currentInject
@@ -23,6 +22,10 @@ export default function transferOptions (options, type) {
     // 编译option注入,优先微信中的单独配置
     options.options = Object.assign({}, currentInject.injectOptions, options.options)
   }
+  if (currentInject && currentInject.pageEvents) {
+    options.mixins = options.mixins || []
+    options.mixins.unshift(currentInject.pageEvents)
+  }
   // 转换mode
   options.mpxConvertMode = options.mpxConvertMode || getConvertMode(global.currentSrcMode)
   const rawOptions = mergeOptions(options, type)

package/src/helper/const.js

@@ -0,0 +1,10 @@
+export const RefKey = '__composition_api_ref_key__'
+export const ObKey = '__ob__'
+
+export const PausedState = {
+  paused: 0,
+  dirty: 1,
+  resumed: 2
+}
+
+export const DefaultLocale = 'zh-CN'

package/src/index.js

@@ -1,44 +1,62 @@
-import * as platform from './platform'
-import createStore, {
-  createStoreWithThis,
-  createStateWithThis,
-  createGettersWithThis,
-  createMutationsWithThis,
-  createActionsWithThis
-} from './core/createStore'
-import { injectMixins } from './core/injectMixins'
-import { extend, diffAndCloneA, makeMap, merge, hasOwn } from './helper/utils'
-import { getMixin } from './core/mergeOptions'
-import { error } from './helper/log'
 import Vue from './vue'
-import { observe, set, del } from './observer/index'
-import { watch as watchWithVm } from './observer/watch'
-import implement from './core/implement'
+import { error, diffAndCloneA, hasOwn, makeMap } from '@mpxjs/utils'
+import { APIs, InstanceAPIs } from './platform/export/api'
 
-export function createApp (config, ...rest) {
-  const mpx = new EXPORT_MPX()
-  platform.createApp(Object.assign({ proto: mpx.proto }, config), ...rest)
-}
+import { createI18n } from './platform/builtInMixins/i18nMixin'
 
-export function createPage (config, ...rest) {
-  const mpx = new EXPORT_MPX()
-  platform.createPage(Object.assign({ proto: mpx.proto }, config), ...rest)
-}
+export * from './platform/export/index'
 
-export function createComponent (config, ...rest) {
-  const mpx = new EXPORT_MPX()
-  platform.createComponent(Object.assign({ proto: mpx.proto }, config), ...rest)
-}
+export * from '@mpxjs/store'
+
+export { implement } from './core/implement'
 
 export {
-  createStore,
-  createStoreWithThis,
-  createStateWithThis,
-  createGettersWithThis,
-  createMutationsWithThis,
-  createActionsWithThis,
-  getMixin
-}
+  createApp,
+  createPage,
+  createComponent
+} from './platform/index'
+
+export {
+  nextTick
+} from './observer/scheduler'
+
+export {
+  BEFORECREATE,
+  CREATED,
+  BEFOREMOUNT,
+  MOUNTED,
+  BEFOREUPDATE,
+  UPDATED,
+  BEFOREUNMOUNT,
+  UNMOUNTED,
+  ONLOAD,
+  ONSHOW,
+  ONHIDE,
+  ONRESIZE
+} from './core/innerLifecycle'
+
+export {
+  onBeforeMount,
+  onMounted,
+  onBeforeUpdate,
+  onUpdated,
+  onBeforeUnmount,
+  onUnmounted,
+  onLoad,
+  onShow,
+  onHide,
+  onResize,
+  onPullDownRefresh,
+  onReachBottom,
+  onShareAppMessage,
+  onShareTimeline,
+  onAddToFavorites,
+  onPageScroll,
+  onTabItemTap,
+  onSaveExitState
+} from './core/proxy'
+
+export { getMixin } from './core/mergeOptions'
 
 export function toPureObject (obj) {
   return diffAndCloneA(obj).clone
@@ -73,151 +91,59 @@ function use (plugin, options = {}) {
   }
 
   const args = [options]
-  const proxyMPX = factory()
-  const rawProps = Object.getOwnPropertyNames(proxyMPX)
-  const rawPrototypeProps = Object.getOwnPropertyNames(proxyMPX.prototype)
-  args.unshift(proxyMPX)
+  const proxyMpx = factory()
+  const rawProps = Object.getOwnPropertyNames(proxyMpx)
+  const rawPrototypeProps = Object.getOwnPropertyNames(proxyMpx.prototype)
+  args.unshift(proxyMpx)
   // 传入真正的mpx对象供插件访问
-  args.push(EXPORT_MPX)
+  args.push(Mpx)
   if (typeof plugin.install === 'function') {
     plugin.install.apply(plugin, args)
   } else if (typeof plugin === 'function') {
     plugin.apply(null, args)
   }
-  extendProps(EXPORT_MPX, proxyMPX, rawProps, options)
-  extendProps(EXPORT_MPX.prototype, proxyMPX.prototype, rawPrototypeProps, options)
+  extendProps(Mpx, proxyMpx, rawProps, options)
+  extendProps(Mpx.prototype, proxyMpx.prototype, rawPrototypeProps, options)
   installedPlugins.push(plugin)
   return this
 }
 
-let APIs = {}
-
-// 实例属性
-let InstanceAPIs = {}
-
-let observable
-let watch
-
-if (__mpx_mode__ === 'web') {
-  const vm = new Vue()
-  observable = Vue.observable.bind(Vue)
-  watch = vm.$watch.bind(vm)
-  const set = Vue.set.bind(Vue)
-  const del = Vue.delete.bind(Vue)
-  APIs = {
-    createApp,
-    createPage,
-    createComponent,
-    createStore,
-    createStoreWithThis,
-    mixin: injectMixins,
-    injectMixins,
-    toPureObject,
-    observable,
-    watch,
-    use,
-    set,
-    delete: del,
-    getMixin,
-    implement
-  }
-} else {
-  observable = function (obj) {
-    observe(obj)
-    return obj
-  }
-
-  const vm = {}
-  watch = function (expOrFn, cb, options) {
-    return watchWithVm(vm, expOrFn, cb, options)
-  }
-
-  APIs = {
-    createApp,
-    createPage,
-    createComponent,
-    createStore,
-    createStoreWithThis,
-    mixin: injectMixins,
-    injectMixins,
-    toPureObject,
-    observable,
-    watch,
-    use,
-    set,
-    delete: del,
-    getMixin,
-    implement
-  }
-
-  InstanceAPIs = {
-    $set: set,
-    $delete: del
-  }
-}
-
-export { watch, observable }
+APIs.use = use
 
 function factory () {
   // 作为原型挂载属性的中间层
-  function MPX () {
-    this.proto = extend({}, this)
+  function Mpx () {
   }
 
-  Object.assign(MPX, APIs)
-  Object.assign(MPX.prototype, InstanceAPIs)
+  Object.assign(Mpx, APIs)
+  Object.assign(Mpx.prototype, InstanceAPIs)
   // 输出web时在mpx上挂载Vue对象
   if (__mpx_mode__ === 'web') {
-    MPX.__vue = Vue
+    Mpx.__vue = Vue
   }
-  return MPX
+  return Mpx
 }
 
-const EXPORT_MPX = factory()
+const Mpx = factory()
 
-EXPORT_MPX.config = {
+Mpx.config = {
   useStrictDiff: false,
   ignoreWarning: false,
   ignoreProxyWhiteList: ['id', 'dataset', 'data'],
   observeClassInstance: false,
-  hookErrorHandler: null,
+  errorHandler: null,
   proxyEventHandler: null,
   setDataHandler: null,
-  forceRunWatcherSync: false,
+  forceFlushSync: false,
   webRouteConfig: {}
 }
 
-global.__mpx = EXPORT_MPX
+global.__mpx = Mpx
 
 if (__mpx_mode__ !== 'web') {
   if (global.i18n) {
-    observe(global.i18n)
-    // 挂载翻译方法
-    if (global.i18nMethods) {
-      Object.keys(global.i18nMethods).forEach((methodName) => {
-        if (/^__/.test(methodName)) return
-        global.i18n[methodName] = (...args) => {
-          // tap i18n.version
-          args.unshift((global.i18n.version, global.i18n.locale))
-          return global.i18nMethods[methodName].apply(this, args)
-        }
-      })
-
-      if (global.i18nMethods.__getMessages) {
-        const messages = global.i18nMethods.__getMessages()
-        global.i18n.mergeMessages = (newMessages) => {
-          merge(messages, newMessages)
-          global.i18n.version++
-        }
-        global.i18n.mergeLocaleMessage = (locale, message) => {
-          messages[locale] = messages[locale] || {}
-          merge(messages[locale], message)
-          global.i18n.version++
-        }
-      }
-    }
-    EXPORT_MPX.i18n = global.i18n
+    Mpx.i18n = createI18n(global.i18n)
   }
 }
 
-export default EXPORT_MPX
+export default Mpx

package/src/observer/array.js

@@ -1,16 +1,10 @@
-/*
- * not type checking this file because flow doesn't play well with
- * dynamically accessing methods on Array prototype
- */
-
-import { def } from '../helper/utils'
+import { getObserver } from './reactive'
+import { def } from '@mpxjs/utils'
 
 const arrayProto = Array.prototype
+
 export const arrayMethods = Object.create(arrayProto)
 
-/**
- * Intercept mutating methods and emit events
- */
 ;[
   'push',
   'pop',
@@ -19,13 +13,13 @@ export const arrayMethods = Object.create(arrayProto)
   'splice',
   'sort',
   'reverse'
-]
-  .forEach(function (method) {
+].forEach(function (method) {
   // cache original method
-    const original = arrayProto[method]
-    def(arrayMethods, method, function mutator (...args) {
-      const result = original.apply(this, args)
-      const ob = this.__ob__
+  const original = arrayProto[method]
+  def(arrayMethods, method, function mutator (...args) {
+    const result = original.apply(this, args)
+    const ob = getObserver(this)
+    if (ob) {
       let inserted
       switch (method) {
         case 'push':
@@ -39,6 +33,7 @@ export const arrayMethods = Object.create(arrayProto)
       if (inserted) ob.observeArray(inserted)
       // notify change
       ob.dep.notify()
-      return result
-    })
+    }
+    return result
   })
+})

package/src/observer/computed.js

@@ -1,66 +1,37 @@
-import Watcher from './watcher'
-import { noop } from '../helper/utils'
-import { error } from '../helper/log'
+import { isFunction, noop } from '@mpxjs/utils'
 import Dep from './dep'
+import { createRef } from './ref'
+import { ReactiveEffect } from './effect'
 
-const sharedPropertyDefinition = {
-  enumerable: true,
-  configurable: true,
-  get: noop,
-  set: noop
-}
-
-export function initComputed (vm, target, computed) {
-  const watchers = vm._computedWatchers = {}
-  for (const key in computed) {
-    const userDef = computed[key]
-    const getter = typeof userDef === 'function' ? userDef : userDef.get
-    watchers[key] = new Watcher(vm,
-      getter || noop,
-      noop,
-      { lazy: true }
-    )
-    if (target) {
-      if (!(key in target)) {
-        defineComputed(vm, target, key, userDef)
-      } else {
-        error(`The computed key [${key}] is duplicated with data/props, please check.`, vm.options.mpxFileResource)
-      }
-    }
-  }
-}
-
-function defineComputed (
-  vm,
-  target,
-  key,
-  userDef
-) {
-  if (typeof userDef === 'function') {
-    sharedPropertyDefinition.get = createComputedGetter(vm, key)
-    sharedPropertyDefinition.set = noop
+export function computed (getterOrOptions) {
+  let getter, setter
+  if (isFunction(getterOrOptions)) {
+    getter = getterOrOptions
+    setter = noop
   } else {
-    sharedPropertyDefinition.get = userDef.get
-      ? createComputedGetter(vm, key)
-      : noop
-    sharedPropertyDefinition.set = userDef.set
-      ? userDef.set.bind(vm.target)
-      : noop
+    getter = getterOrOptions.get
+    setter = getterOrOptions.set
   }
-  Object.defineProperty(target, key, sharedPropertyDefinition)
-}
+  // 复用createRef创建computedRef，使用闭包变量存储dirty/value/effect
+  let dirty = true
+  let value
+  const effect = new ReactiveEffect(getter, () => {
+    dirty = true
+  })
 
-function createComputedGetter (vm, key) {
-  return () => {
-    const watcher = vm._computedWatchers && vm._computedWatchers[key]
-    if (watcher) {
-      if (watcher.dirty) {
-        watcher.evaluate()
+  return createRef({
+    get: () => {
+      if (dirty) {
+        value = effect.run()
+        dirty = false
       }
       if (Dep.target) {
-        watcher.depend()
+        effect.depend()
       }
-      return watcher.value
+      return value
+    },
+    set: (val) => {
+      setter(val)
     }
-  }
+  }, effect)
 }

package/src/observer/dep.js

@@ -1,4 +1,4 @@
-import { remove } from '../helper/utils'
+import { remove } from '@mpxjs/utils'
 
 let uid = 0
 

package/src/observer/effect.js

@@ -0,0 +1,113 @@
+import Dep, { pushTarget, popTarget } from './dep'
+import { recordEffectScope } from './effectScope'
+import { PausedState } from '../helper/const'
+
+let uid = 0
+
+export class ReactiveEffect {
+  active = true
+  deps = []
+  newDeps = []
+  depIds = new Set()
+  newDepIds = new Set()
+
+  constructor (
+    fn,
+    scheduler,
+    scope
+  ) {
+    this.id = ++uid
+    this.fn = fn
+    this.scheduler = scheduler
+    this.pausedState = PausedState.resumed
+    recordEffectScope(this, scope)
+  }
+
+  // run fn and return value
+  run () {
+    if (!this.active) return this.fn()
+    pushTarget(this)
+    try {
+      return this.fn()
+    } finally {
+      popTarget()
+      this.deferStop ? this.stop() : this.cleanupDeps()
+    }
+  }
+
+  // add dependency to this
+  addDep (dep) {
+    const id = dep.id
+    if (!this.newDepIds.has(id)) {
+      this.newDepIds.add(id)
+      this.newDeps.push(dep)
+      if (!this.depIds.has(id)) {
+        dep.addSub(this)
+      }
+    }
+  }
+
+  // Clean up for dependency collection.
+  cleanupDeps () {
+    let i = this.deps.length
+    while (i--) {
+      const dep = this.deps[i]
+      if (!this.newDepIds.has(dep.id)) {
+        dep.removeSub(this)
+      }
+    }
+    let tmp = this.depIds
+    this.depIds = this.newDepIds
+    this.newDepIds = tmp
+    this.newDepIds.clear()
+    tmp = this.deps
+    this.deps = this.newDeps
+    this.newDeps = tmp
+    this.newDeps.length = 0
+  }
+
+  // same as trigger
+  update () {
+    // avoid dead cycle
+    if (Dep.target === this) return
+    if (this.pausedState !== PausedState.resumed) {
+      this.pausedState = PausedState.dirty
+    } else {
+      this.scheduler ? this.scheduler() : this.run()
+    }
+  }
+
+  // pass through deps for computed
+  depend () {
+    let i = this.deps.length
+    while (i--) {
+      this.deps[i].depend()
+    }
+  }
+
+  // Remove self from all dependencies' subscriber list.
+  stop () {
+    if (Dep.target === this) {
+      this.deferStop = true
+    } else if (this.active) {
+      let i = this.deps.length
+      while (i--) {
+        this.deps[i].removeSub(this)
+      }
+      typeof this.onStop === 'function' && this.onStop()
+      this.active = false
+    }
+  }
+
+  pause () {
+    this.pausedState = PausedState.paused
+  }
+
+  resume () {
+    const lastPausedState = this.pausedState
+    this.pausedState = PausedState.resumed
+    if (lastPausedState === PausedState.dirty) {
+      this.scheduler ? this.scheduler() : this.run()
+    }
+  }
+}

package/src/observer/effectScope.js

@@ -0,0 +1,109 @@
+let activeEffectScope
+
+class EffectScope {
+  active = true
+  effects = []
+  cleanups = []
+
+  constructor (detached) {
+    if (!detached && activeEffectScope) {
+      this.parent = activeEffectScope
+      this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1
+    }
+  }
+
+  run (fn) {
+    if (this.active) {
+      const currentEffectScope = activeEffectScope
+      try {
+        activeEffectScope = this
+        return fn()
+      } finally {
+        activeEffectScope = currentEffectScope
+      }
+    }
+  }
+
+  on () {
+    activeEffectScope = this
+  }
+
+  off () {
+    activeEffectScope = this.parent
+  }
+
+  stop (fromParent) {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].stop()
+      }
+      for (i = 0, l = this.cleanups.length; i < l; i++) {
+        this.cleanups[i]()
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].stop(true)
+        }
+      }
+      // nested scope, dereference from parent to avoid memory leaks
+      if (this.parent && !fromParent) {
+        // optimized O(1) removal
+        const last = this.parent.scopes.pop()
+        if (last && last !== this) {
+          this.parent.scopes[this.index] = last
+          last.index = this.index
+        }
+      }
+      this.active = false
+    }
+  }
+
+  pause () {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].pause()
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause()
+        }
+      }
+    }
+  }
+
+  resume () {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].resume()
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].resume()
+        }
+      }
+    }
+  }
+}
+
+export function effectScope (detached) {
+  return new EffectScope(detached)
+}
+
+export function recordEffectScope (effect, scope = activeEffectScope) {
+  if (scope && scope.active) {
+    scope.effects.push(effect)
+  }
+}
+
+export function getCurrentScope () {
+  return activeEffectScope
+}
+
+export function onScopeDispose (fn) {
+  if (activeEffectScope) {
+    activeEffectScope.cleanups.push(fn)
+  }
+}