vue 2.6.13 → 2.7.0-alpha.2

package/src/v3/apiSetup.ts

@@ -0,0 +1,161 @@
+import { Component } from 'types/component'
+import type { SetupContext } from 'types/options'
+import { def, invokeWithErrorHandling, isReserved, warn } from '../core/util'
+import VNode from '../core/vdom/vnode'
+import { bind, emptyObject, isFunction, isObject } from '../shared/util'
+import { currentInstance, setCurrentInstance } from './currentInstance'
+import { isRef } from './reactivity/ref'
+
+export function initSetup(vm: Component) {
+  const options = vm.$options
+  const setup = options.setup
+  if (setup) {
+    const ctx = (vm._setupContext = createSetupContext(vm))
+
+    setCurrentInstance(vm)
+    const setupResult = invokeWithErrorHandling(
+      setup,
+      null,
+      [vm._props, ctx],
+      vm,
+      `setup`
+    )
+    setCurrentInstance()
+
+    if (isFunction(setupResult)) {
+      // render function
+      // @ts-ignore
+      options.render = setupResult
+    } else if (isObject(setupResult)) {
+      // bindings
+      if (__DEV__ && setupResult instanceof VNode) {
+        warn(
+          `setup() should not return VNodes directly - ` +
+            `return a render function instead.`
+        )
+      }
+      vm._setupState = setupResult
+      for (const key in setupResult) {
+        if (!isReserved(key)) {
+          proxySetupProperty(vm, setupResult, key)
+        }
+      }
+    } else if (__DEV__ && setupResult !== undefined) {
+      warn(
+        `setup() should return an object. Received: ${
+          setupResult === null ? 'null' : typeof setupResult
+        }`
+      )
+    }
+  }
+}
+
+function proxySetupProperty(
+  vm: Component,
+  setupResult: Record<string, any>,
+  key: string
+) {
+  const raw = setupResult[key]
+  const unwrap = isRef(raw)
+  Object.defineProperty(vm, key, {
+    enumerable: true,
+    configurable: true,
+    get: unwrap ? () => raw.value : () => setupResult[key],
+    set: unwrap ? v => (raw.value = v) : v => (setupResult[key] = v)
+  })
+}
+
+function createSetupContext(vm: Component) {
+  return {
+    get attrs() {
+      return initAttrsProxy(vm)
+    },
+    get slots() {
+      return initSlotsProxy(vm)
+    },
+    emit: bind(vm.$emit, vm) as any
+  }
+}
+
+function initAttrsProxy(vm: Component) {
+  if (!vm._attrsProxy) {
+    const proxy = (vm._attrsProxy = {})
+    def(proxy, '_v_attr_proxy', true)
+    syncSetupAttrs(proxy, vm.$attrs, emptyObject, vm)
+  }
+  return vm._attrsProxy
+}
+
+export function syncSetupAttrs(
+  to: any,
+  from: any,
+  prev: any,
+  instance: Component
+) {
+  let changed = false
+  for (const key in from) {
+    if (!(key in to)) {
+      changed = true
+      defineProxyAttr(to, key, instance)
+    } else if (from[key] !== prev[key]) {
+      changed = true
+    }
+  }
+  for (const key in to) {
+    if (!(key in from)) {
+      changed = true
+      delete to[key]
+    }
+  }
+  return changed
+}
+
+function defineProxyAttr(proxy: any, key: string, instance: Component) {
+  Object.defineProperty(proxy, key, {
+    enumerable: true,
+    configurable: true,
+    get() {
+      return instance.$attrs[key]
+    }
+  })
+}
+
+function initSlotsProxy(vm: Component) {
+  if (!vm._slotsProxy) {
+    syncSetupSlots((vm._slotsProxy = {}), vm.$scopedSlots)
+  }
+  return vm._slotsProxy
+}
+
+export function syncSetupSlots(to: any, from: any) {
+  for (const key in from) {
+    to[key] = from[key]
+  }
+  for (const key in to) {
+    if (!(key in from)) {
+      delete to[key]
+    }
+  }
+}
+
+/**
+ * @internal use manual type def
+ */
+export function useSlots(): SetupContext['slots'] {
+  return getContext().slots
+}
+
+/**
+ * @internal use manual type def
+ */
+export function useAttrs(): SetupContext['attrs'] {
+  return getContext().attrs
+}
+
+function getContext(): SetupContext {
+  if (__DEV__ && !currentInstance) {
+    warn(`useContext() called without active instance.`)
+  }
+  const vm = currentInstance!
+  return vm._setupContext || (vm._setupContext = createSetupContext(vm))
+}

