vue 2.6.13 → 2.7.0-alpha.2

package/src/core/instance/{events.js → events.ts}

@@ -1,15 +1,15 @@
-/* @flow */
-
+import type { Component } from 'types/component'
 import {
   tip,
   toArray,
+  isArray,
   hyphenate,
   formatComponentName,
   invokeWithErrorHandling
 } from '../util/index'
 import { updateListeners } from '../vdom/helpers/index'
 
-export function initEvents (vm: Component) {
+export function initEvents(vm: Component) {
   vm._events = Object.create(null)
   vm._hasHookEvent = false
   // init parent attached events
@@ -21,17 +21,17 @@ export function initEvents (vm: Component) {
 
 let target: any
 
-function add (event, fn) {
+function add(event, fn) {
   target.$on(event, fn)
 }
 
-function remove (event, fn) {
+function remove(event, fn) {
   target.$off(event, fn)
 }
 
-function createOnceHandler (event, fn) {
+function createOnceHandler(event, fn) {
   const _target = target
-  return function onceHandler () {
+  return function onceHandler() {
     const res = fn.apply(null, arguments)
     if (res !== null) {
       _target.$off(event, onceHandler)
@@ -39,26 +39,36 @@ function createOnceHandler (event, fn) {
   }
 }
 
-export function updateComponentListeners (
+export function updateComponentListeners(
   vm: Component,
   listeners: Object,
-  oldListeners: ?Object
+  oldListeners?: Object | null
 ) {
   target = vm
-  updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
+  updateListeners(
+    listeners,
+    oldListeners || {},
+    add,
+    remove,
+    createOnceHandler,
+    vm
+  )
   target = undefined
 }
 
-export function eventsMixin (Vue: Class<Component>) {
+export function eventsMixin(Vue: typeof Component) {
   const hookRE = /^hook:/
-  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
+  Vue.prototype.$on = function (
+    event: string | Array<string>,
+    fn: Function
+  ): Component {
     const vm: Component = this
-    if (Array.isArray(event)) {
+    if (isArray(event)) {
       for (let i = 0, l = event.length; i < l; i++) {
         vm.$on(event[i], fn)
       }
     } else {
-      (vm._events[event] || (vm._events[event] = [])).push(fn)
+      ;(vm._events[event] || (vm._events[event] = [])).push(fn)
       // optimize hook:event cost by using a boolean flag marked at registration
       // instead of a hash lookup
       if (hookRE.test(event)) {
@@ -70,7 +80,7 @@ export function eventsMixin (Vue: Class<Component>) {
 
   Vue.prototype.$once = function (event: string, fn: Function): Component {
     const vm: Component = this
-    function on () {
+    function on() {
       vm.$off(event, on)
       fn.apply(vm, arguments)
     }
@@ -79,7 +89,10 @@ export function eventsMixin (Vue: Class<Component>) {
     return vm
   }
 
-  Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
+  Vue.prototype.$off = function (
+    event?: string | Array<string>,
+    fn?: Function
+  ): Component {
     const vm: Component = this
     // all
     if (!arguments.length) {
@@ -87,19 +100,19 @@ export function eventsMixin (Vue: Class<Component>) {
       return vm
     }
     // array of events
-    if (Array.isArray(event)) {
+    if (isArray(event)) {
       for (let i = 0, l = event.length; i < l; i++) {
         vm.$off(event[i], fn)
       }
       return vm
     }
     // specific event
-    const cbs = vm._events[event]
+    const cbs = vm._events[event!]
     if (!cbs) {
       return vm
     }
     if (!fn) {
-      vm._events[event] = null
+      vm._events[event!] = null
       return vm
     }
     // specific handler
@@ -117,15 +130,19 @@ export function eventsMixin (Vue: Class<Component>) {
 
   Vue.prototype.$emit = function (event: string): Component {
     const vm: Component = this
-    if (process.env.NODE_ENV !== 'production') {
+    if (__DEV__) {
       const lowerCaseEvent = event.toLowerCase()
       if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
         tip(
           `Event "${lowerCaseEvent}" is emitted in component ` +
-          `${formatComponentName(vm)} but the handler is registered for "${event}". ` +
-          `Note that HTML attributes are case-insensitive and you cannot use ` +
-          `v-on to listen to camelCase events when using in-DOM templates. ` +
-          `You should probably use "${hyphenate(event)}" instead of "${event}".`
+            `${formatComponentName(
+              vm
+            )} but the handler is registered for "${event}". ` +
+            `Note that HTML attributes are case-insensitive and you cannot use ` +
+            `v-on to listen to camelCase events when using in-DOM templates. ` +
+            `You should probably use "${hyphenate(
+              event
+            )}" instead of "${event}".`
         )
       }
     }

package/src/core/instance/{index.js → index.ts}

@@ -4,20 +4,24 @@ import { renderMixin } from './render'
 import { eventsMixin } from './events'
 import { lifecycleMixin } from './lifecycle'
 import { warn } from '../util/index'
+import type { GlobalAPI } from 'types/global-api'
 
-function Vue (options) {
-  if (process.env.NODE_ENV !== 'production' &&
-    !(this instanceof Vue)
-  ) {
+function Vue(options) {
+  if (__DEV__ && !(this instanceof Vue)) {
     warn('Vue is a constructor and should be called with the `new` keyword')
   }
   this._init(options)
 }
 
+//@ts-expect-error Vue has function type
 initMixin(Vue)
+//@ts-expect-error Vue has function type
 stateMixin(Vue)
+//@ts-expect-error Vue has function type
 eventsMixin(Vue)
+//@ts-expect-error Vue has function type
 lifecycleMixin(Vue)
+//@ts-expect-error Vue has function type
 renderMixin(Vue)
 
-export default Vue
+export default Vue as unknown as GlobalAPI

package/src/core/instance/{init.js → init.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import config from '../config'
 import { initProxy } from './proxy'
 import { initState } from './state'
@@ -9,40 +7,48 @@ import { mark, measure } from '../util/perf'
 import { initLifecycle, callHook } from './lifecycle'
 import { initProvide, initInjections } from './inject'
 import { extend, mergeOptions, formatComponentName } from '../util/index'
+import type { Component } from 'types/component'
+import type { InternalComponentOptions } from 'types/options'
+import { EffectScope } from 'v3/reactivity/effectScope'
 
 let uid = 0
 
-export function initMixin (Vue: Class<Component>) {
-  Vue.prototype._init = function (options?: Object) {
+export function initMixin(Vue: typeof Component) {
+  Vue.prototype._init = function (options?: Record<string, any>) {
     const vm: Component = this
     // a uid
     vm._uid = uid++
 
     let startTag, endTag
     /* istanbul ignore if */
-    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
+    if (__DEV__ && config.performance && mark) {
       startTag = `vue-perf-start:${vm._uid}`
       endTag = `vue-perf-end:${vm._uid}`
       mark(startTag)
     }
 
-    // a flag to avoid this being observed
+    // a flag to mark this as a Vue instance without having to do instanceof
+    // check
     vm._isVue = true
+    // avoid instances from being observed
+    vm.__v_skip = true
+    // effect scope
+    vm._scope = new EffectScope(true /* detached */)
     // merge options
     if (options && options._isComponent) {
       // optimize internal component instantiation
       // since dynamic options merging is pretty slow, and none of the
       // internal component options needs special treatment.
-      initInternalComponent(vm, options)
+      initInternalComponent(vm, options as any)
     } else {
       vm.$options = mergeOptions(
-        resolveConstructorOptions(vm.constructor),
+        resolveConstructorOptions(vm.constructor as any),
         options || {},
         vm
       )
     }
     /* istanbul ignore else */
-    if (process.env.NODE_ENV !== 'production') {
+    if (__DEV__) {
       initProxy(vm)
     } else {
       vm._renderProxy = vm
@@ -59,7 +65,7 @@ export function initMixin (Vue: Class<Component>) {
     callHook(vm, 'created')
 
     /* istanbul ignore if */
-    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
+    if (__DEV__ && config.performance && mark) {
       vm._name = formatComponentName(vm, false)
       mark(endTag)
       measure(`vue ${vm._name} init`, startTag, endTag)
@@ -71,14 +77,17 @@ export function initMixin (Vue: Class<Component>) {
   }
 }
 
-export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
-  const opts = vm.$options = Object.create(vm.constructor.options)
+export function initInternalComponent(
+  vm: Component,
+  options: InternalComponentOptions
+) {
+  const opts = (vm.$options = Object.create((vm.constructor as any).options))
   // doing this because it's faster than dynamic enumeration.
   const parentVnode = options._parentVnode
   opts.parent = options.parent
   opts._parentVnode = parentVnode
 
-  const vnodeComponentOptions = parentVnode.componentOptions
+  const vnodeComponentOptions = parentVnode.componentOptions!
   opts.propsData = vnodeComponentOptions.propsData
   opts._parentListeners = vnodeComponentOptions.listeners
   opts._renderChildren = vnodeComponentOptions.children
@@ -90,7 +99,7 @@ export function initInternalComponent (vm: Component, options: InternalComponent
   }
 }
 
-export function resolveConstructorOptions (Ctor: Class<Component>) {
+export function resolveConstructorOptions(Ctor: typeof Component) {
   let options = Ctor.options
   if (Ctor.super) {
     const superOptions = resolveConstructorOptions(Ctor.super)
@@ -114,7 +123,9 @@ export function resolveConstructorOptions (Ctor: Class<Component>) {
   return options
 }
 
-function resolveModifiedOptions (Ctor: Class<Component>): ?Object {
+function resolveModifiedOptions(
+  Ctor: typeof Component
+): Record<string, any> | null {
   let modified
   const latest = Ctor.options
   const sealed = Ctor.sealedOptions

package/src/core/instance/inject.ts

@@ -0,0 +1,72 @@
+import { warn, hasSymbol, isFunction } from '../util/index'
+import { defineReactive, toggleObserving } from '../observer/index'
+import type { Component } from 'types/component'
+import { provide } from 'v3/apiInject'
+import { setCurrentInstance } from '../../v3/currentInstance'
+
+export function initProvide(vm: Component) {
+  const provideOption = vm.$options.provide
+  if (provideOption) {
+    const provided = isFunction(provideOption)
+      ? provideOption.call(vm)
+      : provideOption
+    const keys = hasSymbol ? Reflect.ownKeys(provided) : Object.keys(provided)
+    setCurrentInstance(vm)
+    for (let i = 0; i < keys.length; i++) {
+      provide(keys[i], provided[keys[i]])
+    }
+    setCurrentInstance()
+  }
+}
+
+export function initInjections(vm: Component) {
+  const result = resolveInject(vm.$options.inject, vm)
+  if (result) {
+    toggleObserving(false)
+    Object.keys(result).forEach(key => {
+      /* istanbul ignore else */
+      if (__DEV__) {
+        defineReactive(vm, key, result[key], () => {
+          warn(
+            `Avoid mutating an injected value directly since the changes will be ` +
+              `overwritten whenever the provided component re-renders. ` +
+              `injection being mutated: "${key}"`,
+            vm
+          )
+        })
+      } else {
+        defineReactive(vm, key, result[key])
+      }
+    })
+    toggleObserving(true)
+  }
+}
+
+export function resolveInject(
+  inject: any,
+  vm: Component
+): Record<string, any> | undefined | null {
+  if (inject) {
+    // inject is :any because flow is not smart enough to figure out cached
+    const result = Object.create(null)
+    const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject)
+
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      // #6574 in case the inject object is observed...
+      if (key === '__ob__') continue
+      const provideKey = inject[key].from
+      if (provideKey in vm._provided) {
+        result[key] = vm._provided[provideKey]
+      } else if ('default' in inject[key]) {
+        const provideDefault = inject[key].default
+        result[key] = isFunction(provideDefault)
+          ? provideDefault.call(vm)
+          : provideDefault
+      } else if (__DEV__) {
+        warn(`Injection "${key as string}" not found`, vm)
+      }
+    }
+    return result
+  }
+}

package/src/core/instance/{lifecycle.js → lifecycle.ts}

@@ -1,13 +1,13 @@
-/* @flow */
-
 import config from '../config'
-import Watcher from '../observer/watcher'
+import Watcher, { WatcherOptions } from '../observer/watcher'
 import { mark, measure } from '../util/perf'
-import { createEmptyVNode } from '../vdom/vnode'
+import VNode, { createEmptyVNode } from '../vdom/vnode'
 import { updateComponentListeners } from './events'
 import { resolveSlots } from './render-helpers/resolve-slots'
 import { toggleObserving } from '../observer/index'
 import { pushTarget, popTarget } from '../observer/dep'
+import type { Component } from 'types/component'
+import type { MountedComponentVNode } from 'types/vnode'
 
 import {
   warn,
@@ -17,6 +17,8 @@ import {
   validateProp,
   invokeWithErrorHandling
 } from '../util/index'
+import { currentInstance, setCurrentInstance } from 'v3/currentInstance'
+import { syncSetupAttrs } from 'v3/apiSetup'
 
 export let activeInstance: any = null
 export let isUpdatingChildComponent: boolean = false
@@ -29,7 +31,7 @@ export function setActiveInstance(vm: Component) {
   }
 }
 
-export function initLifecycle (vm: Component) {
+export function initLifecycle(vm: Component) {
   const options = vm.$options
 
   // locate first non-abstract parent
@@ -47,6 +49,7 @@ export function initLifecycle (vm: Component) {
   vm.$children = []
   vm.$refs = {}
 
+  vm._provided = parent ? parent._provided : Object.create(null)
   vm._watcher = null
   vm._inactive = null
   vm._directInactive = false
@@ -55,7 +58,7 @@ export function initLifecycle (vm: Component) {
   vm._isBeingDestroyed = false
 }
 
-export function lifecycleMixin (Vue: Class<Component>) {
+export function lifecycleMixin(Vue: typeof Component) {
   Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
     const vm: Component = this
     const prevEl = vm.$el
@@ -106,14 +109,9 @@ export function lifecycleMixin (Vue: Class<Component>) {
     if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
       remove(parent.$children, vm)
     }
-    // teardown watchers
-    if (vm._watcher) {
-      vm._watcher.teardown()
-    }
-    let i = vm._watchers.length
-    while (i--) {
-      vm._watchers[i].teardown()
-    }
+    // teardown scope. this includes both the render watcher and other
+    // watchers created
+    vm._scope.stop()
     // remove reference from data ob
     // frozen object may not have observer.
     if (vm._data.__ob__) {
@@ -138,22 +136,26 @@ export function lifecycleMixin (Vue: Class<Component>) {
   }
 }
 
-export function mountComponent (
+export function mountComponent(
   vm: Component,
-  el: ?Element,
+  el: Element | null | undefined,
   hydrating?: boolean
 ): Component {
   vm.$el = el
   if (!vm.$options.render) {
+    // @ts-expect-error invalid type
     vm.$options.render = createEmptyVNode
-    if (process.env.NODE_ENV !== 'production') {
+    if (__DEV__) {
       /* istanbul ignore if */
-      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
-        vm.$options.el || el) {
+      if (
+        (vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
+        vm.$options.el ||
+        el
+      ) {
         warn(
           'You are using the runtime-only build of Vue where the template ' +
-          'compiler is not available. Either pre-compile the templates into ' +
-          'render functions, or use the compiler-included build.',
+            'compiler is not available. Either pre-compile the templates into ' +
+            'render functions, or use the compiler-included build.',
           vm
         )
       } else {
@@ -168,7 +170,7 @@ export function mountComponent (
 
   let updateComponent
   /* istanbul ignore if */
-  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
+  if (__DEV__ && config.performance && mark) {
     updateComponent = () => {
       const name = vm._name
       const id = vm._uid
@@ -191,35 +193,54 @@ export function mountComponent (
     }
   }
 
-  // we set this to vm._watcher inside the watcher's constructor
-  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
-  // component's mounted hook), which relies on vm._watcher being already defined
-  new Watcher(vm, updateComponent, noop, {
-    before () {
+  const watcherOptions: WatcherOptions = {
+    before() {
       if (vm._isMounted && !vm._isDestroyed) {
         callHook(vm, 'beforeUpdate')
       }
     }
-  }, true /* isRenderWatcher */)
+  }
+
+  if (__DEV__) {
+    watcherOptions.onTrack = e => callHook(vm, 'renderTracked', [e])
+    watcherOptions.onTrigger = e => callHook(vm, 'renderTriggered', [e])
+  }
+
+  // we set this to vm._watcher inside the watcher's constructor
+  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
+  // component's mounted hook), which relies on vm._watcher being already defined
+  new Watcher(
+    vm,
+    updateComponent,
+    noop,
+    watcherOptions,
+    true /* isRenderWatcher */
+  )
   hydrating = false
 
   // manually mounted instance, call mounted on self
   // mounted is called for render-created child components in its inserted hook
   if (vm.$vnode == null) {
+    const preWatchers = vm._preWatchers
+    if (preWatchers) {
+      for (let i = 0; i < preWatchers.length; i++) {
+        preWatchers[i].run()
+      }
+    }
     vm._isMounted = true
     callHook(vm, 'mounted')
   }
   return vm
 }
 
-export function updateChildComponent (
+export function updateChildComponent(
   vm: Component,
-  propsData: ?Object,
-  listeners: ?Object,
+  propsData: Record<string, any> | null | undefined,
+  listeners: Record<string, Function | Array<Function>> | undefined,
   parentVnode: MountedComponentVNode,
-  renderChildren: ?Array<VNode>
+  renderChildren?: Array<VNode> | null
 ) {
-  if (process.env.NODE_ENV !== 'production') {
+  if (__DEV__) {
     isUpdatingChildComponent = true
   }
 
@@ -241,16 +262,18 @@ export function updateChildComponent (
   // Any static slot children from the parent may have changed during parent's
   // update. Dynamic scoped slots may also have changed. In such cases, a forced
   // update is necessary to ensure correctness.
-  const needsForceUpdate = !!(
-    renderChildren ||               // has new static slots
-    vm.$options._renderChildren ||  // has old static slots
+  let needsForceUpdate = !!(
+    renderChildren || // has new static slots
+    vm.$options._renderChildren || // has old static slots
     hasDynamicScopedSlot
   )
 
+  const prevVNode = vm.$vnode
   vm.$options._parentVnode = parentVnode
   vm.$vnode = parentVnode // update vm's placeholder node without re-render
 
-  if (vm._vnode) { // update child tree's parent
+  if (vm._vnode) {
+    // update child tree's parent
     vm._vnode.parent = parentVnode
   }
   vm.$options._renderChildren = renderChildren
@@ -258,7 +281,23 @@ export function updateChildComponent (
   // update $attrs and $listeners hash
   // these are also reactive so they may trigger child update if the child
   // used them during render
-  vm.$attrs = parentVnode.data.attrs || emptyObject
+  const attrs = parentVnode.data.attrs || emptyObject
+  if (vm._attrsProxy) {
+    // force update if attrs are accessed and has changed since it may be
+    // passed to a child component.
+    if (
+      syncSetupAttrs(
+        vm._attrsProxy,
+        attrs,
+        (prevVNode.data && prevVNode.data.attrs) || emptyObject,
+        vm
+      )
+    ) {
+      needsForceUpdate = true
+    }
+  }
+  vm.$attrs = attrs
+
   vm.$listeners = listeners || emptyObject
 
   // update props
@@ -288,19 +327,19 @@ export function updateChildComponent (
     vm.$forceUpdate()
   }
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (__DEV__) {
     isUpdatingChildComponent = false
   }
 }
 
-function isInInactiveTree (vm) {
+function isInInactiveTree(vm) {
   while (vm && (vm = vm.$parent)) {
     if (vm._inactive) return true
   }
   return false
 }
 
-export function activateChildComponent (vm: Component, direct?: boolean) {
+export function activateChildComponent(vm: Component, direct?: boolean) {
   if (direct) {
     vm._directInactive = false
     if (isInInactiveTree(vm)) {
@@ -318,7 +357,7 @@ export function activateChildComponent (vm: Component, direct?: boolean) {
   }
 }
 
-export function deactivateChildComponent (vm: Component, direct?: boolean) {
+export function deactivateChildComponent(vm: Component, direct?: boolean) {
   if (direct) {
     vm._directInactive = true
     if (isInInactiveTree(vm)) {
@@ -334,18 +373,21 @@ export function deactivateChildComponent (vm: Component, direct?: boolean) {
   }
 }
 
-export function callHook (vm: Component, hook: string) {
+export function callHook(vm: Component, hook: string, args?: any[]) {
   // #7573 disable dep collection when invoking lifecycle hooks
   pushTarget()
+  const prev = currentInstance
+  setCurrentInstance(vm)
   const handlers = vm.$options[hook]
   const info = `${hook} hook`
   if (handlers) {
     for (let i = 0, j = handlers.length; i < j; i++) {
-      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
+      invokeWithErrorHandling(handlers[i], vm, args || null, vm, info)
     }
   }
   if (vm._hasHookEvent) {
     vm.$emit('hook:' + hook)
   }
+  setCurrentInstance(prev)
   popTarget()
 }