Output self-closing tags

Author: developit

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

@@ -81,9 +81,9 @@ export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options =
 				}
 			}
 		}
-		raw('>');
 
-		if (node.children) {
+		if (node.children && node.children.length !== 0) {
+			raw('>');
 			for (let i = 0; i < node.children.length; i++) {
 				let child = node.children[i];
 				if (t.isJSXText(child)) {
@@ -102,17 +102,20 @@ export default function jsxToTaggedTemplatesBabelPlugin({ types: t }, options =
 					}
 				}
 			}
-		}
 
-		if (name.match(/^[A-Z]/)) {
-			raw('</');
-			expr(t.identifier(name));
-			raw('>');
+			if (name.match(/^[A-Z]/)) {
+				raw('</');
+				expr(t.identifier(name));
+				raw('>');
+			}
+			else {
+				raw('</');
+				raw(name);
+				raw('>');
+			}
 		}
 		else {
-			raw('</');
-			raw(name);
-			raw('>');
+			raw('/>');
 		}
 
 		if (isRoot) {

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

@@ -4,13 +4,31 @@ import transformJsxToTaggedTemplatesPlugin from '../src/index.mjs';
 describe('babel-plugin-transform-jsx-to-tagged-templates', () => {
 	test('basic transformation', () => {
 		expect(
-			transform('(<div id="hello">hello</div>);', {
+			transform('(<div />);', {
 				babelrc: false,
 				plugins: [
 					transformJsxToTaggedTemplatesPlugin
 				]
 			}).code
-		).toBe('html`<div id="hello">hello</div>`;');
+		).toBe('html`<div/>`;');
+
+		expect(
+			transform('(<span>a</span>);', {
+				babelrc: false,
+				plugins: [
+					transformJsxToTaggedTemplatesPlugin
+				]
+			}).code
+		).toBe('html`<span>a</span>`;');
+
+		expect(
+			transform('(<div>hello</div>);', {
+				babelrc: false,
+				plugins: [
+					transformJsxToTaggedTemplatesPlugin
+				]
+			}).code
+		).toBe('html`<div>hello</div>`;');
 	});
 
 	test('nested children transformation', () => {