vue 2.7.0 → 2.7.3

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

@@ -39,7 +39,7 @@ import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
 import { warnOnce } from './warn'
 import { isReservedTag } from 'web/util'
-import { dirRE } from 'compiler/parser'
+import { bindRE, dirRE, onRE } from 'compiler/parser'
 import { parseText } from 'compiler/parser/text-parser'
 import { DEFAULT_FILENAME } from './parseComponent'
 import {
@@ -278,8 +278,7 @@ export function compileScript(
     local: string,
     imported: string | false,
     isType: boolean,
-    isFromSetup: boolean,
-    needTemplateUsageCheck: boolean
+    isFromSetup: boolean
   ) {
     if (source === 'vue' && imported) {
       userImportAlias[imported] = local
@@ -287,14 +286,8 @@ export function compileScript(
 
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
-    let isUsedInTemplate = needTemplateUsageCheck
-    if (
-      needTemplateUsageCheck &&
-      isTS &&
-      sfc.template &&
-      !sfc.template.src &&
-      !sfc.template.lang
-    ) {
+    let isUsedInTemplate = true
+    if (isTS && sfc.template && !sfc.template.src && !sfc.template.lang) {
       isUsedInTemplate = isImportUsed(local, sfc)
     }
 
@@ -658,8 +651,7 @@ export function compileScript(
             node.importKind === 'type' ||
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
-            false,
-            true
+            false
           )
         }
       } else if (node.type === 'ExportDefaultDeclaration') {
@@ -872,7 +864,6 @@ export function compileScript(
             node.importKind === 'type' ||
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
-            true,
             true
           )
         }
@@ -1809,7 +1800,11 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
       for (let i = 0; i < attrs.length; i++) {
         const { name, value } = attrs[i]
         if (dirRE.test(name)) {
-          const baseName = name.replace(dirRE, '')
+          const baseName = onRE.test(name)
+            ? 'on'
+            : bindRE.test(name)
+            ? 'bind'
+            : name.replace(dirRE, '')
           if (!isBuiltInDir(baseName)) {
             code += `,v${capitalize(camelize(baseName))}`
           }
@@ -1838,6 +1833,8 @@ function processExp(exp: string, dir?: string): string {
   if (/ as\s+\w|<.*>|:/.test(exp)) {
     if (dir === 'slot') {
       exp = `(${exp})=>{}`
+    } else if (dir === 'on') {
+      exp = `()=>{${exp}}`
     } else if (dir === 'for') {
       const inMatch = exp.match(forAliasRE)
       if (inMatch) {

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

@@ -10,6 +10,7 @@ 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
@@ -177,7 +178,11 @@ export function parseComponent(
     if (depth === 1 && currentBlock) {
       currentBlock.end = start
       let text = source.slice(currentBlock.start, currentBlock.end)
-      if (options.deindent) {
+      if (
+        options.deindent ||
+        // certain langs like pug are indent sensitive, preserve old behavior
+        (currentBlock.lang && isNeedIndentLang(currentBlock.lang))
+      ) {
         text = deindent(text)
       }
       // pad content so that linters and pre-processors can output correct

package/packages/compiler-sfc/src/templateCompilerModules/srcset.ts

@@ -38,7 +38,7 @@ function transform(
         }
 
         const imageCandidates: ImageCandidate[] = value
-          .substr(1, value.length - 2)
+          .slice(1, -1)
           .split(',')
           .map(s => {
             // The attribute value arrives here with all whitespace, except

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

@@ -1562,5 +1562,17 @@ describe('SFC analyze <script> bindings', () => {
       expect(content).toMatch(`name: 'Baz'`)
       assertCode(content)
     })
+
+    // #12591
+    test('should not error when performing ts expression check for v-on inline statement', () => {
+      compile(`
+      <script setup lang="ts">
+        import { foo } from './foo'
+      </script>
+      <template>
+        <div @click="$emit('update:a');"></div>
+      </tempalte>
+      `)
+    })
   })
 })

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,
@@ -181,7 +176,7 @@ export function defineReactive(
           }
         }
       }
-      return isRef(value) ? value.value : value
+      return isRef(value) && !shallow ? value.value : value
     },
     set: function reactiveSetter(newVal) {
       const value = getter ? getter.call(obj) : val
@@ -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.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/util/next-tick.ts

@@ -86,7 +86,8 @@ if (typeof Promise !== 'undefined' && isNative(Promise)) {
 }
 
 export function nextTick(): Promise<void>
-export function nextTick(cb: (...args: any[]) => any, ctx?: object): void
+export function nextTick<T>(this: T, cb: (this: T, ...args: any[]) => any): void
+export function nextTick<T>(cb: (this: T, ...args: any[]) => any, ctx: T): void
 /**
  * @internal
  */

package/src/core/vdom/modules/directives.ts

@@ -94,7 +94,7 @@ function normalizeDirectives(
     // $flow-disable-line
     return res
   }
-  let i, dir
+  let i: number, dir: VNodeDirective
   for (i = 0; i < dirs.length; i++) {
     dir = dirs[i]
     if (!dir.modifiers) {
@@ -103,7 +103,7 @@ function normalizeDirectives(
     }
     res[getRawDirName(dir)] = dir
     if (vm._setupState && vm._setupState.__sfc) {
-      dir.def = resolveAsset(vm, '_setupState', 'v-' + dir.name)
+      dir.def = dir.def || resolveAsset(vm, '_setupState', 'v-' + dir.name)
     }
     dir.def = dir.def || resolveAsset(vm.$options, 'directives', dir.name, true)
   }

package/src/shared/constants.ts

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

package/src/shared/util.ts

@@ -361,6 +361,6 @@ export function hasChanged(x: unknown, y: unknown): boolean {
   if (x === y) {
     return x === 0 && 1 / x !== 1 / (y as number)
   } else {
-    return x === x && y === y
+    return x === x || y === y
   }
 }

package/src/v3/apiSetup.ts

@@ -12,7 +12,7 @@ import {
 } from '../shared/util'
 import { currentInstance, setCurrentInstance } from './currentInstance'
 import { shallowReactive } from './reactivity/reactive'
-import { isRef } from './reactivity/ref'
+import { proxyWithRefUnwrap } from './reactivity/ref'
 
 /**
  * @internal
@@ -68,7 +68,9 @@ export function initSetup(vm: Component) {
         // exposed for compiled render fn
         const proxy = (vm._setupProxy = {})
         for (const key in setupResult) {
-          proxyWithRefUnwrap(proxy, setupResult, key)
+          if (key !== '__sfc') {
+            proxyWithRefUnwrap(proxy, setupResult, key)
+          }
         }
       }
     } else if (__DEV__ && setupResult !== undefined) {
@@ -81,25 +83,6 @@ export function initSetup(vm: Component) {
   }
 }
 
-export function proxyWithRefUnwrap(
-  target: any,
-  source: Record<string, any>,
-  key: string
-) {
-  Object.defineProperty(target, key, {
-    enumerable: true,
-    configurable: true,
-    get: () => {
-      const raw = source[key]
-      return isRef(raw) ? raw.value : raw
-    },
-    set: newVal => {
-      const raw = source[key]
-      isRef(raw) ? (raw.value = newVal) : (source[key] = newVal)
-    }
-  })
-}
-
 function createSetupContext(vm: Component): SetupContext {
   let exposeCalled = false
   return {

package/src/v3/apiWatch.ts

@@ -221,7 +221,7 @@ function doWatch(
   } else if (isFunction(source)) {
     if (cb) {
       // getter with cb
-      getter = () => call(source as Function, WATCHER_GETTER)
+      getter = () => call(source, WATCHER_GETTER)
     } else {
       // no cb -> simple effect
       getter = () => {
@@ -231,7 +231,7 @@ function doWatch(
         if (cleanup) {
           cleanup()
         }
-        return call(source as Function, WATCHER, [onCleanup])
+        return call(source, WATCHER, [onCleanup])
       }
     }
   } else {

package/src/v3/index.ts

@@ -7,6 +7,7 @@ export {
   toRef,
   toRefs,
   unref,
+  proxyRefs,
   customRef,
   triggerRef,
   Ref,

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)}`)

package/src/v3/reactivity/ref.ts

@@ -6,7 +6,7 @@ import {
 } from './reactive'
 import type { IfAny } from 'types/utils'
 import Dep from 'core/observer/dep'
-import { warn, isArray, def } from 'core/util'
+import { warn, isArray, def, isServerRendering } from 'core/util'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
 
 declare const RefSymbol: unique symbol
@@ -69,7 +69,11 @@ function createRef(rawValue: unknown, shallow: boolean) {
   const ref: any = {}
   def(ref, RefFlag, true)
   def(ref, ReactiveFlags.IS_SHALLOW, true)
-  ref.dep = defineReactive(ref, 'value', rawValue, null, shallow)
+  def(
+    ref,
+    'dep',
+    defineReactive(ref, 'value', rawValue, null, shallow, isServerRendering())
+  )
   return ref
 }
 
@@ -93,6 +97,40 @@ export function unref<T>(ref: T | Ref<T>): T {
   return isRef(ref) ? (ref.value as any) : ref
 }
 
+export function proxyRefs<T extends object>(
+  objectWithRefs: T
+): ShallowUnwrapRef<T> {
+  if (isReactive(objectWithRefs)) {
+    return objectWithRefs as any
+  }
+  const proxy = {}
+  const keys = Object.keys(objectWithRefs)
+  for (let i = 0; i < keys.length; i++) {
+    proxyWithRefUnwrap(proxy, objectWithRefs, keys[i])
+  }
+  return proxy as any
+}
+
+export function proxyWithRefUnwrap(
+  target: any,
+  source: Record<string, any>,
+  key: string
+) {
+  Object.defineProperty(target, key, {
+    enumerable: true,
+    configurable: true,
+    get: () => unref(source[key]),
+    set: value => {
+      const oldValue = source[key]
+      if (isRef(oldValue) && !isRef(value)) {
+        oldValue.value = value
+      } else {
+        source[key] = value
+      }
+    }
+  })
+}
+
 export type CustomRefFactory<T> = (
   track: () => void,
   trigger: () => void

package/types/common.d.ts

@@ -13,3 +13,9 @@ type Equal<Left, Right> =
   (<U>() => U extends Left ? 1 : 0) extends (<U>() => U extends Right ? 1 : 0) ? true : false;
 
 export type HasDefined<T> = Equal<T, unknown> extends true ? false : true
+
+// If the the type T accepts type "any", output type Y, otherwise output type N.
+// https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
+export type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
+
+export type LooseRequired<T> = { [P in string & keyof T]: T[P] }

package/types/index.d.ts

@@ -30,7 +30,8 @@ export {
   VNode,
   VNodeComponentOptions,
   VNodeData,
-  VNodeDirective
+  VNodeDirective,
+  ComponentCustomProps
 } from './vnode'
 
 export * from './v3-manual-apis'
@@ -47,13 +48,15 @@ export {
   // v2 already has option with same name and it's for a single computed
   ComputedOptions as ComponentComputedOptions,
   MethodOptions as ComponentMethodOptions,
-  ComponentPropsOptions
+  ComponentPropsOptions,
+  ComponentCustomOptions
 } from './v3-component-options'
 export {
   ComponentInstance,
   ComponentPublicInstance,
-  ComponentRenderProxy
-} from './v3-component-proxy'
+  CreateComponentPublicInstance,
+  ComponentCustomProperties
+} from './v3-component-public-instance'
 export {
   // PropType,
   // PropOptions,

package/types/jsx.d.ts

@@ -1303,6 +1303,12 @@ type EventHandlers<E> = {
 type ReservedProps = {
   key?: string | number | symbol
   ref?: VNodeData['ref']
+  /**
+   * @deprecated Old named slot syntax has been deprecated, use the new syntax
+   * instead: `<template v-slot:name>`
+   * https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots
+   */
+  slot?: string
 }
 
 type ElementAttrs<T> = T & ReservedProps
@@ -1313,7 +1319,12 @@ type NativeElements = {
   >
 }
 
-import { VNode, VNodeData } from './vnode'
+import {
+  VNode,
+  VNodeData,
+  ComponentCustomProps,
+  AllowedComponentProps
+} from './vnode'
 
 declare global {
   namespace JSX {
@@ -1329,7 +1340,10 @@ declare global {
       // @ts-ignore suppress ts:2374 = Duplicate string index signature.
       [name: string]: any
     }
-    interface IntrinsicAttributes extends ReservedProps {}
+    interface IntrinsicAttributes
+      extends ReservedProps,
+        AllowedComponentProps,
+        ComponentCustomProps {}
   }
 }
 

package/types/options.d.ts

@@ -2,6 +2,7 @@ import { Vue, CreateElement, CombinedVueInstance } from './vue'
 import { VNode, VNodeData, VNodeDirective, NormalizedScopedSlot } from './vnode'
 import { SetupContext } from './v3-setup-context'
 import { DebuggerEvent } from './v3-generated'
+import { DefineComponent } from './v3-define-component'
 
 type Constructor = {
   new (...args: any[]): any
@@ -19,6 +20,7 @@ export type Component<
   | typeof Vue
   | FunctionalComponentOptions<Props>
   | ComponentOptions<never, Data, Methods, Computed, Props, SetupBindings>
+  | DefineComponent<any, any, any, any, any>
 
 type EsModule<T> = T | { default: T }
 
@@ -174,7 +176,10 @@ export interface ComponentOptions<
   el?: Element | string
   template?: string
   // hack is for functional component type inference, should not be used in user code
-  render?(createElement: CreateElement, hack: RenderContext<Props>): VNode
+  render?(
+    createElement: CreateElement,
+    hack: RenderContext<Props>
+  ): VNode | null | void
   renderError?(createElement: CreateElement, err: Error): VNode
   staticRenderFns?: ((createElement: CreateElement) => VNode)[]
 
@@ -198,6 +203,7 @@ export interface ComponentOptions<
     [key: string]:
       | Component<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 }