Feat: view -> render

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>

docs/posts/01-hello-world.md

@@ -9,7 +9,7 @@ struct MyProps {
 }
 
 fn Example(ctx: Context<MyProps>) -> VNode {
-    ctx.view(html! { 
+    ctx.render(html! { 
         <div> "Hello {ctx.props().name}!" </div> 
     })
 }

examples/website.rs

@@ -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>

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! {
         <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 >)}
     })
 };

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! {
         <LiveContext ctx={livecontext}>
             <App />
         </ LiveContext>

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<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!()
     })

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,
+                },
+                // <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}
+            },
+        }
+    })
+}
+
+*/

packages/core/examples/contextapi.rs

@@ -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)} />

packages/core/examples/dummy.rs

@@ -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() {}

packages/core/examples/listener.rs

@@ -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>

packages/core/examples/macrosrc.rs

@@ -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"

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! {
         <div>
             <h1> "bruh 1" </h1>
             <h1> "bruh 2" </h1>

packages/core/examples/step.rs

@@ -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>

packages/core/src/component.rs

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

packages/core/src/context.rs

@@ -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);

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! { <div>"hello world" </div> })
+            ctx.render(html! { <div>"hello world" </div> })
         });
 
         // dom.progress()?;

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! {
             <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))

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()
             })

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! {
     //     <div onclick={move |_| log::info!("button1 clicked!")}>
     //         "Hello"
     //         // <div class="flex items-center justify-center flex-col">

packages/web/examples/hello.rs

@@ -6,7 +6,7 @@ fn main() {
 }
 
 static Example: FC<()> = |ctx, _props| {
-    ctx.view(html! {
+    ctx.render(html! {
         <div>
             "Hello world!"
         </div>

packages/web/examples/jackjill.rs

@@ -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>

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! {
             <div>
                 <div class="flex items-center justify-center flex-col">
                     <div class="flex items-center justify-center">

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! {
             //     <div>
             //         "Hello world"
             //         <button onclick={move |_| log::info!("button1 clicked!")}> "click me" </button>

packages/webview/examples/demo.rs

@@ -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">