Incorrect ordering of sibling widgets

[agubler]

Bug

The vdom engine uses sub-tree rendering to only re-render sections of the application tree, when processing the invalidation events they are ordered by depth and then rendered from shallowest to deepest. However if there are two widgets at the same depth the ordering in which they are rendered is dependant on the order in which they are invalidated. This can in certain scenarios cause the DOM to be rendered in the incorrect order.

let invalidateFoo = () => {};
let invalidateBar = () => {};
class Foo extends WidgetBase {
	doRender = 0;
	constructor() {
		super();
		invalidateFoo = () => {
			this.doRender++;
			this.invalidate();
		}
	}

	render() {
		return this.doRender > 0 ? v('foo', [ 'foo' ]) : null;
	}
}

class Bar extends WidgetBase {
	doRender = 0;
	constructor() {
		super();
		invalidateBar = () => {
			this.doRender++;
			this.invalidate();
		}
	}

	render() {
		return this.doRender > 0 ? 
			v('bar', [ this.doRender > 1 ? 'bar' : null ]) : 
			null;
	}
}

class App extends WidgetBase {
	render() {
		return v('div', [
			w(Foo, {}),
			w(Bar, {})
		]);
	}
}

const r = renderer(() => w(App, {}));
const div = document.createElement('app');
r.mount({ domNode: div });
// The order of the invalidations means that bar will be processed first as they are
// both the same depth
invalidateFoo();
invalidateBar();
// request animation frame
invalidateBar();
// request animation frame

The result of these renders should be:

<app><div><foo>foo</foo><bar>bar</bar></div></app>

However due to the order that invalidations occur the resulting DOM structure appends <bar> before <foo>:

<app><div><bar>bar</bar><foo>foo</foo></div></app>'