Merge branch 'master' into master

Author: theKashey

README.md

@@ -64,15 +64,15 @@ Preact supports modern browsers and IE9+:
 #### Real-World Apps
 
 - [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_
-- [**Play.cash**](https://play.cash) :notes:
+- [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_
+- [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_
 - [**ESBench**](http://esbench.com) is built using Preact.
 - [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_
 - [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach:
 - [**TodoMVC**](https://preact-todomvc.surge.sh) _([GitHub Project](https://github.com/developit/preact-todomvc))_
 - [**OSS.Ninja**](https://oss.ninja) _([GitHub Project](https://github.com/developit/oss.ninja))_
 - [**GuriVR**](https://gurivr.com) _([GitHub Project](https://github.com/opennewslabs/guri-vr))_
 - [**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:
 - [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_
@@ -96,7 +96,7 @@ Preact supports modern browsers and IE9+:
 
 - [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([GitHub Project](https://github.com/developit/preact-boilerplate))_ :zap:
 - [**Preact Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100:
-- [**Preact PWA**](https://preact-pwa.appspot.com/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:
+- [**Preact PWA**](https://preact-pwa-yfxiijbzit.now.sh/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger:
 - [**Parcel + Preact + Unistore Starter**](https://github.com/hwclass/parcel-preact-unistore-starter)
 - [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny:
 - [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star:
@@ -138,6 +138,7 @@ Preact supports modern browsers and IE9+:
 - :electric_plug: [**preact-routlet**](https://github.com/k1r0s/preact-routlet): Simple `Component Driven` Routing for Preact using ES7 Decorators
 - :fax: [**preact-bind-group**](https://github.com/k1r0s/preact-bind-group): Preact Forms made easy, Group Events into a Single Callback
 - :hatching_chick: [**preact-habitat**](https://github.com/zouhir/preact-habitat): Declarative Preact widgets renderer in any CMS or DOM host ([demo](https://codepen.io/zouhir/pen/brrOPB)).
+- :tada: [**proppy-preact**](https://github.com/fahad19/proppy): Functional props composition for Preact components
 
 #### UI Component Libraries
 
@@ -250,8 +251,8 @@ import { h, render, Component } from 'preact';
 
 class Clock extends Component {
 	render() {
-		let time = new Date().toLocaleTimeString();
-		return <span>{ time }</span>;
+		let time = new Date();
+		return <time datetime={time.toISOString()}>{ time.toLocaleTimeString() }</time>;
 	}
 }
 

config/rollup.config.js

@@ -27,6 +27,7 @@ export default {
 			sourceMap: true,
 			exclude: 'node_modules/**',
 			babelrc: false,
+			comments: false,
 			presets: [
 				['env', {
 					modules: false,

config/rollup.config.esm.js config/rollup.config.module.js

@@ -2,7 +2,7 @@ import config from './rollup.config';
 
 // ES output
 config.output.format = 'es';
-config.output.file = 'dist/preact.esm.js';
+config.output.file = 'dist/preact.mjs';
 
 // remove memory() plugin
 config.plugins.splice(0, 1);

package.json

@@ -1,10 +1,10 @@
 {
   "name": "preact",
-  "version": "8.2.9",
+  "version": "8.3.0",
   "description": "Fast 3kb React alternative with the same modern API. Components & Virtual DOM.",
   "main": "dist/preact.js",
-  "jsnext:main": "dist/preact.esm.js",
-  "module": "dist/preact.esm.js",
+  "jsnext:main": "dist/preact.mjs",
+  "module": "dist/preact.mjs",
   "dev:main": "dist/preact.dev.js",
   "minified:main": "dist/preact.min.js",
   "types": "dist/preact.d.ts",
@@ -16,13 +16,13 @@
     "flow": "flow",
     "transpile:main": "rollup -c config/rollup.config.js",
     "transpile:devtools": "rollup -c config/rollup.config.devtools.js",
-    "transpile:esm": "rollup -c config/rollup.config.esm.js",
+    "transpile:esm": "rollup -c config/rollup.config.module.js",
     "transpile:debug": "babel debug/ -o debug.js -s",
     "transpile": "npm-run-all transpile:main transpile:esm transpile:devtools transpile:debug",
     "optimize": "uglifyjs dist/preact.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|normalizedNodeName|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/preact.js -p relative --in-source-map dist/preact.dev.js.map --source-map dist/preact.js.map",
     "minify": "uglifyjs dist/preact.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/preact.min.js -p relative --in-source-map dist/preact.js.map --source-map dist/preact.min.js.map",
     "strip:main": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.dev.js",
-    "strip:esm": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.esm.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.esm.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.esm.js",
+    "strip:esm": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.mjs && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.mjs",
     "strip": "npm-run-all strip:main strip:esm",
     "size": "node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/preact.min.js",
     "test": "npm-run-all lint --parallel test:mocha test:karma test:ts test:flow test:size",

src/component.js

@@ -46,14 +46,18 @@ extend(Component.prototype, {
 
 	/**
 	 * Update component state and schedule a re-render.
-	 * @param {object} state A hash of state properties to update with new values
+	 * @param {object} state A dict of state properties to be shallowly merged
+	 * 	into the current state, or a function that will produce such a dict. The
+	 * 	function is called with the current state and props.
 	 * @param {() => void} callback A function to be called once component state is
 	 * 	updated
 	 */
 	setState(state, callback) {
-		let s = this.state;
-		if (!this.prevState) this.prevState = extend({}, s);
-		extend(s, typeof state==='function' ? state(s, this.props) : state);
+		if (!this.prevState) this.prevState = this.state;
+		this.state = extend(
+			extend({}, this.state),
+			typeof state === 'function' ? state(this.state, this.props) : state
+		);
 		if (callback) this._renderCallbacks.push(callback);
 		enqueueRender(this);
 	},

src/dom/index.js

@@ -1,4 +1,5 @@
 import { IS_NON_DIMENSIONAL } from '../constants';
+import { applyRef } from '../util';
 import options from '../options';
 
 /**
@@ -70,8 +71,8 @@ export function setAccessor(node, name, old, value, isSvg) {
 		// ignore
 	}
 	else if (name==='ref') {
-		if (old) old(null);
-		if (value) value(node);
+		applyRef(old, null);
+		applyRef(value, node);
 	}
 	else if (name==='class' && !isSvg) {
 		node.className = value || '';

src/preact.d.ts

@@ -112,7 +112,7 @@ declare namespace preact {
 		...children: ComponentChildren[]
 	): VNode<any>;
 
-	function render(node: ComponentChild, parent: Element | Document, mergeWith?: Element): Element;
+	function render(node: ComponentChild, parent: Element | Document | ShadowRoot | DocumentFragment, mergeWith?: Element): Element;
 	function rerender(): void;
 	function cloneElement(element: JSX.Element, props: any): JSX.Element;
 
@@ -675,6 +675,7 @@ declare global {
 			optimum?: number;
 			pattern?: string;
 			placeholder?: string;
+			playsInline?: boolean;
 			poster?: string;
 			preload?: string;
 			radioGroup?: string;

src/preact.js

@@ -5,10 +5,15 @@ import { render } from './render';
 import { rerender } from './render-queue';
 import options from './options';
 
+function createRef() {
+	return {};
+}
+
 export default {
 	h,
 	createElement,
 	cloneElement,
+	createRef,
 	Component,
 	render,
 	rerender,
@@ -19,6 +24,7 @@ export {
 	h,
 	createElement,
 	cloneElement,
+	createRef,
 	Component,
 	render,
 	rerender,

src/render-queue.js

@@ -20,9 +20,8 @@ export function enqueueRender(component) {
 
 /** Rerender all enqueued dirty components */
 export function rerender() {
-	let p, list = items;
-	items = [];
-	while ( (p = list.pop()) ) {
+	let p;
+	while ( (p = items.pop()) ) {
 		if (p._dirty) renderComponent(p);
 	}
 }

src/util.js

@@ -10,6 +10,17 @@ export function extend(obj, props) {
 	return obj;
 }
 
+/** Invoke or update a ref, depending on whether it is a function or object ref.
+ *  @param {object|function} [ref=null]
+ *  @param {any} [value]
+ */
+export function applyRef(ref, value) {
+	if (ref!=null) {
+		if (typeof ref=='function') ref(value);
+		else ref.current = value;
+	}
+}
+
 /**
  * Call a function asynchronously, as soon as possible. Makes
  * use of HTML Promise to schedule the callback if available,

src/vdom/component-recycler.js

@@ -1,23 +1,11 @@
 import { Component } from '../component';
 
 /**
- * Retains a pool of Components for re-use, keyed on component name.
- * Note: since component names are not unique or even necessarily available,
- * these are primarily a form of sharding.
- * @type {Object.<string, Component[]>}
+ * Retains a pool of Components for re-use.
+ * @type {Component[]}
  * @private
  */
-const components = {};
-
-
-/**
- * Reclaim a component for later re-use by the recycler.
- * @param {Component} component The component to collect
- */
-export function collectComponent(component) {
-	let name = component.constructor.name;
-	(components[name] || (components[name] = [])).push(component);
-}
+export const recyclerComponents = [];
 
 
 /**
@@ -29,8 +17,7 @@ export function collectComponent(component) {
  * @returns {import('../component').Component}
  */
 export function createComponent(Ctor, props, context) {
-	let list = components[Ctor.name],
-		inst;
+	let inst, i = recyclerComponents.length;
 
 	if (Ctor.prototype && Ctor.prototype.render) {
 		inst = new Ctor(props, context);
@@ -43,15 +30,14 @@ export function createComponent(Ctor, props, context) {
 	}
 
 
-	if (list) {
-		for (let i=list.length; i--; ) {
-			if (list[i].constructor===Ctor) {
-				inst.nextBase = list[i].nextBase;
-				list.splice(i, 1);
-				break;
-			}
+	while (i--) {
+		if (recyclerComponents[i].constructor===Ctor) {
+			inst.nextBase = recyclerComponents[i].nextBase;
+			recyclerComponents.splice(i, 1);
+			return inst;
 		}
 	}
+
 	return inst;
 }
 

src/vdom/component.js

@@ -1,10 +1,10 @@
 import { SYNC_RENDER, NO_RENDER, FORCE_RENDER, ASYNC_RENDER, ATTR_KEY } from '../constants';
 import options from '../options';
-import { extend } from '../util';
+import { extend, applyRef } from '../util';
 import { enqueueRender } from '../render-queue';
 import { areComponentsEqual, getNodeProps } from './index';
 import { diff, mounts, diffLevel, flushMounts, recollectNodeTree, removeChildren } from './diff';
-import { createComponent, collectComponent } from './component-recycler';
+import { createComponent, recyclerComponents } from './component-recycler';
 import { removeNode } from '../dom/index';
 
 /**
@@ -52,7 +52,7 @@ export function setComponentProps(component, props, renderMode, context, mountAl
 		}
 	}
 
-	if (component.__ref) component.__ref(component);
+	applyRef(component.__ref, component);
 }
 
 
@@ -84,8 +84,8 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
 		rendered, inst, cbase;
 
 	if (component.constructor.getDerivedStateFromProps) {
-		previousState = extend({}, previousState);
-		component.state = extend(state, component.constructor.getDerivedStateFromProps(props, state));
+		state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
+		component.state = state;
 	}
 
 	// if updating
@@ -287,10 +287,10 @@ export function unmountComponent(component) {
 		component.nextBase = base;
 
 		removeNode(base);
-		collectComponent(component);
+		recyclerComponents.push(component);
 
 		removeChildren(base);
 	}
 
-	if (component.__ref) component.__ref(null);
+	applyRef(component.__ref, null);
 }

src/vdom/diff.js

@@ -4,6 +4,7 @@ import { buildComponentFromVNode } from './component';
 import { createNode, setAccessor } from '../dom/index';
 import { unmountComponent } from './component';
 import options from '../options';
+import { applyRef } from '../util';
 import { removeNode } from '../dom/index';
 
 /**
@@ -283,7 +284,7 @@ export function recollectNodeTree(node, unmountOnly) {
 	else {
 		// If the node's VNode had a ref function, invoke it with null here.
 		// (this is part of the React spec, and smart for unsetting references)
-		if (node[ATTR_KEY]!=null && node[ATTR_KEY].ref) node[ATTR_KEY].ref(null);
+		if (node[ATTR_KEY]!=null) applyRef(node[ATTR_KEY].ref, null);
 
 		if (unmountOnly===false || node[ATTR_KEY]==null) {
 			removeNode(node);

src/vnode.js

@@ -6,4 +6,4 @@
  * @property {string | number | undefined} key The key used to identify this VNode in a list
  * @property {object} attributes The properties of this VNode
  */
-export function VNode() {}
+export const VNode = function VNode() {};

test/browser/components.js

@@ -113,9 +113,9 @@ describe('Components', () => {
 
 	it('should clone components', () => {
 		function Comp () {}
-		let instance = <Comp/>;
+		let instance = <Comp a />;
 		let clone = cloneElement(instance);
-		expect(clone.prototype).to.equal(instance.prototype);
+		expect(clone).to.deep.equal(instance);
 	});
 
 	it('should render string', () => {