From 6365deb4b414494da0d08382c09e5f09a651bd03 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 30 Mar 2023 03:44:48 +1100
Subject: [PATCH] fix: deoptimize slots when a directive is used

---
 .../babel-plugin-jsx/src/transform-vue-jsx.ts | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts
index 6b02ac9..7e3555f 100644
--- a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts
+++ b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts
@@ -369,7 +369,18 @@ const transformJSXElement = (
 
   const { optimize = false } = state.opts;
 
-  const slotFlag = path.getData('slotFlag') || SlotFlags.STABLE;
+  // #541 - directives can't be resolved in optimized slots
+  // all parents should be deoptimized
+  if (directives.length) {
+    let currentPath = path;
+    while (currentPath.parentPath?.isJSXElement()) {
+      currentPath = currentPath.parentPath;
+      currentPath.setData('slotFlag', 0);
+    }
+  }
+
+  const slotFlag = path.getData('slotFlag') ?? SlotFlags.STABLE;
+  const optimizeSlots = optimize && slotFlag !== 0;
   let VNodeChild;
 
   if (children.length > 1 || slots) {
@@ -390,7 +401,7 @@ const transformJSXElement = (
               ? (slots! as t.ObjectExpression).properties
               : [t.spreadElement(slots!)]
           ) : []),
-          optimize && t.objectProperty(
+          optimizeSlots && t.objectProperty(
             t.identifier('_'),
             t.numericLiteral(slotFlag),
           ),
@@ -408,7 +419,7 @@ const transformJSXElement = (
         t.identifier('default'),
         t.arrowFunctionExpression([], t.arrayExpression(buildIIFE(path, [child]))),
       ),
-      optimize && t.objectProperty(
+      optimizeSlots && t.objectProperty(
         t.identifier('_'),
         t.numericLiteral(slotFlag),
       ) as any,
@@ -435,7 +446,7 @@ const transformJSXElement = (
           t.objectProperty(
             t.identifier('default'),
             t.arrowFunctionExpression([], t.arrayExpression(buildIIFE(path, [slotId]))),
-          ), optimize && t.objectProperty(
+          ), optimizeSlots && t.objectProperty(
             t.identifier('_'),
             t.numericLiteral(slotFlag),
           ) as any,
@@ -463,7 +474,7 @@ const transformJSXElement = (
     } else if (t.isObjectExpression(child)) {
       VNodeChild = t.objectExpression([
         ...child.properties,
-        optimize && t.objectProperty(
+        optimizeSlots && t.objectProperty(
           t.identifier('_'),
           t.numericLiteral(slotFlag),
         ),