chore: cache buildSlots result

packages/compiler-core/src/ast.ts

@@ -153,6 +153,8 @@ export interface PlainElementNode extends BaseElementNode {
 
 export interface ComponentNode extends BaseElementNode {
   tagType: ElementTypes.COMPONENT
+  slots: SlotsExpression
+  hasDynamicSlots: boolean
   codegenNode:
     | VNodeCall
     | CacheExpression // when cached by v-once

packages/compiler-core/src/transforms/transformElement.ts

@@ -173,7 +173,10 @@ export const transformElement: NodeTransform = (node, context) => {
         vnodeTag !== KEEP_ALIVE
 
       if (shouldBuildAsSlots) {
-        const { slots, hasDynamicSlots } = buildSlots(node, context)
+        const { slots, hasDynamicSlots } = buildSlots(
+          node as ComponentNode,
+          context,
+        )
         vnodeChildren = slots
         if (hasDynamicSlots) {
           patchFlag |= PatchFlags.DYNAMIC_SLOTS

packages/compiler-core/src/transforms/vSkip.ts

@@ -6,7 +6,6 @@ import {
   NodeTypes,
   type SimpleExpressionNode,
   type SkipNode,
-  type SlotsExpression,
   type TemplateChildNode,
   createConditionalExpression,
   createSimpleExpression,
@@ -79,9 +78,8 @@ export function processSkip(
   // if not found, throw an error
   if (node.tagType === ElementTypes.COMPONENT) {
     const { slots } = buildSlots(node, context)
-    const genChildren = slots as SlotsExpression
-    if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-      const prop = genChildren.properties.find(
+    if (slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+      const prop = slots.properties.find(
         p =>
           p.type === NodeTypes.JS_PROPERTY &&
           p.key.type === NodeTypes.SIMPLE_EXPRESSION &&

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

@@ -1,8 +1,8 @@
 import {
   type CallExpression,
+  type ComponentNode,
   type ConditionalExpression,
   type DirectiveNode,
-  type ElementNode,
   ElementTypes,
   type ExpressionNode,
   type FunctionExpression,
@@ -114,13 +114,20 @@ const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
 // Instead of being a DirectiveTransform, v-slot processing is called during
 // transformElement to build the slots object for a component.
 export function buildSlots(
-  node: ElementNode,
+  node: ComponentNode,
   context: TransformContext,
   buildSlotFn: SlotFnBuilder = buildClientSlotFn,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
 } {
+  // return early if slots are already built to avoid duplication
+  if (node.slots) {
+    return {
+      slots: node.slots,
+      hasDynamicSlots: node.hasDynamicSlots,
+    }
+  }
   context.helper(WITH_CTX)
 
   const { children, loc } = node
@@ -364,6 +371,8 @@ export function buildSlots(
     ]) as SlotsExpression
   }
 
+  node.slots = slots
+  node.hasDynamicSlots = hasDynamicSlots
   return {
     slots,
     hasDynamicSlots,