Merge branch 'master' into h-component-test

Author: robertknight

README.md

@@ -47,6 +47,7 @@
 [![OpenCollective Sponsors](https://opencollective.com/preact/sponsors/badge.svg)](#sponsors)
 [![travis](https://travis-ci.org/developit/preact.svg?branch=master)](https://travis-ci.org/developit/preact)
 [![coveralls](https://img.shields.io/coveralls/developit/preact/master.svg)](https://coveralls.io/github/developit/preact)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/preact/dist/preact.min.js?compression=gzip)](https://unpkg.com/preact/dist/preact.min.js)
 
 Preact supports modern browsers and IE9+:
 
@@ -82,6 +83,7 @@ Preact supports modern browsers and IE9+:
 - [**Color Picker**](https://colors.now.sh) _([Github Project](https://github.com/lukeed/colors-app))_ :art:
 - [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) _([Github Project](https://github.com/vaneenige/rainbow-explorer/))_ :rainbow:
 - [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([Github Project](https://github.com/vaneenige/offline-gallery/))_ :balloon:
+- [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([Github Project](https://github.com/vaneenige/periodic-weather/))_ :sunny:
 
 ## Libraries & Add-ons
 
@@ -98,9 +100,6 @@ Preact supports modern browsers and IE9+:
 - :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates)
 - :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX
 - :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline).
-- :metal: [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.
-- :white_square_button: [**preact-mdl**](https://git.io/preact-mdl): Use [MDL](https://getmdl.io) as Preact components
-- :rocket: [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)
 - :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_
 - :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword
 - :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements
@@ -109,6 +108,17 @@ Preact supports modern browsers and IE9+:
 - :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact
 - :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events
 
+#### UI Component Libraries
+
+> Want to prototype something or speed up your development? Try one of these toolkits:
+
+- [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://prateekbh.github.io/preact-material-components/))
+- [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo))
+- [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library.
+- [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com)
+- [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact
+
+
 ---
 
 ## Getting Started
@@ -294,18 +304,23 @@ class Foo extends Component {
 
 While this achieves much better runtime performance, it's still a lot of unnecessary code to wire up state to UI.
 
-Fortunately there is a solution, in the form of `linkState()`. Calling `component.linkState('text')` returns a function that accepts an Event and uses it's associated value to update the given property in your component's state. Calls to linkState() with the same state property are cached, so there is no performance penalty.  Here is the previous example rewritten using _Linked State_:
+Fortunately there is a solution, in the form of a module called [linkstate](https://github.com/developit/linkstate). Calling `linkState(component, 'text')` returns a function that accepts an Event and uses it's associated value to update the given property in your component's state. Calls to `linkState()` with the same arguments are cached, so there is no performance penalty.  Here is the previous example rewritten using _Linked State_:
 
 ```js
+import linkState from 'linkstate';
+
 class Foo extends Component {
 	render({ }, { text }) {
-		return <input value={text} onInput={this.linkState('text')} />;
+		return <input value={text} onInput={linkState(this, 'text')} />;
 	}
 }
 ```
 
 Simple and effective. It handles linking state from any input type, or an optional second parameter can be used to explicitly provide a keypath to the new state value.
 
+> **Note:** In Preact 7 and prior, `linkState()` was built right into Component. In 8.0, it was moved to a separate module. You can restore the 7.x behavior by using linkstate as a polyfill - see [the linkstate docs](https://github.com/developit/linkstate#usage).
+
+
 
 ## Examples
 

package.json

@@ -27,7 +27,9 @@
     "lint": "eslint devtools src test",
     "prepublish": "npm run build",
     "smart-release": "npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
-    "release": "cross-env npm run smart-release"
+    "release": "cross-env npm run smart-release",
+    "postinstall": "npm run -s donate",
+    "donate": "echo \"\n   *** Thanks for downloading Preact! ***\nPlease consider donating to our open collective\n\n => https://opencollective.com/preact/donate\n\""
   },
   "eslintConfig": {
     "extends": "./config/eslint-config.js"
@@ -102,7 +104,7 @@
     "sinon-chai": "^2.8.0",
     "typescript": "^2.2.2",
     "uglify-js": "^2.7.5",
-    "webpack": "^1.13.1"
+    "webpack": "^2.4.1"
   },
   "greenkeeper": {
     "ignore": [

src/dom/index.js

@@ -18,7 +18,8 @@ export function createNode(nodeName, isSvg) {
  *	@param {Element} node		The node to remove
  */
 export function removeNode(node) {
-	if (node.parentNode) node.parentNode.removeChild(node);
+	let parentNode = node.parentNode;
+	if (parentNode) parentNode.removeChild(node);
 }
 
 

src/h.js

@@ -25,7 +25,7 @@ export function h(nodeName, attributes) {
 			for (i=child.length; i--; ) stack.push(child[i]);
 		}
 		else {
-			if (child===true || child===false) child = null;
+			if (typeof child==='boolean') child = null;
 
 			if ((simple = typeof nodeName!=='function')) {
 				if (child==null) child = '';

src/preact.d.ts

@@ -384,6 +384,7 @@ declare namespace JSX {
 		// Form Events
 		onChange?:GenericEventHandler;
 		onInput?:GenericEventHandler;
+		onSearch?:GenericEventHandler;
 		onSubmit?:GenericEventHandler;
 
 		// Keyboard Events

src/vdom/diff.js

@@ -65,12 +65,12 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
 	let out = dom,
 		prevSvgMode = isSvgMode;
 
-	// empty values (null & undefined) render as empty Text nodes
-	if (vnode==null) vnode = '';
+	// empty values (null, undefined, booleans) render as empty Text nodes
+	if (vnode==null || typeof vnode==='boolean') vnode = '';
 
 
-	// Fast case: Strings create/update Text nodes.
-	if (typeof vnode==='string') {
+	// Fast case: Strings & Numbers create/update Text nodes.
+	if (typeof vnode==='string' || typeof vnode==='number') {
 
 		// update if it's already a Text node:
 		if (dom && dom.splitText!==undefined && dom.parentNode && (!dom._component || componentRoot)) {
@@ -94,18 +94,20 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
 
 
 	// If the VNode represents a Component, perform a component diff:
-	if (typeof vnode.nodeName==='function') {
+	let vnodeName = vnode.nodeName;
+	if (typeof vnodeName==='function') {
 		return buildComponentFromVNode(dom, vnode, context, mountAll);
 	}
 
 
 	// Tracks entering and exiting SVG namespace when descending through the tree.
-	isSvgMode = vnode.nodeName==='svg' ? true : vnode.nodeName==='foreignObject' ? false : isSvgMode;
+	isSvgMode = vnodeName==='svg' ? true : vnodeName==='foreignObject' ? false : isSvgMode;
 
 
 	// If there's no existing element or it's the wrong type, create a new one:
-	if (!dom || !isNamedNode(dom, String(vnode.nodeName))) {
-		out = createNode(String(vnode.nodeName), isSvgMode);
+	vnodeName = String(vnodeName);
+	if (!dom || !isNamedNode(dom, vnodeName)) {
+		out = createNode(vnodeName, isSvgMode);
 
 		if (dom) {
 			// move children into the replacement node

test/browser/render.js

@@ -89,6 +89,46 @@ describe('render()', () => {
 		expect(scratch.firstChild).to.have.property('innerHTML', ',,,0,NaN');
 	});
 
+	it('should not render null', () => {
+		render(null, scratch);
+		expect(scratch.innerHTML).to.equal('');
+	});
+
+	it('should not render undefined', () => {
+		render(undefined, scratch);
+		expect(scratch.innerHTML).to.equal('');
+	});
+
+	it('should not render boolean true', () => {
+		render(true, scratch);
+		expect(scratch.innerHTML).to.equal('');
+	});
+
+	it('should not render boolean false', () => {
+		render(false, scratch);
+		expect(scratch.innerHTML).to.equal('');
+	});
+
+	it('should render NaN as text content', () => {
+		render(NaN, scratch);
+		expect(scratch.innerHTML).to.equal('NaN');
+	});
+
+	it('should render numbers (0) as text content', () => {
+		render(0, scratch);
+		expect(scratch.innerHTML).to.equal('0');
+	});
+
+	it('should render numbers (42) as text content', () => {
+		render(42, scratch);
+		expect(scratch.innerHTML).to.equal('42');
+	});
+
+	it('should render strings as text content', () => {
+		render('Testing, huh! How is it going?', scratch);
+		expect(scratch.innerHTML).to.equal('Testing, huh! How is it going?');
+	});
+
 	it('should clear falsey attributes', () => {
 		let root = render((
 			<div anull="anull" aundefined="aundefined" afalse="afalse" anan="aNaN" a0="a0" />

test/karma.conf.js

@@ -111,32 +111,33 @@ module.exports = function(config) {
 			devtool: 'inline-source-map',
 			module: {
 				/* Transpile source and test files */
-				preLoaders: [
+				rules: [
 					{
+						enforce: 'pre',
 						test: /\.jsx?$/,
 						exclude: /node_modules/,
-						loader: 'babel',
-						query: {
+						loader: 'babel-loader',
+						options: {
 							loose: 'all',
 							blacklist: ['es6.tailCall'],
 							comments: false,
 							compact: true
 						}
-					}
-				],
-				/* Only Instrument our source files for coverage */
-				loaders: [].concat( coverage ? {
-					test: /\.jsx?$/,
-					loader: 'isparta',
-					include: /src/
-				} : [])
+					},
+					/* Only Instrument our source files for coverage */
+					coverage ? {
+						test: /\.jsx?$/,
+						loader: 'isparta-loader',
+						include: /src/
+					} : {}
+				]
 			},
 			resolve: {
 				// The React DevTools integration requires preact as a module
 				// rather than referencing source files inside the module
 				// directly
 				alias: { preact: '../src/preact' },
-				modulesDirectories: [__dirname, 'node_modules']
+				modules: [__dirname, 'node_modules']
 			},
 			plugins: [
 				new webpack.DefinePlugin({