Add system for creating component attributes + new #[component] attribute (#1448)

* Add `#[component]` attribute + system for creating component attributes + other stuff

* Delete inlineprops.rs

* Update inline_props.rs

* Cargo fmt

* Fix clippy warnings and paths in props/mods.rs

* Include where clause in `#[inline_props]` output

* Allow Clippy type complexity in `LinkProps`

* Allow the type complexity lint for the entire link.rs file

* Remove snake_case -> PascalCase converter, but rather enforce PascalCase

Also:
- Put the second function inside the main one instead of besides it.
- Simplify

* Simplify type check lints so they don't return false positives

They will not always work, but they won't return any false positives, like for aliases. This is likely going to be replaced by a more polished Clippy-backed linting system.

* Fix #583

* Cargo fmt

* Add docs for `deserialize()` and remove useless comment

* Add `#[component]` to prelude

* Merge branch 'master' of https://github.com/tigerros/dioxus

* #[inline_props] is no more. Except in the docs folder, but that's going to be removed

* Remove docs folder

* Remove docs from workspace

* Resolve `DeserializerOutput` conversation

examples/crm.rs

@@ -1,5 +1,4 @@
 //! Tiny CRM: A port of the Yew CRM example to Dioxus.
-#![allow(non_snake_case)]
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 
@@ -27,6 +26,7 @@ pub struct Client {
 
 type ClientContext = Vec<Client>;
 
+#[component]
 fn App(cx: Scope) -> Element {
     use_shared_state_provider::<ClientContext>(cx, Default::default);
 
@@ -50,7 +50,7 @@ fn App(cx: Scope) -> Element {
     }
 }
 
-#[inline_props]
+#[component]
 fn ClientList(cx: Scope) -> Element {
     let clients = use_shared_state::<ClientContext>(cx).unwrap();
 
@@ -80,7 +80,7 @@ fn ClientList(cx: Scope) -> Element {
     })
 }
 
-#[inline_props]
+#[component]
 fn ClientAdd(cx: Scope) -> Element {
     let clients = use_shared_state::<ClientContext>(cx).unwrap();
     let first_name = use_state(cx, String::new);
@@ -173,7 +173,7 @@ fn ClientAdd(cx: Scope) -> Element {
     })
 }
 
-#[inline_props]
+#[component]
 fn Settings(cx: Scope) -> Element {
     let clients = use_shared_state::<ClientContext>(cx).unwrap();
 

examples/dog_app.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 use std::collections::HashMap;
 
 fn main() {
-    dioxus_desktop::launch(|cx| render!(app_root {}));
+    dioxus_desktop::launch(|cx| render!(AppRoot {}));
 }
 
 #[derive(Debug, Clone, PartialEq, serde::Deserialize)]
@@ -10,7 +10,8 @@ struct ListBreeds {
     message: HashMap<String, Vec<String>>,
 }
 
-fn app_root(cx: Scope<'_>) -> Element {
+#[component]
+fn AppRoot(cx: Scope<'_>) -> Element {
     let breed = use_state(cx, || "deerhound".to_string());
 
     let breeds = use_future!(cx, || async move {
@@ -36,7 +37,7 @@ fn app_root(cx: Scope<'_>) -> Element {
                             }
                         }
                     }
-                    div { flex: "50%", breed_pic { breed: breed.to_string() } }
+                    div { flex: "50%", BreedPic { breed: breed.to_string() } }
                 }
             }
         }),
@@ -49,8 +50,8 @@ struct DogApi {
     message: String,
 }
 
