wip: refactor

Author: edison1105

packages/runtime-vapor/src/block.ts

@@ -35,7 +35,7 @@ export interface VaporTransitionHooks extends TransitionHooks {
 
 export type TransitionBlock = {
   key?: any
-  transition?: VaporTransitionHooks
+  $transition?: VaporTransitionHooks
 }
 
 export type BlockFn = (...args: any[]) => Block
@@ -45,7 +45,7 @@ export class VaporFragment {
   anchor?: Node
   insert?: (parent: ParentNode, anchor: Node | null) => void
   remove?: (parent?: ParentNode) => void
-  transitionChild?: TransitionBlock | undefined
+  $transition?: VaporTransitionHooks | undefined
 
   constructor(nodes: Block) {
     this.nodes = nodes
@@ -57,7 +57,6 @@ export class DynamicFragment extends VaporFragment {
   scope: EffectScope | undefined
   current?: BlockFn
   fallback?: BlockFn
-  transitionChild?: Block
 
   constructor(anchorLabel?: string) {
     super([])
@@ -74,16 +73,13 @@ export class DynamicFragment extends VaporFragment {
     pauseTracking()
     const parent = this.anchor.parentNode
 
-    const transition = this.transition
+    const transition = this.$transition
     const renderBranch = () => {
       if (render) {
         this.scope = new EffectScope()
         this.nodes = this.scope.run(render) || []
         if (transition) {
-          this.transitionChild = applyTransitionEnterHooks(
-            this.nodes,
-            transition,
-          )
+          this.$transition = applyTransitionEnterHooks(this.nodes, transition)
         }
         if (parent) insert(this.nodes, parent, this.anchor)
       } else {
@@ -120,10 +116,6 @@ export class DynamicFragment extends VaporFragment {
 
     resetTracking()
   }
-
-  get transition(): VaporTransitionHooks | undefined {
-    return this.transitionChild && this.transitionChild.transition
-  }
 }
 
 export function isFragment(val: NonNullable<unknown>): val is VaporFragment {
@@ -161,11 +153,11 @@ export function insert(
   anchor = anchor === 0 ? parent.firstChild : anchor
   if (block instanceof Node) {
     // don't apply transition on text or comment nodes
-    if (block.transition && block instanceof Element) {
+    if (block.$transition && block instanceof Element) {
       performTransitionEnter(
         block,
         // @ts-expect-error
-        block.transition,
+        block.$transition,
         () => parent.insertBefore(block, anchor),
         parentSuspense,
       )
@@ -196,11 +188,11 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void {
 
 export function remove(block: Block, parent?: ParentNode): void {
   if (block instanceof Node) {
-    if (block.transition && block instanceof Element) {
+    if (block.$transition && block instanceof Element) {
       performTransitionLeave(
         block,
         // @ts-expect-error
-        block.transition,
+        block.$transition,
         () => parent && parent.removeChild(block),
       )
     } else {

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

@@ -111,18 +111,19 @@ function resolveTransitionHooks(
 
 function setTransitionHooks(block: Block, hooks: VaporTransitionHooks) {
   if (!isFragment(block)) {
-    block.transition = hooks
+    block.$transition = hooks
   }
 }
 
 export function applyTransitionEnterHooks(
   block: Block,
   hooks: VaporTransitionHooks,
-): Block | undefined {
+): VaporTransitionHooks | undefined {
   const child = findElementChild(block)
+  let enterHooks
   if (child) {
     const { props, state, delayedLeave } = hooks
-    let enterHooks = resolveTransitionHooks(
+    enterHooks = resolveTransitionHooks(
       child,
       props,
       state,
@@ -132,10 +133,10 @@ export function applyTransitionEnterHooks(
     enterHooks.delayedLeave = delayedLeave
     setTransitionHooks(child, enterHooks)
     if (isFragment(block)) {
-      block.transitionChild = child
+      block.$transition = enterHooks
     }
   }
-  return child
+  return enterHooks
 }
 
 export function applyTransitionLeaveHooks(
@@ -161,6 +162,7 @@ export function applyTransitionLeaveHooks(
     leavingHooks.afterLeave = () => {
       state.isLeaving = false
       afterLeaveCb()
+      leavingBlock.$transition = undefined
       delete leavingHooks.afterLeave
     }
   } else if (mode === 'in-out') {
@@ -174,17 +176,24 @@ export function applyTransitionLeaveHooks(
       block[leaveCbKey] = () => {
         earlyRemove()
         block[leaveCbKey] = undefined
+        leavingBlock.$transition = undefined
         delete enterHooks.delayedLeave
       }
       enterHooks.delayedLeave = () => {
         delayedLeave()
+        leavingBlock.$transition = undefined
         delete enterHooks.delayedLeave
       }
     }
   }
 }
 
+const transitionChildCache = new WeakMap<Block, Block>()
 export function findElementChild(block: Block): Block | undefined {
+  if (transitionChildCache.has(block)) {
+    return transitionChildCache.get(block)
+  }
+
   let child: Block | undefined
   if (block instanceof Node) {
     // transition can only be applied on Element child

packages/runtime-vapor/src/directives/vShow.ts

@@ -39,20 +39,20 @@ function setDisplay(target: Block, value: unknown): void {
   if (target instanceof DynamicFragment) {
     return setDisplay(target.nodes, value)
   }
-  const { transition } = target
+  const { $transition } = target
   if (target instanceof Element) {
     const el = target as VShowElement
     if (!(vShowOriginalDisplay in el)) {
       el[vShowOriginalDisplay] =
         el.style.display === 'none' ? '' : el.style.display
     }
-    if (transition) {
+    if ($transition) {
       if (value) {
-        transition.beforeEnter(target)
+        $transition.beforeEnter(target)
         el.style.display = el[vShowOriginalDisplay]!
-        transition.enter(target)
+        $transition.enter(target)
       } else {
-        transition.leave(target, () => {
+        $transition.leave(target, () => {
           el.style.display = 'none'
         })
       }

packages/runtime-vapor/src/dom/prop.ts

@@ -267,6 +267,7 @@ export function optimizePropertyLookup(): void {
   if (isOptimized) return
   isOptimized = true
   const proto = Element.prototype as any
+  proto.$transition = undefined
   proto.$evtclick = undefined
   proto.$root = false
   proto.$html =