diff --git a/packages/babel-plugin-jsx/src/parseDirectives.ts b/packages/babel-plugin-jsx/src/parseDirectives.ts
index 90ca140..ba23fb0 100644
--- a/packages/babel-plugin-jsx/src/parseDirectives.ts
+++ b/packages/babel-plugin-jsx/src/parseDirectives.ts
@@ -184,6 +184,11 @@ const resolveDirective = (
}
return modelToUse;
}
+ const referenceName =
+ 'v' + directiveName[0].toUpperCase() + directiveName.slice(1);
+ if (path.scope.references[referenceName]) {
+ return t.identifier(referenceName);
+ }
return t.callExpression(createIdentifier(state, 'resolveDirective'), [
t.stringLiteral(directiveName),
]);
diff --git a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts
index b71bb02..8b32e44 100644
--- a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts
+++ b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts
@@ -407,7 +407,15 @@ const transformJSXElement = (
// #541 - directives can't be resolved in optimized slots
// all parents should be deoptimized
- if (directives.length) {
+ if (
+ directives.length &&
+ directives.some(
+ (d) =>
+ d.elements?.[0]?.type === 'CallExpression' &&
+ d.elements[0].callee.type === 'Identifier' &&
+ d.elements[0].callee.name === '_resolveDirective'
+ )
+ ) {
let currentPath = path;
while (currentPath.parentPath?.isJSXElement()) {
currentPath = currentPath.parentPath;
diff --git a/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap b/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap
index 982aed0..c4c2f98 100644
--- a/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap
+++ b/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap
@@ -63,6 +63,12 @@ _createVNode(_Fragment, null, [_withDirectives(_createVNode(_resolveComponent("A
}]])]);"
`;
+exports[`directive in scope > directive in scope 1`] = `
+"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withDirectives as _withDirectives } from "vue";
+const vXxx = {};
+_withDirectives(_createVNode(_resolveComponent("A"), null, null, 512), [[vXxx]]);"
+`;
+
exports[`disable object slot syntax with defaultSlot > defaultSlot 1`] = `
"import { resolveComponent as _resolveComponent, createVNode as _createVNode } from "vue";
_createVNode(_resolveComponent("Badge"), null, {
@@ -164,6 +170,20 @@ _createVNode(_Fragment, null, [_createVNode(_resolveComponent("A"), null, {
})]);"
`;
+exports[`passing object slots via JSX children directive in slot, in scope > directive in slot, in scope 1`] = `
+"import { Fragment as _Fragment, createVNode as _createVNode, withDirectives as _withDirectives, resolveComponent as _resolveComponent } from "vue";
+const vXxx = {};
+_createVNode(_Fragment, null, [_createVNode(_resolveComponent("A"), null, {
+ default: () => [_withDirectives(_createVNode("div", null, null, 512), [[vXxx]]), foo],
+ _: 1
+}), _createVNode(_resolveComponent("A"), null, {
+ default: () => [_createVNode(_resolveComponent("B"), null, {
+ default: () => [_withDirectives(_createVNode("div", null, null, 512), [[vXxx]]), foo],
+ _: 1
+ })]
+})]);"
+`;
+
exports[`passing object slots via JSX children multiple expressions > multiple expressions 1`] = `
"import { resolveComponent as _resolveComponent, createVNode as _createVNode } from "vue";
_createVNode(_resolveComponent("A"), null, {
diff --git a/packages/babel-plugin-jsx/test/snapshot.test.ts b/packages/babel-plugin-jsx/test/snapshot.test.ts
index e1a2cff..00e92c9 100644
--- a/packages/babel-plugin-jsx/test/snapshot.test.ts
+++ b/packages/babel-plugin-jsx/test/snapshot.test.ts
@@ -155,6 +155,13 @@ const transpile = (source: string, options: VueJSXPluginOptions = {}) =>
>
`,
},
+ {
+ name: 'directive in scope',
+ from: `
+ const vXxx = {};
+
+ `,
+ },
{
name: 'vModels',
from: '',
@@ -277,6 +284,18 @@ const slotsTests: Test[] = [
>
`,
},
+ {
+ name: 'directive in slot, in scope',
+ from: `
+ const vXxx = {};
+ <>
+ {foo}
+
+ {foo}
+
+ >
+ `,
+ },
];
slotsTests.forEach(({ name, from }) => {