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

Optional Blazor Webassembly Components #45627

Closed
1 task done
kevinasdzine opened this issue Dec 16, 2022 · 4 comments
Closed
1 task done

Optional Blazor Webassembly Components #45627

kevinasdzine opened this issue Dec 16, 2022 · 4 comments
Labels
area-blazor Includes: Blazor, Razor Components enhancement This issue represents an ask for new feature or an enhancement to an existing one feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly

Comments

@kevinasdzine
Copy link

Is there an existing issue for this?

  • 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

  1. Enhance the Blazor JavaScript library, if necessary, to check for appropriate webassembly capability
  2. 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.

@TanayParikh TanayParikh added area-blazor Includes: Blazor, Razor Components feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly feature-request labels Dec 16, 2022
@javiercn javiercn added this to the .NET 8 Planning milestone Dec 19, 2022
@ghost
Copy link

ghost commented Dec 19, 2022

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
Copy link
Author

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.

@amcasey amcasey added enhancement This issue represents an ask for new feature or an enhancement to an existing one and removed feature-request labels Jun 1, 2023
@mkArtakMSFT
Copy link
Member

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

@kevinasdzine
Copy link
Author

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.

@ghost ghost locked as resolved and limited conversation to collaborators Jul 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-blazor Includes: Blazor, Razor Components enhancement This issue represents an ask for new feature or an enhancement to an existing one feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly
Projects
None yet
Development

No branches or pull requests

5 participants