bring back internal interpolationOverride handling for Trans componen…

…t (if there are childrens), fixes #1754

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.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",

react-i18next.js

@@ -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
  };

src/TransWithoutContext.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,
  };

test/i18n.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}}.',

test/trans.render.spec.jsx

@@ -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 (