feat: mvoe away from compound context

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| {
+/// 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| {
+        //     dioxus::prelude::LazyNodes::new(move |cx, props|{
         //         let bump = &cx.bump();
 
         //         #new_toks

packages/core/benches/jsframework.rs

@@ -22,7 +22,7 @@ criterion_group!(mbenches, create_rows);
 criterion_main!(mbenches);
 
 fn create_rows(c: &mut Criterion) {
-    static App: FC<()> = |cx| {
+    static App: FC<()> = |cx, props| {
         let mut rng = SmallRng::from_entropy();
         let rows = (0..10_000).map(|f| {
             let label = Label::new(&mut rng);
@@ -56,11 +56,11 @@ struct RowProps {
     row_id: usize,
     label: Label,
 }
-fn Row<'a>(cx: Context<'a, RowProps>) -> DomTree {
-    let [adj, col, noun] = cx.label.0;
+fn Row<'a>(cx: Context<'a>, props: &RowProps) -> DomTree<'a> {
+    let [adj, col, noun] = props.label.0;
     cx.render(rsx! {
         tr {
-            td { class:"col-md-1", "{cx.row_id}" }
+            td { class:"col-md-1", "{props.row_id}" }
             td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
                 a { class: "lbl", "{adj}" "{col}" "{noun}" }
             }

packages/core/examples/alternative.rs

@@ -2,7 +2,7 @@ use dioxus_core::prelude::*;
 
 fn main() {}
 
-pub static Example: FC<()> = |cx| {
+pub static Example: FC<()> = |cx, props| {
     let list = (0..10).map(|_f| LazyNodes::new(move |_f| todo!()));
 
     cx.render(LazyNodes::new(move |cx| {

packages/core/examples/async.rs

@@ -2,7 +2,7 @@ use dioxus_core::prelude::*;
 
 fn main() {}
 
-const App: FC<()> = |cx| {
+const App: FC<()> = |cx, props| {
     // create a new future
     let _fut = cx.use_hook(
         |_| {
@@ -20,7 +20,7 @@ const App: FC<()> = |cx| {
     todo!()
 };
 
-const Task: FC<()> = |cx| {
+const Task: FC<()> = |cx, props| {
     let (_task, _res) = use_task(cx, || async { true });
     // task.pause();
     // task.restart();
@@ -34,6 +34,6 @@ const Task: FC<()> = |cx| {
     todo!()
 };
 
-fn use_mut<P, T>(_cx: Context<P>, _f: impl FnOnce() -> T) -> &mut T {
+fn use_mut<P, T>(_cx: Context, _f: impl FnOnce() -> T) -> &mut T {
     todo!()
 }

packages/core/examples/borrowed.rs

@@ -20,7 +20,7 @@ struct ListItem {
     age: u32,
 }
 
-fn app(cx: Context<AppProps>) -> DomTree {
+fn app<'a>(cx: Context<'a>, props: &AppProps) -> DomTree<'a> {
     // let (val, set_val) = use_state_classic(cx, || 0);
 
     cx.render(LazyNodes::new(move |_nodecx| {
@@ -56,7 +56,7 @@ struct ChildProps {
     item_handler: Rc<dyn Fn(i32)>,
 }
 
-fn ChildItem<'a>(cx: Context<'a, ChildProps>) -> DomTree {
+fn ChildItem<'a>(cx: Context<'a>, props: &'a ChildProps) -> DomTree<'a> {
     cx.render(LazyNodes::new(move |__cx| todo!()))
 }
 

packages/core/examples/contextapi.rs

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

packages/core/examples/fragment_from_iter.rs

@@ -2,7 +2,7 @@ use dioxus_core::prelude::*;
 
 fn main() {}
 
-fn app(cx: Context<()>) -> DomTree {
+fn app<'a>(cx: Context<'a>, props: &()) -> DomTree<'a> {
     let vak = use_suspense(
         cx,
         || async {},

packages/core/examples/jsframework.rs

@@ -10,7 +10,7 @@ fn main() {
     assert!(g.edits.len() > 1);
 }
 
-static App: FC<()> = |cx| {
+static App: FC<()> = |cx, props| {
     let mut rng = SmallRng::from_entropy();
     let rows = (0..10_000).map(|f| {
         let label = Label::new(&mut rng);
@@ -35,12 +35,12 @@ struct RowProps {
     row_id: usize,
     label: Label,
 }
-fn Row<'a>(cx: Context<'a, RowProps>) -> DomTree {
+fn Row<'a>(cx: Context<'a>, props: &'a RowProps) -> DomTree<'a> {
     cx.render(rsx! {
         tr {
-            td { class:"col-md-1", "{cx.row_id}" }
+            td { class:"col-md-1", "{props.row_id}" }
             td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
-                a { class: "lbl", "{cx.label}" }
+                a { class: "lbl", "{props.label}" }
             }
             td { class: "col-md-1"
                 a { class: "remove", onclick: move |_| {/* remove */}

packages/core/examples/vdom_usage.rs

@@ -4,7 +4,7 @@ use dioxus_core::prelude::*;
 
 #[async_std::main]
 async fn main() {
-    static App: FC<()> = |cx| 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/context.rs

@@ -68,7 +68,7 @@ impl<'src> Context<'src> {
     /// ## Example
     ///
     /// ```rust
-    /// const App: FC<()> = |cx| {
+    /// const App: FC<()> = |cx, props|{
     ///     cx.render(rsx!{
     ///         CustomCard {
     ///             h1 {}
@@ -77,7 +77,7 @@ impl<'src> Context<'src> {
     ///     })
     /// }
     ///
-    /// const CustomCard: FC<()> = |cx| {
+    /// const CustomCard: FC<()> = |cx, props|{
     ///     cx.render(rsx!{
     ///         div {
     ///             h1 {"Title card"}
@@ -176,12 +176,12 @@ impl<'src> Context<'src> {
     /// ```
     /// struct SharedState(&'static str);
     ///
-    /// static App: FC<()> = |cx| {
+    /// static App: FC<()> = |cx, props|{
     ///     cx.use_provide_state(|| SharedState("world"));
     ///     rsx!(cx, Child {})
     /// }
     ///
-    /// static Child: FC<()> = |cx| {
+    /// static Child: FC<()> = |cx, props|{
     ///     let state = cx.use_consume_state::<SharedState>();
     ///     rsx!(cx, div { "hello {state.0}" })
     /// }

packages/core/src/scope.rs

@@ -58,7 +58,7 @@ impl Scope {
     ///
     /// # Example
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx| cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     ///
     /// let base = dom.base_scope();
@@ -78,7 +78,7 @@ impl Scope {
     /// # Example
     ///
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx| cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     ///
     /// let base = dom.base_scope();
@@ -98,7 +98,7 @@ impl Scope {
     /// # Example
     ///
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx| cx.render(rsx!{ div {} }));
+    /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
     /// dom.rebuild();
     ///
     /// let base = dom.base_scope();
@@ -116,7 +116,7 @@ impl Scope {
     /// # Example
     ///
     /// ```rust
-    /// let mut dom = VirtualDom::new(|cx| 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

@@ -31,7 +31,7 @@ use std::any::Any;
 ///
 /// Example
 /// ```rust
-/// static App: FC<()> = |cx| {
+/// static App: FC<()> = |cx, props|{
 ///     cx.render(rsx!{
 ///         div {
 ///             "Hello World"
@@ -180,7 +180,7 @@ impl VirtualDom {
     /// struct AppProps {
     ///     route: &'static str
     /// }
-    /// static App: FC<AppProps> = |cx| 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" });
     ///
@@ -227,7 +227,7 @@ impl VirtualDom {
     ///
     /// # Example
     /// ```
-    /// static App: FC<()> = |cx| cx.render(rsx!{ "hello world" });
+    /// static App: FC<()> = |cx, props|cx.render(rsx!{ "hello world" });
     /// let mut dom = VirtualDom::new();
     /// let edits = dom.rebuild();
     ///
@@ -252,7 +252,7 @@ impl VirtualDom {
     ///     value: Shared<&'static str>,
     /// }
     ///
-    /// static App: FC<AppProps> = |cx| {
+    /// static App: FC<AppProps> = |cx, props|{
     ///     let val = cx.value.borrow();
     ///     cx.render(rsx! { div { "{val}" } })
     /// };
@@ -314,7 +314,7 @@ impl VirtualDom {
     /// # Example
     ///
     /// ```no_run
-    /// static App: FC<()> = |cx| 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/hooks.rs

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

packages/desktop/README.md

@@ -8,7 +8,7 @@ Dioxus-webview is an attempt at making a simpler "Tauri" where creating desktop
 // main.rs
 #[async_std::main]
 async fn main() {
-   dioxus_desktop::new(|cx| {
+   dioxus_desktop::new(|cx, props|{
        let (count, set_count) = use_state(cx, || 0);
        cx.render(html! {
             <div>

packages/desktop/examples/test.rs

@@ -6,7 +6,7 @@ fn main() {
     dioxus_desktop::launch(App, |f| f.with_window(|w| w.with_maximized(true))).expect("Failed");
 }
 
-static App: FC<()> = |cx| {
+static App: FC<()> = |cx, props|{
     //
     cx.render(rsx!(
         div {

packages/hooks/examples/lifecycle.rs

@@ -10,7 +10,7 @@ fn main() {}
 //     Remvoe,
 // }
 
-// static Component: FC<()> = |cx| {
+// 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| {
+static TodoList: FC<()> = |cx, props|{
     let todos = use_map(cx, || HashMap::new());
     let input = use_ref(|| None);
 

packages/hooks/src/useref.rs

@@ -33,6 +33,6 @@ impl<T> Clone for UseRef<'_, T> {
 }
 impl<T> Copy for UseRef<'_, T> {}
 
-pub fn use_ref<P, T: 'static>(cx: Context<P>, f: impl FnOnce() -> T) -> UseRef<T> {
+pub fn use_ref<T: 'static>(cx: Context, f: impl FnOnce() -> T) -> UseRef<T> {
     cx.use_hook(|_| RefCell::new(f()), |f| UseRef { inner: f }, |_| {})
 }

packages/hooks/src/usestate.rs

@@ -35,7 +35,7 @@ use std::{
 ///
 /// Usage:
 /// ```ignore
-/// const Example: FC<()> = |cx| {
+/// const Example: FC<()> = |cx, props|{
 ///     let counter = use_state(cx, || 0);
 ///     let increment = |_| counter += 1;
 ///     let decrement = |_| counter += 1;
@@ -49,8 +49,8 @@ use std::{
 ///     }
 /// }
 /// ```
-pub fn use_state<'a, 'c, T: 'static, F: FnOnce() -> T, P>(
-    cx: Context<'a, P>,
+pub fn use_state<'a, 'c, T: 'static, F: FnOnce() -> T>(
+    cx: Context<'a>,
     initial_state_fn: F,
 ) -> UseState<'a, T> {
     cx.use_hook(

packages/ssr/README.md

@@ -4,7 +4,7 @@ Render a Dioxus VirtualDOM to a string.
 
 ```rust
 // Our app:
-const App: FC<()> = |cx| cx.render(rsx!(div {"hello world!"}));
+const App: FC<()> = |cx, props|cx.render(rsx!(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| {
+pub static App: FC<()> = |cx, props|{
     cx.render(rsx!(
         div {
             class: "overflow-hidden"

packages/ssr/examples/tide.rs

@@ -40,8 +40,8 @@ struct ExampleProps {
     initial_name: String,
 }
 
-static Example: FC<ExampleProps> = |cx| {
-    let dispaly_name = use_state(cx, move || cx.initial_name.clone());
+static Example: FC<ExampleProps> = |cx, props| {
+    let dispaly_name = use_state(cx, move || props.initial_name.clone());
 
     cx.render(rsx! {
         div { class: "py-12 px-4 text-center w-full max-w-2xl mx-auto",

packages/ssr/examples/tofile.rs

@@ -23,7 +23,7 @@ fn main() {
     .unwrap();
 }
 
-pub static App: FC<()> = |cx| {
+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" }
@@ -38,7 +38,7 @@ pub static App: FC<()> = |cx| {
     ))
 };
 
-pub static Header: FC<()> = |cx| {
+pub static Header: FC<()> = |cx, props|{
     cx.render(rsx! {
         div {
             header { class: "text-gray-400 bg-gray-900 body-font"
@@ -64,7 +64,7 @@ pub static Header: FC<()> = |cx| {
     })
 };
 
-pub static Hero: FC<()> = |cx| {
+pub static Hero: FC<()> = |cx, props|{
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -102,7 +102,7 @@ pub static Hero: FC<()> = |cx| {
         }
     })
 };
-pub static Entry: FC<()> = |cx| {
+pub static Entry: FC<()> = |cx, props|{
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -115,7 +115,7 @@ pub static Entry: FC<()> = |cx| {
     })
 };
 
-pub static StacksIcon: FC<()> = |cx| {
+pub static StacksIcon: FC<()> = |cx, props|{
     cx.render(rsx!(
         svg {
             // xmlns: "http://www.w3.org/2000/svg"
@@ -130,7 +130,7 @@ pub static StacksIcon: FC<()> = |cx| {
         }
     ))
 };
-pub static RightArrowIcon: FC<()> = |cx| {
+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| 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();
 ///
@@ -242,13 +242,13 @@ mod tests {
     use dioxus_core::prelude::*;
     use dioxus_html as dioxus_elements;
 
-    static SIMPLE_APP: FC<()> = |cx| {
+    static SIMPLE_APP: FC<()> = |cx, props|{
         cx.render(rsx!(div {
             "hello world!"
         }))
     };
 
-    static SLIGHTLY_MORE_COMPLEX: FC<()> = |cx| {
+    static SLIGHTLY_MORE_COMPLEX: FC<()> = |cx, props|{
         cx.render(rsx! {
             div {
                 title: "About W3Schools"
@@ -267,14 +267,14 @@ mod tests {
         })
     };
 
-    static NESTED_APP: FC<()> = |cx| {
+    static NESTED_APP: FC<()> = |cx, props|{
         cx.render(rsx!(
             div {
                 SIMPLE_APP {}
             }
         ))
     };
-    static FRAGMENT_APP: FC<()> = |cx| {
+    static FRAGMENT_APP: FC<()> = |cx, props|{
         cx.render(rsx!(
             div { "f1" }
             div { "f2" }
@@ -330,7 +330,7 @@ mod tests {
 
     #[test]
     fn styles() {
-        static STLYE_APP: FC<()> = |cx| {
+        static STLYE_APP: FC<()> = |cx, props|{
             cx.render(rsx! {
                 div { style: { color: "blue", font_size: "46px" } }
             })

packages/web/examples/async_web.rs

@@ -28,7 +28,7 @@ struct DogApi {
 
 const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
 
-static App: FC<()> = |cx| {
+static App: FC<()> = |cx, props|{
     let state = use_state(cx, || 0);
 
     let dog_node = use_suspense(

packages/web/examples/basic.rs

@@ -22,7 +22,7 @@ fn main() {
     dioxus_web::launch(APP, |c| c)
 }
 
-static APP: FC<()> = |cx| {
+static APP: FC<()> = |cx, props|{
     let mut count = use_state(cx, || 3);
 
     cx.render(rsx! {
@@ -44,7 +44,7 @@ static APP: FC<()> = |cx| {
     })
 };
 
-static Child: FC<()> = |cx| {
+static Child: FC<()> = |cx, props|{
     cx.render(rsx! {
         div {
             div {

packages/web/examples/blah.rs

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

packages/web/examples/btns.rs

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

packages/web/examples/demo.rs

@@ -25,7 +25,7 @@ fn main() {
     dioxus_web::launch(App, |c| c)
 }
 
-pub static App: FC<()> = |cx| {
+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" }
@@ -40,7 +40,7 @@ pub static App: FC<()> = |cx| {
     ))
 };
 
-pub static Header: FC<()> = |cx| {
+pub static Header: FC<()> = |cx, props|{
     cx.render(rsx! {
         div {
             header { class: "text-gray-400 bg-gray-900 body-font"
@@ -66,7 +66,7 @@ pub static Header: FC<()> = |cx| {
     })
 };
 
-pub static Hero: FC<()> = |cx| {
+pub static Hero: FC<()> = |cx, props|{
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -104,7 +104,7 @@ pub static Hero: FC<()> = |cx| {
         }
     })
 };
-pub static Entry: FC<()> = |cx| {
+pub static Entry: FC<()> = |cx, props|{
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -117,7 +117,7 @@ pub static Entry: FC<()> = |cx| {
     })
 };
 
-pub static StacksIcon: FC<()> = |cx| {
+pub static StacksIcon: FC<()> = |cx, props|{
     cx.render(rsx!(
         svg {
             // xmlns: "http://www.w3.org/2000/svg"
@@ -132,7 +132,7 @@ pub static StacksIcon: FC<()> = |cx| {
         }
     ))
 };
-pub static RightArrowIcon: FC<()> = |cx| {
+pub static RightArrowIcon: FC<()> = |cx, props|{
     cx.render(rsx!(
         svg {
             fill: "none"