vnode caching works in the toy example

example.html

@@ -7,12 +7,12 @@
 
 <body id="body">
 
+<div id="ROOT" />
+
 <script type="text/javascript" src="nimcache/example.js"></script>
 <script type="text/javascript">
   onload(window.location.pathname.split('/')[1])
 </script>
 
-<div id="ROOT" />
-
 </body>
 </html>

example.nim

@@ -1,5 +1,5 @@
 
-import vdom, karax, karaxdsl
+import vdom, karax, karaxdsl, jdict
 
 when false:
   var plugins {.exportc.}: seq[(string, proc())] = @[]
@@ -21,15 +21,24 @@ proc onTodoEnter(val: cstring) =
 
 proc onclickHandler(ev: Event; n: VNode) =
   let id = suffixAsInt(n.id, "remove:")
-  entries.delete(id)
+  #entries.delete(id)
+  entries[id] = nil
+
+var entryCache = newJDict[int, VNode]()
 
 proc createEntry(i: int; d: cstring): VNode =
+  # implement caching:
+  if entryCache.contains(i):
+    let old = entryCache[i]
+    return old
+
   result = buildHtml(tr) do:
     td:
       text d
     td:
       span(id="remove:" & $i, onclick=onclickHandler):
         text "[remove]"
+  entryCache[i] = result
 
 proc createDom(): VNode =
   result = buildHtml(tdiv) do:
@@ -42,7 +51,8 @@ proc createDom(): VNode =
       enterInput("todo-input", "", onTodoEnter)
     table(class = "wl"):
       for i, d in entries:
-        createEntry(i, d)
+        if d != nil:
+          createEntry(i, d)
 
 setRenderer createDom
 

jdict.nim

@@ -0,0 +1,11 @@
+
+type
+  JDict*[K, V] = ref object
+
+proc `[]`*[K, V](d: JDict[K, V], k: K): V {.importcpp: "#[#]".}
+proc `[]=`*[K, V](d: JDict[K, V], k: K, v: V) {.importcpp: "#[#] = #".}
+
+proc newJDict*[K, V](): JDict[K, V] {.importcpp: "{@}".}
+
+proc contains*[K, V](d: JDict[K, V], k: K): bool {.importcpp: "#.hasOwnProperty(#)".}
+

karax.nim

@@ -138,9 +138,12 @@ proc dodraw() =
 
 proc redraw*() =
   # we buffer redraw requests:
-  if drawTimeout != nil:
+  when false:
-    clearTimeout(drawTimeout)
+    if drawTimeout != nil:
-  drawTimeout = setTimeout(dodraw, 30)
+      clearTimeout(drawTimeout)
+    drawTimeout = setTimeout(dodraw, 30)
+  else:
+    dodraw()
 
 #proc prepend*(parent, kid: Element) =
 #  parent.insertBefore(kid, parent.firstChild)

vdom.nim

@@ -39,6 +39,21 @@ type
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
 
+proc eq*(a, b: VNode): bool =
+  if a.kind != b.kind: return false
+  if a.id != b.id: return false
+  if a.class != b.class: return false
+  if a.kind != VNodeKind.text:
+    if a.kids.len != b.kids.len: return false
+    for i in 0..<a.kids.len:
+      if not eq(a.kids[i], b.kids[i]): return false
+  else:
+    if a.text != b.text: return false
+  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
+  result = true
+
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
   if n.attrs.isNil:
     n.attrs = @[key, val]
@@ -80,3 +95,32 @@ iterator attrs*(n: VNode): (cstring, cstring) =
 
 proc addEventListener*(n: VNode; event: EventKind; handler: EventHandler) =
   n.events.add((event, handler))
+
+template toStringAttr(field) =
+  if n.field != nil:
+    result.add " " & astToStr(field) & " = " & $n.field
+
+proc toString*(n: VNode; result: var string; indent: int) =
+  for i in 1..indent: result.add ' '
+  if result.len > 0: result.add '\L'
+  result.add "<" & $n.kind
+  toStringAttr(id)
+  toStringAttr(class)
+  for k, v in attrs(n):
+    result.add " " & $k & " = " & $v
+  result.add ">\L"
+  if n.kind == VNodeKind.text:
+    result.add n.text
+  else:
+    if n.text != nil:
+      result.add " value = "
+      result.add n.text
+    for child in items(n):
+      toString(child, result, indent+2)
+  for i in 1..indent: result.add ' '
+  result.add "\L</" & $n.kind & ">"
+
+proc `$`*(n: VNode): cstring =
+  var res = ""
+  toString(n, res, 0)
+  result = cstring(res)