fix: resolve directives in nested scopes

packages/babel-plugin-jsx/README.md

@@ -243,24 +243,29 @@ h(A, {
 
 #### custom directive
 
-Recommended when using string arguments
-
 ```jsx
 const App = {
-  directives: { custom: customDirective },
+  directives: { custom: vCustom },
   setup() {
-    return () => <a v-custom:arg={val} />;
+    return () => <a v-custom={val} />;
   },
 };
 ```
 
+Directive names will resolve a variable matching `/v[A-Z]/` first, `options.directives` is only needed to prevent the import from being reported as unused.
+
+Arguments and modifiers can be added as an array:
+
 ```jsx
-const App = {
-  directives: { custom: customDirective },
-  setup() {
-    return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
-  },
-};
+// same as v-custom:arg.a.b="val" in a .vue file
+<a v-custom={[val, 'arg', ['a', 'b']]} />
+```
+
+Or arguments as part of the attribute name:
+
+```jsx
+<a v-custom:arg={val} />
+<b v-custom:arg={[val, ['a', 'b']]} />
 ```
 
 ### Slot

packages/babel-plugin-jsx/src/parseDirectives.ts

@@ -1,6 +1,6 @@
 import * as t from '@babel/types';
 import { type NodePath } from '@babel/traverse';
-import { createIdentifier } from './utils';
+import { camelize, capitalize, createIdentifier } from './utils';
 import type { State } from './interface';
 
 export type Tag =
@@ -184,11 +184,14 @@ const resolveDirective = (
     }
     return modelToUse;
   }
-  const referenceName =
-    'v' + directiveName[0].toUpperCase() + directiveName.slice(1);
-  if (path.scope.references[referenceName]) {
-    return t.identifier(referenceName);
-  }
+  const referenceName = 'v' + capitalize(camelize(directiveName));
+  let scope = path.scope;
+  do {
+    if (scope.references[referenceName]) {
+      return t.identifier(referenceName);
+    }
+    scope = scope.parent;
+  } while (scope);
   return t.callExpression(createIdentifier(state, 'resolveDirective'), [
     t.stringLiteral(directiveName),
   ]);

packages/babel-plugin-jsx/src/utils.ts

@@ -254,6 +254,14 @@ const onRE = /^on[^a-z]/;
 
 export const isOn = (key: string) => onRE.test(key);
 
+const camelizeRE = /-(\w)/g;
+export const camelize = (str: string): string => {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
+};
+export const capitalize = <T extends string>(str: T): Capitalize<T> => {
+  return (str.charAt(0).toUpperCase() + str.slice(1)) as Capitalize<T>;
+};
+
 const mergeAsArray = (
   existing: t.ObjectProperty,
   incoming: t.ObjectProperty

packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap

@@ -63,6 +63,12 @@ _createVNode(_Fragment, null, [_withDirectives(_createVNode(_resolveComponent("A
 }]])]);"
 `;
 
+exports[`directive in outer scope > directive in outer 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[`directive in scope > directive in scope 1`] = `
 "import { resolveComponent as _resolveComponent, createVNode as _createVNode, withDirectives as _withDirectives } from "vue";
 const vXxx = {};

packages/babel-plugin-jsx/test/snapshot.test.ts

@@ -162,6 +162,15 @@ const transpile = (source: string, options: VueJSXPluginOptions = {}) =>
       <A v-xxx />
     `,
   },
+  {
+    name: 'directive in outer scope',
+    from: `
+      const vXxx = {};
+      () => (
+        <A v-xxx />
+      );
+    `,
+  },
   {
     name: 'vModels',
     from: '<C v-models={[[foo, ["modifier"]], [bar, "bar", ["modifier1", "modifier2"]]]} />',