package/src/v3/apiWatch.ts

@@ -0,0 +1,355 @@
+import { isRef, Ref } from './reactivity/ref'
+import { ComputedRef } from './reactivity/computed'
+import { isReactive, isShallow } from './reactivity/reactive'
+import {
+  warn,
+  noop,
+  isArray,
+  isFunction,
+  emptyObject,
+  hasChanged,
+  isServerRendering,
+  invokeWithErrorHandling
+} from 'core/util'
+import { currentInstance } from './currentInstance'
+import { traverse } from 'core/observer/traverse'
+import Watcher from '../core/observer/watcher'
+import { queueWatcher } from '../core/observer/scheduler'
+import { DebuggerOptions } from './debug'
+
+const WATCHER = `watcher`
+const WATCHER_CB = `${WATCHER} callback`
+const WATCHER_GETTER = `${WATCHER} getter`
+const WATCHER_CLEANUP = `${WATCHER} cleanup`
+
+export type WatchEffect = (onCleanup: OnCleanup) => void
+
+export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)
+
+export type WatchCallback<V = any, OV = any> = (
+  value: V,
+  oldValue: OV,
+  onCleanup: OnCleanup
+) => any
+
+type MapSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true
+      ? V | undefined
+      : V
+    : T[K] extends object
+    ? Immediate extends true
+      ? T[K] | undefined
+      : T[K]
+    : never
+}
+
+type OnCleanup = (cleanupFn: () => void) => void
+
+export interface WatchOptionsBase extends DebuggerOptions {
+  flush?: 'pre' | 'post' | 'sync'
+}
+
+export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
+  immediate?: Immediate
+  deep?: boolean
+}
+
+export type WatchStopHandle = () => void
+
+// Simple effect.
+export function watchEffect(
+  effect: WatchEffect,
+  options?: WatchOptionsBase
+): WatchStopHandle {
+  return doWatch(effect, null, options)
+}
+
+export function watchPostEffect(
+  effect: WatchEffect,
+  options?: DebuggerOptions
+) {
+  return doWatch(
+    effect,
+    null,
+    (__DEV__
+      ? { ...options, flush: 'post' }
+      : { flush: 'post' }) as WatchOptionsBase
+  )
+}
+
+export function watchSyncEffect(
+  effect: WatchEffect,
+  options?: DebuggerOptions
+) {
+  return doWatch(
+    effect,
+    null,
+    (__DEV__
+      ? { ...options, flush: 'sync' }
+      : { flush: 'sync' }) as WatchOptionsBase
+  )
+}
+
+// initial value for watchers to trigger on undefined initial values
+const INITIAL_WATCHER_VALUE = {}
+
+type MultiWatchSources = (WatchSource<unknown> | object)[]
+
+// overload: array of multiple sources + cb
+export function watch<
+  T extends MultiWatchSources,
+  Immediate extends Readonly<boolean> = false
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
+  options?: WatchOptions<Immediate>
+): WatchStopHandle
+
+// overload: multiple sources w/ `as const`
+// watch([foo, bar] as const, () => {})
+// somehow [...T] breaks when the type is readonly
+export function watch<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false
+>(
+  source: T,
+  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
+  options?: WatchOptions<Immediate>
+): WatchStopHandle
+
+// overload: single source + cb
+export function watch<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchOptions<Immediate>
+): WatchStopHandle
+
+// overload: watching reactive object w/ cb
+export function watch<
+  T extends object,
+  Immediate extends Readonly<boolean> = false
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchOptions<Immediate>
+): WatchStopHandle
+
+// implementation
+export function watch<T = any, Immediate extends Readonly<boolean> = false>(
+  source: T | WatchSource<T>,
+  cb: any,
+  options?: WatchOptions<Immediate>
+): WatchStopHandle {
+  if (__DEV__ && typeof cb !== 'function') {
+    warn(
+      `\`watch(fn, options?)\` signature has been moved to a separate API. ` +
+        `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
+        `supports \`watch(source, cb, options?) signature.`
+    )
+  }
+  return doWatch(source as any, cb, options)
+}
+
+function doWatch(
+  source: WatchSource | WatchSource[] | WatchEffect | object,
+  cb: WatchCallback | null,
+  {
+    immediate,
+    deep,
+    flush = 'pre',
+    onTrack,
+    onTrigger
+  }: WatchOptions = emptyObject
+): WatchStopHandle {
+  if (__DEV__ && !cb) {
+    if (immediate !== undefined) {
+      warn(
+        `watch() "immediate" option is only respected when using the ` +
+          `watch(source, callback, options?) signature.`
+      )
+    }
+    if (deep !== undefined) {
+      warn(
+        `watch() "deep" option is only respected when using the ` +
+          `watch(source, callback, options?) signature.`
+      )
+    }
+  }
+
+  const warnInvalidSource = (s: unknown) => {
+    warn(
+      `Invalid watch source: `,
+      s,
+      `A watch source can only be a getter/effect function, a ref, ` +
+        `a reactive object, or an array of these types.`
+    )
+  }
+
+  const instance = currentInstance
+  const call = (fn: Function, type: string, args: any[] | null = null) =>
+    invokeWithErrorHandling(fn, null, args, instance, type)
+
+  let getter: () => any
+  let forceTrigger = false
+  let isMultiSource = false
+
+  if (isRef(source)) {
+    getter = () => source.value
+    forceTrigger = isShallow(source)
+  } else if (isReactive(source)) {
+    getter = isArray(source)
+      ? () => {
+          ;(source as any).__ob__.dep.depend()
+          return source
+        }
+      : () => source
+    deep = true
+  } else if (isArray(source)) {
+    isMultiSource = true
+    forceTrigger = source.some(s => isReactive(s) || isShallow(s))
+    getter = () =>
+      source.map(s => {
+        if (isRef(s)) {
+          return s.value
+        } else if (isReactive(s)) {
+          return traverse(s)
+        } else if (isFunction(s)) {
+          return call(s, WATCHER_GETTER)
+        } else {
+          __DEV__ && warnInvalidSource(s)
+        }
+      })
+  } else if (isFunction(source)) {
+    if (cb) {
+      // getter with cb
+      getter = () => call(source as Function, WATCHER_GETTER)
+    } else {
+      // no cb -> simple effect
+      getter = () => {
+        if (instance && instance._isDestroyed) {
+          return
+        }
+        if (cleanup) {
+          cleanup()
+        }
+        return call(source as Function, WATCHER, [onCleanup])
+      }
+    }
+  } else {
+    getter = noop
+    __DEV__ && warnInvalidSource(source)
+  }
+
+  if (cb && deep) {
+    const baseGetter = getter
+    getter = () => traverse(baseGetter())
+  }
+
+  let cleanup: () => void
+  let onCleanup: OnCleanup = (fn: () => void) => {
+    cleanup = watcher.onStop = () => {
+      call(fn, WATCHER_CLEANUP)
+    }
+  }
+
+  // in SSR there is no need to setup an actual effect, and it should be noop
+  // unless it's eager
+  if (isServerRendering()) {
+    // we will also not call the invalidate callback (+ runner is not set up)
+    onCleanup = noop
+    if (!cb) {
+      getter()
+    } else if (immediate) {
+      call(cb, WATCHER_CB, [
+        getter(),
+        isMultiSource ? [] : undefined,
+        onCleanup
+      ])
+    }
+    return noop
+  }
+
+  const watcher = new Watcher(currentInstance, getter, noop, {
+    lazy: true
+  })
+  watcher.noRecurse = !cb
+
+  let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE
+  // overwrite default run
+  watcher.run = () => {
+    if (
+      !watcher.active &&
+      !(flush === 'pre' && instance && instance._isBeingDestroyed)
+    ) {
+      return
+    }
+    if (cb) {
+      // watch(source, cb)
+      const newValue = watcher.get()
+      if (
+        deep ||
+        forceTrigger ||
+        (isMultiSource
+          ? (newValue as any[]).some((v, i) =>
+              hasChanged(v, (oldValue as any[])[i])
+            )
+          : hasChanged(newValue, oldValue))
+      ) {
+        // cleanup before running cb again
+        if (cleanup) {
+          cleanup()
+        }
+        call(cb, WATCHER_CB, [
+          newValue,
+          // pass undefined as the old value when it's changed for the first time
+          oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
+          onCleanup
+        ])
+        oldValue = newValue
+      }
+    } else {
+      // watchEffect
+      watcher.get()
+    }
+  }
+
+  if (flush === 'sync') {
+    watcher.update = watcher.run
+  } else if (flush === 'post') {
+    watcher.id = Infinity
+    watcher.update = () => queueWatcher(watcher)
+  } else {
+    // pre
+    watcher.update = () => {
+      if (!instance || instance._isMounted) {
+        queueWatcher(watcher)
+      } else {
+        const buffer = instance._preWatchers || (instance._preWatchers = [])
+        if (buffer.indexOf(watcher) < 0) buffer.push(watcher)
+      }
+    }
+  }
+
+  if (__DEV__) {
+    watcher.onTrack = onTrack
+    watcher.onTrigger = onTrigger
+  }
+
+  // initial run
+  if (cb) {
+    if (immediate) {
+      watcher.run()
+    } else {
+      oldValue = watcher.get()
+    }
+  } else if (flush === 'post' && instance) {
+    instance.$once('hook:mounted', () => watcher.get())
+  } else {
+    watcher.get()
+  }
+
+  return () => {
+    watcher.teardown()
+  }
+}

