Generate a cid for repeat elements if no id (#59)

IDs enable efficient re-rendering of dynamic lists. However, if a
model does not provide an ID, we should just generate one for the
purpose of making the logic work. Those items will not get efficient
re-rendering (they will be destroyed and re-created), but it will still
work. This is the same tradeoff React makes.

Author: gordonbrander

typescript/packages/common-ui/src/hyperscript/render.ts

@@ -209,6 +209,9 @@ const renderText = (element: Element, value: any): Cancel =>
 /** Symbol for list item key */
 const __id__ = Symbol("list item key");
 
+let _cid = 0;
+const cid = () => `cid${_cid++}`
+
 /**
  * An element with an id symbol used for efficient rendering of dynamic lists.
  */
@@ -225,8 +228,19 @@ export const renderDynamicChildren = (
       return;
     }
 
-    // Build a map of states by id for quick lookup
-    const statesById = new Map(gmap(states, (state) => [state.id, state]));
+    // Build a map of states by id for quick lookup.
+    // If model doesn't have an ID, generate one. Generated ID will mean the
+    // item will not be efficiently re-rendered by identity, but it will
+    // still work.
+    const statesById = new Map(
+      gmap(
+        states,
+        (state) => [
+          state.id ?? cid(),
+          state
+        ]
+      )
+    );
 
     // Build an index of children and a list of children to remove.
     // Note that we must build a list of children to remove, since
@@ -235,11 +249,11 @@ export const renderDynamicChildren = (
     const removes: Array<Element> = [];
 
     for (const child of parent.children) {
-      const keyedChild = child as IdentifiedChild;
-      const childId = keyedChild[__id__];
+      const identifiedChild = child as IdentifiedChild;
+      const childId = identifiedChild[__id__];
       children.set(childId, child);
       if (!statesById.has(childId)) {
-        removes.push(child);
+        removes.push(identifiedChild);
       }
     }