Use unmount and replace_with on Mountable to avoid DynAnchor path

crates/kobold/src/branching.rs

@@ -90,6 +90,7 @@
 //! }
 //! ```
 
+use wasm_bindgen::JsValue;
 use web_sys::Node;
 
 use crate::dom::{self, Anchor, DynAnchor};
@@ -152,6 +153,22 @@ macro_rules! branch {
                     )*
                 }
             }
+
+            fn replace_with(&self, new: &JsValue) {
+                match self {
+                    $(
+                        $name::$var(p) => p.replace_with(new),
+                    )*
+                }
+            }
+
+            fn unmount(&self) {
+                match self {
+                    $(
+                        $name::$var(p) => p.unmount(),
+                    )*
+                }
+            }
         }
 
     };
@@ -207,7 +224,7 @@ impl<T: View> View for Option<T> {
             (html, old) => {
                 let new = html.build();
 
-                old.anchor().replace_with(new.js());
+                old.replace_with(new.js());
 
                 *old = new;
             }

crates/kobold/src/diff.rs

@@ -9,7 +9,8 @@ use std::ops::Deref;
 use web_sys::Node;
 
 use crate::attribute::AttributeView;
-use crate::value::IntoText;
+use crate::dom::TextContent;
+use crate::value::{IntoText, Value};
 use crate::{Mountable, View};
 
 /// This is a wrapper around a `view` that will prevent updates to it, unless
@@ -238,30 +239,38 @@ macro_rules! impl_no_diff {
 
         impl<T> View for $name<T>
         where
-            T: IntoText + Copy,
+            T: Value<TextContent> + IntoText + Copy,
         {
             type Product = Node;
 
-            fn build(self) -> Self::Product {
+            fn build(self) -> Node {
                 self.into_text()
             }
 
-            fn update(self, _: &mut Self::Product) {}
+            fn update(self, node: &mut Node) {
+                if $update {
+                    self.0.set_prop(TextContent, node);
+                }
+            }
         }
 
         impl<T, P> AttributeView<P> for $name<T>
         where
-            T: AttributeView<P>,
+            T: Value<P>,
         {
             type Product = ();
 
             fn build(self) {}
 
             fn build_in(self, prop: P, node: &Node) {
-                self.0.build_in(prop, node);
+                self.0.set_prop(prop, node);
             }
 
-            fn update_in(self, _: P, _: &Node, _: &mut ()) {}
+            fn update_in(self, prop: P, node: &Node, _: &mut ()) {
+                if $update {
+                    self.0.set_prop(prop, node);
+                }
+            }
         }
 
         impl<T> Diff for $name<T>

crates/kobold/src/lib.rs

@@ -424,6 +424,14 @@ pub trait Mountable: 'static {
     fn js(&self) -> &JsValue {
         self.anchor().as_ref()
     }
+
+    fn unmount(&self) {
+        self.anchor().unmount();
+    }
+
+    fn replace_with(&self, new: &JsValue) {
+        self.anchor().replace_with(new);
+    }
 }
 
 /// Start the Kobold app by mounting given [`View`](View) in the document `body`.

crates/kobold/src/list.rs

@@ -6,7 +6,7 @@
 
 use web_sys::Node;
 
-use crate::dom::{Anchor, Fragment, FragmentBuilder};
+use crate::dom::{Fragment, FragmentBuilder};
 use crate::{Mountable, View};
 
 /// Wrapper type that implements `View` for iterators. Use the [`list`](ListIteratorExt::list)
@@ -82,7 +82,7 @@ where
 
         if p.visible > updated {
             for old in p.list[updated..p.visible].iter() {
-                old.anchor().unmount();
+                old.unmount();
             }
             p.visible = updated;
         } else {

crates/kobold/src/value.rs

@@ -88,10 +88,7 @@ impl View for String {
     fn build(self) -> Self::Product {
         let node = self.as_str().into_text();
 
-        TextProduct {
-            memo: self,
-            node,
-        }
+        TextProduct { memo: self, node }
     }
 
     fn update(self, p: &mut Self::Product) {

examples/todomvc/src/main.rs

@@ -86,7 +86,6 @@ fn EntryInput(state: &Hook<State>) -> impl View + '_ {
 mod test {
     use super::*;
 
-
     #[component]
     fn ToggleAll(active_count: usize, state: &Hook<State>) -> impl View + '_ {
         bind! { state:
@@ -98,7 +97,6 @@ mod test {
             <label for="toggle-all" />
         }
     }
-
 }
 
 #[component]