Automate/simplify setup steps when consuming a Blazor component library

[danroth27]

All of the major Blazor component libraries require multiple steps in order to setup their libraries in a Blazor app. Often these steps include:

• Added JavaScript files
• Linking to CSS style sheets
• Registering services in DI
• Adding infrastructure components that enable cross-cutting features
• Adding using directives for namespaces

Are there perhaps some patterns here that we can enable component library authors to automate so that it's easier to consume Blazor components? Are there common framework abstractions we should be adding to Blazor so that component libraries can reuse them and better compose with each other? Is there additional guidance we should provide to help component library authors make their libraries easier to consume?

[guardrex]

Cross-link (possibly a dup of): #47624

[KristofferStrube]

Just wanted to note that most libraries already have the first part (adding JavaScript files) covered by using modules instead and importing these as IJSObjectReferences from code as a part of the service registration.

Something that would be cool to have is a parallel to this but for CSS. Ideally, this should enable dynamically adding CSS style sheets. Sadly there isn't an agreed-upon way to load CSS style sheets dynamically. But if we were to think big, I could imagine one of two solutions.

1. Always load the compiled CSS file (the one generated when using scoped CSS files) when a project references a razor class library that has one.
2. Have some way to keep the scoped CSS files separate when packaging the razor class library and then compile the scoped CSS of each component that is used directly in a project into the compiled CSS file for that project as if the component was a first-class-citizen in that project. Then the only problem would be that some components are created dynamically, meaning we can't make any analysis on them when compiling. I guess there are many ways to get around that, i.e. defining a list of components to import scoped CSS for in the package reference for that library or something similar (not sure what the best approach would be).

This is just me starting spit-balling a bit to start the discussion as I'm really interested in how we can make the consumption of razor class libraries easier for the consumers.

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 9 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.

[SteveSandersonMS]

We think this might be viable to make the RCL template a bit more structured to show examples of auto-including JS, CSS, and using some IServiceCollection extension for registering DI services and cascading values.

We'd also like to improve docs to encourage this.

[pkostaki]

Are there any plans to enable the automatic import of arbitrary CSS files (which are not part of the components and cannot currently be imported automatically by vs tooling), from the RCL into the project?
(check created feature request for details)