Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-23 04:33:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix firefox refreshing loop in debug mode (#2214)

Browse source
This commit is contained in:
Evan Almloff 2024-04-02 12:52:40 -05:00 committed by GitHub
parent 4c209e39fe
commit 11bf5ae34f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 24 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/cli/src/assets/autoreload.js
View file

@ -2,29 +2,33 @@
// https://github.com/DioxusLabs/dioxus/tree/master/packages/cli // https://github.com/DioxusLabs/dioxus/tree/master/packages/cli
(function () { (function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
var url = protocol + '//' + window.location.host + '/_dioxus/ws'; var url = protocol + "//" + window.location.host + "/_dioxus/ws";
var poll_interval = 8080; var poll_interval = 8080;
var reload_upon_connect = () => { var reload_upon_connect = (event) => {
window.setTimeout( // Firefox will send a 1001 code when the connection is closed because the page is reloaded
() => { // Only firefox will trigger the onclose event when the page is reloaded manually: https://stackoverflow.com/questions/10965720/should-websocket-onclose-be-triggered-by-user-navigation-or-refresh
var ws = new WebSocket(url); // We should not reload the page in this case
ws.onopen = () => window.location.reload(); if (event.code === 1001) {
ws.onclose = reload_upon_connect; return;
}, }
poll_interval); window.setTimeout(() => {
var ws = new WebSocket(url);
ws.onopen = () => window.location.reload();
ws.onclose = reload_upon_connect;
}, poll_interval);
}; };
var ws = new WebSocket(url); var ws = new WebSocket(url);
ws.onmessage = (ev) => { ws.onmessage = (ev) => {
console.log("Received message: ", ev, ev.data); console.log("Received message: ", ev, ev.data);
if (ev.data == "reload") { if (ev.data == "reload") {
window.location.reload(); window.location.reload();
} }
}; };
ws.onclose = reload_upon_connect; ws.onclose = reload_upon_connect;
})() })();

47
packages/fullstack/dist/index.html vendored
View file

@ -1,47 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>dioxus | ⛺</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
</head>
<body>
<div id="main"></div>
<script type="module">
import init from "/./assets/dioxus/name.js";
init("/./assets/dioxus/name_bg.wasm").then(wasm => {
if (wasm.__wbindgen_start == undefined) {
wasm.main();
}
});
</script>
</body>
</html><script>// Dioxus-CLI
// https://github.com/DioxusLabs/dioxus/tree/master/packages/cli
(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_dioxus/ws';
var poll_interval = 8080;
var reload_upon_connect = () => {
window.setTimeout(
() => {
var ws = new WebSocket(url);
ws.onopen = () => window.location.reload();
ws.onclose = reload_upon_connect;
},
poll_interval);
};
var ws = new WebSocket(url);
ws.onmessage = (ev) => {
if (ev.data == "reload") {
window.location.reload();
}
};
ws.onclose = reload_upon_connect;
})()
</script>

2
packages/fullstack/src/axum_adapter.rs
View file

@ -285,7 +285,7 @@ where
"/_dioxus", "/_dioxus",
Router::new() Router::new()
.route( .route(
"/disconnect", "/ws",
get(|ws: axum::extract::WebSocketUpgrade| async { get(|ws: axum::extract::WebSocketUpgrade| async {
ws.on_upgrade(|mut ws| async move { ws.on_upgrade(|mut ws| async move {
use axum::extract::ws::Message; use axum::extract::ws::Message;

26
packages/fullstack/src/render.rs
View file

@ -263,31 +263,7 @@ impl dioxus_ssr::incremental::WrapBody for FullstackRenderer {
#[cfg(all(debug_assertions, feature = "hot-reload"))] #[cfg(all(debug_assertions, feature = "hot-reload"))]
{ {
// In debug mode, we need to add a script to the page that will reload the page if the websocket disconnects to make full recompile hot reloads work // In debug mode, we need to add a script to the page that will reload the page if the websocket disconnects to make full recompile hot reloads work
let disconnect_js = r#"(function () { let disconnect_js = include_str!("../../cli/src/assets/autoreload.js");
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const url = protocol + '//' + window.location.host + '/_dioxus/disconnect';
const poll_interval = 1000;
const reload_upon_connect = () => {
console.log('Disconnected from server. Attempting to reconnect...');
window.setTimeout(
() => {
// Try to reconnect to the websocket
const ws = new WebSocket(url);
ws.onopen = () => {
// If we reconnect, reload the page
window.location.reload();
}
// Otherwise, try again in a second
reload_upon_connect();
},
poll_interval);
};
// on initial page load connect to the disconnect ws
const ws = new WebSocket(url);
// if we disconnect, start polling
ws.onclose = reload_upon_connect;
})()"#;
to.write_all(r#"<script>"#.as_bytes())?; to.write_all(r#"<script>"#.as_bytes())?;
to.write_all(disconnect_js.as_bytes())?; to.write_all(disconnect_js.as_bytes())?;