fix: resolve kebab-case directive names

Author: KaelWD

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,8 +184,7 @@ const resolveDirective = (
     }
     return modelToUse;
   }
-  const referenceName =
-    'v' + directiveName[0].toUpperCase() + directiveName.slice(1);
+  const referenceName = 'v' + capitalize(camelize(directiveName));
   let scope = path.scope;
   do {
     if (scope.references[referenceName]) {

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