Merge pull request #105 from jviide/issue-104

Fix babel-plugin-htm behavior for non-element roots

Author: jviide

packages/babel-plugin-htm/index.mjs

@@ -134,19 +134,14 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 	}
 
 	function transform(node, state) {
-		if (node === undefined) return t.identifier('undefined');
-		if (node === null) return t.nullLiteral();
+		if (t.isNode(node)) return node;
+		if (typeof node === 'string') return stringValue(node);
+		if (typeof node === 'undefined') return t.identifier('undefined');
 
 		const { tag, props, children } = node;
-		function childMapper(child) {
-			if (typeof child==='string') {
-				return stringValue(child);
-			}
-			return t.isNode(child) ? child : transform(child, state);
-		}
 		const newTag = typeof tag === 'string' ? t.stringLiteral(tag) : tag;
 		const newProps = spreadNode(props, state);
-		const newChildren = t.arrayExpression(children.map(childMapper));
+		const newChildren = t.arrayExpression(children.map(child => transform(child, state)));
 		return createVNode(newTag, newProps, newChildren);
 	}
 

test/index.test.mjs

@@ -119,6 +119,13 @@ describe('htm', () => {
 		expect(html`<a><//>`).toEqual({ tag: 'a', props: null, children: [] });
 	});
 
+	test('non-element roots', () => {
+		expect(html`foo`).toEqual('foo');
+		expect(html`${1}`).toEqual(1);
+		expect(html`foo${1}`).toEqual(['foo', 1]);
+		expect(html`foo${1}bar`).toEqual(['foo', 1, 'bar']);
+	});
+
 	test('text child', () => {
 		expect(html`<a>foo</a>`).toEqual({ tag: 'a', props: null, children: ['foo'] });
 		expect(html`<a>foo bar</a>`).toEqual({ tag: 'a', props: null, children: ['foo bar'] });
@@ -182,7 +189,7 @@ describe('htm', () => {
 		expect(html`<a>${''}9aaaaaaaaa${''}</a>`).not.toEqual(html`<a>${''}0${''}aaaaaaaaa${''}</a>`);
 		expect(html`<a>${''}0${''}aaaaaaaa${''}</a>`).not.toEqual(html`<a>${''}.8aaaaaaaa${''}</a>`);
 	});
-	
+
 	test('do not mutate spread variables', () => {
 		const obj = {};
 		html`<a ...${obj} b="1" />`;