From 9726a065b0d4fb1ede5b53a2ddd58c855e51539f Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Sat, 16 Oct 2021 17:37:28 -0400 Subject: [PATCH] feat: massage lifetimes --- README.md | 26 ++---------------- docs/src/README.md | 2 +- docs/src/concepts/10-concurrent-mode.md | 4 +-- docs/src/concepts/11-arena-memo.md | 6 ++--- docs/src/concepts/12-signals.md | 6 ++--- docs/src/hello_world.md | 6 ++--- examples/async.rs | 2 +- examples/borrowed.rs | 15 ++++------- examples/calculator.rs | 4 +-- examples/coroutine.rs | 4 +-- examples/crm.rs | 2 +- examples/file_explorer.rs | 2 +- examples/framework_benchmark.rs | 6 ++--- examples/hydration.rs | 2 +- examples/manual_edits.rs | 2 +- examples/pattern_model.rs | 4 +-- examples/pattern_reducer.rs | 2 +- examples/readme.rs | 2 +- examples/rsx_usage.rs | 6 ++--- examples/ssr.rs | 2 +- examples/tailwind.rs | 12 ++++----- examples/todomvc.rs | 4 +-- examples/weather_app.rs | 4 +-- examples/web_tick.rs | 4 +-- 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 | 4 +-- packages/core/examples/alternative.rs | 2 +- packages/core/examples/async.rs | 2 +- packages/core/examples/contextapi.rs | 2 +- packages/core/examples/jsframework.rs | 5 ++-- packages/core/examples/vdom_usage.rs | 2 +- packages/core/src/component.rs | 36 ++++++++++++++++++++++++- packages/core/src/context.rs | 12 ++++----- packages/core/src/hooks.rs | 2 +- packages/core/src/lib.rs | 4 +-- packages/core/src/nodes.rs | 2 +- packages/core/src/scope.rs | 10 +++---- packages/core/src/virtual_dom.rs | 14 +++++----- packages/core/tests/borrowedstate.rs | 6 ++--- packages/core/tests/create_dom.rs | 18 ++++++------- packages/core/tests/display_vdom.rs | 4 +-- packages/core/tests/eventsystem.rs | 2 +- packages/core/tests/hooks.rs | 2 +- packages/core/tests/lifecycle.rs | 2 +- packages/core/tests/sharedstate.rs | 4 +-- packages/core/tests/vdom_rebuild.rs | 14 +++++----- packages/desktop/README.md | 14 +++++----- packages/desktop/examples/crm.rs | 2 +- packages/desktop/examples/demo.rs | 2 +- packages/desktop/src/desktop_context.rs | 5 ++-- packages/hooks/examples/lifecycle.rs | 2 +- packages/hooks/src/usecollection.rs | 2 +- packages/hooks/src/usestate.rs | 2 +- packages/ssr/README.md | 2 +- packages/ssr/examples/basic.rs | 2 +- packages/ssr/examples/tide.rs | 2 +- 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/crm2.rs | 2 +- packages/web/examples/demo.rs | 12 ++++----- packages/web/src/lib.rs | 4 +-- reference/antipatterns.rs | 16 +++++------ reference/basics.rs | 4 +-- reference/children.rs | 4 +-- reference/conditional_rendering.rs | 8 +++--- reference/controlled_inputs.rs | 6 ++--- reference/custom_elements.rs | 2 +- reference/empty.rs | 2 +- reference/errorhandling.rs | 12 ++++----- reference/fragments.rs | 8 +++--- reference/global_css.rs | 2 +- reference/inline_styles.rs | 4 +-- reference/iterators.rs | 2 +- reference/listener.rs | 8 +++--- reference/memo.rs | 6 ++--- reference/noderefs.rs | 2 +- reference/signals.rs | 2 +- reference/spreadpattern.rs | 2 +- reference/statemanagement.rs | 2 +- reference/suspense.rs | 2 +- reference/task.rs | 2 +- reference/testing.rs | 2 +- reference/tostring.rs | 4 +-- src/lib.rs | 4 +-- 92 files changed, 250 insertions(+), 241 deletions(-) diff --git a/README.md b/README.md index 563aa5d3e..4c0354f18 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-platform user experiences in Rust. ```rust -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { let mut count = use_state(cx, || 0); cx.render(rsx!( @@ -96,28 +96,6 @@ If you know React, then you already know Dioxus. See the awesome-dioxus page for a curated list of content in the Dioxus Ecosystem. - - ## Why? TypeScript is a great addition to JavaScript, but comes with a lot of tweaking flags, a slight performance hit, and an uneven ecosystem where some of the most important packages are not properly typed. TypeScript provides a lot of great benefits to JS projects, but comes with its own "tax" that can slow down dev teams. Rust can be seen as a step up from TypeScript, supporting: @@ -130,7 +108,7 @@ TypeScript is a great addition to JavaScript, but comes with a lot of tweaking f - integrated documentation - inline built-in unit/integration testing - best-in-class error handling -- simple and fast build system (compared to webpack!) +- simple and fast build system (compared to WebPack!) - powerful standard library (no need for lodash or underscore) - include_str! for integrating html/css/svg templates directly - various macros (`html!`, `rsx!`) for fast template iteration diff --git a/docs/src/README.md b/docs/src/README.md index 7e3257634..5c02265aa 100644 --- a/docs/src/README.md +++ b/docs/src/README.md @@ -6,7 +6,7 @@ ```rust, ignore // An example Dioxus app - closely resembles React -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { let mut count = use_state(cx, || 0); cx.render(rsx!( diff --git a/docs/src/concepts/10-concurrent-mode.md b/docs/src/concepts/10-concurrent-mode.md index 46b3f8e52..fe166edac 100644 --- a/docs/src/concepts/10-concurrent-mode.md +++ b/docs/src/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, props|rsx!{
"loading..."
}) - .delayed_place_holder(1000, |cx, props|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/src/concepts/11-arena-memo.md b/docs/src/concepts/11-arena-memo.md index 01b01c1e1..bc7faaceb 100644 --- a/docs/src/concepts/11-arena-memo.md +++ b/docs/src/concepts/11-arena-memo.md @@ -21,9 +21,9 @@ fn test() -> DomTree { } } -static TestComponent: FC<()> = |cx, props|html!{
"Hello world"
}; +static TestComponent: FC<()> = |(cx, props)|html!{
"Hello world"
}; -static TestComponent: FC<()> = |cx, props|{ +static TestComponent: FC<()> = |(cx, props)|{ let g = "BLAH"; html! {
"Hello world"
@@ -31,7 +31,7 @@ static TestComponent: FC<()> = |cx, props|{ }; #[functional_component] -static TestComponent: FC<{ name: String }> = |cx, props|html! {
"Hello {name}"
}; +static TestComponent: FC<{ name: String }> = |(cx, props)|html! {
"Hello {name}"
}; ``` ## Why this behavior? diff --git a/docs/src/concepts/12-signals.md b/docs/src/concepts/12-signals.md index 5000faebc..d64a7617e 100644 --- a/docs/src/concepts/12-signals.md +++ b/docs/src/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, props|{ +const Provider: FC<()> = |(cx, props)|{ let title = use_signal(&cx, &TITLE); rsx!(cx, input { value: title }) }; @@ -105,7 +105,7 @@ const Provider: FC<()> = |cx, props|{ 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, props|{ +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, props|{ +const List: FC<()> = |(cx, props)|{ let dict = use_signal(&cx, &DICT); cx.render(rsx!( ul { diff --git a/docs/src/hello_world.md b/docs/src/hello_world.md index 3a0d93b0e..b06027ea2 100644 --- a/docs/src/hello_world.md +++ b/docs/src/hello_world.md @@ -85,7 +85,7 @@ fn main() { dioxus::desktop::start(App, |c| c); } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { cx.render(rsx! ( div { "Hello, world!" } )) @@ -111,7 +111,7 @@ fn main() { Finally, our app. Every component in Dioxus is a function that takes in `Context` and `Props` and returns an `Option`. ```rust -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { cx.render(rsx! { div { "Hello, world!" } }) @@ -149,7 +149,7 @@ If we wanted to golf a bit, we can shrink our hello-world even smaller: ```rust fn main() { - static App: FC<()> = |cx, props| rsx!(cx, div {"hello world!"}); + static App: FC<()> = |(cx, props)| rsx!(cx, div {"hello world!"}); dioxus::web::start(App, |c| c); } ``` diff --git a/examples/async.rs b/examples/async.rs index 4e4852596..c9abce7c2 100644 --- a/examples/async.rs +++ b/examples/async.rs @@ -11,7 +11,7 @@ async fn main() { dioxus::desktop::launch(App, |c| c); } -pub static App: FC<()> = |cx, _| { +pub static App: FC<()> = |(cx, _)| { let count = use_state(cx, || 0); let mut direction = use_state(cx, || 1); diff --git a/examples/borrowed.rs b/examples/borrowed.rs index 320d5faa4..e74254905 100644 --- a/examples/borrowed.rs +++ b/examples/borrowed.rs @@ -20,8 +20,8 @@ fn main() { dioxus::desktop::launch(App, |c| c); } -fn App<'a>(cx: Context<'a>, props: &()) -> DomTree<'a> { - let text: &'a mut Vec = cx.use_hook(|_| vec![String::from("abc=def")], |f| f, |_| {}); +fn App((cx, props): Component<()>) -> DomTree { + let text: &mut Vec = cx.use_hook(|_| vec![String::from("abc=def")], |f| f, |_| {}); let first = text.get_mut(0).unwrap(); @@ -43,7 +43,7 @@ impl<'a> Drop for C1Props<'a> { fn drop(&mut self) {} } -fn Child1<'a>(cx: Context<'a>, props: &'a C1Props) -> DomTree<'a> { +fn Child1<'a>((cx, props): Component<'a, C1Props>) -> DomTree<'a> { let (left, right) = props.text.split_once("=").unwrap(); cx.render(rsx! { @@ -58,13 +58,8 @@ fn Child1<'a>(cx: Context<'a>, props: &'a C1Props) -> DomTree<'a> { struct C2Props<'a> { text: &'a str, } -impl<'a> Drop for C2Props<'a> { - fn drop(&mut self) { - todo!() - } -} -fn Child2<'a>(cx: Context<'a>, props: &'a C2Props) -> DomTree<'a> { +fn Child2<'a>((cx, props): Component<'a, C2Props>) -> DomTree<'a> { cx.render(rsx! { Child3 { text: props.text @@ -77,7 +72,7 @@ struct C3Props<'a> { text: &'a str, } -fn Child3<'a>(cx: Context<'a>, props: &C3Props) -> DomTree<'a> { +fn Child3<'a>((cx, props): Component<'a, C3Props>) -> DomTree<'a> { cx.render(rsx! { div { "{props.text}"} }) diff --git a/examples/calculator.rs b/examples/calculator.rs index c9fc8eb3a..deabb0d34 100644 --- a/examples/calculator.rs +++ b/examples/calculator.rs @@ -10,7 +10,7 @@ fn main() { dioxus::desktop::launch(APP, |cfg| cfg); } -const APP: FC<()> = |cx, _| { +const APP: FC<()> = |(cx, _)| { let cur_val = use_state(cx, || 0.0_f64); let operator = use_state(cx, || None as Option<&'static str>); let display_value = use_state(cx, || String::from("")); @@ -116,7 +116,7 @@ struct CalculatorKeyProps<'a> { onclick: &'a dyn Fn(MouseEvent), } -fn CalculatorKey<'a>(cx: Context<'a>, props: &'a CalculatorKeyProps) -> DomTree<'a> { +fn CalculatorKey<'a>((cx, props): Component<'a, CalculatorKeyProps>) -> DomTree<'a> { rsx!(cx, button { class: "calculator-key {props.name}" onclick: {props.onclick} diff --git a/examples/coroutine.rs b/examples/coroutine.rs index ef2dfc9b9..a183e65ca 100644 --- a/examples/coroutine.rs +++ b/examples/coroutine.rs @@ -27,7 +27,7 @@ fn main() { use dioxus::prelude::*; -static App: FC<()> = |cx, props| { +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, props| { +static Horsey: FC = |(cx, props)| { cx.render(rsx! { div { button { "pause" } diff --git a/examples/crm.rs b/examples/crm.rs index c44423bd0..994a43f72 100644 --- a/examples/crm.rs +++ b/examples/crm.rs @@ -19,7 +19,7 @@ pub struct Client { pub description: String, } -static App: FC<()> = |cx, _| { +static App: FC<()> = |(cx, _)| { let clients = use_ref(cx, || vec![] as Vec); let scene = use_state(cx, || Scene::ClientsList); diff --git a/examples/file_explorer.rs b/examples/file_explorer.rs index 113f52216..096922a21 100644 --- a/examples/file_explorer.rs +++ b/examples/file_explorer.rs @@ -18,7 +18,7 @@ fn main() { }); } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { let file_manager = use_ref(cx, || Files::new()); let files = file_manager.read(); diff --git a/examples/framework_benchmark.rs b/examples/framework_benchmark.rs index aa102a5c9..5a5b2f8cc 100644 --- a/examples/framework_benchmark.rs +++ b/examples/framework_benchmark.rs @@ -9,7 +9,7 @@ fn main() { // We use a special immutable hashmap to make hashmap operations efficient type RowList = im_rc::HashMap, FxBuildHasher>; -static App: FC<()> = |cx, _props| { +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)); @@ -80,7 +80,7 @@ struct ActionButtonProps<'a> { onclick: &'a dyn Fn(MouseEvent), } -fn ActionButton<'a>(cx: Context<'a>, props: &'a ActionButtonProps) -> DomTree<'a> { +fn ActionButton<'a>((cx, props): Component<'a, ActionButtonProps>) -> DomTree<'a> { rsx!(cx, div { class: "col-sm-6 smallpad" button { class:"btn btn-primary btn-block", r#type: "button", id: "{props.id}", onclick: {props.onclick}, "{props.name}" @@ -93,7 +93,7 @@ struct RowProps { row_id: usize, label: Rc, } -fn Row<'a>(cx: Context<'a>, props: &'a RowProps) -> DomTree<'a> { +fn Row((cx, props): Component) -> DomTree { rsx!(cx, tr { td { class:"col-md-1", "{props.row_id}" } td { class:"col-md-1", onclick: move |_| { /* run onselect */ } diff --git a/examples/hydration.rs b/examples/hydration.rs index ccda8930e..f910a7d80 100644 --- a/examples/hydration.rs +++ b/examples/hydration.rs @@ -19,7 +19,7 @@ fn main() { dioxus::desktop::launch(App, |c| c.with_prerendered(content)); } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { let mut val = use_state(cx, || 0); cx.render(rsx! { diff --git a/examples/manual_edits.rs b/examples/manual_edits.rs index 17253eb92..a24b606f9 100644 --- a/examples/manual_edits.rs +++ b/examples/manual_edits.rs @@ -36,7 +36,7 @@ fn main() { dioxus_desktop::run(APP, (), |c| c.with_edits(edits)); } -const APP: FC<()> = |cx, _props| { +const APP: FC<()> = |(cx, _props)| { rsx!(cx, div { "some app" }) diff --git a/examples/pattern_model.rs b/examples/pattern_model.rs index bfc49bcd0..1d046a76f 100644 --- a/examples/pattern_model.rs +++ b/examples/pattern_model.rs @@ -31,7 +31,7 @@ fn main() { }); } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { let state = use_ref(cx, || Calculator::new()); let clear_display = state.read().display_value.eq("0"); @@ -76,7 +76,7 @@ struct CalculatorKeyProps<'a> { onclick: &'a dyn Fn(MouseEvent), } -fn CalculatorKey<'a, 'r>(cx: Context<'a>, props: &'a CalculatorKeyProps) -> DomTree<'a> { +fn CalculatorKey<'a>((cx, props): Component<'a, CalculatorKeyProps>) -> DomTree<'a> { cx.render(rsx! { button { class: "calculator-key {props.name}" diff --git a/examples/pattern_reducer.rs b/examples/pattern_reducer.rs index a23bd2659..057f3918f 100644 --- a/examples/pattern_reducer.rs +++ b/examples/pattern_reducer.rs @@ -11,7 +11,7 @@ fn main() { dioxus::desktop::launch(App, |c| c); } -pub static App: FC<()> = |cx, _| { +pub static App: FC<()> = |(cx, _)| { let state = use_state(cx, PlayerState::new); let is_playing = state.is_playing(); diff --git a/examples/readme.rs b/examples/readme.rs index 8eb8b098f..b1e29a985 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, props| { +static App: FC<()> = |(cx, props)| { let mut count = use_state(cx, || 0); cx.render(rsx! { diff --git a/examples/rsx_usage.rs b/examples/rsx_usage.rs index 0c2569880..7773a1b78 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, props| { +pub static Example: FC<()> = |(cx, props)| { let formatting = "formatting!"; let formatting_tuple = ("a", "b"); let lazy_fmt = format_args!("lazily formatted text"); @@ -184,7 +184,7 @@ mod baller { pub struct BallerProps {} /// This component totally balls - pub fn Baller<'a>(cx: Context<'a>, props: &BallerProps) -> DomTree<'a> { + pub fn Baller(_: Component) -> DomTree { todo!() } } @@ -195,7 +195,7 @@ pub struct TallerProps { } /// This component is taller than most :) -pub fn Taller<'a>(cx: Context<'a>, props: &'a TallerProps) -> DomTree<'a> { +pub fn Taller(_: Component) -> DomTree { let b = true; todo!() } diff --git a/examples/ssr.rs b/examples/ssr.rs index b5d29844d..0991e53e4 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, props| { +static App: FC<()> = |(cx, props)| { cx.render(rsx!( div { h1 { "Title" } diff --git a/examples/tailwind.rs b/examples/tailwind.rs index 406f56613..e9b8b5378 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, props| { +pub static App: FC<()> = |(cx, props)| { cx.render(rsx!( div { class: "overflow-hidden" style { "{STYLE}" } @@ -30,7 +30,7 @@ pub static App: FC<()> = |cx, props| { )) }; -pub static Header: FC<()> = |cx, props| { +pub static Header: FC<()> = |(cx, props)| { cx.render(rsx! { div { header { class: "text-gray-400 bg-gray-900 body-font" @@ -56,7 +56,7 @@ pub static Header: FC<()> = |cx, props| { }) }; -pub static Hero: FC<()> = |cx, props| { +pub static Hero: FC<()> = |(cx, props)| { // cx.render(rsx! { section{ class: "text-gray-400 bg-gray-900 body-font" @@ -94,7 +94,7 @@ pub static Hero: FC<()> = |cx, props| { } }) }; -pub static Entry: FC<()> = |cx, props| { +pub static Entry: FC<()> = |(cx, props)| { // cx.render(rsx! { section{ class: "text-gray-400 bg-gray-900 body-font" @@ -107,7 +107,7 @@ pub static Entry: FC<()> = |cx, props| { }) }; -pub static StacksIcon: FC<()> = |cx, props| { +pub static StacksIcon: FC<()> = |(cx, props)| { cx.render(rsx!( svg { // xmlns: "http://www.w3.org/2000/svg" @@ -122,7 +122,7 @@ pub static StacksIcon: FC<()> = |cx, props| { } )) }; -pub static RightArrowIcon: FC<()> = |cx, props| { +pub static RightArrowIcon: FC<()> = |(cx, props)| { cx.render(rsx!( svg { fill: "none" diff --git a/examples/todomvc.rs b/examples/todomvc.rs index 40cdd2a03..6a39220ef 100644 --- a/examples/todomvc.rs +++ b/examples/todomvc.rs @@ -22,7 +22,7 @@ pub struct TodoItem { } const STYLE: &str = include_str!("./assets/todomvc.css"); -const App: FC<()> = |cx, props| { +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); @@ -85,7 +85,7 @@ pub struct TodoEntryProps { todo: Rc, } -pub fn TodoEntry<'a>(cx: Context<'a>, props: &TodoEntryProps) -> DomTree<'a> { +pub fn TodoEntry((cx, props): Component) -> DomTree { let is_editing = use_state(cx, || false); let contents = use_state(cx, || String::from("")); let todo = &props.todo; diff --git a/examples/weather_app.rs b/examples/weather_app.rs index 8ebf69448..f1772805b 100644 --- a/examples/weather_app.rs +++ b/examples/weather_app.rs @@ -12,7 +12,7 @@ fn main() { const ENDPOINT: &str = "https://api.openweathermap.org/data/2.5/weather"; -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { // let body = use_suspense( cx, @@ -38,7 +38,7 @@ static App: FC<()> = |cx, props| { #[derive(PartialEq, Props)] struct WeatherProps {} -static WeatherDisplay: FC = |cx, props| { +static WeatherDisplay: FC = |(cx, props)| { // cx.render(rsx!( div { class: "flex items-center justify-center flex-col" diff --git a/examples/web_tick.rs b/examples/web_tick.rs index 82fe47db4..7cf9ceaab 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, props| { +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,7 +45,7 @@ struct RowProps { row_id: usize, label: Label, } -fn Row<'a>(cx: Context<'a>, props: &'a RowProps) -> DomTree<'a> { +fn Row((cx, props): Component) -> DomTree { let [adj, col, noun] = props.label.0; cx.render(rsx! { tr { diff --git a/examples/webview_web.rs b/examples/webview_web.rs index 9ff57388d..ee8d65b10 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, props| { +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 5cc0851c9..9842b7963 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, props|{ +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 377d6f221..e293c0d81 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, props|{ +pub static Example: FC<()> = |(cx, props)|{ html! {
"blah"
} }; // expands to... -pub static Example: FC<()> = |cx, props|{ +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, props|{ +static APP: FC<()> = |(cx, props)|{ let title = use_context(Title); cx.render(html!{
@@ -334,7 +334,7 @@ static APP: FC<()> = |cx, props|{
}) }; -static HEAVY_LIST: FC<()> = |cx, props|{ +static HEAVY_LIST: FC<()> = |(cx, props)|{ cx.render({ {0.100.map(i => )} }) @@ -378,7 +378,7 @@ struct Props { } -static Component: FC = |cx, props|{ +static Component: FC = |(cx, props)|{ } ``` diff --git a/packages/core-macro/src/lib.rs b/packages/core-macro/src/lib.rs index f4763009d..b491d74df 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, props|{ +/// 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 1f712997d..e228929cf 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, props|{ + // 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 8cf669a3e..113df0b71 100644 --- a/packages/core/benches/jsframework.rs +++ b/packages/core/benches/jsframework.rs @@ -23,7 +23,7 @@ criterion_group!(mbenches, create_rows); criterion_main!(mbenches); fn create_rows(c: &mut Criterion) { - static App: FC<()> = |cx, _| { + static App: FC<()> = |(cx, _)| { let mut rng = SmallRng::from_entropy(); let rows = (0..10_000_usize).map(|f| { let label = Label::new(&mut rng); @@ -57,7 +57,7 @@ struct RowProps { row_id: usize, label: Label, } -fn Row<'a>(cx: Context<'a>, props: &RowProps) -> DomTree<'a> { +fn Row((cx, props): Component) -> DomTree { let [adj, col, noun] = props.label.0; cx.render(rsx! { tr { diff --git a/packages/core/examples/alternative.rs b/packages/core/examples/alternative.rs index bb170873e..edf037f89 100644 --- a/packages/core/examples/alternative.rs +++ b/packages/core/examples/alternative.rs @@ -6,7 +6,7 @@ fn main() { println!("{}", dom); } -pub static EXAMPLE: FC<()> = |cx, _| { +pub static EXAMPLE: FC<()> = |(cx, _)| { let list = (0..10).map(|_f| LazyNodes::new(move |_f| todo!())); cx.render(LazyNodes::new(move |cx| { diff --git a/packages/core/examples/async.rs b/packages/core/examples/async.rs index 6575afe5f..9a1ff4a2c 100644 --- a/packages/core/examples/async.rs +++ b/packages/core/examples/async.rs @@ -5,7 +5,7 @@ fn main() { dom.rebuild(); } -const App: FC<()> = |cx, props| { +const App: FC<()> = |(cx, props)| { let id = cx.scope_id(); cx.submit_task(Box::pin(async move { id })); diff --git a/packages/core/examples/contextapi.rs b/packages/core/examples/contextapi.rs index 6c90a60c7..c9f839f4a 100644 --- a/packages/core/examples/contextapi.rs +++ b/packages/core/examples/contextapi.rs @@ -6,7 +6,7 @@ struct SomeContext { } #[allow(unused)] -static Example: FC<()> = |cx, props| { +static Example: FC<()> = |(cx, props)| { todo!() // let value = cx.use_context(|c: &SomeContext| c.items.last().unwrap()); diff --git a/packages/core/examples/jsframework.rs b/packages/core/examples/jsframework.rs index 2b5468ee7..c05bd06f6 100644 --- a/packages/core/examples/jsframework.rs +++ b/packages/core/examples/jsframework.rs @@ -1,3 +1,4 @@ +use dioxus::component::Component; use dioxus::events::on::MouseEvent; use dioxus_core as dioxus; use dioxus_core::prelude::*; @@ -12,7 +13,7 @@ fn main() { assert!(g.edits.len() > 1); } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { let mut rng = SmallRng::from_entropy(); let rows = (0..10_000_usize).map(|f| { let label = Label::new(&mut rng); @@ -37,7 +38,7 @@ struct RowProps { row_id: usize, label: Label, } -fn Row<'a>(cx: Context<'a>, props: &'a RowProps) -> DomTree<'a> { +fn Row((cx, props): Component) -> DomTree { let handler = move |evt: MouseEvent| { let g = evt.button; }; diff --git a/packages/core/examples/vdom_usage.rs b/packages/core/examples/vdom_usage.rs index 7175a167d..caf58faaf 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, props| cx.render(LazyNodes::new(|f| f.text(format_args!("hello")))); + static App: FC<()> = |(cx, props)| cx.render(LazyNodes::new(|f| f.text(format_args!("hello")))); let mut dom = VirtualDom::new(App); diff --git a/packages/core/src/component.rs b/packages/core/src/component.rs index 0ec306229..5532b8c24 100644 --- a/packages/core/src/component.rs +++ b/packages/core/src/component.rs @@ -7,6 +7,40 @@ use crate::innerlude::{Context, DomTree, LazyNodes, FC}; +/// A component is a wrapper around a Context and some Props that share a lifetime +/// +/// +/// # Example +/// +/// With memoized state: +/// ```rust +/// struct State {} +/// +/// fn Example((cx, props): Component) -> DomTree { +/// // ... +/// } +/// ``` +/// +/// With borrowed state: +/// ```rust +/// struct State<'a> { +/// name: &'a str +/// } +/// +/// fn Example<'a>((cx, props): Component<'a, State>) -> DomTree<'a> { +/// // ... +/// } +/// ``` +/// +/// With owned state as a closure: +/// ```rust +/// static Example: FC<()> = |(cx, props)| { +/// // ... +/// }; +/// ``` +/// +pub type Component<'a, T> = (Context<'a>, &'a T); + /// Create inline fragments using Component syntax. /// /// Fragments capture a series of children without rendering extra nodes. @@ -29,7 +63,7 @@ use crate::innerlude::{Context, DomTree, LazyNodes, FC}; /// You want to use this free-function when your fragment needs a key and simply returning multiple nodes from rsx! won't cut it. /// #[allow(non_upper_case_globals, non_snake_case)] -pub fn Fragment<'a>(cx: Context<'a>, _: &'a ()) -> DomTree<'a> { +pub fn Fragment((cx, _): Component<()>) -> DomTree { cx.render(LazyNodes::new(|f| f.fragment_from_iter(cx.children()))) } diff --git a/packages/core/src/context.rs b/packages/core/src/context.rs index 833766e83..fe073ccff 100644 --- a/packages/core/src/context.rs +++ b/packages/core/src/context.rs @@ -69,7 +69,7 @@ impl<'src> Context<'src> { /// ## Example /// /// ```rust - /// const App: FC<()> = |cx, props|{ + /// const App: FC<()> = |(cx, props)|{ /// cx.render(rsx!{ /// CustomCard { /// h1 {} @@ -78,7 +78,7 @@ impl<'src> Context<'src> { /// }) /// } /// - /// const CustomCard: FC<()> = |cx, props|{ + /// const CustomCard: FC<()> = |(cx, props)|{ /// cx.render(rsx!{ /// div { /// h1 {"Title card"} @@ -181,12 +181,12 @@ impl<'src> Context<'src> { /// ``` /// struct SharedState(&'static str); /// - /// static App: FC<()> = |cx, props|{ + /// static App: FC<()> = |(cx, props)|{ /// cx.provide_state(SharedState("world")); /// rsx!(cx, Child {}) /// } /// - /// static Child: FC<()> = |cx, props|{ + /// static Child: FC<()> = |(cx, props)|{ /// let state = cx.consume_state::(); /// rsx!(cx, div { "hello {state.0}" }) /// } @@ -221,7 +221,7 @@ impl<'src> Context<'src> { /// # Example /// /// ```rust - /// static App: FC<()> = |cx, props| { + /// static App: FC<()> = |(cx, props)| { /// todo!(); /// rsx!(cx, div { "Subtree {id}"}) /// }; @@ -238,7 +238,7 @@ impl<'src> Context<'src> { /// # Example /// /// ```rust - /// static App: FC<()> = |cx, props| { + /// static App: FC<()> = |(cx, props)| { /// let id = cx.get_current_subtree(); /// rsx!(cx, div { "Subtree {id}"}) /// }; diff --git a/packages/core/src/hooks.rs b/packages/core/src/hooks.rs index f90f42d59..bd56de2e5 100644 --- a/packages/core/src/hooks.rs +++ b/packages/core/src/hooks.rs @@ -18,7 +18,7 @@ use std::{any::Any, cell::RefCell, future::Future, ops::Deref, rc::Rc}; /// Returns the handle to the task and the value (if it is ready, else None). /// /// ``` -/// static Example: FC<()> = |cx, props| { +/// static Example: FC<()> = |(cx, props)| { /// let (task, value) = use_task(|| async { /// timer::sleep(Duration::from_secs(1)).await; /// "Hello World" diff --git a/packages/core/src/lib.rs b/packages/core/src/lib.rs index 091f0f774..c77aa50a0 100644 --- a/packages/core/src/lib.rs +++ b/packages/core/src/lib.rs @@ -57,7 +57,7 @@ pub(crate) mod innerlude { pub use crate::virtual_dom::*; pub type DomTree<'a> = Option>; - pub type FC

= for<'a> fn(Context<'a>, &'a P) -> DomTree<'a>; + pub type FC

= for<'a> fn(Component<'a, P>) -> DomTree<'a>; } pub use crate::innerlude::{ @@ -67,7 +67,7 @@ pub use crate::innerlude::{ }; pub mod prelude { - pub use crate::component::{fc_to_builder, Fragment, Properties}; + pub use crate::component::{fc_to_builder, Component, Fragment, Properties}; pub use crate::context::Context; pub use crate::hooks::*; pub use crate::innerlude::{DioxusElement, DomTree, LazyNodes, Mutations, NodeFactory, FC}; diff --git a/packages/core/src/nodes.rs b/packages/core/src/nodes.rs index eae2709fa..00cc6e15d 100644 --- a/packages/core/src/nodes.rs +++ b/packages/core/src/nodes.rs @@ -526,7 +526,7 @@ impl<'a> NodeFactory<'a> { let caller: &'a mut dyn for<'b> Fn(&'b Scope) -> DomTree<'b> = bump.alloc(move |scope: &Scope| -> DomTree { let props: &'_ P = unsafe { &*(raw_props as *const P) }; - let res = component(Context { scope }, props); + let res = component((Context { scope }, props)); unsafe { std::mem::transmute(res) } }); diff --git a/packages/core/src/scope.rs b/packages/core/src/scope.rs index b4cbb6e5d..4656a0284 100644 --- a/packages/core/src/scope.rs +++ b/packages/core/src/scope.rs @@ -60,7 +60,7 @@ impl Scope { /// /// # Example /// ```rust - /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} })); + /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} })); /// dom.rebuild(); /// /// let base = dom.base_scope(); @@ -82,7 +82,7 @@ impl Scope { /// # Example /// /// ```rust - /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} })); + /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} })); /// dom.rebuild(); /// /// let base = dom.base_scope(); @@ -110,7 +110,7 @@ impl Scope { /// # Example /// /// ```rust - /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} })); + /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} })); /// dom.rebuild(); /// /// let base = dom.base_scope(); @@ -130,7 +130,7 @@ impl Scope { /// # Example /// /// ```rust - /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} })); + /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} })); /// dom.rebuild(); /// /// let base = dom.base_scope(); @@ -148,7 +148,7 @@ impl Scope { /// # Example /// /// ```rust - /// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} })); + /// let mut dom = VirtualDom::new(|(cx, props)|cx.render(rsx!{ div {} })); /// dom.rebuild(); /// let base = dom.base_scope(); /// diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 55857e091..02aeff18d 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -33,7 +33,7 @@ use std::{any::Any, rc::Rc}; /// /// Example /// ```rust -/// static App: FC<()> = |cx, props|{ +/// static App: FC<()> = |(cx, props)|{ /// cx.render(rsx!{ /// div { /// "Hello World" @@ -145,7 +145,7 @@ impl VirtualDom { // Safety: this callback is only valid for the lifetime of the root props let root_caller: Rc DomTree> = Rc::new(move |scope: &Scope| unsafe { let props = _p.downcast_ref::

().unwrap(); - std::mem::transmute(root(Context { scope }, props)) + std::mem::transmute(root((Context { scope }, props))) }); let scheduler = Scheduler::new(sender, receiver); @@ -196,7 +196,7 @@ impl VirtualDom { /// struct AppProps { /// route: &'static str /// } - /// static App: FC = |cx, props|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" }); /// @@ -222,7 +222,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 { scope }, props)) + std::mem::transmute(root((Context { scope }, props))) }); root_scope.update_scope_dependencies(&root_caller, ScopeChildren(&[])); @@ -246,7 +246,7 @@ impl VirtualDom { /// /// # Example /// ``` - /// static App: FC<()> = |cx, props|cx.render(rsx!{ "hello world" }); + /// static App: FC<()> = |(cx, props)|cx.render(rsx!{ "hello world" }); /// let mut dom = VirtualDom::new(); /// let edits = dom.rebuild(); /// @@ -271,7 +271,7 @@ impl VirtualDom { /// value: Shared<&'static str>, /// } /// - /// static App: FC = |cx, props|{ + /// static App: FC = |(cx, props)|{ /// let val = cx.value.borrow(); /// cx.render(rsx! { div { "{val}" } }) /// }; @@ -333,7 +333,7 @@ impl VirtualDom { /// # Example /// /// ```no_run - /// static App: FC<()> = |cx, props|rsx!(cx, div {"hello"} ); + /// static App: FC<()> = |(cx, props)|rsx!(cx, div {"hello"} ); /// let mut dom = VirtualDom::new(App); /// loop { /// let deadline = TimeoutFuture::from_ms(16); diff --git a/packages/core/tests/borrowedstate.rs b/packages/core/tests/borrowedstate.rs index 3ff26b69b..60cc0d3f2 100644 --- a/packages/core/tests/borrowedstate.rs +++ b/packages/core/tests/borrowedstate.rs @@ -3,7 +3,7 @@ use dioxus_core as dioxus; use dioxus_core_macro::*; use dioxus_html as dioxus_elements; -static Parent: FC<()> = |cx, props| { +static Parent: FC<()> = |(cx, props)| { let value = cx.use_hook(|_| String::new(), |f| &*f, |_| {}); cx.render(rsx! { @@ -21,7 +21,7 @@ struct ChildProps<'a> { name: &'a String, } -fn Child<'a>(cx: Context<'a>, props: &'a ChildProps) -> DomTree<'a> { +fn Child<'a>((cx, props): Component<'a, ChildProps>) -> DomTree<'a> { cx.render(rsx! { div { h1 { "it's nested" } @@ -35,7 +35,7 @@ struct Grandchild<'a> { name: &'a String, } -fn Child2<'a>(cx: Context<'a>, props: &Grandchild) -> DomTree<'a> { +fn Child2<'a>((cx, props): Component<'a, Grandchild>) -> DomTree<'a> { cx.render(rsx! { div { "Hello {props.name}!" } }) diff --git a/packages/core/tests/create_dom.rs b/packages/core/tests/create_dom.rs index 22b84031f..c26c8bed1 100644 --- a/packages/core/tests/create_dom.rs +++ b/packages/core/tests/create_dom.rs @@ -19,7 +19,7 @@ fn new_dom(app: FC

, props: P) -> VirtualDom { #[test] fn test_original_diff() { - static APP: FC<()> = |cx, props| { + static APP: FC<()> = |(cx, props)| { cx.render(rsx! { div { div { @@ -55,7 +55,7 @@ fn test_original_diff() { #[test] fn create() { - static APP: FC<()> = |cx, props| { + static APP: FC<()> = |(cx, props)| { cx.render(rsx! { div { div { @@ -118,7 +118,7 @@ fn create() { #[test] fn create_list() { - static APP: FC<()> = |cx, props| { + static APP: FC<()> = |(cx, props)| { cx.render(rsx! { {(0..3).map(|f| rsx!{ div { "hello" @@ -167,7 +167,7 @@ fn create_list() { #[test] fn create_simple() { - static APP: FC<()> = |cx, props| { + static APP: FC<()> = |(cx, props)| { cx.render(rsx! { div {} div {} @@ -205,7 +205,7 @@ fn create_simple() { } #[test] fn create_components() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx! { Child { "abc1" } Child { "abc2" } @@ -213,7 +213,7 @@ fn create_components() { }) }; - static Child: FC<()> = |cx, props| { + static Child: FC<()> = |(cx, props)| { cx.render(rsx! { h1 {} div { {cx.children()} } @@ -266,7 +266,7 @@ fn create_components() { } #[test] fn anchors() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx! { {true.then(|| rsx!{ div { "hello" } })} {false.then(|| rsx!{ div { "goodbye" } })} @@ -295,13 +295,13 @@ fn anchors() { #[test] fn suspended() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { let val = use_suspense( cx, || async { // }, - |cx, _| cx.render(rsx! { "hi "}), + |cx, p| cx.render(rsx! { "hi "}), ); cx.render(rsx! { {val} }) }; diff --git a/packages/core/tests/display_vdom.rs b/packages/core/tests/display_vdom.rs index ac34fdcc2..107a2a1c9 100644 --- a/packages/core/tests/display_vdom.rs +++ b/packages/core/tests/display_vdom.rs @@ -16,7 +16,7 @@ const IS_LOGGING_ENABLED: bool = true; #[test] fn please_work() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx! { div { hidden: "true" @@ -30,7 +30,7 @@ fn please_work() { }) }; - static Child: FC<()> = |cx, props| { + static Child: FC<()> = |(cx, props)| { cx.render(rsx! { div { "child" } }) diff --git a/packages/core/tests/eventsystem.rs b/packages/core/tests/eventsystem.rs index 383832d0b..7b0380efe 100644 --- a/packages/core/tests/eventsystem.rs +++ b/packages/core/tests/eventsystem.rs @@ -8,7 +8,7 @@ use dioxus_html as dioxus_elements; #[async_std::test] async fn event_queue_works() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx! { div { "hello world" } }) diff --git a/packages/core/tests/hooks.rs b/packages/core/tests/hooks.rs index a12f9a570..664355fdf 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, props|{ + // static App: FC<()> = |(cx, props)|{ // let div_ref = use_node_ref::(cx); // cx.render(rsx! { diff --git a/packages/core/tests/lifecycle.rs b/packages/core/tests/lifecycle.rs index b130ea2e8..5e3d69a97 100644 --- a/packages/core/tests/lifecycle.rs +++ b/packages/core/tests/lifecycle.rs @@ -20,7 +20,7 @@ fn manual_diffing() { value: Shared<&'static str>, } - static App: FC = |cx, props| { + static App: FC = |(cx, props)| { let val = props.value.lock().unwrap(); cx.render(rsx! { div { "{val}" } }) }; diff --git a/packages/core/tests/sharedstate.rs b/packages/core/tests/sharedstate.rs index b82893373..f5b730016 100644 --- a/packages/core/tests/sharedstate.rs +++ b/packages/core/tests/sharedstate.rs @@ -17,12 +17,12 @@ fn new_dom() -> TestDom { fn shared_state_test() { struct MySharedState(&'static str); - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.provide_state(MySharedState("world!")); rsx!(cx, Child {}) }; - static Child: FC<()> = |cx, props| { + static Child: FC<()> = |(cx, props)| { let shared = cx.consume_state::()?; rsx!(cx, "Hello, {shared.0}") }; diff --git a/packages/core/tests/vdom_rebuild.rs b/packages/core/tests/vdom_rebuild.rs index 883e24468..12fa26d4f 100644 --- a/packages/core/tests/vdom_rebuild.rs +++ b/packages/core/tests/vdom_rebuild.rs @@ -15,7 +15,7 @@ use dioxus_html as dioxus_elements; #[test] fn app_runs() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { // cx.render(rsx!( div{"hello"} )) }; @@ -26,7 +26,7 @@ fn app_runs() { #[test] fn fragments_work() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx!( div{"hello"} div{"goodbye"} @@ -40,7 +40,7 @@ fn fragments_work() { #[test] fn lists_work() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx!( h1 {"hello"} {(0..6).map(|f| rsx!(span{ "{f}" }))} @@ -53,7 +53,7 @@ fn lists_work() { #[test] fn conditional_rendering() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx!( h1 {"hello"} {true.then(|| rsx!(span{ "a" }))} @@ -70,13 +70,13 @@ fn conditional_rendering() { #[test] fn child_components() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx!( {true.then(|| rsx!(Child { }))} {false.then(|| rsx!(Child { }))} )) }; - static Child: FC<()> = |cx, props| { + static Child: FC<()> = |(cx, props)| { cx.render(rsx!( h1 {"hello"} h1 {"goodbye"} @@ -89,7 +89,7 @@ fn child_components() { #[test] fn suspended_works() { - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { let title = use_suspense(cx, || async { "bob" }, |cx, f| cx.render(rsx! { "{f}"})); cx.render(rsx!("hello" { title })) }; diff --git a/packages/desktop/README.md b/packages/desktop/README.md index 0c1663488..2888ae223 100644 --- a/packages/desktop/README.md +++ b/packages/desktop/README.md @@ -7,7 +7,7 @@ fn main() { dioxus::desktop::launch(App, |c| c) } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { let (count, set_count) = use_state(cx, || 0); cx.render(rsx!( @@ -34,7 +34,7 @@ Window management, system trays, notifications, and other desktop-related functi Managing windows is done by simply rendering content into a `WebviewWindow` component. ```rust -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { rsx!(cx, WebviewWindow { "hello world" } ) } ``` @@ -46,7 +46,7 @@ Notifications also use a declarative approach. Sending a notification has never The api has been somewhat modeled after https://github.com/mikaelbr/node-notifier ```rust -static Notifications: FC<()> = |cx, props| { +static Notifications: FC<()> = |(cx, props)| { cx.render(rsx!( Notification { title: "title" @@ -78,7 +78,7 @@ static Notifications: FC<()> = |cx, props| { Dioxus Desktop supports app trays, which can be built with native menu groups or with a custom window. ```rust -static Tray: FC<()> = |cx, props| { +static Tray: FC<()> = |(cx, props)| { cx.render(rsx!( GlobalTray { MenuGroup { @@ -90,7 +90,7 @@ static Tray: FC<()> = |cx, props| { }; // using a builder -static Tray: FC<()> = |cx, props| { +static Tray: FC<()> = |(cx, props)| { let menu = MenuGroup::builder(cx) .with_items([ MenuGroupItem::builder() @@ -107,7 +107,7 @@ static Tray: FC<()> = |cx, props| { } // or with a custom window -static Tray: FC<()> = |cx, props| { +static Tray: FC<()> = |(cx, props)| { rsx!(cx, GlobalTray { div { "custom buttons here" } }) }; ``` @@ -116,7 +116,7 @@ static Tray: FC<()> = |cx, props| { Declaring menus is convenient and cross-platform. ```rust -static Menu: FC<()> = |cx, props| { +static Menu: FC<()> = |(cx, props)| { cx.render(rsx!( MenuBarMajorItem { title: "File" MenuGroup { diff --git a/packages/desktop/examples/crm.rs b/packages/desktop/examples/crm.rs index 72d1c3a3b..3971a4ab0 100644 --- a/packages/desktop/examples/crm.rs +++ b/packages/desktop/examples/crm.rs @@ -21,7 +21,7 @@ pub struct Client { pub description: String, } -static App: FC<()> = |cx, _| { +static App: FC<()> = |(cx, _)| { let scene = use_state(cx, || Scene::ClientsList); let clients = use_ref(cx, || vec![] as Vec); diff --git a/packages/desktop/examples/demo.rs b/packages/desktop/examples/demo.rs index 77a927e99..2b3367b22 100644 --- a/packages/desktop/examples/demo.rs +++ b/packages/desktop/examples/demo.rs @@ -8,7 +8,7 @@ fn main() { dioxus_desktop::launch(App, |c| c); } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { cx.render(rsx!( div { "hello world!" diff --git a/packages/desktop/src/desktop_context.rs b/packages/desktop/src/desktop_context.rs index 02242434b..f5c352c38 100644 --- a/packages/desktop/src/desktop_context.rs +++ b/packages/desktop/src/desktop_context.rs @@ -1,5 +1,6 @@ use std::cell::RefCell; +use dioxus::prelude::Component; use dioxus_core as dioxus; use dioxus_core::{Context, DomTree, LazyNodes, NodeFactory, Properties}; use dioxus_core_macro::Props; @@ -53,7 +54,7 @@ pub struct WebviewWindowProps<'a> { /// /// /// -pub fn WebviewWindow<'a>(cx: Context<'a>, props: &'a WebviewWindowProps) -> DomTree<'a> { +pub fn WebviewWindow<'a>((cx, props): Component<'a, WebviewWindowProps>) -> DomTree<'a> { let dtcx = cx.consume_state::>()?; cx.use_hook( @@ -89,7 +90,7 @@ fn syntax_works() { use dioxus_hooks::*; use dioxus_html as dioxus_elements; - static App: FC<()> = |cx, props| { + static App: FC<()> = |(cx, props)| { cx.render(rsx! { // left window WebviewWindow { diff --git a/packages/hooks/examples/lifecycle.rs b/packages/hooks/examples/lifecycle.rs index 0398f7b16..6988b8ae5 100644 --- a/packages/hooks/examples/lifecycle.rs +++ b/packages/hooks/examples/lifecycle.rs @@ -10,7 +10,7 @@ fn main() {} // Remvoe, // } -// static Component: FC<()> = |cx, props|{ +// static Component: FC<()> = |(cx, props)|{ // let (tasks, dispatch) = use_reducer( // cx, // || CompState { tasks: Vec::new() }, diff --git a/packages/hooks/src/usecollection.rs b/packages/hooks/src/usecollection.rs index d0b3b71e7..c82277291 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, props|{ +static TodoList: FC<()> = |(cx, props)|{ let todos = use_map(cx, || HashMap::new()); let input = use_ref(|| None); diff --git a/packages/hooks/src/usestate.rs b/packages/hooks/src/usestate.rs index be5ad9e94..76a72ea75 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, props|{ +/// const Example: FC<()> = |(cx, props)|{ /// let counter = use_state(cx, || 0); /// let increment = |_| counter += 1; /// let decrement = |_| counter += 1; diff --git a/packages/ssr/README.md b/packages/ssr/README.md index bec3bd33a..47ca4ebcd 100644 --- a/packages/ssr/README.md +++ b/packages/ssr/README.md @@ -5,7 +5,7 @@ Render a Dioxus VirtualDOM to a string. ```rust // Our app: -const App: FC<()> = |cx, props| rsx!(cx, div {"hello world!"}); +const App: FC<()> = |(cx, props)| rsx!(cx, div {"hello world!"}); // Build the virtualdom from our app let mut vdom = VirtualDOM::new(App); diff --git a/packages/ssr/examples/basic.rs b/packages/ssr/examples/basic.rs index c89c425e3..a4be3a701 100644 --- a/packages/ssr/examples/basic.rs +++ b/packages/ssr/examples/basic.rs @@ -12,7 +12,7 @@ fn main() { ) } -pub static App: FC<()> = |cx, props| { +pub static App: FC<()> = |(cx, props)| { cx.render(rsx!( div { class: "overflow-hidden" diff --git a/packages/ssr/examples/tide.rs b/packages/ssr/examples/tide.rs index d86fbdf55..eada5dae6 100644 --- a/packages/ssr/examples/tide.rs +++ b/packages/ssr/examples/tide.rs @@ -42,7 +42,7 @@ fn main() {} // initial_name: String, // } -// static Example: FC = |cx, props| { +// static Example: FC = |(cx, props)| { // let dispaly_name = use_state(cx, move || props.initial_name.clone()); // cx.render(rsx! { diff --git a/packages/ssr/examples/tofile.rs b/packages/ssr/examples/tofile.rs index 518991511..83e4dc28a 100644 --- a/packages/ssr/examples/tofile.rs +++ b/packages/ssr/examples/tofile.rs @@ -24,7 +24,7 @@ fn main() { .unwrap(); } -pub static App: FC<()> = |cx, props| { +pub static App: FC<()> = |(cx, props)| { cx.render(rsx!( div { class: "overflow-hidden" link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" } @@ -39,7 +39,7 @@ pub static App: FC<()> = |cx, props| { )) }; -pub static Header: FC<()> = |cx, props| { +pub static Header: FC<()> = |(cx, props)| { cx.render(rsx! { div { header { class: "text-gray-400 bg-gray-900 body-font" @@ -65,7 +65,7 @@ pub static Header: FC<()> = |cx, props| { }) }; -pub static Hero: FC<()> = |cx, props| { +pub static Hero: FC<()> = |(cx, props)| { // cx.render(rsx! { section{ class: "text-gray-400 bg-gray-900 body-font" @@ -103,7 +103,7 @@ pub static Hero: FC<()> = |cx, props| { } }) }; -pub static Entry: FC<()> = |cx, props| { +pub static Entry: FC<()> = |(cx, props)| { // cx.render(rsx! { section{ class: "text-gray-400 bg-gray-900 body-font" @@ -116,7 +116,7 @@ pub static Entry: FC<()> = |cx, props| { }) }; -pub static StacksIcon: FC<()> = |cx, props| { +pub static StacksIcon: FC<()> = |(cx, props)| { cx.render(rsx!( svg { // xmlns: "http://www.w3.org/2000/svg" @@ -131,7 +131,7 @@ pub static StacksIcon: FC<()> = |cx, props| { } )) }; -pub static RightArrowIcon: FC<()> = |cx, props| { +pub static RightArrowIcon: FC<()> = |(cx, props)| { cx.render(rsx!( svg { fill: "none" diff --git a/packages/ssr/src/lib.rs b/packages/ssr/src/lib.rs index e9731cfdc..96a84f161 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, props|cx.render(rsx!(div { "hello world" })); +/// static App: FC<()> = |(cx, props)|cx.render(rsx!(div { "hello world" })); /// let mut vdom = VirtualDom::new(App); /// vdom.rebuild(); /// @@ -243,13 +243,13 @@ mod tests { use dioxus_core_macro::*; use dioxus_html as dioxus_elements; - static SIMPLE_APP: FC<()> = |cx, props| { + static SIMPLE_APP: FC<()> = |(cx, props)| { cx.render(rsx!(div { "hello world!" })) }; - static SLIGHTLY_MORE_COMPLEX: FC<()> = |cx, props| { + static SLIGHTLY_MORE_COMPLEX: FC<()> = |(cx, props)| { cx.render(rsx! { div { title: "About W3Schools" @@ -268,14 +268,14 @@ mod tests { }) }; - static NESTED_APP: FC<()> = |cx, props| { + static NESTED_APP: FC<()> = |(cx, props)| { cx.render(rsx!( div { SIMPLE_APP {} } )) }; - static FRAGMENT_APP: FC<()> = |cx, props| { + static FRAGMENT_APP: FC<()> = |(cx, props)| { cx.render(rsx!( div { "f1" } div { "f2" } @@ -331,7 +331,7 @@ mod tests { #[test] fn styles() { - static STLYE_APP: FC<()> = |cx, props| { + static STLYE_APP: FC<()> = |(cx, props)| { cx.render(rsx! { div { style: { color: "blue", font_size: "46px" } } }) diff --git a/packages/web/examples/async_web.rs b/packages/web/examples/async_web.rs index d3ff63b0f..a64ea0598 100644 --- a/packages/web/examples/async_web.rs +++ b/packages/web/examples/async_web.rs @@ -16,7 +16,7 @@ struct DogApi { message: String, } -static APP: FC<()> = |cx, _props| { +static APP: FC<()> = |(cx, _props)| { let state = use_state(cx, || 0); const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/"; diff --git a/packages/web/examples/basic.rs b/packages/web/examples/basic.rs index 99615dc69..21ede5078 100644 --- a/packages/web/examples/basic.rs +++ b/packages/web/examples/basic.rs @@ -14,7 +14,7 @@ fn main() { dioxus_web::launch(APP, |c| c) } -static APP: FC<()> = |cx, _| { +static APP: FC<()> = |(cx, _)| { let mut count = use_state(cx, || 3); let content = use_state(cx, || String::from("h1")); let text_content = use_state(cx, || String::from("Hello, world!")); @@ -86,4 +86,4 @@ fn render_list(cx: Context, count: usize) -> DomTree { rsx!(cx, ul { {items} }) } -static CHILD: FC<()> = |cx, _| rsx!(cx, div {"hello child"}); +static CHILD: FC<()> = |(cx, _)| rsx!(cx, div {"hello child"}); diff --git a/packages/web/examples/blah.rs b/packages/web/examples/blah.rs index d21cd5fd0..de4bf3cd3 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, props| { +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 179074ee7..59db81f3c 100644 --- a/packages/web/examples/btns.rs +++ b/packages/web/examples/btns.rs @@ -23,7 +23,7 @@ fn main() { // dioxus::web::launch(App, |c| c); } -static App: FC<()> = |cx, props| { +static App: FC<()> = |(cx, props)| { dbg!("rednering parent"); cx.render(rsx! { div { @@ -40,7 +40,7 @@ static App: FC<()> = |cx, props| { }) }; -static But: FC<()> = |cx, props| { +static But: FC<()> = |(cx, props)| { let mut count = use_state(cx, || 0); // let d = Dropper { name: "asd" }; diff --git a/packages/web/examples/crm2.rs b/packages/web/examples/crm2.rs index 4dfe9db34..0645f05fc 100644 --- a/packages/web/examples/crm2.rs +++ b/packages/web/examples/crm2.rs @@ -28,7 +28,7 @@ pub struct Client { pub description: String, } -static App: FC<()> = |cx, _| { +static App: FC<()> = |(cx, _)| { let scene = use_state(cx, || Scene::ClientsList); let clients = use_ref(cx, || vec![] as Vec); diff --git a/packages/web/examples/demo.rs b/packages/web/examples/demo.rs index 603b84de5..f331560e1 100644 --- a/packages/web/examples/demo.rs +++ b/packages/web/examples/demo.rs @@ -24,7 +24,7 @@ fn main() { dioxus_web::launch(App, |c| c) } -pub static App: FC<()> = |cx, props| { +pub static App: FC<()> = |(cx, props)| { cx.render(rsx!( div { class: "overflow-hidden" link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" } @@ -39,7 +39,7 @@ pub static App: FC<()> = |cx, props| { )) }; -pub static Header: FC<()> = |cx, props| { +pub static Header: FC<()> = |(cx, props)| { cx.render(rsx! { div { header { class: "text-gray-400 bg-gray-900 body-font" @@ -65,7 +65,7 @@ pub static Header: FC<()> = |cx, props| { }) }; -pub static Hero: FC<()> = |cx, props| { +pub static Hero: FC<()> = |(cx, props)| { // cx.render(rsx! { section{ class: "text-gray-400 bg-gray-900 body-font" @@ -103,7 +103,7 @@ pub static Hero: FC<()> = |cx, props| { } }) }; -pub static Entry: FC<()> = |cx, props| { +pub static Entry: FC<()> = |(cx, props)| { // cx.render(rsx! { section{ class: "text-gray-400 bg-gray-900 body-font" @@ -116,7 +116,7 @@ pub static Entry: FC<()> = |cx, props| { }) }; -pub static StacksIcon: FC<()> = |cx, props| { +pub static StacksIcon: FC<()> = |(cx, props)| { cx.render(rsx!( svg { // xmlns: "http://www.w3.org/2000/svg" @@ -131,7 +131,7 @@ pub static StacksIcon: FC<()> = |cx, props| { } )) }; -pub static RightArrowIcon: FC<()> = |cx, props| { +pub static RightArrowIcon: FC<()> = |(cx, props)| { cx.render(rsx!( svg { fill: "none" diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs index 368023f37..5b84add80 100644 --- a/packages/web/src/lib.rs +++ b/packages/web/src/lib.rs @@ -86,7 +86,7 @@ mod ric_raf; /// dioxus_web::launch(App, |c| c); /// } /// -/// static App: FC<()> = |cx, props| { +/// static App: FC<()> = |(cx, props)| { /// rsx!(cx, div {"hello world"}) /// } /// ``` @@ -110,7 +110,7 @@ pub fn launch(root_component: FC<()>, configuration: impl FnOnce(WebConfig) -> W /// name: String /// } /// -/// static App: FC = |cx, props| { +/// static App: FC = |(cx, props)| { /// rsx!(cx, div {"hello {props.name}"}) /// } /// ``` diff --git a/reference/antipatterns.rs b/reference/antipatterns.rs index 39d70bd9f..ced8671c5 100644 --- a/reference/antipatterns.rs +++ b/reference/antipatterns.rs @@ -32,7 +32,7 @@ use dioxus::prelude::*; struct NoKeysProps { data: std::collections::HashMap, } -static AntipatternNoKeys: FC = |cx, props| { +static AntipatternNoKeys: FC = |(cx, props)| { // WRONG: Make sure to add keys! rsx!(cx, ul { {props.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))} @@ -54,7 +54,7 @@ static AntipatternNoKeys: FC = |cx, props| { /// /// 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, props| { +static AntipatternNestedFragments: FC<()> = |(cx, props)| { // Try to avoid heavily nesting fragments rsx!(cx, Fragment { @@ -82,7 +82,7 @@ static AntipatternNestedFragments: FC<()> = |cx, props| { /// 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, props| { +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, props| { /// - 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, props| todo!(); +static antipattern_component: FC<()> = |(cx, props)| todo!(); /// Antipattern: Misusing hooks /// --------------------------- @@ -120,7 +120,7 @@ static antipattern_component: FC<()> = |cx, props| todo!(); struct MisuedHooksProps { should_render_state: bool, } -static AntipatternMisusedHooks: FC = |cx, props| { +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 @@ -153,7 +153,7 @@ static AntipatternMisusedHooks: FC = |cx, props| { /// } /// } /// }) -static _example: FC<()> = |cx, props| todo!(); +static _example: FC<()> = |(cx, props)| todo!(); /// Antipattern: publishing components and hooks with all features enabled /// ---------------------------------------------------------------------- @@ -171,9 +171,9 @@ static _example: FC<()> = |cx, props| 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, props| todo!(); +static __example: FC<()> = |(cx, props)| todo!(); -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { AntipatternNoKeys { data: std::collections::HashMap::new() } AntipatternNestedFragments {} diff --git a/reference/basics.rs b/reference/basics.rs index f4c945c7c..ccd3bbdec 100644 --- a/reference/basics.rs +++ b/reference/basics.rs @@ -9,7 +9,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { Greeting { @@ -25,7 +25,7 @@ struct GreetingProps { name: &'static str, } -static Greeting: FC = |cx, props| { +static Greeting: FC = |(cx, props)| { cx.render(rsx! { div { h1 { "Hello, {props.name}!" } diff --git a/reference/children.rs b/reference/children.rs index 16e89e52e..a41d74ad6 100644 --- a/reference/children.rs +++ b/reference/children.rs @@ -18,7 +18,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { Banner { @@ -31,7 +31,7 @@ pub static Example: FC<()> = |cx, props| { }) }; -pub static Banner: FC<()> = |cx, props| { +pub static Banner: FC<()> = |(cx, props)| { cx.render(rsx! { div { h1 { "This is a great banner!" } diff --git a/reference/conditional_rendering.rs b/reference/conditional_rendering.rs index 80be8094a..501fbb18f 100644 --- a/reference/conditional_rendering.rs +++ b/reference/conditional_rendering.rs @@ -16,7 +16,7 @@ use dioxus::prelude::*; pub struct MyProps { should_show: bool, } -pub static Example0: FC = |cx, props| { +pub static Example0: FC = |(cx, props)| { cx.render(rsx! { div { {props.should_show.then(|| rsx!{ @@ -39,7 +39,7 @@ pub static Example0: FC = |cx, props| { pub struct MyProps1 { should_show: bool, } -pub static Example1: FC = |cx, props| { +pub static Example1: FC = |(cx, props)| { cx.render(rsx! { div { // With matching @@ -77,7 +77,7 @@ pub enum Color { pub struct MyProps2 { color: Color, } -pub static Example2: FC = |cx, props| { +pub static Example2: FC = |(cx, props)| { cx.render(rsx! { div { {match props.color { @@ -89,7 +89,7 @@ pub static Example2: FC = |cx, props| { }) }; -pub static Example: FC<()> = |cx, props| { +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/reference/controlled_inputs.rs b/reference/controlled_inputs.rs index bdabe83d2..b4c056b6f 100644 --- a/reference/controlled_inputs.rs +++ b/reference/controlled_inputs.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { @@ -10,7 +10,7 @@ pub static Example: FC<()> = |cx, props| { }; // A controlled component: -static ControlledSelect: FC<()> = |cx, props| { +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, props| { }; // TODO - how do uncontrolled things work? -static UncontrolledSelect: FC<()> = |cx, props| { +static UncontrolledSelect: FC<()> = |(cx, props)| { let value = use_state(cx, || String::new()); cx.render(rsx! { diff --git a/reference/custom_elements.rs b/reference/custom_elements.rs index 053b3aea5..090dabd50 100644 --- a/reference/custom_elements.rs +++ b/reference/custom_elements.rs @@ -11,7 +11,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { custom_element { diff --git a/reference/empty.rs b/reference/empty.rs index 28914bd6b..52bc80640 100644 --- a/reference/empty.rs +++ b/reference/empty.rs @@ -5,4 +5,4 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| cx.render(rsx! { Fragment {} }); +pub static Example: FC<()> = |(cx, props)| cx.render(rsx! { Fragment {} }); diff --git a/reference/errorhandling.rs b/reference/errorhandling.rs index a79153272..e44c03bd3 100644 --- a/reference/errorhandling.rs +++ b/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, props| { +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, props| { +static App1: FC<()> = |(cx, props)| { let data = match get_data() { Some(data) => data, None => return None, @@ -46,7 +46,7 @@ static App1: FC<()> = |cx, props| { /// a user is logged in. /// /// Dioxus will throw an error in the console if the None-path is ever taken. -static App2: FC<()> = |cx, props| { +static App2: FC<()> = |(cx, props)| { let data = get_data()?; cx.render(rsx!( div { "{data}" } )) }; @@ -54,14 +54,14 @@ static App2: FC<()> = |cx, props| { /// This is top-tier error handling since it displays a failure state. /// /// However, the error is lacking in context. -static App3: FC<()> = |cx, props| 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, props| { +static App4: FC<()> = |(cx, props)| { let data = get_data_err().ok()?; cx.render(rsx!( div { "{data}" } )) }; @@ -69,7 +69,7 @@ static App4: FC<()> = |cx, props| { /// 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, props| 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/reference/fragments.rs b/reference/fragments.rs index 88c9dcaea..af888d021 100644 --- a/reference/fragments.rs +++ b/reference/fragments.rs @@ -11,7 +11,7 @@ use dioxus::prelude::*; // Returning multiple elements with rsx! or html! -static App1: FC<()> = |cx, props| { +static App1: FC<()> = |(cx, props)| { cx.render(rsx! { h1 { } h2 { } @@ -20,7 +20,7 @@ static App1: FC<()> = |cx, props| { }; // Using the Fragment component -static App2: FC<()> = |cx, props| { +static App2: FC<()> = |(cx, props)| { cx.render(rsx! { Fragment { div {} @@ -31,7 +31,7 @@ static App2: FC<()> = |cx, props| { }; // Using the `fragment` method on the NodeFactory -static App3: FC<()> = |cx, props| { +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, props| { })) }; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { App1 {} App2 {} diff --git a/reference/global_css.rs b/reference/global_css.rs index 5e7c75a8c..67f3c2bbb 100644 --- a/reference/global_css.rs +++ b/reference/global_css.rs @@ -19,7 +19,7 @@ h1 {color: blue;} p {color: red;} "#; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { head { style { "{STYLE}" } } body { diff --git a/reference/inline_styles.rs b/reference/inline_styles.rs index 272e220c2..76aa8c267 100644 --- a/reference/inline_styles.rs +++ b/reference/inline_styles.rs @@ -10,7 +10,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { head { style: { background_color: "powderblue" } @@ -29,7 +29,7 @@ pub static Example: FC<()> = |cx, props| { // .... 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, props| { +static Example2: FC<()> = |(cx, props)| { cx.render(rsx! { div { color: "red" "hello world!" diff --git a/reference/iterators.rs b/reference/iterators.rs index ed4fdfd13..f31a7bbc8 100644 --- a/reference/iterators.rs +++ b/reference/iterators.rs @@ -12,7 +12,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { let example_data = use_state(cx, || 0); let v = (0..10).map(|f| { diff --git a/reference/listener.rs b/reference/listener.rs index 59d180263..b12a14885 100644 --- a/reference/listener.rs +++ b/reference/listener.rs @@ -7,7 +7,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { ButtonList {} NonUpdatingEvents {} @@ -16,7 +16,7 @@ pub static Example: FC<()> = |cx, props| { }; /// We can use `set_name` in multiple closures; the closures automatically *copy* the reference to set_name. -static ButtonList: FC<()> = |cx, props| { +static ButtonList: FC<()> = |(cx, props)| { let name = use_state(cx, || "...?"); let names = ["jack", "jill", "john", "jane"] @@ -33,7 +33,7 @@ static ButtonList: FC<()> = |cx, props| { /// This shows how listeners may be without a visible change in the display. /// Check the console. -static NonUpdatingEvents: FC<()> = |cx, props| { +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, props| { }) }; -static DisablePropogation: FC<()> = |cx, props| { +static DisablePropogation: FC<()> = |(cx, props)| { rsx!(cx, div { onclick: move |_| log::info!("event propogated to the div!") diff --git a/reference/memo.rs b/reference/memo.rs index 40aa54191..1532b5ab8 100644 --- a/reference/memo.rs +++ b/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, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { "100% memoized!" } }) @@ -35,7 +35,7 @@ pub struct MyProps1 { name: String, } -pub static Example1: FC = |cx, props| { +pub static Example1: FC = |(cx, props)| { cx.render(rsx! { div { "100% memoized! {props.name}" } }) @@ -49,7 +49,7 @@ pub struct MyProps2 { name: std::rc::Rc, } -pub static Example2: FC = |cx, props| { +pub static Example2: FC = |(cx, props)| { cx.render(rsx! { div { "100% memoized! {props.name}" } }) diff --git a/reference/noderefs.rs b/reference/noderefs.rs index 8d22ee5b4..021fcfa59 100644 --- a/reference/noderefs.rs +++ b/reference/noderefs.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { let p = 10; cx.render(rsx! { diff --git a/reference/signals.rs b/reference/signals.rs index 2e69d8e66..742285005 100644 --- a/reference/signals.rs +++ b/reference/signals.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { diff --git a/reference/spreadpattern.rs b/reference/spreadpattern.rs index 770cf427c..b6fbb380f 100644 --- a/reference/spreadpattern.rs +++ b/reference/spreadpattern.rs @@ -9,7 +9,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { let props = MyProps { count: 0, live: true, diff --git a/reference/statemanagement.rs b/reference/statemanagement.rs index 2e69d8e66..742285005 100644 --- a/reference/statemanagement.rs +++ b/reference/statemanagement.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() {} -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { diff --git a/reference/suspense.rs b/reference/suspense.rs index f5431edf6..847092dc7 100644 --- a/reference/suspense.rs +++ b/reference/suspense.rs @@ -14,7 +14,7 @@ struct DogApi { } const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random"; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { let doggo = use_suspense( cx, || surf::get(ENDPOINT).recv_json::(), diff --git a/reference/task.rs b/reference/task.rs index a5e877bc6..cb70881d2 100644 --- a/reference/task.rs +++ b/reference/task.rs @@ -24,7 +24,7 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { let count = use_state(cx, || 0); let mut direction = use_state(cx, || 1); diff --git a/reference/testing.rs b/reference/testing.rs index 587ce19cc..4ce33c5f1 100644 --- a/reference/testing.rs +++ b/reference/testing.rs @@ -1,6 +1,6 @@ use dioxus::prelude::*; -pub static Example: FC<()> = |cx, props| { +pub static Example: FC<()> = |(cx, props)| { cx.render(rsx! { div { diff --git a/reference/tostring.rs b/reference/tostring.rs index a04a165da..dd10c658b 100644 --- a/reference/tostring.rs +++ b/reference/tostring.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; use dioxus::ssr; -pub static Example: FC<()> = |cx, props| { +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, props| { }) }; -static SomeApp: FC<()> = |cx, props| { +static SomeApp: FC<()> = |(cx, props)| { cx.render(rsx! { div { style: {background_color: "blue"} h1 {"Some amazing app or component"} diff --git a/src/lib.rs b/src/lib.rs index 11d1b9708..c2871b5ec 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, props|{ +//! 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, props|{ +//! pub pub static Example: FC<()> = |(cx, props)|{ //! cx.render(rsx! { //! div { "Hello World!" } //! })