Merge branch 'master' into pr/atty303/1349

packages/rsx-rosetta/src/lib.rs

@@ -3,6 +3,7 @@
 #![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
 
 use convert_case::{Case, Casing};
+use dioxus_html::{map_html_attribute_to_rsx, map_html_element_to_rsx};
 use dioxus_rsx::{
     AttributeType, BodyNode, CallBody, Component, Element, ElementAttr, ElementAttrNamed,
     ElementName, IfmtInput,
@@ -25,28 +26,47 @@ pub fn rsx_node_from_html(node: &Node) -> Option<BodyNode> {
     match node {
         Node::Text(text) => Some(BodyNode::Text(ifmt_from_text(text))),
         Node::Element(el) => {
-            let el_name = el.name.to_case(Case::Snake);
-            let el_name = ElementName::Ident(Ident::new(el_name.as_str(), Span::call_site()));
+            let el_name = if let Some(name) = map_html_element_to_rsx(&el.name) {
+                ElementName::Ident(Ident::new(name, Span::call_site()))
+            } else {
+                // if we don't recognize it and it has a dash, we assume it's a web component
+                if el.name.contains('-') {
+                    ElementName::Custom(LitStr::new(&el.name, Span::call_site()))
+                } else {
+                    // otherwise, it might be an element that isn't supported yet
+                    ElementName::Ident(Ident::new(&el.name.to_case(Case::Snake), Span::call_site()))
+                }
+            };
 
             let mut attributes: Vec<_> = el
                 .attributes
                 .iter()
                 .map(|(name, value)| {
-                    let ident = if matches!(name.as_str(), "for" | "async" | "type" | "as") {
-                        Ident::new_raw(name.as_str(), Span::call_site())
+                    let value = ifmt_from_text(value.as_deref().unwrap_or("false"));
+                    let attr = if let Some(name) = map_html_attribute_to_rsx(name) {
+                        let ident = if let Some(name) = name.strip_prefix("r#") {
+                            Ident::new_raw(name, Span::call_site())
+                        } else {
+                            Ident::new(name, Span::call_site())
+                        };
+                        ElementAttr {
+                            value: dioxus_rsx::ElementAttrValue::AttrLiteral(value),
+                            name: dioxus_rsx::ElementAttrName::BuiltIn(ident),
+                        }
                     } else {
-                        let new_name = name.to_case(Case::Snake);
-                        Ident::new(new_name.as_str(), Span::call_site())
+                        // If we don't recognize the attribute, we assume it's a custom attribute
+                        ElementAttr {
+                            value: dioxus_rsx::ElementAttrValue::AttrLiteral(value),
+                            name: dioxus_rsx::ElementAttrName::Custom(LitStr::new(
+                                name,
+                                Span::call_site(),
+                            )),
+                        }
                     };
 
                     AttributeType::Named(ElementAttrNamed {
                         el_name: el_name.clone(),
-                        attr: ElementAttr {
-                            value: dioxus_rsx::ElementAttrValue::AttrLiteral(ifmt_from_text(
-                                value.as_deref().unwrap_or("false"),
-                            )),
-                            name: dioxus_rsx::ElementAttrName::BuiltIn(ident),
-                        },
+                        attr,
                     })
                 })
                 .collect();