dotnet / dotnet/roslyn

Support DOM Annotation for Blazor Component's source file location

Open
#85,568 1 comment 0 reactions 1 assignee Claimed by @chsienki View on GitHub
Area-Razor Area-Razor-Compiler
Dominant language
C#
Stars
20.7k
Forks
4.3k
PR merge metrics
PR metrics pending

Description

In order to support
[Experience 1758042](https://devdiv.visualstudio.com/DevDiv/_workitems/edit/1758042): [Blazor Hybrid] Provide a Live Visual Tree/XAML Live Preview that works better with WebView

1. An object model is needed to allow walking the Blazor Component tree.
Similar to [VisualTreeHelper Class (System.Windows.Media) | Microsoft Learn ](https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.visualtreehelper?view=windowsdesktop-8.0&redirectedfrom=MSDN), Blazor also needs a navigable logical component tree. This allows an injected Agent to traverse and gather data to construct the JSON that is sent to the LVT tree via the VDEP protocol.

2. An event system when the Blazor component tree changes
Similar to [VisualTreeChangeEventArgs Class (System.Windows.Diagnostics)](https://learn.microsoft.com/en-us/dotnet/api/system.windows.diagnostics.visualtreechangeeventargs?view=windowsdesktop-8.0) |[ Microsoft Learn, or MutationObserver - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) on modern Browser, events plays a role in updating the Live Visual Tree when changes are made through Hot Reload.

3. Source Info Annotation
Information known as Source Information is kept within the Blazor Component Tree to pinpoint the origin of the Blazor Component. During Hit Testing, which is conducted at the DOM level by the WebView, the DOM needs to retains information that aids in identifying the Blazor Web Component. This Source Info is crucial for the Blazor Web Component to locate and navigate to the original Source on the Razor page.

Based on a meeting with the Razor, we can solve 1) and 2) (DOM Mutation) by using 100% the DOM Element Tree to rebuild the Blazor Component Tree assuming that 3) contains the require annotation in the generate HTML.

So the request here is for 3) to have the Razor Compiler to

Generate DOM annotation that give the source location of the razor component. The annotation needs to contain:
1. The source filename (relative path)
2. Line Number
3. Column number of the the start tag
![Image](https://github.com/user-attachments/assets/a48dbcee-acac-4458-8313-cf9af6cd2663)

Annotation would be contain on the DOM Element similar to
![Image](https://github.com/user-attachments/assets/651721d9-f77d-49d1-89ef-7ab40346539f)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.