vue 2.6.13 → 2.7.0-alpha.2

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

@@ -1,5 +1,3 @@
-/* @flow */
-
 // Provides transition support for list items.
 // supports move transitions using the FLIP technique.
 
@@ -12,7 +10,7 @@
 // nodes will remain where they should be.
 
 import { warn, extend } from 'core/util/index'
-import { addClass, removeClass } from '../class-util'
+import { addClass, removeClass } from 'web/runtime/class-util'
 import { transitionProps, extractTransitionData } from './transition'
 import { setActiveInstance } from 'core/instance/lifecycle'
 
@@ -22,19 +20,24 @@ import {
   transitionEndEvent,
   addTransitionClass,
   removeTransitionClass
-} from '../transition-util'
-
-const props = extend({
-  tag: String,
-  moveClass: String
-}, transitionProps)
+} from 'web/runtime/transition-util'
+import VNode from 'core/vdom/vnode'
+import { VNodeWithData } from 'types/vnode'
+
+const props = extend(
+  {
+    tag: String,
+    moveClass: String
+  },
+  transitionProps
+)
 
 delete props.mode
 
 export default {
   props,
 
-  beforeMount () {
+  beforeMount() {
     const update = this._update
     this._update = (vnode, hydrating) => {
       const restoreActiveInstance = setActiveInstance(this)
@@ -51,13 +54,13 @@ export default {
     }
   },
 
-  render (h: Function) {
+  render(h: Function) {
     const tag: string = this.tag || this.$vnode.data.tag || 'span'
-    const map: Object = Object.create(null)
-    const prevChildren: Array<VNode> = this.prevChildren = this.children
+    const map: Record<string, any> = Object.create(null)
+    const prevChildren: Array<VNode> = (this.prevChildren = this.children)
     const rawChildren: Array<VNode> = this.$slots.default || []
-    const children: Array<VNode> = this.children = []
-    const transitionData: Object = extractTransitionData(this)
+    const children: Array<VNode> = (this.children = [])
+    const transitionData = extractTransitionData(this)
 
     for (let i = 0; i < rawChildren.length; i++) {
       const c: VNode = rawChildren[i]
@@ -66,9 +69,11 @@ export default {
           children.push(c)
           map[c.key] = c
           ;(c.data || (c.data = {})).transition = transitionData
-        } else if (process.env.NODE_ENV !== 'production') {
-          const opts: ?VNodeComponentOptions = c.componentOptions
-          const name: string = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag
+        } else if (__DEV__) {
+          const opts = c.componentOptions
+          const name: string = opts
+            ? opts.Ctor.options.name || opts.tag || ''
+            : c.tag
           warn(`<transition-group> children must be keyed: <${name}>`)
         }
       }
@@ -79,9 +84,10 @@ export default {
       const removed: Array<VNode> = []
       for (let i = 0; i < prevChildren.length; i++) {
         const c: VNode = prevChildren[i]
-        c.data.transition = transitionData
-        c.data.pos = c.elm.getBoundingClientRect()
-        if (map[c.key]) {
+        c.data!.transition = transitionData
+        // @ts-expect-error .getBoundingClientRect is not typed in Node
+        c.data!.pos = c.elm.getBoundingClientRect()
+        if (map[c.key!]) {
           kept.push(c)
         } else {
           removed.push(c)
@@ -94,9 +100,9 @@ export default {
     return h(tag, null, children)
   },
 
-  updated () {
-    const children: Array<VNode> = this.prevChildren
-    const moveClass: string = this.moveClass || ((this.name || 'v') + '-move')
+  updated() {
+    const children: Array<VNodeWithData> = this.prevChildren
+    const moveClass: string = this.moveClass || (this.name || 'v') + '-move'
     if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
       return
     }
@@ -113,27 +119,30 @@ export default {
     this._reflow = document.body.offsetHeight
 
     children.forEach((c: VNode) => {
-      if (c.data.moved) {
+      if (c.data!.moved) {
         const el: any = c.elm
         const s: any = el.style
         addTransitionClass(el, moveClass)
         s.transform = s.WebkitTransform = s.transitionDuration = ''
-        el.addEventListener(transitionEndEvent, el._moveCb = function cb (e) {
-          if (e && e.target !== el) {
-            return
-          }
-          if (!e || /transform$/.test(e.propertyName)) {
-            el.removeEventListener(transitionEndEvent, cb)
-            el._moveCb = null
-            removeTransitionClass(el, moveClass)
-          }
-        })
+        el.addEventListener(
+          transitionEndEvent,
+          (el._moveCb = function cb(e) {
+            if (e && e.target !== el) {
+              return
+            }
+            if (!e || /transform$/.test(e.propertyName)) {
+              el.removeEventListener(transitionEndEvent, cb)
+              el._moveCb = null
+              removeTransitionClass(el, moveClass)
+            }
+          })
+        )
       }
     })
   },
 
   methods: {
-    hasMove (el: any, moveClass: string): boolean {
+    hasMove(el: any, moveClass: string): boolean {
       /* istanbul ignore if */
       if (!hasTransition) {
         return false
@@ -149,34 +158,38 @@ export default {
       // is applied.
       const clone: HTMLElement = el.cloneNode()
       if (el._transitionClasses) {
-        el._transitionClasses.forEach((cls: string) => { removeClass(clone, cls) })
+        el._transitionClasses.forEach((cls: string) => {
+          removeClass(clone, cls)
+        })
       }
       addClass(clone, moveClass)
       clone.style.display = 'none'
       this.$el.appendChild(clone)
-      const info: Object = getTransitionInfo(clone)
+      const info: any = getTransitionInfo(clone)
       this.$el.removeChild(clone)
       return (this._hasMove = info.hasTransform)
     }
   }
 }
 
-function callPendingCbs (c: VNode) {
+function callPendingCbs(
+  c: VNodeWithData & { elm?: { _moveCb?: Function; _enterCb?: Function } }
+) {
   /* istanbul ignore if */
-  if (c.elm._moveCb) {
-    c.elm._moveCb()
+  if (c.elm!._moveCb) {
+    c.elm!._moveCb()
   }
   /* istanbul ignore if */
-  if (c.elm._enterCb) {
-    c.elm._enterCb()
+  if (c.elm!._enterCb) {
+    c.elm!._enterCb()
   }
 }
 
-function recordPosition (c: VNode) {
-  c.data.newPos = c.elm.getBoundingClientRect()
+function recordPosition(c: VNodeWithData) {
+  c.data!.newPos = c.elm.getBoundingClientRect()
 }
 
-function applyTranslation (c: VNode) {
+function applyTranslation(c: VNodeWithData) {
   const oldPos = c.data.pos
   const newPos = c.data.newPos
   const dx = oldPos.left - newPos.left

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

@@ -1,5 +1,3 @@
-/* @flow */
-
 // Provides transition support for a single element/component.
 // supports transition mode (out-in / in-out)
 
@@ -10,6 +8,8 @@ import {
   isAsyncPlaceholder,
   getFirstComponentChild
 } from 'core/vdom/helpers/index'
+import VNode from 'core/vdom/vnode'
+import type { Component } from 'types/component'
 
 export const transitionProps = {
   name: String,
@@ -31,8 +31,8 @@ export const transitionProps = {
 
 // in case the child is also an abstract component, e.g. <keep-alive>
 // we want to recursively retrieve the real component to be rendered
-function getRealChild (vnode: ?VNode): ?VNode {
-  const compOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
+function getRealChild(vnode?: VNode): VNode | undefined {
+  const compOptions = vnode && vnode.componentOptions
   if (compOptions && compOptions.Ctor.options.abstract) {
     return getRealChild(getFirstComponentChild(compOptions.children))
   } else {
@@ -40,39 +40,40 @@ function getRealChild (vnode: ?VNode): ?VNode {
   }
 }
 
-export function extractTransitionData (comp: Component): Object {
+export function extractTransitionData(comp: Component): Record<string, any> {
   const data = {}
-  const options: ComponentOptions = comp.$options
+  const options = comp.$options
   // props
   for (const key in options.propsData) {
     data[key] = comp[key]
   }
   // events.
   // extract listeners and pass them directly to the transition methods
-  const listeners: ?Object = options._parentListeners
+  const listeners = options._parentListeners
   for (const key in listeners) {
     data[camelize(key)] = listeners[key]
   }
   return data
 }
 
-function placeholder (h: Function, rawChild: VNode): ?VNode {
+function placeholder(h: Function, rawChild: VNode): VNode | undefined {
+  // @ts-expect-error
   if (/\d-keep-alive$/.test(rawChild.tag)) {
     return h('keep-alive', {
-      props: rawChild.componentOptions.propsData
+      props: rawChild.componentOptions!.propsData
     })
   }
 }
 
-function hasParentTransition (vnode: VNode): ?boolean {
-  while ((vnode = vnode.parent)) {
-    if (vnode.data.transition) {
+function hasParentTransition(vnode: VNode): boolean | undefined {
+  while ((vnode = vnode.parent!)) {
+    if (vnode.data!.transition) {
       return true
     }
   }
 }
 
-function isSameChild (child: VNode, oldChild: VNode): boolean {
+function isSameChild(child: VNode, oldChild: VNode): boolean {
   return oldChild.key === child.key && oldChild.tag === child.tag
 }
 
@@ -85,7 +86,7 @@ export default {
   props: transitionProps,
   abstract: true,
 
-  render (h: Function) {
+  render(h: Function) {
     let children: any = this.$slots.default
     if (!children) {
       return
@@ -99,10 +100,10 @@ export default {
     }
 
     // warn multiple elements
-    if (process.env.NODE_ENV !== 'production' && children.length > 1) {
+    if (__DEV__ && children.length > 1) {
       warn(
         '<transition> can only be used on a single element. Use ' +
-        '<transition-group> for lists.',
+          '<transition-group> for lists.',
         this.$parent
       )
     }
@@ -110,13 +111,8 @@ export default {
     const mode: string = this.mode
 
     // warn invalid mode
-    if (process.env.NODE_ENV !== 'production' &&
-      mode && mode !== 'in-out' && mode !== 'out-in'
-    ) {
-      warn(
-        'invalid <transition> mode: ' + mode,
-        this.$parent
-      )
+    if (__DEV__ && mode && mode !== 'in-out' && mode !== 'out-in') {
+      warn('invalid <transition> mode: ' + mode, this.$parent)
     }
 
     const rawChild: VNode = children[0]
@@ -129,7 +125,7 @@ export default {
 
     // apply transition data to child
     // use getRealChild() to ignore abstract components e.g. keep-alive
-    const child: ?VNode = getRealChild(rawChild)
+    const child = getRealChild(rawChild)
     /* istanbul ignore if */
     if (!child) {
       return rawChild
@@ -143,17 +139,21 @@ export default {
     // component instance. This key will be used to remove pending leaving nodes
     // during entering.
     const id: string = `__transition-${this._uid}-`
-    child.key = child.key == null
-      ? child.isComment
-        ? id + 'comment'
-        : id + child.tag
-      : isPrimitive(child.key)
-        ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
+    child.key =
+      child.key == null
+        ? child.isComment
+          ? id + 'comment'
+          : id + child.tag
+        : isPrimitive(child.key)
+        ? String(child.key).indexOf(id) === 0
+          ? child.key
+          : id + child.key
         : child.key
 
-    const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
+    const data: Object = ((child.data || (child.data = {})).transition =
+      extractTransitionData(this))
     const oldRawChild: VNode = this._vnode
-    const oldChild: VNode = getRealChild(oldRawChild)
+    const oldChild = getRealChild(oldRawChild)
 
     // mark v-show
     // so that the transition module can hand over the control to the directive
@@ -167,11 +167,14 @@ export default {
       !isSameChild(child, oldChild) &&
       !isAsyncPlaceholder(oldChild) &&
       // #6687 component root is a comment node
-      !(oldChild.componentInstance && oldChild.componentInstance._vnode.isComment)
+      !(
+        oldChild.componentInstance &&
+        oldChild.componentInstance._vnode!.isComment
+      )
     ) {
       // replace old child transition data with fresh one
       // important for dynamic transitions!
-      const oldData: Object = oldChild.data.transition = extend({}, data)
+      const oldData: Object = (oldChild.data.transition = extend({}, data))
       // handle transition mode
       if (mode === 'out-in') {
         // return placeholder node and queue update when leave finishes
@@ -186,10 +189,14 @@ export default {
           return oldRawChild
         }
         let delayedLeave
-        const performLeave = () => { delayedLeave() }
+        const performLeave = () => {
+          delayedLeave()
+        }
         mergeVNodeHook(data, 'afterEnter', performLeave)
         mergeVNodeHook(data, 'enterCancelled', performLeave)
-        mergeVNodeHook(oldData, 'delayLeave', leave => { delayedLeave = leave })
+        mergeVNodeHook(oldData, 'delayLeave', leave => {
+          delayedLeave = leave
+        })
       }
     }
 

package/src/platforms/web/runtime/directives/{model.js → model.ts}

@@ -13,6 +13,7 @@ if (isIE9) {
   // http://www.matts411.com/post/internet-explorer-9-oninput/
   document.addEventListener('selectionchange', () => {
     const el = document.activeElement
+    // @ts-expect-error
     if (el && el.vmodel) {
       trigger(el, 'input')
     }
@@ -20,7 +21,7 @@ if (isIE9) {
 }
 
 const directive = {
-  inserted (el, binding, vnode, oldVnode) {
+  inserted(el, binding, vnode, oldVnode) {
     if (vnode.tag === 'select') {
       // #6903
       if (oldVnode.elm && !oldVnode.elm._vOptions) {
@@ -49,7 +50,7 @@ const directive = {
     }
   },
 
-  componentUpdated (el, binding, vnode) {
+  componentUpdated(el, binding, vnode) {
     if (vnode.tag === 'select') {
       setSelected(el, binding, vnode.context)
       // in case the options rendered by v-for have changed,
@@ -57,13 +58,14 @@ const directive = {
       // detect such cases and filter out values that no longer has a matching
       // option in the DOM.
       const prevOptions = el._vOptions
-      const curOptions = el._vOptions = [].map.call(el.options, getValue)
+      const curOptions = (el._vOptions = [].map.call(el.options, getValue))
       if (curOptions.some((o, i) => !looseEqual(o, prevOptions[i]))) {
         // trigger change event if
         // no matching option found for at least one value
         const needReset = el.multiple
           ? binding.value.some(v => hasNoMatchingOption(v, curOptions))
-          : binding.value !== binding.oldValue && hasNoMatchingOption(binding.value, curOptions)
+          : binding.value !== binding.oldValue &&
+            hasNoMatchingOption(binding.value, curOptions)
         if (needReset) {
           trigger(el, 'change')
         }
@@ -72,7 +74,7 @@ const directive = {
   }
 }
 
-function setSelected (el, binding, vm) {
+function setSelected(el, binding, vm) {
   actuallySetSelected(el, binding, vm)
   /* istanbul ignore if */
   if (isIE || isEdge) {
@@ -82,17 +84,18 @@ function setSelected (el, binding, vm) {
   }
 }
 
-function actuallySetSelected (el, binding, vm) {
+function actuallySetSelected(el, binding, vm) {
   const value = binding.value
   const isMultiple = el.multiple
   if (isMultiple && !Array.isArray(value)) {
-    process.env.NODE_ENV !== 'production' && warn(
-      `<select multiple v-model="${binding.expression}"> ` +
-      `expects an Array value for its binding, but got ${
-        Object.prototype.toString.call(value).slice(8, -1)
-      }`,
-      vm
-    )
+    __DEV__ &&
+      warn(
+        `<select multiple v-model="${binding.expression}"> ` +
+          `expects an Array value for its binding, but got ${Object.prototype.toString
+            .call(value)
+            .slice(8, -1)}`,
+        vm
+      )
     return
   }
   let selected, option
@@ -117,28 +120,26 @@ function actuallySetSelected (el, binding, vm) {
   }
 }
 
-function hasNoMatchingOption (value, options) {
+function hasNoMatchingOption(value, options) {
   return options.every(o => !looseEqual(o, value))
 }
 
-function getValue (option) {
-  return '_value' in option
-    ? option._value
-    : option.value
+function getValue(option) {
+  return '_value' in option ? option._value : option.value
 }
 
-function onCompositionStart (e) {
+function onCompositionStart(e) {
   e.target.composing = true
 }
 
-function onCompositionEnd (e) {
+function onCompositionEnd(e) {
   // prevent triggering an input event for no reason
   if (!e.target.composing) return
   e.target.composing = false
   trigger(e.target, 'input')
 }
 
-function trigger (el, type) {
+function trigger(el, type) {
   const e = document.createEvent('HTMLEvents')
   e.initEvent(type, true, true)
   el.dispatchEvent(e)

package/src/platforms/web/runtime/directives/{show.js → show.ts}

@@ -1,20 +1,21 @@
-/* @flow */
-
-import { enter, leave } from '../modules/transition'
+import VNode from 'core/vdom/vnode'
+import type { VNodeDirective, VNodeWithData } from 'types/vnode'
+import { enter, leave } from 'web/runtime/modules/transition'
 
 // recursively search for possible transition defined inside the component root
-function locateNode (vnode: VNode): VNodeWithData {
+function locateNode(vnode: VNode | VNodeWithData): VNodeWithData {
+  // @ts-expect-error
   return vnode.componentInstance && (!vnode.data || !vnode.data.transition)
-    ? locateNode(vnode.componentInstance._vnode)
+    ? locateNode(vnode.componentInstance._vnode!)
     : vnode
 }
 
 export default {
-  bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
+  bind(el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
     vnode = locateNode(vnode)
     const transition = vnode.data && vnode.data.transition
-    const originalDisplay = el.__vOriginalDisplay =
-      el.style.display === 'none' ? '' : el.style.display
+    const originalDisplay = (el.__vOriginalDisplay =
+      el.style.display === 'none' ? '' : el.style.display)
     if (value && transition) {
       vnode.data.show = true
       enter(vnode, () => {
@@ -25,7 +26,7 @@ export default {
     }
   },
 
-  update (el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
+  update(el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
     /* istanbul ignore if */
     if (!value === !oldValue) return
     vnode = locateNode(vnode)
@@ -46,7 +47,7 @@ export default {
     }
   },
 
-  unbind (
+  unbind(
     el: any,
     binding: VNodeDirective,
     vnode: VNodeWithData,

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

@@ -1,5 +1,3 @@
-/* @flow */
-
 import Vue from 'core/index'
 import config from 'core/config'
 import { extend, noop } from 'shared/util'
@@ -18,6 +16,7 @@ import {
 import { patch } from './patch'
 import platformDirectives from './directives/index'
 import platformComponents from './components/index'
+import type { Component } from 'types/component'
 
 // install platform specific utils
 Vue.config.mustUseProp = mustUseProp
@@ -49,25 +48,25 @@ if (inBrowser) {
     if (config.devtools) {
       if (devtools) {
         devtools.emit('init', Vue)
-      } else if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
+      } else if (__DEV__ && process.env.NODE_ENV !== 'test') {
+        // @ts-expect-error
         console[console.info ? 'info' : 'log'](
           'Download the Vue Devtools extension for a better development experience:\n' +
-          'https://github.com/vuejs/vue-devtools'
+            'https://github.com/vuejs/vue-devtools'
         )
       }
     }
-    if (process.env.NODE_ENV !== 'production' &&
+    if (
+      __DEV__ &&
       process.env.NODE_ENV !== 'test' &&
       config.productionTip !== false &&
       typeof console !== 'undefined'
     ) {
+      // @ts-expect-error
       console[console.info ? 'info' : 'log'](
         `You are running Vue in development mode.\n` +
-        `Make sure to turn on production mode when deploying for production.\n` +
-        `See more tips at https://vuejs.org/guide/deployment.html`
+          `Make sure to turn on production mode when deploying for production.\n` +
+          `See more tips at https://vuejs.org/guide/deployment.html`
       )
     }
   }, 0)

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

@@ -1,12 +1,7 @@
-/* @flow */
-
 import { isIE, isIE9, isEdge } from 'core/util/env'
 
-import {
-  extend,
-  isDef,
-  isUndef
-} from 'shared/util'
+import { extend, isDef, isUndef, isTrue } from 'shared/util'
+import type { VNodeWithData } from 'types/vnode'
 
 import {
   isXlink,
@@ -18,7 +13,7 @@ import {
   convertEnumeratedValue
 } from 'web/util/index'
 
-function updateAttrs (oldVnode: VNodeWithData, vnode: VNodeWithData) {
+function updateAttrs(oldVnode: VNodeWithData, vnode: VNodeWithData) {
   const opts = vnode.componentOptions
   if (isDef(opts) && opts.Ctor.options.inheritAttrs === false) {
     return
@@ -31,7 +26,7 @@ function updateAttrs (oldVnode: VNodeWithData, vnode: VNodeWithData) {
   const oldAttrs = oldVnode.data.attrs || {}
   let attrs: any = vnode.data.attrs || {}
   // clone observed objects, as the user probably wants to mutate it
-  if (isDef(attrs.__ob__)) {
+  if (isDef(attrs.__ob__) || isTrue(attrs._v_attr_proxy)) {
     attrs = vnode.data.attrs = extend({}, attrs)
   }
 
@@ -59,7 +54,7 @@ function updateAttrs (oldVnode: VNodeWithData, vnode: VNodeWithData) {
   }
 }
 
-function setAttr (el: Element, key: string, value: any, isInPre: any) {
+function setAttr(el: Element, key: string, value: any, isInPre?: any) {
   if (isInPre || el.tagName.indexOf('-') > -1) {
     baseSetAttr(el, key, value)
   } else if (isBooleanAttr(key)) {
@@ -70,9 +65,7 @@ function setAttr (el: Element, key: string, value: any, isInPre: any) {
     } else {
       // technically allowfullscreen is a boolean attribute for <iframe>,
       // but Flash expects a value of "true" when used on <embed> tag
-      value = key === 'allowfullscreen' && el.tagName === 'EMBED'
-        ? 'true'
-        : key
+      value = key === 'allowfullscreen' && el.tagName === 'EMBED' ? 'true' : key
       el.setAttribute(key, value)
     }
   } else if (isEnumeratedAttr(key)) {
@@ -88,7 +81,7 @@ function setAttr (el: Element, key: string, value: any, isInPre: any) {
   }
 }
 
-function baseSetAttr (el, key, value) {
+function baseSetAttr(el, key, value) {
   if (isFalsyAttrValue(value)) {
     el.removeAttribute(key)
   } else {
@@ -97,9 +90,12 @@ function baseSetAttr (el, key, value) {
     // immediately.
     /* istanbul ignore if */
     if (
-      isIE && !isIE9 &&
+      isIE &&
+      !isIE9 &&
       el.tagName === 'TEXTAREA' &&
-      key === 'placeholder' && value !== '' && !el.__ieph
+      key === 'placeholder' &&
+      value !== '' &&
+      !el.__ieph
     ) {
       const blocker = e => {
         e.stopImmediatePropagation()