fix(compiler): replace elements with dot in name (#1011)

Author: mathio

.changeset/spotty-cobras-greet.md

@@ -0,0 +1,7 @@
+---
+"@lingo.dev/_compiler": patch
+"@lingo.dev/_react": patch
+"lingo.dev": patch
+---
+
+replace elements with dot in name

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

@@ -60,11 +60,11 @@ describe("JSX Content Utils", () => {
 
       it("should handle whitespaces between elements", () => {
         const path = getJSXElementPath(
-          "<div>\n  Hello <strong>crazy</strong>  world!</div>",
+          "<div>\n  Hello <strong>crazy</strong>  world! <Icons.Rocket /></div>",
         );
         const content = extractJsxContent(path);
         expect(content).toBe(
-          "Hello <element:strong>crazy</element:strong> world!",
+          "Hello <element:strong>crazy</element:strong> world! <element:Icons.Rocket></element:Icons.Rocket>",
         );
       });
 

packages/react/src/core/component.spec.tsx

@@ -9,7 +9,7 @@ describe("LingoComponent", () => {
         entries: {
           greeting: "Hello {user.profile.name} you have {count} messages",
           welcome:
-            "Welcome <element:a>incredible <element:span>fantastic <element:em>wonderful <element:strong>amazing</element:strong></element:em></element:span> user</element:a>",
+            "Welcome <element:a>incredible <element:span>fantastic <element:em>wonderful <element:strong>amazing</element:strong></element:em></element:span> user</element:a> <element:Icons.Rocket></element:Icons.Rocket>",
           complex:
             "<element:a>Hello {user.profile.name}, welcome to <element:span>wonderful <element:strong><element:em>{placeholder}</element:em> nested</element:strong></element:span> world</element:a> of the <element:u>universe number {count}</element:u>",
         },
@@ -49,6 +49,10 @@ describe("LingoComponent", () => {
   });
 
   it("replaces element placeholders", () => {
+    const Icons = {
+      Rocket: () => <span>🚀</span>,
+    };
+
     const { container } = render(
       <LingoComponent
         $dictionary={dictionary}
@@ -60,11 +64,12 @@ describe("LingoComponent", () => {
           ({ children }: any) => <span>{children}</span>,
           ({ children }: any) => <em>{children}</em>,
           ({ children }: any) => <strong className="red">{children}</strong>,
+          ({ children }: any) => <Icons.Rocket />,
         ]}
       />,
     );
     expect(container.innerHTML).toBe(
-      '<div>Welcome <a href="#">incredible <span>fantastic <em>wonderful <strong class="red">amazing</strong></em></span> user</a></div>',
+      '<div>Welcome <a href="#">incredible <span>fantastic <em>wonderful <strong class="red">amazing</strong></em></span> user</a> <span>🚀</span></div>',
     );
   });
 

packages/react/src/core/component.tsx

@@ -134,16 +134,15 @@ function replaceElements(
   elements?: Array<FunctionComponent>,
   elementIndex: { current: number } = { current: 0 },
 ): ReactNode[] {
+  const ELEMENT_PATTERN = /<element:([\w.]+)>(.*?)<\/element:\1>/gs;
+
   if (_.isEmpty(elements)) {
     return nodes.map((node) => {
       if (typeof node !== "string") return node;
 
-      return node.replace(
-        /<element:(\w+)>(.*?)<\/element:\1>/gs,
-        (match, elementName, content) => {
-          return content;
-        },
-      );
+      return node.replace(ELEMENT_PATTERN, (match, elementName, content) => {
+        return content;
+      });
     });
   }
 
@@ -153,7 +152,7 @@ function replaceElements(
 
       const segments: ReactNode[] = [];
       let lastIndex = 0;
-      const ELEMENT_PATTERN = /<element:(\w+)>(.*?)<\/element:\1>/gs;
+
       let match;
 
       while ((match = ELEMENT_PATTERN.exec(node)) !== null) {