-#[inline_props]
-fn breed_pic(cx: Scope, breed: String) -> Element {
+#[component]
+fn BreedPic(cx: Scope, breed: String) -> Element {
     let fut = use_future!(cx, |breed| async move {
         reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
             .await

examples/error_handle.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 val = use_state(cx, || "0.0001");
 
     let num = match val.parse::<f32>() {
@@ -19,13 +20,13 @@ fn app(cx: Scope) -> Element {
             "Set an invalid number"
         }
         (0..5).map(|i| rsx! {
-            demo_c { x: i }
+            DemoC { x: i }
         })
     })
 }
 
-#[inline_props]
-fn demo_c(cx: Scope, x: i32) -> Element {
+#[component]
+fn DemoC(cx: Scope, x: i32) -> Element {
     cx.render(rsx! {
         h1 {
             "asdasdasdasd {x}"

examples/flat_router.rs

@@ -1,5 +1,3 @@
-#![allow(non_snake_case)]
-
 use dioxus::prelude::*;
 use dioxus_desktop::{tao::dpi::LogicalSize, Config, WindowBuilder};
 use dioxus_router::prelude::*;
@@ -13,10 +11,11 @@ fn main() {
             .with_resizable(false),
     );
 
-    dioxus_desktop::launch_cfg(app, cfg)
+    dioxus_desktop::launch_cfg(App, cfg)
 }
 
-fn app(cx: Scope) -> Element {
+#[component]
+fn App(cx: Scope) -> Element {
     render! {
         Router::<Route> {}
     }
@@ -36,7 +35,7 @@ enum Route {
         Settings {},
 }
 
-#[inline_props]
+#[component]
 fn Footer(cx: Scope) -> Element {
     render! {
         div {
@@ -58,22 +57,22 @@ fn Footer(cx: Scope) -> Element {
     }
 }
 
-#[inline_props]
+#[component]
 fn Home(cx: Scope) -> Element {
     render!("Home")
 }
 
-#[inline_props]
+#[component]
 fn Games(cx: Scope) -> Element {
     render!("Games")
 }
 
-#[inline_props]
+#[component]
 fn Play(cx: Scope) -> Element {
     render!("Play")
 }
 
-#[inline_props]
+#[component]
 fn Settings(cx: Scope) -> Element {
     render!("Settings")
 }

examples/inlineprops.rs

@@ -1,33 +1,35 @@
-//! Run with `cargo-expand` to see what each one expands to
-#![allow(non_snake_case)]
-
+//! Run with `cargo-expand` to see what each one expands to.
+//! This file is named `inlineprops.rs`, because there used to be a `#[inline_props]` macro to
+//! do this. However, it's now deprecated (and will likely be removed in a future major version),
+//! so please use `#[component]` instead!
 use dioxus::prelude::*;
 
-#[inline_props]
+#[component]
 fn Thing1<T>(cx: Scope, _a: T) -> Element {
     cx.render(rsx! { "" })
 }
 
-#[inline_props]
+#[component]
 fn Thing2(cx: Scope, _a: u32) -> Element<'a> {
     cx.render(rsx! { "" })
 }
 
-#[inline_props]
+#[component]
 fn Thing3<'a, T>(cx: Scope<'a>, _a: &'a T) -> Element<'a> {
     cx.render(rsx! { "" })
 }
 
-#[inline_props]
+#[component]
 fn Thing4<'a>(cx: Scope<'a>, _a: &'a u32) -> Element<'a> {
     cx.render(rsx! { "" })
 }
 
 fn main() {
-    dioxus_desktop::launch(app);
+    dioxus_desktop::launch(App);
 }
 
-fn app(cx: Scope) -> Element {
+#[component]
+fn App(cx: Scope) -> Element {
     let state = use_state(cx, || 1);
 
     cx.render(rsx! {

examples/link.rs

@@ -1,13 +1,12 @@
-#![allow(non_snake_case)]
-
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 
 fn main() {
-    dioxus_desktop::launch(app);
+    dioxus_desktop::launch(App);
 }
 
-fn app(cx: Scope) -> Element {
+#[component]
+fn App(cx: Scope) -> Element {
     cx.render(rsx! (
         div {
             p {
@@ -38,7 +37,7 @@ enum Route {
         Settings {},
 }
 
-#[inline_props]
+#[component]
 fn Header(cx: Scope) -> Element {
     render! {
         h1 { "Your app here" }
@@ -50,12 +49,12 @@ fn Header(cx: Scope) -> Element {
     }
 }
 
-#[inline_props]
+#[component]
 fn Home(cx: Scope) -> Element {
     render!(h1 { "Home" })
 }
 
-#[inline_props]
+#[component]
 fn Settings(cx: Scope) -> Element {
     render!(h1 { "Settings" })
 }

examples/query_segments_demo/src/main.rs

@@ -1,4 +1,4 @@
-#![allow(non_snake_case, unused)]
+#![allow(unused)]
 //! Example: Url query segments usage
 //! ------------------------------------
 //!
@@ -56,7 +56,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:"}
@@ -64,6 +64,7 @@ fn BlogPost(cx: Scope, query_params: BlogQuerySegments) -> Element {
     }
 }
 
+#[component]
 fn App(cx: Scope) -> Element {
     render! { Router::<Route>{} }
 }

examples/router.rs

@@ -1,5 +1,3 @@
-#![allow(non_snake_case)]
-
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 
@@ -37,12 +35,14 @@ enum Route {
 }
 // ANCHOR_END: router
 
+#[component]
 fn App(cx: Scope) -> Element {
     render! {
         Router::<Route> {}
     }
 }
 
+#[component]
 fn NavBar(cx: Scope) -> Element {
     render! {
         nav {
@@ -55,12 +55,14 @@ fn NavBar(cx: Scope) -> Element {
     }
 }
 
+#[component]
 fn Home(cx: Scope) -> Element {
     render! {
         h1 { "Welcome to the Dioxus Blog!" }
     }
 }
 
+#[component]
 fn Blog(cx: Scope) -> Element {
     render! {
         h1 { "Blog" }
@@ -68,6 +70,7 @@ fn Blog(cx: Scope) -> Element {
     }
 }
 
+#[component]
 fn BlogList(cx: Scope) -> Element {
     render! {
         h2 { "Choose a post" }
@@ -88,14 +91,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<String>) -> Element {
     render! {
         h1 { "Page not found" }

examples/rsx_usage.rs

@@ -1,4 +1,3 @@
-#![allow(non_snake_case)]
 //! A tour of the rsx! macro
 //! ------------------------
 //!
@@ -40,7 +39,7 @@
 //! - Allow top-level fragments
 
 fn main() {
-    dioxus_desktop::launch(app);
+    dioxus_desktop::launch(App);
 }
 
 use core::{fmt, str::FromStr};
@@ -49,7 +48,8 @@ use std::fmt::Display;
 use baller::Baller;
 use dioxus::prelude::*;
 
-fn app(cx: Scope) -> Element {
+#[component]
+fn App(cx: Scope) -> Element {
     let formatting = "formatting!";
     let formatting_tuple = ("a", "b");
     let lazy_fmt = format_args!("lazily formatted text");
@@ -217,12 +217,16 @@ fn format_dollars(dollars: u32, cents: u32) -> String {
     format!("${dollars}.{cents:02}")
 }
 
-fn helper<'a>(cx: &'a ScopeState, text: &str) -> Element<'a> {
+fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element<'a> {
     cx.render(rsx! {
         p { "{text}" }
     })
 }
 
+// no_case_check disables PascalCase checking if you *really* want a snake_case component.
+// This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
+// something like Clippy.
+#[component(no_case_check)]
 fn lowercase_helper(cx: Scope) -> Element {
     cx.render(rsx! {
         "asd"
@@ -234,12 +238,16 @@ mod baller {
     #[derive(Props, PartialEq, Eq)]
     pub struct BallerProps {}
 
-    #[allow(non_snake_case)]
+    #[component]
     /// This component totally balls
-    pub fn Baller(_: Scope<BallerProps>) -> Element {
+    pub fn Baller(_cx: Scope<BallerProps>) -> Element {
         todo!()
     }
 
+    // no_case_check disables PascalCase checking if you *really* want a snake_case component.
+    // This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
+    // something like Clippy.
+    #[component(no_case_check)]
     pub fn lowercase_component(cx: Scope) -> Element {
         cx.render(rsx! { "look ma, no uppercase" })
     }
@@ -253,7 +261,7 @@ pub struct TallerProps<'a> {
 }
 
 /// Documention for this component is visible within the rsx macro
-#[allow(non_snake_case)]
+#[component]
 pub fn Taller<'a>(cx: Scope<'a, TallerProps<'a>>) -> Element {
     cx.render(rsx! {
         &cx.props.children
@@ -275,15 +283,14 @@ where
     todo!()
 }
 
-#[inline_props]
+#[component]
 fn WithInline<'a>(cx: Scope<'a>, text: &'a str) -> Element {
     cx.render(rsx! {
         p { "{text}" }
     })
 }
 
-// generic component with inline_props too
-#[inline_props]
+#[component]
 fn Label<T>(cx: Scope, text: T) -> Element
 where
     T: Display,

examples/shared_state.rs

@@ -1,5 +1,3 @@
-#![allow(non_snake_case)]
-
 use std::collections::HashMap;
 
 use dioxus::prelude::*;
@@ -27,6 +25,7 @@ impl CoolData {
     }
 }
 
+#[component]
 #[rustfmt::skip]
 pub fn App(cx: Scope) -> Element {
     use_shared_state_provider(cx, || CoolData::new(HashMap::from([
@@ -50,7 +49,7 @@ pub fn App(cx: Scope) -> Element {
     )
 }
 
-#[inline_props]
+#[component]
 fn DataEditor(cx: Scope, id: usize) -> Element {
     let cool_data = use_shared_state::<CoolData>(cx).unwrap().read();
 
@@ -61,7 +60,7 @@ fn DataEditor(cx: Scope, id: usize) -> Element {
     })
 }
 
-#[inline_props]
+#[component]
 fn DataView(cx: Scope, id: usize) -> Element {
     let cool_data = use_shared_state::<CoolData>(cx).unwrap();
 

examples/simple_desktop.rs

@@ -9,10 +9,11 @@ fn main() {
         .with_module_level("dioxus", log::LevelFilter::Trace)
         .init()
         .unwrap();
-    dioxus_desktop::launch(app);
+    dioxus_desktop::launch(App);
 }
 
-fn app(cx: Scope) -> Element {
+#[component]
+fn App(cx: Scope) -> Element {
     render! {
         Router::<Route> {}
     }
@@ -36,7 +37,7 @@ enum Route {
         Oranges {},
 }
 
-#[inline_props]
+#[component]
 fn NavBar(cx: Scope) -> Element {
     render! {
         h1 { "Your app here" }
@@ -51,19 +52,19 @@ fn NavBar(cx: Scope) -> Element {
     }
 }
 
-#[inline_props]
+#[component]
 fn Home(cx: Scope) -> Element {
     log::debug!("rendering home {:?}", cx.scope_id());
     render! { h1 { "Home" } }
 }
 
-#[inline_props]
+#[component]
 fn BlogList(cx: Scope) -> Element {
     log::debug!("rendering blog list {:?}", cx.scope_id());
     render! { div { "Blog List" } }
 }
 
-#[inline_props]
+#[component]
 fn BlogPost(cx: Scope, post: String) -> Element {
     log::debug!("rendering blog post {}", post);
 
@@ -75,7 +76,7 @@ fn BlogPost(cx: Scope, post: String) -> Element {
     }
 }
 
-#[inline_props]
+#[component]
 fn Oranges(cx: Scope) -> Element {
     render!("Oranges are not apples!")
 }

examples/simple_router.rs

@@ -12,12 +12,12 @@ enum Route {
     Blog { id: String },
 }
 
-#[inline_props]
+#[component]
 fn Homepage(cx: Scope) -> Element {
     render! { h1 { "Welcome home" } }
 }
 
-#[inline_props]
+#[component]
 fn Blog(cx: Scope, id: String) -> Element {
     render! {
         h1 { "How to make: " }
@@ -25,7 +25,7 @@ fn Blog(cx: Scope, id: String) -> Element {
     }
 }
 
-#[inline_props]
+#[component]
 fn Nav(cx: Scope) -> Element {
     render! {
         nav {