freya icon indicating copy to clipboard operation
freya copied to clipboard

issue: Unexpected behaviors when editing dynamic parts with `hot-reload`

Open jsprog opened this issue 7 months ago • 4 comments

Let's consider the sample code below (counter)

to crash the app:

  • cargo run
  • replace "{count}" with "", then save to see the change reflecting on screen
  • undo the previous change then save. app will crash!

to freeze hot-reload:

  • cargo run
  • change initialization value for count signal
  • or change "{count}" to "count: {count}"
  • or introduce extra content that depends on count signal
  • then save to see nothing reflecting to this and subsequent changes.

development environment:

  • stable-x86_64-unknown-linux-gnu - rustc 1.79.0 (129f3b996 2024-06-10)
  • nightly-x86_64-unknown-linux-gnu - rustc 1.81.0-nightly (59e2c01c2 2024-06-17)
// main.rs

use freya::prelude::*;
use freya::hotreload::FreyaCtx;

fn main() {
    dioxus_hot_reload::hot_reload_init!(Config::<FreyaCtx>::default());
    launch(app)
}

#[component]
fn app() -> Element {
    let mut count = use_signal(|| 0);
    rsx!(
        rect {
            height: "50%",
            width: "100%",
            main_align: "center",
            cross_align: "center",
            background: "rgb(0, 119, 182)",
            color: "white",
            shadow: "0 4 20 5 rgb(0, 0, 0, 80)",
            label {
                font_size: "75",
                font_weight: "bold",
                "{count}"
            }
        }
        rect {
            height: "50%",
            width: "100%",
            main_align: "center",
            cross_align: "center",
            direction: "horizontal",
            Button {
                onclick: move |_| count += 1,
                label { "Increase" }
            }
            Button {
                onclick: move |_| count -= 1,
                label { "Decrease" }
            }
        }

    )
}
# Cargo.toml

[package]
name = "freya-intro"
version = "0.1.0"
edition = "2021"

[dependencies]
dioxus = { version = "0.5.1", default-features = false, features = ["hooks", "macro"] }
dioxus-hot-reload = "0.5.0"
dioxus-router = "0.5.0"
freya = { git="https://github.com/marc2332/freya", features = ["hot-reload"]}
# freya = { version = "0.2.2", features = ["hot-reload"] } # note: this even failed with hot-reload

jsprog avatar Jul 06 '24 18:07 jsprog