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

@@ -25,15 +25,15 @@ }
   };
 
   // Todo component
-  self.todo = h3.component(new Todo(self));
+  self.todo = Todo(self)
   // Paginator Component
-  self.paginator = h3.component(new Paginator(self));
+  self.paginator = Paginator(self)
 
   // Actual DOM creation/redrawing
   self.redraw = () => {
     self.save();
     const newTree = self.render();
-    h3.redraw(self.container.childNodes[0], newTree, self.view);
+    self.view.redraw(newTree);
     self.view = newTree;
   };
 
@@ -144,7 +144,7 @@ };
   self.init = () => {
     self.load();
     self.view = self.render();
-    self.container.appendChild(h3.render(self.view));
+    self.container.appendChild(self.view.render());
   };
   // Initialize...
   self.init();

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

@@ -1,7 +1,7 @@ 
-export default function Paginator() {
-  return (data) => {
-    const self = this;
-    self.app = data.app;
+import h3 from './h3.js';
+
+export default function Paginator(app) {
+  return function(data) {
     let page = data.page;
     const size = data.size;
     const total = data.total;
@@ -11,12 +11,12 @@ const nextClass = page < pages ? ".link" : ".disabled";
     function setPreviousPage() {
       page = page - 1;
       window.location.hash = `/?page=${page}`;
-      self.app.redraw();
+      app.redraw();
     }
     function setNextPage() {
       page = page + 1;
       window.location.hash = `/?page=${page}`;
-      self.app.redraw();
+      app.redraw();
     }
     return h3("div.paginator", [
       h3(`span.previous-page.fas.fa-arrow-left${previousClass}`, {

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

@@ -1,23 +1,21 @@ 
-export default function Todo() {
-  return function (data) {
-    const self = this;
-    self.app = data.app;
-    self.view = (h3, data) => {
-      const todoStateClass = data.done ? ".done" : ".todo";
-      function toggle() {
-        data.done = !data.done;
-        self.app.redraw();
-      }
-      function remove() {
-        self.app.todos = self.app.todos.filter(({ key }) => key !== data.key);
-        self.app.redraw();
-      }
-      return h3("div.todo-item", { id: data.key }, [
-        h3(`div.todo-content${todoStateClass}`, [
-          h3("span.todo-text", { onclick: toggle }, [data.text]),
-        ]),
-        h3("span.delete-todo.fas.fa-trash", { onclick: remove }),
-      ]);
-    };
+import h3 from './h3.js';
+
+export default function Todo(app) {
+  return function(data) {
+    const todoStateClass = data.done ? ".done" : ".todo";
+    function toggle() {
+      data.done = !data.done;
+      app.redraw();
+    }
+    function remove() {
+      app.todos = app.todos.filter(({ key }) => key !== data.key);
+      app.redraw();
+    }
+    return h3("div.todo-item", { id: data.key }, [
+      h3(`div.todo-content${todoStateClass}`, [
+        h3("span.todo-text", { onclick: toggle }, [data.text]),
+      ]),
+      h3("span.delete-todo.fas.fa-trash", { onclick: remove }),
+    ]);
   };
 }

M h3.js → h3.js

@@ -80,9 +80,6 @@ }
 
   // Renders the actual DOM Node corresponding to the current Virtual Node
   render() {
-    if (typeof this === "string") {
-      return document.createTextNode(this);
-    }
     const node = document.createElement(this.element);
     Object.keys(this.attributes).forEach((attr) => {
       if (attr.match(/^on/)) {
@@ -160,12 +157,12 @@ }
     var newmap = []; // Map positions of newvnode children in relation to oldvnode children
     var oldmap = []; // Map positions of oldvnode children in relation to newvnode children
     if (newvnode.children) {
-      function mapChildren({ children }, { children }) {
+      function mapChildren(parent1, parent2) {
         const map = [];
-        for (let j = 0; j < children.length; j++) {
+        for (let j = 0; j < parent1.children.length; j++) {
           let found = false;
-          for (let k = 0; k < children.length; k++) {
-            if (equal(children[j], children[k])) {
+          for (let k = 0; k < parent2.children.length; k++) {
+            if (equal(parent1.children[j], parent2.children[k])) {
               map.push(k);
               found = true;
               break;