Removing last node from rsx block fails to hot reload

[ealmloff]

Problem

When moving from a rsx block with one component to zero, the CLI says the change is hot reloaded, but the UI is not updated

Steps To Reproduce

Steps to reproduce the behavior:

• Modify the code from:

use dioxus::prelude::*;
fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        "Hi"
    }
}
#[component]
pub fn Hero(msg: String) -> Element {
    rsx! {
        div {
            "{msg}"
        }
    }
}

• Into:

use dioxus::prelude::*;
fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {}
}
#[component]
pub fn Hero(msg: String) -> Element {
    rsx! {
        div {
            "{msg}"
        }
    }
}

Expected behavior

The change should be hot reloaded

Screenshots

Environment:

• Dioxus version: master, 0.6.1
• Rust version: nightly
• OS info: MacOS
• App platform: web

[BleemIs42]

I checked the example code, here is the socket messages received from web client:

use dioxus::prelude::*;
fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        Hero { msg: "Hero 123 " }
    }
}
#[component]
pub fn Hero(msg: String) -> Element {
    rsx! {
        div {
            "{msg}"
        }
    }
}

{
  "HotReload": {
    "templates": [
      {
        "key": { "file": "src/main.rs", "line": 8, "column": 5, "index": 0 },
        "template": {
          "key": null,
          "dynamic_nodes": [{ "Dynamic": 0 }],
          "dynamic_attributes": [],
          "component_values": [{ "Fmted": { "segments": [{ "Literal": { "value": "Hero 123" } }] } }],
          "roots": [{ "type": "Dynamic", "id": 0 }],
          "template": { "roots": [{ "type": "Dynamic", "id": 0 }], "node_paths": [[0]], "attr_paths": [] }
        }
      },
      {
        "key": { "file": "src/main.rs", "line": 14, "column": 5, "index": 0 },
        "template": {
          "key": null,
          "dynamic_nodes": [{ "Formatted": { "segments": [{ "Dynamic": { "id": 0 } }] } }],
          "dynamic_attributes": [],
          "component_values": [],
          "roots": [
            {
              "type": "Element",
              "tag": "div",
              "namespace": null,
              "attrs": [],
              "children": [{ "type": "Dynamic", "id": 0 }]
            }
          ],
          "template": {
            "roots": [
              {
                "type": "Element",
                "tag": "div",
                "namespace": null,
                "attrs": [],
                "children": [{ "type": "Dynamic", "id": 0 }]
              }
            ],
            "node_paths": [[0, 0]],
            "attr_paths": []
          }
        }
      }
    ],
    "assets": [],
    "unknown_files": []
  }
}

use dioxus::prelude::*;
fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        // Hero { msg: "Hero 123 " }
    }
}
#[component]
pub fn Hero(msg: String) -> Element {
    rsx! {
        div {
            "{msg}"
        }
    }
}

{
  "HotReload": {
    "templates": [
      {
        "key": { "file": "src/main.rs", "line": 14, "column": 5, "index": 0 },
        "template": {
          "key": null,
          "dynamic_nodes": [{ "Formatted": { "segments": [{ "Dynamic": { "id": 0 } }] } }],
          "dynamic_attributes": [],
          "component_values": [],
          "roots": [
            {
              "type": "Element",
              "tag": "div",
              "namespace": null,
              "attrs": [],
              "children": [{ "type": "Dynamic", "id": 0 }]
            }
          ],
          "template": {
            "roots": [
              {
                "type": "Element",
                "tag": "div",
                "namespace": null,
                "attrs": [],
                "children": [{ "type": "Dynamic", "id": 0 }]
              }
            ],
            "node_paths": [[0, 0]],
            "attr_paths": []
          }
        }
      }
    ],
    "assets": [],
    "unknown_files": []
  }
}

We can see the second one missed the root element data from templates field, I guess the issue should be on the render side, but I don't where is the code

[ealmloff]

We can see the second one missed the root element data from templates field, I guess the issue should be on the render side, but I don't where is the code

Good catch! Dioxus doesn't allow the roots to be empty. It always renders something even if it is an empty comment node (placeholder) so it can be replaced easily later. We had some logic for this when expanding rsx normally, but it wasn't being applied during hot reloading. #3567 moves it to the parse implementation which is used by both normal expansion and hot reloading

[BleemIs42]

We can see the second one missed the root element data from templates field, I guess the issue should be on the render side, but I don't where is the code

Good catch! Dioxus doesn't allow the roots to be empty. It always renders something even if it is an empty comment node (placeholder) so it can be replaced easily later. We had some logic for this when expanding rsx normally, but it wasn't being applied during hot reloading. #3567 moves it to the parse implementation which is used by both normal expansion and hot reloading

Good job!