fix: hardcoded locale in IntlFormatMessage

Author: AleksandrSl

cmp/compiler/src/react/client/useTranslation.ts

@@ -65,7 +65,7 @@ export const useTranslation: TranslationHook = (hashes: string[]) => {
           return text;
         }
 
-        return renderRichText(text, params);
+        return renderRichText(text, params, locale);
       },
       [translations, locale, sourceLocale],
     ),

cmp/compiler/src/react/server-only/index.ts

@@ -74,7 +74,7 @@ export async function getServerTranslations(options: {
         return text;
       }
 
-      return renderRichText(text, params);
+      return renderRichText(text, params, locale);
     },
     locale,
     translations,

cmp/compiler/src/react/server/useTranslation.ts

@@ -73,7 +73,7 @@ export const useTranslation: TranslationHook = (hashes: string[]) => {
         return text;
       }
 
-      return renderRichText(text, params);
+      return renderRichText(text, params, locale);
     },
     locale,
   };

cmp/compiler/src/react/shared/render-rich-text.test.tsx

@@ -6,13 +6,13 @@ import {
   describe,
   expect,
   it,
-  type SerializedConfig,
   type SnapshotSerializer,
 } from "vitest";
 import React, { isValidElement, type ReactElement } from "react";
 import { renderRichText } from "./render-rich-text";
 
 const SERIALIZED_MARKER = Symbol("serialized");
+const LOCALE = "en";
 
 const serializer = {
   serialize(val: ReactElement, config, indentation, depth, refs, printer) {
@@ -47,27 +47,35 @@ describe("renderRichText", () => {
   });
 
   it("should return plain text when only text (no placeholders)", () => {
-    const result = renderRichText("Hello World", {});
+    const result = renderRichText("Hello World", {}, LOCALE);
     expect(result).toBe("Hello World");
   });
 
   it("should replace variable placeholders", () => {
-    const result = renderRichText("Hello {name}", { name: "Alice" });
+    const result = renderRichText("Hello {name}", { name: "Alice" }, LOCALE);
     expect(result).toBe("Hello Alice");
   });
 
   it("should replace multiple variable placeholders", () => {
-    const result = renderRichText("Hello {name}, you have {count} messages", {
-      name: "Bob",
-      count: 5,
-    });
+    const result = renderRichText(
+      "Hello {name}, you have {count} messages",
+      {
+        name: "Bob",
+        count: 5,
+      },
+      LOCALE,
+    );
     expect(result).toBe("Hello Bob, you have 5 messages");
   });
 
   it("should render component placeholders with JSX", () => {
-    const result = renderRichText("Click <a0>here</a0>", {
-      a0: (chunks) => <a href="/home">{chunks}</a>,
-    });
+    const result = renderRichText(
+      "Click <a0>here</a0>",
+      {
+        a0: (chunks) => <a href="/home">{chunks}</a>,
+      },
+      LOCALE,
+    );
 
     expect(result).toMatchSnapshot();
   });
@@ -80,16 +88,21 @@ describe("renderRichText", () => {
         count: 5,
         strong0: (chunks) => <strong>{chunks}</strong>,
       },
+      LOCALE,
     );
 
     expect(result).toMatchSnapshot();
   });
 
   it("should render multiple same-type components", () => {
-    const result = renderRichText("Click <a0>here</a0> or <a1>there</a1>", {
-      a0: (chunks) => <a href="/home">{chunks}</a>,
-      a1: (chunks) => <a href="/about">{chunks}</a>,
-    });
+    const result = renderRichText(
+      "Click <a0>here</a0> or <a1>there</a1>",
+      {
+        a0: (chunks) => <a href="/home">{chunks}</a>,
+        a1: (chunks) => <a href="/about">{chunks}</a>,
+      },
+      LOCALE,
+    );
 
     expect(result).toMatchSnapshot();
   });
@@ -109,16 +122,21 @@ describe("renderRichText", () => {
           </a>
         ),
       },
+      LOCALE,
     );
 
     expect(result).toMatchSnapshot();
   });
 
   it("should handle nested components inside component tags", () => {
-    const result = renderRichText("You have <strong0>{count}</strong0> items", {
-      count: 10,
-      strong0: (chunks) => <strong>{chunks}</strong>,
-    });
+    const result = renderRichText(
+      "You have <strong0>{count}</strong0> items",
+      {
+        count: 10,
+        strong0: (chunks) => <strong>{chunks}</strong>,
+      },
+      LOCALE,
+    );
 
     expect(result).toMatchSnapshot();
   });
@@ -130,25 +148,34 @@ describe("renderRichText", () => {
         a0: (chunks) => <a>{chunks}</a>,
         a1: (chunks) => <a>{chunks}</a>,
       },
+      LOCALE,
     );
 
     expect(result).toMatchSnapshot();
   });
 
   it("should render untranslatable content as is", () => {
-    const result = renderRichText("Install using <code0></code0> command", {
-      code0: () => <code>npm install package</code>,
-    });
+    const result = renderRichText(
+      "Install using <code0></code0> command",
+      {
+        code0: () => <code>npm install package</code>,
+      },
+      LOCALE,
+    );
     expect(result).toMatchSnapshot();
   });
 
   it("should render fragments with expressions", () => {
     const translatableMixedContextFragment = (
       <>
-        {renderRichText("<b0>Mixed</b0> content <i0>fragment</i0>", {
-          b0: (chunks) => <b>{chunks}</b>,
-          i0: (chunks) => <i>{chunks}</i>,
-        })}
+        {renderRichText(
+          "<b0>Mixed</b0> content <i0>fragment</i0>",
+          {
+            b0: (chunks) => <b>{chunks}</b>,
+            i0: (chunks) => <i>{chunks}</i>,
+          },
+          LOCALE,
+        )}
       </>
     );
 
@@ -157,6 +184,7 @@ describe("renderRichText", () => {
       {
         translatableMixedContextFragment,
       },
+      LOCALE,
     );
     expect(result).toMatchSnapshot();
   });
@@ -165,6 +193,7 @@ describe("renderRichText", () => {
     const result = renderRichText(
       "To wrap text use: '<'>content'<'/> or '<'Fragment>content'<'/Fragment>",
       {},
+      LOCALE,
     );
     expect(result).toBe(
       "To wrap text use: <>content</> or <Fragment>content</Fragment>",

cmp/compiler/src/react/shared/render-rich-text.tsx

@@ -1,7 +1,7 @@
 import { Fragment, type ReactNode } from "react";
 import IntlMessageFormat, { type FormatXMLElementFn } from "intl-messageformat";
 import { logger } from "../../utils/logger";
-import { sourceLocale } from "@lingo.dev/compiler/virtual/config";
+import type { LocaleCode } from "lingo.dev/spec";
 
 /**
  * Component renderer function for rich text translation
@@ -53,14 +53,16 @@ function assignUniqueKeysToParams(params: RichTextParams): RichTextParams {
  *
  * @param text - The translation string with placeholders
  * @param params - Object with variable values and component renderers
+ * @param locale
  * @returns React nodes or string
  */
 export function renderRichText(
   text: string,
   params: RichTextParams,
+  locale: LocaleCode,
 ): ReactNode {
   try {
-    const formatter = new IntlMessageFormat(text, sourceLocale);
+    const formatter = new IntlMessageFormat(text, locale);
     const keyedParams = assignUniqueKeysToParams(params);
     const result = formatter.format<ReactNode>(keyedParams);