wip: auto generate key for vif branch if it wraps in transition

diff --git a/packages/compiler-vapor/src/generators/block.ts b/packages/compiler-vapor/src/generators/block.ts
index 77ba4bee8a7c087b22760989e2745771ab051831..4e568a91e7f49dda7bf6efe9c00ceef87b961e9b 100644 (file)
--- a/packages/compiler-vapor/src/generators/block.ts
+++ b/packages/compiler-vapor/src/generators/block.ts
@@ -55,6 +55,12 @@ export function genBlockContent(
   push(...genOperations(operation, context))
   push(...genEffects(effect, context))
 
+  if (dynamic.needsKey) {
+    for (const child of dynamic.children) {
+      push(NEWLINE, `n${child.id}.key = ${JSON.stringify(child.id)}`)
+    }
+  }
+
   push(NEWLINE, `return `)
 
   const returnNodes = returns.map(n => `n${n}`)

diff --git a/packages/compiler-vapor/src/ir/index.ts b/packages/compiler-vapor/src/ir/index.ts
index 1509d37424cd12afd35e06dc222214d25b497441..b048e40d79b47a457a8a7793ac7c3069928ec343 100644 (file)
--- a/packages/compiler-vapor/src/ir/index.ts
+++ b/packages/compiler-vapor/src/ir/index.ts
@@ -259,6 +259,7 @@ export interface IRDynamicInfo {
   children: IRDynamicInfo[]
   template?: number
   hasDynamicChild?: boolean
+  needsKey?: boolean
 }
 
 export interface IREffect {

diff --git a/packages/compiler-vapor/src/transforms/vIf.ts b/packages/compiler-vapor/src/transforms/vIf.ts
index 8fad9c3146ec1df75bffd7ea404f454a9078be5a..bf9b178fd34e5008853a1d9175db194d1a6b7d0c 100644 (file)
--- a/packages/compiler-vapor/src/transforms/vIf.ts
+++ b/packages/compiler-vapor/src/transforms/vIf.ts
@@ -1,6 +1,7 @@
 import {
   type ElementNode,
   ErrorCodes,
+  NodeTypes,
   createCompilerError,
   createSimpleExpression,
 } from '@vue/compiler-dom'
@@ -123,5 +124,17 @@ export function createIfBranch(
   const branch: BlockIRNode = newBlock(node)
   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
+  branch.dynamic.needsKey = isInTransition(context)
   return [branch, exitBlock]
 }
+
+function isInTransition(context: TransformContext<ElementNode>): boolean {
+  const parentNode = context.parent && context.parent.node
+  return !!(
+    parentNode &&
+    parentNode.type === NodeTypes.ELEMENT &&
+    (parentNode.tag === 'transition' || parentNode.tag === 'Transition')
+  )
+}