Implement HTM without eval

packages/babel-plugin-htm/index.mjs

@@ -14,6 +14,8 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 	const useBuiltIns = options.useBuiltIns;
 	const inlineVNodes = options.monomorphic || pragma===false;
 
+	const symbol = Symbol();
+
 	function dottedIdentifier(keypath) {
 		const path = keypath.split('.');
 		let out;
@@ -73,7 +75,26 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 		return t.callExpression(pragma, [tag, props].concat(children));
 	}
 
+	function flatten(props, result = []) {
+		const { [symbol]: head, ...tail } = props;
+		if (head) head.forEach(obj => {
+			flatten(obj, result);
+		});
+		if (Object.keys(tail).length > 0) {
+			result.push(tail);
+		}
+		return result;
+	}
+
 	function spreadNode(args, state) {
+		if (args.length > 0 && t.isNode(args[0])) {
+			args.unshift({});
+		}
+
+		// 'Object.assign(x)', can be collapsed to 'x'.
+		if (args.length === 1) {
+			return propsNode(args[0]);
+		}
 		// 'Object.assign({}, x)', can be collapsed to 'x'.
 		if (args.length === 2 && !t.isNode(args[0]) && Object.keys(args[0]).length === 0) {
 			return propsNode(args[1]);
@@ -83,8 +104,6 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 	}
 
 	function propsNode(props) {
-		if (props == null) return t.nullLiteral();
-
 		return t.isNode(props) ? props : t.objectExpression(
 			Object.keys(props).map(key => {
 				let value = props[key];
@@ -111,7 +130,7 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 			return t.isNode(child) ? child : transform(child, state);
 		}
 		const newTag = typeof tag === 'string' ? t.stringLiteral(tag) : tag;
-		const newProps = !Array.isArray(props) ? propsNode(props) : spreadNode(props, state);
+		const newProps = props ? spreadNode(flatten(props), state) : t.nullLiteral();
 		const newChildren = t.arrayExpression(children.map(childMapper));
 		return createVNode(newTag, newProps, newChildren);
 	}
@@ -125,7 +144,7 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 	function treeify(statics, expr) {
 		const assign = Object.assign;
 		try {
-			Object.assign = function(...objs) {	return objs; };
+			Object.assign = function(...objs) {	return { [symbol]: objs }; };
 			return html(statics, ...expr);
 		}
 		finally {
@@ -147,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

@@ -0,0 +1,136 @@
+const TAG_SET = 1;
+const PROPS_SET = 2;
+const PROPS_ASSIGN = 3;
+const CHILD_RECURSE = 4;
+const CHILD_APPEND = 0;
+
+const MODE_SLASH = 0;
+const MODE_TEXT = 1;
+const MODE_WHITESPACE = 2;
+const MODE_TAGNAME = 3;
+const MODE_ATTRIBUTE = 4;
+
+export const evaluate = (h, current, fields, args) => {
+	for (let i = 1; i < current.length; i++) {
+		const field = current[i++];
+		const value = typeof field === 'number' ? fields[field] : field;
+
+		if (current[i] === TAG_SET) {
+			args[0] = value;
+		}
+		else if (current[i] === PROPS_SET) {
+			(args[1] = args[1] || {})[current[++i]] = value;
+		}
+		else if (current[i] === PROPS_ASSIGN) {
+			args[1] = Object.assign(args[1] || {}, value);
+		}
+		else if (current[i]) {
+			// code === CHILD_RECURSE
+			// eslint-disable-next-line prefer-spread
+			args.push(h.apply(null, evaluate(h, value, fields, ['', null])));
+		}
+		else {
+			// code === CHILD_APPEND
+			args.push(value);
+		}
+	}
+
+	return args;
+};
+
+
+export const build = (statics) => {
+	let mode = MODE_TEXT;
+	let buffer = '';
+	let quote = '';
+	let current = [0];
+	let char, propName;
+
+	const commit = field => {
+		if (mode === MODE_TEXT && (field || (buffer = buffer.replace(/^\s*\n\s*|\s*\n\s*$/g,'')))) {
+			current.push(field || buffer, CHILD_APPEND);
+		}
+		else if (mode === MODE_TAGNAME && (field || buffer)) {
+			current.push(field || buffer, TAG_SET);
+			mode = MODE_WHITESPACE;
+		}
+		else if (mode === MODE_WHITESPACE && buffer === '...' && field) {
+			current.push(field, PROPS_ASSIGN);
+		}
+		else if (mode === MODE_WHITESPACE && buffer && !field) {
+			current.push(true, PROPS_SET, buffer);
+		}
+		else if (mode === MODE_ATTRIBUTE && propName) {
+			current.push(field || buffer, PROPS_SET, propName);
+			propName = '';
+		}
+		buffer = '';
+	};
+
+	for (let i=0; i<statics.length; i++) {
+		if (i) {
+			if (mode === MODE_TEXT) {
+				commit();
+			}
+			commit(i);
+		}
+
+		for (let j=0; j<statics[i].length; j++) {
+			char = statics[i][j];
+
+			if (mode === MODE_TEXT) {
+				if (char === '<') {
+					// commit buffer
+					commit();
+					current = [current];
+					mode = MODE_TAGNAME;
+				}
+				else {
+					buffer += char;
+				}
+			}
+			else if (quote) {
+				if (char === quote) {
+					quote = '';
+				}
+				else {
+					buffer += char;
+				}
+			}
+			else if (char === '"' || char === "'") {
+				quote = char;
+			}
+			else if (char === '>') {
+				commit();
+				mode = MODE_TEXT;
+			}
+			else if (!mode) {
+				// Ignore everything until the tag ends
+			}
+			else if (char === '=') {
+				mode = MODE_ATTRIBUTE;
+				propName = buffer;
+				buffer = '';
+			}
+			else if (char === '/') {
+				commit();
+				if (mode === MODE_TAGNAME) {
+					current = current[0];
+				}
+				mode = current;
+				(current = current[0]).push(mode, CHILD_RECURSE);
+				mode = MODE_SLASH;
+			}
+			else if (char === ' ' || char === '\t' || char === '\n' || char === '\r') {
+				// <a disabled>
+				commit();
+				mode = MODE_WHITESPACE;
+			}
+			else {
+				buffer += char;
+			}
+		}
+	}
+	commit();
+	return current;
+};