vue 2.7.3 → 2.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "packageManager": "pnpm@7.1.0",
   "description": "Reactive, component-oriented view layer for modern web interfaces.",
   "main": "dist/vue.runtime.common.js",
@@ -60,7 +60,7 @@
   },
   "homepage": "https://github.com/vuejs/vue#readme",
   "dependencies": {
-    "@vue/compiler-sfc": "2.7.3",
+    "@vue/compiler-sfc": "2.7.4",
     "csstype": "^3.1.0"
   },
   "devDependencies": {

package/packages/compiler-sfc/dist/compiler-sfc.js

@@ -646,7 +646,6 @@ const DEFAULT_FILENAME = 'anonymous.vue';
 const splitRE$1 = /\r?\n/g;
 const replaceRE = /./g;
 const isSpecialTag = makeMap('script,style,template', true);
-const isNeedIndentLang = makeMap('pug,jade');
 /**
  * Parse a single-file component (*.vue) file into an SFC Descriptor Object.
  */
@@ -741,9 +740,11 @@ function parseComponent(source, options = {}) {
         if (depth === 1 && currentBlock) {
             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))) {
+            if (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);
             }
             // pad content so that linters and pre-processors can output correct
@@ -4362,7 +4363,7 @@ function renderStatic(index, isInFor) {
         return tree;
     }
     // otherwise, render a fresh tree.
-    tree = cached[index] = this.$options.staticRenderFns[index].call(this._renderProxy, null, this // for render fns generated for functional component templates
+    tree = cached[index] = this.$options.staticRenderFns[index].call(this._renderProxy, this._c, this // for render fns generated for functional component templates
     );
     markStatic$1(tree, `__static__${index}`, false);
     return tree;
@@ -5369,7 +5370,7 @@ function set(target, key, val) {
         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/packages/compiler-sfc/package.json

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

@@ -320,8 +320,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/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 }

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, Vue2Instance, VueConstructor } from './vue'
 import {
   ComputedOptions,
   MethodOptions,
@@ -18,6 +14,7 @@ import {
   ComponentOptionsBase
 } from './v3-component-options'
 import { EmitFn, EmitsOptions, Slots } from './v3-setup-context'
+import { VNode } from './vnode'
 
 /**
  * Custom properties added to component instances in any way and can be accessed through `this`
@@ -152,36 +149,43 @@ 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 Vue2Instance {
+  $data: D
+  readonly $props: Readonly<
+    MakeDefaultsOptional extends true
+      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+      : P & PublicProps
+  >
+  readonly $root: ComponentPublicInstance | null
+  readonly $parent: ComponentPublicInstance | null
+  readonly $emit: EmitFn<E>
+  readonly $options: Options & MergedComponentOptionsOverride
+}
+
 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
  */

package/types/v3-generated.d.ts

@@ -2,6 +2,24 @@ declare type ASTModifiers = {
     [key: string]: boolean;
 };
 
+declare type AsyncComponentFactory = () => {
+    component: Promise<any>;
+    loading?: any;
+    error?: any;
+    delay?: number;
+    timeout?: number;
+};
+
+declare interface AsyncComponentOptions {
+    loader: Function;
+    loadingComponent?: any;
+    errorComponent?: any;
+    delay?: number;
+    timeout?: number;
+    suspensible?: boolean;
+    onError?: (error: Error, retry: () => void, fail: () => void, attempts: number) => any;
+}
+
 declare type BaseTypes = string | number | boolean;
 
 declare type Builtin = Primitive | Function | Date | Error | RegExp;
@@ -57,6 +75,8 @@ export declare type DeepReadonly<T> = T extends Builtin ? T : T extends Map<infe
     readonly [K in keyof T]: DeepReadonly<T[K]>;
 } : Readonly<T>;
 
+/* Excluded from this release type: defineAsyncComponent */
+
 /* Excluded from this release type: defineComponent */
 
 /**
@@ -346,6 +366,9 @@ export declare function useCssVars(getter: (vm: Record<string, any>, setupProxy:
 
 /* Excluded from this release type: useSlots */
 
+/**
+ * Note: also update dist/vue.runtime.mjs when adding new exports to this file.
+ */
 export declare const version: string;
 
 /* Excluded from this release type: VNode */

package/types/vue.d.ts

@@ -3,8 +3,6 @@ import {
   AsyncComponent,
   ComponentOptions,
   FunctionalComponentOptions,
-  WatchOptionsWithHandler,
-  WatchHandler,
   DirectiveOptions,
   DirectiveFunction,
   RecordPropsDefinition,
@@ -14,6 +12,8 @@ import {
 } from './options'
 import { VNode, VNodeData, VNodeChildren, NormalizedScopedSlot } from './vnode'
 import { PluginFunction, PluginObject } from './plugin'
+import { DefineComponent } from './v3-define-component'
+import { nextTick } from './v3-generated'
 
 export interface CreateElement {
   (
@@ -35,20 +35,25 @@ export interface CreateElement {
   ): VNode
 }
 
-export interface Vue {
-  readonly $el: Element
-  readonly $options: ComponentOptions<Vue>
+export interface Vue extends Vue2Instance {
+  readonly $data: Record<string, any>
+  readonly $props: Record<string, any>
   readonly $parent: Vue
   readonly $root: Vue
   readonly $children: Vue[]
+  readonly $options: ComponentOptions<Vue>
+  $emit(event: string, ...args: any[]): this
+}
+
+export interface Vue2Instance {
+  readonly $el: Element
   readonly $refs: {
     [key: string]: Vue | Element | (Vue | Element)[] | undefined
   }
   readonly $slots: { [key: string]: VNode[] | undefined }
   readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined }
   readonly $isServer: boolean
-  readonly $data: Record<string, any>
-  readonly $props: Record<string, any>
+
   readonly $ssrContext: any
   readonly $vnode: VNode
   readonly $attrs: Record<string, string>
@@ -72,9 +77,7 @@ export interface Vue {
   $on(event: string | string[], callback: Function): this
   $once(event: string | string[], callback: Function): this
   $off(event?: string | string[], callback?: Function): this
-  $emit(event: string, ...args: any[]): this
-  $nextTick(callback: (this: this) => void): void
-  $nextTick(): Promise<void>
+  $nextTick: typeof nextTick
   $createElement: CreateElement
 }
 
@@ -313,6 +316,10 @@ export interface VueConstructor<V extends Vue = Vue> {
     id: string,
     definition?: ComponentOptions<V>
   ): ExtendedVue<V, {}, {}, {}, {}, {}>
+  component<T extends DefineComponent<any, any, any, any, any, any, any, any>>(
+    id: string,
+    definition?: T
+  ): T
 
   use<T>(
     plugin: PluginObject<T> | PluginFunction<T>,