feat: overrides fo translation

Author: AleksandrSl

cmp/compiler/src/plugin/transform/__snapshots__/transform.test.ts.snap

@@ -463,7 +463,7 @@ import Image from "next/image";
 export default function Button() {
   const {
     t
-  } = useTranslation(["0fab30e30c5b", "fca9b3359e5e"]);
+  } = useTranslation(["fca9b3359e5e", "0fab30e30c5b"]);
   return <a href="/deploy">
       <Image src="/icon.svg" alt={t("0fab30e30c5b", "Icon")} width={16} height={16} />{t("fca9b3359e5e", "Deploy Now")}</a>;
 }"
@@ -811,6 +811,190 @@ export function Example() {
 }"
 `;
 
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle brand names and technical terms 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Header() {
+  const {
+    t
+  } = useTranslation(["16731724003e", "03eb567568a5"]);
+  return <div>
+      <h1>{t("16731724003e", "Lingo.dev")}</h1>
+      <p>{t("03eb567568a5", "JWT token is invalid")}</p>
+    </div>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle multiple elements with different overrides 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Page() {
+  const {
+    t
+  } = useTranslation(["2c49fa19d1b8", "3d33e41209ee", "38ee9c3017d4"]);
+  return <div>
+      <h1>{t("2c49fa19d1b8", "Title")}</h1>
+      <p>{t("3d33e41209ee", "Description")}</p>
+      <button>{t("38ee9c3017d4", "Click")}</button>
+    </div>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle override alongside other attributes 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Button() {
+  const {
+    t
+  } = useTranslation(["0be1d46bd3b7"]);
+  return <button className="primary" onClick={handleClick} disabled={false}>{t("0be1d46bd3b7", "Submit")}</button>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle overrides in mixed content (rich text) 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Message() {
+  const {
+    t
+  } = useTranslation(["d81c47e737e1"]);
+  const name = "Alice";
+  return <div>{t("d81c47e737e1", "Welcome {name}, you have <strong0>{count}</strong0> messages", {
+      name,
+      count,
+      strong0: chunks => <strong>{chunks}</strong>
+    })}</div>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle overrides in non-async server components with unified hook 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export default function ServerPage() {
+  const {
+    t
+  } = useTranslation(["5d97e151703a", "57b5dc21ee4c"]);
+  return <div>
+      <h1>{t("5d97e151703a", "Welcome")}</h1>
+      <p>{t("57b5dc21ee4c", "Description")}</p>
+    </div>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle overrides in server components with async 1`] = `
+"import { getServerTranslations } from "@lingo.dev/compiler/react/server";
+export default async function ServerPage() {
+  const {
+    t
+  } = await getServerTranslations({
+    hashes: ["5d97e151703a", "9598a4aa5fff"]
+  });
+  const data = await fetchData();
+  return <div>
+      <h1>{t("5d97e151703a", "Welcome")}</h1>
+      <p>{t("9598a4aa5fff", "Data: {data}", {
+        data
+      })}</p>
+    </div>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle overrides with locale region codes 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Welcome() {
+  const {
+    t
+  } = useTranslation(["1f0e8650e31f"]);
+  return <h1>{t("1f0e8650e31f", "Welcome")}</h1>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle overrides with special characters 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Legal() {
+  const {
+    t
+  } = useTranslation(["718271d78b60"]);
+  return <p>{t("718271d78b60", "In accordance with GDPR Article 15...")}</p>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle partial overrides (only some locales) 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Message() {
+  const {
+    t
+  } = useTranslation(["a97a23bf9109"]);
+  return <p>{t("a97a23bf9109", "Special text")}</p>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should handle template literals in override values 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Message() {
+  const {
+    t
+  } = useTranslation(["20a45a35c47e"]);
+  return <p>{t("20a45a35c47e", "Message")}</p>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should not add overrides field when override is empty object 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Button() {
+  const {
+    t
+  } = useTranslation(["43e1aff00fc2"]);
+  return <button data-lingo-override={{}}>{t("43e1aff00fc2", "Click")}</button>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should not add overrides field when override is invalid 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Button() {
+  const {
+    t
+  } = useTranslation(["43e1aff00fc2"]);
+  return <button data-lingo-override={null}>{t("43e1aff00fc2", "Click")}</button>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should not apply overrides to elements without translatable content 1`] = `
+"export function Empty() {
+  return <div data-lingo-override={{
+    de: "Text"
+  }}></div>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should parse override attribute with JSON string 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Button() {
+  const {
+    t
+  } = useTranslation(["43e1aff00fc2"]);
+  return <button>{t("43e1aff00fc2", "Click")}</button>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should parse override attribute with object expression 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Button() {
+  const {
+    t
+  } = useTranslation(["b8ee597b5d56"]);
+  return <button>{t("b8ee597b5d56", "Click here")}</button>;
+}"
+`;
+
+exports[`transformComponent > translation overrides (data-lingo-override) > should validate locale codes and reject invalid ones 1`] = `
+"import { useTranslation } from "@lingo.dev/compiler/react";
+export function Button() {
+  const {
+    t
+  } = useTranslation(["43e1aff00fc2"]);
+  return <button data-lingo-override={{
+    german: "Klicken",
+    "en_US": "Click"
+  }}>{t("43e1aff00fc2", "Click")}</button>;
+}"
+`;
+
 exports[`transformComponent > use directive mode > should transform files with 'use i18n' directive 1`] = `
 ""use i18n";
 

cmp/compiler/src/plugin/transform/index.ts

@@ -77,6 +77,7 @@ export function transformComponent({
       transformed: translationEntries.length > 0,
     };
   } catch (error) {
+    // TODO (AleksandrSl 08/12/2025): Should also log the message
     logger.error(`Failed to transform ${filePath}:`, error);
     // Return original code on error
     return {