package/src/v3/currentInstance.ts

@@ -0,0 +1,23 @@
+import { Component } from 'types/component'
+
+export let currentInstance: Component | null = null
+
+/**
+ * This is exposed for compatibility with v3 (e.g. some functions in VueUse
+ * relies on it). Do not use this internally, just use `currentInstance`.
+ *
+ * @internal this function needs manual type declaration because it relies
+ * on previously manually authored types from Vue 2
+ */
+export function getCurrentInstance(): { proxy: Component } | null {
+  return currentInstance && { proxy: currentInstance }
+}
+
+/**
+ * @internal
+ */
+export function setCurrentInstance(vm: Component | null = null) {
+  if (!vm) currentInstance && currentInstance._scope.off()
+  currentInstance = vm
+  vm && vm._scope.on()
+}

package/src/v3/debug.ts

@@ -0,0 +1,21 @@
+import { TrackOpTypes, TriggerOpTypes } from './reactivity/operations'
+
+export interface DebuggerOptions {
+  onTrack?: (event: DebuggerEvent) => void
+  onTrigger?: (event: DebuggerEvent) => void
+}
+
+export type DebuggerEvent = {
+  /**
+   * @internal
+   */
+  effect: any
+} & DebuggerEventExtraInfo
+
+export type DebuggerEventExtraInfo = {
+  target: object
+  type: TrackOpTypes | TriggerOpTypes
+  key?: any
+  newValue?: any
+  oldValue?: any
+}

