Merge branch 'master' into comment-support

Author: jviide

README.md

@@ -70,18 +70,38 @@ import { html, render } from 'https://unpkg.com/htm/preact/standalone.mjs'
 
 ## Usage
 
+If you're using Preact or React, we've included off-the-shelf bindings to make your life easier.
+They also have the added benefit of sharing a template cache across all modules.
+
+```js
+import { render } from 'preact'; 
+import { html } from 'htm/preact';
+render(html`<a href="/">Hello!</a>`, document.body);
+```
+
+Similarly, for React:
+
+```js
+import ReactDOM from 'react-dom'; 
+import { html } from 'htm/react';
+ReactDOM.render(html`<a href="/">Hello!</a>`, document.body);
+```
+
+### Advanced Usage
+
 Since `htm` is a generic library, we need to tell it what to "compile" our templates to.
+You can bind `htm` to any function of the form `h(type, props, ...children)` _([hyperscript])_.
+This function can return anything - `htm` never looks at the return value.
 
-The target should be a function of the form `h(type, props, ...children)` _([hyperscript])_, and can return anything.
+Here's an example `h()` function that returns tree nodes:
 
 ```js
-// this is our hyperscript function. for now, it just returns a description object.
 function h(type, props, ...children) {
   return { type, props, children };
 }
 ```
 
-To use that `h()` function, we need to create our own `html` tag function by binding `htm` to our `h()` function:
+To use our custom `h()` function, we need to create our own `html` tag function by binding `htm` to our `h()` function:
 
 ```js
 import htm from 'htm';

packages/babel-plugin-htm/index.mjs

@@ -1,4 +1,4 @@
-import htm from 'htm';
+import { build, treeify } from '../../src/build.mjs';
 
 /**
  * @param {Babel} babel
@@ -7,15 +7,15 @@ import htm from 'htm';
  * @param {string} [options.tag=html]  The tagged template "tag" function name to process.
  * @param {boolean} [options.monomorphic=false]  Output monomorphic inline objects instead of using String literals.
  * @param {boolean} [options.useBuiltIns=false]  Use the native Object.assign instead of trying to polyfill it.
+ * @param {boolean} [options.useNativeSpread=false]  Use the native { ...a, ...b } syntax for prop spreads.
  * @param {boolean} [options.variableArity=true] If `false`, always passes exactly 3 arguments to the pragma function.
  */
 export default function htmBabelPlugin({ types: t }, options = {}) {
 	const pragma = options.pragma===false ? false : dottedIdentifier(options.pragma || 'h');
 	const useBuiltIns = options.useBuiltIns;
+	const useNativeSpread = options.useNativeSpread;
 	const inlineVNodes = options.monomorphic || pragma===false;
 
-	const symbol = Symbol();
-	
 	function dottedIdentifier(keypath) {
 		const path = keypath.split('.');
 		let out;
@@ -31,12 +31,32 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 		const end = parts.pop() || '';
 		return new RegExp(parts.join('/'), end);
 	}
-  
+
 	function propertyName(key) {
-		if (key.match(/(^\d|[^a-z0-9_$])/i)) return t.stringLiteral(key);
-		return t.identifier(key);
+		if (t.isValidIdentifier(key)) {
+			return t.identifier(key);
+		}
+		return t.stringLiteral(key);
 	}
-  
+
+	function objectProperties(obj) {
+		return Object.keys(obj).map(key => {
+			const values = obj[key].map(valueOrNode =>
+				t.isNode(valueOrNode) ? valueOrNode : t.valueToNode(valueOrNode)
+			);
+
+			let node = values[0];
+			if (values.length > 1 && !t.isStringLiteral(node) && !t.isStringLiteral(values[1])) {
+				node = t.binaryExpression('+', t.stringLiteral(''), node);
+			}
+			values.slice(1).forEach(value => {
+				node = t.binaryExpression('+', node, value);
+			});
+
+			return t.objectProperty(propertyName(key), node);
+		});
+	}
+
 	function stringValue(str) {
 		if (options.monomorphic) {
 			return t.objectExpression([
@@ -75,18 +95,10 @@ 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) {
+			return t.nullLiteral();
+		}
 		if (args.length > 0 && t.isNode(args[0])) {
 			args.unshift({});
 		}
@@ -99,28 +111,31 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 		if (args.length === 2 && !t.isNode(args[0]) && Object.keys(args[0]).length === 0) {
 			return propsNode(args[1]);
 		}
+
+		if (useNativeSpread) {
+			const properties = [];
+			args.forEach(arg => {
+				if (t.isNode(arg)) {
+					properties.push(t.spreadElement(arg));
+				}
+				else {
+					properties.push(...objectProperties(arg));
+				}
+			});
+			return t.objectExpression(properties);
+		}
+		
 		const helper = useBuiltIns ? dottedIdentifier('Object.assign') : state.addHelper('extends');
 		return t.callExpression(helper, args.map(propsNode));
 	}
 
 	function propsNode(props) {
-		return t.isNode(props) ? props : t.objectExpression(
-			Object.keys(props).map(key => {
-				let value = props[key];
-				if (typeof value==='string') {
-					value = t.stringLiteral(value);
-				}
-				else if (typeof value==='boolean') {
-					value = t.booleanLiteral(value);
-				}
-				return t.objectProperty(propertyName(key), value);
-			})
-		);
+		return t.isNode(props) ? props : t.objectExpression(objectProperties(props));
 	}
 
 	function transform(node, state) {
 		if (node === undefined) return t.identifier('undefined');
-		if (node == null) return t.nullLiteral();
+		if (node === null) return t.nullLiteral();
 
 		const { tag, props, children } = node;
 		function childMapper(child) {
@@ -130,27 +145,10 @@ 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 = props ? spreadNode(flatten(props), state) : t.nullLiteral();
+		const newProps = spreadNode(props, state);
 		const newChildren = t.arrayExpression(children.map(childMapper));
 		return createVNode(newTag, newProps, newChildren);
 	}
-  
-	function h(tag, props, ...children) {
-		return { tag, props, children };
-	}
-	
-	const html = htm.bind(h);
-	
-	function treeify(statics, expr) {
-		const assign = Object.assign;
-		try {
-			Object.assign = function(...objs) {	return { [symbol]: objs }; };
-			return html(statics, ...expr);
-		}
-		finally {
-			Object.assign = assign;
-		}
-	}
 
 	// The tagged template tag function name we're looking for.
 	// This is static because it's generally assigned via htm.bind(h),
@@ -165,7 +163,7 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 					const statics = path.node.quasi.quasis.map(e => e.value.raw);
 					const expr = path.node.quasi.expressions;
 
-					const tree = treeify(statics, expr);
+					const tree = treeify(build(statics), expr);
 					const node = !Array.isArray(tree)
 						? transform(tree, state)
 						: t.arrayExpression(tree.map(root => transform(root, state)));
@@ -174,4 +172,4 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 			}
 		}
 	};
-}
+}