[Validation] Reusing components with render modes in a Blazor Hybrid app
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 281
Description
**Scenario contact:** @javiercn
## Scenario
**This scenario validates that a fix works.** A team that has a Blazor web app and wants a native app for the same product would rather write the UI once and use it in both. The components they already have carry `@rendermode` annotations, which mean nothing inside a WebView because a Hybrid app is always interactive. Previously those annotations threw `NotSupportedException`; the WebView renderer now treats every render mode as a no-op.
This validates that shared components can be used unchanged in both places rather than having to be forked or stripped of those annotations.
## Minimum build
.NET 11 Preview 7 or later.
## Configurations to cover
* Blazor Web App
* [x] Static SSR
* [x] Interactive Server
* [x] Interactive WebAssembly
* [x] Interactive Auto
* [ ] Standalone WebAssembly
* [x] Hybrid (MAUI)
## Also exercise
* [ ] Published output
* [ ] An existing .NET 10 app upgraded to .NET 11
* [ ] Trimming or ahead-of-time compilation
* [ ] More than one server instance, or a proxy in front
* [ ] Hot Reload
* [ ] An IDE as well as the command line
* [ ] Container
## Setup
You need the workloads for building a native app for at least one platform, and a device or emulator to run it on. Covering two platforms is better if you can.
## What to build
A shared library holding the UI: several pages and components, some of which say where they should run and some of which say nothing. Include components covering the usual ground, a form, a list, something that fetches data, and something that talks to JavaScript. Use that library from a Blazor Web App and from a native app hosting Blazor, both referencing the same components without modification. Then, from within the native app, add a component that asks at runtime whether it is running interactively and shows the answer, so the behavior is visible rather than assumed.
## Things to try
* Using every shared page in the web app and in the native app, and comparing.
* Placing a component that says it should run in the browser inside the native app.
* Placing a component that says it should run on the server inside the native app.
* Nesting components with differing instructions inside one another.
* Reading what a component reports about whether it is running interactively, in each host.
* Changing a shared component and confirming both hosts pick the change up.
* Rotating the device, backgrounding the app and returning to it.
## Expected behavior
Shared components work unchanged in both hosts, and the native host ignores the render mode instructions rather than tripping over them.
### Must hold
* The same shared components build and run in both hosts with no modification.
* Inside the native app, components carrying render mode instructions render and behave interactively, including nested ones whose instructions differ.
* A component asking whether it is running interactively is told that it is, in the native app.
* The web app still honours the render mode instructions exactly as before.
* No warning or error about render modes appears in either host.
### Expected differences between configurations
* No differences are expected.
## Documentation to use
* [Reuse Razor components in ASP.NET Core Blazor Hybrid apps](https://learn.microsoft.com/aspnet/core/blazor/hybrid/reuse-razor-components?view=aspnetcore-11.0)
* [ASP.NET Core Blazor render modes](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes?view=aspnetcore-11.0)
* [Build a .NET MAUI Blazor Hybrid app](https://learn.microsoft.com/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-11.0)
## What to report
Report results using the format described in the [validation testing manual](https://github.com/dotnet/aspnetcore/issues/68479). Include link to a repository with the test app.
Contributor guide
Assessment
This issue has not been assessed yet.