vue 2.7.3 → 2.7.6

package/packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.3",
+  "version": "2.7.6",
   "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

@@ -241,7 +241,7 @@ export function set(
     target.length = Math.max(target.length, key)
     target.splice(key, 1, val)
     // when mocking for SSR, array methods are not hijacked
-    if (!ob.shallow && ob.mock) {
+    if (ob && !ob.shallow && ob.mock) {
       observe(val, false, true)
     }
     return val

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/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/ref.ts

@@ -68,7 +68,7 @@ function createRef(rawValue: unknown, shallow: boolean) {
   }
   const ref: any = {}
   def(ref, RefFlag, true)
-  def(ref, ReactiveFlags.IS_SHALLOW, true)
+  def(ref, ReactiveFlags.IS_SHALLOW, shallow)
   def(
     ref,
     'dep',
@@ -119,7 +119,16 @@ export function proxyWithRefUnwrap(
   Object.defineProperty(target, key, {
     enumerable: true,
     configurable: true,
-    get: () => unref(source[key]),
+    get: () => {
+      const val = source[key]
+      if (isRef(val)) {
+        return val.value
+      } else {
+        const ob = val && val.__ob__
+        if (ob) ob.dep.depend()
+        return val
+      }
+    },
     set: value => {
       const oldValue = source[key]
       if (isRef(oldValue) && !isRef(value)) {

package/types/options.d.ts

@@ -20,7 +20,7 @@ export type Component<
   | typeof Vue
   | FunctionalComponentOptions<Props>
   | ComponentOptions<never, Data, Methods, Computed, Props, SetupBindings>
-  | DefineComponent<any, any, any, any, any>
+  | DefineComponent<any, any, any, any, any, any, any, any, any, any, any>
 
 type EsModule<T> = T | { default: T }
 
@@ -201,9 +201,9 @@ export interface ComponentOptions<
   directives?: { [key: string]: DirectiveFunction | DirectiveOptions }
   components?: {
     [key: string]:
-      | Component<any, any, any, any>
+      | {}
+      | Component<any, any, any, any, any>
       | AsyncComponent<any, any, any, any>
-      | DefineComponent<any, any, any, any, any, any, any, any, any, any>
   }
   transitions?: { [key: string]: object }
   filters?: { [key: string]: Function }
@@ -219,6 +219,8 @@ export interface ComponentOptions<
   parent?: Vue
   mixins?: (ComponentOptions<Vue> | typeof Vue)[]
   name?: string
+  // for SFC auto name inference w/ ts-loader check
+  __name?: string
   // TODO: support properly inferred 'extends'
   extends?: ComponentOptions<Vue> | typeof Vue
   delimiters?: [string, string]

package/types/v3-component-public-instance.d.ts

@@ -1,15 +1,11 @@
-import { ExtractDefaultPropTypes, ExtractPropTypes } from './v3-component-props'
 import {
   DebuggerEvent,
-  nextTick,
   ShallowUnwrapRef,
-  UnwrapNestedRefs,
-  WatchOptions,
-  WatchStopHandle
+  UnwrapNestedRefs
 } from './v3-generated'
-import { Data, UnionToIntersection } from './common'
+import { UnionToIntersection } from './common'
 
-import { VueConstructor } from './vue'
+import { Vue, VueConstructor } from './vue'
 import {
   ComputedOptions,
   MethodOptions,
@@ -17,7 +13,7 @@ import {
   ComponentOptionsMixin,
   ComponentOptionsBase
 } from './v3-component-options'
-import { EmitFn, EmitsOptions, Slots } from './v3-setup-context'
+import { EmitFn, EmitsOptions } from './v3-setup-context'
 
 /**
  * Custom properties added to component instances in any way and can be accessed through `this`
@@ -152,36 +148,44 @@ export type ComponentPublicInstance<
     any,
     any
   >
-> = {
-  // $: ComponentInternalInstance
-  $data: D
-  $props: Readonly<
-    MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
-      : P & PublicProps
-  >
-  $attrs: Data
-  $refs: Data
-  $slots: Slots
-  $root: ComponentPublicInstance | null
-  $parent: ComponentPublicInstance | null
-  $emit: EmitFn<E>
-  $el: any
-  $options: Options & MergedComponentOptionsOverride
-  $forceUpdate: () => void
-  $nextTick: typeof nextTick
-  $watch(
-    source: string | Function,
-    cb: Function,
-    options?: WatchOptions
-  ): WatchStopHandle
-} & Readonly<P> &
+> = Vue3Instance<
+  D,
+  P,
+  PublicProps,
+  E,
+  Defaults,
+  MakeDefaultsOptional,
+  Options
+> &
+  Readonly<P> &
   ShallowUnwrapRef<B> &
   UnwrapNestedRefs<D> &
   ExtractComputedReturns<C> &
   M &
   ComponentCustomProperties
 
+interface Vue3Instance<
+  D,
+  P,
+  PublicProps,
+  E,
+  Defaults,
+  MakeDefaultsOptional,
+  Options
+> extends Vue<
+    D,
+    Readonly<
+      MakeDefaultsOptional extends true
+        ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+        : P & PublicProps
+    >,
+    ComponentPublicInstance | null,
+    ComponentPublicInstance,
+    ComponentPublicInstance[],
+    Options & MergedComponentOptionsOverride,
+    EmitFn<E>
+  > {}
+
 type MergedHook<T = () => void> = T | T[]
 
 export type MergedComponentOptionsOverride = {

package/types/v3-define-async-component.d.ts

@@ -0,0 +1,26 @@
+import { AsyncComponent, Component } from './options'
+
+export type AsyncComponentResolveResult<T = Component> = T | { default: T } // es modules
+
+export type AsyncComponentLoader<T = any> = () => Promise<
+  AsyncComponentResolveResult<T>
+>
+
+export interface AsyncComponentOptions {
+  loader: AsyncComponentLoader
+  loadingComponent?: Component
+  errorComponent?: Component
+  delay?: number
+  timeout?: number
+  // suspensible?: boolean
+  onError?: (
+    error: Error,
+    retry: () => void,
+    fail: () => void,
+    attempts: number
+  ) => any
+}
+
+export function defineAsyncComponent(
+  source: AsyncComponentLoader | AsyncComponentOptions
+): AsyncComponent

package/types/v3-define-component.d.ts

@@ -1,4 +1,3 @@
-import { Component } from '..'
 import {
   ComponentPropsOptions,
   ExtractDefaultPropTypes,
@@ -19,6 +18,7 @@ import {
 } from './v3-component-public-instance'
 import { Data, HasDefined } from './common'
 import { EmitsOptions } from './v3-setup-context'
+import { CreateElement, RenderContext } from './umd'
 
 type DefineComponent<
   PropsOrPropOptions = {},
@@ -67,6 +67,30 @@ type DefineComponent<
     props: PropsOrPropOptions
   }
 
+/**
+ * overload 0.0: functional component with array props
+ */
+export function defineComponent<
+  PropNames extends string,
+  Props = Readonly<{ [key in PropNames]?: any }>
+>(options: {
+  functional: true
+  props?: PropNames[]
+  render?: (h: CreateElement, context: RenderContext<Props>) => any
+}): DefineComponent<Props>
+
+/**
+ * overload 0.1: functional component with object props
+ */
+export function defineComponent<
+  PropsOptions extends ComponentPropsOptions = ComponentPropsOptions,
+  Props = ExtractPropTypes<PropsOptions>
+>(options: {
+  functional: true
+  props?: PropsOptions
+  render?: (h: CreateElement, context: RenderContext<Props>) => any
+}): DefineComponent<PropsOptions>
+
 /**
  * overload 1: object format with no props
  */