Merge pull request #62 from jviide/megamix

Implement HTM without eval, with optional mini version

Author: jviide

.gitignore

@@ -2,4 +2,5 @@ node_modules
 package-lock.json
 /preact
 dist
+mini
 yarn.lock

package.json

@@ -6,8 +6,9 @@
   "umd:main": "dist/htm.umd.js",
   "module": "dist/htm.mjs",
   "scripts": {
-    "build": "npm run -s build:main && npm run -s build:preact && npm run -s build:babel && npm run -s build:babel-transform-jsx",
+    "build": "npm run -s build:main && npm run -s build:mini && npm run -s build:preact && npm run -s build:babel && npm run -s build:babel-transform-jsx",
     "build:main": "microbundle src/index.mjs -f es,umd --no-sourcemap --target web && microbundle src/cjs.mjs -f iife --no-sourcemap --target web",
+    "build:mini": "microbundle src/index.mjs -o ./mini/index.js -f es,umd --no-sourcemap --target web --alias ./constants=./constants-mini && microbundle src/cjs.mjs -o ./mini/index.js -f iife --no-sourcemap --target web --alias ./constants=./constants-mini",
     "build:preact": "cd src/integrations/preact && npm run build",
     "build:babel": "cd packages/babel-plugin-htm && npm run build",
     "build:babel-transform-jsx": "cd packages/babel-plugin-transform-jsx-to-htm && npm run build",
@@ -16,14 +17,17 @@
   },
   "files": [
     "dist",
+    "mini",
     "preact",
     "src"
   ],
   "eslintConfig": {
     "extends": "developit",
     "rules": {
       "prefer-const": 0,
-      "no-fallthrough": 0
+      "prefer-spread": 0,
+      "prefer-rest-params": 0,
+      "func-style": 0
     }
   },
   "jest": {

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/constants-mini.mjs

@@ -0,0 +1 @@
+export const MINI = true;

src/constants.mjs

@@ -0,0 +1 @@
+export const MINI = false;