Repository: i18next/i18next-parser
Pull request #861 (2023-07-19 21:27:09)

Extract format parameter from Trans component interpolations
### Why am I submitting this PR
While working on localizing our project, we noticed that formatted interpolations in the Trans component weren't being extracted correctly, leading to translations not being loaded correctly in our case.

### Does it fix an existing ticket?

No.

### Checklist

- [x] only relevant code is changed (make a diff before you submit the PR)
- [x] tests are included and pass: `yarn test` (see [details here](https://github.com/i18next/i18next-parser/blob/master/docs/development.md#tests))
- [ ] documentation is changed or added



Patch:
diff --git a/src/lexers/jsx-lexer.js b/src/lexers/jsx-lexer.js
index 11dfd5f..13886de 100644
--- a/src/lexers/jsx-lexer.js
+++ b/src/lexers/jsx-lexer.js
@@ -242,11 +242,13 @@ export default class JsxLexer extends JavascriptLexer {
             child.expression.kind === ts.SyntaxKind.ObjectLiteralExpression
           ) {
             // i18next-react only accepts two props, any random single prop, and a format prop
-            // for our purposes, format prop is always ignored
 
-            let nonFormatProperties = child.expression.properties.filter(
+            const nonFormatProperties = child.expression.properties.filter(
               (prop) => prop.name.text !== 'format'
             )
+            const formatProperty = child.expression.properties.find(
+              (prop) => prop.name.text === 'format'
+            )
 
             // more than one property throw a warning in i18next-react, but still works as a key
             if (nonFormatProperties.length > 1) {
@@ -261,9 +263,15 @@ export default class JsxLexer extends JavascriptLexer {
               }
             }
 
+            // This matches the behaviour of the Trans component in i18next as of v13.0.2:
+            // https://github.com/i18next/react-i18next/blob/0a4681e428c888fe986bcc0109eb19eab6ff2eb3/src/TransWithoutContext.js#L88
+            const value = formatProperty
+              ? `${nonFormatProperties[0].name.text}, ${formatProperty.initializer.text}`
+              : nonFormatProperties[0].name.text
+
             return {
               type: 'js',
-              content: `{{${nonFormatProperties[0].name.text}}}`,
+              content: `{{${value}}}`,
             }
           }
 


Test patch:
diff --git a/test/lexers/jsx-lexer.test.js b/test/lexers/jsx-lexer.test.js
index b75ff98..45d349f 100644
--- a/test/lexers/jsx-lexer.test.js
+++ b/test/lexers/jsx-lexer.test.js
@@ -132,6 +132,20 @@ describe('JsxLexer', () => {
       done()
     })
 
+    it('extracts formatted interpolations correctly', (done) => {
+      const Lexer = new JsxLexer()
+      const content =
+        '<Trans count={count}>{{ key: property, format: "number" }}</Trans>'
+      assert.deepEqual(Lexer.extract(content), [
+        {
+          key: '{{key, number}}',
+          defaultValue: '{{key, number}}',
+          count: '{count}',
+        },
+      ])
+      done()
+    })
+
     it('extracts keys from user-defined components', (done) => {
       const Lexer = new JsxLexer({
         componentFunctions: ['Translate', 'FooBar'],