Add Hot Reload to PreviewFrame #5

[coryjthompson]

This merge request addresses an issue where hot reload doesn't work within PreviewFrames.

The BrowserRefresh Middleware in the dotnet SDK will only inject aspnetcore-browser-refresh.js when the "Sec-Fetch-Dest" header is set to "document". This was intentionally done to block the hot reload from occurring within iframes.

• https://github.com/dotnet/sdk/blob/main/src/BuiltInTools/BrowserRefresh/BrowserRefreshMiddleware.cs#L70
• Prevent browser refresh script from injecting into iframes dotnet/sdk#21954

This merge request will just inject the script from the parent when the Iframe has loaded.

The sample project is still having hot-reload issues that my own demo project is not having.
The error is:
EnC: we do not support patching of existing table cols.

Once I get some more time I'll investigate why this is happening.

[jsakamoto]

@coryjthompson Thank you for your fantastic work! 👍
This is really the feature that everyone is keen to get.

But unfortunately, I feel like it is still too flaky to release as a main branch so far. On my side, as long as sticking to each story page, the hot reload kept working fine, but once I moved from those story pages to another page, such as a "Doc" page, the site stopped with an ununderstandable error. The site no longer worked, even though I hard-reloaded the entire page contents. I had to restart the watch process by entering Ctrl+R on the "dotnet watch" command to recover from that.

I'm considering releasing the functionality of your pull request as an optional feature that requires an opt-out to use it. I'll merge this pull request, but please give me time.

And I'll keep my eyes on your achievement. I hope we can resolve this problem around hot reloading eventually.

Anyway, big thanks to you for your big help to the community! ❤️

[coryjthompson]

Thank you for your kind words!

I agree - it's definitely not ready in its current state. I've just started the MR to share my progress. 😊

I've had some time to look further into the problem. The issue only occurs when the hot-reload script is loaded onto both index.html and the multiple iframe.html.

Hot-reload continues to work as expected if add the following into the index.html:

<script>
    window._dotnet_watch_ws_injected = true;
</script>

This is just a workaround. I'm trying to come up with a solution that can block loading the hot-reload script on index.html only when running dotnet watch and I can still detect if we should inject the hot-reload script into the iframe.

[jsakamoto]

@coryjthompson [FYI] I published a new version of Blazing Story officially. Of course, it includes your contributions about enabling hot reloading. Thank you for spending time on Blazing Story!

[jsakamoto]

@coryjthompson I logged some issues and feature requests to improve the hot reloading on a Blazing Story app.

• https://developercommunity.visualstudio.com/t/Enable-Blazor-hot-reloading-for-multiple/10617384
• [Hot Reload] Enable Blazor hot reloading for multiple browser windows at the same time dotnet/aspnetcore#54415
• [Hot Reload] Enable hot reloading for Blazor inside an iframe dotnet/sdk#51005

I'd appreciate it if you could give them any feedback and vote.