wip: fix styling for ssr

README.md

@@ -164,14 +164,15 @@ Dioxus is heavily inspired by React, but we want your transition to feel like an
 | CSS/Inline Styles       | ✅      | ✅     | syntax for inline styles/attribute groups                   |
 | Custom elements         | ✅      | ✅     | Define new element primitives                               |
 | Suspense                | ✅      | ✅     | schedule future render from future/promise                  |
+| Effects                 | 🛠      | ✅     | Run effects after a component has been committed to render  |
 | Cooperative Scheduling  | 🛠      | ✅     | Prioritize important events over non-important events       |
+| NodeRef                 | 🛠      | ✅     | gain direct access to nodes [1]                             |
 | Runs natively           | ✅      | ❓     | runs as a portable binary w/o a runtime (Node)              |
 | 1st class global state  | ✅      | ❓     | redux/recoil/mobx on top of context                         |
 | Subtree Memoization     | ✅      | ❓     | skip diffing static element subtrees                        |
 | Compile-time correct    | ✅      | ❓     | Throw errors on invalid template layouts                    |
-| Fine-grained reactivity | 🛠      | ❓     | Skip diffing for fine-grain updates                         |
 | Heuristic Engine        | 🛠      | ❓     | track component memory usage to minimize future allocations |
-| NodeRef                 | 🛠      | ✅     | gain direct access to nodes [1]                             |
+| Fine-grained reactivity | 🛠      | ❓     | Skip diffing for fine-grain updates                         |
 
 - [1] Currently blocked until we figure out a cross-platform way of exposing an imperative Node API.
 
@@ -184,8 +185,8 @@ Dioxus is heavily inspired by React, but we want your transition to feel like an
 | Integrated classnames | 🛠      | ❓     | built-in `classnames`              |
 | Transition            | 👀      | 🛠     | High-level control over suspense   |
 | Animation             | 👀      | ✅     | Spring-style animations            |
-| Mobile                | 👀      | ✅     | Render with cacao                  |
-| Desktop (native)      | 👀      | ✅     | Render with native desktop         |
+| Native Mobile         | 👀      | ✅     | Render with cacao                  |
+| Native Desktop        | 👀      | ✅     | Render with native desktop         |
 | 3D Renderer           | 👀      | ✅     | react-three-fiber                  |
 
 ### Phase 3: Additional Complexity

packages/ssr/src/lib.rs

@@ -86,9 +86,31 @@ impl<'a> TextRenderer<'a> {
                 }
 
                 write!(f, "<{}", el.tag_name)?;
-                for attr in el.attributes {
-                    write!(f, " {}=\"{}\"", attr.name, attr.value)?;
+                let mut attr_iter = el.attributes.iter().peekable();
+
+                while let Some(attr) = attr_iter.next() {
+                    match attr.namespace {
+                        None => write!(f, " {}=\"{}\"", attr.name, attr.value)?,
+
+                        Some(ns) => {
+                            // write the opening tag
+                            write!(f, " {}=\"", ns)?;
+                            let mut cur_ns_el = attr;
+                            'ns_parse: loop {
+                                write!(f, "{}:{};", cur_ns_el.name, cur_ns_el.value)?;
+                                match attr_iter.peek() {
+                                    Some(next_attr) if next_attr.namespace == Some(ns) => {
+                                        cur_ns_el = attr_iter.next().unwrap();
+                                    }
+                                    _ => break 'ns_parse,
+                                }
+                            }
+                            // write the closing tag
+                            write!(f, "\"")?;
+                        }
+                    }
                 }
+
                 match self.cfg.newline {
                     true => write!(f, ">\n")?,
                     false => write!(f, ">")?,
@@ -224,4 +246,23 @@ mod tests {
         file.write_fmt(format_args!("{}", TextRenderer::new(&dom)))
             .unwrap();
     }
+
+    #[test]
+    fn styles() {
+        const STLYE_APP: FC<()> = |cx| {
+            //
+            cx.render(rsx! {
+                div {
+                    style: {
+                        color: "blue",
+                        font_size: "46px"
+                    }
+                }
+            })
+        };
+
+        let mut dom = VirtualDom::new(STLYE_APP);
+        dom.rebuild_in_place().expect("failed to run virtualdom");
+        dbg!(render_root(&dom));
+    }
 }