@mpxjs/core 2.7.52 → 2.8.0-beta.2

package/src/observer/{index.js → reactive.js}

@@ -1,20 +1,25 @@
 import Dep from './dep'
 import { arrayMethods } from './array'
+import { ObKey } from '../helper/const'
+import { isRef } from './ref'
+import {
+  hasOwn,
+  isObject,
+  isPlainObject,
+  hasProto,
+  def,
+  isValidArrayIndex,
+  arrayProtoAugment
+} from '@mpxjs/utils'
 
-import { def, isPlainObject, isObject, hasProto, hasOwn, isValidArrayIndex, arrayProtoAugment } from '../helper/utils'
+const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
 
-import { warn } from '../helper/log'
+const rawSet = new WeakSet()
 
-const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
+let isForceTrigger = false
 
-/**
- * By default, when a reactive property is set, the new value is
- * also converted to become reactive. However when passing down props,
- * we don't want to force conversion because the value may be a nested value
- * under a frozen data structure. Converting it would defeat the optimization.
- */
-export const observerState = {
-  shouldConvert: true
+export function setForceTrigger (val) {
+  isForceTrigger = val
 }
 
 /**
@@ -24,19 +29,19 @@ export const observerState = {
  * collect dependencies and dispatches updates.
  */
 export class Observer {
-  constructor (value) {
+  dep = new Dep()
+
+  constructor (value, shallow) {
     this.value = value
-    this.dep = new Dep()
-    this.vmCount = 0
-    def(value, '__ob__', this)
+    def(value, ObKey, this)
     if (Array.isArray(value)) {
       const augment = hasProto && arrayProtoAugment
         ? protoAugment
         : copyAugment
       augment(value, arrayMethods, arrayKeys)
-      this.observeArray(value)
+      !shallow && this.observeArray(value)
     } else {
-      this.walk(value)
+      this.walk(value, shallow)
     }
   }
 
@@ -45,25 +50,22 @@ export class Observer {
    * getter/setters. This method should only be called when
    * value type is Object.
    */
-  walk (obj) {
-    const keys = Object.keys(obj)
-    for (let i = 0; i < keys.length; i++) {
-      defineReactive(obj, keys[i], obj[keys[i]])
-    }
+  walk (obj, shallow) {
+    Object.keys(obj).forEach((key) => {
+      defineReactive(obj, key, obj[key], shallow)
+    })
   }
 
   /**
    * Observe a list of Array items.
    */
-  observeArray (items) {
-    for (let i = 0, l = items.length; i < l; i++) {
-      observe(items[i])
+  observeArray (arr) {
+    for (let i = 0, l = arr.length; i < l; i++) {
+      observe(arr[i])
     }
   }
 }
 
-// helpers
-
 /**
  * Augment an target Object or Array by intercepting
  * the prototype chain using __proto__
@@ -71,7 +73,6 @@ export class Observer {
 function protoAugment (target, src, keys) {
   /* eslint-disable no-proto */
   target.__proto__ = src
-  /* eslint-enable no-proto */
 }
 
 /**
@@ -92,22 +93,13 @@ function copyAugment (target, src, keys) {
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
-export function observe (value, asRootData) {
-  if (!isObject(value)) {
+function observe (value, shallow) {
+  if (!isObject(value) || rawSet.has(value)) {
     return
   }
-  let ob
-  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
-    ob = value.__ob__
-  } else if (
-    observerState.shouldConvert &&
-    (Array.isArray(value) || isPlainObject(value)) &&
-    Object.isExtensible(value)
-  ) {
-    ob = new Observer(value)
-  }
-  if (asRootData && ob) {
-    ob.vmCount++
+  let ob = getObserver(value)
+  if (!ob && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value)) {
+    ob = new Observer(value, shallow)
   }
   return ob
 }
@@ -115,13 +107,7 @@ export function observe (value, asRootData) {
 /**
  * Define a reactive property on an Object.
  */
-export function defineReactive (
-  obj,
-  key,
-  val,
-  customSetter,
-  shallow
-) {
+export function defineReactive (obj, key, val, shallow) {
   const dep = new Dep()
 
   const property = Object.getOwnPropertyDescriptor(obj, key)
@@ -148,17 +134,17 @@ export function defineReactive (
           }
         }
       }
-      return value
+      return !shallow && isRef(value) ? value.value : value
     },
     set: function reactiveSetter (newVal) {
       const value = getter ? getter.call(obj) : val
       /* eslint-disable no-self-compare */
-      if (newVal === value || (newVal !== newVal && value !== value)) {
+      if (!(shallow && isForceTrigger) && (newVal === value || (newVal !== newVal && value !== value))) {
         return
       }
-      /* eslint-enable no-self-compare */
-      customSetter && customSetter()
-      if (setter) {
+      if (!shallow && isRef(value) && !isRef(newVal)) {
+        value.value = newVal
+      } else if (setter) {
         setter.call(obj, newVal)
       } else {
         val = newVal
@@ -184,11 +170,7 @@ export function set (target, key, val) {
     target[key] = val
     return val
   }
-  const ob = target.__ob__
-  if (ob && ob.vmCount) {
-    warn('Avoid adding reactive properties to the root data at runtime, declare it upfront in the data option!')
-    return val
-  }
+  const ob = getObserver(target)
   if (!ob) {
     target[key] = val
     return val
@@ -206,11 +188,7 @@ export function del (target, key) {
     target.splice(key, 1)
     return
   }
-  const ob = target.__ob__
-  if (ob && ob.vmCount) {
-    warn('Avoid deleting properties on the root data, just set it to null!')
-    return
-  }
+  const ob = getObserver(target)
   if (!hasOwn(target, key)) {
     return
   }
@@ -225,12 +203,38 @@ export function del (target, key) {
  * Collect dependencies on array elements when the array is touched, since
  * we cannot intercept array element access like property getters.
  */
-function dependArray (value) {
-  for (let e, i = 0, l = value.length; i < l; i++) {
-    e = value[i]
-    e && e.__ob__ && e.__ob__.dep.depend()
-    if (Array.isArray(e)) {
-      dependArray(e)
+function dependArray (arr) {
+  for (let i = 0, l = arr.length; i < l; i++) {
+    const item = arr[i]
+    const ob = getObserver(item)
+    ob && ob.dep.depend()
+    if (Array.isArray(item)) {
+      dependArray(item)
     }
   }
 }
+
+export function reactive (value) {
+  observe(value)
+  return value
+}
+
+export function shallowReactive (value) {
+  observe(value, true)
+  return value
+}
+
+export function isReactive (value) {
+  return value && hasOwn(value, ObKey) && value[ObKey] instanceof Observer
+}
+
+export function getObserver (value) {
+  if (isReactive(value)) return value[ObKey]
+}
+
+export function markRaw (value) {
+  if (isObject(value)) {
+    rawSet.add(value)
+  }
+  return value
+}

package/src/observer/ref.js

@@ -0,0 +1,97 @@
+import { reactive, shallowReactive, set, isReactive, setForceTrigger } from './reactive'
+import { RefKey } from '../helper/const'
+import {
+  warn,
+  isPlainObject,
+  hasOwn
+} from '@mpxjs/utils'
+
+export class RefImpl {
+  constructor (options) {
+    Object.defineProperty(this, 'value', { enumerable: true, ...options })
+  }
+}
+
+export function createRef (options, effect) {
+  const ref = new RefImpl(options)
+  if (effect) {
+    ref.effect = effect
+    effect.computed = ref
+  }
+  return Object.seal(ref)
+}
+
+export function isRef (val) {
+  return val instanceof RefImpl
+}
+
+export function unref (ref) {
+  return isRef(ref) ? ref.value : ref
+}
+
+export function ref (raw) {
+  if (isRef(raw)) return raw
+  const wrapper = reactive({ [RefKey]: raw })
+  return createRef({
+    get: () => wrapper[RefKey],
+    set: (val) => {
+      wrapper[RefKey] = val
+    }
+  })
+}
+
+export function toRef (obj, key) {
+  if (!isReactive(obj)) warn('toRef() expects a reactive object but received a plain one.')
+  if (!hasOwn(obj, key)) set(obj, key)
+  const val = obj[key]
+  if (isRef(val)) return val
+  return createRef({
+    get: () => obj[key],
+    set: (val) => {
+      obj[key] = val
+    }
+  })
+}
+
+export function toRefs (obj) {
+  if (!isReactive(obj)) warn('toRefs() expects a reactive object but received a plain one.')
+  if (!isPlainObject(obj)) return obj
+  const result = {}
+  Object.keys(obj).forEach((key) => {
+    result[key] = toRef(obj, key)
+  })
+  return result
+}
+
+export function customRef (factory) {
+  const version = ref(0)
+  return createRef(
+    factory(
+      // track
+      () => version.value,
+      // trigger
+      () => {
+        version.value++
+      }
+    )
+  )
+}
+
+export function shallowRef (raw) {
+  if (isRef(raw)) return raw
+  const wrapper = shallowReactive({ [RefKey]: raw })
+  return createRef({
+    get: () => wrapper[RefKey],
+    set: (val) => {
+      wrapper[RefKey] = val
+    }
+  })
+}
+
+export function triggerRef (ref) {
+  if (!isRef(ref)) return
+  setForceTrigger(true)
+  /* eslint-disable no-self-assign */
+  ref.value = ref.value
+  setForceTrigger(false)
+}

package/src/observer/scheduler.js

@@ -1,75 +1,190 @@
-import { asyncLock } from '../helper/utils'
-import { error } from '../helper/log'
-import EXPORT_MPX from '../index'
+import { warn, isArray, callWithErrorHandling, isDev } from '@mpxjs/utils'
+import Mpx from '../index'
+
+let isFlushing = false
+let isFlushPending = false
 
 const queue = []
-let has = {}
-let circular = {}
-let flushing = false
-let curIndex = 0
-const lockTask = asyncLock()
-const MAX_UPDATE_COUNT = 100
-
-export function queueWatcher (watcher) {
-  if (!watcher.id && typeof watcher === 'function') {
-    watcher = {
-      id: Infinity,
-      run: watcher
+let flushIndex = 0
+
+const pendingPreFlushCbs = []
+let activePreFlushCbs = null
+let preFlushIndex = 0
+
+const pendingPostFlushCbs = []
+let activePostFlushCbs = null
+let postFlushIndex = 0
+
+const resolvedPromise = Promise.resolve()
+let currentFlushPromise = null
+
+const RECURSION_LIMIT = 100
+
+const getId = (job) => job.id == null ? Infinity : job.id
+
+function findInsertionIndex (id) {
+  // the start index should be `flushIndex + 1`
+  let start = flushIndex + 1
+  let end = queue.length
+
+  while (start < end) {
+    const middle = (start + end) >>> 1
+    const middleJobId = getId(queue[middle])
+    middleJobId < id ? (start = middle + 1) : (end = middle)
+  }
+
+  return start
+}
+
+export function nextTick (fn) {
+  const p = currentFlushPromise || resolvedPromise
+  return fn ? p.then(this ? fn.bind(this) : fn) : p
+}
+
+export function queuePreFlushCb (cb) {
+  queueCb(cb, activePreFlushCbs, pendingPreFlushCbs, preFlushIndex)
+}
+
+export function queuePostFlushCb (cb) {
+  queueCb(cb, activePostFlushCbs, pendingPostFlushCbs, postFlushIndex)
+}
+
+function queueCb (cb, activeQueue, pendingQueue, index) {
+  if (isArray(cb)) {
+    pendingQueue.push(...cb)
+  } else if (
+    !activeQueue ||
+    !activeQueue.includes(cb, cb.allowRecurse ? index + 1 : index)
+  ) {
+    pendingQueue.push(cb)
+  }
+  queueFlush()
+}
+
+export function queueJob (job) {
+  // the dedupe search uses the startIndex argument of Array.includes()
+  // by default the search index includes the current job that is being run
+  // so it cannot recursively trigger itself again.
+  // 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 (job.id == null) {
+      queue.push(job)
+    } else {
+      queue.splice(findInsertionIndex(job.id), 0, job)
     }
+    queueFlush()
   }
-  // 开启EXPORT_MPX.config.forceRunWatcherSync时，queueWatcher同步执行，便于调试排查问题
-  if (EXPORT_MPX.config.forceRunWatcherSync) return watcher.run()
-  if (!has[watcher.id] || watcher.id === Infinity) {
-    has[watcher.id] = true
-    if (!flushing) {
-      queue.push(watcher)
-      lockTask(flushQueue, resetQueue)
+}
+
+function queueFlush () {
+  if (!isFlushing && !isFlushPending) {
+    isFlushPending = true
+    if (Mpx.config.forceFlushSync) {
+      flushJobs()
     } else {
-      let i = queue.length - 1
-      while (i > curIndex && watcher.id < queue[i].id) {
-        i--
-      }
-      queue.splice(i + 1, 0, watcher)
+      currentFlushPromise = resolvedPromise.then(flushJobs)
     }
   }
 }
 
-export function dequeueWatcher (watcher) {
-  if (!watcher.id || !has[watcher.id]) return
-  const index = queue.indexOf(watcher)
-  if (index > -1) {
-    queue.splice(index, 1)
-    has[watcher.id] = false
+export function flushPreFlushCbs (seen) {
+  if (pendingPreFlushCbs.length) {
+    activePreFlushCbs = [...new Set(pendingPreFlushCbs)]
+    pendingPreFlushCbs.length = 0
+    if (isDev) seen = seen || new Map()
+    for (
+      preFlushIndex = 0;
+      preFlushIndex < activePreFlushCbs.length;
+      preFlushIndex++
+    ) {
+      if (isDev && checkRecursiveUpdates(seen, activePreFlushCbs[preFlushIndex])) continue
+      activePreFlushCbs[preFlushIndex]()
+    }
+    activePreFlushCbs = null
+    preFlushIndex = 0
+    // recursively flush until it drains
+    flushPreFlushCbs(seen)
+  }
+}
+
+export function flushPostFlushCbs (seen) {
+  if (pendingPostFlushCbs.length) {
+    activePostFlushCbs = [...new Set(pendingPostFlushCbs)]
+    pendingPostFlushCbs.length = 0
+    if (isDev) seen = seen || new Map()
+
+    // activePostFlushCbs.sort((a, b) => getId(a) - getId(b))
+    for (
+      postFlushIndex = 0;
+      postFlushIndex < activePostFlushCbs.length;
+      postFlushIndex++
+    ) {
+      if (isDev && checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) continue
+      activePostFlushCbs[postFlushIndex]()
+    }
+    activePostFlushCbs = null
+    postFlushIndex = 0
+    // recursively flush until it drains
+    flushPostFlushCbs(seen)
   }
 }
 
-function flushQueue () {
-  flushing = true
-  queue.sort((a, b) => a.id - b.id)
-  for (curIndex = 0; curIndex < queue.length; curIndex++) {
-    const watcher = queue[curIndex]
-    const id = watcher.id
-    if (id !== Infinity) {
-      delete has[id]
-      if (process.env.NODE_ENV !== 'production') {
-        circular[id] = (circular[id] || 0) + 1
-        if (circular[id] > MAX_UPDATE_COUNT) {
-          let location = watcher.vm && watcher.vm.options && watcher.vm.options.mpxFileResource
-          error(`You may have a dead circular update in watcher with expression [${watcher.expression}], please check!`, location)
-          break
-        }
+function flushJobs (seen) {
+  isFlushPending = false
+  isFlushing = true
+
+  if (isDev) seen = seen || new Map()
+
+  flushPreFlushCbs(seen)
+
+  queue.sort((a, b) => getId(a) - getId(b))
+
+  try {
+    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
+      const job = queue[flushIndex]
+      if (job && job.active !== false) {
+        if (isDev && checkRecursiveUpdates(seen, job)) continue
+        callWithErrorHandling(job, null, 'render job')
       }
     }
-    watcher.run()
+  } finally {
+    flushIndex = 0
+    queue.length = 0
+
+    flushPostFlushCbs(seen)
+
+    isFlushing = false
+    currentFlushPromise = null
+    // some postFlushCb queued jobs!
+    // keep flushing until it drains.
+    if (
+      queue.length ||
+      pendingPreFlushCbs.length ||
+      pendingPostFlushCbs.length
+    ) {
+      flushJobs(seen)
+    }
   }
-  resetQueue()
 }
 
-function resetQueue () {
-  flushing = false
-  curIndex = queue.length = 0
-  has = {}
-  if (process.env.NODE_ENV !== 'production') {
-    circular = {}
+function checkRecursiveUpdates (seen, fn) {
+  if (!seen.has(fn)) {
+    seen.set(fn, 1)
+  } else {
+    const count = seen.get(fn)
+    if (count > RECURSION_LIMIT) {
+      warn(
+        'Maximum recursive updates exceeded.\n' +
+        'This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself'
+      )
+      return true
+    } else {
+      seen.set(fn, count + 1)
+    }
   }
 }