dotnet / dotnet/aspnetcore

[Validation] Reusing components with render modes in a Blazor Hybrid app

Open
#68,812 0 comments 0 reactions 1 assignee Claimed by @VigneshwaranGovindharajan View on GitHub
area-blazor Validation validation-scenario
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

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.