Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect ordering of sibling widgets #200

Closed
agubler opened this issue Dec 8, 2018 · 0 comments

Comments

@agubler
Copy link
Member

commented Dec 8, 2018

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>'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.