bring back internal interpolationOverride handling for Trans component (if there are childrens), fixes #1754

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 14.1.2
+
+- bring back internal interpolationOverride handling for Trans component (if there are childrens), fixes [1754](https://github.com/i18next/react-i18next/issues/1754)
+
 ### 14.1.1
 
 - do not modify passed tOptions context property to address [1745](https://github.com/i18next/react-i18next/issues/1745)

package-lock.json

@@ -106,7 +106,7 @@
     "eslint-plugin-testing-library": "^5.11.0",
     "happy-dom": "^12.10.3",
     "husky": "^8.0.3",
-    "i18next": "^23.8.2",
+    "i18next": "^23.11.5",
     "lint-staged": "^8.1.3",
     "mkdirp": "^1.0.4",
     "prettier": "2.8.8",

package.json

@@ -479,11 +479,19 @@
 	      ...i18n.options.interpolation.defaultVariables
 	    };
 	  }
+	  const interpolationOverride = values || count !== undefined || !children ? tOptions.interpolation : {
+	    interpolation: {
+	      ...tOptions.interpolation,
+	      prefix: '#$?',
+	      suffix: '?$#'
+	    }
+	  };
 	  const combinedTOpts = {
 	    ...tOptions,
 	    context: context || tOptions.context,
 	    count,
 	    ...values,
+	    ...interpolationOverride,
 	    defaultValue,
 	    ns: namespaces
 	  };

react-i18next.js

@@ -349,11 +349,16 @@ export function Trans({
         ? { ...values, ...i18n.options.interpolation.defaultVariables }
         : { ...i18n.options.interpolation.defaultVariables };
   }
+  const interpolationOverride =
+    values || count !== undefined || !children // if !children gets problems in future, undo that fix: https://github.com/i18next/react-i18next/issues/1729 by removing !children from this condition
+      ? tOptions.interpolation
+      : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };
   const combinedTOpts = {
     ...tOptions,
     context: context || tOptions.context, // Add `context` from the props or fallback to the value from `tOptions`
     count,
     ...values,
+    ...interpolationOverride,
     defaultValue,
     ns: namespaces,
   };

react-i18next.min.js

@@ -46,6 +46,8 @@ i18n.init({
         transTestEscapedHtml: 'Escaped html should unescape correctly <0>&lt;&nbsp;&amp;&gt;</0>.',
         transTestCustomUnescape: 'Text should be passed through custom unescape <0>&shy;</0>',
         transTestCustomUnescapeSecond: 'Vertrauens&shy;kennwert',
+        'trans-key-with-generic-var': 'Value as is: {{foo}}',
+        'trans-key-with-number-var': 'Treat value as number: {{foo, number}}',
         testTransWithCtx: 'Go <1>there</1>.',
         testTransWithCtx_home: 'Go <1>home</1>.',
         testTransNoChildrenWithCtx: 'Go {{context}}.',

src/TransWithoutContext.js

@@ -862,6 +862,47 @@ describe('trans with context property', () => {
   });
 });
 
+describe.only('trans with formatting', () => {
+  function TestComponent({ parent }) {
+    return (
+      <>
+        <Trans
+          parent={parent}
+          i18nKey="trans-key-with-generic-var"
+          values={{ foo: 1234 }}
+        />
+        <Trans
+          parent={parent}
+          i18nKey="trans-key-with-number-var"
+          values={{ foo: 1234 }}
+        />
+        <Trans parent={parent} i18nKey="trans-key-with-number-var">
+          {{ foo: 1234 }}
+        </Trans>
+      </>
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.childNodes[0]).toMatchInlineSnapshot(`
+      <div>
+        Value as is: 1234
+      </div>
+    `);
+    expect(container.childNodes[1]).toMatchInlineSnapshot(`
+      <div>
+        Treat value as number: 1234
+      </div>
+    `);
+    expect(container.childNodes[2]).toMatchInlineSnapshot(`
+      <div>
+        Treat value as number: 1234
+      </div>
+    `);
+  });
+});
+
 describe('trans with undefined context property', () => {
   function TestComponent({ parent }) {
     return (