Implement JSXFragment (#200)

* Implement JSXFragment

* Add `Fragment` to generated header

* Only add JSX Fragment when it was encountered

Author: kungfooman

src-transpiler/Stringifier.js

@@ -228,13 +228,17 @@ class Stringifier {
     }
     return out;
   }
+  encounteredFragment = false;
   /**
    * @returns {string} The header.
    */
   getHeader() {
     if (!this.addReactImport) {
       return '';
     }
+    if (this.encounteredFragment) {
+      return "import {createElement, Fragment} from 'react';\n";
+    }
     return "import {createElement} from 'react';\n";
   }
   get parent() {
@@ -1133,6 +1137,42 @@ class Stringifier {
     out += ')';
     return out;
   }
+  /**
+   * @param {import("@babel/types").JSXFragment} node - The Babel AST node.
+   * @returns {string} Stringification of the node.
+   */
+  JSXFragment(node) {
+    const {/*openingFragment, closingFragment,*/ children} = node;
+    this.encounteredFragment = true;
+    // console.log('JSXFragment', {openingFragment, closingFragment, children});
+    let {spaces} = this;
+    let out = 'createElement(\n';
+    this.numSpaces++;
+    spaces = this.spaces;
+    out += spaces;
+    out += 'Fragment,\n';
+    out += spaces;
+    out += 'null';
+    // Same code for children as in JSXElement
+    if (children.length) {
+      out += ',\n';
+      for (const child of children) {
+        const source = this.toSource(child);
+        if (!source.length) {
+          continue;
+        }
+        out += spaces;
+        out += source;
+        out += ',\n';
+      }
+    } else {
+      out += '\n';
+    }
+    this.numSpaces--;
+    out += this.spaces;
+    out += ')';
+    return out;
+  }
   /**
    * @param {import("@babel/types").JSXIdentifier} node - The Babel AST node.
    * @returns {string} Stringification of the node.