diff --git a/README.md b/README.md index 4ff80ae93..c438ea86d 100644 --- a/README.md +++ b/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 diff --git a/packages/ssr/src/lib.rs b/packages/ssr/src/lib.rs index 221e04064..b6838515b 100644 --- a/packages/ssr/src/lib.rs +++ b/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)); + } }