From b56740afa23eddc0251c89e0fb122d3115ad91a7 Mon Sep 17 00:00:00 2001 From: Alex Medvediev Date: Fri, 10 Jan 2025 12:49:48 +0200 Subject: [PATCH 1/3] feat: Trans interpolations formatters support --- src/nodes-to-string.js | 7 +++++-- test/fixtures/trans.jsx | 1 + test/parser.test.js | 2 ++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/nodes-to-string.js b/src/nodes-to-string.js index c9de2ac..1d2966d 100644 --- a/src/nodes-to-string.js +++ b/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)); 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

", From 00af7ff2a928494794ba9fb28501ca35652565b5 Mon Sep 17 00:00:00 2001 From: Alex Medvediev Date: Mon, 13 Jan 2025 22:15:22 +0200 Subject: [PATCH 2/3] refactor --- src/nodes-to-string.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/nodes-to-string.js b/src/nodes-to-string.js index 1d2966d..a747bf7 100644 --- a/src/nodes-to-string.js +++ b/src/nodes-to-string.js @@ -1,5 +1,6 @@ import { ensureArray, ensureBoolean, ensureString } from 'ensure-type'; -import { get as _get, find } from 'lodash'; +import _get from 'lodash/get'; +import _find from 'lodash/find'; const isJSXText = (node) => { if (!node) { @@ -66,10 +67,13 @@ const nodesToString = (nodes, options) => { } if (isStringLiteral(expression)) { memo += expression.value; } else if (isObjectExpression(expression) && (_get(expression, 'properties[0].type') === 'Property')) { - const baseProperty = expression.properties[0].key.name; - const formatProperty = find(expression.properties, ['key.name', 'format']); - const formatter = formatProperty ? `, ${formatProperty.value.value}` : ''; - memo += `{{${baseProperty + formatter}}}`; + const properties = [expression.properties[0].key.name]; + const formatProperty = _find(expression.properties, ['key.name', 'format']); + const formatValue = _get(formatProperty, 'value.value'); + if (formatValue) { + properties.push(formatValue); + } + 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)); From ba29d2943174a5f6edf33b8d90fb1b94aca87068 Mon Sep 17 00:00:00 2001 From: Alex Medvediev Date: Tue, 14 Jan 2025 11:17:47 +0200 Subject: [PATCH 3/3] refactor --- src/nodes-to-string.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/nodes-to-string.js b/src/nodes-to-string.js index a747bf7..d563f0d 100644 --- a/src/nodes-to-string.js +++ b/src/nodes-to-string.js @@ -1,6 +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) { @@ -67,12 +68,10 @@ const nodesToString = (nodes, options) => { } if (isStringLiteral(expression)) { memo += expression.value; } else if (isObjectExpression(expression) && (_get(expression, 'properties[0].type') === 'Property')) { - const properties = [expression.properties[0].key.name]; - const formatProperty = _find(expression.properties, ['key.name', 'format']); - const formatValue = _get(formatProperty, 'value.value'); - if (formatValue) { - properties.push(formatValue); - } + 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}:`);