MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.98k stars 1.27k forks source link

Use JavaScript initializers to remove unnecessary install steps #8098

Open Basyras opened 8 months ago

Basyras commented 8 months ago

Feature request type

Other

Component name

No response

Is your feature request related to a problem?

Ex. I'm always frustrated when [...]

I need to initialize MudBlazor dependencies (MudBlazor.min.css, MudBlazor.min.js) in my code 😐

Describe the solution you'd like

I would suggest use of JavaScript initializers for linking MudBlazor.min.css, MudBlazor.min.js and other required linking of files. Open to create PR.

Have you seen this feature anywhere else?

I am doing micro razor lib for my self and this seems to solve the problem that consumer of MudBlazor must link dependencies them self. Snippet:

//MyRazorProject.lib.module.js
export function beforeStart(options, extensions) {
    var customScript = document.createElement('script');
    customScript.setAttribute('src', '_content/MudBlazor/MudBlazor.min.js');
    document.head.appendChild(customScript);
    var cssLink = document.createElement('link');
    cssLink.setAttribute('href', '_content/MudBlazor/MudBlazor.min.css');
    cssLink.setAttribute('rel', 'stylesheet');
    document.head.appendChild(cssLink);
}

Describe alternatives you've considered

Other solution can be use of HeadContent like so (tested just linking css so far):

<HeadContent>
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
</HeadContent>

or for dynamicly loading js modules: with this nuget:

//MainLayout.razor or any top level component

//...
@inject IScriptInjectionTracker scriptInjectionTracker

//component content...

<AddScript Src="_content/Basyc.MaterialDesign3.Razor/MaterialDesign3/bundle.js" Async="false" Defer="false" />

@code {
    protected override async Task OnInitializedAsync()
    {
        await scriptInjectionTracker.LoadedAsync("_content/Basyc.MaterialDesign3.Razor/MaterialDesign3/bundle.js");
        await base.OnInitializedAsync();
    }
}

Pull Request

Code of Conduct

github-actions[bot] commented 8 months ago

👋 Thanks for wanting to do a PR @Basyras ! We suggest that you wait for an answer from @MudBlazor/contribution-team @MudBlazor/core-team . Otherwise we can not guarantee that your PR will be merged. As the library grows, we have to be very strict what PRs we can accept.

mikes-gh commented 8 months ago

I think this would break prerendering/SSR wouldn't it?

Conman-123 commented 8 months ago

Something else to consider is if the user wants to customise the order of these tags, e.g. to ensure their custom CSS/JS is loaded before/after MudBlazor's.