Hotreloading of for/if/body, formatted strings, literals, component props, nested rsx, light CLI rewrite, cli TUI (#2258)
Hotreload the contents of for loops, if chains, component bodies, props, attributes, and any literals discovered in rsx! Add a TUI renderer to the CLI. Improve the CLI build system to be async and parallel. Refactor RSX to allow partial expansion of expressions. Merge autofmt implementations for consistency. Merge the representation of elements and components under the hood. Add a diagnostics system for rsx for improved error messages. Drop interprocess and move to websockets for communication between the CLI and the server. Assign IDs to nodes and attributes in a stable way to be used in non compiler contexts. Add hotreloading to any body of component/for loop/if chain/etc. --------- Co-authored-by: Evan Almloff <evanalmloff@gmail.com> Co-authored-by: Liam Mitchell <liamkarlmitchell@gmail.com>
This commit is contained in:
181 files changed
+12755
-10806
No files matched your search
+135
-33
@@ -1,44 +1,146 @@
|
||||
use dioxus_rsx::{CallBody, DynamicContext};
|
||||
use syn::Item;
|
||||
use dioxus_rsx::{hot_reload::Empty, CallBody};
|
||||
use quote::ToTokens;
|
||||
|
||||
use dioxus_rsx::PrettyUnparse;
|
||||
|
||||
#[test]
|
||||
fn rsx_writeout_snapshot() {
|
||||
let body = parse_from_str(include_str!("./parsing/multiexpr.rsx"));
|
||||
|
||||
assert_eq!(body.roots.len(), 1);
|
||||
|
||||
let root = &body.roots[0];
|
||||
|
||||
let el = match root {
|
||||
dioxus_rsx::BodyNode::Element(el) => el,
|
||||
_ => panic!("Expected an element"),
|
||||
fn callbody_ctx() {
|
||||
let item = quote::quote! {
|
||||
div {
|
||||
h1 {
|
||||
id: "Some cool attribute {cool}"
|
||||
}
|
||||
for item in items {
|
||||
"Something {cool}"
|
||||
}
|
||||
Component {
|
||||
"Something {elseish}"
|
||||
}
|
||||
Component2 {
|
||||
"Something {Body}"
|
||||
Component3 {
|
||||
prop: "Something {Body3}",
|
||||
"Something {Body4}"
|
||||
}
|
||||
}
|
||||
something-cool {
|
||||
"Something {cool}ish"
|
||||
}
|
||||
if true {
|
||||
div {
|
||||
"hi! {cool}"
|
||||
}
|
||||
}
|
||||
"hi!"
|
||||
"goodbye!"
|
||||
}
|
||||
{some_expr}
|
||||
};
|
||||
|
||||
assert_eq!(el.name, "circle");
|
||||
let cb: CallBody = syn::parse2(item).unwrap();
|
||||
|
||||
assert_eq!(el.attributes.len(), 5);
|
||||
dbg!(cb.template_idx.get());
|
||||
dbg!(cb.ifmt_idx.get());
|
||||
|
||||
let mut context = DynamicContext::default();
|
||||
let o = context.render_static_node(&body.roots[0]);
|
||||
|
||||
// hi!!!!!
|
||||
// you're probably here because you changed something in how rsx! generates templates and need to update the snapshot
|
||||
// This is a snapshot test. Make sure the contents are checked before committing a new snapshot.
|
||||
let stability_tested = o.to_string();
|
||||
assert_eq!(
|
||||
stability_tested.trim(),
|
||||
include_str!("./parsing/multiexpr.expanded.rsx").trim()
|
||||
);
|
||||
let _template = cb.body.to_template::<Empty>();
|
||||
}
|
||||
|
||||
fn parse_from_str(contents: &str) -> CallBody {
|
||||
// Parse the file
|
||||
let file = syn::parse_file(contents).unwrap();
|
||||
|
||||
// The first token should be the macro call
|
||||
let Item::Macro(call) = file.items.first().unwrap() else {
|
||||
panic!("Expected a macro call");
|
||||
#[test]
|
||||
fn simple_case() {
|
||||
let item = quote::quote! {
|
||||
div {
|
||||
something: "cool",
|
||||
id: "Some cool attribute {cool}",
|
||||
class: "Some cool attribute {cool2}",
|
||||
"hi!"
|
||||
{some_expr}
|
||||
Component {
|
||||
boolish: true,
|
||||
otherish: 123,
|
||||
otherish2: 123.0,
|
||||
otherish3: "dang!",
|
||||
otherish3: "dang! {cool}",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
call.mac.parse_body().unwrap()
|
||||
let cb: CallBody = syn::parse2(item).unwrap();
|
||||
println!("{}", cb.to_token_stream().pretty_unparse());
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn complex_kitchen_sink() {
|
||||
let item = quote::quote! {
|
||||
// complex_carry
|
||||
button {
|
||||
class: "flex items-center pl-3 py-3 pr-2 text-gray-500 hover:bg-indigo-50 rounded",
|
||||
onclick: move |evt| {
|
||||
show_user_menu.set(!show_user_menu.get());
|
||||
evt.cancel_bubble();
|
||||
},
|
||||
onmousedown: move |evt| show_user_menu.set(!show_user_menu.get()),
|
||||
span { class: "inline-block mr-4", icons::icon_14 {} }
|
||||
span { "Settings" }
|
||||
}
|
||||
|
||||
// Complex nesting with handlers
|
||||
li {
|
||||
Link {
|
||||
class: "flex items-center pl-3 py-3 pr-4 {active_class} rounded",
|
||||
to: "{to}",
|
||||
span { class: "inline-block mr-3", icons::icon_0 {} }
|
||||
span { "{name}" }
|
||||
{children.is_some().then(|| rsx! {
|
||||
span {
|
||||
class: "inline-block ml-auto hover:bg-gray-500",
|
||||
onclick: move |evt| {
|
||||
// open.set(!open.get());
|
||||
evt.cancel_bubble();
|
||||
},
|
||||
icons::icon_8 {}
|
||||
}
|
||||
})}
|
||||
}
|
||||
div { class: "px-4", {is_current.then(|| rsx!{ children })} }
|
||||
}
|
||||
|
||||
// No nesting
|
||||
Component {
|
||||
adsasd: "asd",
|
||||
onclick: move |_| {
|
||||
let blah = 120;
|
||||
}
|
||||
}
|
||||
|
||||
// Component path
|
||||
my::thing::Component {
|
||||
adsasd: "asd",
|
||||
onclick: move |_| {
|
||||
let blah = 120;
|
||||
}
|
||||
}
|
||||
|
||||
for i in 0..10 {
|
||||
Component { key: "{i}", blah: 120 }
|
||||
}
|
||||
for i in 0..10 {
|
||||
Component { key: "{i}" }
|
||||
}
|
||||
|
||||
for i in 0..10 {
|
||||
div { key: "{i}", blah: 120 }
|
||||
}
|
||||
|
||||
for i in 0..10 {
|
||||
div { key: "{i}" }
|
||||
}
|
||||
|
||||
div {
|
||||
"asdbascasdbasd"
|
||||
"asbdasbdabsd"
|
||||
{asbdabsdbasdbas}
|
||||
}
|
||||
};
|
||||
|
||||
let _cb: CallBody = syn::parse2(item).unwrap();
|
||||
}
|
||||
Reference in new issue
Block a user