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

Get IRenderedFragment/IRenderedComponent<T> from DOM element (IElement) #153

Open
egil opened this issue Jun 18, 2020 · 5 comments
Open
Labels
enhancement New feature or request help wanted Extra attention is needed input needed When an issue requires input or suggestions
Milestone

Comments

@egil
Copy link
Member

egil commented Jun 18, 2020

In certain scenarios (#152), it can make it easier to create test when it is possible to get a component from a DOM element, due to the good DOM query (Find/FindAll) API.

Thus, it should be possible to go from an node to the component that rendered it.

The API could have two methods, GetComponent and GetComponent<TComponent>, and they should return a IRenderedFragment or IRenderedComponent<MyComp>, which is related to the nearest component in the render tree, that rendered the element. E.g.:

var elm = cut.Find("p");
IRenderedFragment componentThatRenderedElm = elm.GetComponent();
IRenderedComponent<MyComp> componentThatRenderedElm = elm.GetComponent<MyComp>();

It should be possible by adding meta information to the DOM tree created by the Htmlizer.cs type, and creating extension methods on INode that reads up the DOM tree until it finds some meta information about the source component. That extension method can then get the renderer and use its methods to find the component instance.

Update

With the current render pipeline, where we generate markup with Htmlizer and then convert to AngleSharp nodes does seems to contain too many compromises when info about the source component should be embedded in the nodes in the dom tree, at least for the variants I've tried, so I will move this item over to the AngleSharpRenderer project, where it will be a completely different store.

I tried adding custom <!--!X--> comments to markup in Htmlizer, but doing so had too much impact on other parts of the system. Another variant added a custom attribute to the first element in a component, the reasoning being that elements are what users query from using Find/FindAll. However, if a component simply contained a markup string, and not calls to "OpenElement", then the components would not get the attribute.

@egil egil added enhancement New feature or request help wanted Extra attention is needed input needed When an issue requires input or suggestions labels Jun 18, 2020
@egil egil added this to the v1.0.0 milestone Jul 29, 2020
@egil
Copy link
Member Author

egil commented Oct 8, 2020

I am not sure about the name of the method. The method should return the component that rendered the element, but calling it GetComponent my lead some to think it will get a component which is a child of the element.

GetOwningComponent, GetSourceComponent, GetRenderingComponent are some other options.

@mrpmorris
Copy link

As DOM elwlents are owned by components, elm.GetOwningComponent()

@egil egil removed this from the v1.0.0 milestone Oct 20, 2020
@egil egil added this to the 2.0.0 milestone May 26, 2022
@mycarrysun
Copy link

Does anyone know how to go from IRenderedFragment to IElement? Trying to assert css styles and ComputeCurrentStyle only exists on IElement

@linkdotnet
Copy link
Collaborator

Does anyone know how to go from IRenderedFragment to IElement? Trying to assert css styles and ComputeCurrentStyle only exists on IElement

Hey @mycarrysun can I kindly ask you to open a new discussion in the discussion tab?
That would be a better place as this issue tracks something else.

@wardbeyens
Copy link

Would be a nice feature!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed input needed When an issue requires input or suggestions
Projects
None yet
Development

No branches or pull requests

5 participants