fix hello world, clean up reconciliation

README.md

@@ -236,6 +236,9 @@ MYAPP.HelloWorld = function (el) {
     update: update,
   };
 
+  // initial update
+  update();
+
   // define idempotent update function
   function update(next) {
     // update state
@@ -265,7 +268,7 @@ MYAPP.MyCounter = function (el) {
   // no ES6 template literals :(
   el.innerHTML = [
     '<p>',
-    '  <span class="counter"></span>',
+    '  <span class="value"></span>',
     '  <button class="increment">Increment</button>',
     '  <button class="decrement">Decrement</button>',
     '</p>',
@@ -407,15 +410,20 @@ VT.TodoList = function (el) {
     // mark current children for removal
     var obsolete = new Set(container.children);
 
+    // map current children by data-key
+    var childrenByKey = new Map();
+
+    obsolete.forEach(function (child) {
+      childrenByKey.set(child.getAttribute('data-key'), child);
+    });
+
     // build new list of child elements from data
     var children = state.items.map(function (item) {
-      // find existing child by key
+      // find existing child by data-key
-      var child = container.querySelector(
+      var child = childrenByKey.get(item.id);
-        '.todo-item[data-key="' + item.id + '"]'
-      );
 
       if (child) {
-        // if it exists, keep child
+        // if child exists, keep it
         obsolete.delete(child);
       } else {
         // otherwise, create new child

public/scripts/TodoFrameCustom.js

@@ -62,7 +62,7 @@ VT.TodoFrameCustom = function (el) {
   el.addEventListener('draggableOver', function (e) {
     if (!e.detail.data.list) return;
 
-    updateTranslation();
+    updatePositions();
   });
 
   el.todoFrameCustom = {
@@ -75,11 +75,14 @@ VT.TodoFrameCustom = function (el) {
     var lists = getLists();
     var container = el.querySelector('.container');
     var obsolete = new Set(container.children);
+    var childrenByKey = new Map();
+
+    obsolete.forEach(function (child) {
+      childrenByKey.set(child.getAttribute('data-key'), child);
+    });
 
     var children = lists.map(function (list) {
-      var child = container.querySelector(
+      var child = childrenByKey.get(list.id);
-        '.todo-custom-list[data-key="' + list.id + '"]'
-      );
 
       if (child) {
         obsolete.delete(child);
@@ -105,11 +108,11 @@ VT.TodoFrameCustom = function (el) {
       }
     });
 
-    updateTranslation();
+    updatePositions();
     updateHeight();
   }
 
-  function updateTranslation() {
+  function updatePositions() {
     el.querySelectorAll('.container > *').forEach(function (child, index) {
       child.style.transform = 'translateX(' + (index - state.at) * 100 + '%)';
     });

public/scripts/TodoFrameDays.js

@@ -58,11 +58,14 @@ VT.TodoFrameDays = function (el) {
 
     var container = el.querySelector('.container');
     var obsolete = new Set(container.children);
+    var childrenByKey = new Map();
+
+    obsolete.forEach(function (child) {
+      childrenByKey.set(child.getAttribute('data-key'), child);
+    });
 
     var children = days.map(function (day) {
-      var child = container.querySelector(
+      var child = childrenByKey.get(day.id);
-        '.todo-day[data-key="' + day.id + '"]'
-      );
 
       if (child) {
         obsolete.delete(child);

public/scripts/TodoList.js

@@ -31,10 +31,14 @@ VT.TodoList = function (el) {
 
     var container = el.querySelector('.items');
     var obsolete = new Set(container.children);
+    var childrenByKey = new Map();
+
+    obsolete.forEach(function (child) {
+      childrenByKey.set(child.getAttribute('data-key'), child);
+    });
+
     var children = state.items.map(function (item) {
-      var child = container.querySelector(
+      var child = childrenByKey.get(item.id);
-        '.todo-item[data-key="' + item.id + '"]'
-      );
 
       if (child) {
         obsolete.delete(child);