Merge pull request #385 from MuhannadAlrusayni/master

feat: Support generic components in `rsx!()` macro

examples/rsx_usage.rs

@@ -46,6 +46,9 @@ fn main() {
 /// This type alias specifies the type for you so you don't need to write "None as Option<()>"
 const NONE_ELEMENT: Option<()> = None;
 
+use core::{fmt, str::FromStr};
+use std::fmt::Display;
+
 use baller::Baller;
 use dioxus::prelude::*;
 
@@ -187,6 +190,15 @@ fn app(cx: Scope) -> Element {
                 text: "using functionc all syntax"
             )
 
+            // Components can be geneirc too
+            // This component takes i32 type to give you typed input
+            TypedInput::<TypedInputProps<i32>> {}
+            // Type inference can be used too
+            TypedInput { initial: 10.0 }
+            // geneircs with the `inline_props` macro
+            label(text: "hello geneirc world!")
+            label(text: 99.9)
+
             // helper functions
             // Single values must be wrapped in braces or `Some` to satisfy `IntoIterator`
             [helper(&cx, "hello world!")]
@@ -227,9 +239,35 @@ pub fn Taller<'a>(cx: Scope<'a, TallerProps<'a>>) -> Element {
     })
 }
 
+#[derive(Props, PartialEq)]
+pub struct TypedInputProps<T> {
+    #[props(optional, default)]
+    initial: Option<T>,
+}
+
+#[allow(non_snake_case)]
+pub fn TypedInput<T>(_: Scope<TypedInputProps<T>>) -> Element
+where
+    T: FromStr + fmt::Display,
+    <T as FromStr>::Err: std::fmt::Display,
+{
+    todo!()
+}
+
 #[inline_props]
 fn with_inline<'a>(cx: Scope<'a>, text: &'a str) -> Element {
     cx.render(rsx! {
         p { "{text}" }
     })
 }
+
+// generic component with inline_props too
+#[inline_props]
+fn label<T>(cx: Scope, text: T) -> Element
+where
+    T: Display,
+{
+    cx.render(rsx! {
+        p { "{text}" }
+    })
+}

packages/core-macro/src/inlineprops.rs

@@ -17,6 +17,7 @@ pub struct InlinePropsBody {
     pub inputs: Punctuated<FnArg, Token![,]>,
     // pub fields: FieldsNamed,
     pub output: ReturnType,
+    pub where_clause: Option<WhereClause>,
     pub block: Box<Block>,
 }
 
