wip: save

diff --git a/packages/compiler-vapor/src/transforms/vIf.ts b/packages/compiler-vapor/src/transforms/vIf.ts
index ad527a899a2ecb0d44cdb69405d07308f82415d7..8454099ee90824ebf4d65dc9b1f0494a2ddf7cbe 100644 (file)
--- a/packages/compiler-vapor/src/transforms/vIf.ts
+++ b/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]
 }

diff --git a/packages/compiler-vapor/src/transforms/vSlot.ts b/packages/compiler-vapor/src/transforms/vSlot.ts
index 66b24b0a9f039f4f33cbd948bc4c8111e2d2fe55..9a65e6f1bb4730d7402c5a30f3038940d55bdf3d 100644 (file)
--- a/packages/compiler-vapor/src/transforms/vSlot.ts
+++ b/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]
 }

diff --git a/packages/compiler-vapor/src/utils.ts b/packages/compiler-vapor/src/utils.ts
index 2d5ba72b39edeecc356cbcd38e91773742d4f1d9..d2c7eca3bb1501bd2a1048fccd5e54655de18251 100644 (file)
--- a/packages/compiler-vapor/src/utils.ts
+++ b/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 {

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 477c545ad6501c46fcf05892be9efabb23edb783..fde42148304c160508c731d5b1ab917868baa567 100644 (file)
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/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>,

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 5b1a50846926ee5e4b990323714f3b7836f8359c..744338b3f45a23e630bae94dc94c03726c02b924 100644 (file)
--- a/packages/runtime-core/src/renderer.ts
+++ b/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,

diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
index 4f4993b5ce1850e05c7e657c7f82306b4ec60c86..8e38dbf0f232b867303e3f8559ec9fdf4d673c30 100644 (file)
--- a/packages/runtime-dom/src/components/TransitionGroup.ts
+++ b/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,

diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts
index 1e4be0b5163083aa24bb24c884fa61cd177df23a..f6b5d2bf8026ddbea5e18ec93e141496d6846916 100644 (file)
--- a/packages/runtime-vapor/src/apiCreateFor.ts
+++ b/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)
     }

diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
index 26c0d8ca379fa8d91cacda490f8b185966eff1df..65f7c4f35d56b5cb4a45157f5b7c92c8dcbd862d 100644 (file)
--- a/packages/runtime-vapor/src/block.ts
+++ b/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 &&

diff --git a/packages/runtime-vapor/src/components/TransitionGroup.ts b/packages/runtime-vapor/src/components/TransitionGroup.ts
index 35d39c6640435d354de0f6dfc31541013f70e9da..93bd202ce2c580eed3bb15d60ebd7e22f239c647 100644 (file)
--- a/packages/runtime-vapor/src/components/TransitionGroup.ts
+++ b/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
   }
 }

diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index b9bce9d6f8a378bbef14c93467414db07ee16bbd..78d92affc58aa36167dc0acace0f1b27b761b62c 100644 (file)
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/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)
   }