dioxus icon indicating copy to clipboard operation
dioxus copied to clipboard

Hotreloading of `for/if/body`, formatted strings, literals, component props, nested rsx, format html as rsx

Open jkelleyrtp opened this issue 1 year ago • 3 comments

Hotreload the contents of for loops, if chains, component bodies, props, and any literals discovered in rsx! or under the #[component] macro.

This is breaking since we need to open a bunch of APIs making this no longer compatible with all the support crates in 0.5. Anyways, plan is to ship by end of april so it's fine that we keep this PR out here for a while.

Also brings in binary patching for components for *nix targets under an experimental flag.

Specifics/todos:

  • [x] rewrite hotreload logic to allow collecting nested templates
  • [x] Hotreload logic for ifmt
  • [x] enable hotreload for textnodes
  • [x] enable hotreload for component props
  • [ ] refactor/vect-ify if chains for simpler handling
  • [ ] enable nested rsx! (focusing on props that are rsx)
  • [x] A more stable way of assigning IDs to literals/ifmts
  • [x] enable hotreload for generic literals (numbers, &str, etc)
  • [x] partial expand expressions where possible (autocomplete in expressions)
  • [x] merge element and component parsing for consistency
  • [x] merge element and component autoformatting for consistency
  • [ ] a context system for hot strings such that they can be reused between blocks

Demo:

https://github.com/DioxusLabs/dioxus/assets/10237910/0c685dbc-537d-4676-a7dc-7730fedf161a

https://github.com/DioxusLabs/dioxus/assets/10237910/1eff75a3-3bba-4e28-93b3-9dbd76537ce8

jkelleyrtp avatar Apr 05 '24 23:04 jkelleyrtp

~~This is done, actually, but since it requires breaking changes to core, I'm gonna keep it open until we're ready to start merging break PRs.~~

I have since expanded the scope of this PR to include anything that seems feasibly hotreloadable.

This includes literals anywhere we can find them in components and global signals.

So you could in theory hotreload the majority of basic stuff:

#[component]
fn comp() {
    // Hot reload the value of x
    let x = 0;

    // Hot reload the value of 0
    if x == 0 {
        return rsx! {
            div { "Hello" }
        }
    }

    rsx! {
        // Or hot reload the iterator start and end
        for i in 0..10 {
            div { "World" }
        }
    }
}

My ultimate goal with all this work is to slap a little UI designer frontend on top that we can plug into devtools. This would let you do storybooks and UI construction without ever recompiling. Drag-and-drop UI builder, app route reloading, integration with gen AI etc.

Eventually eventually, get cranelift JIT up and running and then hotreload components themselves.

With the eventual cranelift work, we basically have Dart's hotreload engine and then can probably start to strip out the manual template-based hotreloading. I don't want to get too crazy with hotreloading now since that work will probably make most of this work moot, but the timelines there are much longer.

jkelleyrtp avatar Apr 09 '24 15:04 jkelleyrtp