diff --git a/src/core/components/keep-alive.js b/src/core/components/keep-alive.js index 559518174..5f5d05f9c 100644 --- a/src/core/components/keep-alive.js +++ b/src/core/components/keep-alive.js @@ -3,6 +3,8 @@ import { callHook } from 'core/instance/lifecycle' import { getFirstComponentChild } from 'core/vdom/helpers/index' +type VNodeCache = { [key: string]: ?VNode }; + const patternTypes: Array = [String, RegExp] function getComponentName (opts: ?VNodeComponentOptions): ?string { @@ -19,11 +21,11 @@ function matches (pattern: string | RegExp, name: string): boolean { return false } -function pruneCache (cache, filter) { +function pruneCache (cache: VNodeCache, filter: Function) { for (const key in cache) { - const cachedNode = cache[key] + const cachedNode: ?VNode = cache[key] if (cachedNode) { - const name = getComponentName(cachedNode.componentOptions) + const name: ?string = getComponentName(cachedNode.componentOptions) if (name && !filter(name)) { pruneCacheEntry(cachedNode) cache[key] = null @@ -32,7 +34,7 @@ function pruneCache (cache, filter) { } } -function pruneCacheEntry (vnode: ?MountedComponentVNode) { +function pruneCacheEntry (vnode: ?VNode) { if (vnode) { if (!vnode.componentInstance._inactive) { callHook(vnode.componentInstance, 'deactivated') @@ -71,17 +73,17 @@ export default { render () { const vnode: VNode = getFirstComponentChild(this.$slots.default) - const componentOptions = vnode && vnode.componentOptions + const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (componentOptions) { // check pattern - const name = getComponentName(componentOptions) + const name: ?string = getComponentName(componentOptions) if (name && ( (this.include && !matches(this.include, name)) || (this.exclude && matches(this.exclude, name)) )) { return vnode } - const key = vnode.key == null + const key: ?string = vnode.key == null // same constructor may get registered as different local components // so cid alone is not enough (#3269) ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') diff --git a/src/core/vdom/helpers/index.js b/src/core/vdom/helpers/index.js index e50874095..45c19bec9 100644 --- a/src/core/vdom/helpers/index.js +++ b/src/core/vdom/helpers/index.js @@ -4,6 +4,6 @@ export * from './merge-hook' export * from './update-listeners' export * from './normalize-children' -export function getFirstComponentChild (children: ?Array): ?VNodeWithData { - return children && children.filter(c => c && c.componentOptions)[0] +export function getFirstComponentChild (children: ?Array): ?VNode { + return children && children.filter((c: VNode) => c && c.componentOptions)[0] } diff --git a/src/core/vdom/helpers/merge-hook.js b/src/core/vdom/helpers/merge-hook.js index b23a4d984..21f0b664e 100644 --- a/src/core/vdom/helpers/merge-hook.js +++ b/src/core/vdom/helpers/merge-hook.js @@ -2,10 +2,10 @@ export function mergeVNodeHook (def: Object, hookKey: string, hook: Function, key: string) { key = key + hookKey - const injectedHash = def.__injected || (def.__injected = {}) + const injectedHash: Object = def.__injected || (def.__injected = {}) if (!injectedHash[key]) { injectedHash[key] = true - const oldHook = def[hookKey] + const oldHook: ?Function = def[hookKey] if (oldHook) { def[hookKey] = function () { oldHook.apply(this, arguments) diff --git a/src/platforms/web/runtime/components/transition-group.js b/src/platforms/web/runtime/components/transition-group.js index 7b92aa32c..b14748864 100644 --- a/src/platforms/web/runtime/components/transition-group.js +++ b/src/platforms/web/runtime/components/transition-group.js @@ -34,35 +34,33 @@ export default { props, render (h: Function) { - const tag = this.tag || this.$vnode.data.tag || 'span' - const map = Object.create(null) - const prevChildren = this.prevChildren = this.children - const rawChildren = this.$slots.default || [] - const children = this.children = [] - const transitionData = extractTransitionData(this) + const tag: string = this.tag || this.$vnode.data.tag || 'span' + const map: Object = Object.create(null) + const prevChildren: Array = this.prevChildren = this.children + const rawChildren: Array = this.$slots.default || [] + const children: Array = this.children = [] + const transitionData: Object = extractTransitionData(this) for (let i = 0; i < rawChildren.length; i++) { - const c = rawChildren[i] + const c: VNode = rawChildren[i] if (c.tag) { if (c.key != null && String(c.key).indexOf('__vlist') !== 0) { children.push(c) map[c.key] = c ;(c.data || (c.data = {})).transition = transitionData } else if (process.env.NODE_ENV !== 'production') { - const opts = c.componentOptions - const name = opts - ? (opts.Ctor.options.name || opts.tag) - : c.tag + const opts: ?VNodeComponentOptions = c.componentOptions + const name: string = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag warn(` children must be keyed: <${name}>`) } } } if (prevChildren) { - const kept = [] - const removed = [] + const kept: Array = [] + const removed: Array = [] for (let i = 0; i < prevChildren.length; i++) { - const c = prevChildren[i] + const c: VNode = prevChildren[i] c.data.transition = transitionData c.data.pos = c.elm.getBoundingClientRect() if (map[c.key]) { @@ -90,8 +88,8 @@ export default { }, updated () { - const children = this.prevChildren - const moveClass = this.moveClass || ((this.name || 'v') + '-move') + const children: Array = this.prevChildren + const moveClass: string = this.moveClass || ((this.name || 'v') + '-move') if (!children.length || !this.hasMove(children[0].elm, moveClass)) { return } @@ -104,12 +102,12 @@ export default { // force reflow to put everything in position const body: any = document.body - const f = body.offsetHeight // eslint-disable-line + const f: number = body.offsetHeight // eslint-disable-line - children.forEach(c => { + children.forEach((c: VNode) => { if (c.data.moved) { - var el = c.elm - var s = el.style + var el: any = c.elm + var s: any = el.style addTransitionClass(el, moveClass) s.transform = s.WebkitTransform = s.transitionDuration = '' el.addEventListener(transitionEndEvent, el._moveCb = function cb (e) { @@ -137,21 +135,21 @@ export default { // transition at this very moment, we make a clone of it and remove // all other transition classes applied to ensure only the move class // is applied. - const clone = el.cloneNode() + const clone: HTMLElement = el.cloneNode() if (el._transitionClasses) { - el._transitionClasses.forEach(cls => { removeClass(clone, cls) }) + el._transitionClasses.forEach((cls: string) => { removeClass(clone, cls) }) } addClass(clone, moveClass) clone.style.display = 'none' this.$el.appendChild(clone) - const info = getTransitionInfo(clone) + const info: Object = getTransitionInfo(clone) this.$el.removeChild(clone) return (this._hasMove = info.hasTransform) } } } -function callPendingCbs (c) { +function callPendingCbs (c: VNode) { /* istanbul ignore if */ if (c.elm._moveCb) { c.elm._moveCb() @@ -162,11 +160,11 @@ function callPendingCbs (c) { } } -function recordPosition (c) { +function recordPosition (c: VNode) { c.data.newPos = c.elm.getBoundingClientRect() } -function applyTranslation (c) { +function applyTranslation (c: VNode) { const oldPos = c.data.pos const newPos = c.data.newPos const dx = oldPos.left - newPos.left diff --git a/src/platforms/web/runtime/components/transition.js b/src/platforms/web/runtime/components/transition.js index f23e8f868..fa9e759ec 100644 --- a/src/platforms/web/runtime/components/transition.js +++ b/src/platforms/web/runtime/components/transition.js @@ -28,7 +28,7 @@ export const transitionProps = { // in case the child is also an abstract component, e.g. // we want to recursively retrieve the real component to be rendered function getRealChild (vnode: ?VNode): ?VNode { - const compOptions = vnode && vnode.componentOptions + const compOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (compOptions && compOptions.Ctor.options.abstract) { return getRealChild(getFirstComponentChild(compOptions.children)) } else { @@ -38,27 +38,27 @@ function getRealChild (vnode: ?VNode): ?VNode { export function extractTransitionData (comp: Component): Object { const data = {} - const options = comp.$options + const options: ComponentOptions = 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 = options._parentListeners + const listeners: ?Object = options._parentListeners for (const key in listeners) { data[camelize(key)] = listeners[key].fn } return data } -function placeholder (h, rawChild) { +function placeholder (h: Function, rawChild: VNode): ?VNode { return /\d-keep-alive$/.test(rawChild.tag) ? h('keep-alive') : null } -function hasParentTransition (vnode) { +function hasParentTransition (vnode: VNode): ?boolean { while ((vnode = vnode.parent)) { if (vnode.data.transition) { return true @@ -66,7 +66,7 @@ function hasParentTransition (vnode) { } } -function isSameChild (child, oldChild) { +function isSameChild (child: VNode, oldChild: VNode): boolean { return oldChild.key === child.key && oldChild.tag === child.tag } @@ -76,13 +76,13 @@ export default { abstract: true, render (h: Function) { - let children = this.$slots.default + let children: ?Array = this.$slots.default if (!children) { return } // filter out text nodes (possible whitespaces) - children = children.filter(c => c.tag) + children = children.filter((c: VNode) => c.tag) /* istanbul ignore if */ if (!children.length) { return @@ -97,7 +97,7 @@ export default { ) } - const mode = this.mode + const mode: string = this.mode // warn invalid mode if (process.env.NODE_ENV !== 'production' && @@ -108,7 +108,7 @@ export default { ) } - const rawChild = children[0] + const rawChild: VNode = children[0] // if this is a component root node and the component's // parent container node also has transition, skip. @@ -118,7 +118,7 @@ export default { // apply transition data to child // use getRealChild() to ignore abstract components e.g. keep-alive - const child = getRealChild(rawChild) + const child: ?VNode = getRealChild(rawChild) /* istanbul ignore if */ if (!child) { return rawChild @@ -131,15 +131,15 @@ export default { // ensure a key that is unique to the vnode type and to this transition // component instance. This key will be used to remove pending leaving nodes // during entering. - const id = `__transition-${this._uid}-` - const key = child.key = child.key == null + const id: string = `__transition-${this._uid}-` + const key: string = child.key = child.key == null ? id + child.tag : isPrimitive(child.key) ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key) : child.key - const data = (child.data || (child.data = {})).transition = extractTransitionData(this) - const oldRawChild = this._vnode - const oldChild: any = getRealChild(oldRawChild) + const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this) + const oldRawChild: VNode = this._vnode + const oldChild: VNode = getRealChild(oldRawChild) // mark v-show // so that the transition module can hand over the control to the directive @@ -150,7 +150,7 @@ export default { if (oldChild && oldChild.data && !isSameChild(child, oldChild)) { // replace old child transition data with fresh one // important for dynamic transitions! - const oldData = oldChild && (oldChild.data.transition = extend({}, data)) + const oldData: Object = oldChild && (oldChild.data.transition = extend({}, data)) // handle transition mode if (mode === 'out-in') { // return placeholder node and queue update when leave finishes @@ -161,8 +161,8 @@ export default { }, key) return placeholder(h, rawChild) } else if (mode === 'in-out') { - var delayedLeave - var performLeave = () => { delayedLeave() } + let delayedLeave + const performLeave = () => { delayedLeave() } mergeVNodeHook(data, 'afterEnter', performLeave, key) mergeVNodeHook(data, 'enterCancelled', performLeave, key) mergeVNodeHook(oldData, 'delayLeave', leave => { diff --git a/src/platforms/web/runtime/transition-util.js b/src/platforms/web/runtime/transition-util.js index ad65dc22c..b03b5f499 100644 --- a/src/platforms/web/runtime/transition-util.js +++ b/src/platforms/web/runtime/transition-util.js @@ -88,7 +88,7 @@ export function whenTransitionEnds ( ) { const { type, timeout, propCount } = getTransitionInfo(el, expectedType) if (!type) return cb() - const event = type === TRANSITION ? transitionEndEvent : animationEndEvent + const event: string = type === TRANSITION ? transitionEndEvent : animationEndEvent let ended = 0 const end = () => { el.removeEventListener(event, onEnd) @@ -117,15 +117,15 @@ export function getTransitionInfo (el: Element, expectedType?: ?string): { timeout: number; hasTransform: boolean; } { - const styles = window.getComputedStyle(el) - const transitioneDelays = styles[transitionProp + 'Delay'].split(', ') - const transitionDurations = styles[transitionProp + 'Duration'].split(', ') - const transitionTimeout = getTimeout(transitioneDelays, transitionDurations) - const animationDelays = styles[animationProp + 'Delay'].split(', ') - const animationDurations = styles[animationProp + 'Duration'].split(', ') - const animationTimeout = getTimeout(animationDelays, animationDurations) + const styles: any = window.getComputedStyle(el) + const transitioneDelays: Array = styles[transitionProp + 'Delay'].split(', ') + const transitionDurations: Array = styles[transitionProp + 'Duration'].split(', ') + const transitionTimeout: number = getTimeout(transitioneDelays, transitionDurations) + const animationDelays: Array = styles[animationProp + 'Delay'].split(', ') + const animationDurations: Array = styles[animationProp + 'Duration'].split(', ') + const animationTimeout: number = getTimeout(animationDelays, animationDurations) - let type + let type: ?string let timeout = 0 let propCount = 0 /* istanbul ignore if */ @@ -154,7 +154,7 @@ export function getTransitionInfo (el: Element, expectedType?: ?string): { : animationDurations.length : 0 } - const hasTransform = + const hasTransform: boolean = type === TRANSITION && transformRE.test(styles[transitionProp + 'Property']) return {