vue 2.6.13 → 2.7.0-alpha.2

package/src/v3/reactivity/computed.ts

@@ -0,0 +1,100 @@
+import { isServerRendering, noop, warn, def, isFunction } from 'core/util'
+import { Ref, RefFlag } from './ref'
+import Watcher from 'core/observer/watcher'
+import Dep from 'core/observer/dep'
+import { currentInstance } from '../currentInstance'
+import { ReactiveFlags } from './reactive'
+import { TrackOpTypes } from './operations'
+import { DebuggerOptions } from '../debug'
+
+declare const ComputedRefSymbol: unique symbol
+
+export interface ComputedRef<T = any> extends WritableComputedRef<T> {
+  readonly value: T
+  [ComputedRefSymbol]: true
+}
+
+export interface WritableComputedRef<T> extends Ref<T> {
+  readonly effect: any /* Watcher */
+}
+
+export type ComputedGetter<T> = (...args: any[]) => T
+export type ComputedSetter<T> = (v: T) => void
+
+export interface WritableComputedOptions<T> {
+  get: ComputedGetter<T>
+  set: ComputedSetter<T>
+}
+
+export function computed<T>(
+  getter: ComputedGetter<T>,
+  debugOptions?: DebuggerOptions
+): ComputedRef<T>
+export function computed<T>(
+  options: WritableComputedOptions<T>,
+  debugOptions?: DebuggerOptions
+): WritableComputedRef<T>
+export function computed<T>(
+  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
+  debugOptions?: DebuggerOptions
+) {
+  let getter: ComputedGetter<T>
+  let setter: ComputedSetter<T>
+
+  const onlyGetter = isFunction(getterOrOptions)
+  if (onlyGetter) {
+    getter = getterOrOptions
+    setter = __DEV__
+      ? () => {
+          warn('Write operation failed: computed value is readonly')
+        }
+      : noop
+  } else {
+    getter = getterOrOptions.get
+    setter = getterOrOptions.set
+  }
+
+  const watcher = isServerRendering()
+    ? null
+    : new Watcher(currentInstance, getter, noop, { lazy: true })
+
+  if (__DEV__ && watcher && debugOptions) {
+    watcher.onTrack = debugOptions.onTrack
+    watcher.onTrigger = debugOptions.onTrigger
+  }
+
+  const ref = {
+    // some libs rely on the presence effect for checking computed refs
+    // from normal refs, but the implementation doesn't matter
+    effect: watcher,
+    get value() {
+      if (watcher) {
+        if (watcher.dirty) {
+          watcher.evaluate()
+        }
+        if (Dep.target) {
+          if (__DEV__ && Dep.target.onTrack) {
+            Dep.target.onTrack({
+              effect: Dep.target,
+              target: ref,
+              type: TrackOpTypes.GET,
+              key: 'value'
+            })
+          }
+          watcher.depend()
+        }
+        return watcher.value
+      } else {
+        return getter()
+      }
+    },
+    set value(newVal) {
+      setter(newVal)
+    }
+  } as any
+
+  def(ref, RefFlag, true)
+  def(ref, ReactiveFlags.IS_READONLY, onlyGetter)
+
+  return ref
+}

package/src/v3/reactivity/effect.ts

@@ -0,0 +1,20 @@
+import Watcher from 'core/observer/watcher'
+import { noop } from 'shared/util'
+import { currentInstance } from '../currentInstance'
+
+// export type EffectScheduler = (...args: any[]) => any
+
+/**
+ * @internal since we are not exposing this in Vue 2, it's used only for
+ * internal testing.
+ */
+export function effect(fn: () => any, scheduler?: (cb: any) => void) {
+  const watcher = new Watcher(currentInstance, fn, noop, {
+    sync: true
+  })
+  if (scheduler) {
+    watcher.update = () => {
+      scheduler(() => watcher.run())
+    }
+  }
+}

package/src/v3/reactivity/effectScope.ts

