Why does this Dioxus.toml not work with hot-reload?

[kirawi]

I have this to use with tailwindcss:

[application]
name = "gud"
default_platform = "web"
out_dir = "dist"
asset_dir = "public"

[web.app]
title = "hi"
[web.watcher]
reload_html = true
watch_path = ["src", "public"]
[web.resource]
style = ["tailwind.css"]
[web.resource.dev]

and it seemingly invalidates any hot-reloading. For a fraction of a second the correct text gets sent, but then it gets reverted. If I ctrl-f5 reload then it takes longer to get reverted, but it still gets reverted. This was fixed by deleting this config, but now I can't use tailwindcss.

[ealmloff]

That config seems to work correctly on my machine. Some more information could be helpful to narrow down the problem:

• What version of the CLI are you using? (I tested with 0.4.1)
• What version of dioxus and dioxus-web are you using? (I tested with the latest commit of the git version)
• What command are you using to start hot reloading? (I tested with dx serve --hot-reload)

[kirawi]

cli: 0.4.1
dioxus: 0.4.0
dioxus-fullstack: 0.4.1
I am running dx serve --features ssr --hot-reload --platform desktop

Code:

// main.rs

#![allow(non_snake_case, unused)]
use dioxus::prelude::*;
use dioxus_fullstack::prelude::*;

mod item;
use item::*;

fn main() {
    LaunchBuilder::new(App).launch();
}

fn Board(cx: Scope) -> Element {
    render! {
        div {
            padding: "0.5em",
            Column {},
        }
    }
}

fn Column(cx: Scope) -> Element {
    let item = Item {
        name: "SAY HI TO MY FRIENDS".into(),
        // Editing the string below does not work with the config
        body: "DO THIS IMMEDIATELY! :D".into(),
    };
    render! {
        div {
            padding: "0.5em",
            "Day 1",
            Card { item: item}
        }
    }
}

fn App(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    cx.render(rsx! {
        body {
            background_color: "black",
            color: "white",
            Board {}
        }
        // h1 { "High-Five counter: {count}" }
        // button { onclick: move |_| count += 1, "Up high!" }
        // button { onclick: move |_| count -= 1, "Down low!" }
    })
}

and

// item.rs
use dioxus::prelude::*;

#[derive(PartialEq, Props)]
pub struct Item {
    // id: usize,
    pub name: String,
    pub body: String,
}

#[inline_props]
pub fn Card(cx: Scope, item: Item) -> Element {
    let Item { name, body } = item;
    render! {
        div {
            display: "flex",
            flex_direction: "column",
            div {
                h2 {
                    "{name}"
                }
                p {
                    "{body}"
                }
            }
        }
    }
}

[kirawi]

Never mind, now I see it happening without a config too.

[ealmloff]

Dioxus 0.5 adds a new fullstack platform for hot reloading that might fix this issue:

cargo install --git https://github.com/ealmloff/dioxus --branch intigrate-collect-assets dioxus-cli
dx serve --hot-reload --platform fullstack

[kirawi]

This causes it to do a full recompile each time. I assume that's not intended?

[ealmloff]

Only very specific parts of the code can be instantly hot reloaded. Most changes will need a full recompile. The rust language doesn't have tooling built for hot reloading. In Dioxus, we intercept edits to static (non-rust) parts of the rsx to hot reload them manually. The code you changed is rust code, so we cannot hot reload that change without recompiling.

But for static rsx changes like changing some static text or tailwind classes, we can hot reload those changes without recompiling. For example, this change can be hot reloaded:

#![allow(non_snake_case, unused)]
use dioxus::prelude::*;
use dioxus_fullstack::prelude::*;

fn main() {
    LaunchBuilder::new(app).launch();
}

fn app(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    cx.render(rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    })
}

Changed into (notice "Up!" -> "Up high!"):

#![allow(non_snake_case, unused)]
use dioxus::prelude::*;
use dioxus_fullstack::prelude::*;

fn main() {
    LaunchBuilder::new(app).launch();
}

fn app(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    cx.render(rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    })
}

[kirawi]

That's unfortunate but understandable. I'm not experienced with front end, but wouldn't it be better to prototype in another language before utilizing Dioxus. Or in practice, is it actually not an issue?