Implement multiple root elements

Author: jviide

packages/babel-plugin-htm/index.mjs

@@ -166,7 +166,10 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 					const expr = path.node.quasi.expressions;
 
 					const tree = treeify(statics, expr);
-					path.replaceWith(transform(tree, state));
+					const node = !Array.isArray(tree)
+						? transform(tree, state)
+						: t.arrayExpression(tree.map(root => transform(root, state)));
+					path.replaceWith(node);
 				}
 			}
 		}

src/build.mjs

@@ -4,17 +4,6 @@ const PROPS_ASSIGN = 2;
 const CHILD_RECURSE = 3;
 const CHILD_APPEND = 4;
 
-const TAG_START = 60;
-const TAG_END = 62;
-const EQUALS = 61;
-const QUOTE_DOUBLE = 34;
-const QUOTE_SINGLE = 39;
-const TAB = 9;
-const NEWLINE = 10;
-const RETURN = 13;
-const SPACE = 32;
-const SLASH = 47;
-
 const MODE_SLASH = 0;
 const MODE_TEXT = 1;
 const MODE_WHITESPACE = 3;
@@ -41,7 +30,7 @@ export const evaluate = (h, current, fields) => {
 		else if (code === CHILD_RECURSE) {
 			args.push(evaluate(h, value, fields));
 		}
-		else {
+		else { 	// code === CHILD_APPEND
 			args.push(value);
 		}
 	}
@@ -54,10 +43,10 @@ export const evaluate = (h, current, fields) => {
 export const build = (statics) => {
 	let mode = MODE_TEXT;
 	let buffer = '';
-	let quote = -1;
+	let quote = '';
 	let fallbackPropValue = true;
-	let charCode, propName;
 	let current = [];
+	let char, propName;
 
 	const commit = field => {
 		if (mode === MODE_TEXT) {
@@ -72,7 +61,7 @@ export const build = (statics) => {
 		else if (mode === MODE_WHITESPACE && buffer === '...') {
 			current.push(field, 0, PROPS_ASSIGN);
 		}
-		else if (mode === MODE_ATTRIBUTE || mode === MODE_WHITESPACE) {
+		else if (mode) {	// mode === MODE_ATTRIBUTE || mode === MODE_WHITESPACE
 			if (mode === MODE_WHITESPACE) {
 				propName = buffer;
 				buffer = '';
@@ -88,73 +77,72 @@ export const build = (statics) => {
 
 	for (let i=0; i<statics.length; i++) {
 		if (i) {
-			if (mode === MODE_TEXT) commit();
+			if (mode === MODE_TEXT) {
+				commit();
+			}
 			commit(i);
 		}
 
 		for (let j=0; j<statics[i].length; j++) {
-			charCode = statics[i].charCodeAt(j);
+			char = statics[i].charAt(j);
 
 			if (mode === MODE_TEXT) {
-				if (charCode === TAG_START) {
+				if (char === '<') {
 					// commit buffer
 					commit();
 					current = [current];
 					mode = MODE_TAGNAME;
 					continue;
 				}
 			}
-			else {
-				if (quote === charCode) {
-					quote = -1;
-					continue;
-				}
-				
-				if (quote < 0) {
-					switch (charCode) {
-						case QUOTE_SINGLE:
-						case QUOTE_DOUBLE:
-							quote = charCode;
-							continue;
-						case TAG_END:
-							commit();
+			else if (quote === char) {
+				quote = '';
+				continue;
+			}
+			else if (!quote) {
+				switch (char) {
+					case '"':
+					case "'":
+						quote = char;
+						continue;
+					case '>':
+						commit();
 
-							if (!mode) {
-								if (current.length === 1) {
-									current = current[0];
-								}
-								current[0].push(0, current, CHILD_RECURSE);
+						if (!mode) {
+							if (current.length === 1) {
 								current = current[0];
 							}
-							mode = MODE_TEXT;
-							continue;
-						case EQUALS:
-							if (mode) {
-								mode = MODE_ATTRIBUTE;
-								propName = buffer;
-								buffer = fallbackPropValue = '';
-							}
-							continue;
-						case SLASH:
+							current[0].push(0, current, CHILD_RECURSE);
+							current = current[0];
+						}
+						mode = MODE_TEXT;
+						continue;
+					case '=':
+						if (mode) {
+							mode = MODE_ATTRIBUTE;
+							propName = buffer;
+							buffer = fallbackPropValue = '';
+						}
+						continue;
+					case '/':
+						commit();
+						mode = MODE_SLASH;
+						continue;
+					case '\t':
+					case '\r':
+					case '\n':
+					case ' ':
+						if (mode) {
+							// <a disabled>
 							commit();
-							mode = MODE_SLASH;
-							continue;
-						case TAB:
-						case NEWLINE:
-						case RETURN:
-						case SPACE:
-							if (mode) {
-								// <a disabled>
-								commit();
-								mode = MODE_WHITESPACE;
-							}
-							continue;
-					}
+							mode = MODE_WHITESPACE;
+						}
+						continue;
 				}
 			}
-			buffer += statics[i].charAt(j);
+			buffer += char;
 		}
 	}
 	commit();
-	return current[1];
+	return current;
 };

src/index.mjs

@@ -17,9 +17,15 @@ const CACHE = {};
 
 export default function html(statics) {
 	let key = '.';
-	for (let i=0; i<statics.length; i++) key += statics[i].length + ',' + statics[i];
+	for (let i=0; i<statics.length; i++) {
+		key += statics[i].length + ',' + statics[i];
+	}
 	const tpl = CACHE[key] || (CACHE[key] = build(statics));
 
-	// eslint-disable-next-line prefer-rest-params
-	return tpl && evaluate(this, tpl, arguments);
+	const res = [];
+	for (let i=1; i<tpl.length; i+=3) {
+		// eslint-disable-next-line prefer-rest-params
+		res.push(evaluate(this, tpl[i], arguments));
+	}
+	return res.length > 1 ? res : res[0];
 }

test/index.test.mjs

@@ -26,6 +26,14 @@ describe('htm', () => {
 		expect(html`<div/>`).toEqual({ tag: 'div', props: null, children: [] });
 		expect(html`<span />`).toEqual({ tag: 'span', props: null, children: [] });
 	});
+	
+	test('multiple root elements', () => {
+		expect(html`<a /><b></b><c><//>`).toEqual([
+			{ tag: 'a', props: null, children: [] },
+			{ tag: 'b', props: null, children: [] },
+			{ tag: 'c', props: null, children: [] }
+		]);
+	});
 
 	test('single dynamic tag name', () => {
 		expect(html`<${'foo'} />`).toEqual({ tag: 'foo', props: null, children: [] });