Merge branch 'master' into patch-1

Author: developit

README.md

@@ -153,6 +153,14 @@ console.log(html`
 // ]
 ```
 
+### Caching
+
+The default build of `htm` caches template strings, which means that it can return the same Javascript object at multiple points in the tree. If you don't want this behaviour, you have three options:
+
+* Change your `h` function to copy nodes when needed.
+* Add the code `this[0] = 3;` at the beginning of your `h` function, which disables caching of created elements.
+* Use `htm/mini`, which disables caching by default.
+
 ## Example
 
 Curious to see what it all looks like? Here's a working app!

packages/babel-plugin-transform-jsx-to-htm/index.mjs

@@ -4,12 +4,14 @@ import jsx from '@babel/plugin-syntax-jsx';
  * @param {Babel} babel
  * @param {object} [options]
  * @param {string} [options.tag='html']  The tagged template "tag" function name to produce.
+ * @param {boolean} [options.terse=false]  Use `<//>` for closing component tags
  * @param {string | boolean | object} [options.import=false]  Import the tag automatically
  */
 export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 	const tagString = options.tag || 'html';
 	const tag = dottedIdentifier(tagString);
 	const importDeclaration = tagImport(options.import || false);
+	const terse = options.terse === true;
 
 	function tagImport(imp) {
 		if (imp === false) {
@@ -117,7 +119,6 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 			for (let i = 0; i < children.length; i++) {
 				let child = children[i];
 				if (t.isStringLiteral(child)) {
-					// @todo - expose `whitespace: true` option?
 					escapeText(child.value);
 				}
 				else if (t.isJSXElement(child)) {
@@ -130,9 +131,14 @@ export default function jsxToHtmBabelPlugin({ types: t }, options = {}) {
 
 			if (!isFragment) {
 				if (isComponentName(name)) {
-					raw('</');
-					expr(name);
-					raw('>');
+					if (terse) {
+						raw('<//>');
+					}
+					else {
+						raw('</');
+						expr(name);
+						raw('>');
+					}
 				}
 				else {
 					raw('</');

src/build.mjs

@@ -19,13 +19,13 @@ const PROP_APPEND = MODE_PROP_APPEND;
 // convenient to analyze and transform (e.g. Babel plugins).
 // For example:
 // 	treeify(
-//		build'<div href="1${a}" ...${b}><${x} /></div>`,
+//		build`<div href="1${a}" ...${b}><${x} /></div>`,
 //		[X, Y, Z]
 //	)
 // returns:
 // 	{
 // 		tag: 'div',
-//		props: [ { href: ["1", X] },	Y ],
+//		props: [ { href: ["1", X] }, Y ],
 // 		children: [ { tag: Z, props: [], children: [] } ]
 // 	}
 export const treeify = (built, fields) => {