added track field

src/karax.nim

@@ -135,6 +135,8 @@ proc equalsShallow(a, b: VNode): bool =
       if not equalsShallow(a[i], b[i]): return false
   if not sameAttrs(a, b): return false
   if a.class != b.class: return false
+  if a.track != 0 and b.track != 0:
+    if a.track != b.track: return false
   # XXX test event listeners here?
   return true
 

src/karaxdsl.nim

@@ -4,7 +4,7 @@ from strutils import startsWith, toLowerAscii
 
 const
   StmtContext = ["kout", "inc", "echo", "dec", "!"]
-  SpecialAttrs = ["id", "class", "value", "key"]
+  SpecialAttrs = ["id", "class", "value", "key", "track"]
 
 proc getName(n: NimNode): string =
   case n.kind

src/vdom.nim

@@ -109,6 +109,7 @@ type
     when false:
       hash*: Hash
       validHash*: bool
+    track*: int
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
 
@@ -143,6 +144,8 @@ proc eq*(a, b: VNode): bool =
   if a.attrs.len != b.attrs.len: return false
   for i in 0..<a.attrs.len:
     if a.attrs[i] != b.attrs[i]: return false
+  if a.track != 0 and b.track != 0:
+    if a.track != b.track: return false
   result = true
 
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =

uibench/nim_uibench.nim

@@ -36,7 +36,7 @@ proc createTableCell(id: cstring): VNode =
 
 proc createTableRow(item: TableItemState): VNode =
     let className = if item.active: cstring"TableRow active" else: cstring"TableRow"
-    result = buildHtml(tr(class=className, `data-id` = &item.id)):
+    result = buildHtml(tr(class=className, `data-id` = &item.id, key = item.id)):
         createTableCell("#" & &item.id)
         for i in 0..<len(item.props):
             createTableCell(item.props[i])
@@ -53,7 +53,8 @@ proc createAnimBox(item: AnimBoxState): VNode =
     let color = float(t10) / 10
     let divStyles = cstring"border-radius: " & &t10 &
          "px; background: rgba(0,0,0," & cstring($color) & ")"
-    result = flatHtml(tdiv(class="AnimBox", `data-id` = &item.id, style=divStyles))
+    result = flatHtml(tdiv(class="AnimBox", `data-id` = &item.id, key = item.id,
+        style=divStyles))
 
 proc animCreateVNode(data: AnimState): VNode =
     result = buildHtml(tdiv(class="Anim")):