wip: handle keyed element transition

Author: edison1105

packages/compiler-vapor/src/generators/block.ts

@@ -13,6 +13,7 @@ import type { CodegenContext } from '../generate'
 import { genEffects, genOperations } from './operation'
 import { genChildren } from './template'
 import { toValidAssetId } from '@vue/compiler-dom'
+import { genExpression } from './expression'
 
 export function genBlock(
   oper: BlockIRNode,
@@ -40,7 +41,7 @@ export function genBlockContent(
   customReturns?: (returns: CodeFragment[]) => CodeFragment[],
 ): CodeFragment[] {
   const [frag, push] = buildCodeFragment()
-  const { dynamic, effect, operation, returns } = block
+  const { dynamic, effect, operation, returns, key } = block
   const resetBlock = context.enterBlock(block)
 
   if (root) {
@@ -57,7 +58,10 @@ export function genBlockContent(
 
   if (dynamic.needsKey) {
     for (const child of dynamic.children) {
-      push(NEWLINE, `n${child.id}.key = ${JSON.stringify(child.id)}`)
+      const keyValue = key
+        ? genExpression(key, context)
+        : JSON.stringify(child.id)
+      push(NEWLINE, `n${child.id}.key = `, ...keyValue)
     }
   }
 

packages/compiler-vapor/src/generators/component.ts

@@ -99,7 +99,7 @@ export function genCreateComponent(
         return `_${builtInTag}`
       }
       return genExpression(
-        extend(createSimpleExpression(operation.tag, false), { ast: null }),
+        extend(createSimpleExpression(tag, false), { ast: null }),
         context,
       )
     }
@@ -402,7 +402,7 @@ function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
   let propsName: string | undefined
   let exitScope: (() => void) | undefined
   let depth: number | undefined
-  const { props } = oper
+  const { props, key } = oper
   const idsOfProps = new Set<string>()
 
   if (props) {
@@ -430,11 +430,33 @@ function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
         ? `${propsName}[${JSON.stringify(id)}]`
         : null),
   )
-  const blockFn = context.withId(
+  let blockFn = context.withId(
     () => genBlock(oper, context, [propsName]),
     idMap,
   )
   exitScope && exitScope()
 
+  if (key) {
+    blockFn = [
+      INDENT_START,
+      `() => {`,
+      NEWLINE,
+      INDENT_START,
+      `return ${context.helper('createKeyedFragment')}(`,
+      NEWLINE,
+      `() => `,
+      ...genExpression(key, context),
+      `,`,
+      NEWLINE,
+      ...blockFn,
+      INDENT_END,
+      NEWLINE,
+      `)`,
+      INDENT_END,
+      NEWLINE,
+      `}`,
+    ]
+  }
+
   return blockFn
 }

packages/compiler-vapor/src/ir/index.ts

@@ -40,6 +40,7 @@ export enum IRNodeTypes {
 
 export interface BaseIRNode {
   type: IRNodeTypes
+  key?: SimpleExpressionNode | undefined
 }
 
 export type CoreHelper = keyof typeof import('packages/runtime-dom/src')

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

@@ -130,11 +130,16 @@ export function createIfBranch(
   return [branch, exitBlock]
 }
 
-function isInTransition(context: TransformContext<ElementNode>): boolean {
+export 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')
+  return !!(parentNode && isTransitionNode(parentNode as ElementNode))
+}
+
+export function isTransitionNode(node: ElementNode): boolean {
+  return (
+    node.type === NodeTypes.ELEMENT &&
+    (node.tag === 'transition' || node.tag === 'Transition')
   )
 }

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

@@ -23,7 +23,8 @@ import {
   type SlotBlockIRNode,
   type VaporDirectiveNode,
 } from '../ir'
-import { findDir, resolveExpression } from '../utils'
+import { findDir, findProp, resolveExpression } from '../utils'
+import { isTransitionNode } from './vIf'
 
 export const transformVSlot: NodeTransform = (node, context) => {
   if (node.type !== NodeTypes.ELEMENT) return
@@ -72,7 +73,18 @@ function transformComponentSlot(
       !(n.type === NodeTypes.ELEMENT && n.props.some(isVSlot)),
   )
 
-  const [block, onExit] = createSlotBlock(node, dir, context)
+  let slotKey
+  if (isTransitionNode(node)) {
+    const keyProp = findProp(
+      nonSlotTemplateChildren[0] as ElementNode,
+      'key',
+    ) as VaporDirectiveNode
+    if (keyProp) {
+      slotKey = keyProp.exp
+    }
+  }
+
+  const [block, onExit] = createSlotBlock(node, dir, context, slotKey)
 
   const { slots } = context
 
@@ -233,9 +245,12 @@ function createSlotBlock(
   slotNode: ElementNode,
   dir: VaporDirectiveNode | undefined,
   context: TransformContext<ElementNode>,
+  key: SimpleExpressionNode | undefined = undefined,
 ): [SlotBlockIRNode, () => void] {
   const block: SlotBlockIRNode = newBlock(slotNode)
   block.props = dir && dir.exp
+  block.key = key
+  if (key) block.dynamic.needsKey = true
   const exitBlock = context.enterBlock(block)
   return [block, exitBlock]
 }

packages/runtime-vapor/src/apiCreateFragment.ts

@@ -0,0 +1,10 @@
+import { type Block, type BlockFn, DynamicFragment } from './block'
+import { renderEffect } from './renderEffect'
+
+export function createKeyedFragment(key: () => any, render: BlockFn): Block {
+  const frag = __DEV__ ? new DynamicFragment('keyed') : new DynamicFragment()
+  renderEffect(() => {
+    frag.update(render, key())
+  })
+  return frag
+}

packages/runtime-vapor/src/index.ts

@@ -24,6 +24,7 @@ export {
 } from './dom/prop'
 export { on, delegate, delegateEvents, setDynamicEvents } from './dom/event'
 export { createIf } from './apiCreateIf'
+export { createKeyedFragment } from './apiCreateFragment'
 export {
   createFor,
   createForSlots,