Add support for componentDidCatch Component method

config/properties.json

@@ -14,6 +14,7 @@
       "$prevProps": "__p",
       "$prevState": "__s",
       "$_parentComponent": "__u",
+      "$_ancestorComponent": "__a",
       "$_componentConstructor": "_componentConstructor",
       "$__html": "__html",
       "$_component": "_component",

package.json

@@ -19,7 +19,7 @@
     "transpile:esm": "rollup -c config/rollup.config.esm.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",
+    "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|_ancestorC)/\" --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",

src/preact.d.ts

@@ -80,6 +80,7 @@ declare namespace preact {
 		shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
 		componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
 		componentDidUpdate?(previousProps: Readonly<P>, previousState: Readonly<S>, previousContext: any): void;
+		componentDidCatch?(error: any): void;
 	}
 
 	abstract class Component<P, S> {

src/render.js

@@ -16,5 +16,5 @@ import { diff } from './vdom/diff';
  *	render(<Thing name="one" />, document.querySelector('#foo'));
  */
 export function render(vnode, parent, merge) {
-	return diff(merge, vnode, {}, false, parent, false);
+	return diff(merge, vnode, {}, false, parent);
 }

src/vdom/component-recycler.js

@@ -15,7 +15,7 @@ export function collectComponent(component) {
 
 
 /** Create a component. Normalizes differences between PFC's and classful Components. */
-export function createComponent(Ctor, props, context) {
+export function createComponent(Ctor, props, context, ancestorComponent) {
 	let list = components[Ctor.name],
 		inst;
 
@@ -28,7 +28,7 @@ export function createComponent(Ctor, props, context) {
 		inst.constructor = Ctor;
 		inst.render = doRender;
 	}
-
+	inst._ancestorComponent = ancestorComponent;
 
 	if (list) {
 		for (let i=list.length; i--; ) {

src/vdom/component.js

@@ -49,6 +49,18 @@ export function setComponentProps(component, props, opts, context, mountAll) {
 	if (component.__ref) component.__ref(component);
 }
 
+export function catchErrorInComponent(error, component) {
+	for (; component; component = component._ancestorComponent) {
+		if (component.componentDidCatch) {
+			try {
+				return component.componentDidCatch(error);
+			} catch (e) {
+				error = e;
+			}
+		}
+	}
+	throw error;
+}
 
 
 /** Render a Component, triggering necessary lifecycle events and taking High-Order Components into account.
@@ -105,40 +117,45 @@ export function renderComponent(component, opts, mountAll, isChild) {
 		let childComponent = rendered && rendered.nodeName,
 			toUnmount, base;
 
-		if (typeof childComponent==='function') {
-			// set up high order component link
+		try {
+			if (typeof childComponent==='function') {
+				// set up high order component link
 
-			let childProps = getNodeProps(rendered);
-			inst = initialChildComponent;
+				let childProps = getNodeProps(rendered);
+				inst = initialChildComponent;
 
-			if (inst && inst.constructor===childComponent && childProps.key==inst.__key) {
-				setComponentProps(inst, childProps, SYNC_RENDER, context, false);
-			}
-			else {
-				toUnmount = inst;
+				if (inst && inst.constructor===childComponent && childProps.key==inst.__key) {
+					setComponentProps(inst, childProps, SYNC_RENDER, context, false);
+				}
+				else {
+					toUnmount = inst;
+
+					component._component = inst = createComponent(childComponent, childProps, context, component);
+					inst.nextBase = inst.nextBase || nextBase;
+					inst._parentComponent = component;
+					setComponentProps(inst, childProps, NO_RENDER, context, false);
+					renderComponent(inst, SYNC_RENDER, mountAll, true);
+				}
 
-				component._component = inst = createComponent(childComponent, childProps, context);
-				inst.nextBase = inst.nextBase || nextBase;
-				inst._parentComponent = component;
-				setComponentProps(inst, childProps, NO_RENDER, context, false);
-				renderComponent(inst, SYNC_RENDER, mountAll, true);
+				base = inst.base;
 			}
+			else {
+				cbase = initialBase;
 
-			base = inst.base;
-		}
-		else {
-			cbase = initialBase;
-
-			// destroy high order component link
-			toUnmount = initialChildComponent;
-			if (toUnmount) {
-				cbase = component._component = null;
-			}
+				// destroy high order component link
+				toUnmount = initialChildComponent;
+				if (toUnmount) {
+					cbase = component._component = null;
+				}
 
-			if (initialBase || opts===SYNC_RENDER) {
-				if (cbase) cbase._component = null;
-				base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, true);
+				if (initialBase || opts===SYNC_RENDER) {
+					if (cbase) cbase._component = null;
+					base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, component);
+				}
 			}
+		} catch (e) {
+			base = initialBase || document.createTextNode("");
+			catchErrorInComponent(e, component);
 		}
 
 		if (initialBase && base!==initialBase && inst!==initialChildComponent) {
@@ -179,7 +196,11 @@ export function renderComponent(component, opts, mountAll, isChild) {
 		// flushMounts();
 
 		if (component.componentDidUpdate) {
-			component.componentDidUpdate(previousProps, previousState, previousContext);
+			try {
+				component.componentDidUpdate(previousProps, previousState, previousContext);
+			} catch (e) {
+				catchErrorInComponent(e, component._ancestorComponent);
+			}
 		}
 		if (options.afterUpdate) options.afterUpdate(component);
 	}
@@ -199,7 +220,7 @@ export function renderComponent(component, opts, mountAll, isChild) {
  *	@returns {Element} dom	The created/mutated element
  *	@private
  */
-export function buildComponentFromVNode(dom, vnode, context, mountAll) {
+export function buildComponentFromVNode(dom, vnode, context, mountAll, ancestorComponent) {
 	let c = dom && dom._component,
 		originalComponent = c,
 		oldDom = dom,
@@ -220,7 +241,7 @@ export function buildComponentFromVNode(dom, vnode, context, mountAll) {
 			dom = oldDom = null;
 		}
 
-		c = createComponent(vnode.nodeName, props, context);
+		c = createComponent(vnode.nodeName, props, context, ancestorComponent);
 		if (dom && !c.nextBase) {
 			c.nextBase = dom;
 			// passing dom/oldDom as nextBase will recycle it if unused, so bypass recycling on L229:

src/vdom/diff.js

@@ -1,6 +1,6 @@
 import { ATTR_KEY } from '../constants';
 import { isSameNodeType, isNamedNode } from './index';
-import { buildComponentFromVNode } from './component';
+import { buildComponentFromVNode, catchErrorInComponent } from './component';
 import { createNode, setAccessor } from '../dom/index';
 import { unmountComponent } from './component';
 import options from '../options';
@@ -23,7 +23,13 @@ export function flushMounts() {
 	let c;
 	while ((c=mounts.pop())) {
 		if (options.afterMount) options.afterMount(c);
-		if (c.componentDidMount) c.componentDidMount();
+		if (c.componentDidMount) {
+			try {
+				c.componentDidMount();
+			} catch (e) {
+				catchErrorInComponent(e, c._ancestorComponent);
+			}
+		}
 	}
 }
 
@@ -44,19 +50,20 @@ export function diff(dom, vnode, context, mountAll, parent, componentRoot) {
 		hydrating = dom!=null && !(ATTR_KEY in dom);
 	}
 
-	let ret = idiff(dom, vnode, context, mountAll, componentRoot);
-
-	// append the element if its a new parent
-	if (parent && ret.parentNode!==parent) parent.appendChild(ret);
-
-	// diffLevel being reduced to 0 means we're exiting the diff
-	if (!--diffLevel) {
-		hydrating = false;
-		// invoke queued componentDidMount lifecycle methods
-		if (!componentRoot) flushMounts();
+	let ret;
+	try {
+		return ret = idiff(dom, vnode, context, mountAll, componentRoot);
+	} finally {
+		// append the element if its a new parent
+		if (ret && parent && ret.parentNode!==parent) parent.appendChild(ret);
+
+		// diffLevel being reduced to 0 means we're exiting the diff
+		if (!--diffLevel) {
+			hydrating = false;
+			// invoke queued componentDidMount lifecycle methods
+			if (!componentRoot) flushMounts();
+		}
 	}
-
-	return ret;
 }
 
 
@@ -97,7 +104,7 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
 	// If the VNode represents a Component, perform a component diff:
 	let vnodeName = vnode.nodeName;
 	if (typeof vnodeName==='function') {
-		return buildComponentFromVNode(dom, vnode, context, mountAll);
+		return buildComponentFromVNode(dom, vnode, context, mountAll, componentRoot);
 	}
 
 
@@ -140,7 +147,7 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
 	}
 	// otherwise, if there are existing or new children, diff them:
 	else if (vchildren && vchildren.length || fc!=null) {
-		innerDiffNode(out, vchildren, context, mountAll, hydrating || props.dangerouslySetInnerHTML!=null);
+		innerDiffNode(out, vchildren, context, mountAll, hydrating || props.dangerouslySetInnerHTML!=null, componentRoot);
 	}
 
 
@@ -162,7 +169,7 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
  *	@param {Boolean} mountAll
  *	@param {Boolean} isHydrating	If `true`, consumes externally created elements similar to hydration
  */
-function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {
+function innerDiffNode(dom, vchildren, context, mountAll, isHydrating, componentRoot) {
 	let originalChildren = dom.childNodes,
 		children = [],
 		keyed = {},
@@ -217,7 +224,7 @@ function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {
 			}
 
 			// morph the matched/found/created DOM child to match vchild (deep)
-			child = idiff(child, vchild, context, mountAll);
+			child = idiff(child, vchild, context, mountAll, componentRoot);
 
 			f = originalChildren[i];
 			if (child && child!==dom && child!==f) {

test/browser/components.js

@@ -806,4 +806,50 @@ describe('Components', () => {
 			expect(C3.prototype.componentWillMount, 'inject between, C3 w/ intermediary div').to.have.been.calledOnce;
 		});
 	});
+
+	describe('Properties', () => {
+		let ancestorComponent;
+		let childComponent;
+		class Ancestor extends Component {
+			constructor(props, context) {
+				super(props, context);
+				ancestorComponent = this;
+			}
+			render() {
+				return this.props.children[0];
+			}
+		}
+		class Child extends Component {
+			constructor(props, context) {
+				super(props, context);
+				childComponent = this;
+			}
+			render() {
+				return <div/>;
+			}
+		}
+		const HighOrderChild = () => <Child/>;
+		it('should have correct ancestor/parent with immediate child', () => {
+			render(<Ancestor><Child/></Ancestor>, scratch);
+			expect(childComponent._ancestorComponent).to.equal(ancestorComponent);
+			expect(childComponent._parentComponent).to.equal(ancestorComponent);
+			expect(ancestorComponent._ancestorComponent).to.equal(undefined);
+			expect(ancestorComponent._parentComponent).to.equal(undefined);
+		});
+		it('should have correct ancestor/parent with grandchild', () => {
+			render(<Ancestor><div><Child/></div></Ancestor>, scratch);
+			expect(childComponent._ancestorComponent).to.equal(ancestorComponent);
+			expect(childComponent._parentComponent).to.equal(undefined);
+			expect(ancestorComponent._ancestorComponent).to.equal(undefined);
+			expect(ancestorComponent._parentComponent).to.equal(undefined);
+		});
+		it('should have correct ancestor/parent with high-order grandchild', () => {
+			render(<Ancestor><div><HighOrderChild/></div></Ancestor>, scratch);
+			expect(childComponent._ancestorComponent).to.not.equal(undefined);
+			expect(childComponent._ancestorComponent).to.equal(childComponent._parentComponent);
+			expect(childComponent._ancestorComponent._ancestorComponent).to.equal(ancestorComponent);
+			expect(ancestorComponent._ancestorComponent).to.equal(undefined);
+			expect(ancestorComponent._parentComponent).to.equal(undefined);
+		});
+	});
 });