Nested RSX does not hot reload

[RustGrow]

When I modify the tailwind css classes inside the loop it says nothing has changed and nothing hotreloaded and the application always rebuilds. https://github.com/DioxusGrow/dioxus_translator/blob/7158dfc84948d777656860834f091949fd416796/src/ui/lang_drop.rs#L42-L69

https://github.com/user-attachments/assets/4cecdfd0-0110-45c7-9b0e-adaec5f17ef4

Environment:

Dioxus version: 0.6.0-alpha.2 (https://github.com/DioxusLabs/dioxus/commit/b25469208f999dd44e7884c42f525d48dca05a32) from github 19/09/24 Rust version: rustc 1.81.0 (eeb90cda1 2024-09-04) OS info: Win11 App platform: web

[ealmloff]

The rsx macro doesn't support hot reloading in nested rsx macros. For example, you cannot hot reload "hello world" in the following code snippet:

use dioxus::prelude::*;

fn main() {
    launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        {
            rsx! {
                "hello world"
            }
        }
    }
}

I think this should be possible to support with the new indexing system if we expand all rsx nested in expressions along with the parent. In the example above, we could expand the inner rsx block with the outer rsx block with a visitor that looks through all children of the expression in the outer rsx

[wcldyx]

When I modify my new project, hot reloading does not work, nor does Tailwind CSS. The text-red-500 property is not taking effect.

#![allow(non_snake_case)]

use dioxus::prelude::*;
use dioxus_logger::tracing::{info, Level};

#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
    #[route("/")]
    Home {},
    #[route("/blog/:id")]
    Blog { id: i32 },
}

fn main() {
    // Init logger
    dioxus_logger::init(Level::INFO).expect("failed to init logger");
    info!("starting app");
    launch(App);
}

fn App() -> Element {
    rsx! {
        Router::<Route> {}
    }
}

#[component]
fn Blog(id: i32) -> Element {
    rsx! {
        Link { to: Route::Home {}, "Go to counter" }
        "Blog post {id}"
    }
}

#[component]
fn Home() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        Link {
            to: Route::Blog {
                id: count()
            },
            "Go to blog"
        }
        div {
            class: "text-red-500",
            h1 { "High-Five counter: {count}" }
            button { onclick: move |_| count += 1, "Up high!" }
            button { onclick: move |_| count -= 1, "Down low!" }
        }
    }
}

[ealmloff]

When I modify my new project, hot reloading does not work, nor does Tailwind CSS. The text-red-500 property is not taking effect.

Tailwind CSS hot reloading is tracked in #1192

[jkelleyrtp]

this is fixed now by binary patching.

dx serve --hotpatch