Feat: massive changes to definition of components

This change switches back to the original `ctx<props>` syntax for
commponents. This lets lifetime elision to remove the need to match
exactly which lifetime (props or ctx) gets  carried to the output. As
such, `Props` is currently required to be static. It *is* possible to
loosen this restriction, and will be done in the future, though only
through adding metadata about the props through the Props derive
macro. Implementing the IS_STATIC trait is unsafe, so the derive macro
will do it through some heuristics.

For now, this unlocks sharing vnodes from parents to children, enabling
pass-thru components, fragments, portals, etc.

packages/web/examples/basic.rs

@@ -1,4 +1,4 @@
-//! Basic example that renders a simple domtree to the browser.
+//! Basic example that renders a simple VNode to the browser.
 
 use dioxus_core::prelude::*;
 use dioxus_web::*;
@@ -12,7 +12,7 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
 }
 
-static App: FC<()> = |ctx, _| {
+static App: FC<()> = |ctx| {
     ctx.render(rsx! {
         div {
             h1 {"hello"}
@@ -22,7 +22,7 @@ static App: FC<()> = |ctx, _| {
     })
 };
 
-static C1: FC<()> = |ctx, props| {
+static C1: FC<()> = |ctx| {
     ctx.render(rsx! {
         button {
             "numba 1"
@@ -30,7 +30,7 @@ static C1: FC<()> = |ctx, props| {
     })
 };
 
-static C2: FC<()> = |ctx, props| {
+static C2: FC<()> = |ctx| {
     ctx.render(rsx! {
         button {
             "numba 2"

packages/web/examples/context.rs

@@ -24,7 +24,7 @@ fn main() {
 #[derive(Debug)]
 struct CustomContext([&'static str; 3]);
 
-static Example: FC<()> = |ctx, props| {
+static Example: FC<()> = |ctx| {
     ctx.use_create_context(|| CustomContext(["Jack", "Jill", "Bob"]));
 
     ctx.render(rsx! {
@@ -52,9 +52,9 @@ struct ButtonProps {
     id: u8,
 }
 
-fn CustomButton(ctx: Context, props: &ButtonProps) -> DomTree {
+fn CustomButton(ctx: Context, props: &ButtonProps) -> VNode {
     let names = ctx.use_context::<CustomContext>();
-    let name = names.0[props.id as usize];
+    let name = names.0[ctx.id as usize];
 
     ctx.render(rsx!{
         button {  

packages/web/examples/deep.rs

@@ -1,3 +1,5 @@
+use std::rc::Rc;
+
 use dioxus_web::{dioxus::prelude::*, WebsysRenderer};
 
 fn main() {
@@ -7,8 +9,8 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(CustomA))
 }
 
-fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
-    let (val, set_val) = use_state(&ctx, || "abcdef".to_string());
+fn CustomA(ctx: Context<()>) -> VNode {
+    let (val, set_val) = use_state(&ctx, || "abcdef".to_string() as String);
 
     ctx.render(rsx! {
         div {
@@ -23,46 +25,48 @@ fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
                 onclick: move |_| set_val(val.to_ascii_lowercase())
             }
             components::CustomB {
-                val: val.as_ref()
+                val: val.clone()
             }
         }
     })
 }
 
 mod components {
+    use std::rc::Rc;
+
     use super::*;
 
     #[derive(Debug, Props, PartialEq)]
-    pub struct PropsB<'src> {
-        val: &'src str,
+    pub struct PropsB {
+        val: String,
     }
 
-    pub fn CustomB<'a>(ctx: Context<'a>, props: &'a PropsB<'a>) -> DomTree {
-        let (first, last) = props.val.split_at(3);
+    pub fn CustomB(ctx: Context<PropsB>) -> VNode {
+        let (first, last) = ctx.val.split_at(3);
         ctx.render(rsx! {
             div {
                 class: "m-8"
-                "CustomB {props.val}"
+                "CustomB {ctx.val}"
                 CustomC {
-                    val: first
+                    val: first.to_string()
                 }
                 CustomC {
-                    val: last
+                    val: last.to_string()
                 }
             }
         })
     }
 
     #[derive(Debug, Props, PartialEq)]
-    struct PropsC<'src> {
-        val: &'src str,
+    struct PropsC {
+        val: String,
     }
 
-    fn CustomC<'a>(ctx: Context<'a>, props: &'a PropsC<'a>) -> DomTree {
+    fn CustomC(ctx: Context<PropsC>) -> VNode {
         ctx.render(rsx! {
             div {
                 class: "m-8"
-                "CustomC {props.val}"
+                "CustomC {ctx.val}"
             }
         })
     }

packages/web/examples/demoday.rs

@@ -6,7 +6,7 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App))
 }
 
-fn App(ctx: Context, props: &()) -> DomTree {
+fn App(ctx: Context<()>) -> VNode {
     ctx.render(rsx! {
         main { class: "dark:bg-gray-800 bg-white relative h-screen"
             NavBar {}
@@ -15,7 +15,7 @@ fn App(ctx: Context, props: &()) -> DomTree {
     })
 }
 
-fn NavBar(ctx: Context, props: &()) -> DomTree {
+fn NavBar(ctx: Context<()>) -> VNode {
     ctx.render(rsx!{
         header { class: "h-24 sm:h-32 flex items-center z-30 w-full"
             div { class: "container mx-auto px-6 flex items-center justify-between"
@@ -55,7 +55,7 @@ fn NavBar(ctx: Context, props: &()) -> DomTree {
     })
 }
 
-fn Landing(ctx: Context, props: &()) -> DomTree {
+fn Landing(ctx: Context<()>) -> VNode {
     ctx.render(rsx!{
         div { class: "bg-white dark:bg-gray-800 flex relative z-20 items-center"
             div { class: "container mx-auto px-6 flex flex-col justify-between items-center relative py-8"

packages/web/examples/derive.rs

@@ -8,7 +8,7 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
 }
 
-fn App(ctx: Context, props: &()) -> DomTree {
+fn App(ctx: Context<()>) -> VNode {
     let cansee = use_state_new(&ctx, || false);
     rsx! { in ctx,
         div {
@@ -22,7 +22,7 @@ fn App(ctx: Context, props: &()) -> DomTree {
     }
 }
 
-fn Child(ctx: Context, props: &()) -> DomTree {
+fn Child(ctx: Context<()>) -> VNode {
     rsx! { in ctx,
         section { class: "py-6 bg-coolGray-100 text-coolGray-900"
             div { class: "container mx-auto flex flex-col items-center justify-center p-4 space-y-8 md:p-10 md:px-24 xl:px-48"

packages/web/examples/hello.rs

@@ -9,7 +9,7 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example));
 }
 
-static Example: FC<()> = |ctx, _props| {
+static Example: FC<()> = |ctx| {
     ctx.render(rsx! {
         div {
             span {

packages/web/examples/infer.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 // this is a component
-static Example: FC<()> = |ctx, _props| {
+static Example: FC<()> = |ctx| {
     let (event, set_event) = use_state(&ctx, || None);
 
     let handler = move |evt: MouseEvent| {
@@ -48,10 +48,10 @@ struct ExampleProps {
     name: String
 }
 
-static Example2: FC<ExampleProps> = |ctx, props| {
+static Example2: FC<ExampleProps> = |ctx| {
     ctx.render(rsx!{
         div {
-            h1 {"hello {props.name}"}
+            h1 {"hello {ctx.name}"}
         }
     })
 };

packages/web/examples/jackjill.rs

@@ -9,7 +9,7 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example))
 }
 
-static Example: FC<()> = |ctx, props| {
+static Example: FC<()> = |ctx| {
     let (name, set_name) = use_state(&ctx, || "...?");
 
     log::debug!("Running component....");

packages/web/examples/landingpage.rs

@@ -1,4 +1,4 @@
-//! Basic example that renders a simple domtree to the browser.
+//! Basic example that renders a simple VNode to the browser.
 
 use std::rc::Rc;
 
@@ -12,7 +12,7 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
 }
 
-static App: FC<()> = |ctx, _| {
+static App: FC<()> = |ctx| {
     let (contents, set_contents) = use_state(&ctx, || "asd");
 
     ctx.render(rsx! {

packages/web/examples/landingpage2.rs

@@ -1,4 +1,4 @@
-//! Basic example that renders a simple domtree to the browser.
+//! Basic example that renders a simple VNode to the browser.
 
 use std::rc::Rc;
 
@@ -12,7 +12,7 @@ fn main() {
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
 }
 
-static App: FC<()> = |ctx, _| {
+static App: FC<()> = |ctx| {
     let (contents, set_contents) = use_state(&ctx, || "asd");
 
     ctx.render(rsx! {

packages/web/examples/list.rs

@@ -25,7 +25,7 @@ pub struct TodoItem {
     pub contents: String,
 }
 
-static App: FC<()> = |ctx, _| {
+static App: FC<()> = |ctx| {
     let (draft, set_draft) = use_state(&ctx, || "".to_string());
     let (filter, set_filter) = use_state(&ctx, || FilterState::All);
     let (is_editing, set_is_editing) = use_state(&ctx, || false);
@@ -143,7 +143,7 @@ static App: FC<()> = |ctx, _| {
     ))
 };
 
-pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
+pub fn FilterToggles(ctx: Context<()>) -> VNode {
     // let reducer = recoil::use_callback(&ctx, || ());
     // let items_left = recoil::use_atom_family(&ctx, &TODOS, uuid::Uuid::new_v4());
 

packages/web/examples/query.rs

@@ -5,7 +5,7 @@
 //     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example));
 // }
 
-// fn Example(ctx: Context, props: ()) -> DomTree {
+// fn Example(ctx: Context, props: ()) -> VNode {
 //     let user_data = use_sql_query(&ctx, USER_DATA_QUERY);
 
 //     ctx.render(rsx! {

packages/web/examples/rsxt.rs

@@ -21,8 +21,8 @@ struct ExampleProps {
     initial_name: &'static str,
 }
 
-static Example: FC<ExampleProps> = |ctx, props| {
-    let name = use_state_new(&ctx, move || props.initial_name);
+static Example: FC<ExampleProps> = |ctx| {
+    let name = use_state_new(&ctx, move || ctx.initial_name);
 
     ctx.render(rsx! {
         div { 
@@ -53,12 +53,12 @@ struct ButtonProps<'src, F: Fn(MouseEvent)> {
     handler: F
 }
 
-fn CustomButton<'b, 'a, F: Fn(MouseEvent)>(ctx: Context<'a>, props: &'b ButtonProps<'b, F>) -> DomTree {
+fn CustomButton<'b, 'a, F: Fn(MouseEvent)>(ctx: Context<'a>, props: &'b ButtonProps<'b, F>) -> VNode {
     ctx.render(rsx!{
         button {  
             class: "inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
-            onmouseover: {&props.handler}
-            "{props.name}"
+            onmouseover: {&ctx.handler}
+            "{ctx.name}"
         }
     })
 }
@@ -74,10 +74,10 @@ impl<F: Fn(MouseEvent)> PartialEq for ButtonProps<'_, F> {
 struct PlaceholderProps {
     val: &'static str
 }
-fn Placeholder(ctx: Context, props: &PlaceholderProps) -> DomTree {
+fn Placeholder(ctx: Context, props: &PlaceholderProps) -> VNode {
     ctx.render(rsx!{
         div {
-            "child: {props.val}"
+            "child: {ctx.val}"
         }
     })
 }

packages/web/examples/todomvc/filtertoggles.rs

@@ -2,7 +2,7 @@ use crate::recoil;
 use crate::state::{FilterState, TODOS};
 use dioxus_core::prelude::*;
 
-pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
+pub fn FilterToggles(ctx: Context<()>) -> VNode {
     let reducer = recoil::use_callback(&ctx, || ());
     let items_left = recoil::use_atom_family(&ctx, &TODOS, uuid::Uuid::new_v4());
 

packages/web/examples/todomvc/main.rs

@@ -9,7 +9,7 @@ mod todolist;
 static APP_STYLE: &'static str = include_str!("./style.css");
 
 fn main() {
-    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| {
+    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx| {
         ctx.render(rsx! {
             div {
                 id: "app"

packages/web/examples/todomvc/todoitem.rs

@@ -7,9 +7,9 @@ pub struct TodoEntryProps {
     id: uuid::Uuid,
 }
 
-pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
+pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> VNode {
     let (is_editing, set_is_editing) = use_state(&ctx, || false);
-    let todo = use_atom_family(&ctx, &TODOS, props.id);
+    let todo = use_atom_family(&ctx, &TODOS, ctx.id);
 
     ctx.render(rsx! (
         li {

packages/web/examples/todomvc/todolist.rs

@@ -6,7 +6,7 @@ use crate::{
 };
 use dioxus_core::prelude::*;
 
-pub fn TodoList(ctx: Context, props: &()) -> DomTree {
+pub fn TodoList(ctx: Context<()>) -> VNode {
     let (draft, set_draft) = use_state(&ctx, || "".to_string());
     let (todos, _) = use_state(&ctx, || Vec::<TodoItem>::new());
     let filter = use_atom(&ctx, &FILTER);

packages/web/examples/todomvc_simple.rs

@@ -26,7 +26,7 @@ pub struct TodoItem {
 // =======================
 // Components
 // =======================
-pub fn App(ctx: Context, props: &()) -> DomTree {
+pub fn App(ctx: Context<()>) -> VNode {
     ctx.render(rsx! {
         div {
             id: "app"
@@ -51,7 +51,7 @@ pub fn App(ctx: Context, props: &()) -> DomTree {
     })
 }
 
-pub fn TodoList(ctx: Context, props: &()) -> DomTree {
+pub fn TodoList(ctx: Context<()>) -> VNode {
     let (draft, set_draft) = use_state(&ctx, || "".to_string());
     let (todos, set_todos) = use_state(&ctx, || HashMap::<uuid::Uuid, Rc<TodoItem>>::new());
     let (filter, set_filter) = use_state(&ctx, || FilterState::All);
@@ -100,17 +100,17 @@ pub struct TodoEntryProps {
     item: Rc<TodoItem>,
 }
 
-pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
+pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> VNode {
 // #[inline_props]
 pub fn TodoEntry(
     ctx: Context,
     baller: &impl Fn() -> (),
     caller: &impl Fn() -> (),
     todo: &Rc<TodoItem>,
-) -> DomTree {
-    // pub fn TodoEntry(ctx: Context, todo: &Rc<TodoItem>) -> DomTree {
+) -> VNode {
+    // pub fn TodoEntry(ctx: Context, todo: &Rc<TodoItem>) -> VNode {
     let (is_editing, set_is_editing) = use_state(&ctx, || false);
-    // let todo = &props.item;
+    // let todo = &ctx.item;
 
     ctx.render(rsx! (
         li {
@@ -129,7 +129,7 @@ pub fn TodoEntry(
     ))
 }
 
-pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
+pub fn FilterToggles(ctx: Context<()>) -> VNode {
     let toggles = [
         ("All", "", FilterState::All),
         ("Active", "active", FilterState::Active),

packages/web/examples/todomvcsingle.rs

@@ -72,7 +72,7 @@ impl TodoManager {
     }
 }
 
-pub fn TodoList(ctx: Context, _props: &()) -> DomTree {
+pub fn TodoList(ctx: Context<()>) -> VNode {
     let draft = use_state_new(&ctx, || "".to_string());
     let todos = use_read(&ctx, &TODO_LIST);
     let filter = use_read(&ctx, &FILTER);
@@ -116,9 +116,9 @@ pub struct TodoEntryProps {
     id: Uuid,
 }
 
-pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
+pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> VNode {
     let (is_editing, set_is_editing) = use_state(&ctx, || false);
-    let todo = use_read(&ctx, &TODO_LIST).get(&props.id).unwrap();
+    let todo = use_read(&ctx, &TODO_LIST).get(&ctx.id).unwrap();
 
     ctx.render(rsx! (
         li {
@@ -137,7 +137,7 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
     ))
 }
 
-pub fn FilterToggles(ctx: Context, _props: &()) -> DomTree {
+pub fn FilterToggles(ctx: Context<()>) -> VNode {
     let reducer = TodoManager(use_recoil_api(ctx));
     let items_left = use_read(ctx, &TODOS_LEFT);
 
@@ -178,7 +178,7 @@ pub fn FilterToggles(ctx: Context, _props: &()) -> DomTree {
     }
 }
 
-pub fn Footer(ctx: Context, _props: &()) -> DomTree {
+pub fn Footer(ctx: Context<()>) -> VNode {
     rsx! { in ctx,
         footer {
             class: "info"
@@ -197,7 +197,7 @@ pub fn Footer(ctx: Context, _props: &()) -> DomTree {
 
 const APP_STYLE: &'static str = include_str!("./todomvc/style.css");
 
-fn App(ctx: Context, _props: &()) -> DomTree {
+fn App(ctx: Context<()>) -> VNode {
     use_init_recoil_root(ctx, |_| {});
     rsx! { in ctx,
         div { id: "app"

packages/web/examples/weather.rs

@@ -1,4 +1,4 @@
-//! basic example that renders a simple domtree to the page :)
+//! basic example that renders a simple VNode to the page :)
 //!
 //!
 //!
@@ -9,7 +9,7 @@ fn main() {
     wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
     console_error_panic_hook::set_once();
 
-    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, _| {
+    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx| {
         ctx.render(html! {
             <div>
                 <div class="flex items-center justify-center flex-col">