tide-jsx

git clone https://pyrossh.dev/repos/tide-jsx.git

Tide + JSX

005fdc1f — Gal Schlezinger

Support dashes in html tags attributes (#7)

Files changed (6) hide show

render/src/lib.rs +1 -1
render_macros/src/element_attribute.rs +54 -6
render_macros/src/element_attributes.rs +29 -9
render_macros/src/lib.rs +42 -5
render_macros/src/tags.rs +17 -6
render_tests/src/lib.rs +9 -1

render/src/lib.rs CHANGED Viewed

@@ -1,5 +1,5 @@
 //! > 🔏 A safe and simple template engine with the ergonomics of JSX
-//!
+//!
 //! `render` itself is a combination of traits, structs and macros that together unify and
 //! boost the experience of composing tree-shaped data structures. This works best with HTML and
 //! XML rendering, but can work with other usages as well, like ReasonML's [`Pastel`](https://reason-native.com/docs/pastel/) library for terminal colors.

render_macros/src/element_attribute.rs CHANGED Viewed

@@ -1,30 +1,77 @@
 use quote::quote;
 use std::hash::{Hash, Hasher};
 use syn::parse::{Parse, ParseStream, Result};
+use syn::spanned::Spanned;
+pub type AttributeKey = syn::punctuated::Punctuated<syn::Ident, syn::Token![-]>;
 pub enum ElementAttribute {
-    Punned(syn::Ident),
+    Punned(AttributeKey),
-    WithValue(syn::Ident, syn::Block),
+    WithValue(AttributeKey, syn::Block),
 }
 impl ElementAttribute {
-    pub fn ident(&self) -> &syn::Ident {
+    pub fn ident(&self) -> &AttributeKey {
         match self {
             Self::Punned(ident) | Self::WithValue(ident, _) => ident,
         }
     }
+    pub fn idents(&self) -> Vec<&syn::Ident> {
+        self.ident().iter().collect::<Vec<_>>()
+    }
     pub fn value_tokens(&self) -> proc_macro2::TokenStream {
         match self {
             Self::WithValue(_, value) => quote!(#value),
             Self::Punned(ident) => quote!(#ident),
         }
     }
+    pub fn validate(self, is_custom_element: bool) -> Result<Self> {
+        if is_custom_element {
+            self.validate_for_custom_element()
+        } else {
+            self.validate_for_simple_element()
+        }
+    }
+    pub fn validate_for_custom_element(self) -> Result<Self> {
+        if self.idents().len() < 2 {
+            Ok(self)
+        } else {
+            let alternative_name = self
+                .idents()
+                .iter()
+                .map(|x| x.to_string())
+                .collect::<Vec<_>>()
+                .join("_");
+            let error_message = format!(
+                "Can't use dash-delimited values on custom components. Did you mean `{}`?",
+                alternative_name
+            );
+            Err(syn::Error::new(self.ident().span(), error_message))
+        }
+    }
+    pub fn validate_for_simple_element(self) -> Result<Self> {
+        match (&self, self.idents().len()) {
+            (Self::Punned(ref key), len) if len > 1 => {
+                let error_message = "Can't use punning with dash-delimited values";
+                Err(syn::Error::new(key.span(), error_message))
+            }
+            _ => Ok(self),
+        }
+    }
 }
 impl PartialEq for ElementAttribute {
     fn eq(&self, other: &Self) -> bool {
+        let self_idents: Vec<_> = self.ident().iter().collect();
+        let other_idents: Vec<_> = other.ident().iter().collect();
-        self.ident() == other.ident()
+        self_idents == other_idents
     }
 }
@@ -32,13 +79,14 @@ impl Eq for ElementAttribute {}
 impl Hash for ElementAttribute {
     fn hash<H: Hasher>(&self, state: &mut H) {
+        let ident = self.idents();
-        Hash::hash(self.ident(), state)
+        Hash::hash(&ident, state)
     }
 }
 impl Parse for ElementAttribute {
     fn parse(input: ParseStream) -> Result<Self> {
-        let name = input.parse::<syn::Ident>()?;
+        let name = AttributeKey::parse_separated_nonempty(input)?;
         let not_punned = input.peek(syn::Token![=]);
         if !not_punned {

render_macros/src/element_attributes.rs CHANGED Viewed

@@ -3,9 +3,11 @@ use crate::element_attribute::ElementAttribute;
 use quote::{quote, ToTokens};
 use std::collections::HashSet;
 use syn::parse::{Parse, ParseStream, Result};
+use syn::spanned::Spanned;
 pub type Attributes = HashSet<ElementAttribute>;
+#[derive(Default)]
 pub struct ElementAttributes {
     pub attributes: Attributes,
 }
@@ -30,6 +32,24 @@ impl ElementAttributes {
             attributes: &self.attributes,
         }
     }
+    pub fn parse(input: ParseStream, is_custom_element: bool) -> Result<Self> {
+        let mut parsed_self = input.parse::<Self>()?;
+        let new_attributes: Attributes = parsed_self
+            .attributes
+            .drain()
+            .filter_map(|attribute| match attribute.validate(is_custom_element) {
+                Ok(x) => Some(x),
+                Err(err) => {
+                    err.span().unwrap().error(err.to_string()).emit();
+                    None
+                }
+            })
+            .collect();
+        Ok(ElementAttributes::new(new_attributes))
+    }
 }
 impl Parse for ElementAttributes {
@@ -37,17 +57,13 @@ impl Parse for ElementAttributes {
         let mut attributes: HashSet<ElementAttribute> = HashSet::new();
         while input.peek(syn::Ident) {
             if let Ok(attribute) = input.parse::<ElementAttribute>() {
+                let ident = attribute.ident();
                 if attributes.contains(&attribute) {
                     let error_message = format!(
                         "There is a previous definition of the {} attribute",
-                        attribute.ident()
+                        quote!(#ident)
                     );
-                    attribute
-                        .ident()
-                        .span()
-                        .unwrap()
-                        .warning(error_message)
+                    ident.span().unwrap().warning(error_message).emit();
-                        .emit();
                 }
                 attributes.insert(attribute);
             }
@@ -106,11 +122,15 @@ impl<'a> ToTokens for SimpleElementAttributes<'a> {
                 .attributes
                 .iter()
                 .map(|attribute| {
-                    let ident = attribute.ident();
+                    let mut iter = attribute.ident().iter();
+                    let first_word = iter.next().unwrap();
+                    let ident = iter.fold(first_word.to_string(), |acc, curr| {
+                        format!("{}-{}", acc, curr)
+                    });
                     let value = attribute.value_tokens();
                     quote! {
-                        hm.insert(stringify!(#ident), #value);
+                        hm.insert(#ident, #value);
                     }
                 })
                 .collect();

render_macros/src/lib.rs CHANGED Viewed

@@ -51,6 +51,43 @@ use syn::parse_macro_input;
 /// assert_eq!(rendered, r#"<h1>Hello  world!</h1>"#);
 /// ```
 ///
+/// ### Values are always surrounded by curly braces
+///
+/// ```rust
+/// # #![feature(proc_macro_hygiene)]
+/// # use render_macros::html;
+/// # use pretty_assertions::assert_eq;
+/// let rendered = html! {
+///     <div id={"main"} />
+/// };
+///
+/// assert_eq!(rendered, r#"<div id="main" />"#);
+/// ```
+///
+/// ### HTML entities can accept dashed-separated value
+///
+/// ```rust
+/// # #![feature(proc_macro_hygiene)]
+/// # use render_macros::html;
+/// # use pretty_assertions::assert_eq;
+/// let rendered = html! {
+///     <div data-testid={"some test id"} />
+/// };
+///
+/// assert_eq!(rendered, r#"<div data-testid="some test id" />"#);
+/// ```
+///
+/// ### Custom components can't accept dashed-separated values
+///
+/// ```compile_fail
+/// # #![feature(proc_macro_hygiene)]
+/// # use render_macros::html;
+/// // This will fail the compilation:
+/// let rendered = html! {
+///     <MyElement data-testid={"some test id"} />
+/// };
+/// ```
+///
 /// ### Punning is supported
 /// but instead of expanding to `value={true}`, it expands to
 /// `value={value}` like Rust's punning
@@ -68,17 +105,17 @@ use syn::parse_macro_input;
 /// assert_eq!(rendered, r#"<div class="some_class" />"#);
 /// ```
 ///
-/// ### Values are always surrounded by curly braces
+/// ### Punning is not supported for dashed-delimited attributes
 ///
-/// ```rust
+/// ```compile_fail
 /// # #![feature(proc_macro_hygiene)]
 /// # use render_macros::html;
-/// # use pretty_assertions::assert_eq;
+///
 /// let rendered = html! {
-///     <div id={"main"} />
+///     <div this-wont-work />
 /// };
 ///
-/// assert_eq!(rendered, r#"<div id="main" />"#);
+/// assert_eq!(rendered, r#"<div class="some_class" />"#);
 /// ```
 #[proc_macro]
 pub fn html(input: TokenStream) -> TokenStream {

render_macros/src/tags.rs CHANGED Viewed

@@ -7,28 +7,39 @@ pub struct OpenTag {
     pub name: syn::Path,
     pub attributes: ElementAttributes,
     pub self_closing: bool,
+    pub is_custom_element: bool,
 }
 fn name_or_fragment(maybe_name: Result<syn::Path>) -> syn::Path {
-    maybe_name.unwrap_or_else(|_| {
-        syn::parse_str::<syn::Path>("::render::Fragment").unwrap()
+    maybe_name.unwrap_or_else(|_| syn::parse_str::<syn::Path>("::render::Fragment").unwrap())
-    })
+}
+fn is_custom_element_name(path: &syn::Path) -> bool {
+    match path.get_ident() {
+        None => true,
+        Some(ident) => {
+            let name = ident.to_string();
+            let first_letter = name.get(0..1).unwrap();
+            first_letter.to_uppercase() == first_letter
+        }
+    }
 }
 impl Parse for OpenTag {
     fn parse(input: ParseStream) -> Result<Self> {
         input.parse::<syn::Token![<]>()?;
         let maybe_name = syn::Path::parse_mod_style(input);
+        let name = name_or_fragment(maybe_name);
+        let is_custom_element = is_custom_element_name(&name);
-        let attributes = input.parse::<ElementAttributes>()?;
+        let attributes = ElementAttributes::parse(input, is_custom_element)?;
         let self_closing = input.parse::<syn::Token![/]>().is_ok();
         input.parse::<syn::Token![>]>()?;
-        let name = name_or_fragment(maybe_name);
         Ok(Self {
             name,
             attributes,
             self_closing,
+            is_custom_element,
         })
     }
 }

render_tests/src/lib.rs CHANGED Viewed

@@ -32,7 +32,7 @@ pub fn it_works() -> String {
         <>
             <HTML5Doctype />
             <Hello world yes={1 + 1}>
-                <div>{format!("HEY!")}</div>
+                <div data-testid={"hey"} hello={"hello"}>{format!("HEY!")}</div>
                 {other_value}
             </Hello>
         </>
@@ -64,6 +64,14 @@ pub fn verify_works() {
     println!("{}", it_works());
 }
+#[test]
+pub fn works_with_dashes() {
+    use pretty_assertions::assert_eq;
+    let value = html! { <div data-id={"some id"} /> };
+    assert_eq!(value, r#"<div data-id="some id" />"#);
+}
 #[test]
 pub fn works_with_raw() {
     use pretty_assertions::assert_eq;

~repos /tide-jsx

git clone https://pyrossh.dev/repos/tide-jsx.git

Tide + JSX