Re: [WICG/webcomponents] Idea: A tree-aware task scheduler (Issue #1055)

maxpatiiuk left a comment (WICG/webcomponents#1055)

Contributing two use cases my team encountered related to scheduling DOM updates (in [calcite-design-system](https://github.com/Esri/calcite-design-system), and proprietary projects):

1. Loading components in order

Stencil [implements](https://stenciljs.com/docs/component-lifecycle#lifecycle-hierarchy) componentWillLoad and componentDidLoad lifecycle on custom elements.

componentWillLoad is called on parent components before children.
after a child's componentWillLoad, render() is called, and then componentDidLoad.

The ordered loading allows for patterns like:
- parent loads localization strings and passes them down to children
- a list component can query information about list-items in its componentDidLoad, knowing confidently that the children have rendered and loaded fully.

Since then, we moved away from stencil to building a framework on top of Lit, but we retained this ordered loading pattern.

It is implemented in user land by children components looking up nearest parent component and updating a parent-owned array of children.
Then, componentWillLoad loops over the arrays in tree order, awaiting all the promises.

Stencil's and our DOM traversing implementations are blind to each other which caused timing issues in mixed-framework apps.

2. Virtual DOM libraries

Virtual scrolling libraries have "chicken and egg" issue with sizing - the content needs to re-render in response to state change, before the library can measure the size.
Especially important for first render (wait for component styles to load and first render to complete)
We encountered trickiness with this in [Tabulator](https://tabulator.info/).

It is tricky to know when content has fully loaded, especially if we use third-party web components inside (Vaadin).
We had to limit VDOM lists to dumb web components that don't have any async loading to avoid timing issues.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1055#issuecomment-4381206128
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1055/4381206128@github.com>