refactor: rename transition components

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 =

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,

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'

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.

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

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

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]