diff --git a/docs/main-concepts/02-hello.md b/docs/main-concepts/02-hello.md index ad91849c..c33e115e 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 a615eb98..c3b51baa 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 c8741a9f..7979ccc6 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 c14d66c3..46b3f8e5 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 4d6417a8..01b01c1e 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 bfe6e9c3..5000faeb 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 e70d3de5..d1f943ec 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 0ba9ad7f..fee49b50 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 17d63df3..c30d1fd8 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 dbed8057..0658aa71 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 059f5743..958fa102 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 ac13aa19..72b89a3f 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 08de6dee..8d61a334 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 83423c8c..66a0fab7 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 932d17fd..cb4e95c7 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 fa84a03d..fcf7c790 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 a6589d7a..2cd24f7c 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 bf47c9f9..53ba2acd 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 f8415902..4232194b 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 be4973ac..cd2027b5 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 0b70003d..41906ce9 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 6fb13927..f800b7e5 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 7b637fcc..56bd3789 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 f7c25c82..9a2d0b4f 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 11110292..3a9d317c 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 0be0c668..912999b6 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 be96de93..eb1adc64 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 26386055..ef2dfc9b 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 ebebf218..10779416 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 44017d2e..bcd89805 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 6b44ec7c..972eff4f 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 5d4a89b3..bc0c289d 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 a7ee8588..8927198a 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 0f083d93..a661ae84 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 4e6999d9..6bf3fb85 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 ac294fd7..ee137ab1 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 82520b16..8eb8b098 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 7a2bf7de..52e3e9a9 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 e6eff4df..39d70bd9 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 aefc1030..f4c945c7 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 dc4e6783..16e89e52 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 0a536082..80be8094 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 16e37e49..bdabe83d 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 7b86430d..053b3aea 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 d852b5bb..28914bd6 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 ba0f21a8..a7915327 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 7ebde422..88c9dcae 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 eb3cb73b..5e7c75a8 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 f75e2ac1..272e220c 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 9067bb46..ed4fdfd1 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 269811a0..59d18026 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 b9b1985d..40aa5419 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 195210cf..8d22ee5b 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 fdab747b..2e69d8e6 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 4faddf90..770cf427 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 fdab747b..2e69d8e6 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 c0d8d54e..f5431edf 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 8f1e61e0..a5e877bc 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 d59e9619..587ce19c 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 02b1daf8..a04a165d 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 5a1227f7..0c256988 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 dd9370fd..ca3cc469 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 97391c03..80154b4a 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 9a74031d..b5d29844 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 c4149fae..406f5661 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 1eadcac5..63d76659 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 5add6a44..d5d961ba 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 e82f131e..82fe47db 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 8178684d..ee74970d 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 b897ffb5..9ff57388 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 11655c2e..5cc0851c 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 7f501822..377d6f22 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 6e3c1f53..f4763009 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 9222d711..1f712997 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 294a9a95..f744e607 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 95a8469f..02bebb43 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 73a83b45..a60dfb0f 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 e3044754..a11f5522 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 61dc7983..6c90a60c 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 58c4df70..ae7d761e 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 79400afd..902869f4 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 c5d643df..1793b030 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 65b3d971..991352c5 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 ff553560..b696a96c 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 9f83138d..849b1f7c 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 a7161cf4..a12f9a57 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 56817e0b..dc840b09 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 cebd522b..b327b1c3 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 87c4e555..0398f7b1 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 cb696a21..d0b3b71e 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 4254c2e5..1639628e 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 ea0040be..bb5ac85c 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 77fbc97e..44ace9c7 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 ece07775..5934f2cc 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 9fc58d2b..ae180562 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 ec72532d..6a14b4f8 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 57d9d11d..eb51883f 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 e1d1d49e..d0dac544 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 7561d278..56eb1f74 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 a12ec2bb..de33f9b6 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 1dfca2a4..c354fea5 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 95bda226..30471537 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 7c9f6c3f..0248ea19 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!" } //! })