feat(vapor): vapor transition

Author: edison1105

packages/compiler-vapor/src/generators/component.ts

@@ -52,13 +52,12 @@ export function genCreateComponent(
   const [ids, handlers] = processInlineHandlers(props, context)
   const rawProps = context.withId(() => genRawProps(props, context), ids)
   const inlineHandlers: CodeFragment[] = handlers.reduce<CodeFragment[]>(
-    (acc, { name, value }) => {
+    (acc, { name, value }: InlineHandler) => {
       const handler = genEventHandler(context, value, undefined, false)
       return [...acc, `const ${name} = `, ...handler, NEWLINE]
     },
     [],
   )
-
   return [
     NEWLINE,
     ...inlineHandlers,

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -124,7 +124,9 @@ function transformComponentElement(
   }
 
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
-  context.registerOperation({
+  // context.registerOperation()
+  // TODO revert wait for https://github.com/vuejs/core/pull/12951 get merged
+  context.block.operation.unshift({
     type: IRNodeTypes.CREATE_COMPONENT_NODE,
     id: context.reference(),
     tag,

packages/runtime-core/src/components/BaseTransition.ts

@@ -1,6 +1,7 @@
 import {
   type ComponentInternalInstance,
   type ComponentOptions,
+  type GenericComponentInstance,
   type SetupContext,
   getCurrentInstance,
 } from '../component'
@@ -324,7 +325,7 @@ export function resolveTransitionHooks(
   vnode: VNode,
   props: BaseTransitionProps<any>,
   state: TransitionState,
-  instance: ComponentInternalInstance,
+  instance: GenericComponentInstance,
   postClone?: (hooks: TransitionHooks) => void,
 ): TransitionHooks {
   const {

packages/runtime-core/src/index.ts

@@ -557,3 +557,7 @@ export { startMeasure, endMeasure } from './profiling'
  * @internal
  */
 export { initFeatureFlags } from './featureFlags'
+/**
+ * @internal
+ */
+export { applyTransitionEnter, applyTransitionLeave } from './renderer'

packages/runtime-core/src/renderer.ts

@@ -731,19 +731,20 @@ function baseCreateRenderer(
     }
     // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved
     // #1689 For inside suspense + suspense resolved case, just call it
-    const needCallTransitionHooks = needTransition(parentSuspense, transition)
-    if (needCallTransitionHooks) {
-      transition!.beforeEnter(el)
+    if (transition) {
+      applyTransitionEnter(
+        el,
+        transition,
+        () => hostInsert(el, container, anchor),
+        parentSuspense,
+      )
+    } else {
+      hostInsert(el, container, anchor)
     }
-    hostInsert(el, container, anchor)
-    if (
-      (vnodeHook = props && props.onVnodeMounted) ||
-      needCallTransitionHooks ||
-      dirs
-    ) {
+
+    if ((vnodeHook = props && props.onVnodeMounted) || dirs) {
       queuePostRenderEffect(() => {
         vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)
-        needCallTransitionHooks && transition!.enter(el)
         dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
       }, parentSuspense)
     }
@@ -2115,9 +2116,12 @@ function baseCreateRenderer(
       transition
     if (needTransition) {
       if (moveType === MoveType.ENTER) {
-        transition!.beforeEnter(el!)
-        hostInsert(el!, container, anchor)
-        queuePostRenderEffect(() => transition!.enter(el!), parentSuspense)
+        applyTransitionEnter(
+          el!,
+          transition,
+          () => hostInsert(el!, container, anchor),
+          parentSuspense,
+        )
       } else {
         const { leave, delayLeave, afterLeave } = transition!
         const remove = () => hostInsert(el!, container, anchor)
@@ -2292,27 +2296,10 @@ function baseCreateRenderer(
       return
     }
 
-    const performRemove = () => {
-      hostRemove(el!)
-      if (transition && !transition.persisted && transition.afterLeave) {
-        transition.afterLeave()
-      }
-    }
-
-    if (
-      vnode.shapeFlag & ShapeFlags.ELEMENT &&
-      transition &&
-      !transition.persisted
-    ) {
-      const { leave, delayLeave } = transition
-      const performLeave = () => leave(el!, performRemove)
-      if (delayLeave) {
-        delayLeave(vnode.el!, performRemove, performLeave)
-      } else {
-        performLeave()
-      }
+    if (vnode.shapeFlag & ShapeFlags.ELEMENT && transition) {
+      applyTransitionLeave(el!, transition, () => hostRemove(el!))
     } else {
-      performRemove()
+      hostRemove(el!)
     }
   }
 
@@ -2630,6 +2617,41 @@ export function invalidateMount(hooks: LifecycleHook | undefined): void {
   }
 }
 
+export function applyTransitionEnter(
+  el: RendererElement,
+  transition: TransitionHooks,
+  insert: () => void,
+  parentSuspense: SuspenseBoundary | null,
+): void {
+  if (needTransition(parentSuspense, transition)) {
+    transition.beforeEnter(el)
+    insert()
+    queuePostRenderEffect(() => transition.enter(el), parentSuspense)
+  } else {
+    insert()
+  }
+}
+
+export function applyTransitionLeave(
+  el: RendererElement,
+  transition: TransitionHooks,
+  remove: () => void,
+): void {
+  const performRemove = () => {
+    remove()
+    if (transition && !transition.persisted && transition.afterLeave) {
+      transition.afterLeave()
+    }
+  }
+  const { leave, delayLeave } = transition
+  const performLeave = () => leave(el, performRemove)
+  if (delayLeave) {
+    delayLeave(el, performRemove, performLeave)
+  } else {
+    performLeave()
+  }
+}
+
 function getVaporInterface(
   instance: ComponentInternalInstance | null,
   vnode: VNode,

packages/runtime-dom/src/components/Transition.ts

@@ -32,6 +32,20 @@ export interface TransitionProps extends BaseTransitionProps<Element> {
   leaveToClass?: string
 }
 
+export interface VaporTransitionInferface {
+  applyTransition: (
+    props: TransitionProps,
+    slots: { default: () => any },
+  ) => void
+}
+
+let vaporTransitionImpl: VaporTransitionInferface | null = null
+export const registerVaporTransition = (
+  impl: VaporTransitionInferface,
+): void => {
+  vaporTransitionImpl = impl
+}
+
 export const vtcKey: unique symbol = Symbol('_vtc')
 
 export interface ElementWithTransition extends HTMLElement {
@@ -85,9 +99,13 @@ const decorate = (t: typeof Transition) => {
  * base Transition component, with DOM-specific logic.
  */
 export const Transition: FunctionalComponent<TransitionProps> =
-  /*@__PURE__*/ decorate((props, { slots }) =>
-    h(BaseTransition, resolveTransitionProps(props), slots),
-  )
+  /*@__PURE__*/ decorate((props, { slots, vapor }: any) => {
+    const resolvedProps = resolveTransitionProps(props)
+    if (vapor) {
+      return vaporTransitionImpl!.applyTransition(resolvedProps, slots)
+    }
+    return h(BaseTransition, resolvedProps, slots)
+  })
 
 /**
  * #3227 Incoming hooks may be merged into arrays when wrapping Transition

packages/runtime-dom/src/index.ts

@@ -348,3 +348,15 @@ export {
   vModelSelectInit,
   vModelSetSelected,
 } from './directives/vModel'
+/**
+ * @internal
+ */
+export {
+  resolveTransitionProps,
+  TransitionPropsValidators,
+  registerVaporTransition,
+} from './components/Transition'
+/**
+ * @internal
+ */
+export type { VaporTransitionInferface } from './components/Transition'

packages/runtime-vapor/src/apiCreateApp.ts

@@ -20,11 +20,13 @@ import {
 import type { RawProps } from './componentProps'
 import { getGlobalThis } from '@vue/shared'
 import { optimizePropertyLookup } from './dom/prop'
+import { ensureVaporTransition } from './components/Transition'
 
 let _createApp: CreateAppFunction<ParentNode, VaporComponent>
 
 const mountApp: AppMountFn<ParentNode> = (app, container) => {
   optimizePropertyLookup()
+  ensureVaporTransition()
 
   // clear content before mounting
   if (container.nodeType === 1 /* Node.ELEMENT_NODE */) {

packages/runtime-vapor/src/block.ts

@@ -7,13 +7,19 @@ import {
 } from './component'
 import { createComment, createTextNode } from './dom/node'
 import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
+import {
+  type TransitionHooks,
+  applyTransitionEnter,
+  applyTransitionLeave,
+} from '@vue/runtime-dom'
 
-export type Block =
+export type Block = (
   | Node
   | VaporFragment
   | DynamicFragment
   | VaporComponentInstance
   | Block[]
+) & { transition?: TransitionHooks }
 
 export type BlockFn = (...args: any[]) => Block
 
@@ -22,6 +28,7 @@ export class VaporFragment {
   anchor?: Node
   insert?: (parent: ParentNode, anchor: Node | null) => void
   remove?: (parent?: ParentNode) => void
+  transition?: TransitionHooks
 
   constructor(nodes: Block) {
     this.nodes = nodes
@@ -52,13 +59,13 @@ export class DynamicFragment extends VaporFragment {
     // teardown previous branch
     if (this.scope) {
       this.scope.stop()
-      parent && remove(this.nodes, parent)
+      parent && remove(this.nodes, parent, this.transition)
     }
 
     if (render) {
       this.scope = new EffectScope()
       this.nodes = this.scope.run(render) || []
-      if (parent) insert(this.nodes, parent, this.anchor)
+      if (parent) insert(this.nodes, parent, this.anchor, this.transition)
     } else {
       this.scope = undefined
       this.nodes = []
@@ -69,7 +76,7 @@ export class DynamicFragment extends VaporFragment {
       this.nodes =
         (this.scope || (this.scope = new EffectScope())).run(this.fallback) ||
         []
-      parent && insert(this.nodes, parent, this.anchor)
+      parent && insert(this.nodes, parent, this.anchor, this.transition)
     }
 
     resetTracking()
@@ -106,12 +113,23 @@ export function insert(
   block: Block,
   parent: ParentNode,
   anchor: Node | null | 0 = null, // 0 means prepend
+  transition: TransitionHooks | undefined = block.transition,
+  parentSuspense?: any, // TODO Suspense
 ): void {
   anchor = anchor === 0 ? parent.firstChild : anchor
   if (block instanceof Node) {
-    parent.insertBefore(block, anchor)
+    if (transition) {
+      applyTransitionEnter(
+        block,
+        transition,
+        () => parent.insertBefore(block, anchor),
+        parentSuspense,
+      )
+    } else {
+      parent.insertBefore(block, anchor)
+    }
   } else if (isVaporComponent(block)) {
-    mountComponent(block, parent, anchor)
+    mountComponent(block, parent, anchor, transition)
   } else if (isArray(block)) {
     for (let i = 0; i < block.length; i++) {
       insert(block[i], parent, anchor)
@@ -121,7 +139,7 @@ export function insert(
     if (block.insert) {
       block.insert(parent, anchor)
     } else {
-      insert(block.nodes, parent, anchor)
+      insert(block.nodes, parent, anchor, block.transition)
     }
     if (block.anchor) insert(block.anchor, parent, anchor)
   }
@@ -132,11 +150,23 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void {
   while (i--) insert(blocks[i], parent, 0)
 }
 
-export function remove(block: Block, parent?: ParentNode): void {
+export function remove(
+  block: Block,
+  parent?: ParentNode,
+  transition: TransitionHooks | undefined = block.transition,
+): void {
   if (block instanceof Node) {
-    parent && parent.removeChild(block)
+    if (transition) {
+      applyTransitionLeave(
+        block,
+        transition,
+        () => parent && parent.removeChild(block),
+      )
+    } else {
+      parent && parent.removeChild(block)
+    }
   } else if (isVaporComponent(block)) {
-    unmountComponent(block, parent)
+    unmountComponent(block, parent, transition)
   } else if (isArray(block)) {
     for (let i = 0; i < block.length; i++) {
       remove(block[i], parent)
@@ -146,7 +176,7 @@ export function remove(block: Block, parent?: ParentNode): void {
     if (block.remove) {
       block.remove(parent)
     } else {
-      remove(block.nodes, parent)
+      remove(block.nodes, parent, block.transition)
     }
     if (block.anchor) remove(block.anchor, parent)
     if ((block as DynamicFragment).scope) {