search

dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.44k stars 10.02k forks source link

Blazor With WebView2: CSS Hot Reload Does Not Work #37496

Open warappa opened 3 years ago

warappa commented 3 years ago

Describe the bug

Hot reloading scoped css works for Blazor Server and should also work for Blazor within WebView2 with Microsoft.AspNetCore.Components.WebView.Wpf package.

Unfortunately, it doesn't.

Curiously, hot reloading DOM changes like editing the text of an h1 element works as expected.

As shown below, dotnet watch does somewhat work for css (with manual/hacky workarounds). VS 2022 Hot Reload does not update the generated bundle css file and therefore does not work at all.

To Reproduce

  1. Follow the instructions in the announcement post for WPF: https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/#blazorwebview-controls-for-wpf-windows-forms
  2. Update NuGet packages to latest .NET 6 versions
  3. Add an isolated css file Counter.razor.css and a style like 
    h1 { color: red; }
  4. Run dotnet watch --verbose in the command line in the project-directory
  5. Change the color in the css file to blue
  6. dotnet watch outputs updated file but it's not reflected in-app
  7. Click somewhere in the app and press CTRL+R to reload the page
  8. See the updated style reflected in the app

Workaround 1 (With dotnet watch)

Click somewhere in the app window and press CTRL+R

Workaround 2 (With dotnet watch)

Force reloading of css with timer in JS in index.html (for a project named WpfApp1):

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor app</title>
    <base href="/" />

    <!-- HACK -->
    <style id="flickerPreventerFallback"></style>
    <link id="override" href="WpfApp1.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app"></div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

    <!-- HACK -->
     <script>
        var styleFallback = document.querySelector("#flickerPreventerFallback");
        var style = document.querySelector("link[id='override']");

        setInterval(() => {
            var stylesheet = Array.from(document.styleSheets).filter(x => x.ownerNode === style)[0];
            var content = Array.from(stylesheet.cssRules).map(rule => rule.cssText).join(' ');

            styleFallback.innerHTML = content;
            var oldHref = style.href;
            style.href = "";
            style.href = oldHref;
        }, 500)
    </script>
</body>
</html>

Further technical details

dotnet --info Output ``` .NET SDK (reflecting any global.json): Version: 6.0.100-rc.2.21505.57 Commit: ab39070116 Runtime Environment: OS Name: Windows OS Version: 10.0.22000 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\6.0.100-rc.2.21505.57\ Host (useful for support): Version: 6.0.0-rc.2.21480.5 Commit: 6b11d64e7e .NET SDKs installed: 3.1.412 [C:\Program Files\dotnet\sdk] 5.0.301 [C:\Program Files\dotnet\sdk] 5.0.400 [C:\Program Files\dotnet\sdk] 5.0.402 [C:\Program Files\dotnet\sdk] 6.0.100-rc.2.21505.57 [C:\Program Files\dotnet\sdk] .NET runtimes installed: Microsoft.AspNetCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.0-rc.2.21480.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.0-rc.2.21480.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.0-rc.2.21501.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] ```
CommonLoon102 commented 3 years ago

It isn't just the WebView component, it is Blazor related. I created a Blazor-Server project, started it, then in MainLayout.razor.css I commented out that one single line inside .sidebar, pressed Ctrl+S, but in Edge the changes didn't reflect. I had to restart the whole application to see the changes in the CSS file. Not really convenient...

When I moved <h1>Counter</h1> in Counter.razor below the button and pressed Ctrls+S, the changes automatically reflected in the browser.

(I have Hot Reload on File Save enabled).

Microsoft Visual Studio Community 2022 Preview (64-bit) Version 17.0.0 Preview 7.0 OS: Windows 7

dotnet --info Output ``` .NET SDK (reflecting any global.json): Version: 6.0.100-rc.2.21505.57 Commit: ab39070116 Runtime Environment: OS Name: Windows OS Version: 6.1.7601 OS Platform: Windows RID: win7-x64 Base Path: C:\Program Files\dotnet\sdk\6.0.100-rc.2.21505.57\ Host (useful for support): Version: 6.0.0-rc.2.21480.5 Commit: 6b11d64e7e .NET SDKs installed: 2.1.101 [C:\Program Files\dotnet\sdk] 5.0.301 [C:\Program Files\dotnet\sdk] 6.0.100-preview.3.21202.5 [C:\Program Files\dotnet\sdk] 6.0.100-preview.5.21302.13 [C:\Program Files\dotnet\sdk] 6.0.100-rc.2.21505.57 [C:\Program Files\dotnet\sdk] .NET runtimes installed: Microsoft.AspNetCore.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.AspN etCore.App] Microsoft.AspNetCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.AspNe tCore.App] Microsoft.AspNetCore.App 6.0.0-preview.3.21201.13 [C:\Program Files\dotnet\sha red\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.0-rc.2.21480.10 [C:\Program Files\dotnet\shared\M icrosoft.AspNetCore.App] Microsoft.NETCore.App 2.0.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore. App] Microsoft.NETCore.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.NETCore .App] Microsoft.NETCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore. App] Microsoft.NETCore.App 6.0.0-preview.3.21201.4 [C:\Program Files\dotnet\shared\ Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.0-rc.2.21480.5 [C:\Program Files\dotnet\shared\Micro soft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft. WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.W indowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.W indowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.0-preview.3.21201.3 [C:\Program Files\dotnet\ shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.0-rc.2.21501.6 [C:\Program Files\dotnet\share d\Microsoft.WindowsDesktop.App] To install additional .NET runtimes or SDKs: https://aka.ms/dotnet-download ```
quirynen commented 3 years ago

Same here

ghost commented 3 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

farhan7272 commented 2 years ago

Hot reload is not working for CSS as mentioned in this dotnet video https://youtu.be/GKu-vRxOWr8?t=635 The Video mentions that as soon as we update the CSS it should reflect. but for me its not working even after saving the file. I had to restart the application.

CommonLoon102 commented 2 years ago

@farhan7272 are you on Windows 7? Because I had the same issue on Windows 7, but on Windows 10 it works fine, even scoped CSS hot reloads instantly (you have to press the save button for that though).

qrzychu commented 1 year ago

this is still a problem in dotnet 7

Here is a repo with reproduction: https://github.com/qrzychu/WpfBlazorHybrid

It even contains the hack from @warappa

This is especially annoying when everything else works just fine: updating the razor files, updating just C# code. Everything works fine, except of the CSS, which would be most helpfull.

Bouke commented 1 year ago

Hot reloading of the css works for me in Firefox 107, but not in Safari 16.2. Manually reloading does apply the changes. This is on .NET 6. I do need to have webBuilder.UseStaticWebAssets(); in my Program.cs, otherwise the CSS isn't rebuild during hot reload.