Optional Blazor Webassembly Components

kevinasdzine commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I'd like to use Blazor webassembly components as an option in progressively enhanced websites.

Base level - website functions without Javascript enabled. All content is generated from server. Interaction (e.g. a filtered list) is handled with standard HTML form postbacks.
Enhanced level - JavaScript is enabled and browser supports webassembly . If both of these are true, Blazor components are loaded to replace standard HTML forms mentioned above to provide an enhanced UI.

However, as far as I can tell, there is no fallback feature in the current Blazor JavaScript library (i.e. if the browser doesn't support WASM, do something else) and, there doesn't appear to be a way to have the Blazor component replace existing HTML markup (or leave it intact if Blazor webassembly is not supported).

Describe the solution you'd like

Enhance the Blazor JavaScript library, if necessary, to check for appropriate webassembly capability
Allow the <component> element to nest standard HTML markup that is replaced by the Blazor component if it can operate. Otherwise, leave the basic HTML markup in place

<component type="typeof(EnhancedListComponent)">
  <div> <!-- this and all child content replaced by Blazor component, if it will operate -->
    <form method="get" ...> <!-- postback form -->
      <label>...</label>
      <input ... >
      .
      .
      .
    </form>
    <ul> <!-- postback driven content - i.e. paginated list -->
      .
      .
      .
    </ul>
    <div><!-- pagination controls --></div>
  </div>
</component>

Additional context

I recognize that this is a niche market. The intended use-case is for non-profit, government, or NGO information websites where compatibility and accessibility for all possible visitors are a requirement before a "pretty" UI. However, if a visitor's browser supports it, I'd like to drop in a more capable client-side UI where appropriate.

ghost commented 1 year ago

Thanks for contacting us.

We're moving this issue to the .NET 8 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

kevinasdzine commented 1 year ago

Additional information:

The Vue.js framework supports this paradigm.

An example in the wild is City of Santa Monica - Events. The page can be run without JavaScript enabled and a pure HTML postback form manages filtering the events. However, with JavaScript enabled, a Vue.js component provides an enhanced interface.

mkArtakMSFT commented 1 year ago

Closing as progressively enhanced websites are mostly covered by Blazor SSR in .NET 8.

kevinasdzine commented 1 year ago

Except this request was specifically for Blazor Webassembly components, not the server-side version of Blazor (or am I misunderstanding the term SSR) so that if the browser supports WASM and JavaScript is enabled then a WASM component replaces existing HTML markup.

dotnet / aspnetcore