wip: trying to get namespaced elements working

examples/simple_list.rs

@@ -8,21 +8,23 @@ fn app(cx: Scope) -> Element {
     cx.render(rsx!(
         div { id: "123123123",
             // Use Map directly to lazily pull elements
-            // (0..3).map(|f| rsx! { "{f}" }),
+            (0..10).map(|f| rsx! { "{f}" }),
+
             // Collect into an intermediate collection if necessary, and call into_iter
-            ["a", "b", "c", "x", "y", "z"]
+            ["a", "b", "c", "d", "e", "f"]
                 .into_iter()
                 .map(|f| rsx! { "{f}" })
                 .collect::<Vec<_>>()
                 .into_iter(),
 
-            ["d", "e", "f"]
+            ["x", "y", "z"]
                 .into_iter()
                 .map(|f| rsx! { "{f}" })
                 .collect::<Vec<_>>()
                 .into_iter(),
+
             // Use optionals
-            // Some(rsx! { "Some" }),
+            Some(rsx! { "Some" }),
         }
     ))
 }

packages/core/src/create.rs

@@ -45,14 +45,27 @@ impl VirtualDom {
 
         // Walk the roots, creating nodes and assigning IDs
         // todo: adjust dynamic nodes to be in the order of roots and then leaves (ie BFS)
-        let mut dynamic_attrs = template.template.attr_paths.iter().enumerate().peekable();
-        let mut dynamic_nodes = template.template.node_paths.iter().enumerate().peekable();
+        let mut dynamic_attrs = template
+            .template
+            .attr_paths
+            .iter()
+            .enumerate()
+            .rev()
+            .peekable();
+        let mut dynamic_nodes = template
+            .template
+            .node_paths
+            .iter()
+            .enumerate()
+            .rev()
+            .peekable();
+
         let cur_scope = self.scope_stack.last().copied().unwrap();
 
         println!("creating template: {:#?}", template);
 
         let mut on_stack = 0;
-        for (root_idx, root) in template.template.roots.iter().enumerate() {
+        for (root_idx, root) in template.template.roots.iter().enumerate().rev() {
             mutations.push(LoadTemplate {
                 name: template.template.id,
                 index: root_idx,
@@ -85,6 +98,7 @@ impl VirtualDom {
                         AttributeValue::Text(value) => mutations.push(SetAttribute {
                             name: attribute.name,
                             value: *value,
+                            ns: attribute.namespace,
                             id,
                         }),
                         AttributeValue::Bool(value) => mutations.push(SetBoolAttribute {
@@ -163,9 +177,17 @@ impl VirtualDom {
                 });
 
                 mutations.extend(attrs.into_iter().filter_map(|attr| match attr {
-                    TemplateAttribute::Static { name, value, .. } => {
-                        Some(SetAttribute { name, value, id })
-                    }
+                    TemplateAttribute::Static {
+                        name,
+                        value,
+                        namespace,
+                        ..
+                    } => Some(SetAttribute {
+                        name,
+                        value,
+                        id,
+                        ns: *namespace,
+                    }),
                     _ => None,
                 }));
 

packages/core/src/diff.rs

@@ -130,6 +130,7 @@ impl<'b> VirtualDom {
                     id: left_attr.mounted_element.get(),
                     name: left_attr.name,
                     value,
+                    ns: right_attr.namespace,
                 });
             }
         }

packages/core/src/mutations.rs

@@ -94,6 +94,11 @@ pub enum Mutation<'a> {
         name: &'a str,
         value: &'a str,
         id: ElementId,
+
+        // value: &'bump str,
+        /// The (optional) namespace of the attribute.
+        /// For instance, "style" is in the "style" namespace.
+        ns: Option<&'a str>,
     },
 
     SetBoolAttribute {

packages/interpreter/src/interpreter.js

@@ -258,7 +258,11 @@ export class Interpreter {
         this.AssignId(edit.path, edit.id);
         break;
       case "CreateElement":
-        this.CreateElement(edit.name, edit.id);
+        if (edit.ns !== null) {
+          this.CreateElement(edit.name, edit.id, edit.ns);
+        } else {
+          this.CreateElement(edit.name, edit.id);
+        }
         break;
       case "CreatePlaceholder":
         this.CreatePlaceholder(edit.id);