vue 2.7.2 → 2.7.5

package/packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.2",
+  "version": "2.7.5",
   "description": "compiler-sfc for Vue 2",
   "main": "dist/compiler-sfc.js",
   "types": "dist/compiler-sfc.d.ts",

package/packages/compiler-sfc/src/parseComponent.ts

@@ -10,7 +10,6 @@ export const DEFAULT_FILENAME = 'anonymous.vue'
 const splitRE = /\r?\n/g
 const replaceRE = /./g
 const isSpecialTag = makeMap('script,style,template', true)
-const isNeedIndentLang = makeMap('pug,jade')
 
 export interface SFCCustomBlock {
   type: string
@@ -179,9 +178,13 @@ export function parseComponent(
       currentBlock.end = start
       let text = source.slice(currentBlock.start, currentBlock.end)
       if (
-        options.deindent ||
-        // certain langs like pug are indent sensitive, preserve old behavior
-        (currentBlock.lang && isNeedIndentLang(currentBlock.lang))
+        options.deindent === true ||
+        // by default, deindent unless it's script with default lang or ts
+        (options.deindent !== false &&
+          !(
+            currentBlock.type === 'script' &&
+            (!currentBlock.lang || currentBlock.lang === 'ts')
+          ))
       ) {
         text = deindent(text)
       }

package/packages/compiler-sfc/test/parseComponent.spec.ts

@@ -25,8 +25,7 @@ describe('Single File Component parser', () => {
       <div>
         <style>nested should be ignored</style>
       </div>
-    `,
-      { deindent: true }
+    `
     )
     expect(res.template!.content.trim()).toBe('<div>hi</div>')
     expect(res.styles.length).toBe(4)
@@ -76,8 +75,7 @@ describe('Single File Component parser', () => {
       </style>
     `
     const deindentDefault = parseComponent(content.trim(), {
-      pad: false,
-      deindent: true
+      pad: false
     })
     const deindentEnabled = parseComponent(content.trim(), {
       pad: false,
@@ -89,7 +87,9 @@ describe('Single File Component parser', () => {
     })
 
     expect(deindentDefault.template!.content).toBe('\n<div></div>\n')
-    expect(deindentDefault.script!.content).toBe('\nexport default {}\n')
+    expect(deindentDefault.script!.content).toBe(
+      '\n        export default {}\n      '
+    )
     expect(deindentDefault.styles[0].content).toBe('\nh1 { color: red }\n')
     expect(deindentEnabled.template!.content).toBe('\n<div></div>\n')
     expect(deindentEnabled.script!.content).toBe('\nexport default {}\n')
@@ -203,8 +203,7 @@ describe('Single File Component parser', () => {
       }
       </test>
       <custom src="./x.json"></custom>
-    `,
-      { deindent: true }
+    `
     )
     expect(res.customBlocks.length).toBe(4)
 

package/src/core/components/keep-alive.ts

@@ -3,6 +3,7 @@ import { getFirstComponentChild } from 'core/vdom/helpers/index'
 import type VNode from 'core/vdom/vnode'
 import type { VNodeComponentOptions } from 'types/vnode'
 import type { Component } from 'types/component'
+import { getComponentName } from '../vdom/create-component'
 
 type CacheEntry = {
   name?: string
@@ -12,8 +13,8 @@ type CacheEntry = {
 
 type CacheEntryMap = Record<string, CacheEntry | null>
 
-function getComponentName(opts?: VNodeComponentOptions): string | null {
-  return opts && (opts.Ctor.options.name || opts.tag)
+function _getComponentName(opts?: VNodeComponentOptions): string | null {
+  return opts && (getComponentName(opts.Ctor.options as any) || opts.tag)
 }
 
 function matches(
@@ -81,7 +82,7 @@ export default {
       if (vnodeToCache) {
         const { tag, componentInstance, componentOptions } = vnodeToCache
         cache[keyToCache] = {
-          name: getComponentName(componentOptions),
+          name: _getComponentName(componentOptions),
           tag,
           componentInstance
         }
@@ -126,7 +127,7 @@ export default {
     const componentOptions = vnode && vnode.componentOptions
     if (componentOptions) {
       // check pattern
-      const name = getComponentName(componentOptions)
+      const name = _getComponentName(componentOptions)
       const { include, exclude } = this
       if (
         // not included

package/src/core/global-api/extend.ts

@@ -3,6 +3,7 @@ import type { Component } from 'types/component'
 import type { GlobalAPI } from 'types/global-api'
 import { defineComputed, proxy } from '../instance/state'
 import { extend, mergeOptions, validateComponentName } from '../util/index'
+import { getComponentName } from '../vdom/create-component'
 
 export function initExtend(Vue: GlobalAPI) {
   /**
@@ -25,7 +26,8 @@ export function initExtend(Vue: GlobalAPI) {
       return cachedCtors[SuperId]
     }
 
-    const name = extendOptions.name || Super.options.name
+    const name =
+      getComponentName(extendOptions) || getComponentName(Super.options)
     if (__DEV__ && name) {
       validateComponentName(name)
     }

package/src/core/instance/init.ts

@@ -58,7 +58,7 @@ export function initMixin(Vue: typeof Component) {
     initLifecycle(vm)
     initEvents(vm)
     initRender(vm)
-    callHook(vm, 'beforeCreate')
+    callHook(vm, 'beforeCreate', undefined, false /* setContext */)
     initInjections(vm) // resolve injections before data/props
     initState(vm)
     initProvide(vm) // resolve provide after data/props

package/src/core/instance/lifecycle.ts

@@ -375,11 +375,16 @@ export function deactivateChildComponent(vm: Component, direct?: boolean) {
   }
 }
 
-export function callHook(vm: Component, hook: string, args?: any[]) {
+export function callHook(
+  vm: Component,
+  hook: string,
+  args?: any[],
+  setContext = true
+) {
   // #7573 disable dep collection when invoking lifecycle hooks
   pushTarget()
   const prev = currentInstance
-  setCurrentInstance(vm)
+  setContext && setCurrentInstance(vm)
   const handlers = vm.$options[hook]
   const info = `${hook} hook`
   if (handlers) {
@@ -390,6 +395,6 @@ export function callHook(vm: Component, hook: string, args?: any[]) {
   if (vm._hasHookEvent) {
     vm.$emit('hook:' + hook)
   }
-  setCurrentInstance(prev)
+  setContext && setCurrentInstance(prev)
   popTarget()
 }

package/src/core/instance/render-helpers/render-static.ts

@@ -18,7 +18,7 @@ export function renderStatic(
   // otherwise, render a fresh tree.
   tree = cached[index] = this.$options.staticRenderFns[index].call(
     this._renderProxy,
-    null,
+    this._c,
     this // for render fns generated for functional component templates
   )
   markStatic(tree, `__static__${index}`, false)

package/src/core/observer/index.ts

@@ -13,7 +13,8 @@ import {
   isUndef,
   isValidArrayIndex,
   isServerRendering,
-  hasChanged
+  hasChanged,
+  noop
 } from '../util/index'
 import { isReadonly, isRef, TrackOpTypes, TriggerOpTypes } from '../../v3'
 
@@ -31,6 +32,14 @@ export function toggleObserving(value: boolean) {
   shouldObserve = value
 }
 
+// ssr mock dep
+const mockDep = {
+  notify: noop,
+  depend: noop,
+  addSub: noop,
+  removeSub: noop
+} as Dep
+
 /**
  * Observer class that is attached to each observed
  * object. Once attached, the observer converts the target
@@ -41,78 +50,63 @@ export class Observer {
   dep: Dep
   vmCount: number // number of vms that have this object as root $data
 
-  constructor(public value: any, public shallow = false) {
+  constructor(public value: any, public shallow = false, public mock = false) {
     // this.value = value
-    this.dep = new Dep()
+    this.dep = mock ? mockDep : new Dep()
     this.vmCount = 0
     def(value, '__ob__', this)
     if (isArray(value)) {
-      if (hasProto) {
-        protoAugment(value, arrayMethods)
-      } else {
-        copyAugment(value, arrayMethods, arrayKeys)
+      if (!mock) {
+        if (hasProto) {
+          /* eslint-disable no-proto */
+          ;(value as any).__proto__ = arrayMethods
+          /* eslint-enable no-proto */
+        } else {
+          for (let i = 0, l = arrayKeys.length; i < l; i++) {
+            const key = arrayKeys[i]
+            def(value, key, arrayMethods[key])
+          }
+        }
       }
       if (!shallow) {
         this.observeArray(value)
       }
     } else {
-      this.walk(value, shallow)
-    }
-  }
-
-  /**
-   * Walk through all properties and convert them into
-   * getter/setters. This method should only be called when
-   * value type is Object.
-   */
-  walk(obj: object, shallow: boolean) {
-    const keys = Object.keys(obj)
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i]
-      defineReactive(obj, key, NO_INIITIAL_VALUE, undefined, shallow)
+      /**
+       * Walk through all properties and convert them into
+       * getter/setters. This method should only be called when
+       * value type is Object.
+       */
+      const keys = Object.keys(value)
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i]
+        defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock)
+      }
     }
   }
 
   /**
    * Observe a list of Array items.
    */
-  observeArray(items: Array<any>) {
-    for (let i = 0, l = items.length; i < l; i++) {
-      observe(items[i])
+  observeArray(value: any[]) {
+    for (let i = 0, l = value.length; i < l; i++) {
+      observe(value[i], false, this.mock)
     }
   }
 }
 
 // helpers
 
-/**
- * Augment a target Object or Array by intercepting
- * the prototype chain using __proto__
- */
-function protoAugment(target, src: Object) {
-  /* eslint-disable no-proto */
-  target.__proto__ = src
-  /* eslint-enable no-proto */
-}
-
-/**
- * Augment a target Object or Array by defining
- * hidden properties.
- */
-/* istanbul ignore next */
-function copyAugment(target: Object, src: Object, keys: Array<string>) {
-  for (let i = 0, l = keys.length; i < l; i++) {
-    const key = keys[i]
-    def(target, key, src[key])
-  }
-}
-
 /**
  * Attempt to create an observer instance for a value,
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
-export function observe(value: any, shallow?: boolean): Observer | void {
+export function observe(
+  value: any,
+  shallow?: boolean,
+  ssrMockReactivity?: boolean
+): Observer | void {
   if (!isObject(value) || isRef(value) || value instanceof VNode) {
     return
   }
@@ -121,12 +115,12 @@ export function observe(value: any, shallow?: boolean): Observer | void {
     ob = value.__ob__
   } else if (
     shouldObserve &&
-    !isServerRendering() &&
+    (ssrMockReactivity || !isServerRendering()) &&
     (isArray(value) || isPlainObject(value)) &&
     Object.isExtensible(value) &&
-    !value.__v_skip
+    !value.__v_skip /* ReactiveFlags.SKIP */
   ) {
-    ob = new Observer(value, shallow)
+    ob = new Observer(value, shallow, ssrMockReactivity)
   }
   return ob
 }
@@ -139,7 +133,8 @@ export function defineReactive(
   key: string,
   val?: any,
   customSetter?: Function | null,
-  shallow?: boolean
+  shallow?: boolean,
+  mock?: boolean
 ) {
   const dep = new Dep()
 
@@ -158,7 +153,7 @@ export function defineReactive(
     val = obj[key]
   }
 
-  let childOb = !shallow && observe(val)
+  let childOb = !shallow && observe(val, false, mock)
   Object.defineProperty(obj, key, {
     enumerable: true,
     configurable: true,
@@ -202,7 +197,7 @@ export function defineReactive(
       } else {
         val = newVal
       }
-      childOb = !shallow && observe(newVal)
+      childOb = !shallow && observe(newVal, false, mock)
       if (__DEV__) {
         dep.notify({
           type: TriggerOpTypes.SET,
@@ -241,16 +236,20 @@ export function set(
     __DEV__ && warn(`Set operation on key "${key}" failed: target is readonly.`)
     return
   }
+  const ob = (target as any).__ob__
   if (isArray(target) && isValidArrayIndex(key)) {
     target.length = Math.max(target.length, key)
     target.splice(key, 1, val)
+    // when mocking for SSR, array methods are not hijacked
+    if (ob && !ob.shallow && ob.mock) {
+      observe(val, false, true)
+    }
     return val
   }
   if (key in target && !(key in Object.prototype)) {
     target[key] = val
     return val
   }
-  const ob = (target as any).__ob__
   if ((target as any)._isVue || (ob && ob.vmCount)) {
     __DEV__ &&
       warn(
@@ -263,7 +262,7 @@ export function set(
     target[key] = val
     return val
   }
-  defineReactive(ob.value, key, val)
+  defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock)
   if (__DEV__) {
     ob.dep.notify({
       type: TriggerOpTypes.ADD,

package/src/core/observer/traverse.ts

@@ -1,6 +1,7 @@
 import { _Set as Set, isObject, isArray } from '../util/index'
 import type { SimpleSet } from '../util/index'
 import VNode from '../vdom/vnode'
+import { isRef } from '../../v3'
 
 const seenObjects = new Set()
 
@@ -35,6 +36,8 @@ function _traverse(val: any, seen: SimpleSet) {
   if (isA) {
     i = val.length
     while (i--) _traverse(val[i], seen)
+  } else if (isRef(val)) {
+    _traverse(val.value, seen)
   } else {
     keys = Object.keys(val)
     i = keys.length

package/src/core/util/debug.ts

@@ -2,6 +2,7 @@ import config from '../config'
 import { noop, isArray, isFunction } from 'shared/util'
 import type { Component } from 'types/component'
 import { currentInstance } from 'v3/currentInstance'
+import { getComponentName } from '../vdom/create-component'
 
 export let warn: (msg: string, vm?: Component | null) => void = noop
 export let tip = noop
@@ -40,7 +41,7 @@ if (__DEV__) {
         : vm._isVue
         ? vm.$options || (vm.constructor as any).options
         : vm
-    let name = options.name || options._componentTag
+    let name = getComponentName(options)
     const file = options.__file
     if (!name && file) {
       const match = file.match(/([^/\\]+)\.vue$/)

package/src/core/vdom/create-component.ts

@@ -28,6 +28,10 @@ import type {
 import type { Component } from 'types/component'
 import type { ComponentOptions, InternalComponentOptions } from 'types/options'
 
+export function getComponentName(options: ComponentOptions) {
+  return options.name || options.__name || options._componentTag
+}
+
 // inline hooks to be invoked on component VNodes during patch
 const componentVNodeHooks = {
   init(vnode: VNodeWithData, hydrating: boolean): boolean | void {
@@ -188,7 +192,7 @@ export function createComponent(
 
   // return a placeholder vnode
   // @ts-expect-error
-  const name = Ctor.options.name || tag
+  const name = getComponentName(Ctor.options) || tag
   const vnode = new VNode(
     // @ts-expect-error
     `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,

package/src/platforms/web/runtime/components/transition-group.ts

@@ -23,6 +23,7 @@ import {
 } from 'web/runtime/transition-util'
 import VNode from 'core/vdom/vnode'
 import { VNodeWithData } from 'types/vnode'
+import { getComponentName } from 'core/vdom/create-component'
 
 const props = extend(
   {
@@ -72,7 +73,7 @@ export default {
         } else if (__DEV__) {
           const opts = c.componentOptions
           const name: string = opts
-            ? opts.Ctor.options.name || opts.tag || ''
+            ? getComponentName(opts.Ctor.options as any) || opts.tag || ''
             : c.tag
           warn(`<transition-group> children must be keyed: <${name}>`)
         }

package/src/shared/constants.ts

@@ -14,5 +14,7 @@ export const LIFECYCLE_HOOKS = [
   'activated',
   'deactivated',
   'errorCaptured',
-  'serverPrefetch'
+  'serverPrefetch',
+  'renderTracked',
+  'renderTriggered'
 ] as const

package/src/v3/apiAsyncComponent.ts

@@ -0,0 +1,117 @@
+import { warn, isFunction, isObject } from 'core/util'
+
+interface AsyncComponentOptions {
+  loader: Function
+  loadingComponent?: any
+  errorComponent?: any
+  delay?: number
+  timeout?: number
+  suspensible?: boolean
+  onError?: (
+    error: Error,
+    retry: () => void,
+    fail: () => void,
+    attempts: number
+  ) => any
+}
+
+type AsyncComponentFactory = () => {
+  component: Promise<any>
+  loading?: any
+  error?: any
+  delay?: number
+  timeout?: number
+}
+
+/**
+ * v3-compatible async component API.
+ * @internal the type is manually declared in <root>/types/v3-define-async-component.d.ts
+ * because it relies on existing manual types
+ */
+export function defineAsyncComponent(
+  source: (() => any) | AsyncComponentOptions
+): AsyncComponentFactory {
+  if (isFunction(source)) {
+    source = { loader: source } as AsyncComponentOptions
+  }
+
+  const {
+    loader,
+    loadingComponent,
+    errorComponent,
+    delay = 200,
+    timeout, // undefined = never times out
+    suspensible = false, // in Vue 3 default is true
+    onError: userOnError
+  } = source
+
+  if (__DEV__ && suspensible) {
+    warn(
+      `The suspensiblbe option for async components is not supported in Vue2. It is ignored.`
+    )
+  }
+
+  let pendingRequest: Promise<any> | null = null
+
+  let retries = 0
+  const retry = () => {
+    retries++
+    pendingRequest = null
+    return load()
+  }
+
+  const load = (): Promise<any> => {
+    let thisRequest: Promise<any>
+    return (
+      pendingRequest ||
+      (thisRequest = pendingRequest =
+        loader()
+          .catch(err => {
+            err = err instanceof Error ? err : new Error(String(err))
+            if (userOnError) {
+              return new Promise((resolve, reject) => {
+                const userRetry = () => resolve(retry())
+                const userFail = () => reject(err)
+                userOnError(err, userRetry, userFail, retries + 1)
+              })
+            } else {
+              throw err
+            }
+          })
+          .then((comp: any) => {
+            if (thisRequest !== pendingRequest && pendingRequest) {
+              return pendingRequest
+            }
+            if (__DEV__ && !comp) {
+              warn(
+                `Async component loader resolved to undefined. ` +
+                  `If you are using retry(), make sure to return its return value.`
+              )
+            }
+            // interop module default
+            if (
+              comp &&
+              (comp.__esModule || comp[Symbol.toStringTag] === 'Module')
+            ) {
+              comp = comp.default
+            }
+            if (__DEV__ && comp && !isObject(comp) && !isFunction(comp)) {
+              throw new Error(`Invalid async component load result: ${comp}`)
+            }
+            return comp
+          }))
+    )
+  }
+
+  return () => {
+    const component = load()
+
+    return {
+      component,
+      delay,
+      timeout,
+      error: errorComponent,
+      loading: loadingComponent
+    }
+  }
+}

package/src/v3/apiWatch.ts

@@ -196,12 +196,10 @@ function doWatch(
     getter = () => source.value
     forceTrigger = isShallow(source)
   } else if (isReactive(source)) {
-    getter = isArray(source)
-      ? () => {
-          ;(source as any).__ob__.dep.depend()
-          return source
-        }
-      : () => source
+    getter = () => {
+      ;(source as any).__ob__.dep.depend()
+      return source
+    }
     deep = true
   } else if (isArray(source)) {
     isMultiSource = true
@@ -320,8 +318,8 @@ function doWatch(
   } else {
     // pre
     watcher.update = () => {
-      if (instance && instance === currentInstance) {
-        // pre-watcher triggered inside setup()
+      if (instance && instance === currentInstance && !instance._isMounted) {
+        // pre-watcher triggered before
         const buffer = instance._preWatchers || (instance._preWatchers = [])
         if (buffer.indexOf(watcher) < 0) buffer.push(watcher)
       } else {

package/src/v3/index.ts

@@ -1,3 +1,7 @@
+/**
+ * Note: also update dist/vue.runtime.mjs when adding new exports to this file.
+ */
+
 export const version: string = '__VERSION__'
 
 export {
@@ -87,4 +91,6 @@ export function defineComponent(options: any) {
   return options
 }
 
+export { defineAsyncComponent } from './apiAsyncComponent'
+
 export * from './apiLifecycle'

package/src/v3/reactivity/reactive.ts

@@ -1,5 +1,12 @@
 import { observe, Observer } from 'core/observer'
-import { def, isArray, isPrimitive, warn, toRawType } from 'core/util'
+import {
+  def,
+  isArray,
+  isPrimitive,
+  warn,
+  toRawType,
+  isServerRendering
+} from 'core/util'
 import type { Ref, UnwrapRefSimple, RawSymbol } from './ref'
 
 export const enum ReactiveFlags {
@@ -67,7 +74,11 @@ function makeReactive(target: any, shallow: boolean) {
         )
       }
     }
-    const ob = observe(target, shallow)
+    const ob = observe(
+      target,
+      shallow,
+      isServerRendering() /* ssr mock reactivity */
+    )
     if (__DEV__ && !ob) {
       if (target == null || isPrimitive(target)) {
         warn(`value cannot be made reactive: ${String(target)}`)