Hotreloading of for/if/body, formatted strings, literals, component props, nested rsx, light CLI rewrite, cli TUI

[jkelleyrtp]

Hotreload the contents of for loops, if chains, component bodies, props, attributes, and any literals discovered in rsx!

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:

• rewrite hotreload logic to allow collecting nested templates
• hotreload for loop bodies
• hotreload if chains bodies
• Hotreload logic for ifmt
• enable hotreload for textnodes
• enable hotreload for component props
• A more stable way of assigning IDs to literals/ifmts
• enable hotreload for generic literals (numbers, &str, etc)
• partial expand expressions where possible (autocomplete in expressions)
• PartialExpr
• PartialClosure
• merge element and component parsing for consistency
• merge element and component autoformatting for consistency
• Give all components .children() methods even if they're not used (some sort of warning) if not defined

Tests:

• Parsing attribute
• Parsing block
• Validation of element
• Validation of component

CLI Rewrite (prep for plugins):

• merge all hotreloading behind a single websocket port
• merge all file watchers behind a single watcher
• use a tokio select / tx/rx pattern
• Drop interprocess
• async builders
• TUI for serve

Final todo:

• some merge conflicts broke template registration
• need to wire signal reloading into web
• the .. syntax is not actually generating a spread for elements/components
• Bug around setting a HR literal back to its original
• Remove krates from rsx?

Demo:

hotreload_strings.mov

props_reloaded_too.mov

[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]

• Send HR changes down the pipe on initial connect
• Dont send every template on every update
• Change the ordering of TUI logs
• Filtering system for logs (warn/error/tracing/location) - not required but something simple would be nice
• WASM ws-log coloring bad - all colors are lost, and some html is sent down
  • use dioxus-logger where possible
• Add console logs to tui when a hotreload occurs / file watcher surfaces changes
  • easier debugging and some insight on what is causing the full rebuild
  • log this as a console log
• The TUI perf seems bad - we should test in release mode
  • Scrolling has way too much momentum sometimes
• don’t necessarily wait for an entire line - maybe pull a line or poll for a character
• TUI help screen should not just say “hello world” 10 times.
  • Extra tabs for tutorials, server address, uptime, etc
  • Tabs should start with 1 (keyboard order)
  • Autoswitching on errors should bring you to the build tab
  • Maybe add a settings configurator for settings we can change on the fly?
  • add in network address, https, compiler info, dx verison info
  • maybe move the platform span to the sidebar
  • fix the sidebar collapse responsiveness
• Wire up shortcuts that say they work but definitely don’t work
  • open the app
  • maybe float the desktop app / float on top / surface?
  • open devtools could be cool!
  • clear should clear the terminal
• The web loading screen is pretty bad
  • No percentages for optimizing assets, etc
  • Style is pretty rough too
• A toast would be pretty nice if the build failed (autoclear perhaps?) - +/- some way of accessing our own devtools
• Toast for disconnected devserver
• Add more logging in the cli
  • Virtualdom handles events - do a log
  • ServerFns - inspect payload
  • Expand logs
  • Spanning of events → link to file in editor
• rsx things that weren’t resolved in the way I wanted
  • special key type instead of stringly typed keys
  • would be nice to rethink or remove owners with a vcomp factor type
  • pass-thru of tests again in case we missed things that should be asserts
  • PrettyUnparse should be an extra dev-dependency crate in the workspace?
  • cargo-fmt would be nice too instead of pretty unparse
  • Look at scoring again and see if we can simplify/remove some things
• components take .children() method
• Binary size analysis of core - simple things we can do to improve this?
• windows builds fail - crypto libraries
• playwright fails - loading screens are loaded instead
  • how to fix this? disable loading screens?
• merged attributes with combined if-chains might still not be hotreloadable?
• the changed-lits problem but for files (need a third file or a dynamic pool)
  • remove template hotreload logic in core? move all to a dynamic pool
• Tests for each crate that test feature combinations
  • Some things randomly failing when tested on their own
  • Tests for release mode feature combinations too - some things fail in release with certain features
  • Maybe we can have fewer features in some places?
• How many places is track_caller wrong?
• Duplicate deps / old deps
  • Speed up compile times?
  • CLI compile times have gotten really slow
• More test harness, more speedy tests
• Can we optimize the repo itself for iterating?
  • Changes in Rust-analyzer necessary?
• Caching missing in CI?
• Nightly CLI builds
• Clear old build logs when new build logs come through
  • Currently just accumulating all the build logs
• html crate just be absolutely wilding now
• the gawd damn prelude is sooooo big
  • stuff macros use should not in the prelude if we can help it

Things to test:

• suspense
• rsx outputs
• keys
• diffing
• hotreloading in weird cases
• hotreload scoring
• TUI - this should be bulletproof!!!!!
  • can’t just ship a worse terminal.
• streaming
• feature combinations
• end-to-end
• hydration
• generational-box (sync/non-sync)
• global signals/memos etc
• more async signal stuff
• passing things via cli args and what to do with version mismatches
• liveview
• the launch file had a lot of churn and is suuuuuper annoying

[chungwong]

Does it PR respect

❯ cat .cargo/config.toml 
[build]
rustflags = ["--cfg", "tokio_unstable"]

For some reason it didn't work

-dioxus = { git = "https://github.com/DioxusLabs/dioxus.git", rev = "742721b", features = ["fullstack", "router"] }
+dioxus = { git = "https://github.com/DioxusLabs/dioxus.git", rev = "443b9a4", features = ["fullstack", "router"] }

thread 'main' panicked at /home/chung/.cargo/registry/src/index.crates.io-6f17d22bba15001f/console-subscriber-0.3.0/src/lib.rs:265:9:
task tracing requires Tokio to be built with RUSTFLAGS="--cfg tokio_unstable"!
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

Of course if I run RUSTFLAGS="--cfg tokio_unstable" dx serve then everything works.

Ref: https://github.com/tokio-rs/console?tab=readme-ov-file#using-it