feat: massage lifetimes

packages/core-macro/src/lib.rs

@@ -30,7 +30,7 @@ pub fn derive_typed_builder(input: proc_macro::TokenStream) -> proc_macro::Token
 ///
 /// ## Complete Reference Guide:
 /// ```
-/// const Example: FC<()> = |cx, props|{
+/// const Example: FC<()> = |(cx, props)|{
 ///     let formatting = "formatting!";
 ///     let formatting_tuple = ("a", "b");
 ///     let lazy_fmt = format_args!("lazily formatted text");

packages/core-macro/src/rsxtemplate.rs

@@ -72,7 +72,7 @@ impl ToTokens for RsxTemplate {
 
         // // create a lazy tree that accepts a bump allocator
         // let final_tokens = quote! {
-        //     dioxus::prelude::LazyNodes::new(move |cx, props|{
+        //     dioxus::prelude::LazyNodes::new(move |(cx, props)|{
         //         let bump = &cx.bump();
 
         //         #new_toks

packages/core/benches/jsframework.rs

@@ -23,7 +23,7 @@ criterion_group!(mbenches, create_rows);
 criterion_main!(mbenches);
 
 fn create_rows(c: &mut Criterion) {
-    static App: FC<()> = |cx, _| {
+    static App: FC<()> = |(cx, _)| {
         let mut rng = SmallRng::from_entropy();
         let rows = (0..10_000_usize).map(|f| {
             let label = Label::new(&mut rng);
@@ -57,7 +57,7 @@ struct RowProps {
     row_id: usize,
     label: Label,
 }
-fn Row<'a>(cx: Context<'a>, props: &RowProps) -> DomTree<'a> {
+fn Row((cx, props): Component<RowProps>) -> DomTree {
     let [adj, col, noun] = props.label.0;
     cx.render(rsx! {
         tr {

packages/core/examples/alternative.rs

@@ -6,7 +6,7 @@ fn main() {
     println!("{}", dom);
 }
 
-pub static EXAMPLE: FC<()> = |cx, _| {
+pub static EXAMPLE: FC<()> = |(cx, _)| {
     let list = (0..10).map(|_f| LazyNodes::new(move |_f| todo!()));
 
     cx.render(LazyNodes::new(move |cx| {

packages/core/examples/async.rs

@@ -5,7 +5,7 @@ fn main() {
     dom.rebuild();
 }
 
-const App: FC<()> = |cx, props| {
+const App: FC<()> = |(cx, props)| {
     let id = cx.scope_id();
     cx.submit_task(Box::pin(async move { id }));
 

packages/core/examples/contextapi.rs

@@ -6,7 +6,7 @@ struct SomeContext {
 }
 
 #[allow(unused)]
-static Example: FC<()> = |cx, props| {
+static Example: FC<()> = |(cx, props)| {
     todo!()
 
     // let value = cx.use_context(|c: &SomeContext| c.items.last().unwrap());

packages/core/examples/jsframework.rs

@@ -1,3 +1,4 @@
+use dioxus::component::Component;
 use dioxus::events::on::MouseEvent;
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
@@ -12,7 +13,7 @@ fn main() {
     assert!(g.edits.len() > 1);
 }
 
-static App: FC<()> = |cx, props| {
+static App: FC<()> = |(cx, props)| {
     let mut rng = SmallRng::from_entropy();
     let rows = (0..10_000_usize).map(|f| {
         let label = Label::new(&mut rng);
@@ -37,7 +38,7 @@ struct RowProps {
     row_id: usize,
     label: Label,
 }
-fn Row<'a>(cx: Context<'a>, props: &'a RowProps) -> DomTree<'a> {
+fn Row((cx, props): Component<RowProps>) -> DomTree {
     let handler = move |evt: MouseEvent| {
         let g = evt.button;
     };

packages/core/examples/vdom_usage.rs

@@ -4,7 +4,7 @@ use dioxus_core::prelude::*;
 
 #[async_std::main]
 async fn main() {
-    static App: FC<()> = |cx, props| cx.render(LazyNodes::new(|f| f.text(format_args!("hello"))));
+    static App: FC<()> = |(cx, props)| cx.render(LazyNodes::new(|f| f.text(format_args!("hello"))));
 
     let mut dom = VirtualDom::new(App);
 

packages/core/src/component.rs

@@ -7,6 +7,40 @@
 
 use crate::innerlude::{Context, DomTree, LazyNodes, FC};
 
+/// A component is a wrapper around a Context and some Props that share a lifetime
+///
+///
+/// # Example
+///
+/// With memoized state:
+/// ```rust
+/// struct State {}
+///
+/// fn Example((cx, props): Component<State>) -> DomTree {
+///     // ...
+/// }
+/// ```
+///
+/// With borrowed state:
+/// ```rust
+/// struct State<'a> {
+///     name: &'a str
+/// }
+///
+/// fn Example<'a>((cx, props): Component<'a, State>) -> DomTree<'a> {
+///     // ...
+/// }
+/// ```
+///
+/// With owned state as a closure:
+/// ```rust
+/// static Example: FC<()> = |(cx, props)| {
+///     // ...
+/// };
+/// ```
+///
+pub type Component<'a, T> = (Context<'a>, &'a T);
+
 /// Create inline fragments using Component syntax.
 ///
 /// Fragments capture a series of children without rendering extra nodes.
@@ -29,7 +63,7 @@ use crate::innerlude::{Context, DomTree, LazyNodes, FC};
 /// You want to use this free-function when your fragment needs a key and simply returning multiple nodes from rsx! won't cut it.
 ///
 #[allow(non_upper_case_globals, non_snake_case)]
-pub fn Fragment<'a>(cx: Context<'a>, _: &'a ()) -> DomTree<'a> {
+pub fn Fragment((cx, _): Component<()>) -> DomTree {
     cx.render(LazyNodes::new(|f| f.fragment_from_iter(cx.children())))
 }
 

packages/core/src/context.rs

@@ -69,7 +69,7 @@ impl<'src> Context<'src> {
     /// ## Example
     ///
     /// ```rust
-    /// const App: FC<()> = |cx, props|{
+    /// const App: FC<()> = |(cx, props)|{
     ///     cx.render(rsx!{
     ///         CustomCard {
     ///             h1 {}
@@ -78,7 +78,7 @@ impl<'src> Context<'src> {
     ///     })
     /// }
     ///
-    /// const CustomCard: FC<()> = |cx, props|{
+    /// const CustomCard: FC<()> = |(cx, props)|{
     ///     cx.render(rsx!{
     ///         div {
     ///             h1 {"Title card"}
@@ -181,12 +181,12 @@ impl<'src> Context<'src> {
     /// ```
     /// struct SharedState(&'static str);
     ///
-    /// static App: FC<()> = |cx, props|{
+    /// static App: FC<()> = |(cx, props)|{
     ///     cx.provide_state(SharedState("world"));
     ///     rsx!(cx, Child {})
     /// }
     ///
-    /// static Child: FC<()> = |cx, props|{
+    /// static Child: FC<()> = |(cx, props)|{
     ///     let state = cx.consume_state::<SharedState>();
     ///     rsx!(cx, div { "hello {state.0}" })
     /// }
@@ -221,7 +221,7 @@ impl<'src> Context<'src> {
     /// # Example
     ///
     /// ```rust
-    /// static App: FC<()> = |cx, props| {
+    /// static App: FC<()> = |(cx, props)| {
     ///     todo!();
     ///     rsx!(cx, div { "Subtree {id}"})
     /// };
@@ -238,7 +238,7 @@ impl<'src> Context<'src> {
     /// # Example
     ///
     /// ```rust
-    /// static App: FC<()> = |cx, props| {
+    /// static App: FC<()> = |(cx, props)| {
     ///     let id = cx.get_current_subtree();
     ///     rsx!(cx, div { "Subtree {id}"})
     /// };

packages/core/src/hooks.rs

@@ -18,7 +18,7 @@ use std::{any::Any, cell::RefCell, future::Future, ops::Deref, rc::Rc};
 /// Returns the handle to the task and the value (if it is ready, else None).
 ///
 /// ```
-/// static Example: FC<()> = |cx, props| {
+/// static Example: FC<()> = |(cx, props)| {
 ///     let (task, value) = use_task(|| async {
 ///         timer::sleep(Duration::from_secs(1)).await;
 ///         "Hello World"

packages/core/src/lib.rs

@@ -57,7 +57,7 @@ pub(crate) mod innerlude {
     pub use crate::virtual_dom::*;
 
     pub type DomTree<'a> = Option<VNode<'a>>;
-    pub type FC<P> = for<'a> fn(Context<'a>, &'a P) -> DomTree<'a>;
+    pub type FC<P> = for<'a> fn(Component<'a, P>) -> DomTree<'a>;
 }
 
 pub use crate::innerlude::{
@@ -67,7 +67,7 @@ pub use crate::innerlude::{
 };
 
 pub mod prelude {
-    pub use crate::component::{fc_to_builder, Fragment, Properties};
+    pub use crate::component::{fc_to_builder, Component, Fragment, Properties};
     pub use crate::context::Context;
     pub use crate::hooks::*;
     pub use crate::innerlude::{DioxusElement, DomTree, LazyNodes, Mutations, NodeFactory, FC};

packages/core/src/nodes.rs

@@ -526,7 +526,7 @@ impl<'a> NodeFactory<'a> {
         let caller: &'a mut dyn for<'b> Fn(&'b Scope) -> DomTree<'b> =
             bump.alloc(move |scope: &Scope| -> DomTree {
                 let props: &'_ P = unsafe { &*(raw_props as *const P) };
-                let res = component(Context { scope }, props);
+                let res = component((Context { scope }, props));
                 unsafe { std::mem::transmute(res) }
             });
 

packages/core/src/scope.rs

@@ -60,7 +60,7 @@ impl Scope {
     ///
     /// # Example
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     ///
     /// let base = dom.base_scope();
@@ -82,7 +82,7 @@ impl Scope {
     /// # Example
     ///
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     ///
     /// let base = dom.base_scope();
@@ -110,7 +110,7 @@ impl Scope {
     /// # Example
     ///
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     ///
     /// let base = dom.base_scope();
@@ -130,7 +130,7 @@ impl Scope {
     /// # Example
     ///
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     ///
     /// let base = dom.base_scope();
@@ -148,7 +148,7 @@ impl Scope {
     /// # Example
     ///
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     /// let base = dom.base_scope();
     ///

packages/core/src/virtual_dom.rs

@@ -33,7 +33,7 @@ use std::{any::Any, rc::Rc};
 ///
 /// Example
 /// ```rust
-/// static App: FC<()> = |cx, props|{
+/// static App: FC<()> = |(cx, props)|{
 ///     cx.render(rsx!{
 ///         div {
 ///             "Hello World"
@@ -145,7 +145,7 @@ impl VirtualDom {
         // Safety: this callback is only valid for the lifetime of the root props
         let root_caller: Rc<dyn Fn(&Scope) -> DomTree> = Rc::new(move |scope: &Scope| unsafe {
             let props = _p.downcast_ref::<P>().unwrap();
-            std::mem::transmute(root(Context { scope }, props))
+            std::mem::transmute(root((Context { scope }, props)))
         });
 
         let scheduler = Scheduler::new(sender, receiver);
@@ -196,7 +196,7 @@ impl VirtualDom {
     /// struct AppProps {
     ///     route: &'static str
     /// }
-    /// static App: FC<AppProps> = |cx, props|cx.render(rsx!{ "route is {cx.route}" });
+    /// static App: FC<AppProps> = |(cx, props)|cx.render(rsx!{ "route is {cx.route}" });
     ///
     /// let mut dom = VirtualDom::new_with_props(App, AppProps { route: "start" });
     ///
@@ -222,7 +222,7 @@ impl VirtualDom {
             let root_caller: Box<dyn Fn(&Scope) -> DomTree> =
                 Box::new(move |scope: &Scope| unsafe {
                     let props: &'_ P = &*(props_ptr as *const P);
-                    std::mem::transmute(root(Context { scope }, props))
+                    std::mem::transmute(root((Context { scope }, props)))
                 });
 
             root_scope.update_scope_dependencies(&root_caller, ScopeChildren(&[]));
@@ -246,7 +246,7 @@ impl VirtualDom {
     ///
     /// # Example
     /// ```
-    /// static App: FC<()> = |cx, props|cx.render(rsx!{ "hello world" });
+    /// static App: FC<()> = |(cx, props)|cx.render(rsx!{ "hello world" });
     /// let mut dom = VirtualDom::new();
     /// let edits = dom.rebuild();
     ///
@@ -271,7 +271,7 @@ impl VirtualDom {
     ///     value: Shared<&'static str>,
     /// }
     ///
-    /// static App: FC<AppProps> = |cx, props|{
+    /// static App: FC<AppProps> = |(cx, props)|{
     ///     let val = cx.value.borrow();
     ///     cx.render(rsx! { div { "{val}" } })
     /// };
@@ -333,7 +333,7 @@ impl VirtualDom {
     /// # Example
     ///
     /// ```no_run
-    /// static App: FC<()> = |cx, props|rsx!(cx, div {"hello"} );
+    /// static App: FC<()> = |(cx, props)|rsx!(cx, div {"hello"} );
     /// let mut dom = VirtualDom::new(App);
     /// loop {
     ///     let deadline = TimeoutFuture::from_ms(16);

packages/core/tests/borrowedstate.rs

@@ -3,7 +3,7 @@ use dioxus_core as dioxus;
 use dioxus_core_macro::*;
 use dioxus_html as dioxus_elements;
 
-static Parent: FC<()> = |cx, props| {
+static Parent: FC<()> = |(cx, props)| {
     let value = cx.use_hook(|_| String::new(), |f| &*f, |_| {});
 
     cx.render(rsx! {
@@ -21,7 +21,7 @@ struct ChildProps<'a> {
     name: &'a String,
 }
 
-fn Child<'a>(cx: Context<'a>, props: &'a ChildProps) -> DomTree<'a> {
+fn Child<'a>((cx, props): Component<'a, ChildProps>) -> DomTree<'a> {
     cx.render(rsx! {
         div {
             h1 { "it's nested" }
@@ -35,7 +35,7 @@ struct Grandchild<'a> {
     name: &'a String,
 }
 
-fn Child2<'a>(cx: Context<'a>, props: &Grandchild) -> DomTree<'a> {
+fn Child2<'a>((cx, props): Component<'a, Grandchild>) -> DomTree<'a> {
     cx.render(rsx! {
         div { "Hello {props.name}!" }
     })

packages/core/tests/create_dom.rs

@@ -19,7 +19,7 @@ fn new_dom<P: 'static + Send>(app: FC<P>, props: P) -> VirtualDom {
 
 #[test]
 fn test_original_diff() {
-    static APP: FC<()> = |cx, props| {
+    static APP: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             div {
                 div {
@@ -55,7 +55,7 @@ fn test_original_diff() {
 
 #[test]
 fn create() {
-    static APP: FC<()> = |cx, props| {
+    static APP: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             div {
                 div {
@@ -118,7 +118,7 @@ fn create() {
 
 #[test]
 fn create_list() {
-    static APP: FC<()> = |cx, props| {
+    static APP: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             {(0..3).map(|f| rsx!{ div {
                 "hello"
@@ -167,7 +167,7 @@ fn create_list() {
 
 #[test]
 fn create_simple() {
-    static APP: FC<()> = |cx, props| {
+    static APP: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             div {}
             div {}
@@ -205,7 +205,7 @@ fn create_simple() {
 }
 #[test]
 fn create_components() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             Child { "abc1" }
             Child { "abc2" }
@@ -213,7 +213,7 @@ fn create_components() {
         })
     };
 
-    static Child: FC<()> = |cx, props| {
+    static Child: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             h1 {}
             div { {cx.children()} }
@@ -266,7 +266,7 @@ fn create_components() {
 }
 #[test]
 fn anchors() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             {true.then(|| rsx!{ div { "hello" } })}
             {false.then(|| rsx!{ div { "goodbye" } })}
@@ -295,13 +295,13 @@ fn anchors() {
 
 #[test]
 fn suspended() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         let val = use_suspense(
             cx,
             || async {
                 //
             },
-            |cx, _| cx.render(rsx! { "hi "}),
+            |cx, p| cx.render(rsx! { "hi "}),
         );
         cx.render(rsx! { {val} })
     };

packages/core/tests/display_vdom.rs

@@ -16,7 +16,7 @@ const IS_LOGGING_ENABLED: bool = true;
 
 #[test]
 fn please_work() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             div {
                 hidden: "true"
@@ -30,7 +30,7 @@ fn please_work() {
         })
     };
 
-    static Child: FC<()> = |cx, props| {
+    static Child: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             div { "child" }
         })

packages/core/tests/eventsystem.rs

@@ -8,7 +8,7 @@ use dioxus_html as dioxus_elements;
 
 #[async_std::test]
 async fn event_queue_works() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             div { "hello world" }
         })

packages/core/tests/hooks.rs

@@ -10,7 +10,7 @@ type Shared<T> = Rc<RefCell<T>>;
 #[test]
 fn sample_refs() {
 
-    // static App: FC<()> = |cx, props|{
+    // static App: FC<()> = |(cx, props)|{
     //     let div_ref = use_node_ref::<MyRef, _>(cx);
 
     //     cx.render(rsx! {

packages/core/tests/lifecycle.rs

@@ -20,7 +20,7 @@ fn manual_diffing() {
         value: Shared<&'static str>,
     }
 
-    static App: FC<AppProps> = |cx, props| {
+    static App: FC<AppProps> = |(cx, props)| {
         let val = props.value.lock().unwrap();
         cx.render(rsx! { div { "{val}" } })
     };

packages/core/tests/sharedstate.rs

@@ -17,12 +17,12 @@ fn new_dom() -> TestDom {
 fn shared_state_test() {
     struct MySharedState(&'static str);
 
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.provide_state(MySharedState("world!"));
         rsx!(cx, Child {})
     };
 
-    static Child: FC<()> = |cx, props| {
+    static Child: FC<()> = |(cx, props)| {
         let shared = cx.consume_state::<MySharedState>()?;
         rsx!(cx, "Hello, {shared.0}")
     };

packages/core/tests/vdom_rebuild.rs

@@ -15,7 +15,7 @@ use dioxus_html as dioxus_elements;
 
 #[test]
 fn app_runs() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         //
         cx.render(rsx!( div{"hello"} ))
     };
@@ -26,7 +26,7 @@ fn app_runs() {
 
 #[test]
 fn fragments_work() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx!(
             div{"hello"}
             div{"goodbye"}
@@ -40,7 +40,7 @@ fn fragments_work() {
 
 #[test]
 fn lists_work() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx!(
             h1 {"hello"}
             {(0..6).map(|f| rsx!(span{ "{f}" }))}
@@ -53,7 +53,7 @@ fn lists_work() {
 
 #[test]
 fn conditional_rendering() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx!(
             h1 {"hello"}
             {true.then(|| rsx!(span{ "a" }))}
@@ -70,13 +70,13 @@ fn conditional_rendering() {
 
 #[test]
 fn child_components() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx!(
             {true.then(|| rsx!(Child { }))}
             {false.then(|| rsx!(Child { }))}
         ))
     };
-    static Child: FC<()> = |cx, props| {
+    static Child: FC<()> = |(cx, props)| {
         cx.render(rsx!(
             h1 {"hello"}
             h1 {"goodbye"}
@@ -89,7 +89,7 @@ fn child_components() {
 
 #[test]
 fn suspended_works() {
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         let title = use_suspense(cx, || async { "bob" }, |cx, f| cx.render(rsx! { "{f}"}));
         cx.render(rsx!("hello" { title }))
     };

packages/desktop/README.md

@@ -7,7 +7,7 @@ fn main() {
     dioxus::desktop::launch(App, |c| c)
 }
 
-static App: FC<()> = |cx, props| {
+static App: FC<()> = |(cx, props)| {
     let (count, set_count) = use_state(cx, || 0);
 
     cx.render(rsx!(
@@ -34,7 +34,7 @@ Window management, system trays, notifications, and other desktop-related functi
 Managing windows is done by simply rendering content into a `WebviewWindow` component. 
 
 ```rust
-static App: FC<()> = |cx, props| {
+static App: FC<()> = |(cx, props)| {
     rsx!(cx, WebviewWindow { "hello world" } )
 }
 ```
@@ -46,7 +46,7 @@ Notifications also use a declarative approach. Sending a notification has never
 The api has been somewhat modeled after https://github.com/mikaelbr/node-notifier
 
 ```rust
-static Notifications: FC<()> = |cx, props| {
+static Notifications: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         Notification {
             title: "title"
@@ -78,7 +78,7 @@ static Notifications: FC<()> = |cx, props| {
 Dioxus Desktop supports app trays, which can be built with native menu groups or with a custom window.
 
 ```rust
-static Tray: FC<()> = |cx, props| {
+static Tray: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         GlobalTray {
             MenuGroup {
@@ -90,7 +90,7 @@ static Tray: FC<()> = |cx, props| {
 };
 
 // using a builder
-static Tray: FC<()> = |cx, props| {
+static Tray: FC<()> = |(cx, props)| {
     let menu = MenuGroup::builder(cx)
         .with_items([
             MenuGroupItem::builder()
@@ -107,7 +107,7 @@ static Tray: FC<()> = |cx, props| {
 }
 
 // or with a custom window
-static Tray: FC<()> = |cx, props| {
+static Tray: FC<()> = |(cx, props)| {
     rsx!(cx, GlobalTray { div { "custom buttons here" } })
 };
 ```
@@ -116,7 +116,7 @@ static Tray: FC<()> = |cx, props| {
 Declaring menus is convenient and cross-platform.
 
 ```rust
-static Menu: FC<()> = |cx, props| {
+static Menu: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         MenuBarMajorItem { title: "File"
             MenuGroup {

packages/desktop/examples/crm.rs

@@ -21,7 +21,7 @@ pub struct Client {
     pub description: String,
 }
 
-static App: FC<()> = |cx, _| {
+static App: FC<()> = |(cx, _)| {
     let scene = use_state(cx, || Scene::ClientsList);
     let clients = use_ref(cx, || vec![] as Vec<Client>);
 

packages/desktop/examples/demo.rs

@@ -8,7 +8,7 @@ fn main() {
     dioxus_desktop::launch(App, |c| c);
 }
 
-static App: FC<()> = |cx, props| {
+static App: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         div {
             "hello world!"

packages/desktop/src/desktop_context.rs

@@ -1,5 +1,6 @@
 use std::cell::RefCell;
 
+use dioxus::prelude::Component;
 use dioxus_core as dioxus;
 use dioxus_core::{Context, DomTree, LazyNodes, NodeFactory, Properties};
 use dioxus_core_macro::Props;
@@ -53,7 +54,7 @@ pub struct WebviewWindowProps<'a> {
 ///
 ///
 ///
-pub fn WebviewWindow<'a>(cx: Context<'a>, props: &'a WebviewWindowProps) -> DomTree<'a> {
+pub fn WebviewWindow<'a>((cx, props): Component<'a, WebviewWindowProps>) -> DomTree<'a> {
     let dtcx = cx.consume_state::<RefCell<DesktopContext>>()?;
 
     cx.use_hook(
@@ -89,7 +90,7 @@ fn syntax_works() {
     use dioxus_hooks::*;
     use dioxus_html as dioxus_elements;
 
-    static App: FC<()> = |cx, props| {
+    static App: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             // left window
             WebviewWindow {

packages/hooks/examples/lifecycle.rs

@@ -10,7 +10,7 @@ fn main() {}
 //     Remvoe,
 // }
 
-// static Component: FC<()> = |cx, props|{
+// static Component: FC<()> = |(cx, props)|{
 //     let (tasks, dispatch) = use_reducer(
 //         cx,
 //         || CompState { tasks: Vec::new() },

packages/hooks/src/usecollection.rs

@@ -36,7 +36,7 @@ uses the same memoization on top of the use_context API.
 
 Here's a fully-functional todo app using the use_map API:
 ```rust
-static TodoList: FC<()> = |cx, props|{
+static TodoList: FC<()> = |(cx, props)|{
     let todos = use_map(cx, || HashMap::new());
     let input = use_ref(|| None);
 

packages/hooks/src/usestate.rs

@@ -35,7 +35,7 @@ use std::{
 ///
 /// Usage:
 /// ```ignore
-/// const Example: FC<()> = |cx, props|{
+/// const Example: FC<()> = |(cx, props)|{
 ///     let counter = use_state(cx, || 0);
 ///     let increment = |_| counter += 1;
 ///     let decrement = |_| counter += 1;

packages/ssr/README.md

@@ -5,7 +5,7 @@ Render a Dioxus VirtualDOM to a string.
 
 ```rust
 // Our app:
-const App: FC<()> = |cx, props| rsx!(cx, div {"hello world!"});
+const App: FC<()> = |(cx, props)| rsx!(cx, div {"hello world!"});
 
 // Build the virtualdom from our app
 let mut vdom = VirtualDOM::new(App);

packages/ssr/examples/basic.rs

@@ -12,7 +12,7 @@ fn main() {
     )
 }
 
-pub static App: FC<()> = |cx, props| {
+pub static App: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         div {
             class: "overflow-hidden"

packages/ssr/examples/tide.rs

@@ -42,7 +42,7 @@ fn main() {}
 //     initial_name: String,
 // }
 
-// static Example: FC<ExampleProps> = |cx, props| {
+// static Example: FC<ExampleProps> = |(cx, props)| {
 //     let dispaly_name = use_state(cx, move || props.initial_name.clone());
 
 //     cx.render(rsx! {

packages/ssr/examples/tofile.rs

@@ -24,7 +24,7 @@ fn main() {
     .unwrap();
 }
 
-pub static App: FC<()> = |cx, props| {
+pub static App: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         div { class: "overflow-hidden"
             link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
@@ -39,7 +39,7 @@ pub static App: FC<()> = |cx, props| {
     ))
 };
 
-pub static Header: FC<()> = |cx, props| {
+pub static Header: FC<()> = |(cx, props)| {
     cx.render(rsx! {
         div {
             header { class: "text-gray-400 bg-gray-900 body-font"
@@ -65,7 +65,7 @@ pub static Header: FC<()> = |cx, props| {
     })
 };
 
-pub static Hero: FC<()> = |cx, props| {
+pub static Hero: FC<()> = |(cx, props)| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -103,7 +103,7 @@ pub static Hero: FC<()> = |cx, props| {
         }
     })
 };
-pub static Entry: FC<()> = |cx, props| {
+pub static Entry: FC<()> = |(cx, props)| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -116,7 +116,7 @@ pub static Entry: FC<()> = |cx, props| {
     })
 };
 
-pub static StacksIcon: FC<()> = |cx, props| {
+pub static StacksIcon: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         svg {
             // xmlns: "http://www.w3.org/2000/svg"
@@ -131,7 +131,7 @@ pub static StacksIcon: FC<()> = |cx, props| {
         }
     ))
 };
-pub static RightArrowIcon: FC<()> = |cx, props| {
+pub static RightArrowIcon: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         svg {
             fill: "none"

packages/ssr/src/lib.rs

@@ -44,7 +44,7 @@ pub fn render_vdom_scope(vdom: &VirtualDom, scope: ScopeId) -> Option<String> {
 ///
 /// ## Example
 /// ```ignore
-/// static App: FC<()> = |cx, props|cx.render(rsx!(div { "hello world" }));
+/// static App: FC<()> = |(cx, props)|cx.render(rsx!(div { "hello world" }));
 /// let mut vdom = VirtualDom::new(App);
 /// vdom.rebuild();
 ///
@@ -243,13 +243,13 @@ mod tests {
     use dioxus_core_macro::*;
     use dioxus_html as dioxus_elements;
 
-    static SIMPLE_APP: FC<()> = |cx, props| {
+    static SIMPLE_APP: FC<()> = |(cx, props)| {
         cx.render(rsx!(div {
             "hello world!"
         }))
     };
 
-    static SLIGHTLY_MORE_COMPLEX: FC<()> = |cx, props| {
+    static SLIGHTLY_MORE_COMPLEX: FC<()> = |(cx, props)| {
         cx.render(rsx! {
             div {
                 title: "About W3Schools"
@@ -268,14 +268,14 @@ mod tests {
         })
     };
 
-    static NESTED_APP: FC<()> = |cx, props| {
+    static NESTED_APP: FC<()> = |(cx, props)| {
         cx.render(rsx!(
             div {
                 SIMPLE_APP {}
             }
         ))
     };
-    static FRAGMENT_APP: FC<()> = |cx, props| {
+    static FRAGMENT_APP: FC<()> = |(cx, props)| {
         cx.render(rsx!(
             div { "f1" }
             div { "f2" }
@@ -331,7 +331,7 @@ mod tests {
 
     #[test]
     fn styles() {
-        static STLYE_APP: FC<()> = |cx, props| {
+        static STLYE_APP: FC<()> = |(cx, props)| {
             cx.render(rsx! {
                 div { style: { color: "blue", font_size: "46px" } }
             })

packages/web/examples/async_web.rs

@@ -16,7 +16,7 @@ struct DogApi {
     message: String,
 }
 
-static APP: FC<()> = |cx, _props| {
+static APP: FC<()> = |(cx, _props)| {
     let state = use_state(cx, || 0);
 
     const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";

packages/web/examples/basic.rs

@@ -14,7 +14,7 @@ fn main() {
     dioxus_web::launch(APP, |c| c)
 }
 
-static APP: FC<()> = |cx, _| {
+static APP: FC<()> = |(cx, _)| {
     let mut count = use_state(cx, || 3);
     let content = use_state(cx, || String::from("h1"));
     let text_content = use_state(cx, || String::from("Hello, world!"));
@@ -86,4 +86,4 @@ fn render_list(cx: Context, count: usize) -> DomTree {
     rsx!(cx, ul { {items} })
 }
 
-static CHILD: FC<()> = |cx, _| rsx!(cx, div {"hello child"});
+static CHILD: FC<()> = |(cx, _)| rsx!(cx, div {"hello child"});

packages/web/examples/blah.rs

@@ -24,7 +24,7 @@ fn main() {
     dioxus_web::launch(App, |c| c)
 }
 
-static App: FC<()> = |cx, props| {
+static App: FC<()> = |(cx, props)| {
     let mut state = use_state(cx, || 0);
     cx.render(rsx! {
         div {

packages/web/examples/btns.rs

@@ -23,7 +23,7 @@ fn main() {
     // dioxus::web::launch(App, |c| c);
 }
 
-static App: FC<()> = |cx, props| {
+static App: FC<()> = |(cx, props)| {
     dbg!("rednering parent");
     cx.render(rsx! {
         div {
@@ -40,7 +40,7 @@ static App: FC<()> = |cx, props| {
     })
 };
 
-static But: FC<()> = |cx, props| {
+static But: FC<()> = |(cx, props)| {
     let mut count = use_state(cx, || 0);
 
     // let d = Dropper { name: "asd" };

packages/web/examples/crm2.rs

@@ -28,7 +28,7 @@ pub struct Client {
     pub description: String,
 }
 
-static App: FC<()> = |cx, _| {
+static App: FC<()> = |(cx, _)| {
     let scene = use_state(cx, || Scene::ClientsList);
     let clients = use_ref(cx, || vec![] as Vec<Client>);
 

packages/web/examples/demo.rs

@@ -24,7 +24,7 @@ fn main() {
     dioxus_web::launch(App, |c| c)
 }
 
-pub static App: FC<()> = |cx, props| {
+pub static App: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         div { class: "overflow-hidden"
             link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
@@ -39,7 +39,7 @@ pub static App: FC<()> = |cx, props| {
     ))
 };
 
-pub static Header: FC<()> = |cx, props| {
+pub static Header: FC<()> = |(cx, props)| {
     cx.render(rsx! {
         div {
             header { class: "text-gray-400 bg-gray-900 body-font"
@@ -65,7 +65,7 @@ pub static Header: FC<()> = |cx, props| {
     })
 };
 
-pub static Hero: FC<()> = |cx, props| {
+pub static Hero: FC<()> = |(cx, props)| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -103,7 +103,7 @@ pub static Hero: FC<()> = |cx, props| {
         }
     })
 };
-pub static Entry: FC<()> = |cx, props| {
+pub static Entry: FC<()> = |(cx, props)| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -116,7 +116,7 @@ pub static Entry: FC<()> = |cx, props| {
     })
 };
 
-pub static StacksIcon: FC<()> = |cx, props| {
+pub static StacksIcon: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         svg {
             // xmlns: "http://www.w3.org/2000/svg"
@@ -131,7 +131,7 @@ pub static StacksIcon: FC<()> = |cx, props| {
         }
     ))
 };
-pub static RightArrowIcon: FC<()> = |cx, props| {
+pub static RightArrowIcon: FC<()> = |(cx, props)| {
     cx.render(rsx!(
         svg {
             fill: "none"

packages/web/src/lib.rs

@@ -86,7 +86,7 @@ mod ric_raf;
 ///     dioxus_web::launch(App, |c| c);
 /// }
 ///
-/// static App: FC<()> = |cx, props| {
+/// static App: FC<()> = |(cx, props)| {
 ///     rsx!(cx, div {"hello world"})
 /// }
 /// ```
@@ -110,7 +110,7 @@ pub fn launch(root_component: FC<()>, configuration: impl FnOnce(WebConfig) -> W
 ///     name: String
 /// }
 ///
-/// static App: FC<RootProps> = |cx, props| {
+/// static App: FC<RootProps> = |(cx, props)| {
 ///     rsx!(cx, div {"hello {props.name}"})
 /// }
 /// ```