vue 2.6.13 → 2.7.0-alpha.2

package/src/core/observer/{watcher.js → watcher.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import {
   warn,
   remove,
@@ -8,53 +6,76 @@ import {
   _Set as Set,
   handleError,
   invokeWithErrorHandling,
-  noop
+  noop,
+  isFunction
 } from '../util/index'
 
 import { traverse } from './traverse'
 import { queueWatcher } from './scheduler'
-import Dep, { pushTarget, popTarget } from './dep'
+import Dep, { pushTarget, popTarget, DepTarget } from './dep'
+import { DebuggerEvent, DebuggerOptions } from 'v3/debug'
 
 import type { SimpleSet } from '../util/index'
+import type { Component } from 'types/component'
+import { activeEffectScope, recordEffectScope } from 'v3/reactivity/effectScope'
 
 let uid = 0
 
+/**
+ * @internal
+ */
+export interface WatcherOptions extends DebuggerOptions {
+  deep?: boolean
+  user?: boolean
+  lazy?: boolean
+  sync?: boolean
+  before?: Function
+}
+
 /**
  * A watcher parses an expression, collects dependencies,
  * and fires callback when the expression value changes.
  * This is used for both the $watch() api and directives.
+ * @internal
  */
-export default class Watcher {
-  vm: Component;
-  expression: string;
-  cb: Function;
-  id: number;
-  deep: boolean;
-  user: boolean;
-  lazy: boolean;
-  sync: boolean;
-  dirty: boolean;
-  active: boolean;
-  deps: Array<Dep>;
-  newDeps: Array<Dep>;
-  depIds: SimpleSet;
-  newDepIds: SimpleSet;
-  before: ?Function;
-  getter: Function;
-  value: any;
+export default class Watcher implements DepTarget {
+  vm?: Component | null
+  expression: string
+  cb: Function
+  id: number
+  deep: boolean
+  user: boolean
+  lazy: boolean
+  sync: boolean
+  dirty: boolean
+  active: boolean
+  deps: Array<Dep>
+  newDeps: Array<Dep>
+  depIds: SimpleSet
+  newDepIds: SimpleSet
+  before?: Function
+  onStop?: Function
+  noRecurse?: boolean
+  getter: Function
+  value: any
+
+  // dev only
+  onTrack?: ((event: DebuggerEvent) => void) | undefined
+  onTrigger?: ((event: DebuggerEvent) => void) | undefined
 
-  constructor (
-    vm: Component,
-    expOrFn: string | Function,
+  constructor(
+    vm: Component | null,
+    expOrFn: string | (() => any),
     cb: Function,
-    options?: ?Object,
+    options?: WatcherOptions | null,
     isRenderWatcher?: boolean
   ) {
-    this.vm = vm
-    if (isRenderWatcher) {
-      vm._watcher = this
+    recordEffectScope(this, activeEffectScope || (vm ? vm._scope : undefined))
+    if ((this.vm = vm)) {
+      if (isRenderWatcher) {
+        vm._watcher = this
+      }
     }
-    vm._watchers.push(this)
     // options
     if (options) {
       this.deep = !!options.deep
@@ -62,6 +83,10 @@ export default class Watcher {
       this.lazy = !!options.lazy
       this.sync = !!options.sync
       this.before = options.before
+      if (__DEV__) {
+        this.onTrack = options.onTrack
+        this.onTrigger = options.onTrigger
+      }
     } else {
       this.deep = this.user = this.lazy = this.sync = false
     }
@@ -73,39 +98,36 @@ export default class Watcher {
     this.newDeps = []
     this.depIds = new Set()
     this.newDepIds = new Set()
-    this.expression = process.env.NODE_ENV !== 'production'
-      ? expOrFn.toString()
-      : ''
+    this.expression = __DEV__ ? expOrFn.toString() : ''
     // parse expression for getter
-    if (typeof expOrFn === 'function') {
+    if (isFunction(expOrFn)) {
       this.getter = expOrFn
     } else {
       this.getter = parsePath(expOrFn)
       if (!this.getter) {
         this.getter = noop
-        process.env.NODE_ENV !== 'production' && warn(
-          `Failed watching path: "${expOrFn}" ` +
-          'Watcher only accepts simple dot-delimited paths. ' +
-          'For full control, use a function instead.',
-          vm
-        )
+        __DEV__ &&
+          warn(
+            `Failed watching path: "${expOrFn}" ` +
+              'Watcher only accepts simple dot-delimited paths. ' +
+              'For full control, use a function instead.',
+            vm
+          )
       }
     }
-    this.value = this.lazy
-      ? undefined
-      : this.get()
+    this.value = this.lazy ? undefined : this.get()
   }
 
   /**
    * Evaluate the getter, and re-collect dependencies.
    */
-  get () {
+  get() {
     pushTarget(this)
     let value
     const vm = this.vm
     try {
       value = this.getter.call(vm, vm)
-    } catch (e) {
+    } catch (e: any) {
       if (this.user) {
         handleError(e, vm, `getter for watcher "${this.expression}"`)
       } else {
@@ -126,7 +148,7 @@ export default class Watcher {
   /**
    * Add a dependency to this directive.
    */
-  addDep (dep: Dep) {
+  addDep(dep: Dep) {
     const id = dep.id
     if (!this.newDepIds.has(id)) {
       this.newDepIds.add(id)
@@ -140,7 +162,7 @@ export default class Watcher {
   /**
    * Clean up for dependency collection.
    */
-  cleanupDeps () {
+  cleanupDeps() {
     let i = this.deps.length
     while (i--) {
       const dep = this.deps[i]
@@ -148,7 +170,7 @@ export default class Watcher {
         dep.removeSub(this)
       }
     }
-    let tmp = this.depIds
+    let tmp: any = this.depIds
     this.depIds = this.newDepIds
     this.newDepIds = tmp
     this.newDepIds.clear()
@@ -162,7 +184,7 @@ export default class Watcher {
    * Subscriber interface.
    * Will be called when a dependency changes.
    */
-  update () {
+  update() {
     /* istanbul ignore else */
     if (this.lazy) {
       this.dirty = true
@@ -177,7 +199,7 @@ export default class Watcher {
    * Scheduler job interface.
    * Will be called by the scheduler.
    */
-  run () {
+  run() {
     if (this.active) {
       const value = this.get()
       if (
@@ -193,7 +215,13 @@ export default class Watcher {
         this.value = value
         if (this.user) {
           const info = `callback for watcher "${this.expression}"`
-          invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
+          invokeWithErrorHandling(
+            this.cb,
+            this.vm,
+            [value, oldValue],
+            this.vm,
+            info
+          )
         } else {
           this.cb.call(this.vm, value, oldValue)
         }
@@ -205,7 +233,7 @@ export default class Watcher {
    * Evaluate the value of the watcher.
    * This only gets called for lazy watchers.
    */
-  evaluate () {
+  evaluate() {
     this.value = this.get()
     this.dirty = false
   }
@@ -213,7 +241,7 @@ export default class Watcher {
   /**
    * Depend on all deps collected by this watcher.
    */
-  depend () {
+  depend() {
     let i = this.deps.length
     while (i--) {
       this.deps[i].depend()
@@ -223,19 +251,19 @@ export default class Watcher {
   /**
    * Remove self from all dependencies' subscriber list.
    */
-  teardown () {
+  teardown() {
+    if (this.vm && !this.vm._isBeingDestroyed) {
+      remove(this.vm._scope.effects, this)
+    }
     if (this.active) {
-      // remove self from vm's watcher list
-      // this is a somewhat expensive operation so we skip it
-      // if the vm is being destroyed.
-      if (!this.vm._isBeingDestroyed) {
-        remove(this.vm._watchers, this)
-      }
       let i = this.deps.length
       while (i--) {
         this.deps[i].removeSub(this)
       }
       this.active = false
+      if (this.onStop) {
+        this.onStop()
+      }
     }
   }
 }

package/src/core/util/{debug.js → debug.ts}

@@ -1,35 +1,32 @@
-/* @flow */
-
 import config from '../config'
-import { noop } from 'shared/util'
+import { noop, isArray, isFunction } from 'shared/util'
+import type { Component } from 'types/component'
+import { currentInstance } from 'v3/currentInstance'
 
 export let warn = noop
 export let tip = noop
-export let generateComponentTrace = (noop: any) // work around flow check
-export let formatComponentName = (noop: any)
+export let generateComponentTrace: (vm: Component) => string // work around flow check
+export let formatComponentName: (vm: Component, includeFile?: false) => string
 
-if (process.env.NODE_ENV !== 'production') {
+if (__DEV__) {
   const hasConsole = typeof console !== 'undefined'
   const classifyRE = /(?:^|[-_])(\w)/g
-  const classify = str => str
-    .replace(classifyRE, c => c.toUpperCase())
-    .replace(/[-_]/g, '')
+  const classify = str =>
+    str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '')
 
-  warn = (msg, vm) => {
+  warn = (msg, vm = currentInstance) => {
     const trace = vm ? generateComponentTrace(vm) : ''
 
     if (config.warnHandler) {
       config.warnHandler.call(null, msg, vm, trace)
-    } else if (hasConsole && (!config.silent)) {
+    } else if (hasConsole && !config.silent) {
       console.error(`[Vue warn]: ${msg}${trace}`)
     }
   }
 
   tip = (msg, vm) => {
-    if (hasConsole && (!config.silent)) {
-      console.warn(`[Vue tip]: ${msg}` + (
-        vm ? generateComponentTrace(vm) : ''
-      ))
+    if (hasConsole && !config.silent) {
+      console.warn(`[Vue tip]: ${msg}` + (vm ? generateComponentTrace(vm) : ''))
     }
   }
 
@@ -37,10 +34,11 @@ if (process.env.NODE_ENV !== 'production') {
     if (vm.$root === vm) {
       return '<Root>'
     }
-    const options = typeof vm === 'function' && vm.cid != null
-      ? vm.options
-      : vm._isVue
-        ? vm.$options || vm.constructor.options
+    const options =
+      isFunction(vm) && (vm as any).cid != null
+        ? (vm as any).options
+        : vm._isVue
+        ? vm.$options || (vm.constructor as any).options
         : vm
     let name = options.name || options._componentTag
     const file = options.__file
@@ -65,16 +63,16 @@ if (process.env.NODE_ENV !== 'production') {
     return res
   }
 
-  generateComponentTrace = vm => {
-    if (vm._isVue && vm.$parent) {
-      const tree = []
+  generateComponentTrace = (vm: Component | undefined) => {
+    if ((vm as any)._isVue && vm!.$parent) {
+      const tree: any[] = []
       let currentRecursiveSequence = 0
       while (vm) {
         if (tree.length > 0) {
           const last = tree[tree.length - 1]
           if (last.constructor === vm.constructor) {
             currentRecursiveSequence++
-            vm = vm.$parent
+            vm = vm.$parent!
             continue
           } else if (currentRecursiveSequence > 0) {
             tree[tree.length - 1] = [last, currentRecursiveSequence]
@@ -82,19 +80,25 @@ if (process.env.NODE_ENV !== 'production') {
           }
         }
         tree.push(vm)
-        vm = vm.$parent
+        vm = vm.$parent!
       }
-      return '\n\nfound in\n\n' + tree
-        .map((vm, i) => `${
-          i === 0 ? '---> ' : repeat(' ', 5 + i * 2)
-        }${
-          Array.isArray(vm)
-            ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)`
-            : formatComponentName(vm)
-        }`)
-        .join('\n')
+      return (
+        '\n\nfound in\n\n' +
+        tree
+          .map(
+            (vm, i) =>
+              `${i === 0 ? '---> ' : repeat(' ', 5 + i * 2)}${
+                isArray(vm)
+                  ? `${formatComponentName(vm[0])}... (${
+                      vm[1]
+                    } recursive calls)`
+                  : formatComponentName(vm)
+              }`
+          )
+          .join('\n')
+      )
     } else {
-      return `\n\n(found in ${formatComponentName(vm)})`
+      return `\n\n(found in ${formatComponentName(vm!)})`
     }
   }
 }

package/src/core/util/{env.js → env.ts}

@@ -1,37 +1,34 @@
-/* @flow */
-
 // can we use __proto__?
 export const hasProto = '__proto__' in {}
 
 // Browser environment sniffing
 export const inBrowser = typeof window !== 'undefined'
-export const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
-export const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
 export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
 export const isIE = UA && /msie|trident/.test(UA)
 export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
 export const isEdge = UA && UA.indexOf('edge/') > 0
-export const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
-export const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
+export const isAndroid = UA && UA.indexOf('android') > 0
+export const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA)
 export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
 export const isPhantomJS = UA && /phantomjs/.test(UA)
 export const isFF = UA && UA.match(/firefox\/(\d+)/)
 
 // Firefox has a "watch" function on Object.prototype...
-export const nativeWatch = ({}).watch
+// @ts-expect-error firebox support
+export const nativeWatch = {}.watch
 
 export let supportsPassive = false
 if (inBrowser) {
   try {
     const opts = {}
-    Object.defineProperty(opts, 'passive', ({
-      get () {
+    Object.defineProperty(opts, 'passive', {
+      get() {
         /* istanbul ignore next */
         supportsPassive = true
       }
-    }: Object)) // https://github.com/facebook/flow/issues/285
-    window.addEventListener('test-passive', null, opts)
-  } catch (e) {}
+    } as object) // https://github.com/facebook/flow/issues/285
+    window.addEventListener('test-passive', null as any, opts)
+  } catch (e: any) {}
 }
 
 // this needs to be lazy-evaled because vue may be required before
@@ -40,10 +37,11 @@ let _isServer
 export const isServerRendering = () => {
   if (_isServer === undefined) {
     /* istanbul ignore if */
-    if (!inBrowser && !inWeex && typeof global !== 'undefined') {
+    if (!inBrowser && typeof global !== 'undefined') {
       // detect presence of vue-server-renderer and avoid
       // Webpack shimming the process
-      _isServer = global['process'] && global['process'].env.VUE_ENV === 'server'
+      _isServer =
+        global['process'] && global['process'].env.VUE_ENV === 'server'
     } else {
       _isServer = false
     }
@@ -55,42 +53,41 @@ export const isServerRendering = () => {
 export const devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 
 /* istanbul ignore next */
-export function isNative (Ctor: any): boolean {
+export function isNative(Ctor: any): boolean {
   return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
 }
 
 export const hasSymbol =
-  typeof Symbol !== 'undefined' && isNative(Symbol) &&
-  typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys)
+  typeof Symbol !== 'undefined' &&
+  isNative(Symbol) &&
+  typeof Reflect !== 'undefined' &&
+  isNative(Reflect.ownKeys)
 
-let _Set
-/* istanbul ignore if */ // $flow-disable-line
-if (typeof Set !== 'undefined' && isNative(Set)) {
+let _Set // $flow-disable-line
+/* istanbul ignore if */ if (typeof Set !== 'undefined' && isNative(Set)) {
   // use native Set when available.
   _Set = Set
 } else {
   // a non-standard Set polyfill that only works with primitive keys.
   _Set = class Set implements SimpleSet {
-    set: Object;
-    constructor () {
-      this.set = Object.create(null)
-    }
-    has (key: string | number) {
+    set: Record<string, boolean> = Object.create(null)
+
+    has(key: string | number) {
       return this.set[key] === true
     }
-    add (key: string | number) {
+    add(key: string | number) {
       this.set[key] = true
     }
-    clear () {
+    clear() {
       this.set = Object.create(null)
     }
   }
 }
 
 export interface SimpleSet {
-  has(key: string | number): boolean;
-  add(key: string | number): mixed;
-  clear(): void;
+  has(key: string | number): boolean
+  add(key: string | number): any
+  clear(): void
 }
 
 export { _Set }

package/src/core/util/{error.js → error.ts}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import config from '../config'
 import { warn } from './debug'
-import { inBrowser, inWeex } from './env'
+import { inBrowser } from './env'
 import { isPromise } from 'shared/util'
 import { pushTarget, popTarget } from '../observer/dep'
 
-export function handleError (err: Error, vm: any, info: string) {
+export function handleError(err: Error, vm: any, info: string) {
   // Deactivate deps tracking while processing error handler to avoid possible infinite rendering.
   // See: https://github.com/vuejs/vuex/issues/1505
   pushTarget()
@@ -20,7 +18,7 @@ export function handleError (err: Error, vm: any, info: string) {
             try {
               const capture = hooks[i].call(cur, err, vm, info) === false
               if (capture) return
-            } catch (e) {
+            } catch (e: any) {
               globalHandleError(e, cur, 'errorCaptured hook')
             }
           }
@@ -33,7 +31,7 @@ export function handleError (err: Error, vm: any, info: string) {
   }
 }
 
-export function invokeWithErrorHandling (
+export function invokeWithErrorHandling(
   handler: Function,
   context: any,
   args: null | any[],
@@ -43,23 +41,23 @@ export function invokeWithErrorHandling (
   let res
   try {
     res = args ? handler.apply(context, args) : handler.call(context)
-    if (res && !res._isVue && isPromise(res) && !res._handled) {
+    if (res && !res._isVue && isPromise(res) && !(res as any)._handled) {
       res.catch(e => handleError(e, vm, info + ` (Promise/async)`))
       // issue #9511
       // avoid catch triggering multiple times when nested calls
-      res._handled = true
+      ;(res as any)._handled = true
     }
-  } catch (e) {
+  } catch (e: any) {
     handleError(e, vm, info)
   }
   return res
 }
 
-function globalHandleError (err, vm, info) {
+function globalHandleError(err, vm, info) {
   if (config.errorHandler) {
     try {
       return config.errorHandler.call(null, err, vm, info)
-    } catch (e) {
+    } catch (e: any) {
       // if the user intentionally throws the original error in the handler,
       // do not log it twice
       if (e !== err) {
@@ -70,12 +68,12 @@ function globalHandleError (err, vm, info) {
   logError(err, vm, info)
 }
 
-function logError (err, vm, info) {
-  if (process.env.NODE_ENV !== 'production') {
+function logError(err, vm, info) {
+  if (__DEV__) {
     warn(`Error in ${info}: "${err.toString()}"`, vm)
   }
   /* istanbul ignore else */
-  if ((inBrowser || inWeex) && typeof console !== 'undefined') {
+  if (inBrowser && typeof console !== 'undefined') {
     console.error(err)
   } else {
     throw err

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

@@ -1,5 +1,3 @@
-/* @flow */
-
 export * from 'shared/util'
 export * from './lang'
 export * from './env'

package/src/core/util/{lang.js → lang.ts}

@@ -1,24 +1,23 @@
-/* @flow */
-
 /**
  * unicode letters used for parsing html tags, component names and property paths.
  * using https://www.w3.org/TR/html53/semantics-scripting.html#potentialcustomelementname
  * skipping \u10000-\uEFFFF due to it freezing up PhantomJS
  */
-export const unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/
+export const unicodeRegExp =
+  /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/
 
 /**
  * Check if a string starts with $ or _
  */
-export function isReserved (str: string): boolean {
+export function isReserved(str: string): boolean {
   const c = (str + '').charCodeAt(0)
-  return c === 0x24 || c === 0x5F
+  return c === 0x24 || c === 0x5f
 }
 
 /**
  * Define a property.
  */
-export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
+export function def(obj: Object, key: string, val: any, enumerable?: boolean) {
   Object.defineProperty(obj, key, {
     value: val,
     enumerable: !!enumerable,
@@ -31,7 +30,7 @@ export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  * Parse simple path.
  */
 const bailRE = new RegExp(`[^${unicodeRegExp.source}.$_\\d]`)
-export function parsePath (path: string): any {
+export function parsePath(path: string): any {
   if (bailRE.test(path)) {
     return
   }