@@ -28,7 +29,7 @@ impl Parse for InlinePropsBody {
 
         let fn_token = input.parse()?;
         let ident = input.parse()?;
-        let generics = input.parse()?;
+        let generics: Generics = input.parse()?;
 
         let content;
         let paren_token = syn::parenthesized!(content in input);
@@ -47,6 +48,11 @@ impl Parse for InlinePropsBody {
 
         let output = input.parse()?;
 
+        let where_clause = input
+            .peek(syn::token::Where)
+            .then(|| input.parse())
+            .transpose()?;
+
         let block = input.parse()?;
 
         Ok(Self {
@@ -57,6 +63,7 @@ impl Parse for InlinePropsBody {
             paren_token,
             inputs,
             output,
+            where_clause,
             block,
             cx_token,
             attrs,
@@ -73,6 +80,7 @@ impl ToTokens for InlinePropsBody {
             generics,
             inputs,
             output,
+            where_clause,
             block,
             cx_token,
             attrs,
@@ -136,12 +144,16 @@ impl ToTokens for InlinePropsBody {
         out_tokens.append_all(quote! {
             #modifiers
             #[allow(non_camel_case_types)]
-            #vis struct #struct_name #struct_generics {
+            #vis struct #struct_name #struct_generics
+            #where_clause
+            {
                 #(#fields),*
             }
 
             #(#attrs)*
-            #vis fn #ident #fn_generics (#cx_token: Scope<#scope_lifetime #struct_name #generics>) #output {
+            #vis fn #ident #fn_generics (#cx_token: Scope<#scope_lifetime #struct_name #generics>) #output
+            #where_clause
+            {
                 let #struct_name { #(#field_names),* } = &cx.props;
                 #block
             }

packages/core-macro/src/lib.rs

@@ -29,152 +29,7 @@ pub fn derive_typed_builder(input: proc_macro::TokenStream) -> proc_macro::Token
 ///
 /// ## Complete Reference Guide:
 /// ```
-/// const Example: Component = |cx| {
+#[doc = include_str!("../../../examples/rsx_usage.rs")]
-///     let formatting = "formatting!";
-///     let formatting_tuple = ("a", "b");
-///     let lazy_fmt = format_args!("lazily formatted text");
-///     cx.render(rsx! {
-///         div {
-///             // Elements
-///             div {}
-///             h1 {"Some text"}
-///             h1 {"Some text with {formatting}"}
-///             h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
-///             h2 {
-///                 "Multiple"
-///                 "Text"
-///                 "Blocks"
-///                 "Use comments as separators in html"
-///             }
-///             div {
-///                 h1 {"multiple"}
-///                 h2 {"nested"}
-///                 h3 {"elements"}
-///             }
-///             div {
-///                 class: "my special div"
-///                 h1 {"Headers and attributes!"}
-///             }
-///             div {
-///                 // pass simple rust expressions in
-///                 class: lazy_fmt,
-///                 id: format_args!("attributes can be passed lazily with std::fmt::Arguments"),
-///                 div {
-///                     class: {
-///                         const WORD: &str = "expressions";
-///                         format_args!("Arguments can be passed in through curly braces for complex {}", WORD)
-///                     }
-///                 }
-///             }
-///
-///             // Expressions can be used in element position too:
-///             {rsx!(p { "More templating!" })}
-///             {html!(<p>"Even HTML templating!!"</p>)}
-///
-///             // Iterators
-///             {(0..10).map(|i| rsx!(li { "{i}" }))}
-///             {{
-///                 let data = std::collections::HashMap::<&'static str, &'static str>::new();
-///                 // Iterators *should* have keys when you can provide them.
-///                 // Keys make your app run faster. Make sure your keys are stable, unique, and predictable.
-///                 // Using an "ID" associated with your data is a good idea.
-///                 data.into_iter().map(|(k, v)| rsx!(li { key: "{k}" "{v}" }))
-///             }}
-///
-///             // Matching
-///             {match true {
-///                 true => rsx!(h1 {"Top text"}),
-///                 false => rsx!(h1 {"Bottom text"})
-///             }}
-///
-///             // Conditional rendering
-///             // Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
-///             // You can convert a bool condition to rsx! with .then and .or
-///             {true.then(|| rsx!(div {}))}
-///
-///             // True conditions
-///             {if true {
-///                 rsx!(h1 {"Top text"})
-///             } else {
-///                 rsx!(h1 {"Bottom text"})
-///             }}
-///
-///             // returning "None" is a bit noisy... but rare in practice
-///             {None as Option<()>}
-///
-///             // Use the Dioxus type-alias for less noise
-///             {NONE_ELEMENT}
-///
-///             // can also just use empty fragments
-///             Fragment {}
-///
-///             // Fragments let you insert groups of nodes without a parent.
-///             // This lets you make components that insert elements as siblings without a container.
-///             div {"A"}
-///             Fragment {
-///                 div {"B"}
-///                 div {"C"}
-///                 Fragment {
-///                     "D"
-///                     Fragment {
-///                         "heavily nested fragments is an antipattern"
-///                         "they cause Dioxus to do unnecessary work"
-///                         "don't use them carelessly if you can help it"
-///                     }
-///                 }
-///             }
-///
-///             // Components
-///             // Can accept any paths
-///             // Notice how you still get syntax highlighting and IDE support :)
-///             Baller {}
-///             baller::Baller { }
-///             crate::baller::Baller {}
-///
-///             // Can take properties
-///             Taller { a: "asd" }
-///
-///             // Can take optional properties
-///             Taller { a: "asd" }
-///
-///             // Can pass in props directly as an expression
-///             {{
-///                 let props = TallerProps {a: "hello"};
-///                 rsx!(Taller { ..props })
-///             }}
-///
-///             // Spreading can also be overridden manually
-///             Taller {
-///                 ..TallerProps { a: "ballin!" }
-///                 a: "not ballin!"
-///             }
-///
-///             // Can take children too!
-///             Taller { a: "asd", div {"hello world!"} }
-///         }
-///     })
-/// };
-///
-/// mod baller {
-///     use super::*;
-///     pub struct BallerProps {}
-///
-///     /// This component totally balls
-///     pub fn Baller(cx: Scope) -> DomTree {
-///         todo!()
-///     }
-/// }
-///
-/// #[derive(Debug, PartialEq, Props)]
-/// pub struct TallerProps {
-///     a: &'static str,
-/// }
-///
-/// /// This component is taller than most :)
-/// pub fn Taller(cx: Scope<TallerProps>) -> DomTree {
-///     let b = true;
-///     todo!()
-/// }
 /// ```
 #[proc_macro_error::proc_macro_error]
 #[proc_macro]

packages/core-macro/src/props/mod.rs

@@ -653,7 +653,9 @@ Finally, call `.build()` to create the instance of `{name}`.
                     }
                 }
 
-                impl #impl_generics dioxus::prelude::Properties for #name #ty_generics{
+                impl #impl_generics dioxus::prelude::Properties for #name #ty_generics
+                #b_generics_where_extras_predicates
+                {
                     type Builder = #builder_name #generics_with_empty;
                     const IS_STATIC: bool = #is_static;
                     fn builder() -> Self::Builder {

packages/core-macro/src/rsx/component.rs

@@ -18,19 +18,56 @@ use quote::{quote, ToTokens, TokenStreamExt};
 use syn::{
     ext::IdentExt,
     parse::{Parse, ParseBuffer, ParseStream},
-    token, Expr, Ident, LitStr, Result, Token,
+    token, AngleBracketedGenericArguments, Expr, Ident, LitStr, PathArguments, Result, Token,
 };
 
 pub struct Component {
     pub name: syn::Path,
+    pub prop_gen_args: Option<AngleBracketedGenericArguments>,
     pub body: Vec<ComponentField>,
     pub children: Vec<BodyNode>,
     pub manual_props: Option<Expr>,
 }
 
+impl Component {
+    pub fn validate_component_path(path: &syn::Path) -> Result<()> {
+        // ensure path segments doesn't have PathArguments, only the last
+        // segment is allowed to have one.
+        if path
+            .segments
+            .iter()
+            .take(path.segments.len() - 1)
+            .any(|seg| seg.arguments != PathArguments::None)
+        {
+            component_path_cannot_have_arguments!(path);
+        }
+
+        // ensure last segment only have value of None or AngleBracketed
+        if !matches!(
+            path.segments.last().unwrap().arguments,
+            PathArguments::None | PathArguments::AngleBracketed(_)
+        ) {
+            invalid_component_path!(path);
+        }
+
+        Ok(())
+    }
+}
+
 impl Parse for Component {
     fn parse(stream: ParseStream) -> Result<Self> {
-        let name = syn::Path::parse_mod_style(stream)?;
+        let mut name = stream.parse::<syn::Path>()?;
+        Component::validate_component_path(&name)?;
+
+        // extract the path arguments from the path into prop_gen_args
+        let prop_gen_args = name.segments.last_mut().and_then(|seg| {
+            if let PathArguments::AngleBracketed(args) = seg.arguments.clone() {
+                seg.arguments = PathArguments::None;
+                Some(args)
+            } else {
+                None
+            }
+        });
 
         let content: ParseBuffer;
 
@@ -64,6 +101,7 @@ impl Parse for Component {
 
         Ok(Self {
             name,
+            prop_gen_args,
             body,
             children,
             manual_props,
@@ -74,6 +112,7 @@ impl Parse for Component {
 impl ToTokens for Component {
     fn to_tokens(&self, tokens: &mut TokenStream2) {
         let name = &self.name;
+        let prop_gen_args = &self.prop_gen_args;
 
         let mut has_key = None;
 
@@ -101,7 +140,10 @@ impl ToTokens for Component {
                 }}
             }
             None => {
-                let mut toks = quote! { fc_to_builder(#name) };
+                let mut toks = match prop_gen_args {
+                    Some(gen_args) => quote! { fc_to_builder #gen_args(#name) },
+                    None => quote! { fc_to_builder(#name) },
+                };
                 for field in &self.body {
                     match field.name.to_string().as_str() {
                         "key" => {

packages/core-macro/src/rsx/errors.rs

@@ -13,3 +13,19 @@ macro_rules! attr_after_element {
         )
     };
 }
+
+macro_rules! component_path_cannot_have_arguments {
+    ($span:expr) => {
+        proc_macro_error::abort!(
+            $span,
+            "expected a path without arguments";
+            help = "try remove the path arguments"
+        )
+    };
+}
+
+macro_rules! invalid_component_path {
+    ($span:expr) => {
+        proc_macro_error::abort!($span, "Invalid component path syntax")
+    };
+}

packages/core-macro/src/rsx/node.rs

@@ -4,7 +4,7 @@ use proc_macro2::TokenStream as TokenStream2;
 use quote::{quote, ToTokens, TokenStreamExt};
 use syn::{
     parse::{Parse, ParseStream},
-    token, Expr, LitStr, Result, Token,
+    token, Expr, LitStr, Result,
 };
 
 /*
@@ -28,39 +28,49 @@ impl Parse for BodyNode {
             return Ok(BodyNode::Text(stream.parse()?));
         }
 
-        // div {} -> el
+        let body_stream = stream.fork();
-        // Div {} -> comp
+        if let Ok(path) = body_stream.parse::<syn::Path>() {
-        if stream.peek(syn::Ident) && stream.peek2(token::Brace) {
+            // this is an Element if path match of:
-            if stream
+            // - one ident
-                .fork()
+            // - followed by `{`
-                .parse::<Ident>()?
+            // - 1st char is lowercase
-                .to_string()
+            //
-                .chars()
+            // example:
-                .next()
+            // div {}
-                .unwrap()
+            if let Some(ident) = path.get_ident() {
-                .is_ascii_uppercase()
+                if body_stream.peek(token::Brace)
-            {
+                    && ident
-                return Ok(BodyNode::Component(stream.parse()?));
+                        .to_string()
-            } else {
+                        .chars()
-                return Ok(BodyNode::Element(stream.parse::<Element>()?));
+                        .next()
+                        .unwrap()
+                        .is_ascii_lowercase()
+                {
+                    return Ok(BodyNode::Element(stream.parse::<Element>()?));
+                }
             }
-        }
 
-        // component() -> comp
+            // Otherwise this should be Component, allowed syntax:
-        // ::component {} -> comp
+            // - syn::Path
-        // ::component () -> comp
+            // - PathArguments can only apper in last segment
-        if (stream.peek(syn::Ident) && stream.peek2(token::Paren))
+            // - followed by `{` or `(`, note `(` cannot be used with one ident
-            || (stream.peek(Token![::]))
+            //
-            || (stream.peek(Token![:]) && stream.peek2(Token![:]))
+            // example
-        {
+            // Div {}
-            return Ok(BodyNode::Component(stream.parse::<Component>()?));
+            // Div ()
-        }
+            // ::Div {}
+            // crate::Div {}
+            // component()
+            // ::component {}
+            // ::component ()
+            // crate::component{}
+            // crate::component()
+            // Input::<InputProps<'_, i32> {}
+            // crate::Input::<InputProps<'_, i32> {}
+            if body_stream.peek(token::Brace) || body_stream.peek(token::Paren) {
+                Component::validate_component_path(&path)?;
 
-        // crate::component{} -> comp
+                return Ok(BodyNode::Component(stream.parse()?));
-        // crate::component() -> comp
-        if let Ok(pat) = stream.fork().parse::<syn::Path>() {
-            if pat.segments.len() > 1 {
-                return Ok(BodyNode::Component(stream.parse::<Component>()?));
             }
         }