vue 2.6.13 → 2.7.0-alpha.2

package/src/platforms/web/runtime/{transition-util.js → transition-util.ts}

@@ -1,10 +1,10 @@
-/* @flow */
-
 import { inBrowser, isIE9 } from 'core/util/index'
-import { addClass, removeClass } from './class-util'
+import { addClass, removeClass } from 'web/runtime/class-util'
 import { remove, extend, cached } from 'shared/util'
 
-export function resolveTransition (def?: string | Object): ?Object {
+export function resolveTransition(
+  def?: string | Record<string, any>
+): Record<string, any> | undefined {
   if (!def) {
     return
   }
@@ -43,13 +43,15 @@ export let animationProp = 'animation'
 export let animationEndEvent = 'animationend'
 if (hasTransition) {
   /* istanbul ignore if */
-  if (window.ontransitionend === undefined &&
+  if (
+    window.ontransitionend === undefined &&
     window.onwebkittransitionend !== undefined
   ) {
     transitionProp = 'WebkitTransition'
     transitionEndEvent = 'webkitTransitionEnd'
   }
-  if (window.onanimationend === undefined &&
+  if (
+    window.onanimationend === undefined &&
     window.onwebkitanimationend !== undefined
   ) {
     animationProp = 'WebkitAnimation'
@@ -64,35 +66,38 @@ const raf = inBrowser
     : setTimeout
   : /* istanbul ignore next */ fn => fn()
 
-export function nextFrame (fn: Function) {
+export function nextFrame(fn: Function) {
   raf(() => {
+    // @ts-expect-error
     raf(fn)
   })
 }
 
-export function addTransitionClass (el: any, cls: string) {
-  const transitionClasses = el._transitionClasses || (el._transitionClasses = [])
+export function addTransitionClass(el: any, cls: string) {
+  const transitionClasses =
+    el._transitionClasses || (el._transitionClasses = [])
   if (transitionClasses.indexOf(cls) < 0) {
     transitionClasses.push(cls)
     addClass(el, cls)
   }
 }
 
-export function removeTransitionClass (el: any, cls: string) {
+export function removeTransitionClass(el: any, cls: string) {
   if (el._transitionClasses) {
     remove(el._transitionClasses, cls)
   }
   removeClass(el, cls)
 }
 
-export function whenTransitionEnds (
+export function whenTransitionEnds(
   el: Element,
-  expectedType: ?string,
+  expectedType: string | undefined,
   cb: Function
 ) {
   const { type, timeout, propCount } = getTransitionInfo(el, expectedType)
   if (!type) return cb()
-  const event: string = type === TRANSITION ? transitionEndEvent : animationEndEvent
+  const event: string =
+    type === TRANSITION ? transitionEndEvent : animationEndEvent
   let ended = 0
   const end = () => {
     el.removeEventListener(event, onEnd)
@@ -115,22 +120,39 @@ export function whenTransitionEnds (
 
 const transformRE = /\b(transform|all)(,|$)/
 
-export function getTransitionInfo (el: Element, expectedType?: ?string): {
-  type: ?string;
-  propCount: number;
-  timeout: number;
-  hasTransform: boolean;
+export function getTransitionInfo(
+  el: Element,
+  expectedType?: string
+): {
+  type?: string | null
+  propCount: number
+  timeout: number
+  hasTransform: boolean
 } {
   const styles: any = window.getComputedStyle(el)
   // JSDOM may return undefined for transition properties
-  const transitionDelays: Array<string> = (styles[transitionProp + 'Delay'] || '').split(', ')
-  const transitionDurations: Array<string> = (styles[transitionProp + 'Duration'] || '').split(', ')
-  const transitionTimeout: number = getTimeout(transitionDelays, transitionDurations)
-  const animationDelays: Array<string> = (styles[animationProp + 'Delay'] || '').split(', ')
-  const animationDurations: Array<string> = (styles[animationProp + 'Duration'] || '').split(', ')
-  const animationTimeout: number = getTimeout(animationDelays, animationDurations)
-
-  let type: ?string
+  const transitionDelays: Array<string> = (
+    styles[transitionProp + 'Delay'] || ''
+  ).split(', ')
+  const transitionDurations: Array<string> = (
+    styles[transitionProp + 'Duration'] || ''
+  ).split(', ')
+  const transitionTimeout: number = getTimeout(
+    transitionDelays,
+    transitionDurations
+  )
+  const animationDelays: Array<string> = (
+    styles[animationProp + 'Delay'] || ''
+  ).split(', ')
+  const animationDurations: Array<string> = (
+    styles[animationProp + 'Duration'] || ''
+  ).split(', ')
+  const animationTimeout: number = getTimeout(
+    animationDelays,
+    animationDurations
+  )
+
+  let type: string | undefined | null
   let timeout = 0
   let propCount = 0
   /* istanbul ignore if */
@@ -148,11 +170,12 @@ export function getTransitionInfo (el: Element, expectedType?: ?string): {
     }
   } else {
     timeout = Math.max(transitionTimeout, animationTimeout)
-    type = timeout > 0
-      ? transitionTimeout > animationTimeout
-        ? TRANSITION
-        : ANIMATION
-      : null
+    type =
+      timeout > 0
+        ? transitionTimeout > animationTimeout
+          ? TRANSITION
+          : ANIMATION
+        : null
     propCount = type
       ? type === TRANSITION
         ? transitionDurations.length
@@ -160,8 +183,7 @@ export function getTransitionInfo (el: Element, expectedType?: ?string): {
       : 0
   }
   const hasTransform: boolean =
-    type === TRANSITION &&
-    transformRE.test(styles[transitionProp + 'Property'])
+    type === TRANSITION && transformRE.test(styles[transitionProp + 'Property'])
   return {
     type,
     timeout,
@@ -170,21 +192,24 @@ export function getTransitionInfo (el: Element, expectedType?: ?string): {
   }
 }
 
-function getTimeout (delays: Array<string>, durations: Array<string>): number {
+function getTimeout(delays: Array<string>, durations: Array<string>): number {
   /* istanbul ignore next */
   while (delays.length < durations.length) {
     delays = delays.concat(delays)
   }
 
-  return Math.max.apply(null, durations.map((d, i) => {
-    return toMs(d) + toMs(delays[i])
-  }))
+  return Math.max.apply(
+    null,
+    durations.map((d, i) => {
+      return toMs(d) + toMs(delays[i])
+    })
+  )
 }
 
 // Old versions of Chromium (below 61.0.3163.100) formats floating pointer numbers
 // in a locale-dependent way, using a comma instead of a dot.
 // If comma is not replaced with a dot, the input will be rounded down (i.e. acting
 // as a floor function) causing unexpected behaviors
-function toMs (s: string): number {
+function toMs(s: string): number {
   return Number(s.slice(0, -1).replace(',', '.')) * 1000
 }

package/src/platforms/web/{entry-runtime-with-compiler.js → runtime-with-compiler.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import config from 'core/config'
 import { warn, cached } from 'core/util/index'
 import { mark, measure } from 'core/util/perf'
@@ -7,7 +5,12 @@ import { mark, measure } from 'core/util/perf'
 import Vue from './runtime/index'
 import { query } from './util/index'
 import { compileToFunctions } from './compiler/index'
-import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'
+import {
+  shouldDecodeNewlines,
+  shouldDecodeNewlinesForHref
+} from './util/compat'
+import type { Component } from 'types/component'
+import type { GlobalAPI } from 'types/global-api'
 
 const idToTemplate = cached(id => {
   const el = query(id)
@@ -23,9 +26,10 @@ Vue.prototype.$mount = function (
 
   /* istanbul ignore if */
   if (el === document.body || el === document.documentElement) {
-    process.env.NODE_ENV !== 'production' && warn(
-      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
-    )
+    __DEV__ &&
+      warn(
+        `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
+      )
     return this
   }
 
@@ -38,7 +42,7 @@ Vue.prototype.$mount = function (
         if (template.charAt(0) === '#') {
           template = idToTemplate(template)
           /* istanbul ignore if */
-          if (process.env.NODE_ENV !== 'production' && !template) {
+          if (__DEV__ && !template) {
             warn(
               `Template element not found or is empty: ${options.template}`,
               this
@@ -48,32 +52,37 @@ Vue.prototype.$mount = function (
       } else if (template.nodeType) {
         template = template.innerHTML
       } else {
-        if (process.env.NODE_ENV !== 'production') {
+        if (__DEV__) {
           warn('invalid template option:' + template, this)
         }
         return this
       }
     } else if (el) {
+      // @ts-expect-error
       template = getOuterHTML(el)
     }
     if (template) {
       /* istanbul ignore if */
-      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
+      if (__DEV__ && config.performance && mark) {
         mark('compile')
       }
 
-      const { render, staticRenderFns } = compileToFunctions(template, {
-        outputSourceRange: process.env.NODE_ENV !== 'production',
-        shouldDecodeNewlines,
-        shouldDecodeNewlinesForHref,
-        delimiters: options.delimiters,
-        comments: options.comments
-      }, this)
+      const { render, staticRenderFns } = compileToFunctions(
+        template,
+        {
+          outputSourceRange: __DEV__,
+          shouldDecodeNewlines,
+          shouldDecodeNewlinesForHref,
+          delimiters: options.delimiters,
+          comments: options.comments
+        },
+        this
+      )
       options.render = render
       options.staticRenderFns = staticRenderFns
 
       /* istanbul ignore if */
-      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
+      if (__DEV__ && config.performance && mark) {
         mark('compile end')
         measure(`vue ${this._name} compile`, 'compile', 'compile end')
       }
@@ -86,7 +95,7 @@ Vue.prototype.$mount = function (
  * Get outerHTML of elements, taking care
  * of SVG elements in IE as well.
  */
-function getOuterHTML (el: Element): string {
+function getOuterHTML(el: Element): string {
   if (el.outerHTML) {
     return el.outerHTML
   } else {
@@ -98,4 +107,4 @@ function getOuterHTML (el: Element): string {
 
 Vue.compile = compileToFunctions
 
-export default Vue
+export default Vue as GlobalAPI

package/src/platforms/web/util/{attrs.js → attrs.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import { makeMap } from 'shared/util'
 
 // these are reserved for web because they are directly compiled away
@@ -8,9 +6,13 @@ export const isReservedAttr = makeMap('style,class')
 
 // attributes that should be using props for binding
 const acceptValue = makeMap('input,textarea,option,select,progress')
-export const mustUseProp = (tag: string, type: ?string, attr: string): boolean => {
+export const mustUseProp = (
+  tag: string,
+  type?: string | null,
+  attr?: string
+): boolean => {
   return (
-    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
+    (attr === 'value' && acceptValue(tag) && type !== 'button') ||
     (attr === 'selected' && tag === 'option') ||
     (attr === 'checked' && tag === 'input') ||
     (attr === 'muted' && tag === 'video')
@@ -19,24 +21,26 @@ export const mustUseProp = (tag: string, type: ?string, attr: string): boolean =
 
 export const isEnumeratedAttr = makeMap('contenteditable,draggable,spellcheck')
 
-const isValidContentEditableValue = makeMap('events,caret,typing,plaintext-only')
+const isValidContentEditableValue = makeMap(
+  'events,caret,typing,plaintext-only'
+)
 
 export const convertEnumeratedValue = (key: string, value: any) => {
   return isFalsyAttrValue(value) || value === 'false'
     ? 'false'
-    // allow arbitrary string value for contenteditable
-    : key === 'contenteditable' && isValidContentEditableValue(value)
-      ? value
-      : 'true'
+    : // allow arbitrary string value for contenteditable
+    key === 'contenteditable' && isValidContentEditableValue(value)
+    ? value
+    : 'true'
 }
 
 export const isBooleanAttr = makeMap(
   'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
-  'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
-  'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
-  'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
-  'required,reversed,scoped,seamless,selected,sortable,' +
-  'truespeed,typemustmatch,visible'
+    'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
+    'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
+    'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
+    'required,reversed,scoped,seamless,selected,sortable,' +
+    'truespeed,typemustmatch,visible'
 )
 
 export const xlinkNS = 'http://www.w3.org/1999/xlink'

package/src/platforms/web/util/{class.js → class.ts}

@@ -1,39 +1,41 @@
-/* @flow */
-
+import VNode from 'core/vdom/vnode'
 import { isDef, isObject } from 'shared/util'
+import type { VNodeData, VNodeWithData } from 'types/vnode'
 
-export function genClassForVnode (vnode: VNodeWithData): string {
+export function genClassForVnode(vnode: VNodeWithData): string {
   let data = vnode.data
-  let parentNode = vnode
-  let childNode = vnode
+  let parentNode: VNode | VNodeWithData | undefined = vnode
+  let childNode: VNode | VNodeWithData = vnode
   while (isDef(childNode.componentInstance)) {
-    childNode = childNode.componentInstance._vnode
+    childNode = childNode.componentInstance._vnode!
     if (childNode && childNode.data) {
       data = mergeClassData(childNode.data, data)
     }
   }
-  while (isDef(parentNode = parentNode.parent)) {
+  // @ts-expect-error parentNode.parent not VNodeWithData
+  while (isDef((parentNode = parentNode.parent))) {
     if (parentNode && parentNode.data) {
       data = mergeClassData(data, parentNode.data)
     }
   }
-  return renderClass(data.staticClass, data.class)
+  return renderClass(data.staticClass!, data.class)
 }
 
-function mergeClassData (child: VNodeData, parent: VNodeData): {
-  staticClass: string,
+function mergeClassData(
+  child: VNodeData,
+  parent: VNodeData
+): {
+  staticClass: string
   class: any
 } {
   return {
     staticClass: concat(child.staticClass, parent.staticClass),
-    class: isDef(child.class)
-      ? [child.class, parent.class]
-      : parent.class
+    class: isDef(child.class) ? [child.class, parent.class] : parent.class
   }
 }
 
-export function renderClass (
-  staticClass: ?string,
+export function renderClass(
+  staticClass: string | null | undefined,
   dynamicClass: any
 ): string {
   if (isDef(staticClass) || isDef(dynamicClass)) {
@@ -43,11 +45,11 @@ export function renderClass (
   return ''
 }
 
-export function concat (a: ?string, b: ?string): string {
-  return a ? b ? (a + ' ' + b) : a : (b || '')
+export function concat(a?: string | null, b?: string | null): string {
+  return a ? (b ? a + ' ' + b : a) : b || ''
 }
 
-export function stringifyClass (value: any): string {
+export function stringifyClass(value: any): string {
   if (Array.isArray(value)) {
     return stringifyArray(value)
   }
@@ -61,11 +63,11 @@ export function stringifyClass (value: any): string {
   return ''
 }
 
-function stringifyArray (value: Array<any>): string {
+function stringifyArray(value: Array<any>): string {
   let res = ''
   let stringified
   for (let i = 0, l = value.length; i < l; i++) {
-    if (isDef(stringified = stringifyClass(value[i])) && stringified !== '') {
+    if (isDef((stringified = stringifyClass(value[i]))) && stringified !== '') {
       if (res) res += ' '
       res += stringified
     }
@@ -73,7 +75,7 @@ function stringifyArray (value: Array<any>): string {
   return res
 }
 
-function stringifyObject (value: Object): string {
+function stringifyObject(value: Object): string {
   let res = ''
   for (const key in value) {
     if (value[key]) {

package/src/platforms/web/util/{compat.js → compat.ts}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import { inBrowser } from 'core/util/index'
 
 // check whether current browser encodes a char inside attribute values
 let div
-function getShouldDecode (href: boolean): boolean {
+function getShouldDecode(href: boolean): boolean {
   div = div || document.createElement('div')
   div.innerHTML = href ? `<a href="\n"/>` : `<div a="\n"/>`
   return div.innerHTML.indexOf('&#10;') > 0
@@ -13,4 +11,6 @@ function getShouldDecode (href: boolean): boolean {
 // #3663: IE encodes newlines inside attribute values while other browsers don't
 export const shouldDecodeNewlines = inBrowser ? getShouldDecode(false) : false
 // #6828: chrome encodes content in a[href]
-export const shouldDecodeNewlinesForHref = inBrowser ? getShouldDecode(true) : false
+export const shouldDecodeNewlinesForHref = inBrowser
+  ? getShouldDecode(true)
+  : false

package/src/platforms/web/util/{element.js → element.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import { inBrowser } from 'core/util/env'
 import { makeMap } from 'shared/util'
 
@@ -10,34 +8,34 @@ export const namespaceMap = {
 
 export const isHTMLTag = makeMap(
   'html,body,base,head,link,meta,style,title,' +
-  'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
-  'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
-  'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
-  's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
-  'embed,object,param,source,canvas,script,noscript,del,ins,' +
-  'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
-  'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
-  'output,progress,select,textarea,' +
-  'details,dialog,menu,menuitem,summary,' +
-  'content,element,shadow,template,blockquote,iframe,tfoot'
+    'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
+    'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
+    'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
+    's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
+    'embed,object,param,source,canvas,script,noscript,del,ins,' +
+    'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
+    'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
+    'output,progress,select,textarea,' +
+    'details,dialog,menu,menuitem,summary,' +
+    'content,element,shadow,template,blockquote,iframe,tfoot'
 )
 
 // this map is intentionally selective, only covering SVG elements that may
 // contain child elements.
 export const isSVG = makeMap(
   'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
-  'foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
-  'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
+    'foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
+    'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
   true
 )
 
-export const isPreTag = (tag: ?string): boolean => tag === 'pre'
+export const isPreTag = (tag?: string): boolean => tag === 'pre'
 
-export const isReservedTag = (tag: string): ?boolean => {
+export const isReservedTag = (tag: string): boolean | undefined => {
   return isHTMLTag(tag) || isSVG(tag)
 }
 
-export function getTagNamespace (tag: string): ?string {
+export function getTagNamespace(tag: string): string | undefined {
   if (isSVG(tag)) {
     return 'svg'
   }
@@ -49,7 +47,7 @@ export function getTagNamespace (tag: string): ?string {
 }
 
 const unknownElementCache = Object.create(null)
-export function isUnknownElement (tag: string): boolean {
+export function isUnknownElement(tag: string): boolean {
   /* istanbul ignore if */
   if (!inBrowser) {
     return true
@@ -65,13 +63,14 @@ export function isUnknownElement (tag: string): boolean {
   const el = document.createElement(tag)
   if (tag.indexOf('-') > -1) {
     // http://stackoverflow.com/a/28210364/1070244
-    return (unknownElementCache[tag] = (
+    return (unknownElementCache[tag] =
       el.constructor === window.HTMLUnknownElement ||
-      el.constructor === window.HTMLElement
-    ))
+      el.constructor === window.HTMLElement)
   } else {
     return (unknownElementCache[tag] = /HTMLUnknownElement/.test(el.toString()))
   }
 }
 
-export const isTextInputType = makeMap('text,number,password,search,email,tel,url')
+export const isTextInputType = makeMap(
+  'text,number,password,search,email,tel,url'
+)

package/src/platforms/web/util/{index.js → index.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import { warn } from 'core/util/index'
 
 export * from './attrs'
@@ -9,13 +7,11 @@ export * from './element'
 /**
  * Query an element selector if it's not an element already.
  */
-export function query (el: string | Element): Element {
+export function query(el: string | Element): Element {
   if (typeof el === 'string') {
     const selected = document.querySelector(el)
     if (!selected) {
-      process.env.NODE_ENV !== 'production' && warn(
-        'Cannot find element: ' + el
-      )
+      __DEV__ && warn('Cannot find element: ' + el)
       return document.createElement('div')
     }
     return selected

package/src/platforms/web/util/{style.js → style.ts}

@@ -1,6 +1,6 @@
-/* @flow */
-
+import VNode from 'core/vdom/vnode'
 import { cached, extend, toObject } from 'shared/util'
+import type { VNodeData, VNodeWithData } from 'types/vnode'
 
 export const parseStyleText = cached(function (cssText) {
   const res = {}
@@ -16,17 +16,15 @@ export const parseStyleText = cached(function (cssText) {
 })
 
 // merge static and dynamic style data on the same vnode
-function normalizeStyleData (data: VNodeData): ?Object {
+function normalizeStyleData(data: VNodeData): Record<string, any> {
   const style = normalizeStyleBinding(data.style)
   // static style is pre-processed into an object during compilation
   // and is always a fresh object, so it's safe to merge into it
-  return data.staticStyle
-    ? extend(data.staticStyle, style)
-    : style
+  return data.staticStyle ? extend(data.staticStyle, style) : style
 }
 
 // normalize possible array / string values into Object
-export function normalizeStyleBinding (bindingStyle: any): ?Object {
+export function normalizeStyleBinding(bindingStyle: any): Record<string, any> {
   if (Array.isArray(bindingStyle)) {
     return toObject(bindingStyle)
   }
@@ -40,16 +38,17 @@ export function normalizeStyleBinding (bindingStyle: any): ?Object {
  * parent component style should be after child's
  * so that parent component's style could override it
  */
-export function getStyle (vnode: VNodeWithData, checkChild: boolean): Object {
+export function getStyle(vnode: VNodeWithData, checkChild: boolean): Object {
   const res = {}
   let styleData
 
   if (checkChild) {
-    let childNode = vnode
+    let childNode: VNodeWithData | VNode = vnode
     while (childNode.componentInstance) {
-      childNode = childNode.componentInstance._vnode
+      childNode = childNode.componentInstance._vnode!
       if (
-        childNode && childNode.data &&
+        childNode &&
+        childNode.data &&
         (styleData = normalizeStyleData(childNode.data))
       ) {
         extend(res, styleData)
@@ -61,7 +60,8 @@ export function getStyle (vnode: VNodeWithData, checkChild: boolean): Object {
     extend(res, styleData)
   }
 
-  let parentNode = vnode
+  let parentNode: VNodeWithData | VNode | undefined = vnode
+  // @ts-expect-error parentNode.parent not VNodeWithData
   while ((parentNode = parentNode.parent)) {
     if (parentNode.data && (styleData = normalizeStyleData(parentNode.data))) {
       extend(res, styleData)