Wrap static blocks by fragment (#84)

* Request desired behavior in tests

* Remove own keys from generating code

Author: ezhlobo

src/__tests__/__snapshots__/each-else.test.js.snap

@@ -11,15 +11,15 @@ exports[`JavaScript output: transformed source code 1`] = `
                 return <span key={item}>{item}</span>;
               })
             : \\"No items in this list\\"}
-          {Array.isArray(list) && list.length
-            ? list.map(item => {
-                return <span key={item}>{item}</span>;
-              })
-            : [
-                \\"This is \\",
-                <strong key=\\"pug:1:0\\">literally</strong>,
-                \\" the same list!\\"
-              ]}
+          {Array.isArray(list) && list.length ? (
+            list.map(item => {
+              return <span key={item}>{item}</span>;
+            })
+          ) : (
+            <React.Fragment>
+              This is <strong>literally</strong> the same list!
+            </React.Fragment>
+          )}
         </div>
       );
     })}

src/__tests__/__snapshots__/if-else.test.js.snap

@@ -7,10 +7,16 @@ exports[`JavaScript output: transformed source code 1`] = `
       return (
         <div key={i}>
           {v === 1 ? \\"One\\" : v === 2 ? \\"Two\\" : \\"Many\\"}
-          {v === 3
-            ? [<strong key=\\"pug:2:0\\">Three</strong>, \\"is the magic number!\\"]
-            : null}
-          {v == 2 ? null : [<strong key=\\"pug:5:0\\">Definitely</strong>, \\"not 2\\"]}
+          {v === 3 ? (
+            <React.Fragment>
+              <strong>Three</strong>is the magic number!
+            </React.Fragment>
+          ) : null}
+          {v == 2 ? null : (
+            <React.Fragment>
+              <strong>Definitely</strong>not 2
+            </React.Fragment>
+          )}
         </div>
       );
     })}

src/__tests__/__snapshots__/interpolation.test.js.snap

@@ -20,7 +20,7 @@ module.exports = new function() {
         Here is a list of people that you might want to follow,{\\"\\\\n\\"}
         {[\\"one being \\", this.names[1], \\"!\\"].join(\\"\\")}
       </p>
-      {showFirstPerson ? <Person name={this.names[0]} key=\\"pug:0:0\\" /> : null}
+      {showFirstPerson ? <Person name={this.names[0]} /> : null}
       {this.names.map((name, key) => (
         <p key={key}>{[\\"Hi \\", name, \\", bye \\", name].join(\\"\\")}</p>
       ))}

src/__tests__/__snapshots__/plain-js.test.js.snap

@@ -2,12 +2,7 @@
 
 exports[`case JavaScript output: transformed source code 1`] = `
 "const n = 0;
-module.exports =
-  n === 1 ? (
-    <p key=\\"pug:0:0\\">One</p>
-  ) : n === 2 ? (
-    <p key=\\"pug:1:0\\">Two</p>
-  ) : null;
+module.exports = n === 1 ? <p>One</p> : n === 2 ? <p>Two</p> : null;
 "
 `;
 
@@ -107,7 +102,7 @@ Array [
 exports[`each-multiple static html output: static html 1`] = `"<div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div>"`;
 
 exports[`if JavaScript output: transformed source code 1`] = `
-"module.exports = false ? <p key=\\"pug:0:0\\">Truthy</p> : null;
+"module.exports = false ? <p>Truthy</p> : null;
 "
 `;
 

src/__tests__/__snapshots__/react-fragment.test.js.snap

@@ -53,7 +53,7 @@ exports[`with each static html output: static html 1`] = `"<div>1</div><div>2</d
 exports[`with if JavaScript output: transformed source code 1`] = `
 "module.exports = (
   <React.Fragment>
-    {true ? <div key=\\"pug:0:0\\">Truthy</div> : null}
+    {true ? <div>Truthy</div> : null}
     <div>Next item</div>
   </React.Fragment>
 );

src/block-key.js

@@ -69,17 +69,7 @@ export class StaticBlock implements Key {
     }
     this._update();
   }
-  handleAttributes(attrs: Array<JSXAttribute | JSXSpreadAttribute>) {
-    for (const _attr of attrs) {
-      const attr = t.asJSXAttribute(_attr);
-      if (attr && t.isJSXIdentifier(attr.name, {name: 'key'})) {
-        return;
-      }
-    }
-    this.getKey(key => {
-      attrs.push(t.jSXAttribute(t.jSXIdentifier('key'), toJsxValue(key)));
-    });
-  }
+  handleAttributes(attrs: Array<JSXAttribute | JSXSpreadAttribute>) {}
   end() {
     this._ended = true;
     this._update();

src/utils/jsx.js

@@ -38,8 +38,13 @@ export function buildJSXFragment(children: Array<any>): JSXElement {
 
   const jSXChildren = children.map(item => {
     if (!isAllowedChild(item)) {
+      if (item.type === 'StringLiteral') {
+        return t.jSXText(item.value);
+      }
+
       return t.jSXExpressionContainer(item);
     }
+
     return item;
   });
 

src/visitors/Case.js

@@ -1,6 +1,7 @@
 // @flow
 
 import parseExpression from '../utils/parse-expression';
+import {buildJSXFragment} from '../utils/jsx';
 import type Context from '../context';
 import t from '../lib/babel-types';
 import {visitExpressions} from '../visitors';
@@ -23,7 +24,7 @@ function convertCases(
       if (children.length === 0) {
         return t.identifier('null');
       }
-      return t.arrayExpression(children);
+      return buildJSXFragment(children);
     },
   );
   if (node.expr === 'default') {

src/visitors/Conditional.js

@@ -1,6 +1,7 @@
 // @flow
 
 import parseExpression from '../utils/parse-expression';
+import {buildJSXFragment} from '../utils/jsx';
 import type Context from '../context';
 import t from '../lib/babel-types';
 import {visitExpressions} from '../visitors';
@@ -23,7 +24,7 @@ const ConditionalVisitor = {
         if (children.length === 0) {
           return t.identifier('null');
         }
-        return t.arrayExpression(children);
+        return buildJSXFragment(children);
       },
     );
     const alternate = context.staticBlock(
@@ -42,7 +43,7 @@ const ConditionalVisitor = {
         if (children.length === 0) {
           return t.identifier('null');
         }
-        return t.arrayExpression(children);
+        return buildJSXFragment(children);
       },
     );
 

src/visitors/Each.js

@@ -1,6 +1,7 @@
 // @flow
 
 import parseExpression from '../utils/parse-expression';
+import {buildJSXFragment} from '../utils/jsx';
 import type Context from '../context';
 import t from '../lib/babel-types';
 import {visitExpressions} from '../visitors';
@@ -18,7 +19,7 @@ function getAlternate(node: Object, context: Context): Expression {
       if (children.length === 1) {
         return children[0];
       }
-      return t.arrayExpression(children);
+      return buildJSXFragment(children);
     },
   );
 }