DioxusLabs / dioxus

Fullstack GUI library for web, desktop, mobile, and more.
https://dioxuslabs.com
Apache License 2.0
18.5k stars 703 forks source link

Fix desktop effect race condition #2313

Closed ealmloff closed 1 week ago

ealmloff commented 2 weeks ago

This PR fixes a race condition that can cause effects to run before the edits have been applied to the dom. This was breaking this code:

//! This example shows how to use the `eval` function to run JavaScript code in the webview.
//!
//! Eval will only work with renderers that support javascript - so currently only the web and desktop/mobile renderers
//! that use a webview. Native renderers will throw "unsupported" errors when calling `eval`.

use dioxus::prelude::*;

fn main() {
    launch(app);
}

fn app() -> Element {
    use_effect(move || {
        spawn(async move {
            let mut eval = eval(
                r#"
                    let div = document.getElementById("main");
                    div.innerHTML = "Hi from JS!";
                    return { width: div.clientWidth, height: div.clientHeight };
                "#,
            );

            println!("{:?}", eval.await);
        });
    });

    rsx! {
        div {
            id: "main",
        }
    }
}

To fix the issue, this PR changes dioxus desktop to only run virtual dom futures after the edits from the last render been applied

jkelleyrtp commented 1 week ago

Mind merging in main so we can regenerate the JS file?