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

@@ -11,7 +11,7 @@ return;
     }
     h3.dispatch("error/clear");
     h3.dispatch("todos/add", {
-      key: `todo_${Date.now()}__${newTodo.value}`, // Make todos "unique-enough" to ensure they are processed correctly
+      key: `todo_${Date.now()}__${btoa(newTodo.value)}`, 
       text: newTodo.value,
     });
     newTodo.value = "";

M example/assets/js/modules.js → example/assets/js/modules.js

@@ -30,7 +30,7 @@ store.on("$init", () => ({ todos: [], filteredTodos: [], filter: "" }));
   store.on("todos/add", (state, data) => {
     let todos = state.todos;
     todos.unshift({
-      key: `todo_${Date.now()}__${data.text}`, // Make todos "unique-enough" to ensure they are processed correctly
+      key: data.key,
       text: data.text,
     });
     return { todos };

M h3.js → h3.js

@@ -121,7 +121,10 @@ } else {
         this.setAttributes(args[1]);
         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;
+      if (!elSelector.match(selectorRegex)) {
+        throw new Error(`[VNode] Invalid selector: ${elSelector}`);
+      }
       const [, element, id, classes] = elSelector.match(selectorRegex);
       this.element = element;
       if (id) {
@@ -400,6 +403,7 @@ let vnode = this.routes[this.route.def]();
     this.redraw = () => {
       const fn = this.routes[this.route.def];
       vnode.redraw({ node: this.element.childNodes[0], vnode: fn() });
+      this.store.dispatch('$redraw');
     };
   }
 
@@ -471,7 +475,6 @@ };
 
 let store = null;
 let router = null;
-let updateFn = null;
 
 h3.init = ({ element, routes, modules, onInit }) => {
   if (!(element instanceof Element)) {