package/src/v3/h.ts

@@ -0,0 +1,18 @@
+import { createElement } from '../core/vdom/create-element'
+import { currentInstance } from './currentInstance'
+import { warn } from 'core/util'
+
+/**
+ * @internal this function needs manual public type declaration because it relies
+ * on previously manually authored types from Vue 2
+ */
+export function h(type: any, props?: any, children?: any) {
+  if (!currentInstance) {
+    __DEV__ &&
+      warn(
+        `globally imported h() can only be invoked when there is an active ` +
+          `component instance, e.g. synchronously in a component's render or setup function.`
+      )
+  }
+  return createElement(currentInstance!, type, props, children, 2, true)
+}

package/src/v3/index.ts

@@ -0,0 +1,77 @@
+export {
+  ref,
+  shallowRef,
+  isRef,
+  toRef,
+  toRefs,
+  unref,
+  customRef,
+  triggerRef,
+  Ref,
+  ToRef,
+  ToRefs,
+  UnwrapRef,
+  ShallowRef,
+  ShallowUnwrapRef,
+  RefUnwrapBailTypes,
+  CustomRefFactory
+} from './reactivity/ref'
+
+export {
+  reactive,
+  isReactive,
+  isReadonly,
+  isShallow,
+  isProxy,
+  shallowReactive,
+  markRaw,
+  toRaw,
+  ReactiveFlags,
+  ShallowReactive,
+  UnwrapNestedRefs
+} from './reactivity/reactive'
+
+export { readonly, shallowReadonly, DeepReadonly } from './reactivity/readonly'
+
+export {
+  computed,
+  ComputedRef,
+  WritableComputedRef,
+  WritableComputedOptions,
+  ComputedGetter,
+  ComputedSetter
+} from './reactivity/computed'
+
+export {
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  WatchEffect,
+  WatchOptions,
+  WatchOptionsBase,
+  WatchCallback,
+  WatchSource,
+  WatchStopHandle
+} from './apiWatch'
+
+export {
+  EffectScope,
+  effectScope,
+  onScopeDispose,
+  getCurrentScope
+} from './reactivity/effectScope'
+
+export { DebuggerOptions, DebuggerEvent, DebuggerEventExtraInfo } from './debug'
+
+export { TrackOpTypes, TriggerOpTypes } from './reactivity/operations'
+
+export { provide, inject, InjectionKey } from './apiInject'
+
+export { h } from './h'
+export { getCurrentInstance } from './currentInstance'
+export { useSlots, useAttrs } from './apiSetup'
+export { nextTick } from 'core/util/next-tick'
+export { set, del } from 'core/observer'
+
+export * from './apiLifecycle'