mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-22 12:13:04 +00:00
Feat: view -> render
This commit is contained in:
parent
10a236fc65
commit
c8bb392cad
24 changed files with 204 additions and 48 deletions
13
README.md
13
README.md
|
@ -14,7 +14,18 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla
|
|||
static Example: FC<()> = |ctx| {
|
||||
let (value, set_value) = use_state(&ctx, || "...?");
|
||||
|
||||
ctx.view(html! {
|
||||
// custom (more powerful) syntax
|
||||
ctx.render(html! {
|
||||
div {
|
||||
h1 { "Hello, {value}" }
|
||||
button { "?", onclick: move |_| set_value("world!") }
|
||||
button { "?", onclick: move |_| set_value("Dioxus 🎉") }
|
||||
}
|
||||
})
|
||||
|
||||
// Classic syntax
|
||||
// no more updates, frozen
|
||||
ctx.render(html!{
|
||||
<div>
|
||||
<h1> "Hello, {value}" </h1>
|
||||
<button onclick={move |_| set_value("world!")}> "?" </button>
|
||||
|
|
|
@ -9,7 +9,7 @@ struct MyProps {
|
|||
}
|
||||
|
||||
fn Example(ctx: Context<MyProps>) -> VNode {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div> "Hello {ctx.props().name}!" </div>
|
||||
})
|
||||
}
|
||||
|
|
|
@ -20,7 +20,7 @@ mod state {
|
|||
}
|
||||
|
||||
static APP: FC<()> = |ctx, props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
|
||||
<div>
|
||||
|
@ -29,7 +29,7 @@ static APP: FC<()> = |ctx, props| {
|
|||
|
||||
/// Draw the navbar on top of the screen
|
||||
static Navbar: FC<state::Route> = |ctx, props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
|
||||
<div>
|
||||
|
@ -37,7 +37,7 @@ static Navbar: FC<state::Route> = |ctx, props| {
|
|||
};
|
||||
|
||||
static Homepage: FC<()> = |ctx, props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
|
||||
<div>
|
||||
|
|
|
@ -222,7 +222,7 @@ fn Example<'src>(ctx: Context<'src, ()>) -> VNode<'src> {
|
|||
let handler1 = move |_| println!("Value is {}", val); // deref coercion performed here for printing
|
||||
let handler2 = move |_| println!("Value is {}", val); // deref coercion performed here for printing
|
||||
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
<button onclick={handler1}> "Echo value with h1" </button>
|
||||
<button onclick={handler2}> "Echo value with h2" </button>
|
||||
|
@ -316,7 +316,7 @@ Any "dirty" node causes an entire subtree render. Calling "setState" at the very
|
|||
```rust
|
||||
static APP: FC<()> = |ctx, props| {
|
||||
let title = use_context(Title);
|
||||
ctx.view(html!{
|
||||
ctx.render(html!{
|
||||
<div>
|
||||
<h1> "{title}"</h1>
|
||||
<HeavyList /> // VComponent::new(|| (FC, PropsForFc)) -> needs a context to immediately update the component's props imperatively? store the props in a box on bump? store the props on the child?
|
||||
|
@ -336,7 +336,7 @@ static APP: FC<()> = |ctx, props| {
|
|||
})
|
||||
};
|
||||
static HEAVY_LIST: FC<()> = |ctx, props| {
|
||||
ctx.view({
|
||||
ctx.render({
|
||||
{0.100.map(i => <BigElement >)}
|
||||
})
|
||||
};
|
||||
|
|
|
@ -57,7 +57,7 @@ fn serve_app(ctx: &Context<()>) -> VNode {
|
|||
.with_handler("graph", graph_component)
|
||||
.build();
|
||||
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<LiveContext ctx={livecontext}>
|
||||
<App />
|
||||
</ LiveContext>
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
//! An alternative function syntax
|
||||
//!
|
||||
|
||||
|
||||
|
||||
use bumpalo::Bump;
|
||||
use dioxus_core::prelude::{VNode};
|
||||
use dioxus_core::prelude::VNode;
|
||||
|
||||
fn main() {}
|
||||
|
||||
|
@ -47,7 +45,7 @@ fn Example(ctx: Context2<Props>) -> DTree {
|
|||
let val = use_state(&ctx, || String::from("asd"));
|
||||
let props = ctx.props();
|
||||
|
||||
ctx.view(move |b| {
|
||||
ctx.render(move |b| {
|
||||
dioxus_core::nodebuilder::div(b)
|
||||
.child(dioxus_core::nodebuilder::text(props.c.as_str()))
|
||||
.child(virtual_child(b, Props2 { a: val }, AltChild))
|
||||
|
@ -59,7 +57,7 @@ fn Example(ctx: Context2<Props>) -> DTree {
|
|||
fn Example2(ctx: Context2<()>, name: &str, _blah: &str) -> DTree {
|
||||
let val = use_state(&ctx, || String::from("asd"));
|
||||
|
||||
ctx.view(move |b| {
|
||||
ctx.render(move |b| {
|
||||
dioxus_core::nodebuilder::div(b)
|
||||
.child(dioxus_core::nodebuilder::text(name))
|
||||
.child(virtual_child(b, Props2 { a: val }, AltChild))
|
||||
|
@ -81,7 +79,7 @@ struct Props2<'a> {
|
|||
impl Properties for Props2<'_> {}
|
||||
|
||||
fn AltChild(ctx: Context2<Props2>) -> DTree {
|
||||
ctx.view(|_b| {
|
||||
ctx.render(|_b| {
|
||||
//
|
||||
todo!()
|
||||
})
|
||||
|
|
|
@ -19,14 +19,20 @@ struct ListItem {
|
|||
}
|
||||
|
||||
fn app(ctx: Context, props: &Props) -> DomTree {
|
||||
ctx.view(move |b| {
|
||||
let (f, setter) = use_state(&ctx, || 0);
|
||||
|
||||
ctx.render(move |b| {
|
||||
let mut root = builder::div(b);
|
||||
for child in &props.items {
|
||||
// notice that the child directly borrows from our vec
|
||||
// this makes lists very fast (simply views reusing lifetimes)
|
||||
root = root.child(builder::virtual_child(
|
||||
b,
|
||||
ChildProps { item: child },
|
||||
ChildProps {
|
||||
item: child,
|
||||
item_handler: setter,
|
||||
},
|
||||
// <ChildItem item=child hanldler=setter />
|
||||
child_item,
|
||||
));
|
||||
}
|
||||
|
@ -34,10 +40,152 @@ fn app(ctx: Context, props: &Props) -> DomTree {
|
|||
})
|
||||
}
|
||||
|
||||
type StateSetter<T> = dyn Fn(T);
|
||||
|
||||
struct ChildProps<'a> {
|
||||
// Pass down complex structs
|
||||
item: &'a ListItem,
|
||||
|
||||
// Even pass down handlers!
|
||||
item_handler: &'a StateSetter<i32>,
|
||||
}
|
||||
|
||||
fn child_item(_ctx: Context, _props: &ChildProps) -> DomTree {
|
||||
fn child_item(ctx: Context, props: &ChildProps) -> DomTree {
|
||||
todo!()
|
||||
// ctx.render(rsx! {
|
||||
// div {
|
||||
// item: child,
|
||||
// handler: setter,
|
||||
// abc: 123,
|
||||
// onclick: props.item_handler,
|
||||
|
||||
// h1 { "abcd123" }
|
||||
// h2 { "abcd123" }
|
||||
// div {
|
||||
// "abcd123"
|
||||
// h2 { }
|
||||
// p { }
|
||||
// },
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
|
||||
|
||||
rsx! {
|
||||
ChildItem {
|
||||
// props
|
||||
item: child, handler: setter,
|
||||
|
||||
// children
|
||||
div { class:"abcd", abc: 123 },
|
||||
div { class:"abcd", abc: 123 },
|
||||
|
||||
// Auto-text coercion
|
||||
"eyo matie {abc}",
|
||||
|
||||
// Anything that accepts Into<VChild>
|
||||
{},
|
||||
}
|
||||
}
|
||||
|
||||
// dreaming of this syntax
|
||||
#[derive(Properties)]
|
||||
struct ChildProps<'a> {
|
||||
username: &'a str,
|
||||
item_handler: &'a dyn Fn(i32),
|
||||
}
|
||||
|
||||
fn child_item(ctx: Context, props: &ChildProps) -> DomTree {
|
||||
ctx.render(rsx! {
|
||||
div {
|
||||
class: "abc123",
|
||||
abc: 123,
|
||||
onclick: props.item_handler,
|
||||
|
||||
h1 { "Hello, {props.username}!" },
|
||||
h2 { "Welcome the RSX syntax" },
|
||||
div {
|
||||
h3 { "This is a subheader" }
|
||||
button {
|
||||
onclick: props.handler,
|
||||
"This is a button"
|
||||
}
|
||||
"This is child text"
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// This is also nice
|
||||
|
||||
#[dioxus::component]
|
||||
static CHILD: FC = |ctx, username: &str, handler: &dyn Fn(i32)| {
|
||||
ctx.render(rsx! {
|
||||
div {
|
||||
class: "abc123",
|
||||
abc: 123,
|
||||
onclick: handler,
|
||||
|
||||
h1 { "Hello, {username}!" },
|
||||
h2 { "Welcome the RSX syntax" },
|
||||
div {
|
||||
h3 { "This is a subheader" }
|
||||
button {
|
||||
onclick: props.handler,
|
||||
"This is a button"
|
||||
}
|
||||
"This is child text"
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
Menlo, Monaco, 'Courier New', monospace
|
||||
|
||||
|
||||
|
||||
struct Item {
|
||||
name: String,
|
||||
content: String,
|
||||
}
|
||||
|
||||
#[dioxus::live_component]
|
||||
static CHILD: FC = |ctx, username: &str, handler: &dyn Fn(i32)| {
|
||||
// return lazy nodes or
|
||||
let ssr = ctx.suspend(async {
|
||||
let data = fetch("https://google.com")
|
||||
.await?
|
||||
.json::<Item>()
|
||||
.await?;
|
||||
rsx! {
|
||||
div {
|
||||
h1 { "Welcome: {data.name}" }
|
||||
p { "Content: \n {data.content}" }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ctx.render(rsx! {
|
||||
div {
|
||||
class: "abc123",
|
||||
abc: 123,
|
||||
onclick: handler,
|
||||
|
||||
h1 { "Hello, {username}!" },
|
||||
h2 { "Welcome the RSX syntax" },
|
||||
div {
|
||||
h3 { "This is a subheader" }
|
||||
button {
|
||||
onclick: props.handler,
|
||||
"This is a button"
|
||||
}
|
||||
{ssr}
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
*/
|
||||
|
|
|
@ -14,7 +14,7 @@ struct Props {
|
|||
static Example: FC<Props> = |ctx, props| {
|
||||
let value = ctx.use_context(|c: &SomeContext| c.items.last().unwrap());
|
||||
|
||||
ctx.view(move |bump| {
|
||||
ctx.render(move |bump| {
|
||||
button(bump)
|
||||
.on("click", move |_| {
|
||||
println!("Value is {}", props.name);
|
||||
|
@ -26,7 +26,7 @@ static Example: FC<Props> = |ctx, props| {
|
|||
})
|
||||
.finish()
|
||||
})
|
||||
// ctx.view(html! {
|
||||
// ctx.render(html! {
|
||||
// <div>
|
||||
// <button onclick={move |_| println!("Value is {}", value)} />
|
||||
// <button onclick={move |_| println!("Value is {}", value)} />
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
// use dioxus_core::prelude::*;
|
||||
// use once_cell::sync::{Lazy, OnceCell};
|
||||
|
||||
|
||||
use std::ops::Deref;
|
||||
|
||||
/*
|
||||
|
@ -97,7 +96,7 @@ fn t<'a>(ctx: Context<'a>) {
|
|||
// let val2 = refed.as_bytes();
|
||||
});
|
||||
|
||||
ctx.view(move |_b| {});
|
||||
ctx.render(move |_b| {});
|
||||
}
|
||||
|
||||
fn main() {}
|
||||
|
|
|
@ -13,7 +13,7 @@ fn main() {
|
|||
static Example: FC<()> = |ctx, props| {
|
||||
let (name, set_name) = use_state(&ctx, || "...?");
|
||||
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
<h1> "Hello, {name}" </h1>
|
||||
<button onclick={move |_| set_name("jack")}> "jack!" </button>
|
||||
|
|
|
@ -70,7 +70,7 @@ fn main() {}
|
|||
// });
|
||||
|
||||
// // todo!()
|
||||
// ctx.view(html! {
|
||||
// ctx.render(html! {
|
||||
// <div>
|
||||
// <h1> "Products" </h1>
|
||||
// <button> "hello!" </button>
|
||||
|
@ -86,7 +86,7 @@ fn main() {}
|
|||
// // VNodes can be constructed via a builder or the html! macro
|
||||
// // However, both of these are "lazy" - they need to be evaluated (aka, "viewed")
|
||||
// // We can "view" them with Context for ultimate speed while inside components
|
||||
// ctx.view(|bump| {
|
||||
// ctx.render(|bump| {
|
||||
// div(bump)
|
||||
// .attr("class", "edit")
|
||||
// .child(text("Hello"))
|
||||
|
@ -102,7 +102,7 @@ fn main() {}
|
|||
// // We can "view" them with Context for ultimate speed while inside components
|
||||
// // use "phase" style allocation;
|
||||
|
||||
// ctx.view(html! {
|
||||
// ctx.render(html! {
|
||||
// <div>
|
||||
// // your template goes here
|
||||
// // feel free to directly use "name"
|
||||
|
|
|
@ -12,7 +12,7 @@ static Header: FC<()> = |ctx, props| {
|
|||
|
||||
let handler1 = move || println!("Value is {}", inner.current());
|
||||
|
||||
ctx.view(|bump| {
|
||||
ctx.render(|bump| {
|
||||
builder::div(bump)
|
||||
.child(VNode::Component(VComponent::new(
|
||||
Bottom,
|
||||
|
@ -24,7 +24,7 @@ static Header: FC<()> = |ctx, props| {
|
|||
};
|
||||
|
||||
static Bottom: FC<()> = |ctx, props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
<h1> "bruh 1" </h1>
|
||||
<h1> "bruh 2" </h1>
|
||||
|
|
|
@ -30,7 +30,7 @@ struct Props {
|
|||
// }
|
||||
|
||||
static Example: FC<Props> = |ctx, _props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
<h1> "hello world!" </h1>
|
||||
<h1> "hello world!" </h1>
|
||||
|
|
|
@ -44,7 +44,7 @@ mod tests {
|
|||
|
||||
static TestComponent: FC<()> = |ctx, props| {
|
||||
//
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
</div>
|
||||
})
|
||||
|
@ -52,7 +52,7 @@ mod tests {
|
|||
|
||||
static TestComponent2: FC<()> = |ctx, props| {
|
||||
//
|
||||
ctx.view(|bump: &Bump| VNode::text("blah"))
|
||||
ctx.render(|bump: &Bump| VNode::text("blah"))
|
||||
};
|
||||
|
||||
#[test]
|
||||
|
|
|
@ -73,10 +73,10 @@ impl<'a> Context<'a> {
|
|||
/// let lazy_tree = html! {<div>"Hello World"</div>};
|
||||
///
|
||||
/// // Actually build the tree and allocate it
|
||||
/// ctx.view(lazy_tree)
|
||||
/// ctx.render(lazy_tree)
|
||||
/// }
|
||||
///```
|
||||
pub fn view(self, lazy_nodes: impl FnOnce(&'a Bump) -> VNode<'a> + 'a) -> DomTree {
|
||||
pub fn render(self, lazy_nodes: impl FnOnce(&'a Bump) -> VNode<'a> + 'a) -> DomTree {
|
||||
let safe_nodes = lazy_nodes(self.bump);
|
||||
let unsafe_nodes = unsafe { std::mem::transmute::<VNode<'a>, VNode<'static>>(safe_nodes) };
|
||||
self.final_nodes.deref().borrow_mut().replace(unsafe_nodes);
|
||||
|
|
|
@ -30,7 +30,7 @@ mod tests {
|
|||
fn ensure_creation() -> Result<(), ()> {
|
||||
let mut dom = VirtualDom::new(|ctx, props| {
|
||||
//
|
||||
ctx.view(html! { <div>"hello world" </div> })
|
||||
ctx.render(html! { <div>"hello world" </div> })
|
||||
});
|
||||
|
||||
// dom.progress()?;
|
||||
|
|
|
@ -266,7 +266,7 @@ mod tests {
|
|||
use crate::prelude::format_args_f;
|
||||
|
||||
static ListenerTest: FC<()> = |ctx, props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div onclick={|_| println!("Hell owlrld")}>
|
||||
"hello"
|
||||
</div>
|
||||
|
@ -288,7 +288,7 @@ mod tests {
|
|||
fn test_scope() {
|
||||
let example: FC<()> = |ctx, props| {
|
||||
use crate::builder::*;
|
||||
ctx.view(|b| div(b).child(text("a")).finish())
|
||||
ctx.render(|b| div(b).child(text("a")).finish())
|
||||
};
|
||||
|
||||
let props = ();
|
||||
|
@ -318,7 +318,7 @@ mod tests {
|
|||
|
||||
let childprops: ExampleProps<'a> = ExampleProps { name: content };
|
||||
// let childprops: ExampleProps<'a> = ExampleProps { name: content };
|
||||
ctx.view(move |b: &'a Bump| {
|
||||
ctx.render(move |b: &'a Bump| {
|
||||
div(b)
|
||||
.child(text(props.name))
|
||||
// .child(text(props.name))
|
||||
|
@ -336,7 +336,7 @@ mod tests {
|
|||
}
|
||||
|
||||
fn child_example<'b>(ctx: Context<'b>, props: &'b ExampleProps) -> DomTree {
|
||||
ctx.view(move |b| {
|
||||
ctx.render(move |b| {
|
||||
div(b)
|
||||
.child(text(props.name))
|
||||
//
|
||||
|
@ -346,7 +346,7 @@ mod tests {
|
|||
|
||||
static CHILD: FC<ExampleProps> = |ctx, props: &'_ ExampleProps| {
|
||||
// todo!()
|
||||
ctx.view(move |b| {
|
||||
ctx.render(move |b| {
|
||||
div(b)
|
||||
.child(text(props.name))
|
||||
//
|
||||
|
@ -371,7 +371,7 @@ mod tests {
|
|||
// stored value
|
||||
// let (text, set_val) = crate::hooks::use_state(&ctx, || "abcd".to_string());
|
||||
|
||||
ctx.view(move |b| {
|
||||
ctx.render(move |b| {
|
||||
todo!()
|
||||
// div(b)
|
||||
// // .child(text(props.name))
|
||||
|
|
|
@ -290,7 +290,7 @@ mod tests {
|
|||
#[test]
|
||||
fn start_dom() {
|
||||
let mut dom = VirtualDom::new(|ctx, props| {
|
||||
ctx.view(|bump| {
|
||||
ctx.render(|bump| {
|
||||
use crate::builder::*;
|
||||
div(bump).child(text("hello, world")).finish()
|
||||
})
|
||||
|
|
|
@ -15,7 +15,7 @@ fn main() {
|
|||
static App: FC<()> = |ctx, _| {
|
||||
log::info!("Ran component");
|
||||
use dioxus::builder::*;
|
||||
ctx.view(|b| {
|
||||
ctx.render(|b| {
|
||||
div(b)
|
||||
.child(text("hello"))
|
||||
.listeners([on(b, "click", |_| {
|
||||
|
@ -24,7 +24,7 @@ static App: FC<()> = |ctx, _| {
|
|||
})])
|
||||
.finish()
|
||||
})
|
||||
// ctx.view(html! {
|
||||
// ctx.render(html! {
|
||||
// <div onclick={move |_| log::info!("button1 clicked!")}>
|
||||
// "Hello"
|
||||
// // <div class="flex items-center justify-center flex-col">
|
||||
|
|
|
@ -6,7 +6,7 @@ fn main() {
|
|||
}
|
||||
|
||||
static Example: FC<()> = |ctx, _props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
"Hello world!"
|
||||
</div>
|
||||
|
|
|
@ -14,7 +14,7 @@ static Example: FC<()> = |ctx, props| {
|
|||
|
||||
log::debug!("Running component....");
|
||||
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
// <div>
|
||||
// <h1> "Hello, {name}" </h1>
|
||||
// <button onclick={move |_| set_name("jack")}> "jack!" </button>
|
||||
|
|
|
@ -10,7 +10,7 @@ fn main() {
|
|||
console_error_panic_hook::set_once();
|
||||
|
||||
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
<div class="flex items-center justify-center flex-col">
|
||||
<div class="flex items-center justify-center">
|
||||
|
|
|
@ -168,7 +168,7 @@ mod tests {
|
|||
|
||||
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| {
|
||||
todo!()
|
||||
// ctx.view(html! {
|
||||
// ctx.render(html! {
|
||||
// <div>
|
||||
// "Hello world"
|
||||
// <button onclick={move |_| log::info!("button1 clicked!")}> "click me" </button>
|
||||
|
|
|
@ -21,7 +21,7 @@ fn main() {
|
|||
}
|
||||
|
||||
static Example: FC<()> = |ctx, _props| {
|
||||
ctx.view(html! {
|
||||
ctx.render(html! {
|
||||
<div>
|
||||
<div class="flex items-center justify-center flex-col">
|
||||
<div class="flex items-center justify-center">
|
||||
|
|
Loading…
Reference in a new issue