Normalize children with @babel/types react.buildChildren

Author: jviide

packages/babel-plugin-transform-jsx-to-tagged-templates/src/index.mjs

@@ -54,7 +54,7 @@ export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options =
 		const { name } = open.name;
 
 		const toProcess = [];
-
+		
 		if (name.match(/^[A-Z]/)) {
 			raw('<');
 			expr(t.identifier(name));
@@ -90,25 +90,21 @@ export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options =
 			}
 		}
 
-		if (htmlOutput || node.children && node.children.length !== 0) {
+		const children = t.react.buildChildren(node);
+		if (htmlOutput || children && children.length !== 0) {
 			raw('>');
-			for (let i = 0; i < node.children.length; i++) {
-				let child = node.children[i];
-				if (t.isJSXText(child)) {
+			for (let i = 0; i < children.length; i++) {
+				let child = children[i];
+				if (t.isStringLiteral(child)) {
 					// @todo - expose `whitespace: true` option?
-					raw(child.value.trim());
+					raw(child.value);
+				}
+				else if (t.isJSXElement(child)) {
+					processNode(child);
 				}
 				else {
-					if (t.isJSXExpressionContainer(child)) {
-						child = child.expression;
-					}
-					if (t.isJSXElement(child)) {
-						processNode(child);
-					}
-					else {
-						expr(child);
-						toProcess.push(child);
-					}
+					expr(child);
+					toProcess.push(child);
 				}
 			}
 

packages/babel-plugin-transform-jsx-to-tagged-templates/test/index.test.js

@@ -85,17 +85,23 @@ describe('babel-plugin-transform-jsx-to-tagged-templates', () => {
 			).toBe('const Foo = () => html`<div class="foo" draggable><h1>Hello</h1><p>world.</p></div>`;');
 		});
 
-		test('inter-element whitespace is collapsed', () => {
+		test('inter-element whitespace is collapsed similarly to the JSX plugin', () => {
 			expect(
-				compile('const Foo = props => <div a b> a <em> b </em> c <strong> d </strong> e </div>;')
-			).toBe('const Foo = props => html`<div a b>a<em>b</em>c<strong>d</strong>e</div>`;');
+				compile('const Foo = props => <div a b> a \n <em> b \n B </em> c <strong> d </strong> e </div>;')
+			).toBe('const Foo = props => html`<div a b> a<em> b B </em> c <strong> d </strong> e </div>`;');
 		});
-
+		
 		test('nested JSX Expressions produce nested templates', () => {
 			expect(
 				compile('const Foo = props => <ul>{props.items.map(item =>\n  <li>\n    {item}\n  </li>\n)}</ul>;')
 			).toBe('const Foo = props => html`<ul>${props.items.map(item => html`<li>${item}</li>`)}</ul>`;');
 		});
+		
+		test('empty expressions are ignored', () => {
+			expect(
+				compile(`(<div>{/* a comment */}</div>);`)
+			).toBe('html`<div/>`;');
+		});
 	});
 
 	describe('integration with babel-plugin-jsx-pragmatic', () => {