Reconciliation

[wtnbass]

Make call stack closer to React when multiple components are updated.

For example, define components like bellow:

const Child = () => {
  console.log("[child] render")
  useEffect(() => console.log("[child] effect"))
  useLauoutEffect(() => console.log("[child] layoutEffect"))
  return html`<div>child</div>`;
}

const Root = () => {
  console.log("[root] render")
  useEffect(() => console.log("[root] effect"))
  useLauoutEffect(() => console.log("[root] layoutEffect"))
  return html`<child-component></child-component>`;
}

This should be the following steps:

1. [root] render
2. [child] render
3. [child] layoutEffect
4. [root] layoutEffect
5. (layout and paint time of browser)
6. [child] effect
7. [root] effect

[codecov-io]

Codecov Report

Merging #28 into master will decrease coverage by 0.47%. The diff coverage is 96.72%.

@@            Coverage Diff             @@
##           master      #28      +/-   ##
==========================================
- Coverage   96.75%   96.27%   -0.48%     
==========================================
  Files           6        6              
  Lines         154      188      +34     
  Branches       28       32       +4     
==========================================
+ Hits          149      181      +32     
- Misses          3        4       +1     
- Partials        2        3       +1

Impacted Files	Coverage Δ
src/lib/hooks.ts	94.62% <100%> (+0.3%)	:arrow_up:
src/lib/component.ts	96.72% <96.22%> (-3.28%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update f642d51...83b4b41. Read the comment docs.