Blazor: support webpack module federation flow

snowinmars commented 2 years ago

Is there an existing issue for this? No

[X] I have searched the existing issues

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

I want to use Blazor as a remote component in microservices.

I create a rough view - just bind some code together to show the point: https://github.com/snowinmars/microfrontends-federation-ng-react-rust-blazor

I failed to render BlazorApp1 wasm inside ng host app. But I can render rust wasm, so that's not a fedi issue.

Describe the solution you'd like

Using Blazor as part of microforntend allows users to migrate and experiment smoothly.

I'm not an expert about Blazor, so if there's a way to render the BlazorApp1 in the repository above - it would be great news.

Additional context

No response

javiercn commented 2 years ago

@snowinmars thanks for contacting us.

It is unclear what the ask here is, but direct integration with webpack or any other third-party JavaScript tooling is not something that we plan to do.

There should be already enough extensibility points in the system for you to do this yourself in your apps or produce a nuget package that provides this integration, if you are missing some concrete feature, that's something we might consider.

snowinmars commented 2 years ago

integration with webpack or any other third-party JavaScript tooling

Federation is not a javascript-specific feature: rust and c++ works fine. It's an architecture, an idea that a frontend module can fully describe itself. If it's true, it doesn't matter who hosts the module. All the host should care about is:

download a module.js
execute module.js::mount(htmlElement)
execute module.js::unmount() when the htmlElement disposes

This is Federation. Webpack provides bundling flow, a sugar, nothing really important. So that's not about js or webpack themselves.

Btw, there's a feature request on single-spa repository to add Blazor support. So, I'm not alone)

concrete feature

Ok, I'll be more concrete. There are two .js files in the Blazor build folder. I'm not sure, but I think that these files import, initialize and mount dotnet.wasm component that renders all the stuff.

How it works with plain wasm:

if anyone needs something called 'childWasm' - execute the 'pkg/index.js'
'pkg/index.js' says to browser: "if you see <child-wasm-element> tag, call ChildWasmElement class". That's browser's responsibility: when it's done, the connected callback will be executed
in another app (!) someone asks: "does anyone know what 'childWasm' is? I have <child-wasm-element> for it"
browser is like: "hey, wasm, come here, then start and mount youself"

So, f.e., I'd like to use the same approach. There are several different ways to make it work, but I have to pick something. I'd like to import Blazor wasm to the class wrapper, call something and get just...a Blazor page, like in normal flow. But Blazor js files just doesn't match. It conflicts with webpack5 in polyfils - and it could be solved on my side; but Blazor architecture - wasm and js - are not ready to this use case. I spend two days and failed to import it, to make it render something. I could fail due to lack of knowledge - but what I'm asking is to check: is it my fault or Blazor can't be used in the way I described? If it's my fault, what am I doing wrong? If Blazor can't be used in this way, should it be patched? If Blazor can support Federation now, should there be a guide on msdn?

And I'll tell my motivation in more details. I'm leading a science frontend, so we'd like to try Blazor. We can't just...start to use it, so we want kinda microfrontends. The only way to apply Blazor now - to use some sort of linked pages arch. Broke our spa, open new tab and route it with nginx to Blazor page. Destroying spa is kinda bad, and Federation provides an agnostic flow. So, if aspnetcore team implement some kind of microfrontend support, more people will be techically able to try Blazor. What can we do now to try it anyway?)

javiercn commented 2 years ago

@snowinmars thanks for the additional details.

I am not sure about the details of Blazor + Webpack, but I can tell you a few things:

We currently do not ship the unbundled JS for Blazor apps as an NPM package. We only ship a bundled version:
- You could grab the sources from the repo and build/bundle them yourself.
We do have support for rendering components from JS so you should be able to leverage that to create your custom components wrapper (we also ship our own package for custom elements support).
We do have an item in the backlog to make this story in general better. A big part of it likely involves being more ES6 friendly.
- https://github.com/dotnet/aspnetcore/issues/38128

With all that said, I think with enough elbow grease and fiddling there might be ways to make this work. However, we are unlikely to provide any concrete guidance on integration with third-party tooling at this level unless we see significant demand for it. We might as part of other work, build a sample in the future if we deem it worth it, but that is TBD

ghost commented 2 years ago

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.

dotnet / aspnetcore