diff --git a/src/nodes-to-string.js b/src/nodes-to-string.js index c9de2ac..d563f0d 100644 --- a/src/nodes-to-string.js +++ b/src/nodes-to-string.js @@ -1,5 +1,7 @@ import { ensureArray, ensureBoolean, ensureString } from 'ensure-type'; import _get from 'lodash/get'; +import _find from 'lodash/find'; +import _compact from 'lodash/compact'; const isJSXText = (node) => { if (!node) { @@ -66,7 +68,11 @@ 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 properties = _compact([ + _get(expression, 'properties[0].key.name'), + _get(_find(expression.properties, ['key.name', 'format']), 'value.value') + ]); + memo += `{{${properties.join(', ')}}}`; } 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)); diff --git a/test/fixtures/trans.jsx b/test/fixtures/trans.jsx index a5ebe43..43f6aa2 100644 --- a/test/fixtures/trans.jsx +++ b/test/fixtures/trans.jsx @@ -29,6 +29,7 @@ const Component = () => ( This is a test This is a {{test}} + Interpolation + custom formatter Trans {{test, format: 'currency(.00/w)'}} 2 + 2 = {{ result: 2 + 2 }} diff --git a/test/parser.test.js b/test/parser.test.js index 8e7295c..3abd397 100644 --- a/test/parser.test.js +++ b/test/parser.test.js @@ -183,6 +183,7 @@ test('Parse Trans components', () => { 'multiline-text-string': 'multiline text string', 'string-literal': 'This is a test', 'object-expression': 'This is a <1>{{test}}', + 'object-expression-with-format': 'Interpolation + custom formatter Trans <1>{{test, currency(.00/w)}}', 'arithmetic-expression': '2 + 2 = {{result}}', 'components': 'Go to <1>Administration > Tools 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 test", "object-expression": "This is a <1>{{test}}", + "object-expression-with-format": "Interpolation + custom formatter Trans <1>{{test, currency(.00/w)}}", 'arithmetic-expression': '2 + 2 = {{result}}', 'components': 'Go to <1>Administration > Tools to download administrative tools.', "lorem-ipsum": "

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

",