Support javascript expressions with strings in CLI

eg `<T username="Bill">hello {'{username}'}</T>`

Author: Konstantinos Bairaktaris

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

@@ -75,6 +75,12 @@ function toStr(children, counter = 0) {
       // Child is not a React element, append as-is
       const chunk = child.value.trim();
       if (chunk) { result.push(chunk); }
+    } else if (
+      child.type === 'JSXExpressionContainer'
+      && child.expression.type === 'StringLiteral'
+    ) {
+      const chunk = child.expression.value.trim();
+      if (chunk) { result.push(chunk); }
     } else {
       return [[], 0];
     }

packages/react/README.md

@@ -130,16 +130,10 @@ mix of text and React elements:
 
 ```javascript
 <T>
-  A <button>button</button> and a <b>bold</b> walk into a bar
+  A <button title="button!!!">button</button> and a <b>bold</b> walk into a bar
 </T>
 ```
 
-You must not inject any javascript code in the content of a T-component because:
-
-1. It will be rendered differently every time and the SDK won't be able to
-   predictably find a translation
-2. The CLI will not be able to extract a source string from it
-
 If you do this, the string that will be sent to Transifex for translation will
 look like this:
 
@@ -151,6 +145,12 @@ As long as the translation respects the numbered tags, the T-component will
 render the translation properly. Any props that the React elements have in the
 source version of the text will be applied to the translation as well.
 
+You must not inject any javascript code in the content of a T-component because:
+
+1. It will be rendered differently every time and the SDK won't be able to
+   predictably find a translation
+2. The CLI will not be able to extract a source string from it
+
 You can interpolate parameters as before, but you have to be careful with how
 you define them in the source body: