babel-transform-jsx: handle JSX fragments

Author: blikblum

packages/babel-plugin-transform-jsx-to-htm/index.mjs

@@ -86,50 +86,24 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 			cooked: buffer
 		}));
 		buffer = '';
-	}
-
-	function processNode(node, path, isRoot) {
-		const open = node.openingElement;
-		const { name } = open.name;
-
-		if (name.match(/^[A-Z]/)) {
-			raw('<');
-			expr(t.identifier(name));
-		}
-		else {
-			raw('<');
-			raw(name);
-		}
-
-		if (open.attributes) {
-			for (let i = 0; i < open.attributes.length; i++) {
-				const attr = open.attributes[i];
-				raw(' ');
-				if (t.isJSXSpreadAttribute(attr)) {
-					raw('...');
-					expr(attr.argument);
-					continue;
-				}
-				const { name, value } = attr;
-				raw(name.name);
-				if (value) {
-					raw('=');
-					if (value.expression) {
-						expr(value.expression);
-					}
-					else if (t.isStringLiteral(value)) {
-						escapePropValue(value);
-					}
-					else {
-						expr(value);
-					}
-				}
-			}
-		}
-
-		const children = t.react.buildChildren(node);
+  }
+  
+  function getName(node) {
+    switch (node.type) {
+      case 'JSXMemberExpression':
+        return `${node.object.name}.${node.property.name}`
+    
+      default:
+        return node.name;
+    }
+  }
+
+  function processChildren(node, name, isFragment) {
+    const children = t.react.buildChildren(node);
 		if (children && children.length !== 0) {
-			raw('>');
+      if (!isFragment) {
+        raw('>');
+      }			
 			for (let i = 0; i < children.length; i++) {
 				let child = children[i];
 				if (t.isStringLiteral(child)) {
@@ -144,20 +118,67 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 				}
 			}
 
-			if (name.match(/^[A-Z]/)) {
-				raw('</');
-				expr(t.identifier(name));
-				raw('>');
-			}
-			else {
-				raw('</');
-				raw(name);
-				raw('>');
-			}
+      if (!isFragment) {
+        if (name.match(/^[A-Z]/)) {
+          raw('</');
+          expr(t.identifier(name));
+          raw('>');
+        }
+        else {
+          raw('</');
+          raw(name);
+          raw('>');
+        }
+      }			
 		}
-		else {
+		else if (!isFragment) {
 			raw('/>');
-		}
+		}    
+  }
+
+	function processNode(node, path, isRoot) {
+		const open = node.openingElement;
+    const name = getName(open.name);
+    const isFragment = name === 'React.Fragment';
+
+    if (!isFragment) {
+      if (name.match(/^[A-Z]/)) {
+        raw('<');
+        expr(t.identifier(name));
+      }
+      else {
+        raw('<');
+        raw(name);
+      }
+      
+      if (open.attributes) {
+        for (let i = 0; i < open.attributes.length; i++) {
+          const attr = open.attributes[i];
+          raw(' ');
+          if (t.isJSXSpreadAttribute(attr)) {
+            raw('...');
+            expr(attr.argument);
+            continue;
+          }
+          const { name, value } = attr;
+          raw(name.name);
+          if (value) {
+            raw('=');
+            if (value.expression) {
+              expr(value.expression);
+            }
+            else if (t.isStringLiteral(value)) {
+              escapePropValue(value);
+            }
+            else {
+              expr(value);
+            }
+          }
+        }
+      }      
+    }
+
+    processChildren(node, name, isFragment);
 
 		if (isRoot) {
 			commit();
@@ -195,7 +216,30 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 				buffer = bufferBefore;
 
 				state.set('jsxElement', true);
-			}
+      },
+      
+      JSXFragment(path, state) {
+				let quasisBefore = quasis.slice();
+				let expressionsBefore = expressions.slice();
+				let bufferBefore = buffer;
+
+				buffer = '';
+				quasis.length = 0;
+				expressions.length = 0;
+
+				processChildren(path.node, '', true);
+
+        commit();
+        const template = t.templateLiteral(quasis, expressions);
+        const replacement = t.taggedTemplateExpression(tag, template);
+        path.replaceWith(replacement);
+
+				quasis = quasisBefore;
+				expressions = expressionsBefore;
+        buffer = bufferBefore;
+        
+        state.set('jsxElement', true);
+			}      
 		}
 	};
 }

test/babel-transform-jsx.test.mjs

@@ -101,6 +101,20 @@ describe('babel-plugin-transform-jsx-to-htm', () => {
 		});
 	});
 
+	describe('fragments', () => {
+		test('React.Fragment', () => {
+			expect(
+				compile(`<React.Fragment><div>Foo</div><div>Bar</div></React.Fragment>`)
+			).toBe('html`<div>Foo</div><div>Bar</div>`;');
+		});
+
+		test('short syntax', () => {
+			expect(
+				compile(`<><div>Foo</div><div>Bar</div></>`)
+			).toBe('html`<div>Foo</div><div>Bar</div>`;');
+		});
+	});
+
 	describe('props', () => {
 		test('static values', () => {
 			expect(