feat(transition): base transition component

packages/runtime-core/src/vnode.ts

@@ -19,6 +19,7 @@ import { AppContext } from './apiApp'
 import { SuspenseBoundary } from './components/Suspense'
 import { DirectiveBinding } from './directives'
 import { SuspenseImpl } from './components/Suspense'
+import { TransitionProps } from './components/Transition'
 
 export const Fragment = (Symbol(__DEV__ ? 'Fragment' : undefined) as any) as {
   __isFragment: true
@@ -48,6 +49,19 @@ export interface VNodeProps {
   [key: string]: any
   key?: string | number
   ref?: string | Ref | ((ref: object | null) => void)
+
+  // vnode hooks
+  onVnodeBeforeMount?: (vnode: VNode) => void
+  onVnodeMounted?: (vnode: VNode) => void
+  onVnodeBeforeUpdate?: (vnode: VNode, oldVNode: VNode) => void
+  onVnodeUpdated?: (vnode: VNode, oldVNode: VNode) => void
+  onVnodeBeforeUnmount?: (vnode: VNode) => void
+  onVnodeUnmounted?: (vnode: VNode) => void
+
+  // transition hooks, internal.
+  onVnodeDelayLeave?: (performLeave: () => void) => void
+  onVnodeBeforeRemove?: (vnode: VNode, remove: () => void) => void
+  onVnodeRemoved?: () => void
 }
 
 type VNodeChildAtom<HostNode, HostElement> =
@@ -79,11 +93,12 @@ export interface VNode<HostNode = any, HostElement = any> {
   type: VNodeTypes
   props: VNodeProps | null
   key: string | number | null
-  ref: string | Function | null
+  ref: string | Ref | ((ref: object | null) => void) | null
   children: NormalizedChildren<HostNode, HostElement>
   component: ComponentInternalInstance | null
   suspense: SuspenseBoundary<HostNode, HostElement> | null
   dirs: DirectiveBinding[] | null
+  transition: TransitionProps | null
 
   // DOM
   el: HostNode | null
@@ -173,9 +188,13 @@ export function isVNode(value: any): value is VNode {
   return value ? value._isVNode === true : false
 }
 
+export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
+  return n1.type === n2.type && n1.key === n2.key
+}
+
 export function createVNode(
   type: VNodeTypes,
-  props: { [key: string]: any } | null = null,
+  props: (Data & VNodeProps) | null = null,
   children: unknown = null,
   patchFlag: number = 0,
   dynamicProps: string[] | null = null
@@ -221,6 +240,7 @@ export function createVNode(
     component: null,
     suspense: null,
     dirs: null,
+    transition: null,
     el: null,
     anchor: null,
     target: null,
@@ -252,7 +272,7 @@ export function createVNode(
 
 export function cloneVNode<T, U>(
   vnode: VNode<T, U>,
-  extraProps?: Data
+  extraProps?: Data & VNodeProps
 ): VNode<T, U> {
   // This is intentionally NOT using spread or extend to avoid the runtime
   // key enumeration cost.
@@ -274,6 +294,7 @@ export function cloneVNode<T, U>(
     dynamicChildren: vnode.dynamicChildren,
     appContext: vnode.appContext,
     dirs: vnode.dirs,
+    transition: vnode.transition,
 
     // These should technically only be non-null on mounted VNodes. However,
     // they *should* be copied for kept-alive vnodes. So we just always copy
@@ -376,7 +397,7 @@ export function normalizeClass(value: unknown): string {
 
 const handlersRE = /^on|^vnode/
 
-export function mergeProps(...args: Data[]) {
+export function mergeProps(...args: (Data & VNodeProps)[]) {
   const ret: Data = {}
   extend(ret, args[0])
   for (let i = 1; i < args.length; i++) {