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

Author: edison1105

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}`)

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 {

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')
+  )
+}