wip: save

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

@@ -124,7 +124,7 @@ export function createIfBranch(
   const exitBlock = context.enterBlock(branch)
   context.reference()
   // generate key for branch result when it's in transition
-  // the key will be used to cache node at runtime
+  // the key will be used to track node leaving at runtime
   branch.dynamic.needsKey = isInTransition(context)
   return [branch, exitBlock]
 }

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

@@ -253,8 +253,10 @@ function createSlotBlock(
 ): [SlotBlockIRNode, () => void] {
   const block: SlotBlockIRNode = newBlock(slotNode)
   block.props = dir && dir.exp
-  block.key = key
-  if (key) block.dynamic.needsKey = true
+  if (key) {
+    block.key = key
+    block.dynamic.needsKey = true
+  }
   const exitBlock = context.enterBlock(block)
   return [block, exitBlock]
 }

packages/compiler-vapor/src/utils.ts

@@ -94,11 +94,7 @@ export function isInTransition(
   context: TransformContext<ElementNode>,
 ): boolean {
   const parentNode = context.parent && context.parent.node
-  return !!(
-    parentNode &&
-    (isTransitionNode(parentNode as ElementNode) ||
-      isTransitionGroupNode(parentNode as ElementNode))
-  )
+  return !!(parentNode && isTransitionNode(parentNode as ElementNode))
 }
 
 export function isTransitionNode(node: ElementNode): boolean {

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

@@ -376,6 +376,7 @@ export function resolveTransitionHooks(
   return baseResolveTransitionHooks(context, props, state, instance)
 }
 
+// shared between vdom and vapor
 export function baseResolveTransitionHooks(
   context: TransitionHooksContext,
   props: BaseTransitionProps<any>,

packages/runtime-core/src/renderer.ts

@@ -2625,6 +2625,7 @@ export function invalidateMount(hooks: LifecycleHook | undefined): void {
   }
 }
 
+// shared between vdom and vapor
 export function performTransitionEnter(
   el: RendererElement,
   transition: TransitionHooks,
@@ -2640,6 +2641,7 @@ export function performTransitionEnter(
   }
 }
 
+// shared between vdom and vapor
 export function performTransitionLeave(
   el: RendererElement,
   transition: TransitionHooks,

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

@@ -189,6 +189,7 @@ function applyTranslation(c: VNode): VNode | undefined {
   }
 }
 
+// shared between vdom and vapor
 export function baseApplyTranslation(
   oldPos: DOMRect,
   newPos: DOMRect,
@@ -205,6 +206,7 @@ export function baseApplyTranslation(
   return false
 }
 
+// shared between vdom and vapor
 export function hasCSSTransform(
   el: ElementWithTransition,
   root: Node,
@@ -233,6 +235,7 @@ export function hasCSSTransform(
   return hasTransform
 }
 
+// shared between vdom and vapor
 export const handleMovedChildren = (
   el: ElementWithTransition,
   moveClass: string,

packages/runtime-vapor/src/apiCreateFor.ts

@@ -316,6 +316,7 @@ export const createFor = (
       getKey && getKey(item, key, index),
     ))
 
+    // apply transition for new nodes
     if (frag.$transition) {
       applyTransitionEnterHooks(block.nodes, frag.$transition)
     }

packages/runtime-vapor/src/block.ts

@@ -157,7 +157,7 @@ export function insert(
   anchor = anchor === 0 ? parent.firstChild : anchor
   if (block instanceof Node) {
     if (!isHydrating) {
-      // don't apply transition on text or comment nodes
+      // only apply transition on Element nodes
       if (
         block instanceof Element &&
         (block as TransitionBlock).$transition &&

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

@@ -71,7 +71,10 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
             // inserted into the correct position immediately. this prevents
             // `recordPosition` from getting incorrect positions in `onUpdated`
             hook.disabledOnMoving = true
-            positionMap.set(child, getEl(child).getBoundingClientRect())
+            positionMap.set(
+              child,
+              getTransitionElement(child).getBoundingClientRect(),
+            )
           }
         }
       }
@@ -84,7 +87,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
 
       const moveClass = props.moveClass || `${props.name || 'v'}-move`
 
-      const firstChild = findFirstChild(prevChildren)
+      const firstChild = getFirstConnectedChild(prevChildren)
       if (
         !firstChild ||
         !hasCSSTransform(
@@ -107,7 +110,10 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
       forceReflow()
 
       movedChildren.forEach(c =>
-        handleMovedChildren(getEl(c) as ElementWithTransition, moveClass),
+        handleMovedChildren(
+          getTransitionElement(c) as ElementWithTransition,
+          moveClass,
+        ),
       )
     })
 
@@ -180,12 +186,12 @@ function isValidTransitionBlock(block: Block): boolean {
   return !!(block instanceof Element || (isFragment(block) && block.insert))
 }
 
-function getEl(c: TransitionBlock): Element {
-  return (isFragment(c) ? c.nodes : c) as Element
+function getTransitionElement(c: TransitionBlock): Element {
+  return (isFragment(c) ? (c.nodes as Element[])[0] : c) as Element
 }
 
 function recordPosition(c: TransitionBlock) {
-  newPositionMap.set(c, getEl(c).getBoundingClientRect())
+  newPositionMap.set(c, getTransitionElement(c).getBoundingClientRect())
 }
 
 function applyTranslation(c: TransitionBlock): TransitionBlock | undefined {
@@ -193,17 +199,19 @@ function applyTranslation(c: TransitionBlock): TransitionBlock | undefined {
     baseApplyTranslation(
       positionMap.get(c)!,
       newPositionMap.get(c)!,
-      getEl(c) as ElementWithTransition,
+      getTransitionElement(c) as ElementWithTransition,
     )
   ) {
     return c
   }
 }
 
-function findFirstChild(children: TransitionBlock[]): Element | undefined {
+function getFirstConnectedChild(
+  children: TransitionBlock[],
+): Element | undefined {
   for (let i = 0; i < children.length; i++) {
     const child = children[i]
-    const el = getEl(child)
+    const el = getTransitionElement(child)
     if (el.isConnected) return el
   }
 }

packages/runtime-vapor/src/vdomInterop.ts

@@ -229,7 +229,8 @@ function createVDOMComponent(
         parentInstance as any,
       )
     }
-    frag.nodes = vnode.el as Node
+
+    frag.nodes = [vnode.el as Node]
     simpleSetCurrentInstance(prev)
   }