: { [K in string]: any }
const enum BooleanFlags {
- shouldCast = '1',
- shouldCastTrue = '2'
+ shouldCast,
+ shouldCastTrue
}
type NormalizedProp =
import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
import { ShapeFlags } from '../shapeFlags'
-export interface TransitionProps {
+export interface BaseTransitionProps {
mode?: 'in-out' | 'out-in' | 'default'
appear?: boolean
leave?: (cancelled?: boolean) => void
}
-const TransitionImpl = {
+const BaseTransitionImpl = {
name: `BaseTransition`,
- setup(props: TransitionProps, { slots }: SetupContext) {
+ setup(props: BaseTransitionProps, { slots }: SetupContext) {
const instance = getCurrentInstance()!
const pendingCallbacks: PendingCallbacks = {}
let isLeaving = false
}
if (__DEV__) {
- ;(TransitionImpl as ComponentOptions).props = {
+ ;(BaseTransitionImpl as ComponentOptions).props = {
mode: String,
appear: Boolean,
persisted: Boolean,
// export the public type for h/tsx inference
// also to avoid inline import() in generated d.ts files
-export const Transition = (TransitionImpl as any) as {
+export const BaseTransition = (BaseTransitionImpl as any) as {
new (): {
- $props: TransitionProps
+ $props: BaseTransitionProps
}
}
onLeave,
onAfterLeave,
onLeaveCancelled
- }: TransitionProps,
+ }: BaseTransitionProps,
callHook: TransitionHookCaller,
isMounted: boolean,
pendingCallbacks: PendingCallbacks,
// Internal Components
export { Suspense, SuspenseProps } from './components/Suspense'
export { KeepAlive, KeepAliveProps } from './components/KeepAlive'
-export { Transition, TransitionProps } from './components/Transition'
+export {
+ BaseTransition,
+ BaseTransitionProps
+} from './components/BaseTransition'
// VNode flags
export { PublicShapeFlags as ShapeFlags } from './shapeFlags'
import { PublicPatchFlags } from '@vue/shared'
import { SuspenseBoundary } from './components/Suspense'
import { DirectiveBinding } from './directives'
import { SuspenseImpl } from './components/Suspense'
-import { TransitionHooks } from './components/Transition'
+import { TransitionHooks } from './components/BaseTransition'
+import { warn } from './warning'
export const Fragment = (Symbol(__DEV__ ? 'Fragment' : undefined) as any) as {
__isFragment: true
patchFlag: number = 0,
dynamicProps: string[] | null = null
): VNode {
+ if (__DEV__ && !type) {
+ warn(`Invalid vnode type when creating vnode: ${type}.`)
+ type = Comment
+ }
+
// class & style normalization.
if (props !== null) {
// for reactive or proxy objects, we need to clone it to enable mutation.
import {
- Transition as BaseTransition,
- TransitionProps,
+ BaseTransition,
+ BaseTransitionProps,
h,
warn,
FunctionalComponent,
const TRANSITION = 'transition'
const ANIMATION = 'animation'
-export interface CSSTransitionProps extends TransitionProps {
+export interface TransitionProps extends BaseTransitionProps {
name?: string
type?: typeof TRANSITION | typeof ANIMATION
duration?: number | { enter: number; leave: number }
leaveToClass?: string
}
-// CSSTransition is a higher-order-component based on the platform-agnostic
+// DOM Transition is a higher-order-component based on the platform-agnostic
// base Transition component, with DOM-specific logic.
-export const CSSTransition: FunctionalComponent = (
- props: CSSTransitionProps,
+export const Transition: FunctionalComponent = (
+ props: TransitionProps,
{ slots }
-) => h(BaseTransition, resolveCSSTransitionProps(props), slots)
+) => h(BaseTransition, resolveTransitionProps(props), slots)
if (__DEV__) {
- CSSTransition.props = {
+ Transition.props = {
...(BaseTransition as any).props,
name: String,
type: String,
}
}
-function resolveCSSTransitionProps({
+function resolveTransitionProps({
name = 'v',
type,
duration,
leaveActiveClass = `${name}-leave-active`,
leaveToClass = `${name}-leave-to`,
...baseProps
-}: CSSTransitionProps): TransitionProps {
+}: TransitionProps): BaseTransitionProps {
const instance = getCurrentInstance()!
const durations = normalizeDuration(duration)
const enterDuration = durations && durations[0]
}
function normalizeDuration(
- duration: CSSTransitionProps['duration']
+ duration: TransitionProps['duration']
): [number, number] | null {
if (duration == null) {
return null
function whenTransitionEnds(
el: Element,
- expectedType: CSSTransitionProps['type'] | undefined,
+ expectedType: TransitionProps['type'] | undefined,
cb: () => void
) {
const { type, timeout, propCount } = getTransitionInfo(el, expectedType)
function getTransitionInfo(
el: Element,
- expectedType?: CSSTransitionProps['type']
+ expectedType?: TransitionProps['type']
): CSSTransitionInfo {
const styles: any = window.getComputedStyle(el)
// JSDOM may return undefined for transition properties
export { withModifiers, withKeys } from './directives/vOn'
// DOM-only components
-export { CSSTransition, CSSTransitionProps } from './components/CSSTransition'
+export { Transition, TransitionProps } from './components/Transition'
// re-export everything from core
// h, Component, reactivity API, nextTick, flags & types
-import { ElementWithTransition } from '../components/CSSTransition'
+import { ElementWithTransition } from '../components/Transition'
// compiler should normalize class + :class bindings on the same element
// into a single binding ['staticClass', dynamic]