feat(parser): Handle a few more use cases of potential count attributes.

src/parser.js

@@ -614,6 +614,28 @@ class Parser {
  }, {});
  }
 
+ // Member Expression (e.g. i18nKey={foo.bar})
+ if (expression.type === 'MemberExpression') {
+ acc[name] = expression.object.name + '.' + expression.property.name;
+ }
+
+ // Conditional Expression (e.g. i18nKey={true ? 'foo' : 'bar'})
+ if (expression.type === 'ConditionalExpression') {
+ acc[name] = expression.consequent.value;
+ }
+
+ // Unary Expression (e.g. i18nKey={foo?.bar})
+ if (expression.type === 'UnaryExpression') {
+ acc[name] = expression.alternate.object.name + '.' + expression.alternate.property.name;
+ }
+
+ // Binary Expression (e.g. i18nKey={foo.bar - 1})
+ if (expression.type === 'BinaryExpression') {
+ if (expression.left.type === 'MemberExpression' && expression.right.type === 'Literal') {
+ acc[name] = expression.left.object.name + '.' + expression.left.property.name;
+ }
+ }
+
  // Template Literal
  if (expression.type === 'TemplateLiteral') {
  acc[name] = expression.quasis

test/react-i18next/i18n.js

@@ -28,6 +28,8 @@ i18n.init({
  transTest2InV2: 'Hello <1>{{name}}</1>, you have {{count}} message. Open <5>hear</5>.',
  transTest2InV2_other:
  'Hello <1>{{name}}</1>, you have {{count}} messages. Open <5>here</5>.',
+ transPluralWithCountAsMemberExpression: '{{count}} item',
+ transPluralWithCountAsMemberExpression_other: '{{count}} items',
  testTransKey1: '<0>{{numOfItems}}</0> item matched.',
  testTransKey1_other: '<0>{{numOfItems}}</0> items matched.',
  testTransKey2: '<0><0>{{numOfItems}}</0></0> item matched.',
@@ -53,7 +55,9 @@ i18n.init({
  escapeValue: false, // not needed for react!!
  formatSeparator: ',',
  format(value, format) {
- if (format === 'uppercase') return value.toUpperCase();
+ if (format === 'uppercase') {
+ return value.toUpperCase();
+ }
  return value;
  },
  },

test/react-i18next/trans-render.test.js

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
 import {
  Trans,
  withTranslation,
@@ -309,7 +309,7 @@ describe('trans complex - count only in props', () => {
  // prettier-ignore
  return (
  <Trans i18nKey="transTest2" count={count}>
- Hello <strong>{{ name }}</strong>, you have {{n: count}} message. Open <Link to="/msgs">here</Link>.
+ Hello <strong>{{ name }}</strong>, you have {{ n: count }} message. Open <Link to="/msgs">here</Link>.
  </Trans>
  );
  };
@@ -368,10 +368,108 @@ describe('trans complex v2 no extra pseudo elements for interpolation', () => {
  });
 });
 
+describe('Trans with a count using an object property should be detected as a translation with a plural', () => {
+ const TestComponent = () => {
+ const obj = { anyProp: { a: 10 } };
+ // prettier-ignore
+ return (
+ <Trans
+ i18nKey="transPluralWithCountAsMemberExpression"
+ count={obj.anyProp.a}
+ >
+ {{ count: obj.anyProp }} item.
+ </Trans>
+ );
+ };
+
+ it('should render correct content with the count', () => {
+ const { container } = render(<TestComponent />);
+ expect(container.firstChild).toMatchInlineSnapshot(`
+<div>
+ 10 items
+</div>
+`);
+ });
+});
+
+describe('Trans with a count using an conditionnal statement should be detected as a translation with a plural', () => {
+ const TestComponent = () => {
+ const obj = true;
+ // prettier-ignore
+ return (
+ <Trans
+ i18nKey="transPluralWithCountAsMemberExpression"
+ count={obj ? 3 : 10}
+ >
+ {{ count: 6 }} item.
+ </Trans>
+ );
+ };
+
+ it('should render correct content with the count', () => {
+ const { container } = render(<TestComponent />);
+ expect(container.firstChild).toMatchInlineSnapshot(`
+<div>
+ 3 items
+</div>
+`);
+ });
+});
+
+describe('Trans with a count using an Unary Expression statement should be detected as a translation with a plural', () => {
+ const TestComponent = () => {
+ const obj = { a: 3 };
+ // prettier-ignore
+ return (
+ <Trans
+ i18nKey="transPluralWithCountAsMemberExpression"
+ count={obj?.a}
+ >
+ {{ count: 6 }} item.
+ </Trans>
+ );
+ };
+
+ it('should render correct content with the count', () => {
+ const { container } = render(<TestComponent />);
+ expect(container.firstChild).toMatchInlineSnapshot(`
+<div>
+ 3 items
+</div>
+`);
+ });
+});
+
+describe('Trans with a count using an Binary Expression statement should be detected as a translation with a plural', () => {
+ const TestComponent = () => {
+ const obj = { a: 3 };
+ // prettier-ignore
+ return (
+ <Trans
+ i18nKey="transPluralWithCountAsMemberExpression"
+ count={obj.a - 1}
+ >
+ {{ count: 6 }} item.
+ </Trans>
+ );
+ };
+
+ it('should render correct content with the count', () => {
+ const { container } = render(<TestComponent />);
+ expect(container.firstChild).toMatchInlineSnapshot(`
+<div>
+ 2 items
+</div>
+`);
+ });
+});
+
 describe('trans with t as prop', () => {
  const TestComponent = ({ t, cb }) => {
  const customT = (...args) => {
- if (cb) cb();
+ if (cb) {
+ cb();
+ }
  return t(...args);
  };
  return (
@@ -415,7 +513,7 @@ describe('trans with empty content', () => {
  const TestComponent = () => <Trans />;
  it('should render an empty string', () => {
  const { container } = render(<TestComponent />);
- expect(container.firstChild).toMatchInlineSnapshot(`<div />`);
+ expect(container.firstChild).toMatchInlineSnapshot('<div />');
  });
 });