M example/assets/js/app.js → example/assets/js/app.js

@@ -29,11 +29,11 @@ self.todo = Todo(self)
   // Paginator Component
   self.paginator = Paginator(self)
 
-  // Actual DOM creation/redrawing
-  self.redraw = () => {
+  // Actual DOM creation/updateing
+  self.update = () => {
     self.save();
     const newTree = self.render();
-    self.view.redraw(newTree);
+    self.view.update(self.container.childNodes[0], newTree);
     self.view = newTree;
   };
 
@@ -43,7 +43,7 @@ self.addTodo = () => {
     const newTodo = document.getElementById("new-todo");
     if (!newTodo.value) {
       self.emptyTodoError = true;
-      self.redraw();
+      self.update();
       document.getElementById("new-todo").focus();
       return;
     }
@@ -53,7 +53,7 @@ key: `todo_${Date.now()}__${newTodo.value}`, // Make todos "unique-enough" to ensure they are processed correctly
       text: newTodo.value,
     });
     newTodo.value = "";
-    self.redraw();
+    self.update();
     document.getElementById("new-todo").focus();
   };
 
@@ -69,7 +69,7 @@ // Set the todo filter.
   self.setFilter = (event) => {
     let filter = document.getElementById("filter-text");
     self.filter = filter.value;
-    self.redraw();
+    self.update();
     filter = document.getElementById("filter-text");
     filter.focus();
   };
@@ -84,7 +84,7 @@ 
   // Clear error message
   self.clearError = () => {
     self.emptyTodoError = false;
-    self.redraw();
+    self.update();
     document.getElementById("new-todo").focus();
   };
 

M example/assets/js/paginator.js → example/assets/js/paginator.js

@@ -11,12 +11,12 @@ const nextClass = page < pages ? ".link" : ".disabled";
     function setPreviousPage() {
       page = page - 1;
       window.location.hash = `/?page=${page}`;
-      app.redraw();
+      app.update();
     }
     function setNextPage() {
       page = page + 1;
       window.location.hash = `/?page=${page}`;
-      app.redraw();
+      app.update();
     }
     return h3("div.paginator", [
       h3(`span.previous-page.fas.fa-arrow-left${previousClass}`, {

M example/assets/js/todo.js → example/assets/js/todo.js

@@ -5,11 +5,11 @@ return function(data) {
     const todoStateClass = data.done ? ".done" : ".todo";
     function toggle() {
       data.done = !data.done;
-      app.redraw();
+      app.update();
     }
     function remove() {
       app.todos = app.todos.filter(({ key }) => key !== data.key);
-      app.redraw();
+      app.update();
     }
     return h3("div.todo-item", { id: data.key }, [
       h3(`div.todo-content${todoStateClass}`, [

M h3.js → h3.js

@@ -109,9 +109,8 @@ return node;
   }
 
   // Updates the current Virtual Node with a new Virtual Node (and syncs the existing DOM Node)
-  update(newvnode) {
+  update(node, newvnode) {
     const oldvnode = this;
-    const node = this.element;
     if (
       oldvnode.constructor !== newvnode.constructor ||
       oldvnode.element !== newvnode.element
@@ -183,7 +182,14 @@ if (equal(newmap, oldmap) && (notFoundInNew >= 0 || notFoundInOld >= 0)) {
         // Something changed
         for (let i = 0; i < newmap.length; i++) {
           if (newmap[i] === -1) {
-            oldvnode.children[o].update(newnode.children[i]);
+            // TODO: refactor and handle text nodes properly.
+            if (typeof oldvnode.children[i] === 'string') {
+              console.log(oldvnode.children[i], newvnode.children[i]);
+              oldvnode.children[i] = newvnode.children[i];
+              node.childNodes[i].nodeValue = newvnode.children[i];
+            } else {
+              oldvnode.children[i].update(node.childNodes[i], newvnode.children[i]);
+            }
           }
         }
       } else {