Smarter rendering in v2

[egil]

With v2, IRenderedComponent<TComponent> is inherting from ComponentState.

A component can:

• Be disposed
• Have disposed event handlers
• Have changes or be updated

During/after each render cycle (UpdateDisplayAsync):

• Update renderer's RenderCount
• Increment the IRenderedComponent.RenderCount IFF RenderTreeDiff.Edits.Count > 0
• Component has been updated, has disposed event handlers, or been disposed, notify subscribers (wait-fors).
• If any component has RenderTreeDiff.Edits.Count > 0, tell ROOT to recreate markup.
  • Track start and end indices for each component.
  • Create or update/patch a single DOM tree
  • Provide a way for each rendered component to return just the nodes they own.

DOM tree

---

NOTES and example below:

IRenderedComponent<BunitRootComponent> cut = Render(....);
IRenderedComponent<FooButton> button = cut.FindComponent<FooButton>();
button.Markup // slice of the cut.Markup
button.Nodes // 

// Go from component (tree) to element
var buttonElementFromRoot = cut.Find("button");
var buttonElementFromFooButton = button.Find("button");

// Reuse of AngleSharp DOM nodes across rendered components
ReferenceEquals(buttonElementFromRoot, buttonElementFromFooButton);

// Go from element to component tree
IRenderedComponent<FooButton> comp = buttonElementFromFooButton.GetComponent<FooButton>();

// Should be able to see node changes without re-finding for them.
elm.Click();
elm.InnerText.Should().Be("Counter: 1");

component: 4 ... 20 node:

• text element: 6 .. 18