Merge 20d4bc6 into e5e6ce1

debug/src/constants.js

@@ -0,0 +1,3 @@
+export const ELEMENT_NODE = 1;
+export const DOCUMENT_NODE = 9;
+export const DOCUMENT_FRAGMENT_NODE = 11;

debug/src/debug.js

@@ -1,11 +1,31 @@
 import { checkPropTypes } from 'prop-types';
 import { getDisplayName } from './devtools/custom';
 import { options, toChildArray } from 'preact';
+import { ELEMENT_NODE, TEXT_NODE, DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE } from './constants';
 
 export function initDebug() {
 	/* eslint-disable no-console */
 	let oldBeforeDiff = options.diff;
 
+	options.root = (vnode, parentNode) => {
+		if (!parentNode) {
+			throw new Error('Undefined parent passed to render(), this is the second argument.\nCheck if the element is available in the DOM/has the correct id.');
+		}
+		let isValid;
+		switch (parentNode.nodeType) {
+			case ELEMENT_NODE:
+			case DOCUMENT_FRAGMENT_NODE:
+			case DOCUMENT_NODE: isValid = true; break;
+			default: isValid = false;
+		}
+		const value = typeof parentNode === 'object' ? JSON.stringify(parentNode) : parentNode;
+		if (!isValid) throw new Error(`
+			Expected a valid HTML node as a second argument to render.
+			Received ${value} instead: render(<${vnode.type.name || vnode.type} />, ${value});
+		`);
+		return parentNode._prevVNode
+	}
+
 	options.diff = vnode => {
 		let { type, props } = vnode;
 		let children = props && props.children;

debug/test/browser/debug.test.js

@@ -35,6 +35,33 @@ describe('debug', () => {
 		expect(diffSpy, 'diff').to.have.been.called;
 	});
 
+	it('should print an error on rendering on undefined parent', () => {
+		let fn = () => render(<div />, undefined);
+		expect(fn).to.throw(/render/);
+	});
+
+	it('should print an error on rendering on invalid parent', () => {
+		let fn = () => render(<div />, 6);
+		expect(fn).to.throw(/valid HTML node/);
+		expect(fn).to.throw(/<div/);
+	});
+
+	it('should print an error with (function) component name when available', () => {
+		const App = () => <div />
+		let fn = () => render(<App />, 6);
+		expect(fn).to.throw(/<App/);
+	});
+
+	it('should print an error with (class) component name when available', () => {
+		class App extends Component {
+			render() {
+				return <div />
+			}
+		}
+		let fn = () => render(<App />, 6);
+		expect(fn).to.throw(/<App/);
+	});
+
 	it('should print an error on undefined component', () => {
 		let fn = () => render(h(undefined), scratch);
 		expect(fn).to.throw(/createElement/);

src/render.js

@@ -2,6 +2,7 @@ import { EMPTY_OBJ, EMPTY_ARR } from './constants';
 import { commitRoot } from './diff/index';
 import { diffChildren } from './diff/children';
 import { createElement, Fragment } from './create-element';
+import options from './options';
 
 /**
  * Render a Preact virtual node into a DOM element
@@ -10,6 +11,7 @@ import { createElement, Fragment } from './create-element';
  * render into
  */
 export function render(vnode, parentDom) {
+	if (options.root) options.root(vnode, parentDom);
 	let oldVNode = parentDom._prevVNode;
 	vnode = createElement(Fragment, null, [vnode]);