Respect defaultVariables in the interpolation options #1685

i18next · Oct 13, 2023 · 110eeae · hubgit · Oct 19, 2023 · adrai
1 parent 1ff5cab
commit 110eeae
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 13.3.0
+
+- Respect defaultVariables in the interpolation options [1685](https://github.com/i18next/react-i18next/issues/1685)
+
 ### 13.2.2
 
 - Fix missing TransWithoutContext type [1672](https://github.com/i18next/react-i18next/pull/1672)

diff --git a/react-i18next.js b/react-i18next.js
@@ -488,13 +488,22 @@
       hashTransKey
     } = reactI18nextOptions;
     const key = i18nKey || (hashTransKey ? hashTransKey(nodeAsString || defaultValue) : nodeAsString || defaultValue);
-    const interpolationOverride = values ? tOptions.interpolation : {
+    let interpolationOverride = values ? tOptions.interpolation : {
       interpolation: {
         ...tOptions.interpolation,
         prefix: '#$?',
         suffix: '?$#'
       }
     };
+    if (i18n.options && i18n.options.interpolation && i18n.options.interpolation.defaultVariables) {
+      if (!interpolationOverride) interpolationOverride = {};
+      interpolationOverride.interpolation = {
+        defaultVariables: {
+          ...i18n.options.interpolation.defaultVariables,
+          ...(interpolationOverride.interpolation && interpolationOverride.interpolation.defaultVariables || {})
+        }
+      };
+    }
     const combinedTOpts = {
       ...tOptions,
       count,

diff --git a/react-i18next.min.js b/react-i18next.min.js
diff --git a/src/TransWithoutContext.js b/src/TransWithoutContext.js
@@ -335,9 +335,20 @@ export function Trans({
   const key =
     i18nKey ||
     (hashTransKey ? hashTransKey(nodeAsString || defaultValue) : nodeAsString || defaultValue);
-  const interpolationOverride = values
+  let interpolationOverride = values
     ? tOptions.interpolation
     : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };
+  if (i18n.options && i18n.options.interpolation && i18n.options.interpolation.defaultVariables) {
+    if (!interpolationOverride) interpolationOverride = {};
+    interpolationOverride.interpolation = {
+      defaultVariables: {
+        ...i18n.options.interpolation.defaultVariables,
+        ...((interpolationOverride.interpolation &&
+          interpolationOverride.interpolation.defaultVariables) ||
+          {}),
+      },
+    };
+  }
   const combinedTOpts = {
     ...tOptions,
     count,

diff --git a/test/i18n.js b/test/i18n.js
@@ -13,6 +13,7 @@ i18n.init({
     en: {
       translation: {
         key1: 'test',
+        interpolateKeyWithDefaultVariables: 'add {{defaultInsert}} {{defaultUp, uppercase}}',
         interpolateKey: 'add {{insert}} {{up, uppercase}}',
         interpolateKey2: '<strong>add</strong> {{insert}} {{up, uppercase}}',
         transTest1: 'Go <1>there</1>.',
@@ -66,6 +67,10 @@ i18n.init({
       if (format === 'uppercase') return value.toUpperCase();
       return value;
     },
+    defaultVariables: {
+      defaultInsert: 'first',
+      defaultUp: 'second',
+    },
   },
 
   react: {

diff --git a/test/trans.render.spec.js b/test/trans.render.spec.js
@@ -521,6 +521,20 @@ describe('trans should work with misleading overloaded empty elements in compone
   });
 });
 
+describe('trans should work with defaultVariables', () => {
+  function TestComponent() {
+    return <Trans i18nKey="interpolateKeyWithDefaultVariables" />;
+  }
+  it('should render translated string', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        add first SECOND
+      </div>
+    `);
+  });
+});
+
 describe('trans should work with lowercase elements in components', () => {
   function TestComponent() {
     return (