diff --git a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts index 0ebefa5..b71bb02 100644 --- a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts +++ b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts @@ -405,7 +405,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) { @@ -431,7 +442,7 @@ const transformJSXElement = ( ? (slots! as t.ObjectExpression).properties : [t.spreadElement(slots!)] : []), - optimize && + optimizeSlots && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)), ].filter(Boolean as any) ) @@ -452,7 +463,7 @@ const transformJSXElement = ( t.arrayExpression(buildIIFE(path, [child])) ) ), - optimize && + optimizeSlots && (t.objectProperty( t.identifier('_'), t.numericLiteral(slotFlag) @@ -490,7 +501,7 @@ const transformJSXElement = ( t.arrayExpression(buildIIFE(path, [slotId])) ) ), - optimize && + optimizeSlots && (t.objectProperty( t.identifier('_'), t.numericLiteral(slotFlag) @@ -517,7 +528,7 @@ const transformJSXElement = ( VNodeChild = t.objectExpression( [ ...child.properties, - optimize && + optimizeSlots && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)), ].filter(Boolean as any) );