diff --git a/README.md b/README.md index 4cc9fec32..7b932a58d 100644 --- a/README.md +++ b/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!{

"Hello, {value}"

diff --git a/docs/posts/01-hello-world.md b/docs/posts/01-hello-world.md index 601e735e1..09b93c51d 100644 --- a/docs/posts/01-hello-world.md +++ b/docs/posts/01-hello-world.md @@ -9,7 +9,7 @@ struct MyProps { } fn Example(ctx: Context) -> VNode { - ctx.view(html! { + ctx.render(html! {
"Hello {ctx.props().name}!"
}) } diff --git a/examples/website.rs b/examples/website.rs index 1258aa366..319f6e6c3 100644 --- a/examples/website.rs +++ b/examples/website.rs @@ -20,7 +20,7 @@ mod state { } static APP: FC<()> = |ctx, props| { - ctx.view(html! { + ctx.render(html! {
@@ -29,7 +29,7 @@ static APP: FC<()> = |ctx, props| { /// Draw the navbar on top of the screen static Navbar: FC = |ctx, props| { - ctx.view(html! { + ctx.render(html! {
@@ -37,7 +37,7 @@ static Navbar: FC = |ctx, props| { }; static Homepage: FC<()> = |ctx, props| { - ctx.view(html! { + ctx.render(html! {
diff --git a/notes/SOLVEDPROBLEMS.md b/notes/SOLVEDPROBLEMS.md index 039afddeb..5329ffb74 100644 --- a/notes/SOLVEDPROBLEMS.md +++ b/notes/SOLVEDPROBLEMS.md @@ -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! {
@@ -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!{

"{title}"

// 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 => )} }) }; diff --git a/packages/core/README.md b/packages/core/README.md index 45077ee82..120335e40 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -57,7 +57,7 @@ fn serve_app(ctx: &Context<()>) -> VNode { .with_handler("graph", graph_component) .build(); - ctx.view(html! { + ctx.render(html! { diff --git a/packages/core/examples/alternative.rs b/packages/core/examples/alternative.rs index 65e7d227a..71ade9536 100644 --- a/packages/core/examples/alternative.rs +++ b/packages/core/examples/alternative.rs @@ -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) -> 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) -> 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) -> DTree { - ctx.view(|_b| { + ctx.render(|_b| { // todo!() }) diff --git a/packages/core/examples/borrowed.rs b/packages/core/examples/borrowed.rs index 562349239..e88999390 100644 --- a/packages/core/examples/borrowed.rs +++ b/packages/core/examples/borrowed.rs @@ -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, + }, + // child_item, )); } @@ -34,10 +40,152 @@ fn app(ctx: Context, props: &Props) -> DomTree { }) } +type StateSetter = dyn Fn(T); + struct ChildProps<'a> { + // Pass down complex structs item: &'a ListItem, + + // Even pass down handlers! + item_handler: &'a StateSetter, } -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 + {}, + } +} + +// 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::() + .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} + }, + } + }) +} + +*/ diff --git a/packages/core/examples/contextapi.rs b/packages/core/examples/contextapi.rs index ae4ec58dd..99bbcf168 100644 --- a/packages/core/examples/contextapi.rs +++ b/packages/core/examples/contextapi.rs @@ -14,7 +14,7 @@ struct Props { static Example: FC = |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 = |ctx, props| { }) .finish() }) - // ctx.view(html! { + // ctx.render(html! { //
// diff --git a/packages/core/examples/macrosrc.rs b/packages/core/examples/macrosrc.rs index eda3cf2a2..99a345720 100644 --- a/packages/core/examples/macrosrc.rs +++ b/packages/core/examples/macrosrc.rs @@ -70,7 +70,7 @@ fn main() {} // }); // // todo!() -// ctx.view(html! { +// ctx.render(html! { //
//

"Products"

// @@ -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! { //
// // your template goes here // // feel free to directly use "name" diff --git a/packages/core/examples/nested.rs b/packages/core/examples/nested.rs index e6cd2966c..2a53282c9 100644 --- a/packages/core/examples/nested.rs +++ b/packages/core/examples/nested.rs @@ -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! {

"bruh 1"

"bruh 2"

diff --git a/packages/core/examples/step.rs b/packages/core/examples/step.rs index 8a1272049..bfedf6e5c 100644 --- a/packages/core/examples/step.rs +++ b/packages/core/examples/step.rs @@ -30,7 +30,7 @@ struct Props { // } static Example: FC = |ctx, _props| { - ctx.view(html! { + ctx.render(html! {

"hello world!"

"hello world!"

diff --git a/packages/core/src/component.rs b/packages/core/src/component.rs index 2dff2906a..e4641506d 100644 --- a/packages/core/src/component.rs +++ b/packages/core/src/component.rs @@ -44,7 +44,7 @@ mod tests { static TestComponent: FC<()> = |ctx, props| { // - ctx.view(html! { + ctx.render(html! {
}) @@ -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] diff --git a/packages/core/src/context.rs b/packages/core/src/context.rs index 68154b55d..b8b48fd81 100644 --- a/packages/core/src/context.rs +++ b/packages/core/src/context.rs @@ -73,10 +73,10 @@ impl<'a> Context<'a> { /// let lazy_tree = html! {
"Hello World"
}; /// /// // 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<'static>>(safe_nodes) }; self.final_nodes.deref().borrow_mut().replace(unsafe_nodes); diff --git a/packages/core/src/debug_renderer.rs b/packages/core/src/debug_renderer.rs index 153658920..0d08e8db7 100644 --- a/packages/core/src/debug_renderer.rs +++ b/packages/core/src/debug_renderer.rs @@ -30,7 +30,7 @@ mod tests { fn ensure_creation() -> Result<(), ()> { let mut dom = VirtualDom::new(|ctx, props| { // - ctx.view(html! {
"hello world"
}) + ctx.render(html! {
"hello world"
}) }); // dom.progress()?; diff --git a/packages/core/src/scope.rs b/packages/core/src/scope.rs index b4b84868e..e5fe49acc 100644 --- a/packages/core/src/scope.rs +++ b/packages/core/src/scope.rs @@ -266,7 +266,7 @@ mod tests { use crate::prelude::format_args_f; static ListenerTest: FC<()> = |ctx, props| { - ctx.view(html! { + ctx.render(html! {
"hello"
@@ -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 = |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)) diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 4d896ed1f..866218351 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -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() }) diff --git a/packages/web/examples/basic.rs b/packages/web/examples/basic.rs index fc4e127af..734dc9a2d 100644 --- a/packages/web/examples/basic.rs +++ b/packages/web/examples/basic.rs @@ -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! { //
// "Hello" // //
diff --git a/packages/web/examples/hello.rs b/packages/web/examples/hello.rs index e87dcb358..d7cb17fb9 100644 --- a/packages/web/examples/hello.rs +++ b/packages/web/examples/hello.rs @@ -6,7 +6,7 @@ fn main() { } static Example: FC<()> = |ctx, _props| { - ctx.view(html! { + ctx.render(html! {
"Hello world!"
diff --git a/packages/web/examples/jackjill.rs b/packages/web/examples/jackjill.rs index b97fcb1ef..494c4b842 100644 --- a/packages/web/examples/jackjill.rs +++ b/packages/web/examples/jackjill.rs @@ -14,7 +14,7 @@ static Example: FC<()> = |ctx, props| { log::debug!("Running component...."); - ctx.view(html! { + ctx.render(html! { //
//

"Hello, {name}"

// diff --git a/packages/web/examples/weather.rs b/packages/web/examples/weather.rs index 36c152370..2ebc0e86f 100644 --- a/packages/web/examples/weather.rs +++ b/packages/web/examples/weather.rs @@ -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! {
diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs index 3f789220e..060777651 100644 --- a/packages/web/src/lib.rs +++ b/packages/web/src/lib.rs @@ -168,7 +168,7 @@ mod tests { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| { todo!() - // ctx.view(html! { + // ctx.render(html! { //
// "Hello world" // diff --git a/packages/webview/examples/demo.rs b/packages/webview/examples/demo.rs index 078e8c5c3..36e25758f 100644 --- a/packages/webview/examples/demo.rs +++ b/packages/webview/examples/demo.rs @@ -21,7 +21,7 @@ fn main() { } static Example: FC<()> = |ctx, _props| { - ctx.view(html! { + ctx.render(html! {