@@ -0,0 +1,134 @@
+import Watcher from 'core/observer/watcher'
+import { warn } from 'core/util'
+
+export let activeEffectScope: EffectScope | undefined
+
+export class EffectScope {
+  /**
+   * @internal
+   */
+  active = true
+  /**
+   * @internal
+   */
+  effects: Watcher[] = []
+  /**
+   * @internal
+   */
+  cleanups: (() => void)[] = []
+
+  /**
+   * only assigned by undetached scope
+   * @internal
+   */
+  parent: EffectScope | undefined
+  /**
+   * record undetached scopes
+   * @internal
+   */
+  scopes: EffectScope[] | undefined
+  /**
+   * track a child scope's index in its parent's scopes array for optimized
+   * removal
+   * @internal
+   */
+  private index: number | undefined
+
+  constructor(detached = false) {
+    if (!detached && activeEffectScope) {
+      this.parent = activeEffectScope
+      this.index =
+        (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
+          this
+        ) - 1
+    }
+  }
+
+  run<T>(fn: () => T): T | undefined {
+    if (this.active) {
+      const currentEffectScope = activeEffectScope
+      try {
+        activeEffectScope = this
+        return fn()
+      } finally {
+        activeEffectScope = currentEffectScope
+      }
+    } else if (__DEV__) {
+      warn(`cannot run an inactive effect scope.`)
+    }
+  }
+
+  /**
+   * This should only be called on non-detached scopes
+   * @internal
+   */
+  on() {
+    activeEffectScope = this
+  }
+
+  /**
+   * This should only be called on non-detached scopes
+   * @internal
+   */
+  off() {
+    activeEffectScope = this.parent
+  }
+
+  stop(fromParent?: boolean) {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].teardown()
+      }
+      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
+    }
+  }
+}
+
+export function effectScope(detached?: boolean) {
+  return new EffectScope(detached)
+}
+
+/**
+ * @internal
+ */
+export function recordEffectScope(
+  effect: Watcher,
+  scope: EffectScope | undefined = activeEffectScope
+) {
+  if (scope && scope.active) {
+    scope.effects.push(effect)
+  }
+}
+
+export function getCurrentScope() {
+  return activeEffectScope
+}
+
+export function onScopeDispose(fn: () => void) {
+  if (activeEffectScope) {
+    activeEffectScope.cleanups.push(fn)
+  } else if (__DEV__) {
+    warn(
+      `onScopeDispose() is called when there is no active effect scope` +
+        ` to be associated with.`
+    )
+  }
+}

package/src/v3/reactivity/operations.ts

@@ -0,0 +1,14 @@
+// using literal strings instead of numbers so that it's easier to inspect
+// debugger events
+
+export const enum TrackOpTypes {
+  GET = 'get',
+  TOUCH = 'touch'
+}
+
+export const enum TriggerOpTypes {
+  SET = 'set',
+  ADD = 'add',
+  DELETE = 'delete',
+  ARRAY_MUTATION = 'array mutation'
+}

package/src/v3/reactivity/reactive.ts

@@ -0,0 +1,123 @@
+import { observe, Observer } from 'core/observer'
+import { def, isArray, isPrimitive, warn, toRawType } from 'core/util'
+import type { Ref, UnwrapRefSimple, RawSymbol } from './ref'
+
+export const enum ReactiveFlags {
+  SKIP = '__v_skip',
+  IS_READONLY = '__v_isReadonly',
+  IS_SHALLOW = '__v_isShallow',
+  RAW = '__v_raw'
+}
+
+export interface Target {
+  __ob__?: Observer
+  [ReactiveFlags.SKIP]?: boolean
+  [ReactiveFlags.IS_READONLY]?: boolean
+  [ReactiveFlags.IS_SHALLOW]?: boolean
+  [ReactiveFlags.RAW]?: any
+}
+
+// only unwrap nested ref
+export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>
+
+export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
+export function reactive(target: object) {
+  makeReactive(target, false)
+  return target
+}
+
+export declare const ShallowReactiveMarker: unique symbol
+
+export type ShallowReactive<T> = T & { [ShallowReactiveMarker]?: true }
+
+/**
+ * Return a shallowly-reactive copy of the original object, where only the root
+ * level properties are reactive. It also does not auto-unwrap refs (even at the
+ * root level).
+ */
+export function shallowReactive<T extends object>(
+  target: T
+): ShallowReactive<T> {
+  makeReactive(target, true)
+  def(target, ReactiveFlags.IS_SHALLOW, true)
+  return target
+}
+
+function makeReactive(target: any, shallow: boolean) {
+  // if trying to observe a readonly proxy, return the readonly version.
+  if (!isReadonly(target)) {
+    if (__DEV__) {
+      if (isArray(target)) {
+        warn(
+          `Avoid using Array as root value for ${
+            shallow ? `shallowReactive()` : `reactive()`
+          } as it cannot be tracked in watch() or watchEffect(). Use ${
+            shallow ? `shallowRef()` : `ref()`
+          } instead. This is a Vue-2-only limitation.`
+        )
+      }
+      const existingOb = target && target.__ob__
+      if (existingOb && existingOb.shallow !== shallow) {
+        warn(
+          `Target is already a ${
+            existingOb.shallow ? `` : `non-`
+          }shallow reactive object, and cannot be converted to ${
+            shallow ? `` : `non-`
+          }shallow.`
+        )
+      }
+    }
+    const ob = observe(target, shallow)
+    if (__DEV__ && !ob) {
+      if (target == null || isPrimitive(target)) {
+        warn(`value cannot be made reactive: ${String(target)}`)
+      }
+      if (isCollectionType(target)) {
+        warn(
+          `Vue 2 does not support reactive collection types such as Map or Set.`
+        )
+      }
+    }
+  }
+}
+
+export function isReactive(value: unknown): boolean {
+  if (isReadonly(value)) {
+    return isReactive((value as Target)[ReactiveFlags.RAW])
+  }
+  return !!(value && (value as Target).__ob__)
+}
+
+export function isShallow(value: unknown): boolean {
+  return !!(value && (value as Target).__v_isShallow)
+}
+
+export function isReadonly(value: unknown): boolean {
+  return !!(value && (value as Target).__v_isReadonly)
+}
+
+export function isProxy(value: unknown): boolean {
+  return isReactive(value) || isReadonly(value)
+}
+
+export function toRaw<T>(observed: T): T {
+  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
+  return raw ? toRaw(raw) : observed
+}
+
+export function markRaw<T extends object>(
+  value: T
+): T & { [RawSymbol]?: true } {
+  def(value, ReactiveFlags.SKIP, true)
+  return value
+}
+
+/**
+ * @internal
+ */
+export function isCollectionType(value: unknown): boolean {
+  const type = toRawType(value)
+  return (
+    type === 'Map' || type === 'WeakMap' || type === 'Set' || type === 'WeakSet'
+  )
+}

