update example to showcase hot reloading

This commit is contained in:
Evan Almloff 2022-05-27 13:04:27 -05:00
parent 3c7db0631b
commit 7acc6a553f

View file

@ -7,6 +7,7 @@ fn main() {
fn app(cx: Scope) -> Element {
let count = use_state(&cx, || 170);
let rsx_code = use_state(&cx, || None);
use_future(&cx, (), move |_| {
let mut count = count.clone();
@ -20,23 +21,66 @@ fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
width: format!("{}px", count),
background_color: "#999999",
width: "100%",
height: "100%",
onclick: move |_| {
count.modify(|count| *count + 10);
},
p{
div {
display: "flex",
flex_direction: "row",
width: "100%",
height: "50%",
textarea {
width: "90%",
value: {
if rsx_code.get().is_none() {
let rsx_text_index: RsxTextIndex = cx.consume_context().unwrap();
let read = rsx_text_index.read();
rsx_code.set(Some(read.get(&line_num).unwrap().clone()));
}
(*rsx_code.current()).clone().unwrap()
},
oninput: move |evt| {
rsx_code.set(Some(evt.value.clone()));
},
}
button {
height: "100%",
width: "10%",
onclick: move |_|{
if let Some(code) = rsx_code.get(){
let rsx_text_index: RsxTextIndex = cx.consume_context().unwrap();
rsx_text_index.insert(line_num.clone(), code.clone());
}
},
"submit"
}
}
p {
"High-Five counter: {count}",
}
Comp{
div {
width: format!("{}px", count),
height: "10px",
background_color: "red",
}
Comp {
color: "#083289"
}
Comp{
Comp {
color: "green"
}
{
(0..10).map(|i| {
cx.render(rsx!{p{"{i}"}})
cx.render(rsx!{p {"{i}"}})
})
}
}