diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts index 5d921f3b..9d9f4775 100644 --- a/packages/runtime-core/src/componentProps.ts +++ b/packages/runtime-core/src/componentProps.ts @@ -69,8 +69,8 @@ export type ExtractPropTypes< : { [K in string]: any } const enum BooleanFlags { - shouldCast = '1', - shouldCastTrue = '2' + shouldCast, + shouldCastTrue } type NormalizedProp = diff --git a/packages/runtime-core/src/components/Transition.ts b/packages/runtime-core/src/components/BaseTransition.ts similarity index 96% rename from packages/runtime-core/src/components/Transition.ts rename to packages/runtime-core/src/components/BaseTransition.ts index 0b3465d0..9ffa165c 100644 --- a/packages/runtime-core/src/components/Transition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -10,7 +10,7 @@ import { toRaw } from '@vue/reactivity' import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling' import { ShapeFlags } from '../shapeFlags' -export interface TransitionProps { +export interface BaseTransitionProps { mode?: 'in-out' | 'out-in' | 'default' appear?: boolean @@ -46,9 +46,9 @@ interface PendingCallbacks { 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 @@ -138,7 +138,7 @@ const TransitionImpl = { } if (__DEV__) { - ;(TransitionImpl as ComponentOptions).props = { + ;(BaseTransitionImpl as ComponentOptions).props = { mode: String, appear: Boolean, persisted: Boolean, @@ -157,9 +157,9 @@ if (__DEV__) { // 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 } } @@ -186,7 +186,7 @@ function resolveTransitionHooks( onLeave, onAfterLeave, onLeaveCancelled - }: TransitionProps, + }: BaseTransitionProps, callHook: TransitionHookCaller, isMounted: boolean, pendingCallbacks: PendingCallbacks, diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts index bb7c4688..88831de3 100644 --- a/packages/runtime-core/src/index.ts +++ b/packages/runtime-core/src/index.ts @@ -28,7 +28,10 @@ export { Text, Comment, Fragment, Portal } from './vnode' // 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' diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index a56cc976..d09040b9 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -19,7 +19,8 @@ import { AppContext } from './apiApp' 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 @@ -194,6 +195,11 @@ export function createVNode( 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. diff --git a/packages/runtime-dom/src/components/CSSTransition.ts b/packages/runtime-dom/src/components/Transition.ts similarity index 93% rename from packages/runtime-dom/src/components/CSSTransition.ts rename to packages/runtime-dom/src/components/Transition.ts index 58f9e71c..b61fe25b 100644 --- a/packages/runtime-dom/src/components/CSSTransition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -1,6 +1,6 @@ import { - Transition as BaseTransition, - TransitionProps, + BaseTransition, + BaseTransitionProps, h, warn, FunctionalComponent, @@ -13,7 +13,7 @@ import { ErrorCodes } from 'packages/runtime-core/src/errorHandling' 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 } @@ -29,15 +29,15 @@ export interface CSSTransitionProps extends TransitionProps { 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, @@ -54,7 +54,7 @@ if (__DEV__) { } } -function resolveCSSTransitionProps({ +function resolveTransitionProps({ name = 'v', type, duration, @@ -68,7 +68,7 @@ function resolveCSSTransitionProps({ 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] @@ -147,7 +147,7 @@ function resolveCSSTransitionProps({ } function normalizeDuration( - duration: CSSTransitionProps['duration'] + duration: TransitionProps['duration'] ): [number, number] | null { if (duration == null) { return null @@ -210,7 +210,7 @@ function nextFrame(cb: () => void) { function whenTransitionEnds( el: Element, - expectedType: CSSTransitionProps['type'] | undefined, + expectedType: TransitionProps['type'] | undefined, cb: () => void ) { const { type, timeout, propCount } = getTransitionInfo(el, expectedType) @@ -247,7 +247,7 @@ interface CSSTransitionInfo { function getTransitionInfo( el: Element, - expectedType?: CSSTransitionProps['type'] + expectedType?: TransitionProps['type'] ): CSSTransitionInfo { const styles: any = window.getComputedStyle(el) // JSDOM may return undefined for transition properties diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts index bec21093..cebfa555 100644 --- a/packages/runtime-dom/src/index.ts +++ b/packages/runtime-dom/src/index.ts @@ -66,7 +66,7 @@ export { 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 diff --git a/packages/runtime-dom/src/modules/class.ts b/packages/runtime-dom/src/modules/class.ts index 9641a952..34cb5d8d 100644 --- a/packages/runtime-dom/src/modules/class.ts +++ b/packages/runtime-dom/src/modules/class.ts @@ -1,4 +1,4 @@ -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]