feat: Parse formatters for interpolated values in Trans

src/nodes-to-string.js

@@ -1,5 +1,5 @@
 import { ensureArray, ensureBoolean, ensureString } from 'ensure-type';
-import _get from 'lodash/get';
+import { get as _get, find } from 'lodash';
 
 const isJSXText = (node) => {
   if (!node) {
@@ -66,7 +66,10 @@ const nodesToString = (nodes, options) => {
       } if (isStringLiteral(expression)) {
         memo += expression.value;
       } else if (isObjectExpression(expression) && (_get(expression, 'properties[0].type') === 'Property')) {
-        memo += `{{${expression.properties[0].key.name}}}`;
+        const baseProperty = expression.properties[0].key.name;
+        const formatProperty = find(expression.properties, ['key.name', 'format']);
+        const formatter = formatProperty ? `, ${formatProperty.value.value}` : '';
+        memo += `{{${baseProperty + formatter}}}`;
       } else {
         console.error(`Unsupported JSX expression. Only static values or {{interpolation}} blocks are supported. Got ${expression.type}:`);
         console.error(ensureString(options?.code).slice(node.start, node.end));

test/fixtures/trans.jsx

@@ -29,6 +29,7 @@ const Component = () => (
             </Trans>
             <Trans i18nKey="string-literal">This is a <strong>test</strong></Trans>
             <Trans i18nKey="object-expression">This is a <strong>{{test}}</strong></Trans>
+            <Trans i18nKey="object-expression-with-format">Interpolation + custom formatter Trans <strong>{{test, format: 'currency(.00/w)'}}</strong></Trans>
             <Trans i18nKey="arithmetic-expression">
                 2 + 2 = {{ result: 2 + 2 }}
             </Trans>

test/parser.test.js

@@ -183,6 +183,7 @@ test('Parse Trans components', () => {
         'multiline-text-string': 'multiline text string',
         'string-literal': 'This is a <strong>test</strong>',
         'object-expression': 'This is a <1>{{test}}</1>',
+        'object-expression-with-format': 'Interpolation + custom formatter Trans <1>{{test, currency(.00/w)}}</1>',
         'arithmetic-expression': '2 + 2 = {{result}}',
         'components': 'Go to <1>Administration > Tools</1> to download administrative tools.',
 
@@ -260,6 +261,7 @@ test('Parse Trans components with fallback key', () => {
         'multiline-text-string': 'multiline text string',
         "string-literal": "This is a <strong>test</strong>",
         "object-expression": "This is a <1>{{test}}</1>",
+        "object-expression-with-format": "Interpolation + custom formatter Trans <1>{{test, currency(.00/w)}}</1>",
         'arithmetic-expression': '2 + 2 = {{result}}',
         'components': 'Go to <1>Administration > Tools</1> to download administrative tools.',
         "lorem-ipsum": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>",