Merge branch 'master' into perf-test-harness

Author: developit

.gitignore

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

README.md

@@ -41,7 +41,7 @@ Here's some ergonomic features you get for free that aren't present in JSX:
 - **No transpiler necessary**
 - HTML's optional quotes: `<div class=foo>`
 - Component end-tags: `<${Footer}>footer content<//>`
-- Syntax highlighting and language support via the [lit-html VSCode extension].
+- Syntax highlighting and language support via the [lit-html VSCode extension] and [vim-jsx-pretty plugin].
 
 ## Installation
 
@@ -219,6 +219,7 @@ As of 2.0.0, `htm` is stable, well-tested and ready for production use.
 [lit-html]: https://github.com/Polymer/lit-html
 [babel-plugin-htm]: https://github.com/developit/htm/tree/master/packages/babel-plugin-htm
 [lit-html VSCode extension]: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
+[vim-jsx-pretty plugin]: https://github.com/MaxMEllon/vim-jsx-pretty
 [vhtml]: https://github.com/developit/vhtml
 [jsxobj]: https://github.com/developit/jsxobj
 [hyperscript]: https://github.com/hyperhype/hyperscript

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				targets: {
+					node: 'current'
+				}
+			}
+		]
+	]
+};

package.json

@@ -6,24 +6,29 @@
   "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",
+    "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",
     "test": "eslint src/**/*.mjs test/**/*.mjs && npm run build && jest test",
     "test:perf": "v8 test/__perftest.mjs",
     "release": "npm t && git commit -am \"$npm_package_version\" && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
   "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": {
@@ -40,16 +45,12 @@
       "js"
     ],
     "moduleNameMapper": {
+      "^babel-plugin-transform-jsx-to-htm$": "<rootDir>/packages/babel-plugin-transform-jsx-to-htm/index.mjs",
       "^babel-plugin-htm$": "<rootDir>/packages/babel-plugin-htm/index.mjs",
       "^htm$": "<rootDir>/src/index.mjs",
       "^htm/preact$": "<rootDir>/src/integrations/preact/index.mjs"
     }
   },
-  "babel": {
-    "presets": [
-      "env"
-    ]
-  },
   "repository": "developit/htm",
   "keywords": [
     "Hyperscript Tagged Markup",
@@ -67,13 +68,16 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.1.6",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.1.0",
     "babel-preset-env": "^1.7.0",
     "eslint": "^5.2.0",
     "eslint-config-developit": "^1.1.1",
-    "jest": "^23.4.2",
-    "microbundle": "^0.8.3",
-    "preact": "^8.2.9"
+    "jest": "^24.1.0",
+    "microbundle": "^0.10.1",
+    "preact": "^8.4.2"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "peerDependencies": {
+    "preact": "*"
+  }
 }

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);
 				}
 			}
 		}

packages/babel-plugin-htm/package.json

@@ -32,6 +32,6 @@
 		"htm": "^2.0.0"
 	},
 	"devDependencies": {
-		"microbundle": "^0.8.3"
+		"microbundle": "^0.10.1"
 	}
 }

packages/babel-plugin-transform-jsx-to-htm/README.md

@@ -0,0 +1,79 @@
+# babel-plugin-transform-jsx-to-htm
+
+This plugin converts JSX into Tagged Templates that work with [htm].
+
+```js
+// INPUT:
+const Foo = () => <h1>Hello</h1>
+
+// OUTPUT:
+const Foo = () => html`<h1>Hello</h1>`
+```
+
+## Installation
+
+Grab it from npm:
+
+```sh
+npm i -D babel-plugin-transform-jsx-to-htm
+```
+
+... then add it to your Babel config (eg: `.babelrc`):
+
+```js
+"plugins": [
+  "babel-plugin-transform-jsx-to-htm"
+]
+```
+
+## Options
+
+The following options are available:
+
+| Option | Type    | Default  | Description
+|--------|---------|----------|------------
+| `tag`  | String  | `"html"` | The "tag" function to prefix [Tagged Templates] with.
+| `import`  | `false`\|String\|Object  | `false` | Auto-import a tag function, off by default.<br>_See [Auto-importing a tag function](#auto-importing-the-tag) for an example._
+
+Options are passed to a Babel plugin using a nested Array:
+
+```js
+"plugins": [
+  ["babel-plugin-transform-jsx-to-htm", {
+    "tag": "$$html"
+  }]
+]
+```
+
+## Auto-importing the tag
+
+Want to automatically import `html` into any file that uses JSX?
+Just use the `import` option:
+
+```js
+"plugins": [
+  ["babel-plugin-transform-jsx-to-htm", {
+    "tag": "$$html",
+    "import": {
+      // the module to import:
+      "module": "htm/preact",
+      // a named export to use from that module:
+      "export": "html"
+    }
+  }]
+]
+```
+
+The above will produce files that look like:
+
+```js
+import { html as $$html } from 'htm/preact';
+
+export default $$html`<h1>hello</h1>`
+```
+
+### License
+
+Apache 2
+
+[htm]: https://github.com/developit/htm