fix(compiler): support components with dot in name (#972)

This pattern is often used in design systems, eg. `<Card.Title>`.

Author: mathio

.changeset/three-monkeys-smile.md

@@ -0,0 +1,6 @@
+---
+"@lingo.dev/_compiler": patch
+"lingo.dev": patch
+---
+
+support components with dot in name

packages/compiler/src/utils/jsx-element.spec.ts

@@ -41,6 +41,18 @@ describe("JSX Element Utils", () => {
       const path = getJSXElementPath("<MyComponent>Hello</MyComponent>");
       expect(getJsxElementName(path)).toBe("MyComponent");
     });
+
+    it("should return element name for elements with dots", () => {
+      const path = getJSXElementPath("<My.Component>Hello</My.Component>");
+      expect(getJsxElementName(path)).toBe("My.Component");
+    });
+
+    it("should return element name for elements with multiple dot", () => {
+      const path = getJSXElementPath(
+        "<My.Very.Custom.React.Component>Hello</My.Very.Custom.React.Component>",
+      );
+      expect(getJsxElementName(path)).toBe("My.Very.Custom.React.Component");
+    });
   });
 
   describe("getNestedJsxElements", () => {

packages/compiler/src/utils/jsx-element.ts

@@ -3,9 +3,31 @@ import { NodePath } from "@babel/traverse";
 
 export function getJsxElementName(nodePath: NodePath<t.JSXElement>) {
   const openingElement = nodePath.node.openingElement;
+
+  // elements with simple (string) name
   if (t.isJSXIdentifier(openingElement.name)) {
     return openingElement.name.name;
   }
+
+  // elements with dots in name
+  if (t.isJSXMemberExpression(openingElement.name)) {
+    const memberExpr = openingElement.name;
+    const parts: string[] = [];
+
+    // Traverse the member expression to collect all parts
+    let current: t.JSXMemberExpression | t.JSXIdentifier = memberExpr;
+    while (t.isJSXMemberExpression(current)) {
+      parts.unshift(current.property.name);
+      current = current.object;
+    }
+
+    // Add the base identifier
+    if (t.isJSXIdentifier(current)) {
+      parts.unshift(current.name);
+    }
+
+    return parts.join(".");
+  }
   return null;
 }