DioxusLabs · tigerros · Sep 14, 2023 · Sep 14, 2023 · Sep 14, 2023
diff --git 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#"<!DOCTYPE html>
@@ -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/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
@@ -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
@@ -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,14 +112,15 @@ enum Route {
     Index {},
 }
 
+#[component]
 fn App(cx: Scope) -> Element {
     render! {
         h1 { "App" }
         Router::<Route> {}
     }
 }
 
-#[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
@@ -119,37 +119,38 @@ 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)]
 struct TitleCardProps {
     title: String,
 }
 
+#[component]
 fn TitleCard(cx: Scope<TitleCardProps>) -> Element {
     cx.render(rsx!{
         h1 { "{cx.props.title}" }
     })
 }
 ```
 
-...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}" }
     })
 }
 ```
 
-> 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
@@ -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
@@ -15,12 +15,12 @@ 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}}
 ```
 
 ## 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
@@ -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
@@ -15,12 +15,12 @@ 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}}
 ```
 
 ## 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
@@ -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<String> }
+	NotFound { segments: Vec<String> },
 }
 ```
 
@@ -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<String>| 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<String> }
+	NotFound { segments: Vec<String> },
 }
 ```
 
@@ -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_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<String> = 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/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);
 
@@ -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/docs-src/0.4/en/router/lib.rs b/docs-src/0.4/en/router/lib.rs
diff --git 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/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::<Route> {} }
 }
 ```

diff --git 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/components.rs b/snippets/components.rs
@@ -1,13 +1,14 @@
 //! 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 {
     name: String,
     age: String,
 }
 
+#[component]
 fn Stateful(cx: Scope<PropBased>) -> Element {
     render!("Hello {cx.name}, you are {cx.age} years old!")
 }
diff --git a/snippets/fermi.rs b/snippets/fermi.rs
@@ -4,19 +4,22 @@
 static COUNT: fermi::Atom<i32> = |_| 0;
 
 // Read it anywhere
+#[component]
 fn Read(cx: Scope) -> Element {
     let count = fermi::use_read(cx, &|| COUNT);
 
     render!("Count: {count}")
 }
 
 // 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/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}");