From b1ea44ee0d8ac3644f4af943c7ce4598fe3ab499 Mon Sep 17 00:00:00 2001 From: Leonard Date: Thu, 14 Sep 2023 14:06:17 +0200 Subject: [PATCH 1/3] Update docs to use `#[component]` instead of `#[inline_props]` --- docs-src/0.4/en/getting_started/wasm.md | 2 +- docs-src/0.4/en/guide/your_first_component.md | 6 ++++-- docs-src/0.4/en/migration/router.md | 11 +++++++---- docs-src/0.4/en/reference/component_props.md | 13 +++++++------ docs-src/0.4/en/reference/components.md | 4 ++-- docs-src/0.4/en/reference/desktop/index.md | 4 ++-- docs-src/0.4/en/reference/memoization.md | 3 ++- docs-src/0.4/en/reference/mobile.md | 4 ++-- docs-src/0.4/en/reference/router.md | 19 +++++++++---------- docs-src/0.4/en/reference/use_effect.md | 2 +- docs-src/0.4/en/router/lib.rs | 0 snippets/components.rs | 3 ++- snippets/fetching.rs | 2 +- src/components/awesome/mod.rs | 4 ++-- src/components/blog/mod.rs | 19 ++++++++++--------- src/components/homepage/explainers.rs | 3 ++- src/components/homepage/mod.rs | 19 ++++++++++++------- src/components/learn.rs | 15 ++++++++++----- src/components/nav.rs | 9 +++++++-- src/components/notfound.rs | 2 +- src/components/tutorials.rs | 5 +++-- src/doc_examples/anti_patterns.rs | 4 +++- src/doc_examples/boolean_attribute.rs | 2 +- src/doc_examples/catch_all.rs | 7 +++---- src/doc_examples/catch_all_segments.rs | 4 ++-- src/doc_examples/component_borrowed_props.rs | 3 ++- src/doc_examples/component_children.rs | 2 ++ .../component_children_inspect.rs | 4 +++- src/doc_examples/component_element_props.rs | 3 ++- src/doc_examples/component_owned_props.rs | 3 ++- src/doc_examples/component_props_options.rs | 6 +++++- src/doc_examples/components.rs | 3 ++- src/doc_examples/conditional_rendering.rs | 10 ++++++---- src/doc_examples/custom_assets.rs | 3 ++- src/doc_examples/dynamic_route.rs | 16 +++++++--------- src/doc_examples/dynamic_segments.rs | 6 +++--- src/doc_examples/external_link.rs | 5 +++-- src/doc_examples/first_route.rs | 5 ++--- src/doc_examples/full_example.rs | 15 +++++++-------- src/doc_examples/fullstack_static.rs | 6 +++--- src/doc_examples/hackernews_async.rs | 19 ++++++++++++------- src/doc_examples/hackernews_complete.rs | 10 ++++++---- src/doc_examples/hackernews_post.rs | 13 ++++++++++--- src/doc_examples/hackernews_state.rs | 19 ++++++++++++++----- src/doc_examples/hello_world_ssr.rs | 1 + src/doc_examples/hello_world_tui.rs | 2 +- src/doc_examples/hello_world_tui_no_ctrl_c.rs | 4 +--- src/doc_examples/hello_world_web.rs | 4 ++-- src/doc_examples/history_buttons.rs | 5 +++-- src/doc_examples/history_provider.rs | 5 ++--- src/doc_examples/links.rs | 9 ++++----- src/doc_examples/meme_editor.rs | 7 +++---- src/doc_examples/meme_editor_dark_mode.rs | 9 +++++---- src/doc_examples/navigator.rs | 7 +++---- src/doc_examples/nest.rs | 6 +++--- src/doc_examples/nested_routes.rs | 9 ++++----- src/doc_examples/outlet.rs | 6 +++--- src/doc_examples/query_segments.rs | 7 ++++--- src/doc_examples/rendering_lists.rs | 6 +++--- src/doc_examples/router_cfg.rs | 5 ++--- src/doc_examples/routing_update.rs | 9 +++++---- src/doc_examples/server_router.rs | 6 ++---- src/doc_examples/static_generation.rs | 10 ++++------ src/doc_examples/static_segments.rs | 5 ++--- src/doc_examples/use_future.rs | 5 +++-- src/lib.rs | 8 ++++---- 66 files changed, 253 insertions(+), 199 deletions(-) delete mode 100644 docs-src/0.4/en/router/lib.rs diff --git a/docs-src/0.4/en/getting_started/wasm.md b/docs-src/0.4/en/getting_started/wasm.md index 7c2944f8e..1cccfc087 100644 --- a/docs-src/0.4/en/getting_started/wasm.md +++ b/docs-src/0.4/en/getting_started/wasm.md @@ -17,7 +17,7 @@ Examples: The Web is the best-supported target platform for Dioxus. -- Because your app will be compiled to WASM you have access to browser APIs through [wasm-bingen](https://rustwasm.github.io/docs/wasm-bindgen/introduction.html). +- Because your app will be compiled to WASM you have access to browser APIs through [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/introduction.html). - Dioxus provides hydration to resume apps that are rendered on the server. See the [fullstack](fullstack.md) getting started guide for more information. ## Tooling diff --git a/docs-src/0.4/en/guide/your_first_component.md b/docs-src/0.4/en/guide/your_first_component.md index 2125bdc3d..c5bf37bc9 100644 --- a/docs-src/0.4/en/guide/your_first_component.md +++ b/docs-src/0.4/en/guide/your_first_component.md @@ -10,6 +10,8 @@ To declare what you want your UI to look like, you will need to use the `rsx` ma {{#include src/doc_examples/hackernews_post.rs:story_v1}} ``` +> `render!` is equivalent to `cx.render(rsx! {})`. + If you run your application you should see something like this: ```inject-dioxus @@ -18,7 +20,7 @@ DemoFrame { } ``` -> RSX mirrors HTML. Because of this you will need to know some html to use Dioxus. +> RSX mirrors HTML. Because of this, you will need to know some html to use Dioxus. > > Here are some resources to help get you started learning HTML: > - [MDN HTML Guide](https://developer.mozilla.org/en-US/docs/Learn/HTML) @@ -111,7 +113,7 @@ DemoFrame { Just like you can pass arguments to a function or attributes to an element, you can pass props to a component that customize its behavior! -We can define arguments that components can take when they are rendered (called `Props`) by adding the `#[inline_props]` macro before our function definition and adding extra function arguments. +We can define arguments that components can take when they are rendered (called `Props`) by adding the `#[component]` macro before our function definition and adding extra function arguments. Currently, our `StoryListing` component always renders the same story. We can modify it to accept a story to render as a prop. diff --git a/docs-src/0.4/en/migration/router.md b/docs-src/0.4/en/migration/router.md index e47423ac7..acb9729b6 100644 --- a/docs-src/0.4/en/migration/router.md +++ b/docs-src/0.4/en/migration/router.md @@ -39,17 +39,17 @@ enum Route { } } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { todo!() } -#[inline_props] +#[component] fn Blog(cx: Scope) -> Element { todo!() } -#[inline_props] +#[component] fn BlogPost(cx: Scope, id: usize) -> Element { // Note that you have access to id here in a type safe way without calling any extra functions! todo!() @@ -64,6 +64,7 @@ Now that routes are enums, you should use the enum as the route in Links. If you use dioxus::prelude::*; use dioxus_router::prelude::*; +#[component] fn Component(cx: Scope) -> Element { render! { Link { @@ -82,6 +83,7 @@ To link to external routes, you can use a string: use dioxus::prelude::*; use dioxus_router::prelude::*; +#[component] fn Component(cx: Scope) -> Element { render! { Link { @@ -110,6 +112,7 @@ enum Route { Index {}, } +#[component] fn App(cx: Scope) -> Element { render! { h1 { "App" } @@ -117,7 +120,7 @@ fn App(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn Index(cx: Scope) -> Element { // Read from (and subscribe to the current route) let path = use_route(&cx).unwrap(); diff --git a/docs-src/0.4/en/reference/component_props.md b/docs-src/0.4/en/reference/component_props.md index c5c4bdb99..30a1b2118 100644 --- a/docs-src/0.4/en/reference/component_props.md +++ b/docs-src/0.4/en/reference/component_props.md @@ -119,11 +119,11 @@ Then, you can use it so: {{#include src/doc_examples/component_props_options.rs:IntoComponent_usage}} ``` -## The `inline_props` macro +## Deriving props from arguments -So far, every Component function we've seen had a corresponding ComponentProps struct to pass in props. This was quite verbose... Wouldn't it be nice to have props as simple function arguments? Then we wouldn't need to define a Props struct, and instead of typing `cx.props.whatever`, we could just use `whatever` directly! +So far, every component function we've seen had a corresponding ComponentProps struct to pass in props. This was quite verbose... Wouldn't it be nice to have props as simple function arguments? Then we wouldn't need to define a Props struct, and instead of typing `cx.props.whatever`, we could just use `whatever` directly! -`inline_props` allows you to do just that. Instead of typing the "full" version: +`#[component]` allows you to do that as well! Instead of typing the "full" version: ```rust, no_run #[derive(Props, PartialEq)] @@ -131,6 +131,7 @@ struct TitleCardProps { title: String, } +#[component] fn TitleCard(cx: Scope) -> Element { cx.render(rsx!{ h1 { "{cx.props.title}" } @@ -138,10 +139,10 @@ fn TitleCard(cx: Scope) -> Element { } ``` -...you can define a function that accepts props as arguments. Then, just annotate it with `#[inline_props]`, and the macro will turn it into a regular Component for you: +...you can define a function that accepts props as arguments. Then, `#[component]`, will turn it into a regular component for you: ```rust, no_run -#[inline_props] +#[component] fn TitleCard(cx: Scope, title: String) -> Element { cx.render(rsx!{ h1 { "{title}" } @@ -149,7 +150,7 @@ fn TitleCard(cx: Scope, title: String) -> Element { } ``` -> While the new Component is shorter and easier to read, this macro should not be used by library authors since you have less control over Prop documentation. +> While the new component is shorter and easier to read, this macro should not be used by library authors since you have less control over Prop documentation. ## Component Children diff --git a/docs-src/0.4/en/reference/components.md b/docs-src/0.4/en/reference/components.md index c440fa330..d975f78ee 100644 --- a/docs-src/0.4/en/reference/components.md +++ b/docs-src/0.4/en/reference/components.md @@ -2,13 +2,13 @@ Just like you wouldn't want to write a complex program in a single, long, `main` function, you shouldn't build a complex UI in a single `App` function. Instead, you should break down the functionality of an app in logical parts called components. -A component is a Rust function, named in UpperCammelCase, that takes a `Scope` parameter and returns an `Element` describing the UI it wants to render. In fact, our `App` function is a component! +A component is a Rust function, named in UpperCamelCase, that takes a `Scope` parameter and returns an `Element` describing the UI it wants to render. In fact, our `App` function is a component! ```rust, no_run {{#include src/doc_examples/hello_world_desktop.rs:component}} ``` -> You'll probably want to add `#![allow(non_snake_case)]` to the top of your crate to avoid warnings about UpperCammelCase component names +> `#[component]` is not strictly necessary, but it makes creating components easier. For example, you won't be warned about using UpperCamelCase for functions. A Component is responsible for some rendering task – typically, rendering an isolated part of the user interface. For example, you could have an `About` component that renders a short description of Dioxus Labs: diff --git a/docs-src/0.4/en/reference/desktop/index.md b/docs-src/0.4/en/reference/desktop/index.md index 34f8bf282..8a83b5b58 100644 --- a/docs-src/0.4/en/reference/desktop/index.md +++ b/docs-src/0.4/en/reference/desktop/index.md @@ -15,7 +15,7 @@ For these cases, Dioxus desktop exposes the use_eval hook that allows you to run ## Custom Assets -You can link to local assets in dioxus desktop instead of using a url: +You can link to local assets in Dioxus desktop instead of using a URL: ```rust {{#include src/doc_examples/custom_assets.rs}} @@ -23,4 +23,4 @@ You can link to local assets in dioxus desktop instead of using a url: ## Integrating with Wry -In cases where you need more low level control over your window, you can use wry APIs exposed through the [Desktop Config](https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.Config.html) and the [use_window hook](https://docs.rs/dioxus-desktop/0.4.0/dioxus_desktop/fn.use_window.html) +In cases where you need more low-level control over your window, you can use wry APIs exposed through the [Desktop Config](https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.Config.html) and the [use_window hook](https://docs.rs/dioxus-desktop/0.4.0/dioxus_desktop/fn.use_window.html) diff --git a/docs-src/0.4/en/reference/memoization.md b/docs-src/0.4/en/reference/memoization.md index 32ec37ce5..dd054b1e5 100644 --- a/docs-src/0.4/en/reference/memoization.md +++ b/docs-src/0.4/en/reference/memoization.md @@ -3,7 +3,7 @@ [`use_memo`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_memo.html) let's you memorize values and thus save computation time. This is useful for expensive calculations. ```rust, no_run -#[inline_props] +#[component] fn Calculator(cx: Scope, number: usize) -> Element { let bigger_number = use_memo(cx, (number,), |(number,)| { // This will only be calculated when `number` has changed. @@ -13,6 +13,7 @@ fn Calculator(cx: Scope, number: usize) -> Element { p { "{bigger_number}" } ) } +#[component] fn app(cx: Scope) -> Element { render!(Calculator { number: 0 }) } diff --git a/docs-src/0.4/en/reference/mobile.md b/docs-src/0.4/en/reference/mobile.md index 235701a61..aea4591a3 100644 --- a/docs-src/0.4/en/reference/mobile.md +++ b/docs-src/0.4/en/reference/mobile.md @@ -15,7 +15,7 @@ For these cases, Dioxus desktop exposes the use_eval hook that allows you to run ## Custom Assets -You can link to local assets in dioxus mobile instead of using a url: +You can link to local assets in Dioxus mobile instead of using a URL: ```rust {{#include src/doc_examples/custom_assets.rs}} @@ -23,4 +23,4 @@ You can link to local assets in dioxus mobile instead of using a url: ## Integrating with Wry -In cases where you need more low level control over your window, you can use wry APIs exposed through the [Desktop Config](https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.Config.html) and the [use_window hook](https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.DesktopContext.html) +In cases where you need more low-level control over your window, you can use wry APIs exposed through the [Desktop Config](https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.Config.html) and the [use_window hook](https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.DesktopContext.html) diff --git a/docs-src/0.4/en/reference/router.md b/docs-src/0.4/en/reference/router.md index 299250a82..2ec47b371 100644 --- a/docs-src/0.4/en/reference/router.md +++ b/docs-src/0.4/en/reference/router.md @@ -20,7 +20,6 @@ The Dioxus router makes it easy to create these scenes. To make sure we're using cargo add dioxus-router ``` - ## Using the router Unlike other routers in the Rust ecosystem, our router is built declaratively at compile time. This makes it possible to compose our app layout simply by defining an enum. @@ -30,10 +29,10 @@ Unlike other routers in the Rust ecosystem, our router is built declaratively at enum Route { // if the current location is "/home", render the Home component #[route("/home")] - Home {} + Home {}, // if the current location is "/blog", render the Blog component #[route("/blog")] - Blog {} + Blog {}, } ``` @@ -46,12 +45,12 @@ We can fix this one of two ways: ```rust enum Route { #[route("/home")] - Home {} + Home {}, #[route("/blog")] - Blog {} + Blog {}, // if the current location doesn't match any of the above routes, render the NotFound component #[route("/:..segments")] - NotFound { segments: Vec } + NotFound { segments: Vec }, } ``` @@ -63,12 +62,12 @@ enum Route { #[route("/home")] // if the current location doesn't match any of the above routes, redirect to "/home" #[redirect("/:..segments", |segments: Vec| Route::Home {})] - Home {} + Home {}, #[route("/blog")] - Blog {} + Blog {}, // if the current location doesn't match any of the above routes, render the NotFound component #[route("/:..segments")] - NotFound { segments: Vec } + NotFound { segments: Vec }, } ``` @@ -87,4 +86,4 @@ rsx!{ ## More reading -This page is just a very brief overview of the router. For more information, check out [the router book](../../router/index.md) or some of [the router examples](https://github.com/DioxusLabs/dioxus/blob/master/examples/router.rs). +This page is just a very brief overview of the router. For more information, check out [the router reference](../router/index.md) or some of [the router examples](https://github.com/DioxusLabs/dioxus/blob/master/examples/router.rs). diff --git a/docs-src/0.4/en/reference/use_effect.md b/docs-src/0.4/en/reference/use_effect.md index 81793fe13..4e3f7768e 100644 --- a/docs-src/0.4/en/reference/use_effect.md +++ b/docs-src/0.4/en/reference/use_effect.md @@ -9,7 +9,7 @@ You can make the callback re-run when some value changes. For example, you might ## Example ```rust, no_run -#[inline_props] +#[component] fn Profile(cx: Scope, id: usize) -> Element { let name = use_state(cx, || None); diff --git a/docs-src/0.4/en/router/lib.rs b/docs-src/0.4/en/router/lib.rs deleted file mode 100644 index e69de29bb..000000000 diff --git a/snippets/components.rs b/snippets/components.rs index 69834b70e..40c965408 100644 --- a/snippets/components.rs +++ b/snippets/components.rs @@ -1,6 +1,6 @@ //! Encapsulate state in components. //! -//! Use structs or autodderive props with `#[inline_props]` +//! Use structs or let `#[component]` autoderive props for you from function arguments. #[derive(Props, PartialEq)] struct PropBased { @@ -8,6 +8,7 @@ struct PropBased { age: String, } +#[component] fn Stateful(cx: Scope) -> Element { render!("Hello {cx.name}, you are {cx.age} years old!") } diff --git a/snippets/fetching.rs b/snippets/fetching.rs index b513fa083..5c606e4c3 100644 --- a/snippets/fetching.rs +++ b/snippets/fetching.rs @@ -2,7 +2,7 @@ //! //! Automatically tracks dependencies and caches results -#[inline_props] +#[component] fn Tasks(cx: Scope, id: Uuid) -> Element { let content = use_fetch!(cx, "https://my.app.com/item/{id}"); diff --git a/src/components/awesome/mod.rs b/src/components/awesome/mod.rs index 5e9fcf525..a3e62763c 100644 --- a/src/components/awesome/mod.rs +++ b/src/components/awesome/mod.rs @@ -59,7 +59,7 @@ struct StarsResponse { stargazers_count: u64, } -#[inline_props] +#[component] pub fn Awesome(cx: Scope) -> Element { let items = use_future(cx, (), |_| async move { let req = match reqwest::get(ITEM_LIST_LINK).await { @@ -157,7 +157,7 @@ pub fn Awesome(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn AwesomeItem(cx: Scope, item: Item) -> Element { let is_github = item.github.is_some(); let username = item.github.clone().unwrap_or(GithubInfo::default()).username; diff --git a/src/components/blog/mod.rs b/src/components/blog/mod.rs index bf6283210..14e2947a4 100644 --- a/src/components/blog/mod.rs +++ b/src/components/blog/mod.rs @@ -23,7 +23,7 @@ pub const POST_TEMPLATE: BlogPost = BlogPost { content: include_str!("../../../posts/templates.html"), }; -#[inline_props] +#[component] pub fn PostTemplate(cx: Scope) -> Element { render! { SinglePost { post: POST_TEMPLATE } } } @@ -38,7 +38,7 @@ pub const POST_FULLTINME: BlogPost = BlogPost { content: include_str!("../../../posts/fulltime.html"), }; -#[inline_props] +#[component] pub fn PostFulltime(cx: Scope) -> Element { render! { SinglePost { post: POST_FULLTINME } } } @@ -52,7 +52,7 @@ pub const POST_RELEASE_040: BlogPost = BlogPost { content: include_str!("../../../posts/release040.html"), }; -#[inline_props] +#[component] pub fn PostRelease040(cx: Scope) -> Element { render! { SinglePost { post: POST_RELEASE_040 } } } @@ -66,7 +66,7 @@ pub const POST_RELEASE_030: BlogPost = BlogPost { content: include_str!("../../../posts/release030.html"), }; -#[inline_props] +#[component] pub fn PostRelease030(cx: Scope) -> Element { render! { SinglePost { post: POST_RELEASE_030 } } } @@ -80,7 +80,7 @@ pub const POST_RELEASE_020: BlogPost = BlogPost { content: include_str!("../../../posts/release020.html"), }; -#[inline_props] +#[component] pub fn PostRelease020(cx: Scope) -> Element { render! { SinglePost { post: POST_RELEASE_020 } } } @@ -94,7 +94,7 @@ pub const POST_RELEASE_010: BlogPost = BlogPost { content: include_str!("../../../posts/release.html"), }; -#[inline_props] +#[component] pub fn PostRelease010(cx: Scope) -> Element { render! { SinglePost { post: POST_RELEASE_010 } } } @@ -108,7 +108,7 @@ pub const POSTS: &[BlogPost] = &[ POST_RELEASE_010, ]; -#[inline_props] +#[component] pub fn BlogList(cx: Scope) -> Element { cx.render(rsx!( section { class: "body-font overflow-hidden dark:bg-ideblack", @@ -131,7 +131,7 @@ pub fn BlogList(cx: Scope) -> Element { )) } -#[inline_props] +#[component] pub fn SinglePost(cx: Scope, post: BlogPost) -> Element { let BlogPost { content, .. } = post; @@ -154,6 +154,7 @@ pub fn SinglePost(cx: Scope, post: BlogPost) -> Element { }) } +#[component] fn BlogHeader(cx: Scope) -> Element { cx.render(rsx!( section { class: "py-20", @@ -192,7 +193,7 @@ pub static RecentBlogPosts: Component<()> = |cx| { }) }; -#[inline_props] +#[component] fn BlogPostItem(cx: Scope, post: &'static BlogPost) -> Element { let BlogPost { category, diff --git a/src/components/homepage/explainers.rs b/src/components/homepage/explainers.rs index 9a998d74f..d58cd5796 100644 --- a/src/components/homepage/explainers.rs +++ b/src/components/homepage/explainers.rs @@ -1,6 +1,6 @@ use dioxus::prelude::*; -#[inline_props] +#[component] pub fn Explainer<'a>( cx: Scope<'a>, invert: bool, @@ -52,6 +52,7 @@ Content 6. Investing in the ecosystem */ +#[component] pub fn Explainers(cx: Scope) -> Element { render! { section { class: "dark:text-white py-16 border-t font-light", diff --git a/src/components/homepage/mod.rs b/src/components/homepage/mod.rs index cd6560db6..a20905cde 100644 --- a/src/components/homepage/mod.rs +++ b/src/components/homepage/mod.rs @@ -8,7 +8,7 @@ pub mod hero; pub mod snippets; pub mod value_add; -#[inline_props] +#[component] pub fn Homepage(cx: Scope) -> Element { cx.render(rsx! { div { @@ -51,6 +51,7 @@ const CARDS: &[(&str, &str)] = &[ ), ]; +#[component] fn ProjectCards(cx: Scope) -> Element { cx.render(rsx! { section { class: "py-12", @@ -77,6 +78,7 @@ fn ProjectCards(cx: Scope) -> Element { }) } +#[component] fn AvailablePlatforms(cx: Scope) -> Element { cx.render(rsx! { section { class: "w-full dark:bg-ideblack", @@ -159,7 +161,7 @@ fn AvailablePlatforms(cx: Scope) -> Element { }) } -#[inline_props] +#[component] fn TriShow<'a>( cx: Scope<'a>, left: Element<'a>, @@ -187,7 +189,7 @@ fn TriShow<'a>( } } -#[inline_props] +#[component] fn TriPadding<'a>(cx: Scope<'a>, children: Element<'a>, last: bool) -> Element { render!( div { class: "flex flex-col items-center", @@ -201,7 +203,7 @@ fn TriPadding<'a>(cx: Scope<'a>, children: Element<'a>, last: bool) -> Element { ) } -#[inline_props] +#[component] fn DeveloperExperience(cx: Scope) -> Element { render! ( section { class: "pt-36 w-full dark:bg-ideblack dark:text-white", @@ -243,7 +245,7 @@ fn DeveloperExperience(cx: Scope) -> Element { ) } -#[inline_props] +#[component] fn ExperienceText(cx: Scope, title: &'static str, content: &'static str) -> Element { render!( div { class: "pb-12", @@ -255,6 +257,7 @@ fn ExperienceText(cx: Scope, title: &'static str, content: &'static str) -> Elem ) } +#[component] fn IconSplit(cx: Scope) -> Element { cx.render(rsx! { svg { @@ -274,6 +277,7 @@ fn IconSplit(cx: Scope) -> Element { }) } +#[component] fn Stats(cx: Scope) -> Element { cx.render(rsx! { section { class: "pb-24 w-full dark:bg-ideblack", @@ -310,7 +314,7 @@ fn Stats(cx: Scope) -> Element { }) } -#[inline_props] +#[component] fn StatsItem(cx: Scope, major: &'static str, minor: &'static str) -> Element { render! { div { class: "text-center py-6 border border-[#444]", @@ -320,7 +324,7 @@ fn StatsItem(cx: Scope, major: &'static str, minor: &'static str) -> Element { } } -#[inline_props] +#[component] fn Platform<'a>( cx: Scope<'a>, name: &'static str, @@ -363,6 +367,7 @@ fn Platform<'a>( }) } +#[component] fn JumpStart(cx: Scope) -> Element { render! { section { class: "pt-36 w-full dark:bg-ideblack", diff --git a/src/components/learn.rs b/src/components/learn.rs index 2ee8c858c..63806b8dc 100644 --- a/src/components/learn.rs +++ b/src/components/learn.rs @@ -16,7 +16,7 @@ pub struct DocsContentHighlighted(pub bool); pub static HIGHLIGHT_DOCS_CONTENT: Atom = Atom(|_| DocsContentHighlighted(false)); -#[inline_props] +#[component] pub fn Learn(cx: Scope) -> Element { let show_sidebar_button = use_atom_state(cx, &SHOW_DOCS_NAV); cx.use_hook(|| show_sidebar_button.set(true)); @@ -37,6 +37,7 @@ pub fn Learn(cx: Scope) -> Element { }) } +#[component] fn LeftNav(cx: Scope) -> Element { let show_sidebar = use_atom_state(cx, &SHOW_SIDEBAR); let highlighted = use_read(cx, &HIGHLIGHT_DOCS_LAYOUT); @@ -66,6 +67,7 @@ fn LeftNav(cx: Scope) -> Element { } /// Navigate between doc versions +#[component] fn DocVersionNav(cx: Scope) -> Element { let navigator = use_navigator(cx); @@ -93,7 +95,7 @@ fn DocVersionNav(cx: Scope) -> Element { /// - page /// /// This renders a single section -#[inline_props] +#[component] fn SidebarSection(cx: Scope, chapter: &'static SummaryItem) -> Element { let link = chapter.maybe_link()?; @@ -114,7 +116,7 @@ fn SidebarSection(cx: Scope, chapter: &'static SummaryItem) -> Elemen } } -#[inline_props] +#[component] fn SidebarChapter(cx: Scope, chapter: &'static SummaryItem) -> Element { let link = chapter.maybe_link()?; let url = link.location.as_ref().unwrap(); @@ -151,7 +153,7 @@ fn SidebarChapter(cx: Scope, chapter: &'static SummaryItem) -> Elemen } } -#[inline_props] +#[component] fn LocationLink(cx: Scope, chapter: &'static SummaryItem) -> Element { let book_url = use_book(cx).to_string(); @@ -173,6 +175,7 @@ fn LocationLink(cx: Scope, chapter: &'static SummaryItem) -> Element } // Todo: wire this up to the sections of the current page and a scroll controller +#[component] fn RightNav(cx: Scope) -> Element { let highlighted = use_read(cx, &HIGHLIGHT_DOCS_LAYOUT); let extra_class = if highlighted.0 { @@ -201,6 +204,7 @@ fn RightNav(cx: Scope) -> Element { } } +#[component] fn Content(cx: Scope) -> Element { let highlighted = use_read(cx, &HIGHLIGHT_DOCS_CONTENT); let extra_class = if highlighted.0 { @@ -227,6 +231,7 @@ fn Content(cx: Scope) -> Element { } } +#[component] fn BreadCrumbs(cx: Scope) -> Element { // parse out the route after the version and language let route: Route = use_route(cx)?; @@ -265,7 +270,7 @@ fn default_page() -> &'static Page { LAZY_BOOK.pages.get(id.0).unwrap() } -#[inline_props] +#[component] pub fn DocsO3(cx: Scope, segments: Vec) -> Element { let navigator = use_navigator(cx); let route: Route = use_route(cx).unwrap(); diff --git a/src/components/nav.rs b/src/components/nav.rs index 3f91bff61..3730aa4e1 100644 --- a/src/components/nav.rs +++ b/src/components/nav.rs @@ -14,6 +14,7 @@ pub struct LoggedIn(pub bool); pub static LOGGED_IN: Atom = Atom(|_| LoggedIn(false)); pub static SHOW_DOCS_NAV: Atom = Atom(|_| false); +#[component] pub fn Nav(cx: Scope) -> Element { let logged_in = use_read(cx, &LOGGED_IN); let highlighted = use_read(cx, &HIGHLIGHT_NAV_LAYOUT); @@ -94,6 +95,7 @@ pub fn Nav(cx: Scope) -> Element { } } +#[component] fn FullNav(cx: Scope) -> Element { cx.render(rsx! { div { class: "hidden md:flex items-center", @@ -119,6 +121,7 @@ fn FullNav(cx: Scope) -> Element { }) } +#[component] fn MobileNav(cx: Scope) -> Element { let show = use_atom_state(cx, &SHOW_NAV); @@ -170,7 +173,7 @@ static LINKS: &[(&str, &str, LinkPairs)] = &[ ("Blog", "/blog", &[]), ]; -#[inline_props] +#[component] fn LinkList(cx: Scope) -> Element { let hover = "hover:text-sky-500 dark:hover:text-sky-400"; let hover_bg = "dark:hover:bg-gray-500 hover:bg-gray-200 rounded"; @@ -209,6 +212,7 @@ fn LinkList(cx: Scope) -> Element { cx.render(rsx! {links}) } +#[component] fn Search(cx: Scope) -> Element { let show_modal = use_atom_state(cx, &SHOW_SEARCH); @@ -233,6 +237,7 @@ fn Search(cx: Scope) -> Element { } } +#[component] fn SearchModal(cx: Scope) -> Element { let show_modal = use_atom_state(cx, &SHOW_SEARCH); let search_text = use_state(cx, String::new); @@ -365,7 +370,7 @@ fn SearchModal(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn SearchResult(cx: Scope, result: dioxus_search::SearchResult) -> Element { let set_show_modal = fermi::use_set(cx, &SHOW_SEARCH); let title = &result.title; diff --git a/src/components/notfound.rs b/src/components/notfound.rs index 2ef5b8b3b..03554d6f4 100644 --- a/src/components/notfound.rs +++ b/src/components/notfound.rs @@ -2,7 +2,7 @@ use dioxus::prelude::*; use crate::*; #[allow(unused)] -#[inline_props] +#[component] pub fn Err404(cx: Scope, segments: Vec) -> Element { cx.render(rsx!( section { class: "py-20", diff --git a/src/components/tutorials.rs b/src/components/tutorials.rs index ff0c9465c..3565cd015 100644 --- a/src/components/tutorials.rs +++ b/src/components/tutorials.rs @@ -33,6 +33,7 @@ static TUTORIALS: &[Tutorial] = &[ }, ]; +#[component] pub fn Tutorials(cx: Scope) -> Element { cx.render(rsx! { div { class: "dark:bg-ideblack dark:text-white", @@ -65,7 +66,7 @@ pub fn Tutorials(cx: Scope) -> Element { }) } -#[inline_props] +#[component] fn TutorialPreview(cx: Scope, id: usize) -> Element { let tutorial = &TUTORIALS[*id]; @@ -88,7 +89,7 @@ fn TutorialPreview(cx: Scope, id: usize) -> Element { }) } -#[inline_props] +#[component] pub fn Tutorial(cx: Scope, id: usize) -> Element { let tutorial = TUTORIALS.get(*id)?; diff --git a/src/doc_examples/anti_patterns.rs b/src/doc_examples/anti_patterns.rs index 3911bfa0a..54916ac6c 100644 --- a/src/doc_examples/anti_patterns.rs +++ b/src/doc_examples/anti_patterns.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] //! This example shows what *not* to do @@ -8,6 +8,7 @@ use dioxus::prelude::*; fn main() {} +#[component] fn AntipatternNestedFragments(cx: Scope<()>) -> Element { // ANCHOR: nested_fragments // ❌ Don't unnecessarily nest fragments @@ -37,6 +38,7 @@ struct NoKeysProps { data: HashMap, } +#[component] fn AntipatternNoKeys(cx: Scope) -> Element { // ANCHOR: iter_keys let data: &HashMap<_, _> = &cx.props.data; diff --git a/src/doc_examples/boolean_attribute.rs b/src/doc_examples/boolean_attribute.rs index 47c356f21..4ec091a3d 100644 --- a/src/doc_examples/boolean_attribute.rs +++ b/src/doc_examples/boolean_attribute.rs @@ -1,6 +1,6 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: boolean_attribute cx.render(rsx! { diff --git a/src/doc_examples/catch_all.rs b/src/doc_examples/catch_all.rs index 0e989b7a6..6b9584b28 100644 --- a/src/doc_examples/catch_all.rs +++ b/src/doc_examples/catch_all.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -14,7 +13,7 @@ enum Route { // ANCHOR_END: router // ANCHOR: app -#[inline_props] +#[component] fn App(cx: Scope) -> Element { render! { Router:: {} @@ -23,7 +22,7 @@ fn App(cx: Scope) -> Element { // ANCHOR_END: app // ANCHOR: home -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } @@ -32,7 +31,7 @@ fn Home(cx: Scope) -> Element { // ANCHOR_END: home // ANCHOR: fallback -#[inline_props] +#[component] fn PageNotFound(cx: Scope, route: Vec) -> Element { render! { h1 { "Page not found" } diff --git a/src/doc_examples/catch_all_segments.rs b/src/doc_examples/catch_all_segments.rs index 11d0a6083..182449a82 100644 --- a/src/doc_examples/catch_all_segments.rs +++ b/src/doc_examples/catch_all_segments.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -15,7 +15,7 @@ enum Route { } // Components must contain the same catch all segments as their corresponding variant -#[inline_props] +#[component] fn BlogPost(cx: Scope, segments: Vec) -> Element { todo!() } diff --git a/src/doc_examples/component_borrowed_props.rs b/src/doc_examples/component_borrowed_props.rs index ccdd8eb0e..6998e0acc 100644 --- a/src/doc_examples/component_borrowed_props.rs +++ b/src/doc_examples/component_borrowed_props.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: App +#[component] pub fn App(cx: Scope) -> Element { let hello = "Hello Dioxus!"; @@ -15,6 +15,7 @@ struct TitleCardProps<'a> { title: &'a str, } +#[component] fn TitleCard<'a>(cx: Scope<'a, TitleCardProps<'a>>) -> Element { cx.render(rsx! { h1 { "{cx.props.title}" } diff --git a/src/doc_examples/component_children.rs b/src/doc_examples/component_children.rs index cfcf09f06..304a96d05 100644 --- a/src/doc_examples/component_children.rs +++ b/src/doc_examples/component_children.rs @@ -2,6 +2,7 @@ #![allow(non_snake_case)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: Clickable_usage cx.render(rsx! { @@ -20,6 +21,7 @@ struct ClickableProps<'a> { children: Element<'a>, } +#[component] fn Clickable<'a>(cx: Scope<'a, ClickableProps<'a>>) -> Element { cx.render(rsx!( a { diff --git a/src/doc_examples/component_children_inspect.rs b/src/doc_examples/component_children_inspect.rs index a79b068a3..d0743a076 100644 --- a/src/doc_examples/component_children_inspect.rs +++ b/src/doc_examples/component_children_inspect.rs @@ -1,11 +1,12 @@ // ANCHOR: all -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; fn main() { dioxus_desktop::launch(App); } +#[component] fn App(cx: Scope) -> Element { // ANCHOR: Clickable_usage cx.render(rsx! { @@ -24,6 +25,7 @@ struct ClickableProps<'a> { } // ANCHOR: Clickable +#[component] fn Clickable<'a>(cx: Scope<'a, ClickableProps<'a>>) -> Element { match cx.props.children { Some(VNode { dynamic_nodes, .. }) => { diff --git a/src/doc_examples/component_element_props.rs b/src/doc_examples/component_element_props.rs index b8fe98879..1f343ea64 100644 --- a/src/doc_examples/component_element_props.rs +++ b/src/doc_examples/component_element_props.rs @@ -1,11 +1,11 @@ // ANCHOR: all -#![allow(non_snake_case)] use dioxus::prelude::*; fn main() { dioxus_desktop::launch(App); } +#[component] fn App(cx: Scope) -> Element { // ANCHOR: Clickable_usage cx.render(rsx! { @@ -24,6 +24,7 @@ struct ClickableProps<'a> { body: Element<'a>, } +#[component] fn Clickable<'a>(cx: Scope<'a, ClickableProps<'a>>) -> Element { cx.render(rsx!( a { diff --git a/src/doc_examples/component_owned_props.rs b/src/doc_examples/component_owned_props.rs index d85e8e1b1..5f9776f60 100644 --- a/src/doc_examples/component_owned_props.rs +++ b/src/doc_examples/component_owned_props.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: App +#[component] pub fn App(cx: Scope) -> Element { cx.render(rsx! { Likes { @@ -18,6 +18,7 @@ struct LikesProps { score: i32, } +#[component] fn Likes(cx: Scope) -> Element { cx.render(rsx! { div { diff --git a/src/doc_examples/component_props_options.rs b/src/doc_examples/component_props_options.rs index a10171a5c..a0ca33a23 100644 --- a/src/doc_examples/component_props_options.rs +++ b/src/doc_examples/component_props_options.rs @@ -1,10 +1,10 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; fn main() { dioxus_desktop::launch(App); } +#[component] fn App(cx: Scope) -> Element { cx.render(rsx! { // ANCHOR: OptionalProps_usage @@ -59,6 +59,7 @@ struct OptionalProps<'a> { subtitle: Option<&'a str>, } +#[component] fn Title<'a>(cx: Scope<'a, OptionalProps>) -> Element<'a> { cx.render(rsx!(h1{ "{cx.props.title}: ", @@ -75,6 +76,7 @@ struct ExplicitOptionProps<'a> { subtitle: Option<&'a str>, } +#[component] fn ExplicitOption<'a>(cx: Scope<'a, ExplicitOptionProps>) -> Element<'a> { cx.render(rsx!(h1 { "{cx.props.title}: ", @@ -91,6 +93,7 @@ struct DefaultProps { number: i64, } +#[component] fn DefaultComponent(cx: Scope) -> Element { cx.render(rsx!(h1 { "{cx.props.number}" })) } @@ -103,6 +106,7 @@ struct IntoProps { string: String, } +#[component] fn IntoComponent(cx: Scope) -> Element { cx.render(rsx!(h1 { "{cx.props.string}" })) } diff --git a/src/doc_examples/components.rs b/src/doc_examples/components.rs index f08c9380b..531ca79a5 100644 --- a/src/doc_examples/components.rs +++ b/src/doc_examples/components.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: App +#[component] pub fn App(cx: Scope) -> Element { cx.render(rsx! { About {}, @@ -11,6 +11,7 @@ pub fn App(cx: Scope) -> Element { // ANCHOR_END: App // ANCHOR: About +#[component] pub fn About(cx: Scope) -> Element { cx.render(rsx!(p { b {"Dioxus Labs"} diff --git a/src/doc_examples/conditional_rendering.rs b/src/doc_examples/conditional_rendering.rs index f56828980..d0b46514a 100644 --- a/src/doc_examples/conditional_rendering.rs +++ b/src/doc_examples/conditional_rendering.rs @@ -1,7 +1,7 @@ #![allow(unused)] -#![allow(non_snake_case)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { let is_logged_in = use_state(cx, || false); @@ -12,7 +12,7 @@ pub fn App(cx: Scope) -> Element { })) } -#[inline_props] +#[component] fn LogIn<'a>( cx: Scope<'a>, is_logged_in: bool, @@ -39,6 +39,7 @@ fn LogIn<'a>( // ANCHOR_END: if_else } +#[component] pub fn LogInImprovedApp(cx: Scope) -> Element { let is_logged_in = use_state(cx, || false); @@ -49,7 +50,7 @@ pub fn LogInImprovedApp(cx: Scope) -> Element { })) } -#[inline_props] +#[component] fn LogInImproved<'a>( cx: Scope<'a>, is_logged_in: bool, @@ -84,6 +85,7 @@ fn LogInImproved<'a>( // ANCHOR_END: if_else_improved } +#[component] pub fn LogInWarningApp(cx: Scope) -> Element { let is_logged_in = use_state(cx, || false); @@ -100,7 +102,7 @@ pub fn LogInWarningApp(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn LogInWarning(cx: Scope, is_logged_in: bool) -> Element { // ANCHOR: conditional_none if *is_logged_in { diff --git a/src/doc_examples/custom_assets.rs b/src/doc_examples/custom_assets.rs index f6c5f8389..0295c7831 100644 --- a/src/doc_examples/custom_assets.rs +++ b/src/doc_examples/custom_assets.rs @@ -4,7 +4,8 @@ fn main() { dioxus_desktop::launch(app); } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { cx.render(rsx! { div { img { src: "examples/assets/logo.png" } diff --git a/src/doc_examples/dynamic_route.rs b/src/doc_examples/dynamic_route.rs index f460a4936..2c3bf85d1 100644 --- a/src/doc_examples/dynamic_route.rs +++ b/src/doc_examples/dynamic_route.rs @@ -1,5 +1,3 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -32,14 +30,14 @@ enum Route { }, } // ANCHOR_END: router - +#[component] fn App(cx: Scope) -> Element { render! { Router:: {} } } -#[inline_props] +#[component] fn NavBar(cx: Scope) -> Element { render! { nav { @@ -52,7 +50,7 @@ fn NavBar(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } @@ -60,7 +58,7 @@ fn Home(cx: Scope) -> Element { } // ANCHOR: blog -#[inline_props] +#[component] fn Blog(cx: Scope) -> Element { render! { h1 { "Blog" } @@ -70,7 +68,7 @@ fn Blog(cx: Scope) -> Element { // ANCHOR_END: blog // ANCHOR: blog_list -#[inline_props] +#[component] fn BlogList(cx: Scope) -> Element { render! { h2 { "Choose a post" } @@ -94,7 +92,7 @@ fn BlogList(cx: Scope) -> Element { // ANCHOR: blog_post // The name prop comes from the /:name route segment -#[inline_props] +#[component] fn BlogPost(cx: Scope, name: String) -> Element { render! { h2 { "Blog Post: {name}"} @@ -102,7 +100,7 @@ fn BlogPost(cx: Scope, name: String) -> Element { } // ANCHOR_END: blog_post -#[inline_props] +#[component] fn PageNotFound(cx: Scope, route: Vec) -> Element { render! { h1 { "Page not found" } diff --git a/src/doc_examples/dynamic_segments.rs b/src/doc_examples/dynamic_segments.rs index 485f3799f..a62ce3c83 100644 --- a/src/doc_examples/dynamic_segments.rs +++ b/src/doc_examples/dynamic_segments.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -21,12 +21,12 @@ enum Route { } // Components must contain the same dynamic segments as their corresponding variant -#[inline_props] +#[component] fn BlogPost(cx: Scope, name: String) -> Element { todo!() } -#[inline_props] +#[component] fn Document(cx: Scope, id: usize) -> Element { todo!() } diff --git a/src/doc_examples/external_link.rs b/src/doc_examples/external_link.rs index ed855e2d3..a602c1385 100644 --- a/src/doc_examples/external_link.rs +++ b/src/doc_examples/external_link.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -9,7 +9,7 @@ enum Route { Home {}, } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { todo!() } @@ -17,6 +17,7 @@ fn Home(cx: Scope) -> Element { fn main() {} // ANCHOR: component +#[component] fn GoToDioxus(cx: Scope) -> Element { render! { Link { diff --git a/src/doc_examples/first_route.rs b/src/doc_examples/first_route.rs index 5afa513f9..e5b5f8b8b 100644 --- a/src/doc_examples/first_route.rs +++ b/src/doc_examples/first_route.rs @@ -1,5 +1,4 @@ // ANCHOR: router -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -16,7 +15,7 @@ enum Route { // ANCHOR_END: router // ANCHOR: app -#[inline_props] +#[component] fn App(cx: Scope) -> Element { render! { Router:: {} @@ -25,7 +24,7 @@ fn App(cx: Scope) -> Element { // ANCHOR_END: app // ANCHOR: home -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } diff --git a/src/doc_examples/full_example.rs b/src/doc_examples/full_example.rs index 3d839f64d..3480e4eef 100644 --- a/src/doc_examples/full_example.rs +++ b/src/doc_examples/full_example.rs @@ -1,5 +1,3 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -30,13 +28,14 @@ enum Route { } // ANCHOR_END: router +#[component] pub fn App(cx: Scope) -> Element { render! { Router:: {} } } -#[inline_props] +#[component] fn NavBar(cx: Scope) -> Element { render! { nav { @@ -49,14 +48,14 @@ fn NavBar(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } } } -#[inline_props] +#[component] fn Blog(cx: Scope) -> Element { render! { h1 { "Blog" } @@ -64,7 +63,7 @@ fn Blog(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn BlogList(cx: Scope) -> Element { render! { h2 { "Choose a post" } @@ -85,14 +84,14 @@ fn BlogList(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn BlogPost(cx: Scope, name: String) -> Element { render! { h2 { "Blog Post: {name}"} } } -#[inline_props] +#[component] fn PageNotFound(cx: Scope, route: Vec) -> Element { render! { h1 { "Page not found" } diff --git a/src/doc_examples/fullstack_static.rs b/src/doc_examples/fullstack_static.rs index 2fedc0b7d..1b4908d6c 100644 --- a/src/doc_examples/fullstack_static.rs +++ b/src/doc_examples/fullstack_static.rs @@ -5,7 +5,7 @@ //! cargo run --features ssr //! ``` -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_fullstack::{launch, prelude::*}; use dioxus_router::prelude::*; @@ -46,7 +46,7 @@ enum Route { Blog, } -#[inline_props] +#[component] fn Blog(cx: Scope) -> Element { render! { Link { to: Route::Home {}, "Go to counter" } @@ -64,7 +64,7 @@ fn Blog(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { let mut count = use_state(cx, || 0); let text = use_state(cx, || "...".to_string()); diff --git a/src/doc_examples/hackernews_async.rs b/src/doc_examples/hackernews_async.rs index 2708d04ce..82bd5dc47 100644 --- a/src/doc_examples/hackernews_async.rs +++ b/src/doc_examples/hackernews_async.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use chrono::{DateTime, Utc}; use dioxus::prelude::*; use serde::{Deserialize, Serialize}; @@ -117,6 +116,7 @@ pub mod fetch { use super::{get_comment, get_stories, get_story, PreviewState, StoryItem, StoryPageData}; use dioxus::prelude::*; + #[component] pub fn App(cx: Scope) -> Element { use_shared_state_provider(cx, || PreviewState::Unset); @@ -137,7 +137,7 @@ pub mod fetch { }) } - #[inline_props] + #[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { let preview_state = use_shared_state::(cx).unwrap(); let StoryItem { @@ -221,6 +221,7 @@ pub mod fetch { }) } + #[component] fn Preview(cx: Scope) -> Element { let preview_state = use_shared_state::(cx)?; @@ -257,8 +258,8 @@ pub mod fetch { } } - #[inline_props] - fn Comment(cx: Scope, comment: super::Comment) -> Element<'a> { + #[component] + fn Comment(cx: Scope, comment: super::Comment) -> Element { render! { div { padding: "0.5rem", @@ -277,6 +278,7 @@ pub mod fetch { } // ANCHOR: use_future + #[component] fn Stories(cx: Scope) -> Element { // Fetch the top 10 stories on Hackernews let stories = use_future(cx, (), |_| get_stories(10)); @@ -310,6 +312,7 @@ pub mod fetch { use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { use_shared_state_provider(cx, || PreviewState::Unset); @@ -349,7 +352,7 @@ async fn resolve_story( } } -#[inline_props] +#[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { let preview_state = use_shared_state::(cx).unwrap(); let StoryItem { @@ -441,6 +444,7 @@ enum PreviewState { Loaded(StoryPageData), } +#[component] fn Preview(cx: Scope) -> Element { let preview_state = use_shared_state::(cx)?; @@ -477,8 +481,8 @@ fn Preview(cx: Scope) -> Element { } } -#[inline_props] -fn Comment(cx: Scope, comment: Comment) -> Element<'a> { +#[component] +fn Comment(cx: Scope, comment: Comment) -> Element { render! { div { padding: "0.5rem", @@ -496,6 +500,7 @@ fn Comment(cx: Scope, comment: Comment) -> Element<'a> { } } +#[component] fn Stories(cx: Scope) -> Element { let story = use_future(cx, (), |_| get_stories(10)); diff --git a/src/doc_examples/hackernews_complete.rs b/src/doc_examples/hackernews_complete.rs index 1b1a70367..b3a83e80f 100644 --- a/src/doc_examples/hackernews_complete.rs +++ b/src/doc_examples/hackernews_complete.rs @@ -1,6 +1,6 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { use_shared_state_provider(cx, || PreviewState::Unset); @@ -21,6 +21,7 @@ pub fn App(cx: Scope) -> Element { }) } +#[component] fn Stories(cx: Scope) -> Element { let story = use_future(cx, (), |_| get_stories(10)); @@ -54,7 +55,7 @@ async fn resolve_story( } } -#[inline_props] +#[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { let preview_state = use_shared_state::(cx).unwrap(); let StoryItem { @@ -140,6 +141,7 @@ enum PreviewState { Loaded(StoryPageData), } +#[component] fn Preview(cx: Scope) -> Element { let preview_state = use_shared_state::(cx)?; @@ -176,8 +178,8 @@ fn Preview(cx: Scope) -> Element { } } -#[inline_props] -fn Comment(cx: Scope, comment: Comment) -> Element<'a> { +#[component] +fn Comment(cx: Scope, comment: Comment) -> Element { render! { div { padding: "0.5rem", diff --git a/src/doc_examples/hackernews_post.rs b/src/doc_examples/hackernews_post.rs index 0c4cc10e7..7d3fe0c61 100644 --- a/src/doc_examples/hackernews_post.rs +++ b/src/doc_examples/hackernews_post.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use chrono::{DateTime, Utc}; use dioxus::prelude::*; use futures::future::join_all; @@ -8,6 +7,7 @@ pub mod story_v1 { use super::*; // ANCHOR: story_v1 + #[component] pub fn App(cx: Scope) -> Element { render! { "story" @@ -20,6 +20,7 @@ pub mod story_v2 { use dioxus::prelude::*; // ANCHOR: story_v2 + #[component] pub fn App(cx: Scope) -> Element { let title = "title"; let by = "author"; @@ -38,6 +39,7 @@ pub mod story_v3 { use dioxus::prelude::*; // ANCHOR: story_v3 + #[component] pub fn App(cx: Scope) -> Element { let title = "title"; let by = "author"; @@ -58,6 +60,7 @@ pub mod story_v4 { use dioxus::prelude::*; // ANCHOR: story_v4 + #[component] pub fn App(cx: Scope) -> Element { let title = "title"; let by = "author"; @@ -80,6 +83,7 @@ pub mod story_v5 { use dioxus::prelude::*; // ANCHOR: app_v5 + #[component] pub fn App(cx: Scope) -> Element { render! { StoryListing { @@ -90,6 +94,7 @@ pub mod story_v5 { // ANCHOR_END: app_v5 // ANCHOR: story_v5 + #[component] fn StoryListing(cx: Scope) -> Element { let title = "title"; let by = "author"; @@ -112,6 +117,7 @@ pub mod story_v6 { use dioxus::prelude::*; // ANCHOR: app_v6 + #[component] pub fn App(cx: Scope) -> Element { render! { StoryListing { @@ -181,7 +187,7 @@ pub mod story_v6 { pub r#type: String, } - #[inline_props] + #[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { let StoryItem { title, @@ -257,6 +263,7 @@ pub mod story_final { pub r#type: String, } + #[component] pub fn App(cx: Scope) -> Element { render! { StoryListing { @@ -276,7 +283,7 @@ pub mod story_final { } } - #[inline_props] + #[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { let StoryItem { title, diff --git a/src/doc_examples/hackernews_state.rs b/src/doc_examples/hackernews_state.rs index b05f5d64d..b713fa587 100644 --- a/src/doc_examples/hackernews_state.rs +++ b/src/doc_examples/hackernews_state.rs @@ -5,6 +5,7 @@ pub mod app_v1 { use super::*; // ANCHOR: app_v1 + #[component] pub fn App(cx: Scope) -> Element { cx.render(rsx! { div { @@ -24,6 +25,7 @@ pub mod app_v1 { } // New + #[component] fn Stories(cx: Scope) -> Element { render! { StoryListing { @@ -52,6 +54,7 @@ pub mod app_v1 { } // New + #[component] fn Preview(cx: Scope) -> Element { let preview_state = PreviewState::Unset; match preview_state { @@ -88,7 +91,7 @@ pub mod app_v1 { } // ANCHOR_END: app_v1 - #[inline_props] + #[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { let StoryItem { title, @@ -162,6 +165,7 @@ pub mod app_v1 { mod story_listing_listener { use super::*; + #[component] pub fn App(cx: Scope) -> Element { use_shared_state_provider(cx, || PreviewState::Unset); @@ -182,6 +186,7 @@ mod story_listing_listener { }) } + #[component] fn Stories(cx: Scope) -> Element { render! { StoryListing { @@ -208,6 +213,7 @@ mod story_listing_listener { Loaded(StoryPageData), } + #[component] fn Preview(cx: Scope) -> Element { let preview_state = PreviewState::Unset; @@ -244,7 +250,7 @@ mod story_listing_listener { } } - #[inline_props] + #[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { let StoryItem { title, @@ -324,6 +330,7 @@ mod story_listing_listener { } // ANCHOR: shared_state_app +#[component] pub fn App(cx: Scope) -> Element { use_shared_state_provider(cx, || PreviewState::Unset); // ANCHOR_END: shared_state_app @@ -345,7 +352,7 @@ pub fn App(cx: Scope) -> Element { } // ANCHOR: shared_state_stories -#[inline_props] +#[component] fn StoryListing(cx: Scope, story: StoryItem) -> Element { // New let preview_state = use_shared_state::(cx).unwrap(); @@ -435,6 +442,7 @@ fn StoryListing(cx: Scope, story: StoryItem) -> Element { } // ANCHOR: shared_state_preview +#[component] fn Preview(cx: Scope) -> Element { // New let preview_state = use_shared_state::(cx)?; @@ -481,6 +489,7 @@ enum PreviewState { Loaded(StoryPageData), } +#[component] fn Stories(cx: Scope) -> Element { render! { StoryListing { @@ -500,8 +509,8 @@ fn Stories(cx: Scope) -> Element { } } -#[inline_props] -fn Comment(cx: Scope, comment: Comment) -> Element<'a> { +#[component] +fn Comment(cx: Scope, comment: Comment) -> Element { render! { div { padding: "0.5rem", diff --git a/src/doc_examples/hello_world_ssr.rs b/src/doc_examples/hello_world_ssr.rs index 0f8db0b46..0af689f49 100644 --- a/src/doc_examples/hello_world_ssr.rs +++ b/src/doc_examples/hello_world_ssr.rs @@ -52,6 +52,7 @@ async fn second_app_endpoint() -> Html { // ANCHOR: component // define a component that renders a div with the text "Hello, world!" +#[component] fn App(cx: Scope) -> Element { cx.render(rsx! { div { diff --git a/src/doc_examples/hello_world_tui.rs b/src/doc_examples/hello_world_tui.rs index dc4f0ee71..5ac657ff6 100644 --- a/src/doc_examples/hello_world_tui.rs +++ b/src/doc_examples/hello_world_tui.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types use dioxus::prelude::*; @@ -8,6 +7,7 @@ fn main() { } // create a component that renders a div with the text "Hello, world!" +#[component] fn App(cx: Scope) -> Element { cx.render(rsx! { div { diff --git a/src/doc_examples/hello_world_tui_no_ctrl_c.rs b/src/doc_examples/hello_world_tui_no_ctrl_c.rs index 6afa21e6c..cbe742b0f 100644 --- a/src/doc_examples/hello_world_tui_no_ctrl_c.rs +++ b/src/doc_examples/hello_world_tui_no_ctrl_c.rs @@ -1,6 +1,3 @@ -// todo remove deprecated -#![allow(non_snake_case, deprecated)] - use dioxus::events::{KeyCode, KeyboardEvent}; use dioxus::prelude::*; use dioxus_tui::TuiContext; @@ -16,6 +13,7 @@ fn main() { ); } +#[component] fn App(cx: Scope) -> Element { let tui_ctx: TuiContext = cx.consume_context().unwrap(); diff --git a/src/doc_examples/hello_world_web.rs b/src/doc_examples/hello_world_web.rs index 7b013bc3d..7cff14360 100644 --- a/src/doc_examples/hello_world_web.rs +++ b/src/doc_examples/hello_world_web.rs @@ -1,5 +1,4 @@ -#![allow(non_snake_case)] -// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types +// import the prelude to get access to the `rsx!` + `#[component]` macros and the `Scope` + `Element` types use dioxus::prelude::*; fn main() { @@ -8,6 +7,7 @@ fn main() { } // create a component that renders a div with the text "Hello, world!" +#[component] fn App(cx: Scope) -> Element { cx.render(rsx! { div { diff --git a/src/doc_examples/history_buttons.rs b/src/doc_examples/history_buttons.rs index 971549aa5..e2ceabc36 100644 --- a/src/doc_examples/history_buttons.rs +++ b/src/doc_examples/history_buttons.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -9,12 +9,13 @@ enum Route { Home {}, } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { todo!() } // ANCHOR: history_buttons +#[component] fn HistoryNavigation(cx: Scope) -> Element { render! { GoBackButton { diff --git a/src/doc_examples/history_provider.rs b/src/doc_examples/history_provider.rs index 57ec27732..a2eb49912 100644 --- a/src/doc_examples/history_provider.rs +++ b/src/doc_examples/history_provider.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -9,7 +8,7 @@ enum Route { } // ANCHOR: app -#[inline_props] +#[component] fn App(cx: Scope) -> Element { render! { Router:: { @@ -19,7 +18,7 @@ fn App(cx: Scope) -> Element { } // ANCHOR_END: app -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } diff --git a/src/doc_examples/links.rs b/src/doc_examples/links.rs index 356e9c0a7..72a363875 100644 --- a/src/doc_examples/links.rs +++ b/src/doc_examples/links.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -17,7 +16,7 @@ enum Route { // ANCHOR_END: router // ANCHOR: nav -#[inline_props] +#[component] fn NavBar(cx: Scope) -> Element { render! { nav { @@ -38,7 +37,7 @@ fn NavBar(cx: Scope) -> Element { // ANCHOR_END: nav // ANCHOR: app -#[inline_props] +#[component] fn App(cx: Scope) -> Element { render! { Router:: {} @@ -47,7 +46,7 @@ fn App(cx: Scope) -> Element { // ANCHOR_END: app // ANCHOR: home -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } @@ -56,7 +55,7 @@ fn Home(cx: Scope) -> Element { // ANCHOR_END: home // ANCHOR: fallback -#[inline_props] +#[component] fn PageNotFound(cx: Scope, route: Vec) -> Element { render! { h1 { "Page not found" } diff --git a/src/doc_examples/meme_editor.rs b/src/doc_examples/meme_editor.rs index c5a473da9..1824c13c4 100644 --- a/src/doc_examples/meme_editor.rs +++ b/src/doc_examples/meme_editor.rs @@ -1,6 +1,4 @@ // ANCHOR: all -#![allow(non_snake_case)] - use dioxus::prelude::*; fn main() { @@ -8,6 +6,7 @@ fn main() { } // ANCHOR: meme_editor +#[component] fn MemeEditor(cx: Scope) -> Element { let container_style = r" display: flex; @@ -36,7 +35,7 @@ fn MemeEditor(cx: Scope) -> Element { // ANCHOR_END: meme_editor // ANCHOR: meme_component -#[inline_props] +#[component] fn Meme<'a>(cx: Scope<'a>, caption: &'a str) -> Element<'a> { let container_style = r#" position: relative; @@ -78,7 +77,7 @@ fn Meme<'a>(cx: Scope<'a>, caption: &'a str) -> Element<'a> { // ANCHOR_END: meme_component // ANCHOR: caption_editor -#[inline_props] +#[component] fn CaptionEditor<'a>( cx: Scope<'a>, caption: &'a str, diff --git a/src/doc_examples/meme_editor_dark_mode.rs b/src/doc_examples/meme_editor_dark_mode.rs index e394a4a7f..02e446368 100644 --- a/src/doc_examples/meme_editor_dark_mode.rs +++ b/src/doc_examples/meme_editor_dark_mode.rs @@ -1,6 +1,4 @@ // ANCHOR: all -#![allow(non_snake_case)] - use dioxus::prelude::*; fn main() { @@ -11,6 +9,7 @@ fn main() { struct DarkMode(bool); // ANCHOR_END: DarkMode_struct +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: context_provider use_shared_state_provider(cx, || DarkMode(false)); @@ -45,6 +44,7 @@ pub fn use_is_dark_mode(cx: &ScopeState) -> bool { } // ANCHOR: toggle +#[component] pub fn DarkModeToggle(cx: Scope) -> Element { let dark_mode = use_shared_state::(cx).unwrap(); @@ -69,6 +69,7 @@ pub fn DarkModeToggle(cx: Scope) -> Element { // ANCHOR_END: toggle // ANCHOR: meme_editor +#[component] fn MemeEditor(cx: Scope) -> Element { let is_dark_mode = use_is_dark_mode(cx); let heading_style = if is_dark_mode { "color: white" } else { "" }; @@ -103,7 +104,7 @@ fn MemeEditor(cx: Scope) -> Element { // ANCHOR_END: meme_editor // ANCHOR: meme_component -#[inline_props] +#[component] fn Meme<'a>(cx: Scope<'a>, caption: &'a str) -> Element<'a> { let container_style = r" position: relative; @@ -145,7 +146,7 @@ fn Meme<'a>(cx: Scope<'a>, caption: &'a str) -> Element<'a> { // ANCHOR_END: meme_component // ANCHOR: caption_editor -#[inline_props] +#[component] fn CaptionEditor<'a>( cx: Scope<'a>, caption: &'a str, diff --git a/src/doc_examples/navigator.rs b/src/doc_examples/navigator.rs index 9f32b7c12..0ac8b45f5 100644 --- a/src/doc_examples/navigator.rs +++ b/src/doc_examples/navigator.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -11,7 +10,7 @@ enum Route { PageNotFound { route: Vec }, } -#[inline_props] +#[component] fn App(cx: Scope) -> Element { render! { Router:: {} @@ -19,7 +18,7 @@ fn App(cx: Scope) -> Element { } // ANCHOR: nav -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { let nav = use_navigator(cx); @@ -41,7 +40,7 @@ fn Home(cx: Scope) -> Element { } // ANCHOR_END: nav -#[inline_props] +#[component] fn PageNotFound(cx: Scope, route: Vec) -> Element { render! { h1 { "Page not found" } diff --git a/src/doc_examples/nest.rs b/src/doc_examples/nest.rs index f7fe2137c..c9d91cdc4 100644 --- a/src/doc_examples/nest.rs +++ b/src/doc_examples/nest.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -26,12 +26,12 @@ enum Route { // Or nests are ended automatically at the end of the enum } -#[inline_props] +#[component] fn BlogPost(cx: Scope, id: usize) -> Element { todo!() } -#[inline_props] +#[component] fn PostId(cx: Scope, id: usize) -> Element { todo!() } diff --git a/src/doc_examples/nested_routes.rs b/src/doc_examples/nested_routes.rs index 63e080016..c2dfa9dd8 100644 --- a/src/doc_examples/nested_routes.rs +++ b/src/doc_examples/nested_routes.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -17,7 +16,7 @@ enum Route { // ANCHOR_END: router // ANCHOR: nav -#[inline_props] +#[component] fn NavBar(cx: Scope) -> Element { render! { nav { @@ -32,7 +31,7 @@ fn NavBar(cx: Scope) -> Element { // ANCHOR_END: nav // ANCHOR: app -#[inline_props] +#[component] fn App(cx: Scope) -> Element { render! { Router:: {} @@ -41,7 +40,7 @@ fn App(cx: Scope) -> Element { // ANCHOR_END: app // ANCHOR: home -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } @@ -50,7 +49,7 @@ fn Home(cx: Scope) -> Element { // ANCHOR_END: home // ANCHOR: fallback -#[inline_props] +#[component] fn PageNotFound(cx: Scope, route: Vec) -> Element { render! { h1 { "Page not found" } diff --git a/src/doc_examples/outlet.rs b/src/doc_examples/outlet.rs index 5c7ee8dbf..f70fde510 100644 --- a/src/doc_examples/outlet.rs +++ b/src/doc_examples/outlet.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -11,7 +10,7 @@ enum Route { Index {}, } -#[inline_props] +#[component] fn Wrapper(cx: Scope) -> Element { render! { header { "header" } @@ -21,7 +20,7 @@ fn Wrapper(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn Index(cx: Scope) -> Element { render! { h1 { "Index" } @@ -29,6 +28,7 @@ fn Index(cx: Scope) -> Element { } // ANCHOR_END: outlet +#[component] fn App(cx: Scope) -> Element { render! { Router:: {} diff --git a/src/doc_examples/query_segments.rs b/src/doc_examples/query_segments.rs index 61055229c..009f9699c 100644 --- a/src/doc_examples/query_segments.rs +++ b/src/doc_examples/query_segments.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use std::fmt::Display; use dioxus::prelude::*; @@ -50,7 +50,7 @@ impl FromQuery for BlogQuerySegments { } } -#[inline_props] +#[component] fn BlogPost(cx: Scope, query_params: BlogQuerySegments) -> Element { render! { div{"This is your blogpost with a query segment:"} @@ -58,8 +58,9 @@ fn BlogPost(cx: Scope, query_params: BlogQuerySegments) -> Element { } } +#[component] fn App(cx: Scope) -> Element { render! { Router::{} } } -fn main() {} \ No newline at end of file +fn main() {} diff --git a/src/doc_examples/rendering_lists.rs b/src/doc_examples/rendering_lists.rs index 9ae039206..1dc12824c 100644 --- a/src/doc_examples/rendering_lists.rs +++ b/src/doc_examples/rendering_lists.rs @@ -1,5 +1,3 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; #[derive(PartialEq, Clone)] @@ -8,6 +6,7 @@ struct Comment { id: usize, } +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: render_list let comment_field = use_state(cx, String::new); @@ -46,6 +45,7 @@ pub fn App(cx: Scope) -> Element { // ANCHOR_END: render_list } +#[component] pub fn AppForLoop(cx: Scope) -> Element { // ANCHOR: render_list_for_loop let comment_field = use_state(cx, String::new); @@ -82,7 +82,7 @@ pub fn AppForLoop(cx: Scope) -> Element { // ANCHOR_END: render_list_for_loop } -#[inline_props] +#[component] fn CommentComponent(cx: Scope, comment: Comment) -> Element { cx.render(rsx!(div { "Comment by anon:", diff --git a/src/doc_examples/router_cfg.rs b/src/doc_examples/router_cfg.rs index 5fd0402af..b6e83039e 100644 --- a/src/doc_examples/router_cfg.rs +++ b/src/doc_examples/router_cfg.rs @@ -1,5 +1,4 @@ // ANCHOR: router -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -15,7 +14,7 @@ enum Route { // ANCHOR_END: router // ANCHOR: app -#[inline_props] +#[component] fn App(cx: Scope) -> Element { render! { Router:: { @@ -26,7 +25,7 @@ fn App(cx: Scope) -> Element { // ANCHOR_END: app // ANCHOR: home -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { h1 { "Welcome to the Dioxus Blog!" } diff --git a/src/doc_examples/routing_update.rs b/src/doc_examples/routing_update.rs index a7f83d633..1b70ad904 100644 --- a/src/doc_examples/routing_update.rs +++ b/src/doc_examples/routing_update.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -11,21 +11,22 @@ enum Route { Home {}, } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { p { "Home" } } } -#[inline_props] +#[component] fn Index(cx: Scope) -> Element { render! { p { "Index" } } } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { render! { Router:: { config: || RouterConfig::default().on_update(|state|{ diff --git a/src/doc_examples/server_router.rs b/src/doc_examples/server_router.rs index fea57d185..584aa0f02 100644 --- a/src/doc_examples/server_router.rs +++ b/src/doc_examples/server_router.rs @@ -1,5 +1,3 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; use dioxus_fullstack::prelude::*; use dioxus_router::prelude::*; @@ -27,7 +25,7 @@ enum Route { Blog { id: i32 }, } -#[inline_props] +#[component] fn Blog(cx: Scope, id: i32) -> Element { render! { Link { to: Route::Home {}, "Go to counter" } @@ -45,7 +43,7 @@ fn Blog(cx: Scope, id: i32) -> Element { } } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { let mut count = use_state(cx, || 0); let text = use_state(cx, || "...".to_string()); diff --git a/src/doc_examples/static_generation.rs b/src/doc_examples/static_generation.rs index 7ddda6d36..5f0b65935 100644 --- a/src/doc_examples/static_generation.rs +++ b/src/doc_examples/static_generation.rs @@ -1,5 +1,3 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -49,7 +47,7 @@ async fn main() { .unwrap(); } -#[inline_props] +#[component] fn Blog(cx: Scope) -> Element { render! { div { @@ -58,7 +56,7 @@ fn Blog(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn Post(cx: Scope, id: usize) -> Element { render! { div { @@ -67,7 +65,7 @@ fn Post(cx: Scope, id: usize) -> Element { } } -#[inline_props] +#[component] fn PostHome(cx: Scope) -> Element { render! { div { @@ -76,7 +74,7 @@ fn PostHome(cx: Scope) -> Element { } } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { render! { div { diff --git a/src/doc_examples/static_segments.rs b/src/doc_examples/static_segments.rs index 54c045765..364e9ebc5 100644 --- a/src/doc_examples/static_segments.rs +++ b/src/doc_examples/static_segments.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; use dioxus_router::prelude::*; @@ -14,12 +13,12 @@ enum Route { HelloWorld {}, } -#[inline_props] +#[component] fn Home(cx: Scope) -> Element { todo!() } -#[inline_props] +#[component] fn HelloWorld(cx: Scope) -> Element { todo!() } diff --git a/src/doc_examples/use_future.rs b/src/doc_examples/use_future.rs index ebe02102c..10bc542ab 100644 --- a/src/doc_examples/use_future.rs +++ b/src/doc_examples/use_future.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; @@ -8,6 +8,7 @@ struct ApiResponse { image_url: String, } +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: use_future let future = use_future(cx, (), |_| async move { @@ -40,7 +41,7 @@ pub fn App(cx: Scope) -> Element { // ANCHOR_END: render } -#[inline_props] +#[component] fn RandomDog(cx: Scope, breed: String) -> Element { // ANCHOR: dependancy let future = use_future(cx, (breed,), |(breed,)| async move { diff --git a/src/lib.rs b/src/lib.rs index 643bd583a..b9a64fd5e 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, non_upper_case_globals, unused)] +#![allow(non_upper_case_globals, unused)] use dioxus::html::input_data::keyboard_types::{Key, Modifiers}; use dioxus::prelude::*; @@ -42,7 +42,7 @@ pub mod components { } } -#[inline_props] +#[component] fn HeaderFooter(cx: Scope) -> Element { use_init_atom_root(cx); let set_search = fermi::use_set(cx, &SHOW_SEARCH); @@ -139,7 +139,7 @@ mod docs { use dioxus::prelude::*; use fermi::use_atom_state; - #[inline_props] + #[component] fn SandBoxFrame<'a>(cx: Scope<'a>, url: &'a str) -> Element<'a> { render! { iframe { @@ -152,7 +152,7 @@ mod docs { } } - #[inline_props] + #[component] fn DemoFrame<'a>(cx: Scope<'a>, children: Element<'a>) -> Element { render! { div { From 9b3442c55b70ef53e25b9d57c369f547dcdd1475 Mon Sep 17 00:00:00 2001 From: Leonard Date: Thu, 14 Sep 2023 14:16:01 +0200 Subject: [PATCH 2/3] Add `#[component]` to components that don't have it --- docs-src/0.4/en/getting_started/mobile.md | 5 +++-- docs-src/0.4/en/reference/use_effect.md | 3 ++- posts/release_04.md | 4 +++- snippets/async.rs | 1 + snippets/fermi.rs | 3 +++ snippets/readme.rs | 3 ++- src/doc_examples/component_children.rs | 1 - src/doc_examples/dangerous_inner_html.rs | 2 +- src/doc_examples/eval.rs | 5 +++-- src/doc_examples/event_click.rs | 2 +- src/doc_examples/event_handler_prop.rs | 4 ++-- src/doc_examples/hello_world_desktop.rs | 2 +- src/doc_examples/hello_world_liveview.rs | 7 ++++--- src/doc_examples/hooks_bad.rs | 3 +-- src/doc_examples/hooks_counter.rs | 2 +- src/doc_examples/hooks_out_of_date.rs | 2 +- src/doc_examples/hooks_use_ref.rs | 2 +- src/doc_examples/input_fileengine.rs | 2 +- src/doc_examples/input_fileengine_folder.rs | 2 +- src/doc_examples/input_uncontrolled.rs | 2 +- src/doc_examples/rsx_overview.rs | 13 ++++++++++++- src/doc_examples/server_basic.rs | 7 ++++--- src/doc_examples/server_function.rs | 3 +-- src/doc_examples/server_function_extract.rs | 2 +- src/doc_examples/server_function_middleware.rs | 2 +- 25 files changed, 52 insertions(+), 32 deletions(-) diff --git a/docs-src/0.4/en/getting_started/mobile.md b/docs-src/0.4/en/getting_started/mobile.md index 375e39bd7..deb759cf8 100644 --- a/docs-src/0.4/en/getting_started/mobile.md +++ b/docs-src/0.4/en/getting_started/mobile.md @@ -114,7 +114,7 @@ pub fn main() -> Result<()> { // Right now we're going through dioxus-desktop but we'd like to go through dioxus-mobile // That will seed the index.html with some fixes that prevent the page from scrolling/zooming etc dioxus_desktop::launch_cfg( - app, + App, // Note that we have to disable the viewport goofiness of the browser. // Dioxus_mobile should do this for us Config::default().with_custom_index(r#" @@ -135,7 +135,8 @@ pub fn main() -> Result<()> { Ok(()) } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let items = cx.use_hook(|| vec![1, 2, 3]); log::debug!("Hello from the app"); diff --git a/docs-src/0.4/en/reference/use_effect.md b/docs-src/0.4/en/reference/use_effect.md index 4e3f7768e..2a59a301d 100644 --- a/docs-src/0.4/en/reference/use_effect.md +++ b/docs-src/0.4/en/reference/use_effect.md @@ -35,7 +35,8 @@ fn Profile(cx: Scope, id: usize) -> Element { ) } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { render!(Profile { id: 0 }) } ``` diff --git a/posts/release_04.md b/posts/release_04.md index 556653e3c..37c4ebfca 100644 --- a/posts/release_04.md +++ b/posts/release_04.md @@ -237,12 +237,14 @@ enum Route { } // 2. Make sure we have a component in scope that matches the enum variant +#[component] fn Homepage(cx: Scope) -> Element { render! { "Welcome home!" } } // 3. Now render our app, using the Router and Route -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { render! { Router:: {} } } ``` diff --git a/snippets/async.rs b/snippets/async.rs index 30691bcfa..6b5e9e1d3 100644 --- a/snippets/async.rs +++ b/snippets/async.rs @@ -1,5 +1,6 @@ //! Easily integrate async Rust code into your components. +#[component] fn Tasks(cx: Scope) -> Element { let count = use_state(cx, || 0); diff --git a/snippets/fermi.rs b/snippets/fermi.rs index ef8f74ac5..3065a594e 100644 --- a/snippets/fermi.rs +++ b/snippets/fermi.rs @@ -4,6 +4,7 @@ static COUNT: fermi::Atom = |_| 0; // Read it anywhere +#[component] fn Read(cx: Scope) -> Element { let count = fermi::use_read(cx, &|| COUNT); @@ -11,12 +12,14 @@ fn Read(cx: Scope) -> Element { } // Or write to it from anywhere +#[component] fn Increment(cx: Scope) -> Element { let mut count = fermi::use_atom_state(cx, &COUNT); render!( button { onclick: move |_| count += 1 , "Increment" } ) } +#[component] fn App(cx: Scope) -> Element { //Initialize the atom root - this is what keeps track of your atoms fermi::use_init_atom_root(cx); diff --git a/snippets/readme.rs b/snippets/readme.rs index 969fcf0ea..a691b2572 100644 --- a/snippets/readme.rs +++ b/snippets/readme.rs @@ -1,6 +1,7 @@ //! Simple, familiar, React-like syntax -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let mut count = use_state(cx, || 0); render!( diff --git a/src/doc_examples/component_children.rs b/src/doc_examples/component_children.rs index 304a96d05..3e05184b1 100644 --- a/src/doc_examples/component_children.rs +++ b/src/doc_examples/component_children.rs @@ -1,5 +1,4 @@ // ANCHOR: all -#![allow(non_snake_case)] use dioxus::prelude::*; #[component] diff --git a/src/doc_examples/dangerous_inner_html.rs b/src/doc_examples/dangerous_inner_html.rs index 081387dff..2ae815455 100644 --- a/src/doc_examples/dangerous_inner_html.rs +++ b/src/doc_examples/dangerous_inner_html.rs @@ -1,6 +1,6 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: dangerous_inner_html // this should come from a trusted source diff --git a/src/doc_examples/eval.rs b/src/doc_examples/eval.rs index 58a37945c..7eceb0add 100644 --- a/src/doc_examples/eval.rs +++ b/src/doc_examples/eval.rs @@ -1,10 +1,11 @@ use dioxus::prelude::*; fn main() { - dioxus_desktop::launch(app); + dioxus_desktop::launch(App); } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { // Use eval returns a function that can spawn eval instances let create_eval = use_eval(cx); diff --git a/src/doc_examples/event_click.rs b/src/doc_examples/event_click.rs index 5c08c0201..42a92e8a3 100644 --- a/src/doc_examples/event_click.rs +++ b/src/doc_examples/event_click.rs @@ -1,6 +1,6 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: rsx cx.render(rsx! { diff --git a/src/doc_examples/event_handler_prop.rs b/src/doc_examples/event_handler_prop.rs index 0ef70c841..a8be4e5e0 100644 --- a/src/doc_examples/event_handler_prop.rs +++ b/src/doc_examples/event_handler_prop.rs @@ -1,11 +1,10 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; fn main() { dioxus_desktop::launch(App); } +#[component] fn App(cx: Scope) -> Element { // ANCHOR: usage cx.render(rsx! { @@ -22,6 +21,7 @@ pub struct FancyButtonProps<'a> { on_click: EventHandler<'a, MouseEvent>, } +#[component] pub fn FancyButton<'a>(cx: Scope<'a, FancyButtonProps<'a>>) -> Element<'a> { cx.render(rsx!(button { class: "fancy-button", diff --git a/src/doc_examples/hello_world_desktop.rs b/src/doc_examples/hello_world_desktop.rs index 9d5a02051..cdadeed04 100644 --- a/src/doc_examples/hello_world_desktop.rs +++ b/src/doc_examples/hello_world_desktop.rs @@ -1,5 +1,4 @@ // ANCHOR: all -#![allow(non_snake_case)] // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types use dioxus::prelude::*; @@ -10,6 +9,7 @@ fn main() { // ANCHOR: component // define a component that renders a div with the text "Hello, world!" +#[component] fn App(cx: Scope) -> Element { cx.render(rsx! { div { diff --git a/src/doc_examples/hello_world_liveview.rs b/src/doc_examples/hello_world_liveview.rs index c88dc2f53..44037b61c 100644 --- a/src/doc_examples/hello_world_liveview.rs +++ b/src/doc_examples/hello_world_liveview.rs @@ -33,8 +33,8 @@ async fn main() { "/ws", get(move |ws: WebSocketUpgrade| async move { ws.on_upgrade(move |socket| async move { - // When the WebSocket is upgraded, launch the LiveView with the app component - _ = view.launch(dioxus_liveview::axum_socket(socket), app).await; + // When the WebSocket is upgraded, launch the LiveView with the App component + _ = view.launch(dioxus_liveview::axum_socket(socket), App).await; }) }), ); @@ -49,7 +49,8 @@ async fn main() { // ANCHOR_END: glue // ANCHOR: app -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { cx.render(rsx! { div { "Hello, world!" diff --git a/src/doc_examples/hooks_bad.rs b/src/doc_examples/hooks_bad.rs index 7f709d561..b12a0d9a6 100644 --- a/src/doc_examples/hooks_bad.rs +++ b/src/doc_examples/hooks_bad.rs @@ -1,5 +1,3 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; use std::collections::HashMap; @@ -7,6 +5,7 @@ fn main() { dioxus_desktop::launch(App); } +#[component] fn App(cx: Scope) -> Element { let you_are_happy = true; let you_know_it = false; diff --git a/src/doc_examples/hooks_counter.rs b/src/doc_examples/hooks_counter.rs index 196615b1c..f112b81ea 100644 --- a/src/doc_examples/hooks_counter.rs +++ b/src/doc_examples/hooks_counter.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { // count will be initialized to 0 the first time the component is rendered let mut count = use_state(cx, || 0); diff --git a/src/doc_examples/hooks_out_of_date.rs b/src/doc_examples/hooks_out_of_date.rs index 242dc945e..34834322a 100644 --- a/src/doc_examples/hooks_out_of_date.rs +++ b/src/doc_examples/hooks_out_of_date.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { // count will be initialized to 0 the first time the component is rendered let mut count = use_state(cx, || 0); diff --git a/src/doc_examples/hooks_use_ref.rs b/src/doc_examples/hooks_use_ref.rs index 06d665435..f084f8ad6 100644 --- a/src/doc_examples/hooks_use_ref.rs +++ b/src/doc_examples/hooks_use_ref.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { let list = use_ref(cx, Vec::new); diff --git a/src/doc_examples/input_fileengine.rs b/src/doc_examples/input_fileengine.rs index cdb9fd7f4..d6445ddb5 100644 --- a/src/doc_examples/input_fileengine.rs +++ b/src/doc_examples/input_fileengine.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: rsx let filenames: &UseRef> = use_ref(cx, Vec::new); diff --git a/src/doc_examples/input_fileengine_folder.rs b/src/doc_examples/input_fileengine_folder.rs index 15d8228d6..4f8ef27ac 100644 --- a/src/doc_examples/input_fileengine_folder.rs +++ b/src/doc_examples/input_fileengine_folder.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { let filenames: &UseRef> = use_ref(cx, Vec::new); cx.render(rsx! { diff --git a/src/doc_examples/input_uncontrolled.rs b/src/doc_examples/input_uncontrolled.rs index d3b1d49be..b2318f56e 100644 --- a/src/doc_examples/input_uncontrolled.rs +++ b/src/doc_examples/input_uncontrolled.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { cx.render(rsx! { form { diff --git a/src/doc_examples/rsx_overview.rs b/src/doc_examples/rsx_overview.rs index cf788cd68..c69fb7cfc 100644 --- a/src/doc_examples/rsx_overview.rs +++ b/src/doc_examples/rsx_overview.rs @@ -1,8 +1,8 @@ -#![allow(non_snake_case)] #![allow(unused)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { cx.render(rsx!( Empty {}, @@ -16,6 +16,7 @@ pub fn App(cx: Scope) -> Element { )) } +#[component] pub fn Empty(cx: Scope) -> Element { // ANCHOR: empty cx.render(rsx!(div { @@ -25,6 +26,7 @@ pub fn Empty(cx: Scope) -> Element { // ANCHOR_END: empty } +#[component] pub fn Children(cx: Scope) -> Element { // ANCHOR: children cx.render(rsx!(ol { @@ -35,6 +37,7 @@ pub fn Children(cx: Scope) -> Element { // ANCHOR_END: children } +#[component] pub fn Fragments(cx: Scope) -> Element { // ANCHOR: fragments cx.render(rsx!( @@ -49,6 +52,7 @@ pub fn Fragments(cx: Scope) -> Element { // ANCHOR_END: fragments } +#[component] pub fn ManyRoots(cx: Scope) -> Element { // ANCHOR: manyroots cx.render(rsx!( @@ -58,6 +62,7 @@ pub fn ManyRoots(cx: Scope) -> Element { // ANCHOR_END: manyroots } +#[component] pub fn Attributes(cx: Scope) -> Element { // ANCHOR: attributes cx.render(rsx!(img { @@ -68,6 +73,7 @@ pub fn Attributes(cx: Scope) -> Element { // ANCHOR_END: attributes } +#[component] pub fn VariableAttributes(cx: Scope) -> Element { // ANCHOR: variable_attributes let written_in_rust = true; @@ -80,6 +86,7 @@ pub fn VariableAttributes(cx: Scope) -> Element { // ANCHOR_END: variable_attributes } +#[component] pub fn CustomAttributes(cx: Scope) -> Element { // ANCHOR: custom_attributes cx.render(rsx!(div { @@ -88,6 +95,7 @@ pub fn CustomAttributes(cx: Scope) -> Element { // ANCHOR_END: custom_attributes } +#[component] pub fn Formatting(cx: Scope) -> Element { // ANCHOR: formatting let coordinates = (42, 0); @@ -112,6 +120,7 @@ pub fn Formatting(cx: Scope) -> Element { // ANCHOR_END: formatting } +#[component] pub fn Expression(cx: Scope) -> Element { // ANCHOR: expression let text = "Dioxus"; @@ -123,6 +132,7 @@ pub fn Expression(cx: Scope) -> Element { // ANCHOR_END: expression } +#[component] pub fn Loops(cx: Scope) -> Element { // ANCHOR: loops cx.render(rsx! { @@ -144,6 +154,7 @@ pub fn Loops(cx: Scope) -> Element { // ANCHOR_END: loops } +#[component] pub fn IfStatements(cx: Scope) -> Element { // ANCHOR: ifstatements cx.render(rsx! { diff --git a/src/doc_examples/server_basic.rs b/src/doc_examples/server_basic.rs index b7aed8688..0001152f8 100644 --- a/src/doc_examples/server_basic.rs +++ b/src/doc_examples/server_basic.rs @@ -1,12 +1,13 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_fullstack::prelude::*; fn main() { - LaunchBuilder::new(app).launch(); + LaunchBuilder::new(App).launch(); } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let mut count = use_state(cx, || 0); cx.render(rsx! { diff --git a/src/doc_examples/server_function.rs b/src/doc_examples/server_function.rs index a1403ed8a..c7a08c959 100644 --- a/src/doc_examples/server_function.rs +++ b/src/doc_examples/server_function.rs @@ -1,5 +1,3 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; use dioxus_fullstack::prelude::*; @@ -13,6 +11,7 @@ fn main() { config.launch(); } +#[component] fn App(cx: Scope) -> Element { let mut count = use_state(cx, || 0); diff --git a/src/doc_examples/server_function_extract.rs b/src/doc_examples/server_function_extract.rs index 9baabb370..d7ef927b2 100644 --- a/src/doc_examples/server_function_extract.rs +++ b/src/doc_examples/server_function_extract.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus_fullstack::prelude::*; // ANCHOR: server_function_extract diff --git a/src/doc_examples/server_function_middleware.rs b/src/doc_examples/server_function_middleware.rs index 021663c45..7bcd34d0b 100644 --- a/src/doc_examples/server_function_middleware.rs +++ b/src/doc_examples/server_function_middleware.rs @@ -1,4 +1,4 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus_fullstack::prelude::*; // ANCHOR: server_function_middleware From 7d872904edfff68daf444ce02902f42a189784f0 Mon Sep 17 00:00:00 2001 From: Leonard Date: Thu, 14 Sep 2023 14:16:31 +0200 Subject: [PATCH 3/3] Add `#[component]` to components that don't have it --- docs-src/0.4/en/reference/use_coroutine.md | 4 +++- examples/prerender.rs | 2 +- src/components/homepage/hero.rs | 2 ++ src/doc_examples/event_nested.rs | 2 +- src/doc_examples/event_prevent_default.rs | 2 +- src/doc_examples/hackernews_state.rs | 1 - src/doc_examples/hello_world.rs | 3 +-- src/doc_examples/hello_world_ssr.rs | 2 -- src/doc_examples/hooks_counter_two_state.rs | 2 +- src/doc_examples/hydration.rs | 9 +++++---- src/doc_examples/input_controlled.rs | 2 +- src/doc_examples/input_fileengine_async.rs | 2 +- src/doc_examples/readme_expanded.rs | 5 +++-- src/doc_examples/server_data_fetch.rs | 7 ++++--- src/doc_examples/server_data_prefetch.rs | 7 ++++--- src/doc_examples/spawn.rs | 5 ++++- src/doc_examples/use_coroutine.rs | 3 ++- 17 files changed, 34 insertions(+), 26 deletions(-) diff --git a/docs-src/0.4/en/reference/use_coroutine.md b/docs-src/0.4/en/reference/use_coroutine.md index 017d4a08a..c847af3d1 100644 --- a/docs-src/0.4/en/reference/use_coroutine.md +++ b/docs-src/0.4/en/reference/use_coroutine.md @@ -145,7 +145,8 @@ We can combine coroutines with [Fermi](https://docs.rs/fermi/latest/fermi/index. ```rust, no_run static USERNAME: Atom = Atom(|_| "default".to_string()); -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let atoms = use_atom_root(cx); use_coroutine(cx, |rx| sync_service(rx, atoms.clone())); @@ -155,6 +156,7 @@ fn app(cx: Scope) -> Element { }) } +#[component] fn Banner(cx: Scope) -> Element { let username = use_read(cx, &USERNAME); diff --git a/examples/prerender.rs b/examples/prerender.rs index 710d04560..4aeaf1cf8 100644 --- a/examples/prerender.rs +++ b/examples/prerender.rs @@ -5,7 +5,7 @@ //! cargo run --features ssr --example prerender //! ``` -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_docs_site::*; use dioxus_fullstack::{launch, prelude::*}; diff --git a/src/components/homepage/hero.rs b/src/components/homepage/hero.rs index ad5c5b8c1..3423f008e 100644 --- a/src/components/homepage/hero.rs +++ b/src/components/homepage/hero.rs @@ -59,6 +59,7 @@ pub fn Hero(cx: Scope) -> Element { static ADD_TO_CLIPBOARD: &str = r#"navigator.clipboard.writeText("cargo add dioxus")"#; +#[component] fn SaveClipboard(cx: Scope) -> Element { let saved = use_state(cx, || false); @@ -79,6 +80,7 @@ fn SaveClipboard(cx: Scope) -> Element { }) } +#[component] fn AnimatedIcon(cx: Scope) -> Element { let dark = include_str!("../../../public/static/multiplatform-dark.svg"); let light = include_str!("../../../public/static/multiplatform-light.svg"); diff --git a/src/doc_examples/event_nested.rs b/src/doc_examples/event_nested.rs index 4372869e3..9976777ae 100644 --- a/src/doc_examples/event_nested.rs +++ b/src/doc_examples/event_nested.rs @@ -1,10 +1,10 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; fn main() { dioxus_desktop::launch(App); } +#[component] fn App(cx: Scope) -> Element { // ANCHOR: rsx cx.render(rsx! { diff --git a/src/doc_examples/event_prevent_default.rs b/src/doc_examples/event_prevent_default.rs index 0a582417a..e32ec6260 100644 --- a/src/doc_examples/event_prevent_default.rs +++ b/src/doc_examples/event_prevent_default.rs @@ -1,6 +1,6 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: prevent_default cx.render(rsx! { diff --git a/src/doc_examples/hackernews_state.rs b/src/doc_examples/hackernews_state.rs index b713fa587..10c3a0cc7 100644 --- a/src/doc_examples/hackernews_state.rs +++ b/src/doc_examples/hackernews_state.rs @@ -1,4 +1,3 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; pub mod app_v1 { diff --git a/src/doc_examples/hello_world.rs b/src/doc_examples/hello_world.rs index 3819c8c08..dab5f6e07 100644 --- a/src/doc_examples/hello_world.rs +++ b/src/doc_examples/hello_world.rs @@ -1,7 +1,6 @@ -#![allow(non_snake_case)] - use dioxus::prelude::*; +#[component] pub fn HelloWorldCounter(cx: Scope) -> Element { cx.render(rsx! { div { diff --git a/src/doc_examples/hello_world_ssr.rs b/src/doc_examples/hello_world_ssr.rs index 0af689f49..fd49dc13c 100644 --- a/src/doc_examples/hello_world_ssr.rs +++ b/src/doc_examples/hello_world_ssr.rs @@ -1,9 +1,7 @@ #![allow(unused)] -#![allow(non_snake_case)] // ANCHOR: all // ANCHOR: main -#![allow(non_snake_case)] use axum::{response::Html, routing::get, Router}; // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types use dioxus::prelude::*; diff --git a/src/doc_examples/hooks_counter_two_state.rs b/src/doc_examples/hooks_counter_two_state.rs index e8b0dd531..3107ebd8f 100644 --- a/src/doc_examples/hooks_counter_two_state.rs +++ b/src/doc_examples/hooks_counter_two_state.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: use_state_calls let mut count_a = use_state(cx, || 0); diff --git a/src/doc_examples/hydration.rs b/src/doc_examples/hydration.rs index 31574edce..5e135dcf5 100644 --- a/src/doc_examples/hydration.rs +++ b/src/doc_examples/hydration.rs @@ -1,9 +1,9 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; fn main() { #[cfg(feature = "web")] - dioxus_web::launch_cfg(app, dioxus_web::Config::new().hydrate(true)); + dioxus_web::launch_cfg(App, dioxus_web::Config::new().hydrate(true)); #[cfg(feature = "ssr")] { use dioxus_fullstack::prelude::*; @@ -14,7 +14,7 @@ fn main() { axum::Server::bind(&addr) .serve( axum::Router::new() - .serve_dioxus_application("", ServeConfigBuilder::new(app, ())) + .serve_dioxus_application("", ServeConfigBuilder::new(App, ())) .into_make_service(), ) .await @@ -23,7 +23,8 @@ fn main() { } } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let mut count = use_state(cx, || 0); cx.render(rsx! { diff --git a/src/doc_examples/input_controlled.rs b/src/doc_examples/input_controlled.rs index 7b55e7050..3bb917ad3 100644 --- a/src/doc_examples/input_controlled.rs +++ b/src/doc_examples/input_controlled.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { let name = use_state(cx, || "bob".to_string()); diff --git a/src/doc_examples/input_fileengine_async.rs b/src/doc_examples/input_fileengine_async.rs index 3da36ed65..3168f3571 100644 --- a/src/doc_examples/input_fileengine_async.rs +++ b/src/doc_examples/input_fileengine_async.rs @@ -1,7 +1,7 @@ -#![allow(non_snake_case)] use dioxus::prelude::*; // ANCHOR: component +#[component] pub fn App(cx: Scope) -> Element { let files_uploaded: &UseRef> = use_ref(cx, Vec::new); diff --git a/src/doc_examples/readme_expanded.rs b/src/doc_examples/readme_expanded.rs index f06460e47..e150d8c8a 100644 --- a/src/doc_examples/readme_expanded.rs +++ b/src/doc_examples/readme_expanded.rs @@ -1,10 +1,11 @@ use dioxus::prelude::*; fn main() { - dioxus_desktop::launch(app); + dioxus_desktop::launch(App); } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let mut count = use_state(cx, || 0); cx.render( diff --git a/src/doc_examples/server_data_fetch.rs b/src/doc_examples/server_data_fetch.rs index 7c4725f2f..be0cd3eef 100644 --- a/src/doc_examples/server_data_fetch.rs +++ b/src/doc_examples/server_data_fetch.rs @@ -1,13 +1,14 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_fullstack::prelude::*; fn main() { - LaunchBuilder::new(app).launch(); + LaunchBuilder::new(App).launch(); } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let mut count = use_future(cx, (), |_| async { get_server_data().await }); cx.render(rsx! { diff --git a/src/doc_examples/server_data_prefetch.rs b/src/doc_examples/server_data_prefetch.rs index 5322230c3..e1bb6ea55 100644 --- a/src/doc_examples/server_data_prefetch.rs +++ b/src/doc_examples/server_data_prefetch.rs @@ -1,13 +1,14 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use dioxus_fullstack::prelude::*; fn main() { - LaunchBuilder::new(app).launch(); + LaunchBuilder::new(App).launch(); } -fn app(cx: Scope) -> Element { +#[component] +fn App(cx: Scope) -> Element { let mut count = use_server_future(cx, (), |_| async { get_server_data().await })?; cx.render(rsx! { diff --git a/src/doc_examples/spawn.rs b/src/doc_examples/spawn.rs index b164570d8..8f0f5cf3a 100644 --- a/src/doc_examples/spawn.rs +++ b/src/doc_examples/spawn.rs @@ -1,7 +1,8 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: spawn let logged_in = use_state(cx, || false); @@ -41,6 +42,7 @@ pub fn App(cx: Scope) -> Element { } #[cfg(feature = "doc_test")] +#[component] pub fn Tokio(cx: Scope) -> Element { let _ = || { // ANCHOR: tokio @@ -58,6 +60,7 @@ pub fn Tokio(cx: Scope) -> Element { cx.render(rsx!(())) } +#[component] pub fn ToOwnedMacro(cx: Scope) -> Element { let count = use_state(cx, || 0); let age = use_state(cx, || 0); diff --git a/src/doc_examples/use_coroutine.rs b/src/doc_examples/use_coroutine.rs index a9f0b2e76..9a662c34b 100644 --- a/src/doc_examples/use_coroutine.rs +++ b/src/doc_examples/use_coroutine.rs @@ -1,7 +1,8 @@ -#![allow(non_snake_case, unused)] +#![allow(unused)] use dioxus::prelude::*; use std::collections::HashMap; +#[component] pub fn App(cx: Scope) -> Element { // ANCHOR: use_coroutine // import futures::StreamExt to use the next() method