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

@@ -102,7 +102,7 @@ };
   const start = (page - 1) * pagesize;
   const end = Math.min(start + pagesize, filteredTodos.length);
   return h3("div#todolist.todo-list-container", [
-    h3("h1", ["To Do List"]),
+    h3("h1", "To Do List"),
     AddTodoForm({ addTodo, addTodoOnEnter }),
     EmptyTodoError({ displayEmptyTodoError }, { clearError }),
     NavigationBar({ filter, paginatorData }, { update, setFilter }),

M example/assets/js/components/emptyTodoError.js → example/assets/js/components/emptyTodoError.js

@@ -11,7 +11,7 @@ "span.dismiss-error",
       {
         onclick: clearError,
       },
-      ["✘"]
+      "✘"
     ),
   ]);
 }

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

@@ -5,8 +5,8 @@ const { toggleTodo, removeTodo } = actions;
   const todoStateClass = data.done ? ".done" : ".todo";
   return h3("div.todo-item", { id: data.key }, [
     h3(`div.todo-content${todoStateClass}`, [
-      h3("span.todo-text", { onclick: () => toggleTodo(data) }, [data.text]),
+      h3("span.todo-text", { onclick: () => toggleTodo(data) }, data.text),
     ]),
-    h3("span.delete-todo", { onclick: () => removeTodo(data) }, ["✘"]),
+    h3("span.delete-todo", { onclick: () => removeTodo(data) }, "✘"),
   ]);
 };

M h3.js → h3.js

@@ -52,16 +52,16 @@ }
     return true;
   }
   return checkProperties(o1, o2) && checkProperties(o2, o1);
-}
+};
 
 /**
  * Mounts a VNode and renders it as a child of an existing DOM Element.
- * @param {string} id A unique ID of of an existing DOM Element. 
+ * @param {string} id A unique ID of of an existing DOM Element.
  * @param {VNode} vnode The VNode to mount as child of the specified DOM element.
  */
 export const mount = (id, vnode) => {
   document.getElementById(id).appendChild(vnode.render());
-}
+};
 
 // Virtual Node Implementation with HyperScript-like syntax
 export class VNode {
@@ -83,20 +83,22 @@ this.type = "element";
       const elSelector = String(args[0]);
       if (args[1] && !args[2]) {
         // assuming no attributes
-        if (args[1].constructor === Array) {
+        if (typeof args[1] === "string") {
+          this.children = [args[1]];
+        } else if (args[1].constructor === Array) {
           this.children = args[1];
         } else {
           this.attributes = args[1];
         }
       } else {
         this.attributes = args[1] || {};
-        this.children = args[2] || [];
+        this.children = typeof args[2] === "string" ? [args[2]] : args[2] || [];
       }
-      const selectorRegex = /^([a-z0-9:_-]+)(#[a-z0-9:_-]+)?(\..+)?$/i
+      const selectorRegex = /^([a-z0-9:_-]+)(#[a-z0-9:_-]+)?(\..+)?$/i;
       const [, element, id, classes] = elSelector.match(selectorRegex);
       this.element = element;
       this.id = id && id.slice(1);
-      this.classList = classes && classes.split('.').slice(1) || [];
+      this.classList = (classes && classes.split(".").slice(1)) || [];
       this.children = this.children.map((c) =>
         typeof c === "string" ? new VNode({ type: "text", value: c }) : c
       );
@@ -141,7 +143,7 @@ // Updates the current Virtual Node with a new Virtual Node (and syncs the existing DOM Node)
   update(data) {
     let { node, vnode } = data || {};
     if (!node && this.id) {
-      node = document.getElementById(this.id)
+      node = document.getElementById(this.id);
     }
     if (!vnode) {
       vnode = this.render();