(Finally) fix the issue with how JSX handles newlines

Author: Konstantinos Bairaktaris

packages/cli/src/api/parsers/babel.js

@@ -73,13 +73,25 @@ function toStr(children, counter = 0) {
       }
     } else if (child.type === 'JSXText') {
       // Child is not a React element, append as-is
-      const chunk = child.value.trim().replace(/\s+/g, ' ');
+      let chunk = child.value;
+
+      // Try to mimic how JSX is parsed in runtime React
+      const [startMatch] = /^[\s\n]*/.exec(child.value);
+      if (startMatch.includes('\n')) {
+        chunk = chunk.substring(startMatch.length);
+      }
+
+      const [endMatch] = /[\s\n]*$/.exec(child.value);
+      if (endMatch.includes('\n')) {
+        chunk = chunk.substring(0, chunk.length - endMatch.length);
+      }
+
       if (chunk) { result.push(chunk); }
     } else if (
       child.type === 'JSXExpressionContainer'
       && child.expression.type === 'StringLiteral'
     ) {
-      const chunk = child.expression.value.trim();
+      const chunk = child.expression.value;
       if (chunk) { result.push(chunk); }
     } else {
       return [[], 0];
@@ -195,7 +207,7 @@ function babelExtractPhrases(HASHES, source, relativeFile, options) {
 
       if (!string && elem.name.name === 'T' && node.children && node.children.length) {
         const [result] = toStr(node.children);
-        string = result.join(' ').trim();
+        string = result.join('');
       }
 
       if (!string) return;

packages/cli/test/api/extract.hashedkeys.test.js

@@ -158,12 +158,12 @@ describe('extractPhrases with hashed keys', () => {
           string: 'Text 5',
           meta: { context: [], tags: [], occurrences: ['react.jsx'] },
         },
-        '404d0c0fef510bc89da7bc58ef160ccc': {
-          string: 'Text <1> 6 </1>',
+        '121b687b8625b4e58ba7f36dca77ad7f': {
+          string: 'Text <1>6</1>',
           meta: { context: [], tags: [], occurrences: ['react.jsx'] },
         },
-        '4f5fe2d7356c474bd2f4c03176c6bc45': {
-          string: 'Text <1> <2> 7 </2> </1>',
+        '3ed8a3c47f6a32ece9c9ae0c2a060d45': {
+          string: 'Text <1><2>7</2></1>',
           meta: { context: [], tags: [], occurrences: ['react.jsx'] },
         },
         '1ecaf4c087b894bf86987fc2972ddba7': {

packages/cli/test/api/extract.sourcekeys.test.js

@@ -151,12 +151,12 @@ describe('extractPhrases with source keys', () => {
           string: 'Text 5',
           meta: { context: [], tags: [], occurrences: ['react.jsx'] },
         },
-        'Text <1> 6 </1>': {
-          string: 'Text <1> 6 </1>',
+        'Text <1>6</1>': {
+          string: 'Text <1>6</1>',
           meta: { context: [], tags: [], occurrences: ['react.jsx'] },
         },
-        'Text <1> <2> 7 </2> </1>': {
-          string: 'Text <1> <2> 7 </2> </1>',
+        'Text <1><2>7</2></1>': {
+          string: 'Text <1><2>7</2></1>',
           meta: { context: [], tags: [], occurrences: ['react.jsx'] },
         },
         'Text 8::foo': {

packages/react/README.md

@@ -138,7 +138,7 @@ If you do this, the string that will be sent to Transifex for translation will
 look like this:
 
 ```
-A <1> button </1> and a <2> bold </2> walk into a bar
+A <1>button</1> and a <2>bold</2> walk into a bar
 ```
 
 As long as the translation respects the numbered tags, the T-component will

packages/react/src/components/T.jsx

@@ -49,7 +49,7 @@ export default function T({ _str, children, ...props }) {
   if (!children) { return t(_str, props); }
 
   const [templateArray, propsContainer] = toStr(children);
-  const templateString = templateArray.join(' ').trim();
+  const templateString = templateArray.join('');
   const translation = t(templateString, props);
 
   const result = toElement(translation, propsContainer);

packages/react/src/utils/toStr.js

@@ -64,8 +64,7 @@ export function toStr(children, counter = 0) {
       // Child is not a React element, append as-is
       /* eslint-disable no-lonely-if */
       if (typeof child === 'string' || child instanceof String) {
-        const chunk = child.trim().replace(/\s+/g, ' ');
-        if (chunk) { result.push(chunk); }
+        if (child) { result.push(child); }
       } else {
         result.push(child);
       }