Allow parenthesized expressions on the top level in template-literals

While adding a test case for arrow functions, I noticed that
parenthesized expressions at the top level, which are safe to convert to
template-literals, were not being converted. This commit adds this
special casing.

I also added a few more test cases.

test/template-literals-test.js

@@ -47,6 +47,7 @@ test = '(' + foo + ')';
 test = '(' + foo + ')' + bar;
 test = '(' + (foo + bar) + ')';
 test = '(' + (1 + 1) + ')';
+test = (a + 'b');
 
 test = `hi${foo}` + bar;
 
@@ -57,6 +58,8 @@ test = foo + 'hi' + bar;
 test = foo + 'hi' + bar + baz;
 
 test = { a: 'hi' + foo }; // in an object
+test = { ['a' + b]: 'c' + d }; // computed properties
+
 test = ['hi' + foo]; // in an array
 test = [
   foo + 'bar', // comment
@@ -86,6 +89,7 @@ test = 'hi' + foo.join(','); // function
 test = 'hi' + foo.bar; // object member
 test = foo.bar + 'hi';
 test = '(' + foo.bar + ')';
+test = 'hi' + foo['bar'];
 
 test = foo + bar + 'hi'; // foo and bar could be numeric
 test = 'hi' + foo + bar;
@@ -95,3 +99,16 @@ test = 'foo' + (bar ? 'bar' : '');
 foo('hi' + foo);
 foo(foo + 'hi');
 foo(a + '\\?.*' + b);
+
+function a(b = 'c' + d) {
+  return b + 'e';
+}
+
+(b = 'c' + d)  => {
+  return b + 'e';
+};
+
+(b = 'c' + d)  => b + 'e';
+(b = 'c' + d)  => (b + 'e');
+
+test = a + 'b' + `c${'d' + e}`; // nested concatenation in template literals

test/template-literals-test.output.js

@@ -48,6 +48,7 @@ test = `(${foo})`;
 test = `(${foo})${bar}`;
 test = `(${foo + bar})`;
 test = `(${1 + 1})`;
+test = (`${a}b`);
 
 test = `hi${foo}${bar}`;
 
@@ -58,6 +59,8 @@ test = `${foo}hi${bar}`;
 test = `${foo}hi${bar}${baz}`;
 
 test = { a: `hi${foo}` }; // in an object
+test = { [`a${b}`]: `c${d}` }; // computed properties
+
 test = [`hi${foo}`]; // in an array
 test = [
   `${foo}bar`, // comment
@@ -87,6 +90,7 @@ test = `hi${foo.join(',')}`; // function
 test = `hi${foo.bar}`; // object member
 test = `${foo.bar}hi`;
 test = `(${foo.bar})`;
+test = `hi${foo['bar']}`;
 
 test = `${foo + bar}hi`; // foo and bar could be numeric
 test = `hi${foo}${bar}`;
@@ -96,3 +100,16 @@ test = `foo${bar ? 'bar' : ''}`;
 foo(`hi${foo}`);
 foo(`${foo}hi`);
 foo(`${a}\\?.*${b}`);
+
+function a(b = `c${d}`) {
+  return `${b}e`;
+}
+
+(b = `c${d}`)  => {
+  return `${b}e`;
+};
+
+(b = `c${d}`)  => `${b}e`;
+(b = `c${d}`)  => (`${b}e`);
+
+test = `${a}bc${'d' + e}`; // nested concatenation in template literals

transforms/template-literals.js

@@ -11,12 +11,16 @@
  *
  * - Better handling of code like 1 + 2 + 'foo' + bar which would ideally become
  *   `${1 + 2}foo${bar}`.
+ *
+ * - Better handling of nested string concatenation inside template literals.
+ *   Currently, a + `b${'c' + d}` becomes `${a}b${'c' + d}` but it would ideally
+ *   become `${a}b${`c${d}`}`.
  */
 module.exports = function templateLiterals(file, api, options) {
   const j = api.jscodeshift;
   const printOptions = options.printOptions || {quote: 'single'};
 
-  function extractNodes(node, comments) {
+  function extractNodes(node, comments, topLevel = false) {
     if (comments) {
       node.comments = node.comments || [];
       node.comments.push(...comments);
@@ -30,7 +34,7 @@ module.exports = function templateLiterals(file, api, options) {
       return [node];
     }
 
-    if (node.parenthesizedExpression) {
+    if (!topLevel && node.parenthesizedExpression) {
       return [node];
     }
 
@@ -43,7 +47,7 @@ module.exports = function templateLiterals(file, api, options) {
 
     return [
       ...extractNodes(node.left),
-      ...extractNodes(node.right, node.comments)
+      ...extractNodes(node.right, node.comments),
     ];
   }
 
@@ -134,7 +138,7 @@ module.exports = function templateLiterals(file, api, options) {
   }
 
   function convertToTemplateString(p) {
-    const tempNodes = extractNodes(p.node);
+    const tempNodes = extractNodes(p.node, null, true);
 
     if (!tempNodes.some(isStringishNode)) {
       return p.node;