package/src/v3/reactivity/readonly.ts

@@ -0,0 +1,121 @@
+import { def, warn, isPlainObject, isArray } from 'core/util'
+import {
+  isCollectionType,
+  isReadonly,
+  isShallow,
+  ReactiveFlags,
+  UnwrapNestedRefs
+} from './reactive'
+import { isRef, Ref, RefFlag } from './ref'
+
+type Primitive = string | number | boolean | bigint | symbol | undefined | null
+type Builtin = Primitive | Function | Date | Error | RegExp
+export type DeepReadonly<T> = T extends Builtin
+  ? T
+  : T extends Map<infer K, infer V>
+  ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+  : T extends ReadonlyMap<infer K, infer V>
+  ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+  : T extends WeakMap<infer K, infer V>
+  ? WeakMap<DeepReadonly<K>, DeepReadonly<V>>
+  : T extends Set<infer U>
+  ? ReadonlySet<DeepReadonly<U>>
+  : T extends ReadonlySet<infer U>
+  ? ReadonlySet<DeepReadonly<U>>
+  : T extends WeakSet<infer U>
+  ? WeakSet<DeepReadonly<U>>
+  : T extends Promise<infer U>
+  ? Promise<DeepReadonly<U>>
+  : T extends Ref<infer U>
+  ? Readonly<Ref<DeepReadonly<U>>>
+  : T extends {}
+  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
+  : Readonly<T>
+
+const rawToReadonlyFlag = `__v_rawToReadonly`
+const rawToShallowReadonlyFlag = `__v_rawToShallowReadonly`
+
+export function readonly<T extends object>(
+  target: T
+): DeepReadonly<UnwrapNestedRefs<T>> {
+  return createReadonly(target, false)
+}
+
+function createReadonly(target: any, shallow: boolean) {
+  if (!isPlainObject(target)) {
+    if (__DEV__) {
+      if (isArray(target)) {
+        warn(`Vue 2 does not support readonly arrays.`)
+      } else if (isCollectionType(target)) {
+        warn(
+          `Vue 2 does not support readonly collection types such as Map or Set.`
+        )
+      } else {
+        warn(`value cannot be made readonly: ${typeof target}`)
+      }
+    }
+    return target as any
+  }
+
+  // already a readonly object
+  if (isReadonly(target)) {
+    return target as any
+  }
+
+  // already has a readonly proxy
+  const existingFlag = shallow ? rawToShallowReadonlyFlag : rawToReadonlyFlag
+  const existingProxy = target[existingFlag]
+  if (existingProxy) {
+    return existingProxy
+  }
+
+  const proxy = {}
+  def(target, existingFlag, proxy)
+
+  def(proxy, ReactiveFlags.IS_READONLY, true)
+  def(proxy, ReactiveFlags.RAW, target)
+
+  if (isRef(target)) {
+    def(proxy, RefFlag, true)
+  }
+  if (shallow || isShallow(target)) {
+    def(proxy, ReactiveFlags.IS_SHALLOW, true)
+  }
+
+  const keys = Object.keys(target)
+  for (let i = 0; i < keys.length; i++) {
+    defineReadonlyProperty(proxy, target, keys[i], shallow)
+  }
+
+  return proxy as any
+}
+
+function defineReadonlyProperty(
+  proxy: any,
+  target: any,
+  key: string,
+  shallow: boolean
+) {
+  Object.defineProperty(proxy, key, {
+    enumerable: true,
+    configurable: true,
+    get() {
+      const val = target[key]
+      return shallow || !isPlainObject(val) ? val : readonly(val)
+    },
+    set() {
+      __DEV__ &&
+        warn(`Set operation on key "${key}" failed: target is readonly.`)
+    }
+  })
+}
+
+/**
+ * Returns a reactive-copy of the original object, where only the root level
+ * properties are readonly, and does NOT unwrap refs nor recursively convert
+ * returned properties.
+ * This is used for creating the props proxy object for stateful components.
+ */
+export function shallowReadonly<T extends object>(target: T): Readonly<T> {
+  return createReadonly(target, true)
+}