From bfdcb20437c385116fd640e46b6361d09d8d5ff8 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Tue, 21 Sep 2021 13:13:15 -0400 Subject: [PATCH 1/2] feat: transition to cx, props --- packages/core/src/component.rs | 2 +- packages/core/src/context.rs | 17 +++++------ packages/core/src/hooks.rs | 17 +++++------ packages/core/src/lib.rs | 2 +- packages/core/src/nodes.rs | 2 +- packages/core/src/scope.rs | 5 +--- packages/core/src/virtual_dom.rs | 4 +-- packages/core/tests/borrowedstate.rs | 45 ++++++++++++++++++++++++++++ packages/core/tests/create_dom.rs | 16 +++++----- packages/core/tests/display_vdom.rs | 4 +-- packages/core/tests/eventsystem.rs | 2 +- packages/core/tests/lifecycle.rs | 4 +-- packages/core/tests/sharedstate.rs | 4 +-- packages/core/tests/vdom_rebuild.rs | 14 ++++----- 14 files changed, 88 insertions(+), 50 deletions(-) create mode 100644 packages/core/tests/borrowedstate.rs diff --git a/packages/core/src/component.rs b/packages/core/src/component.rs index 36cf908e8..d19ec6581 100644 --- a/packages/core/src/component.rs +++ b/packages/core/src/component.rs @@ -29,7 +29,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, ()>) -> DomTree<'a> { +pub fn Fragment<'a>(cx: Context<'a>, props: &'a ()) -> DomTree<'a> { cx.render(LazyNodes::new(|f| f.fragment_from_iter(cx.children()))) } diff --git a/packages/core/src/context.rs b/packages/core/src/context.rs index 7915601ca..65b3d9710 100644 --- a/packages/core/src/context.rs +++ b/packages/core/src/context.rs @@ -27,16 +27,15 @@ use std::{any::TypeId, ops::Deref, rc::Rc}; /// } /// } /// ``` -pub struct Context<'src, T> { - pub props: &'src T, +pub struct Context<'src> { pub scope: &'src Scope, } -impl<'src, T> Copy for Context<'src, T> {} -impl<'src, T> Clone for Context<'src, T> { +impl<'src> Copy for Context<'src> {} +impl<'src> Clone for Context<'src> { fn clone(&self) -> Self { Self { - props: self.props, + // props: self.props, scope: self.scope, } } @@ -44,14 +43,14 @@ impl<'src, T> Clone for Context<'src, T> { // We currently deref to props, but it might make more sense to deref to Scope? // This allows for code that takes cx.xyz instead of cx.props.xyz -impl<'a, T> Deref for Context<'a, T> { - type Target = &'a T; +impl<'a> Deref for Context<'a> { + type Target = &'a Scope; fn deref(&self) -> &Self::Target { - &self.props + &self.scope } } -impl<'src, P> Context<'src, P> { +impl<'src> Context<'src> { /// Access the children elements passed into the component /// /// This enables patterns where a component is passed children from its parent. diff --git a/packages/core/src/hooks.rs b/packages/core/src/hooks.rs index 8121e958a..fcbf640d1 100644 --- a/packages/core/src/hooks.rs +++ b/packages/core/src/hooks.rs @@ -24,8 +24,8 @@ use std::{ /// /// /// -pub fn use_task<'src, Out, Fut, Init, P>( - cx: Context<'src, P>, +pub fn use_task<'src, Out, Fut, Init>( + cx: Context<'src>, task_initializer: Init, ) -> (&'src TaskHandle, &'src Option) where @@ -83,8 +83,8 @@ where /// # Example /// /// -pub fn use_suspense<'src, Out, Fut, Cb, P>( - cx: Context<'src, P>, +pub fn use_suspense<'src, Out, Fut, Cb>( + cx: Context<'src>, task_initializer: impl FnOnce() -> Fut, user_callback: Cb, ) -> DomTree<'src> @@ -123,10 +123,7 @@ where Some(value) => { let out = value.downcast_ref::().unwrap(); let sus = SuspendedContext { - inner: Context { - props: &(), - scope: cx.scope, - }, + inner: Context { scope: cx.scope }, }; user_callback(sus, out) } @@ -171,7 +168,7 @@ pub(crate) struct SuspenseHook { } pub struct SuspendedContext<'a> { - pub(crate) inner: Context<'a, ()>, + pub(crate) inner: Context<'a>, } impl<'src> SuspendedContext<'src> { @@ -196,7 +193,7 @@ impl<'a, T> Deref for NodeRef<'a, T> { } } -pub fn use_node_ref(cx: Context

) -> NodeRef { +pub fn use_node_ref(cx: Context) -> NodeRef { cx.use_hook( |f| {}, |f| { diff --git a/packages/core/src/lib.rs b/packages/core/src/lib.rs index 6c6923204..33aa21ede 100644 --- a/packages/core/src/lib.rs +++ b/packages/core/src/lib.rs @@ -54,7 +54,7 @@ pub(crate) mod innerlude { pub use crate::virtual_dom::*; pub type DomTree<'a> = Option>; - pub type FC

= fn(Context

) -> DomTree; + pub type FC

= for<'a> fn(Context<'a>, &'a P) -> DomTree<'a>; pub use dioxus_core_macro::{format_args_f, html, rsx}; } diff --git a/packages/core/src/nodes.rs b/packages/core/src/nodes.rs index daf264fc6..555a9c285 100644 --- a/packages/core/src/nodes.rs +++ b/packages/core/src/nodes.rs @@ -511,7 +511,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 { props, scope }); + let res = component(Context { scope }, props); unsafe { std::mem::transmute(res) } }); diff --git a/packages/core/src/scope.rs b/packages/core/src/scope.rs index 357cf2e2e..ff5535607 100644 --- a/packages/core/src/scope.rs +++ b/packages/core/src/scope.rs @@ -275,10 +275,7 @@ impl Scope { let sus: &'a VSuspended<'a> = unsafe { std::mem::transmute(sus) }; let cx: SuspendedContext<'a> = SuspendedContext { - inner: Context { - props: &(), - scope: self, - }, + inner: Context { scope: self }, }; let mut cb = sus.callback.borrow_mut().take().unwrap(); diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index e331fe26d..9f83138da 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -130,7 +130,7 @@ impl VirtualDom { // Safety: this callback is only valid for the lifetime of the root props let root_caller: Box DomTree> = Box::new(move |scope: &Scope| unsafe { let props: &'_ P = &*(props_ptr as *const P); - std::mem::transmute(root(Context { props, scope })) + std::mem::transmute(root(Context { scope }, props)) }); let scheduler = Scheduler::new(); @@ -203,7 +203,7 @@ impl VirtualDom { let root_caller: Box DomTree> = Box::new(move |scope: &Scope| unsafe { let props: &'_ P = &*(props_ptr as *const P); - std::mem::transmute(root(Context { props, scope })) + std::mem::transmute(root(Context { scope }, props)) }); root_scope.update_scope_dependencies(&root_caller, ScopeChildren(&[])); diff --git a/packages/core/tests/borrowedstate.rs b/packages/core/tests/borrowedstate.rs new file mode 100644 index 000000000..1c40ce7ca --- /dev/null +++ b/packages/core/tests/borrowedstate.rs @@ -0,0 +1,45 @@ +use dioxus::{nodes::VSuspended, prelude::*, DomEdit, TestDom}; +use dioxus_core as dioxus; +use dioxus_html as dioxus_elements; + +static Parent: FC<()> = |cx, props| { + // + let value = cx.use_hook(|_| String::new(), |f| &*f, |_| {}); + + cx.render(rsx! { + div { + Child { name: value } + Child { name: value } + Child { name: value } + Child { name: value } + } + }) +}; + +#[derive(Props)] +struct ChildProps<'a> { + name: &'a String, +} + +fn Child<'a>(cx: Context<'a>, props: &'a ChildProps) -> DomTree<'a> { + cx.render(rsx! { + div { + h1 { "it's nested" } + Child2 { name: props.name } + } + }) +} + +#[derive(Props)] +struct Grandchild<'a> { + name: &'a String, +} + +fn Child2<'a>(cx: Context<'a>, props: &Grandchild) -> DomTree<'a> { + cx.render(rsx! { + div { "Hello {props.name}!" } + }) +} + +#[test] +fn test_borrowed_state() {} diff --git a/packages/core/tests/create_dom.rs b/packages/core/tests/create_dom.rs index 124c87d66..b1b6639b8 100644 --- a/packages/core/tests/create_dom.rs +++ b/packages/core/tests/create_dom.rs @@ -18,7 +18,7 @@ fn new_dom(app: FC

, props: P) -> VirtualDom { #[test] fn test_original_diff() { - static APP: FC<()> = |cx| { + static APP: FC<()> = |cx, props| { cx.render(rsx! { div { div { @@ -48,7 +48,7 @@ fn test_original_diff() { #[test] fn create() { - static APP: FC<()> = |cx| { + static APP: FC<()> = |cx, props| { cx.render(rsx! { div { div { @@ -99,7 +99,7 @@ fn create() { #[test] fn create_list() { - static APP: FC<()> = |cx| { + static APP: FC<()> = |cx, props| { cx.render(rsx! { {(0..3).map(|f| rsx!{ div { "hello" @@ -139,7 +139,7 @@ fn create_list() { #[test] fn create_simple() { - static APP: FC<()> = |cx| { + static APP: FC<()> = |cx, props| { cx.render(rsx! { div {} div {} @@ -165,7 +165,7 @@ fn create_simple() { } #[test] fn create_components() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx! { Child { "abc1" } Child { "abc2" } @@ -173,7 +173,7 @@ fn create_components() { }) }; - static Child: FC<()> = |cx| { + static Child: FC<()> = |cx, props| { cx.render(rsx! { h1 {} div { {cx.children()} } @@ -217,7 +217,7 @@ fn create_components() { } #[test] fn anchors() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx! { {true.then(|| rsx!{ div { "hello" } })} {false.then(|| rsx!{ div { "goodbye" } })} @@ -243,7 +243,7 @@ fn anchors() { #[test] fn suspended() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { let val = use_suspense( cx, || async { diff --git a/packages/core/tests/display_vdom.rs b/packages/core/tests/display_vdom.rs index e2321585b..461a9068b 100644 --- a/packages/core/tests/display_vdom.rs +++ b/packages/core/tests/display_vdom.rs @@ -15,7 +15,7 @@ const IS_LOGGING_ENABLED: bool = true; #[test] fn please_work() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx! { div { hidden: "true" @@ -29,7 +29,7 @@ fn please_work() { }) }; - static Child: FC<()> = |cx| { + static Child: FC<()> = |cx, props| { cx.render(rsx! { div { "child" } }) diff --git a/packages/core/tests/eventsystem.rs b/packages/core/tests/eventsystem.rs index 9c7748e44..ccdd03810 100644 --- a/packages/core/tests/eventsystem.rs +++ b/packages/core/tests/eventsystem.rs @@ -7,7 +7,7 @@ use dioxus_html as dioxus_elements; #[async_std::test] async fn event_queue_works() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx! { div { "hello world" } }) diff --git a/packages/core/tests/lifecycle.rs b/packages/core/tests/lifecycle.rs index ad5a8b0f4..6faf8d9e4 100644 --- a/packages/core/tests/lifecycle.rs +++ b/packages/core/tests/lifecycle.rs @@ -20,8 +20,8 @@ fn manual_diffing() { value: Shared<&'static str>, } - static App: FC = |cx| { - let val = cx.value.borrow(); + static App: FC = |cx, props| { + let val = props.value.borrow(); cx.render(rsx! { div { "{val}" } }) }; diff --git a/packages/core/tests/sharedstate.rs b/packages/core/tests/sharedstate.rs index a5e2b1dad..b34980b64 100644 --- a/packages/core/tests/sharedstate.rs +++ b/packages/core/tests/sharedstate.rs @@ -15,12 +15,12 @@ fn new_dom() -> TestDom { fn shared_state_test() { struct MySharedState(&'static str); - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.use_provide_state(|| MySharedState("world!")); rsx!(cx, Child {}) }; - static Child: FC<()> = |cx| { + static Child: FC<()> = |cx, props| { let shared = cx.use_consume_state::()?; rsx!(cx, "Hello, {shared.0}") }; diff --git a/packages/core/tests/vdom_rebuild.rs b/packages/core/tests/vdom_rebuild.rs index 3cd985f11..13f30a0eb 100644 --- a/packages/core/tests/vdom_rebuild.rs +++ b/packages/core/tests/vdom_rebuild.rs @@ -14,7 +14,7 @@ use dioxus_html as dioxus_elements; #[test] fn app_runs() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { // cx.render(rsx!( div{"hello"} )) }; @@ -25,7 +25,7 @@ fn app_runs() { #[test] fn fragments_work() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx!( div{"hello"} div{"goodbye"} @@ -39,7 +39,7 @@ fn fragments_work() { #[test] fn lists_work() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx!( h1 {"hello"} {(0..6).map(|f| rsx!(span{ "{f}" }))} @@ -52,7 +52,7 @@ fn lists_work() { #[test] fn conditional_rendering() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx!( h1 {"hello"} {true.then(|| rsx!(span{ "a" }))} @@ -69,13 +69,13 @@ fn conditional_rendering() { #[test] fn child_components() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { cx.render(rsx!( {true.then(|| rsx!(Child { }))} {false.then(|| rsx!(Child { }))} )) }; - static Child: FC<()> = |cx| { + static Child: FC<()> = |cx, props| { cx.render(rsx!( h1 {"hello"} h1 {"goodbye"} @@ -88,7 +88,7 @@ fn child_components() { #[test] fn suspended_works() { - static App: FC<()> = |cx| { + static App: FC<()> = |cx, props| { let title = use_suspense(cx, || async { "bob" }, |cx, f| cx.render(rsx! { "{f}"})); cx.render(rsx!("hello" { title })) }; From a2c7d17b0595769f60bc1c2bbf7cbe32cec37486 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Tue, 21 Sep 2021 13:42:52 -0400 Subject: [PATCH 2/2] feat: mvoe away from compound context --- docs/main-concepts/02-hello.md | 29 +++++++++++++----- docs/main-concepts/03-rsx.md | 22 ++++++-------- docs/main-concepts/04-hooks.md | 4 +-- docs/main-concepts/10-concurrent-mode.md | 4 +-- docs/main-concepts/11-arena-memo.md | 6 ++-- docs/main-concepts/12-signals.md | 6 ++-- examples/_examples/basic.rs | 2 +- examples/_examples/calculator.rs | 2 +- examples/_examples/children.rs | 4 +-- examples/_examples/context.rs | 2 +- examples/_examples/fragment.rs | 2 +- examples/_examples/hello.rs | 2 +- examples/_examples/infer.rs | 4 +-- examples/_examples/input.rs | 6 ++-- examples/_examples/jackjill.rs | 2 +- examples/_examples/jackjillrsx.rs | 2 +- examples/_examples/landingpage.rs | 2 +- examples/_examples/landingpage2.rs | 2 +- examples/_examples/list.rs | 2 +- examples/_examples/many.rs | 2 +- examples/_examples/model.rs | 2 +- examples/_examples/rsxt.rs | 2 +- examples/_examples/todomvc/main.rs | 2 +- examples/_examples/weather.rs | 2 +- examples/async.rs | 2 +- examples/borrowed.rs | 14 ++++----- examples/calculator.rs | 32 ++++++++++---------- examples/coroutine.rs | 4 +-- examples/examples/calculator.rs | 2 +- examples/examples/demo.rs | 4 +-- examples/examples/hifive.rs | 2 +- examples/file_explorer.rs | 2 +- examples/framework_benchmark.rs | 14 ++++----- examples/hydration.rs | 2 +- examples/manually.rs | 2 +- examples/model.rs | 28 ++++++++--------- examples/readme.rs | 2 +- examples/reducer.rs | 2 +- examples/reference/antipatterns.rs | 22 +++++++------- examples/reference/basics.rs | 6 ++-- examples/reference/children.rs | 4 +-- examples/reference/conditional_rendering.rs | 18 +++++------ examples/reference/controlled_inputs.rs | 6 ++-- examples/reference/custom_elements.rs | 2 +- examples/reference/empty.rs | 2 +- examples/reference/errorhandling.rs | 12 ++++---- examples/reference/fragments.rs | 8 ++--- examples/reference/global_css.rs | 2 +- examples/reference/inline_styles.rs | 4 +-- examples/reference/iterators.rs | 2 +- examples/reference/listener.rs | 8 ++--- examples/reference/memo.rs | 18 +++++------ examples/reference/noderefs.rs | 2 +- examples/reference/signals.rs | 2 +- examples/reference/spreadpattern.rs | 10 +++--- examples/reference/statemanagement.rs | 2 +- examples/reference/suspense.rs | 9 ++++-- examples/reference/task.rs | 2 +- examples/reference/testing.rs | 2 +- examples/reference/tostring.rs | 4 +-- examples/rsx_usage.rs | 7 +++-- examples/showcase.rs | 10 +++--- examples/slideshow.rs | 12 ++++---- examples/ssr.rs | 4 +-- examples/tailwind.rs | 12 ++++---- examples/testbed.rs | 6 ++-- examples/todomvc.rs | 5 ++- examples/web_tick.rs | 8 ++--- examples/webview.rs | 8 ++--- examples/webview_web.rs | 2 +- notes/Parity.md | 2 +- notes/SOLVEDPROBLEMS.md | 10 +++--- packages/core-macro/src/lib.rs | 2 +- packages/core-macro/src/rsxtemplate.rs | 2 +- packages/core/benches/jsframework.rs | 8 ++--- packages/core/examples/alternative.rs | 2 +- packages/core/examples/async.rs | 6 ++-- packages/core/examples/borrowed.rs | 4 +-- packages/core/examples/contextapi.rs | 2 +- packages/core/examples/fragment_from_iter.rs | 2 +- packages/core/examples/jsframework.rs | 8 ++--- packages/core/examples/vdom_usage.rs | 2 +- packages/core/src/context.rs | 8 ++--- packages/core/src/scope.rs | 8 ++--- packages/core/src/virtual_dom.rs | 10 +++--- packages/core/tests/hooks.rs | 2 +- packages/desktop/README.md | 2 +- packages/desktop/examples/test.rs | 2 +- packages/hooks/examples/lifecycle.rs | 2 +- packages/hooks/src/usecollection.rs | 2 +- packages/hooks/src/useref.rs | 2 +- packages/hooks/src/usestate.rs | 6 ++-- packages/ssr/README.md | 2 +- packages/ssr/examples/basic.rs | 2 +- packages/ssr/examples/tide.rs | 4 +-- packages/ssr/examples/tofile.rs | 12 ++++---- packages/ssr/src/lib.rs | 12 ++++---- packages/web/examples/async_web.rs | 2 +- packages/web/examples/basic.rs | 4 +-- packages/web/examples/blah.rs | 2 +- packages/web/examples/btns.rs | 4 +-- packages/web/examples/demo.rs | 12 ++++---- src/lib.rs | 4 +-- 103 files changed, 309 insertions(+), 293 deletions(-) diff --git a/docs/main-concepts/02-hello.md b/docs/main-concepts/02-hello.md index ad91849c9..c33e115e7 100644 --- a/docs/main-concepts/02-hello.md +++ b/docs/main-concepts/02-hello.md @@ -78,15 +78,16 @@ Now, let's edit our `main.rs` file: ```rust use diouxs::prelude::*; + fn main() { - dioxus::web::start(App) + dioxus::web::start(App, |c| c).unwrap(); } -fn App(cx: Context<()>) -> DomTree { +static App: FC<()> = |cx, props| { cx.render(rsx! { div { "Hello, world!" } }) -} +}; ``` Let's dissect our example a bit. @@ -97,24 +98,36 @@ This bit of code imports everything from the the `prelude` module. This brings i use diouxs::prelude::*; ``` -This bit of code starts the WASM renderer as a future (JS Promise) and then awaits it. This is very similar to the `ReactDOM.render()` method you use for a React app. We pass in the `App` function as a our app. +This bit of code starts the WASM renderer as a future (JS Promise) and then awaits it. This is very similar to the `ReactDOM.render()` method you use for a React app. We pass in the `App` function as a our app. The `|c| c` closure provides a way to configure the WebSys app, enabling things like hydration, pre-rendering, and other tweaks. The simplest configuration is just the defaults. + +Calling "start" will launch Dioxus on the web's main thread, running `wasm_bindgen_futures::block_on`. It's possible to "launch" the WebSys renderer as an async function - check the documentation for more details. ```rust fn main() { - dioxus::web::start(App) + dioxus::web::start(App, |c| c).unwrap(); } ``` -Finally, our app. Every component in Dioxus is a function that takes in a `Context` object and returns a `VNode`. +Finally, our app. Every component in Dioxus is a function that takes in `Context` and `Props` and returns an `Option`. ```rust -fn App(cx: Context<()>) -> DomTree { +static App: FC<()> = |cx, props| { cx.render(rsx! { div { "Hello, world!" } }) }; ``` +The closure `FC<()>` syntax is identical to the function syntax, but with lifetimes managed for you. In cases where props need to borrow from their parent, you will need to specify lifetimes using the function syntax: + +```rust +fn App<'a>(cx: Context<'a>, props: &()) -> DomTree<'a> { + cx.render(rsx! { + div { "Hello, world!" } + }) +} +``` + In React, you'll save data between renders with hooks. However, hooks rely on global variables which make them difficult to integrate in multi-tenant systems like server-rendering. In Dioxus, you are given an explicit `Context` object to control how the component renders and stores data. Next, we're greeted with the `rsx!` macro. This lets us add a custom DSL for declaratively building the structure of our app. The semantics of this macro are similar to that of JSX and HTML, though with a familiar Rust-y interface. The `html!` macro is also available for writing components with a JSX/HTML syntax. @@ -135,7 +148,7 @@ If we wanted to golf a bit, we can shrink our hello-world even smaller: ```rust fn main() { - dioxus::web::start(|cx| cx.render(diouxs::rsx!( div { "Hello, World!" } )) + dioxus::web::start(|cx, _| cx.render(diouxs::rsx!( div { "Hello, World!" } )) } ``` diff --git a/docs/main-concepts/03-rsx.md b/docs/main-concepts/03-rsx.md index a615eb986..c3b51baaa 100644 --- a/docs/main-concepts/03-rsx.md +++ b/docs/main-concepts/03-rsx.md @@ -12,15 +12,14 @@ You'll want to write RSX where you can, and in a future release we'll have a too ```rust #[derive(PartialEq, Props)] -struct ExampleProps { name: &str, pending: bool, count: i32 } +struct ExampleProps { name: &'static str, pending: bool, count: i32 } -fn Example(cx: Context ) -> DomTree { - let ExampleProps { name, pending, count } = cx.props; +static Example: FC = |cx, props| { cx.render(html! {

-

"Hello, {name}!"

-

"Status: {pending}!"

-

"Count {count}!"

+

"Hello, {props.name}!"

+

"Status: {props.pending}!"

+

"Count {props.count}!"

}) } @@ -35,13 +34,12 @@ The Dioxus VSCode extension will eventually provide a macro to convert a selecti It's also a bit easier on the eyes 🙂 than HTML. ```rust -fn Example(cx: Context) -> DomTree { +static Example: FC = |cx, props| { cx.render(rsx! { div { - // cx derefs to props so you can access fields directly - p {"Hello, {cx.name}!"} - p {"Status: {cx.pending}!"} - p {"Count {cx.count}!"} + p {"Hello, {props.name}!"} + p {"Status: {props.pending}!"} + p {"Count {props.count}!"} } }) } @@ -60,7 +58,7 @@ Commas are entirely optional, but might be useful to delineate between elements The `render` function provides an **extremely efficient** allocator for VNodes and text, so try not to use the `format!` macro in your components. Rust's default `ToString` methods pass through the global allocator, but all text in components is allocated inside a manually-managed Bump arena. To push you in the right direction, all text-based attributes take `std::fmt::Arguments` directly, so you'll want to reach for `format_args!` when the built-in `f-string` interpolation just doesn't cut it. ```rust -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props|{ let text = "example"; diff --git a/docs/main-concepts/04-hooks.md b/docs/main-concepts/04-hooks.md index c8741a9fd..7979ccc6e 100644 --- a/docs/main-concepts/04-hooks.md +++ b/docs/main-concepts/04-hooks.md @@ -1,5 +1,5 @@ ```rust -fn Example(cx: &mut Context<()>) -> DomTree { +fn Example<'a>(cx: Context<'a>, props: &()) -> DomTree<'a> { let service = use_combubulator(cx); let Status { name, pending, count } = service.info(); html! { @@ -7,7 +7,7 @@ fn Example(cx: &mut Context<()>) -> DomTree {

"Hello, {name}!"

"Status: {pending}!"

"Count {count}!"

- diff --git a/docs/main-concepts/10-concurrent-mode.md b/docs/main-concepts/10-concurrent-mode.md index c14d66c34..46b3f8e52 100644 --- a/docs/main-concepts/10-concurrent-mode.md +++ b/docs/main-concepts/10-concurrent-mode.md @@ -50,8 +50,8 @@ async fn ExampleLoader(cx: Context<()>) -> Vnode { This API stores the result on the Context object, so the loaded data is taken as reference. */ let name: &Result = use_fetch_data("http://example.com/json", ()) - .place_holder(|cx| rsx!{
"loading..."
}) - .delayed_place_holder(1000, |cx| rsx!{
"still loading..."
}) + .place_holder(|cx, props|rsx!{
"loading..."
}) + .delayed_place_holder(1000, |cx, props|rsx!{
"still loading..."
}) .await; match name { diff --git a/docs/main-concepts/11-arena-memo.md b/docs/main-concepts/11-arena-memo.md index 4d6417a8b..01b01c1e1 100644 --- a/docs/main-concepts/11-arena-memo.md +++ b/docs/main-concepts/11-arena-memo.md @@ -21,9 +21,9 @@ fn test() -> DomTree { } } -static TestComponent: FC<()> = |cx| html!{
"Hello world"
}; +static TestComponent: FC<()> = |cx, props|html!{
"Hello world"
}; -static TestComponent: FC<()> = |cx| { +static TestComponent: FC<()> = |cx, props|{ let g = "BLAH"; html! {
"Hello world"
@@ -31,7 +31,7 @@ static TestComponent: FC<()> = |cx| { }; #[functional_component] -static TestComponent: FC<{ name: String }> = |cx| html! {
"Hello {name}"
}; +static TestComponent: FC<{ name: String }> = |cx, props|html! {
"Hello {name}"
}; ``` ## Why this behavior? diff --git a/docs/main-concepts/12-signals.md b/docs/main-concepts/12-signals.md index bfe6e9c3c..5000faebc 100644 --- a/docs/main-concepts/12-signals.md +++ b/docs/main-concepts/12-signals.md @@ -96,7 +96,7 @@ Sometimes you want a signal to propagate across your app, either through far-awa ```rust const TITLE: Atom = || "".to_string(); -const Provider: FC<()> = |cx| { +const Provider: FC<()> = |cx, props|{ let title = use_signal(&cx, &TITLE); rsx!(cx, input { value: title }) }; @@ -105,7 +105,7 @@ const Provider: FC<()> = |cx| { If we use the `TITLE` atom in another component, we can cause updates to flow between components without calling render or diffing either component trees: ```rust -const Receiver: FC<()> = |cx| { +const Receiver: FC<()> = |cx, props|{ let title = use_signal(&cx, &TITLE); log::info!("This will only be called once!"); rsx!(cx, @@ -132,7 +132,7 @@ Dioxus automatically understands how to use your signals when mixed with iterato ```rust const DICT: AtomFamily = |_| {}; -const List: FC<()> = |cx| { +const List: FC<()> = |cx, props|{ let dict = use_signal(&cx, &DICT); cx.render(rsx!( ul { diff --git a/examples/_examples/basic.rs b/examples/_examples/basic.rs index e70d3de5a..d1f943ec5 100644 --- a/examples/_examples/basic.rs +++ b/examples/_examples/basic.rs @@ -15,7 +15,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let (state, set_state) = use_state_classic(cx, || 0); cx.render(rsx! { div { diff --git a/examples/_examples/calculator.rs b/examples/_examples/calculator.rs index 0ba9ad7f8..fee49b504 100644 --- a/examples/_examples/calculator.rs +++ b/examples/_examples/calculator.rs @@ -27,7 +27,7 @@ enum Operator { Div, } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let (cur_val, set_cur_val) = use_state_classic(cx, || 0.0_f64); let (operator, set_operator) = use_state_classic(cx, || None as Option); let (display_value, set_display_value) = use_state_classic(cx, || "0".to_string()); diff --git a/examples/_examples/children.rs b/examples/_examples/children.rs index 17d63df35..c30d1fd80 100644 --- a/examples/_examples/children.rs +++ b/examples/_examples/children.rs @@ -13,7 +13,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { cx.render(rsx! { Calcier { h2 {"abc 1"} @@ -25,7 +25,7 @@ static App: FC<()> = |cx| { }) }; -static Calcier: FC<()> = |cx| { +static Calcier: FC<()> = |cx, props| { cx.render(rsx! { div { h1 { diff --git a/examples/_examples/context.rs b/examples/_examples/context.rs index dbed8057a..0658aa711 100644 --- a/examples/_examples/context.rs +++ b/examples/_examples/context.rs @@ -25,7 +25,7 @@ fn main() { #[derive(Debug)] struct CustomContext([&'static str; 3]); -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props|{ cx.use_create_context(|| CustomContext(["Jack", "Jill", "Bob"])); cx.render(rsx! { diff --git a/examples/_examples/fragment.rs b/examples/_examples/fragment.rs index 059f57431..958fa102c 100644 --- a/examples/_examples/fragment.rs +++ b/examples/_examples/fragment.rs @@ -13,7 +13,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { cx.render(rsx! { h2 { "abc 1" } div { diff --git a/examples/_examples/hello.rs b/examples/_examples/hello.rs index ac13aa19f..72b89a3f4 100644 --- a/examples/_examples/hello.rs +++ b/examples/_examples/hello.rs @@ -13,7 +13,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example)); } -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let nodes = (0..500).map(|f| rsx! (li {"div"})); cx.render(rsx! { div { diff --git a/examples/_examples/infer.rs b/examples/_examples/infer.rs index 08de6deed..8d61a3345 100644 --- a/examples/_examples/infer.rs +++ b/examples/_examples/infer.rs @@ -14,7 +14,7 @@ fn main() { } // this is a component -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props|{ let (event, set_event) = use_state_classic(cx, || None); let handler = move |evt| { @@ -50,7 +50,7 @@ struct ExampleProps { name: String, } -pub static Example2: FC = |cx| { +pub static Example2: FC = |cx, props|{ cx.render(rsx! { div { h1 {"hello {cx.name}"} diff --git a/examples/_examples/input.rs b/examples/_examples/input.rs index 83423c8cb..66a0fab7a 100644 --- a/examples/_examples/input.rs +++ b/examples/_examples/input.rs @@ -12,7 +12,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props|{ let (val, set_val) = use_state_classic(cx, || "asd".to_string()); cx.render(rsx! { @@ -37,7 +37,7 @@ static App: FC<()> = |cx| { }) }; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props|{ cx.render(rsx! { div { class: "max-w-lg max-w-xs bg-blue-800 shadow-2xl rounded-lg mx-auto text-center py-12 mt-4 rounded-xl" div { class: "container py-5 max-w-md mx-auto" @@ -50,7 +50,7 @@ pub static Example: FC<()> = |cx| { }) }; -static UserInput: FC<()> = |cx| { +static UserInput: FC<()> = |cx, props|{ let (val, set_val) = use_state_classic(cx, || "asd".to_string()); rsx! { in cx, diff --git a/examples/_examples/jackjill.rs b/examples/_examples/jackjill.rs index 932d17fdb..cb4e95c78 100644 --- a/examples/_examples/jackjill.rs +++ b/examples/_examples/jackjill.rs @@ -9,7 +9,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example)) } -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let (name, set_name) = use_state_classic(cx, || "...?"); log::debug!("Running component...."); diff --git a/examples/_examples/jackjillrsx.rs b/examples/_examples/jackjillrsx.rs index fa84a03dc..fcf7c790f 100644 --- a/examples/_examples/jackjillrsx.rs +++ b/examples/_examples/jackjillrsx.rs @@ -9,7 +9,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example)) } -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let (name, set_name) = use_state_classic(cx, || "...?"); cx.render(rsx! { section { class: "py-12 px-4 text-center" diff --git a/examples/_examples/landingpage.rs b/examples/_examples/landingpage.rs index a6589d7ab..2cd24f7c7 100644 --- a/examples/_examples/landingpage.rs +++ b/examples/_examples/landingpage.rs @@ -14,7 +14,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let (contents, set_contents) = use_state_classic(cx, || "asd"); cx.render(rsx! { diff --git a/examples/_examples/landingpage2.rs b/examples/_examples/landingpage2.rs index bf47c9f97..53ba2acdd 100644 --- a/examples/_examples/landingpage2.rs +++ b/examples/_examples/landingpage2.rs @@ -13,7 +13,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let (contents, set_contents) = use_state_classic(cx, || "asd"); cx.render(rsx! { diff --git a/examples/_examples/list.rs b/examples/_examples/list.rs index f8415902a..4232194b5 100644 --- a/examples/_examples/list.rs +++ b/examples/_examples/list.rs @@ -26,7 +26,7 @@ pub struct TodoItem { pub contents: String, } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let (draft, set_draft) = use_state_classic(cx, || "".to_string()); let (filter, set_filter) = use_state_classic(cx, || FilterState::All); let todos = use_state(cx, || BTreeMap::::new()); diff --git a/examples/_examples/many.rs b/examples/_examples/many.rs index be4973acd..cd2027b59 100644 --- a/examples/_examples/many.rs +++ b/examples/_examples/many.rs @@ -11,7 +11,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example)); } -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { span { diff --git a/examples/_examples/model.rs b/examples/_examples/model.rs index 0b70003dd..41906ce92 100644 --- a/examples/_examples/model.rs +++ b/examples/_examples/model.rs @@ -31,7 +31,7 @@ fn main() { wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let state = use_model(&cx, || Calculator::new()); let clear_display = state.display_value.eq("0"); diff --git a/examples/_examples/rsxt.rs b/examples/_examples/rsxt.rs index 6fb139278..f800b7e58 100644 --- a/examples/_examples/rsxt.rs +++ b/examples/_examples/rsxt.rs @@ -27,7 +27,7 @@ struct ExampleProps { initial_name: &'static str, } -pub static Example: FC = |cx| { +pub static Example: FC = |cx, props|{ let name = use_state(cx, move || cx.initial_name); cx.render(rsx! { diff --git a/examples/_examples/todomvc/main.rs b/examples/_examples/todomvc/main.rs index 7b637fcc8..56bd3789d 100644 --- a/examples/_examples/todomvc/main.rs +++ b/examples/_examples/todomvc/main.rs @@ -11,7 +11,7 @@ use dioxus_web::{prelude::*, WebsysRenderer}; static APP_STYLE: &'static str = include_str!("./style.css"); fn main() { - wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|cx| { + wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|cx, props| { cx.render(rsx! { div { id: "app" diff --git a/examples/_examples/weather.rs b/examples/_examples/weather.rs index f7c25c822..9a2d0b4fc 100644 --- a/examples/_examples/weather.rs +++ b/examples/_examples/weather.rs @@ -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(|cx| { + wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|cx, props| { cx.render(html! {
diff --git a/examples/async.rs b/examples/async.rs index 111102921..3a9d317c9 100644 --- a/examples/async.rs +++ b/examples/async.rs @@ -7,7 +7,7 @@ fn main() { dioxus::desktop::launch(App, |c| c).expect("faield to launch"); } -pub static App: FC<()> = |cx| { +pub static App: FC<()> = |cx, props| { let count = use_state(cx, || 0); let mut direction = use_state(cx, || 1); diff --git a/examples/borrowed.rs b/examples/borrowed.rs index 0be0c668b..912999b6a 100644 --- a/examples/borrowed.rs +++ b/examples/borrowed.rs @@ -22,7 +22,7 @@ fn main() { dioxus::desktop::launch(App, |c| c); } -fn App<'a>(cx: Context<'a, ()>) -> DomTree<'a> { +fn App<'a>(cx: Context<'a>, props: &()) -> DomTree<'a> { let text: &'a mut Vec = cx.use_hook(|_| vec![String::from("abc=def")], |f| f, |_| {}); let first = text.get_mut(0).unwrap(); @@ -45,8 +45,8 @@ impl<'a> Drop for C1Props<'a> { fn drop(&mut self) {} } -fn Child1<'a>(cx: Context<'a, C1Props>) -> DomTree<'a> { - let (left, right) = cx.text.split_once("=").unwrap(); +fn Child1<'a>(cx: Context<'a>, props: &'a C1Props) -> DomTree<'a> { + let (left, right) = props.text.split_once("=").unwrap(); cx.render(rsx! { div { @@ -66,10 +66,10 @@ impl<'a> Drop for C2Props<'a> { } } -fn Child2<'a>(cx: Context<'a, C2Props>) -> DomTree<'a> { +fn Child2<'a>(cx: Context<'a>, props: &'a C2Props) -> DomTree<'a> { cx.render(rsx! { Child3 { - text: cx.text + text: props.text } }) } @@ -79,8 +79,8 @@ struct C3Props<'a> { text: &'a str, } -fn Child3<'a>(cx: Context<'a, C3Props>) -> DomTree<'a> { +fn Child3<'a>(cx: Context<'a>, props: &C3Props) -> DomTree<'a> { cx.render(rsx! { - div { "{cx.text}"} + div { "{props.text}"} }) } diff --git a/examples/calculator.rs b/examples/calculator.rs index be96de93c..eb1adc645 100644 --- a/examples/calculator.rs +++ b/examples/calculator.rs @@ -19,7 +19,7 @@ enum Operator { Div, } -const App: FC<()> = |cx| { +const App: FC<()> = |cx, props| { let cur_val = use_state(cx, || 0.0_f64); let operator = use_state(cx, || None as Option); let display_value = use_state(cx, || "".to_string()); @@ -70,16 +70,16 @@ const App: FC<()> = |cx| { display_value.modify().pop(); } } - KeyCode::_0 => input_digit(0), - KeyCode::_1 => input_digit(1), - KeyCode::_2 => input_digit(2), - KeyCode::_3 => input_digit(3), - KeyCode::_4 => input_digit(4), - KeyCode::_5 => input_digit(5), - KeyCode::_6 => input_digit(6), - KeyCode::_7 => input_digit(7), - KeyCode::_8 => input_digit(8), - KeyCode::_9 => input_digit(9), + KeyCode::Num0 => input_digit(0), + KeyCode::Num1 => input_digit(1), + KeyCode::Num2 => input_digit(2), + KeyCode::Num3 => input_digit(3), + KeyCode::Num4 => input_digit(4), + KeyCode::Num5 => input_digit(5), + KeyCode::Num6 => input_digit(6), + KeyCode::Num7 => input_digit(7), + KeyCode::Num8 => input_digit(8), + KeyCode::Num9 => input_digit(9), KeyCode::Add => operator.set(Some(Operator::Add)), KeyCode::Subtract => operator.set(Some(Operator::Sub)), KeyCode::Divide => operator.set(Some(Operator::Div)), @@ -124,11 +124,11 @@ struct CalculatorKeyProps<'a> { onclick: &'a dyn Fn(MouseEvent), } -fn CalculatorKey<'a, 'r>(cx: Context<'a, CalculatorKeyProps<'r>>) -> DomTree<'a> { +fn CalculatorKey<'a>(cx: Context<'a>, props: &'a CalculatorKeyProps) -> DomTree<'a> { cx.render(rsx! { button { - class: "calculator-key {cx.name}" - onclick: {cx.onclick} + class: "calculator-key {props.name}" + onclick: {props.onclick} {cx.children()} } }) @@ -139,10 +139,10 @@ struct CalculatorDisplayProps { val: f64, } -fn CalculatorDisplay(cx: Context) -> DomTree { +fn CalculatorDisplay<'a>(cx: Context<'a>, props: &CalculatorDisplayProps) -> DomTree<'a> { use separator::Separatable; // Todo, add float support to the num-format crate - let formatted = cx.val.separated_string(); + let formatted = props.val.separated_string(); // TODO: make it autoscaling with css cx.render(rsx! { div { class: "calculator-display" diff --git a/examples/coroutine.rs b/examples/coroutine.rs index 26386055c..ef2dfc9b9 100644 --- a/examples/coroutine.rs +++ b/examples/coroutine.rs @@ -27,7 +27,7 @@ fn main() { use dioxus::prelude::*; -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let p1 = use_state(cx, || 0); let p2 = use_state(cx, || 0); @@ -59,7 +59,7 @@ struct HorseyProps { pos: i32, } -static Horsey: FC = |cx| { +static Horsey: FC = |cx, props| { cx.render(rsx! { div { button { "pause" } diff --git a/examples/examples/calculator.rs b/examples/examples/calculator.rs index ebebf218b..107794164 100644 --- a/examples/examples/calculator.rs +++ b/examples/examples/calculator.rs @@ -19,7 +19,7 @@ fn main() { .expect("Webview finished"); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let state = use_model(&cx, || Calculator::new()); let clear_display = state.display_value.eq("0"); diff --git a/examples/examples/demo.rs b/examples/examples/demo.rs index 44017d2e0..bcd898055 100644 --- a/examples/examples/demo.rs +++ b/examples/examples/demo.rs @@ -17,7 +17,7 @@ fn main() { .expect("Webview finished"); } -// pub static Example: FC<()> = |cx| { +// pub static Example: FC<()> = |cx, props|{ // cx.render(html! { //
// // }) // }; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { class: "flex items-center justify-center flex-col" diff --git a/examples/examples/hifive.rs b/examples/examples/hifive.rs index 6b44ec7cf..972eff4ff 100644 --- a/examples/examples/hifive.rs +++ b/examples/examples/hifive.rs @@ -17,7 +17,7 @@ fn main() { .expect("Webview finished"); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let hifives = use_model(&cx, || 0); cx.render(rsx! { div { diff --git a/examples/file_explorer.rs b/examples/file_explorer.rs index 5d4a89b32..bc0c289d4 100644 --- a/examples/file_explorer.rs +++ b/examples/file_explorer.rs @@ -20,7 +20,7 @@ fn main() { .unwrap(); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let files = use_state(cx, || Files::new()); let file_list = files.path_names.iter().enumerate().map(|(dir_id, path)| { diff --git a/examples/framework_benchmark.rs b/examples/framework_benchmark.rs index a7ee8588d..8927198a9 100644 --- a/examples/framework_benchmark.rs +++ b/examples/framework_benchmark.rs @@ -19,7 +19,7 @@ fn main() { // We use a special immutable hashmap to make hashmap operations efficient type RowList = im_rc::HashMap, FxBuildHasher>; -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let items = use_state(cx, || RowList::default()); let create_rendered_rows = move |from, num| move |_| items.set(create_row_list(from, num)); @@ -92,14 +92,14 @@ struct ActionButtonProps { id: &'static str, action: F, } -fn ActionButton(cx: Context>) -> DomTree +fn ActionButton<'a, F>(cx: Context<'a>, props: &'a ActionButtonProps) -> DomTree<'a> where F: Fn(MouseEvent), { cx.render(rsx! { div { class: "col-sm-6 smallpad" - button { class:"btn btn-primary btn-block", r#type: "button", id: "{cx.id}", onclick: {&cx.action}, - "{cx.name}" + button { class:"btn btn-primary btn-block", r#type: "button", id: "{props.id}", onclick: {&props.action}, + "{props.name}" } } }) @@ -110,12 +110,12 @@ struct RowProps { row_id: usize, label: Rc, } -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 */} diff --git a/examples/hydration.rs b/examples/hydration.rs index 0f083d933..a661ae842 100644 --- a/examples/hydration.rs +++ b/examples/hydration.rs @@ -19,7 +19,7 @@ fn main() { dioxus::desktop::launch(App, |c| c.with_prerendered(content)).unwrap(); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let mut val = use_state(cx, || 0); cx.render(rsx! { div { diff --git a/examples/manually.rs b/examples/manually.rs index 4e6999d96..6bf3fb85d 100644 --- a/examples/manually.rs +++ b/examples/manually.rs @@ -20,4 +20,4 @@ fn main() { dioxus_desktop::WebviewRenderer::run_with_edits(App, (), |c| c, Some(edits)).expect("failed"); } -const App: FC<()> = |cx| todo!(); +const App: FC<()> = |cx, props| todo!(); diff --git a/examples/model.rs b/examples/model.rs index ac294fd76..ee137ab1a 100644 --- a/examples/model.rs +++ b/examples/model.rs @@ -32,7 +32,7 @@ fn main() { .expect("failed to launch dioxus app"); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let state = use_state(cx, || Calculator::new()); let clear_display = state.display_value.eq("0"); @@ -79,11 +79,11 @@ struct CalculatorKeyProps<'a> { onclick: &'a dyn Fn(MouseEvent), } -fn CalculatorKey<'a, 'r>(cx: Context<'a, CalculatorKeyProps<'r>>) -> DomTree<'a> { +fn CalculatorKey<'a, 'r>(cx: Context<'a>, props: &'a CalculatorKeyProps) -> DomTree<'a> { cx.render(rsx! { button { - class: "calculator-key {cx.name}" - onclick: {cx.onclick} + class: "calculator-key {props.name}" + onclick: {props.onclick} {cx.children()} } }) @@ -174,16 +174,16 @@ impl Calculator { fn handle_keydown(&mut self, evt: KeyboardEvent) { match evt.key_code() { KeyCode::Backspace => self.backspace(), - KeyCode::_0 => self.input_digit(0), - KeyCode::_1 => self.input_digit(1), - KeyCode::_2 => self.input_digit(2), - KeyCode::_3 => self.input_digit(3), - KeyCode::_4 => self.input_digit(4), - KeyCode::_5 => self.input_digit(5), - KeyCode::_6 => self.input_digit(6), - KeyCode::_7 => self.input_digit(7), - KeyCode::_8 => self.input_digit(8), - KeyCode::_9 => self.input_digit(9), + KeyCode::Num0 => self.input_digit(0), + KeyCode::Num1 => self.input_digit(1), + KeyCode::Num2 => self.input_digit(2), + KeyCode::Num3 => self.input_digit(3), + KeyCode::Num4 => self.input_digit(4), + KeyCode::Num5 => self.input_digit(5), + KeyCode::Num6 => self.input_digit(6), + KeyCode::Num7 => self.input_digit(7), + KeyCode::Num8 => self.input_digit(8), + KeyCode::Num9 => self.input_digit(9), KeyCode::Add => self.operator = Some(Operator::Add), KeyCode::Subtract => self.operator = Some(Operator::Sub), KeyCode::Divide => self.operator = Some(Operator::Div), diff --git a/examples/readme.rs b/examples/readme.rs index 82520b163..8eb8b098f 100644 --- a/examples/readme.rs +++ b/examples/readme.rs @@ -7,7 +7,7 @@ fn main() { dioxus::desktop::launch(App, |c| c); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let mut count = use_state(cx, || 0); cx.render(rsx! { diff --git a/examples/reducer.rs b/examples/reducer.rs index 7a2bf7de2..52e3e9a92 100644 --- a/examples/reducer.rs +++ b/examples/reducer.rs @@ -11,7 +11,7 @@ fn main() { dioxus::desktop::launch(App, |c| c); } -pub static App: FC<()> = |cx| { +pub static App: FC<()> = |cx, props| { let state = use_state(cx, PlayerState::new); let is_playing = state.is_playing(); diff --git a/examples/reference/antipatterns.rs b/examples/reference/antipatterns.rs index e6eff4df7..39d70bd9f 100644 --- a/examples/reference/antipatterns.rs +++ b/examples/reference/antipatterns.rs @@ -32,14 +32,14 @@ use dioxus::prelude::*; struct NoKeysProps { data: std::collections::HashMap, } -static AntipatternNoKeys: FC = |cx| { +static AntipatternNoKeys: FC = |cx, props| { // WRONG: Make sure to add keys! rsx!(cx, ul { - {cx.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))} + {props.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))} }); // RIGHT: Like this: rsx!(cx, ul { - {cx.data.iter().map(|(k, v)| rsx!(li { key: "{k}", "List item: {v}" }))} + {props.data.iter().map(|(k, v)| rsx!(li { key: "{k}", "List item: {v}" }))} }) }; @@ -54,7 +54,7 @@ static AntipatternNoKeys: FC = |cx| { /// /// Only Component and Fragment nodes are susceptible to this issue. Dioxus mitigates this with components by providing /// an API for registering shared state without the ContextProvider pattern. -static AntipatternNestedFragments: FC<()> = |cx| { +static AntipatternNestedFragments: FC<()> = |cx, props| { // Try to avoid heavily nesting fragments rsx!(cx, Fragment { @@ -82,7 +82,7 @@ static AntipatternNestedFragments: FC<()> = |cx| { /// However, calling set_state will *not* update the current version of state in the component. This should be easy to /// recognize from the function signature, but Dioxus will not update the "live" version of state. Calling `set_state` /// merely places a new value in the queue and schedules the component for a future update. -static AntipaternRelyingOnSetState: FC<()> = |cx| { +static AntipaternRelyingOnSetState: FC<()> = |cx, props| { let (state, set_state) = use_state(cx, || "Hello world").classic(); set_state("New state"); // This will return false! `state` will *still* be "Hello world" @@ -99,7 +99,7 @@ static AntipaternRelyingOnSetState: FC<()> = |cx| { /// - All components must start with an uppercase character /// /// IE: the following component will be rejected when attempted to be used in the rsx! macro -static antipattern_component: FC<()> = |cx| todo!(); +static antipattern_component: FC<()> = |cx, props| todo!(); /// Antipattern: Misusing hooks /// --------------------------- @@ -120,8 +120,8 @@ static antipattern_component: FC<()> = |cx| todo!(); struct MisuedHooksProps { should_render_state: bool, } -static AntipatternMisusedHooks: FC = |cx| { - if cx.should_render_state { +static AntipatternMisusedHooks: FC = |cx, props| { + if props.should_render_state { // do not place a hook in the conditional! // prefer to move it out of the conditional let (state, set_state) = use_state(cx, || "hello world").classic(); @@ -153,7 +153,7 @@ static AntipatternMisusedHooks: FC = |cx| { /// } /// } /// }) -static _example: FC<()> = |cx| todo!(); +static _example: FC<()> = |cx, props| todo!(); /// Antipattern: publishing components and hooks with all features enabled /// ---------------------------------------------------------------------- @@ -171,9 +171,9 @@ static _example: FC<()> = |cx| todo!(); /// /// This will only include the `core` dioxus crate which is relatively slim and fast to compile and avoids target-specific /// libraries. -static __example: FC<()> = |cx| todo!(); +static __example: FC<()> = |cx, props| todo!(); -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { AntipatternNoKeys { data: std::collections::HashMap::new() } AntipatternNestedFragments {} diff --git a/examples/reference/basics.rs b/examples/reference/basics.rs index aefc10300..f4c945c7c 100644 --- a/examples/reference/basics.rs +++ b/examples/reference/basics.rs @@ -9,7 +9,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { Greeting { @@ -25,10 +25,10 @@ struct GreetingProps { name: &'static str, } -static Greeting: FC = |cx| { +static Greeting: FC = |cx, props| { cx.render(rsx! { div { - h1 { "Hello, {cx.name}!" } + h1 { "Hello, {props.name}!" } p { "Welcome to the Diouxs framework" } br {} {cx.children()} diff --git a/examples/reference/children.rs b/examples/reference/children.rs index dc4e67838..16e89e52e 100644 --- a/examples/reference/children.rs +++ b/examples/reference/children.rs @@ -18,7 +18,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { Banner { @@ -31,7 +31,7 @@ pub static Example: FC<()> = |cx| { }) }; -pub static Banner: FC<()> = |cx| { +pub static Banner: FC<()> = |cx, props| { cx.render(rsx! { div { h1 { "This is a great banner!" } diff --git a/examples/reference/conditional_rendering.rs b/examples/reference/conditional_rendering.rs index 0a5360826..80be8094a 100644 --- a/examples/reference/conditional_rendering.rs +++ b/examples/reference/conditional_rendering.rs @@ -16,10 +16,10 @@ use dioxus::prelude::*; pub struct MyProps { should_show: bool, } -pub static Example0: FC = |cx| { +pub static Example0: FC = |cx, props| { cx.render(rsx! { div { - {cx.should_show.then(|| rsx!{ + {props.should_show.then(|| rsx!{ h1 { "showing the title!" } })} } @@ -39,17 +39,17 @@ pub static Example0: FC = |cx| { pub struct MyProps1 { should_show: bool, } -pub static Example1: FC = |cx| { +pub static Example1: FC = |cx, props| { cx.render(rsx! { div { // With matching - {match cx.should_show { + {match props.should_show { true => cx.render(rsx!(div {"it is true!"})), false => rsx!(cx, div {"it is false!"}), }} // or with just regular conditions - {if cx.should_show { + {if props.should_show { rsx!(cx, div {"it is true!"}) } else { rsx!(cx, div {"it is false!"}) @@ -57,7 +57,7 @@ pub static Example1: FC = |cx| { // or with optional chaining { - cx.should_show + props.should_show .then(|| rsx!(cx, div {"it is false!"})) .unwrap_or_else(|| rsx!(cx, div {"it is false!"})) } @@ -77,10 +77,10 @@ pub enum Color { pub struct MyProps2 { color: Color, } -pub static Example2: FC = |cx| { +pub static Example2: FC = |cx, props| { cx.render(rsx! { div { - {match cx.color { + {match props.color { Color::Green => rsx!(cx, div {"it is Green!"}), Color::Yellow => rsx!(cx, div {"it is Yellow!"}), Color::Red => rsx!(cx, div {"it is Red!"}), @@ -89,7 +89,7 @@ pub static Example2: FC = |cx| { }) }; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let should_show = use_state(cx, || false); let mut color_index = use_state(cx, || 0); let color = match *color_index % 2 { diff --git a/examples/reference/controlled_inputs.rs b/examples/reference/controlled_inputs.rs index 16e37e491..bdabe83d2 100644 --- a/examples/reference/controlled_inputs.rs +++ b/examples/reference/controlled_inputs.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { @@ -10,7 +10,7 @@ pub static Example: FC<()> = |cx| { }; // A controlled component: -static ControlledSelect: FC<()> = |cx| { +static ControlledSelect: FC<()> = |cx, props| { let value = use_state(cx, || String::from("Grapefruit")); cx.render(rsx! { select { value: "{value}", onchange: move |evt| value.set(evt.value()), @@ -23,7 +23,7 @@ static ControlledSelect: FC<()> = |cx| { }; // TODO - how do uncontrolled things work? -static UncontrolledSelect: FC<()> = |cx| { +static UncontrolledSelect: FC<()> = |cx, props| { let value = use_state(cx, || String::new()); cx.render(rsx! { diff --git a/examples/reference/custom_elements.rs b/examples/reference/custom_elements.rs index 7b86430d1..053b3aea5 100644 --- a/examples/reference/custom_elements.rs +++ b/examples/reference/custom_elements.rs @@ -11,7 +11,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { custom_element { diff --git a/examples/reference/empty.rs b/examples/reference/empty.rs index d852b5bb2..28914bd6b 100644 --- a/examples/reference/empty.rs +++ b/examples/reference/empty.rs @@ -5,4 +5,4 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| cx.render(rsx! { Fragment {} }); +pub static Example: FC<()> = |cx, props| cx.render(rsx! { Fragment {} }); diff --git a/examples/reference/errorhandling.rs b/examples/reference/errorhandling.rs index ba0f21a87..a79153272 100644 --- a/examples/reference/errorhandling.rs +++ b/examples/reference/errorhandling.rs @@ -23,14 +23,14 @@ fn main() {} /// This is one way to go about error handling (just toss things away with unwrap). /// However, if you get it wrong, the whole app will crash. /// This is pretty flimsy. -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let data = get_data().unwrap(); cx.render(rsx!( div { "{data}" } )) }; /// This is a pretty verbose way of error handling /// However, it's still pretty good since we don't panic, just fail to render anything -static App1: FC<()> = |cx| { +static App1: FC<()> = |cx, props| { let data = match get_data() { Some(data) => data, None => return None, @@ -46,7 +46,7 @@ static App1: FC<()> = |cx| { /// a user is logged in. /// /// Dioxus will throw an error in the console if the None-path is ever taken. -static App2: FC<()> = |cx| { +static App2: FC<()> = |cx, props| { let data = get_data()?; cx.render(rsx!( div { "{data}" } )) }; @@ -54,14 +54,14 @@ static App2: FC<()> = |cx| { /// This is top-tier error handling since it displays a failure state. /// /// However, the error is lacking in context. -static App3: FC<()> = |cx| match get_data() { +static App3: FC<()> = |cx, props| match get_data() { Some(data) => cx.render(rsx!( div { "{data}" } )), None => cx.render(rsx!( div { "Failed to load data :(" } )), }; /// For errors that return results, it's possible short-circuit the match-based error handling with `.ok()` which converts /// a Result into an Option and lets you -static App4: FC<()> = |cx| { +static App4: FC<()> = |cx, props| { let data = get_data_err().ok()?; cx.render(rsx!( div { "{data}" } )) }; @@ -69,7 +69,7 @@ static App4: FC<()> = |cx| { /// This is great error handling since it displays a failure state... with context! /// /// Hopefully you never need to disply a screen like this. It's rather bad taste -static App5: FC<()> = |cx| match get_data_err() { +static App5: FC<()> = |cx, props| match get_data_err() { Ok(data) => cx.render(rsx!( div { "{data}" } )), Err(c) => cx.render(rsx!( div { "Failed to load data: {c}" } )), }; diff --git a/examples/reference/fragments.rs b/examples/reference/fragments.rs index 7ebde4229..88c9dcaea 100644 --- a/examples/reference/fragments.rs +++ b/examples/reference/fragments.rs @@ -11,7 +11,7 @@ use dioxus::prelude::*; // Returning multiple elements with rsx! or html! -static App1: FC<()> = |cx| { +static App1: FC<()> = |cx, props| { cx.render(rsx! { h1 { } h2 { } @@ -20,7 +20,7 @@ static App1: FC<()> = |cx| { }; // Using the Fragment component -static App2: FC<()> = |cx| { +static App2: FC<()> = |cx, props| { cx.render(rsx! { Fragment { div {} @@ -31,7 +31,7 @@ static App2: FC<()> = |cx| { }; // Using the `fragment` method on the NodeFactory -static App3: FC<()> = |cx| { +static App3: FC<()> = |cx, props| { cx.render(LazyNodes::new(move |fac| { fac.fragment_from_iter([ fac.text(format_args!("A")), @@ -42,7 +42,7 @@ static App3: FC<()> = |cx| { })) }; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { App1 {} App2 {} diff --git a/examples/reference/global_css.rs b/examples/reference/global_css.rs index eb3cb73be..5e7c75a8c 100644 --- a/examples/reference/global_css.rs +++ b/examples/reference/global_css.rs @@ -19,7 +19,7 @@ h1 {color: blue;} p {color: red;} "#; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { head { style { "{STYLE}" } } body { diff --git a/examples/reference/inline_styles.rs b/examples/reference/inline_styles.rs index f75e2ac13..272e220c2 100644 --- a/examples/reference/inline_styles.rs +++ b/examples/reference/inline_styles.rs @@ -10,7 +10,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { head { style: { background_color: "powderblue" } @@ -29,7 +29,7 @@ pub static Example: FC<()> = |cx| { // .... technically the rsx! macro is slightly broken at the moment and alows styles not wrapped in style {} // I haven't noticed any name collisions yet, and am tentatively leaving this behavior in.. // Don't rely on it. -static Example2: FC<()> = |cx| { +static Example2: FC<()> = |cx, props| { cx.render(rsx! { div { color: "red" "hello world!" diff --git a/examples/reference/iterators.rs b/examples/reference/iterators.rs index 9067bb46c..ed4fdfd13 100644 --- a/examples/reference/iterators.rs +++ b/examples/reference/iterators.rs @@ -12,7 +12,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let example_data = use_state(cx, || 0); let v = (0..10).map(|f| { diff --git a/examples/reference/listener.rs b/examples/reference/listener.rs index 269811a02..59d180263 100644 --- a/examples/reference/listener.rs +++ b/examples/reference/listener.rs @@ -7,7 +7,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { ButtonList {} NonUpdatingEvents {} @@ -16,7 +16,7 @@ pub static Example: FC<()> = |cx| { }; /// We can use `set_name` in multiple closures; the closures automatically *copy* the reference to set_name. -static ButtonList: FC<()> = |cx| { +static ButtonList: FC<()> = |cx, props| { let name = use_state(cx, || "...?"); let names = ["jack", "jill", "john", "jane"] @@ -33,7 +33,7 @@ static ButtonList: FC<()> = |cx| { /// This shows how listeners may be without a visible change in the display. /// Check the console. -static NonUpdatingEvents: FC<()> = |cx| { +static NonUpdatingEvents: FC<()> = |cx, props| { rsx!(cx, div { button { onclick: move |_| log::info!("Did not cause any updates!") @@ -42,7 +42,7 @@ static NonUpdatingEvents: FC<()> = |cx| { }) }; -static DisablePropogation: FC<()> = |cx| { +static DisablePropogation: FC<()> = |cx, props| { rsx!(cx, div { onclick: move |_| log::info!("event propogated to the div!") diff --git a/examples/reference/memo.rs b/examples/reference/memo.rs index b9b1985d5..40aa54191 100644 --- a/examples/reference/memo.rs +++ b/examples/reference/memo.rs @@ -21,7 +21,7 @@ use dioxus::prelude::*; // By default, components with no props are always memoized. // A props of () is considered empty. -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { "100% memoized!" } }) @@ -35,9 +35,9 @@ pub struct MyProps1 { name: String, } -pub static Example1: FC = |cx| { +pub static Example1: FC = |cx, props| { cx.render(rsx! { - div { "100% memoized! {cx.name}" } + div { "100% memoized! {props.name}" } }) }; @@ -49,9 +49,9 @@ pub struct MyProps2 { name: std::rc::Rc, } -pub static Example2: FC = |cx| { +pub static Example2: FC = |cx, props| { cx.render(rsx! { - div { "100% memoized! {cx.name}" } + div { "100% memoized! {props.name}" } }) }; @@ -63,9 +63,9 @@ pub struct MyProps3<'a> { // We need to manually specify a lifetime that ensures props and scope (the component's state) share the same lifetime. // Using the `pub static Example: FC<()>` pattern _will_ specify a lifetime, but that lifetime will be static which might // not exactly be what you want -fn Example3<'a>(cx: Context<'a, MyProps3<'a>>) -> DomTree { +fn Example3<'a>(cx: Context<'a>, props: &'a MyProps3) -> DomTree<'a> { cx.render(rsx! { - div { "Not memoized! {cx.name}" } + div { "Not memoized! {props.name}" } }) } @@ -77,8 +77,8 @@ pub struct MyProps4<'a> { } // We need to manually specify a lifetime that ensures props and scope (the component's state) share the same lifetime. -fn Example4<'a>(cx: Context<'a, MyProps4<'a>>) -> DomTree { +fn Example4<'a>(cx: Context<'a>, props: &'a MyProps4) -> DomTree<'a> { cx.render(rsx! { - div { "Not memoized!", onclick: move |_| (cx.onhandle)() } + div { "Not memoized!", onclick: move |_| (props.onhandle)() } }) } diff --git a/examples/reference/noderefs.rs b/examples/reference/noderefs.rs index 195210cfd..8d22ee5b4 100644 --- a/examples/reference/noderefs.rs +++ b/examples/reference/noderefs.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let p = 10; cx.render(rsx! { diff --git a/examples/reference/signals.rs b/examples/reference/signals.rs index fdab747b6..2e69d8e66 100644 --- a/examples/reference/signals.rs +++ b/examples/reference/signals.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { diff --git a/examples/reference/spreadpattern.rs b/examples/reference/spreadpattern.rs index 4faddf900..770cf427c 100644 --- a/examples/reference/spreadpattern.rs +++ b/examples/reference/spreadpattern.rs @@ -9,7 +9,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let props = MyProps { count: 0, live: true, @@ -27,12 +27,12 @@ pub struct MyProps { name: &'static str, } -pub static Example1: FC = |cx| { +pub static Example1: FC = |cx, MyProps { count, live, name }| { cx.render(rsx! { div { - h1 { "Hello, {cx.name}"} - h3 {"Are we alive? {cx.live}"} - p {"Count is {cx.count}"} + h1 { "Hello, {name}"} + h3 {"Are we alive? {live}"} + p {"Count is {count}"} { cx.children() } } }) diff --git a/examples/reference/statemanagement.rs b/examples/reference/statemanagement.rs index fdab747b6..2e69d8e66 100644 --- a/examples/reference/statemanagement.rs +++ b/examples/reference/statemanagement.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { diff --git a/examples/reference/suspense.rs b/examples/reference/suspense.rs index c0d8d54ec..f5431edf6 100644 --- a/examples/reference/suspense.rs +++ b/examples/reference/suspense.rs @@ -14,12 +14,17 @@ struct DogApi { } const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random"; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let doggo = use_suspense( cx, || surf::get(ENDPOINT).recv_json::(), |cx, res| match res { - Ok(res) => rsx!(cx, img { src: "{res.message}" }), + Ok(res) => rsx!( + cx, + img { + src: "{res.message}" + } + ), Err(_) => rsx!(cx, div { "No doggos for you :(" }), }, ); diff --git a/examples/reference/task.rs b/examples/reference/task.rs index 8f1e61e0a..a5e877bc6 100644 --- a/examples/reference/task.rs +++ b/examples/reference/task.rs @@ -24,7 +24,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let count = use_state(cx, || 0); let mut direction = use_state(cx, || 1); diff --git a/examples/reference/testing.rs b/examples/reference/testing.rs index d59e9619a..587ce19cc 100644 --- a/examples/reference/testing.rs +++ b/examples/reference/testing.rs @@ -1,6 +1,6 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { cx.render(rsx! { div { diff --git a/examples/reference/tostring.rs b/examples/reference/tostring.rs index 02b1daf81..a04a165da 100644 --- a/examples/reference/tostring.rs +++ b/examples/reference/tostring.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; use dioxus::ssr; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let as_string = use_state(cx, || { // Currently, SSR is only supported for whole VirtualDOMs // This is an easy/low hanging fruit to improve upon @@ -15,7 +15,7 @@ pub static Example: FC<()> = |cx| { }) }; -static SomeApp: FC<()> = |cx| { +static SomeApp: FC<()> = |cx, props| { cx.render(rsx! { div { style: {background_color: "blue"} h1 {"Some amazing app or component"} diff --git a/examples/rsx_usage.rs b/examples/rsx_usage.rs index 5a1227f75..0c2569880 100644 --- a/examples/rsx_usage.rs +++ b/examples/rsx_usage.rs @@ -49,7 +49,7 @@ const NONE_ELEMENT: Option<()> = None; use baller::Baller; use dioxus::prelude::*; -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props| { let formatting = "formatting!"; let formatting_tuple = ("a", "b"); let lazy_fmt = format_args!("lazily formatted text"); @@ -180,10 +180,11 @@ pub static Example: FC<()> = |cx| { mod baller { use super::*; + #[derive(PartialEq, Props)] pub struct BallerProps {} /// This component totally balls - pub fn Baller(cx: Context<()>) -> DomTree { + pub fn Baller<'a>(cx: Context<'a>, props: &BallerProps) -> DomTree<'a> { todo!() } } @@ -194,7 +195,7 @@ pub struct TallerProps { } /// This component is taller than most :) -pub fn Taller(cx: Context) -> DomTree { +pub fn Taller<'a>(cx: Context<'a>, props: &'a TallerProps) -> DomTree<'a> { let b = true; todo!() } diff --git a/examples/showcase.rs b/examples/showcase.rs index dd9370fd6..ca3cc469c 100644 --- a/examples/showcase.rs +++ b/examples/showcase.rs @@ -11,7 +11,7 @@ fn main() {} use dioxus::prelude::*; use std::rc::Rc; -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let (selection, set_selection) = use_state(cx, || None as Option).classic(); let body = match selection { @@ -33,7 +33,7 @@ struct ScrollSelectorProps<'a> { onselect: &'a dyn Fn(Option), } -fn ScrollSelector<'a>(cx: Context<'a, ScrollSelectorProps>) -> DomTree<'a> { +fn ScrollSelector<'a>(cx: Context<'a>, props: &'a ScrollSelectorProps) -> DomTree<'a> { let selection_list = (&REFERENCES).iter().enumerate().map(|(id, _)| { rsx! { li { @@ -47,7 +47,7 @@ fn ScrollSelector<'a>(cx: Context<'a, ScrollSelectorProps>) -> DomTree<'a> { ul { {selection_list} button { - onclick: move |_| (cx.onselect)(Some(10)) + onclick: move |_| (props.onselect)(Some(10)) } } } @@ -59,8 +59,8 @@ struct ReferenceItemProps { selected: usize, } -static ReferenceItem: FC = |cx| { - let (caller, name, code) = REFERENCES[cx.selected]; +static ReferenceItem: FC = |cx, props| { + let (caller, name, code) = REFERENCES[props.selected]; // Create the component using the factory API directly let caller_node = LazyNodes::new(move |f| f.component(caller, (), None, &[])); diff --git a/examples/slideshow.rs b/examples/slideshow.rs index 97391c033..80154b4ac 100644 --- a/examples/slideshow.rs +++ b/examples/slideshow.rs @@ -15,7 +15,7 @@ fn main() { dioxus::desktop::launch(App, |c| c); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let slides = use_state(cx, SlideController::new); let slide = match slides.slide_id { @@ -70,7 +70,7 @@ impl SlideController { } } -const Title: FC<()> = |cx| { +const Title: FC<()> = |cx, props| { cx.render(rsx! { div { h1 { "Title" } @@ -78,7 +78,7 @@ const Title: FC<()> = |cx| { } }) }; -const Slide1: FC<()> = |cx| { +const Slide1: FC<()> = |cx, props| { cx.render(rsx! { div { h1 { "Slide1" } @@ -86,7 +86,7 @@ const Slide1: FC<()> = |cx| { } }) }; -const Slide2: FC<()> = |cx| { +const Slide2: FC<()> = |cx, props| { cx.render(rsx! { div { h1 { "Slide2" } @@ -94,7 +94,7 @@ const Slide2: FC<()> = |cx| { } }) }; -const Slide3: FC<()> = |cx| { +const Slide3: FC<()> = |cx, props| { cx.render(rsx! { div { h1 { "Slide3" } @@ -102,7 +102,7 @@ const Slide3: FC<()> = |cx| { } }) }; -const End: FC<()> = |cx| { +const End: FC<()> = |cx, props| { cx.render(rsx! { div { h1 { "End" } diff --git a/examples/ssr.rs b/examples/ssr.rs index 9a74031d4..b5d29844d 100644 --- a/examples/ssr.rs +++ b/examples/ssr.rs @@ -9,7 +9,7 @@ fn main() { println!("{}", ssr::render_vdom(&vdom, |c| c)); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { cx.render(rsx!( div { h1 { "Title" } @@ -21,6 +21,6 @@ static App: FC<()> = |cx| { struct MyProps<'a> { text: &'a str, } -fn App2<'a>(cx: Context<'a, MyProps>) -> DomTree<'a> { +fn App2<'a>(cx: Context<'a>, props: &'a MyProps) -> DomTree<'a> { None } diff --git a/examples/tailwind.rs b/examples/tailwind.rs index c4149faeb..406f56613 100644 --- a/examples/tailwind.rs +++ b/examples/tailwind.rs @@ -14,7 +14,7 @@ fn main() { const STYLE: &str = "body {overflow:hidden;}"; -pub static App: FC<()> = |cx| { +pub static App: FC<()> = |cx, props| { cx.render(rsx!( div { class: "overflow-hidden" style { "{STYLE}" } @@ -30,7 +30,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" @@ -56,7 +56,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" @@ -94,7 +94,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" @@ -107,7 +107,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" @@ -122,7 +122,7 @@ pub static StacksIcon: FC<()> = |cx| { } )) }; -pub static RightArrowIcon: FC<()> = |cx| { +pub static RightArrowIcon: FC<()> = |cx, props| { cx.render(rsx!( svg { fill: "none" diff --git a/examples/testbed.rs b/examples/testbed.rs index 1eadcac53..63d76659c 100644 --- a/examples/testbed.rs +++ b/examples/testbed.rs @@ -17,7 +17,7 @@ h1 {color: blue;} p {color: red;} "#; -const Example: FC<()> = |cx| { +const Example: FC<()> = |cx, props| { cx.render(rsx! { Fragment { Fragment { @@ -38,7 +38,7 @@ const Example: FC<()> = |cx| { }) }; -const Child: FC<()> = |cx| { +const Child: FC<()> = |cx, props| { cx.render(rsx!( h1 {"1" } h1 {"2" } @@ -48,7 +48,7 @@ const Child: FC<()> = |cx| { }; // this is a bad case that hurts our subtree memoization :( -const AbTest: FC<()> = |cx| { +const AbTest: FC<()> = |cx, props| { if 1 == 2 { cx.render(rsx!( h1 {"1"} diff --git a/examples/todomvc.rs b/examples/todomvc.rs index 5add6a446..d5d961ba0 100644 --- a/examples/todomvc.rs +++ b/examples/todomvc.rs @@ -22,7 +22,7 @@ pub struct TodoItem { } const STYLE: &str = include_str!("./_examples/todomvc/style.css"); -const App: FC<()> = |cx| { +const App: FC<()> = |cx, props| { let draft = use_state(cx, || "".to_string()); let todos = use_state(cx, || HashMap::>::new()); let filter = use_state(cx, || FilterState::All); @@ -87,8 +87,7 @@ pub struct TodoEntryProps { todo: std::rc::Rc, } -pub fn TodoEntry(cx: Context) -> DomTree { - let TodoEntryProps { todo } = *cx; +pub fn TodoEntry<'a>(cx: Context<'a>, TodoEntryProps { todo }: &'a TodoEntryProps) -> DomTree<'a> { let is_editing = use_state(cx, || false); let contents = ""; diff --git a/examples/web_tick.rs b/examples/web_tick.rs index e82f131ec..82fe47db4 100644 --- a/examples/web_tick.rs +++ b/examples/web_tick.rs @@ -19,7 +19,7 @@ fn main() { dioxus::web::launch(App, |c| c); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let mut rng = SmallRng::from_entropy(); let rows = (0..1_000).map(|f| { let label = Label::new(&mut rng); @@ -45,11 +45,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: &'a 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}" } } diff --git a/examples/webview.rs b/examples/webview.rs index 8178684de..ee74970dc 100644 --- a/examples/webview.rs +++ b/examples/webview.rs @@ -17,7 +17,7 @@ fn main() -> anyhow::Result<()> { dioxus::desktop::launch(App, |c| c) } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let state = use_state(cx, || String::from("hello")); let clear_text = state == "hello"; @@ -37,11 +37,11 @@ struct CalculatorKeyProps<'a> { onclick: &'a dyn Fn(MouseEvent), } -fn CalculatorKey<'a, 'r>(cx: Context<'a, CalculatorKeyProps<'r>>) -> DomTree<'a> { +fn CalculatorKey<'a>(cx: Context<'a>, props: &'a CalculatorKeyProps) -> DomTree<'a> { cx.render(rsx! { button { - class: "calculator-key {cx.name}" - onclick: {cx.onclick} + class: "calculator-key {props.name}" + onclick: {props.onclick} {cx.children()} } }) diff --git a/examples/webview_web.rs b/examples/webview_web.rs index b897ffb5a..9ff57388d 100644 --- a/examples/webview_web.rs +++ b/examples/webview_web.rs @@ -16,7 +16,7 @@ fn main() { dioxus::web::launch(App, |c| c); } -static App: FC<()> = |cx| { +static App: FC<()> = |cx, props| { let mut count = use_state(cx, || 0); cx.render(rsx! { diff --git a/notes/Parity.md b/notes/Parity.md index 11655c2e7..5cc0851c9 100644 --- a/notes/Parity.md +++ b/notes/Parity.md @@ -12,7 +12,7 @@ https://github.com/rustwasm/gloo For example, resize observer would function like this: ```rust -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props|{ let observer = use_resize_observer(); cx.render(rsx!( diff --git a/notes/SOLVEDPROBLEMS.md b/notes/SOLVEDPROBLEMS.md index 7f501822e..377d6f221 100644 --- a/notes/SOLVEDPROBLEMS.md +++ b/notes/SOLVEDPROBLEMS.md @@ -153,13 +153,13 @@ Notice that LiveComponent receivers (the client-side interpretation of a LiveCom The `VNodeTree` type is a very special type that allows VNodes to be created using a pluggable allocator. The html! macro creates something that looks like: ```rust -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props|{ html! {
"blah"
} }; // expands to... -pub static Example: FC<()> = |cx| { +pub static Example: FC<()> = |cx, props|{ // This function converts a Fn(allocator) -> DomTree closure to a VNode struct that will later be evaluated. html_macro_to_vnodetree(move |allocator| { let mut node0 = allocator.alloc(VElement::div); @@ -313,7 +313,7 @@ Here's how react does it: Any "dirty" node causes an entire subtree render. Calling "setState" at the very top will cascade all the way down. This is particularly bad for this component design: ```rust -static APP: FC<()> = |cx| { +static APP: FC<()> = |cx, props|{ let title = use_context(Title); cx.render(html!{
@@ -334,7 +334,7 @@ static APP: FC<()> = |cx| {
}) }; -static HEAVY_LIST: FC<()> = |cx| { +static HEAVY_LIST: FC<()> = |cx, props|{ cx.render({ {0.100.map(i => )} }) @@ -378,7 +378,7 @@ struct Props { } -static Component: FC = |cx| { +static Component: FC = |cx, props|{ } ``` diff --git a/packages/core-macro/src/lib.rs b/packages/core-macro/src/lib.rs index 6e3c1f537..f4763009d 100644 --- a/packages/core-macro/src/lib.rs +++ b/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"); diff --git a/packages/core-macro/src/rsxtemplate.rs b/packages/core-macro/src/rsxtemplate.rs index 9222d7117..1f712997d 100644 --- a/packages/core-macro/src/rsxtemplate.rs +++ b/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 diff --git a/packages/core/benches/jsframework.rs b/packages/core/benches/jsframework.rs index 294a9a952..f744e6070 100644 --- a/packages/core/benches/jsframework.rs +++ b/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}" } } diff --git a/packages/core/examples/alternative.rs b/packages/core/examples/alternative.rs index 95a8469ff..02bebb43d 100644 --- a/packages/core/examples/alternative.rs +++ b/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| { diff --git a/packages/core/examples/async.rs b/packages/core/examples/async.rs index 73a83b456..a60dfb0f4 100644 --- a/packages/core/examples/async.rs +++ b/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(_cx: Context

, _f: impl FnOnce() -> T) -> &mut T { +fn use_mut(_cx: Context, _f: impl FnOnce() -> T) -> &mut T { todo!() } diff --git a/packages/core/examples/borrowed.rs b/packages/core/examples/borrowed.rs index e30447548..a11f55225 100644 --- a/packages/core/examples/borrowed.rs +++ b/packages/core/examples/borrowed.rs @@ -20,7 +20,7 @@ struct ListItem { age: u32, } -fn app(cx: Context) -> 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, } -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!())) } diff --git a/packages/core/examples/contextapi.rs b/packages/core/examples/contextapi.rs index 61dc79837..6c90a60c7 100644 --- a/packages/core/examples/contextapi.rs +++ b/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()); diff --git a/packages/core/examples/fragment_from_iter.rs b/packages/core/examples/fragment_from_iter.rs index 58c4df70f..ae7d761e8 100644 --- a/packages/core/examples/fragment_from_iter.rs +++ b/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 {}, diff --git a/packages/core/examples/jsframework.rs b/packages/core/examples/jsframework.rs index 79400afd1..902869f43 100644 --- a/packages/core/examples/jsframework.rs +++ b/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 */} diff --git a/packages/core/examples/vdom_usage.rs b/packages/core/examples/vdom_usage.rs index c5d643df5..1793b030b 100644 --- a/packages/core/examples/vdom_usage.rs +++ b/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); diff --git a/packages/core/src/context.rs b/packages/core/src/context.rs index 65b3d9710..991352c5f 100644 --- a/packages/core/src/context.rs +++ b/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::(); /// rsx!(cx, div { "hello {state.0}" }) /// } diff --git a/packages/core/src/scope.rs b/packages/core/src/scope.rs index ff5535607..b696a96cd 100644 --- a/packages/core/src/scope.rs +++ b/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(); /// diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 9f83138da..849b1f7cf 100644 --- a/packages/core/src/virtual_dom.rs +++ b/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 = |cx| cx.render(rsx!{ "route is {cx.route}" }); + /// static App: FC = |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 = |cx| { + /// static App: FC = |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); diff --git a/packages/core/tests/hooks.rs b/packages/core/tests/hooks.rs index a7161cf43..a12f9a570 100644 --- a/packages/core/tests/hooks.rs +++ b/packages/core/tests/hooks.rs @@ -10,7 +10,7 @@ type Shared = Rc>; #[test] fn sample_refs() { - // static App: FC<()> = |cx| { + // static App: FC<()> = |cx, props|{ // let div_ref = use_node_ref::(cx); // cx.render(rsx! { diff --git a/packages/desktop/README.md b/packages/desktop/README.md index 56817e0b6..dc840b09d 100644 --- a/packages/desktop/README.md +++ b/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! {

diff --git a/packages/desktop/examples/test.rs b/packages/desktop/examples/test.rs index cebd522b5..b327b1c33 100644 --- a/packages/desktop/examples/test.rs +++ b/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 { diff --git a/packages/hooks/examples/lifecycle.rs b/packages/hooks/examples/lifecycle.rs index 87c4e5559..0398f7b16 100644 --- a/packages/hooks/examples/lifecycle.rs +++ b/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() }, diff --git a/packages/hooks/src/usecollection.rs b/packages/hooks/src/usecollection.rs index cb696a214..d0b3b71e7 100644 --- a/packages/hooks/src/usecollection.rs +++ b/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); diff --git a/packages/hooks/src/useref.rs b/packages/hooks/src/useref.rs index 4254c2e52..1639628e0 100644 --- a/packages/hooks/src/useref.rs +++ b/packages/hooks/src/useref.rs @@ -33,6 +33,6 @@ impl Clone for UseRef<'_, T> { } impl Copy for UseRef<'_, T> {} -pub fn use_ref(cx: Context

, f: impl FnOnce() -> T) -> UseRef { +pub fn use_ref(cx: Context, f: impl FnOnce() -> T) -> UseRef { cx.use_hook(|_| RefCell::new(f()), |f| UseRef { inner: f }, |_| {}) } diff --git a/packages/hooks/src/usestate.rs b/packages/hooks/src/usestate.rs index ea0040be9..bb5ac85ca 100644 --- a/packages/hooks/src/usestate.rs +++ b/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( diff --git a/packages/ssr/README.md b/packages/ssr/README.md index 77fbc97e1..44ace9c77 100644 --- a/packages/ssr/README.md +++ b/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); diff --git a/packages/ssr/examples/basic.rs b/packages/ssr/examples/basic.rs index ece077759..5934f2cc8 100644 --- a/packages/ssr/examples/basic.rs +++ b/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" diff --git a/packages/ssr/examples/tide.rs b/packages/ssr/examples/tide.rs index 9fc58d2be..ae1805622 100644 --- a/packages/ssr/examples/tide.rs +++ b/packages/ssr/examples/tide.rs @@ -40,8 +40,8 @@ struct ExampleProps { initial_name: String, } -static Example: FC = |cx| { - let dispaly_name = use_state(cx, move || cx.initial_name.clone()); +static Example: FC = |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", diff --git a/packages/ssr/examples/tofile.rs b/packages/ssr/examples/tofile.rs index ec72532d0..6a14b4f85 100644 --- a/packages/ssr/examples/tofile.rs +++ b/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" diff --git a/packages/ssr/src/lib.rs b/packages/ssr/src/lib.rs index 57d9d11df..eb51883fc 100644 --- a/packages/ssr/src/lib.rs +++ b/packages/ssr/src/lib.rs @@ -44,7 +44,7 @@ pub fn render_vdom_scope(vdom: &VirtualDom, scope: ScopeId) -> Option { /// /// ## 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" } } }) diff --git a/packages/web/examples/async_web.rs b/packages/web/examples/async_web.rs index e1d1d49e6..d0dac5440 100644 --- a/packages/web/examples/async_web.rs +++ b/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( diff --git a/packages/web/examples/basic.rs b/packages/web/examples/basic.rs index 7561d2784..56eb1f74d 100644 --- a/packages/web/examples/basic.rs +++ b/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 { diff --git a/packages/web/examples/blah.rs b/packages/web/examples/blah.rs index a12ec2bb0..de33f9b62 100644 --- a/packages/web/examples/blah.rs +++ b/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 { diff --git a/packages/web/examples/btns.rs b/packages/web/examples/btns.rs index 1dfca2a4b..c354fea5b 100644 --- a/packages/web/examples/btns.rs +++ b/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" }; diff --git a/packages/web/examples/demo.rs b/packages/web/examples/demo.rs index 95bda2267..304715377 100644 --- a/packages/web/examples/demo.rs +++ b/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" diff --git a/src/lib.rs b/src/lib.rs index 7c9f6c3f3..0248ea19e 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -93,7 +93,7 @@ //! Dioxus uses hooks for state management. Hooks are a form of state persisted between calls of the function component. //! //! ``` -//! pub pub static Example: FC<()> = |cx| { +//! pub pub static Example: FC<()> = |cx, props|{ //! let (val, set_val) = use_state(cx, || 0); //! cx.render(rsx!( //! button { onclick: move |_| set_val(val + 1) } @@ -156,7 +156,7 @@ //! diouxs::web::launch(Example); //! } //! -//! pub pub static Example: FC<()> = |cx| { +//! pub pub static Example: FC<()> = |cx, props|{ //! cx.render(rsx! { //! div { "Hello World!" } //! })