From a799413f7f394e725958972315fe7d54cfcd7f2f Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 13 Apr 2017 21:07:04 +0200
Subject: [PATCH 001/264] added .component macro to karax

---
 experiments/scrollapp.nim |  39 ++-------
 src/components.nim        | 103 +++++++++++++++++++++++
 src/dom.nim               |   2 +
 src/karax.nim             | 170 +++++++-------------------------------
 src/karaxdsl.nim          |  18 +++-
 src/vdom.nim              |  23 +++---
 6 files changed, 169 insertions(+), 186 deletions(-)
 create mode 100644 src/components.nim

diff --git a/experiments/scrollapp.nim b/experiments/scrollapp.nim
index 7b7ce8e..f9c8ccb 100644
--- a/experiments/scrollapp.nim
+++ b/experiments/scrollapp.nim
@@ -1,17 +1,14 @@
 
-import vdom, karax, karaxdsl, jdict, jstrutils
+import vdom, karax, karaxdsl, jdict, jstrutils, components
 
 type
   Filter = enum
     all, active, completed
 
-const
-  WindowSize = 50 # overestimating it does not harm
-
 var
   entries: seq[(cstring, bool)]
   visibleA = 0
-  visibleB = 10_000
+  visibleB = 10
   selectedEntry = -1
   filter: Filter
 
@@ -52,34 +49,15 @@ proc toChecked(checked: bool): cstring =
 proc selected(v: Filter): cstring =
   (if filter == v: cstring"selected" else: cstring(nil))
 
-when false:
-  proc entry(id: int, d: cstring; completed, selected: bool): proc (): VNode =
-    var lastid: type(id)
-    var lastd: type(d)
-    var lastCompleted: type(completed)
-    var lastSelected: type(selected)
-    proc inner(): VNode =
-      if lastid != id or lastd != d or lastCompleted != completed or lastSelected != selected:
-        result = logic(id, d, completed, selected)
-        lastid = id
-        lastd = d
-        lastCompleted = completed
-        lastSelected = selected
-
-    result = inner
-
-proc lazyEntry(args: seq[VNode]): VNode =
-  let id = args[0].intValue
-  let d = args[1].text
-  let completed = args[2].intValue != 0
-  let selected = args[3].intValue != 0
+proc createEntry(id: int; d: cstring;
+                 completed: bool, selected: bool): VNode {.component.} =
   result = buildHtml(tr):
     li(class=toClass(completed), key = id):
       if not selected:
         tdiv(class = "view"):
           input(class = "toggle", `type` = "checkbox", checked = toChecked(completed),
                 onclick=toggleEntry, key = id)
-          label(onDblClick=editHandler, key = id):
+          label(onclick=editHandler, key = id):
             text d
           button(class = "destroy", key = id, onclick = removeHandler)
       else:
@@ -87,9 +65,6 @@ proc lazyEntry(args: seq[VNode]): VNode =
           onfocusLost = focusLost,
           onenter = editEntry, value = d, setFocus)
 
-proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
-  result = thunk(lazyEntry, id, d, completed, selected)
-
 proc myscroll(ev: Event; n: VNode) =
   kout cstring"scrolling event here"
 
@@ -105,10 +80,6 @@ proc createDom(): VNode =
         input(class = "toggle-all", `type` = "checkbox", name = "toggle")
         label(`for` = "toggle-all", onclick = onAllDone):
           text "Mark all as complete"
-        tdiv(onscroll = myscroll, style = "overflow: visible; width: 0px; display: block; max-height: 1em"):
-          for i in 0..4:
-            tdiv:
-              text entries[i][0]
 
         var entriesCount = 0
         var completedCount = 0
diff --git a/src/components.nim b/src/components.nim
new file mode 100644
index 0000000..6d6a8f2
--- /dev/null
+++ b/src/components.nim
@@ -0,0 +1,103 @@
+## Components in Karax are built by the ``.component`` macro annotation.
+
+import macros, jdict, dom, vdom, tables, strutils
+
+var
+  vcomponents* = newJDict[cstring, proc(args: seq[VNode]): VNode]()
+  dcomponents* = newJDict[cstring, proc(args: seq[VNode]): Node]()
+
+type
+  ComponentKind* {.pure.} = enum
+    None,
+    VNode,
+    Node
+
+var
+  allcomponents {.compileTime.} = initTable[string, ComponentKind]()
+
+proc isComponent*(x: string): ComponentKind {.compileTime.} =
+  allcomponents.getOrDefault(x)
+
+proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
+  #let t = symbolicType.getTypeImpl
+  let t = repr(symbolicType)
+  case t
+  of "cstring":
+    result = quote do:
+      args[`index`].text
+  of "int", "VKey":
+    result = quote do:
+      args[`index`].intValue
+  of "bool":
+    result = quote do:
+      args[`index`].intValue != 0
+  elif t.endsWith"Kind":
+    result = quote do:
+      `symbolicType`(args[`index`].intValue)
+  else:
+    # just pass it along, maybe there is some conversion for it:
+    result = quote do:
+      args[`index`]
+
+proc newname*(n: NimNode): NimNode =
+  if n.kind == nnkPostfix:
+    n[1] = newname(n[1])
+    result = n
+  elif n.kind == nnkSym:
+    result = ident($n.symbol)
+  else:
+    result = n
+
+macro component*(prc: untyped): untyped =
+  ## A component takes an proc body and registers it as a component to the
+  ## virtual dom.
+  var n = prc.copyNimNode
+  for i in 0..6: n.add prc[i].copyNimTree
+  expectKind(n, nnkProcDef)
+  if n[0].kind == nnkEmpty:
+    error("please pass a non anonymous proc")
+  let name = n[0]
+  let params = params(n)
+  let rettype = repr params[0]
+  var isvirtual = ComponentKind.None
+  if rettype == "VNode":
+    isvirtual = ComponentKind.VNode
+  elif rettype == "Node":
+    isvirtual = ComponentKind.Node
+  else:
+    error "component must return VNode or Node"
+  n[0] = ident("inner" & $name)
+  var unpackCall = newCall(n[0])
+  var counter = 0
+  for i in 1.. <params.len:
+    let param = params[i]
+    let L = param.len
+    let typ = param[L-2]
+    for j in 0 .. L-3:
+      unpackCall.add unpack(typ, counter)
+      inc counter
+
+  template vwrapper(wname, nameStrLit, unpackCall) {.dirty.} =
+    proc wname*(args: seq[VNode]): VNode =
+      unpackCall
+    vcomponents[cstring(nameStrLit)] = wname
+
+  template dwrapper(wname, nameStrLit, unpackCall) {.dirty.} =
+    proc wname(args: seq[VNode]): Node =
+      unpackCall
+    dcomponents[cstring(nameStrLit)] = wname
+
+  result = newTree(nnkStmtList, n)
+  if isvirtual == ComponentKind.VNode:
+    result.add getAst(vwrapper(newname name, newLit($name), unpackCall))
+  else:
+    result.add getAst(dwrapper(newname name, newLit($name), unpackCall))
+  allcomponents[$name] = isvirtual
+  when defined(debugKaraxDsl):
+    echo repr result
+
+when isMainModule:
+  proc foo(x, y: int, b: bool; s: cstring): VNode {.component.} =
+    discard
+
+
diff --git a/src/dom.nim b/src/dom.nim
index 9414c89..87d1cfc 100644
--- a/src/dom.nim
+++ b/src/dom.nim
@@ -520,6 +520,8 @@ proc item*(list: TouchList, i: int): Touch
 
 {.pop.}
 
+proc setAttr*(n: Node; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
+
 var
   window* {.importc, nodecl.}: Window
   document* {.importc, nodecl.}: Document
diff --git a/src/karax.nim b/src/karax.nim
index f0f70dd..80d67c8 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -1,6 +1,6 @@
 # Simple lib to write JS UIs
 
-import dom, vdom, jstrutils
+import dom, vdom, jstrutils, components, jdict
 
 export dom.Event, dom.cloneNode, dom
 
@@ -68,8 +68,12 @@ proc isElementInViewport(el: Node; h: var int): bool =
 proc vnodeToDom(n: VNode): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
-  elif n.kind == VNodeKind.thunk:
-    return vnodeToDom(n.callThunk)
+  elif n.kind == VNodeKind.vthunk:
+    let x = callThunk(vcomponents[n.text], n)
+    return vnodeToDom(x)
+  elif n.kind == VNodeKind.dthunk:
+    let x = callThunk(dcomponents[n.text], n)
+    return x
   else:
     result = document.createElement(toTag[n.kind])
     for k in n:
@@ -85,7 +89,7 @@ proc vnodeToDom(n: VNode): Node =
     result.key = n.key
   for k, v in attrs(n):
     if v != nil:
-      result.setAttribute(k, v)
+      result.setAttr(k, v)
   let myn = n
   for e, h in items(n.events):
     proc wrapper(): proc (ev: Event) =
@@ -136,23 +140,26 @@ proc equals(a, b: VNode): bool =
   if a.key != b.key: return false
   if a.kind == VNodeKind.text:
     if a.text != b.text: return false
-  elif a.kind == VNodeKind.thunk:
-    if a.thunk != b.thunk: return false
+  elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
+    if a.text != b.text: return false
     if a.len != b.len: return false
     for i in 0..<a.len:
       if not equals(a[i], b[i]): return false
   if not sameAttrs(a, b): return false
   if a.class != b.class: return false
   # XXX test event listeners here?
-  # --> maybe give nodes a hash?
   return true
 
 proc equalsTree(a, b: VNode): bool =
-  if not a.validHash:
-    a.calcHash()
-  if not b.validHash:
-    b.calcHash()
-  return a.hash == b.hash
+  when false:
+    # hashing is too fragile now with component support:
+    if not a.validHash:
+      a.calcHash()
+    if not b.validHash:
+      b.calcHash()
+    return a.hash == b.hash
+  else:
+    return eq(a, b)
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
   if not equals(newNode, oldNode):
@@ -177,12 +184,14 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
           current.removeChild(current.lastChild)
     else:
       var commonPrefix = 0
-      while commonPrefix < minLength and equalsTree(newNode[commonPrefix], oldNode[commonPrefix]):
+      while commonPrefix < minLength and
+          equalsTree(newNode[commonPrefix], oldNode[commonPrefix]):
         inc commonPrefix
 
       var oldPos = oldLength - 1
       var newPos = newLength - 1
-      while oldPos >= commonPrefix and newPos >= commonPrefix and equalsTree(newNode[newPos], oldNode[oldPos]):
+      while oldPos >= commonPrefix and newPos >= commonPrefix and
+          equalsTree(newNode[newPos], oldNode[oldPos]):
         dec oldPos
         dec newPos
 
@@ -254,18 +263,6 @@ proc redraw*() =
 proc init*() =
   reqFrame(dodraw)
 
-#proc prepend*(parent, kid: Element) =
-#  parent.insertBefore(kid, parent.firstChild)
-#  prependChild(parent, kid)
-
-proc suffix*(s, prefix: cstring): cstring =
-  if s.startsWith(prefix):
-    result = s.substr(prefix.len)
-  else:
-    kout(cstring"bug! " & s & cstring" does not start with " & prefix)
-
-proc suffixAsInt*(s, prefix: cstring): int = parseInt(suffix(s, prefix))
-
 proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
 proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
 proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}
@@ -291,8 +288,6 @@ proc setOnchanged*(e: VNode; action: EventHandler) =
 proc setOnscroll*(e: VNode; action: EventHandler) =
   onImpl EventKind.onscroll
 
-#proc ceil(f: float): int {.importc: "Math.ceil", nodecl.}
-
 proc setOnscroll*(action: proc(min, max: VKey; diff: int)) =
   var oldY = window.pageYOffset
 
@@ -321,98 +316,6 @@ proc setOnHashChange*(action: proc (hashPart: cstring)) =
     redraw()
   onhashchange = wrapper
 
-var
-  linkCounter: int
-
-proc link*(id: int): VNode =
-  result = newVNode(VNodeKind.anchor)
-  result.setAttr("href", "#")
-  inc linkCounter
-  result.setAttr("id", $linkCounter & ":" & $id)
-
-proc link*(action: EventHandler): VNode =
-  result = newVNode(VNodeKind.anchor)
-  result.setAttr("href", "#")
-  result.setOnclick action
-
-when false:
-  proc button*(caption: cstring; action: EventHandler; disabled=false): VNode =
-    result = newVNode(VNodeKind.button)
-    result.add text(caption)
-    if action != nil:
-      result.setOnClick action
-    if disabled:
-      result.setAttr("disabled", "true")
-
-proc select*(choices: openarray[cstring]): VNode =
-  result = newVNode(VNodeKind.select)
-  var i = 0
-  for c in choices:
-    result.add tree(VNodeKind.option, [(cstring"value", toCstr(i))], text(c))
-    inc i
-
-proc select*(choices: openarray[(int, cstring)]): VNode =
-  result = newVNode(VNodeKind.select)
-  for c in choices:
-    result.add tree(VNodeKind.option, [(cstring"value", toCstr(c[0]))], text(c[1]))
-
-var radioCounter: int
-
-proc radio*(choices: openarray[(int, cstring)]): VNode =
-  result = newVNode(VNodeKind.fieldset)
-  var i = 0
-  inc radioCounter
-  for c in choices:
-    let id = cstring"radio_" & c[1] & toCstr(i)
-    var kid = tree(VNodeKind.input, [(cstring"type", cstring"radio"),
-      (cstring"id", id), (cstring"name", cstring"radio" & toCStr(radioCounter)),
-      (cstring"value", toCStr(c[0]))])
-    if i == 0:
-      kid.setAttr(cstring"checked", cstring"checked")
-    var lab = tree(VNodeKind.label, [(cstring"for", id)], text(c[1]))
-    kid.add lab
-    result.add kid
-    inc i
-
-proc tag*(kind: VNodeKind; id=cstring(nil), class=cstring(nil)): VNode =
-  result = newVNode(kind)
-  result.id = id
-  result.class = class
-
-proc tdiv*(id=cstring(nil), class=cstring(nil)): VNode = tag(VNodeKind.tdiv, id, class)
-proc span*(id=cstring(nil), class=cstring(nil)): VNode = tag(VNodeKind.span, id, class)
-
-proc valueAsInt*(e: Node): int = parseInt(e.value)
-
-proc th*(s: cstring): VNode =
-  result = newVNode(VNodeKind.th)
-  result.add text(s)
-
-proc td*(s: string): VNode =
-  result = newVNode(VNodeKind.td)
-  result.add text(s)
-
-proc td*(s: VNode): VNode =
-  result = newVNode(VNodeKind.td)
-  result.add s
-
-proc td*(class: cstring; s: VNode): VNode =
-  result = newVNode(VNodeKind.td)
-  result.add s
-  result.class = class
-
-proc table*(class=cstring(nil), kids: varargs[VNode]): VNode =
-  result = tag(VNodeKind.table, nil, class)
-  for k in kids: result.add k
-
-proc tr*(kids: varargs[VNode]): VNode =
-  result = newVNode(VNodeKind.tr)
-  for k in kids:
-    if k.kind in {VNodeKind.td, VNodeKind.th}:
-      result.add k
-    else:
-      result.add td(k)
-
 proc getAttr(e: Node; key: cstring): cstring {.
   importcpp: "#.getAttribute(#)", nodecl.}
 
@@ -426,9 +329,6 @@ template keyeventBody() =
   redraw()
 
 proc realtimeInput*(val: cstring; action: EventHandler): VNode =
-  #let oldElem = getElementById(id)
-  #if oldElem != nil: return oldElem
-  #let newVal = if oldElem.isNil: val else: $oldElem.value
   var timer: Timeout
   proc onkeyup(ev: Event; n: VNode) =
     proc wrapper() = keyeventBody()
@@ -440,9 +340,6 @@ proc realtimeInput*(val: cstring; action: EventHandler): VNode =
   result.addEventListener(EventKind.onkeyup, onkeyup)
 
 proc enterInput*(id, val: cstring; action: EventHandler): VNode =
-  #let oldElem = getElementById(id)
-  #if oldElem != nil: return oldElem
-  #let newVal = if oldElem.isNil: val else: $oldElem.value
   proc onkeyup(ev: Event; n: VNode) =
     if ev.keyCode == 13: keyeventBody()
 
@@ -508,16 +405,13 @@ proc setupErrorHandler*(useAlert=false) =
 
 {.pop.}
 
-when false:
-  var plugins {.exportc.}: seq[(string, proc())] = @[]
-
-  proc onInput(val: cstring) =
-    kout val
-    if val == "dyn":
-      let body = getElementById("body")
-      body.prepend(tree("script", [("type", "text/javascript"), ("src", "nimcache/dyn.js")]))
-      redraw()
-    kout(plugins.len)
-    if plugins.len > 0:
-      plugins[0][1]()
+proc prepend*(parent, kid: Element) =
+  parent.insertBefore(kid, parent.firstChild)
 
+proc loadScript*(jsfilename: cstring) =
+  let body = getElementById("body")
+  let s = document.createElement("script")
+  s.setAttr "type", "text/javascript"
+  s.setAttr "src", jsfilename
+  body.prepend(s)
+  redraw()
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index 6b8e540..dce3034 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -1,5 +1,5 @@
 
-import macros, karax, vdom
+import macros, karax, vdom, components
 from strutils import startsWith, toLowerAscii
 
 const
@@ -61,11 +61,19 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
     result = n
   of nnkCallKinds:
     let op = getName(n[0])
-    if isTag(op):
+    let ck = isComponent(op)
+    let isTag = isTag(op)
+    if isTag or ck != ComponentKind.None:
       let tmp = genSym(nskLet, "tmp")
+      let call = if isTag:
+                   newCall(bindSym"tree", newDotExpr(bindSym"VNodeKind", n[0]))
+                 elif ck == ComponentKind.VNode:
+                   newCall(bindSym"vthunk", newLit(op))
+                 else:
+                   newCall(bindSym"dthunk", newLit(op))
       result = newTree(
         if tmpContext == nil: nnkStmtListExpr else: nnkStmtList,
-        newLetStmt(tmp, newCall(bindSym"tree", newDotExpr(bindSym"VNodeKind", n[0]))))
+        newLetStmt(tmp, call))
       for i in 1 ..< n.len:
         # named parameters are transformed into attributes or events:
         let x = n[i]
@@ -77,7 +85,9 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
             result.add newDotAsgn(tmp, key, x[1])
           else:
             result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
-        elif x.kind == nnkIdent:
+        elif not isTag:
+          call.add x
+        elif eqIdent(x, "setFocus"):
           result.add newCall(x, tmp)
         else:
           result.add tcall2(x, tmp)
diff --git a/src/vdom.nim b/src/vdom.nim
index 0ddfc3a..2670be5 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -5,7 +5,7 @@ import shash
 
 type
   VNodeKind* {.pure.} = enum
-    text, int, bool, thunk,
+    text, int, bool, vthunk, dthunk,
     anchor,
     tdiv,
     table, tr, td, th, thead, tbody,
@@ -15,7 +15,8 @@ type
 
 const
   toTag*: array[VNodeKind, cstring] = [
-    cstring"#text", "#int", "#bool", "#thunk", "A", "DIV", "TABLE", "TR", "TD",
+    cstring"#text", "#int", "#bool", "#vthunk", "#dthunk",
+    "A", "DIV", "TABLE", "TR", "TD",
     "TH", "THEAD",
     "TBODY", "LINK",
     "SPAN", "LABEL", "BR", "SELECT", "OPTION", "FIELDSET", "INPUT", "BUTTON", "UL",
@@ -43,7 +44,6 @@ type
     # even index: key, odd index: value; done this way for memory efficiency:
     attrs: seq[cstring]
     events*: seq[(EventKind, EventHandler)]
-    thunk*: proc (args: seq[VNode]): VNode
     hash*: Hash
     validHash*: bool
 
@@ -55,23 +55,26 @@ proc vn*(i: int): VNode = VNode(kind: VNodeKind.int, key: i)
 proc vn*(b: bool): VNode = VNode(kind: VNodeKind.int, key: ord(b))
 proc vn*(x: cstring): VNode = VNode(kind: VNodeKind.text, key: -1, text: x)
 
-proc callThunk*(n: VNode): VNode =
-  assert n.kind == VNodeKind.thunk
-  result = n.thunk(n.kids)
+template callThunk*(fn: typed; n: VNode): untyped =
+  ## for internal usage only.
+  fn(n.kids)
 
-proc thunk*(cb: proc(args: seq[VNode]): VNode; args: varargs[VNode, vn]): VNode =
-  VNode(kind: VNodeKind.thunk, thunk: cb, kids: @args)
+proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
+  VNode(kind: VNodeKind.vthunk, text: name, kids: @args)
+
+proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
+  VNode(kind: VNodeKind.dthunk, text: name, kids: @args)
 
 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.key != b.key: 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.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

From 21bb6a03116fb02e5ec094a5b94f34b91194ce26 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 13 Apr 2017 21:22:57 +0200
Subject: [PATCH 002/264] readme.rst: better english

---
 readme.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index c08ec99..64582eb 100644
--- a/readme.rst
+++ b/readme.rst
@@ -15,7 +15,7 @@ To try it out, run::
 It uses a virtual DOM like React, but is much smaller than the existing
 frameworks plus of course it's written in Nim for Nim. No external
 dependencies! And thanks to Nim's whole program optimization only what
-is used ends up producing JavaScript code.
+is used ends up in the generated JavaScript code.
 
 
 Goals

From be0f9c9e08b85591b38bd784bb3f6013e6856a18 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 14 Apr 2017 19:36:16 +0200
Subject: [PATCH 003/264] added support for all HTML5 tags and drag&drop events

---
 src/components.nim | 12 ++++++
 src/karax.nim      | 11 ++----
 src/vdom.nim       | 94 ++++++++++++++++++++++++++++++++++------------
 3 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/src/components.nim b/src/components.nim
index 6d6a8f2..30d5922 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -9,6 +9,7 @@ var
 type
   ComponentKind* {.pure.} = enum
     None,
+    Tag,
     VNode,
     Node
 
@@ -18,6 +19,17 @@ var
 proc isComponent*(x: string): ComponentKind {.compileTime.} =
   allcomponents.getOrDefault(x)
 
+proc addTags() {.compileTime.} =
+  let x = (bindSym"VNodeKind").getTypeImpl
+  expectKind(x, nnkEnumTy)
+  for i in ord(VNodeKind.html)..ord(VNodeKind.high):
+    # +1 because of empty node at the start of the enum AST:
+    let tag = $x[i+1]
+    allcomponents[tag] = ComponentKind.Tag
+
+static:
+  addTags()
+
 proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
   #let t = symbolicType.getTypeImpl
   let t = repr(symbolicType)
diff --git a/src/karax.nim b/src/karax.nim
index 80d67c8..0007ce5 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -111,7 +111,6 @@ proc same(n: VNode, e: Node): bool =
 
 var
   dorender: proc (): VNode {.closure.}
-  drawTimeout: Timeout
   currentTree: VNode
 
 proc setRenderer*(renderer: proc (): VNode) =
@@ -125,9 +124,8 @@ proc getElementById*(id: cstring): Element {.importc: "document.getElementById",
 
 #proc getElementsByClassName*(cls: cstring): seq[Element] {.importc:
 #  "document.getElementsByClassName", nodecl.}
-
-proc textContent(e: Node): cstring {.
-  importcpp: "#.textContent", nodecl.}
+#proc textContent(e: Node): cstring {.
+#  importcpp: "#.textContent", nodecl.}
 
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
@@ -215,6 +213,8 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
       for i in 0..oldPos-pos:
         current.removeChild(current.childNodes[pos])
 
+when false:
+  var drawTimeout: Timeout
 
 proc dodraw() =
   let newtree = dorender()
@@ -316,9 +316,6 @@ proc setOnHashChange*(action: proc (hashPart: cstring)) =
     redraw()
   onhashchange = wrapper
 
-proc getAttr(e: Node; key: cstring): cstring {.
-  importcpp: "#.getAttribute(#)", nodecl.}
-
 template nativeValue(ev): cstring = cast[Element](ev.target).value
 template setNativeValue(ev, val) = cast[Element](ev.target).value = val
 
diff --git a/src/vdom.nim b/src/vdom.nim
index 2670be5..1f55e61 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -1,37 +1,81 @@
-# Virtual DOM implementation
+## Virtual DOM implementation for Karax.
 
 from dom import Event
-import shash
+import shash, macros
+from strutils import toUpperAscii
 
 type
   VNodeKind* {.pure.} = enum
-    text, int, bool, vthunk, dthunk,
-    anchor,
-    tdiv,
-    table, tr, td, th, thead, tbody,
-    link, span, label, br, select, option,
-    fieldset, input, button, ul, li, section, header, footer,
-    h1, h2, h3, h4, h5, strong
+    text = "#text", int = "#int", bool = "#bool",
+    vthunk = "#vthunk", dthunk = "#dthunk",
 
-const
-  toTag*: array[VNodeKind, cstring] = [
-    cstring"#text", "#int", "#bool", "#vthunk", "#dthunk",
-    "A", "DIV", "TABLE", "TR", "TD",
-    "TH", "THEAD",
-    "TBODY", "LINK",
-    "SPAN", "LABEL", "BR", "SELECT", "OPTION", "FIELDSET", "INPUT", "BUTTON", "UL",
-    "LI", "SECTION", "HEADER", "FOOTER", "H1", "H2", "H3", "H4", "H5", "STRONG"
-  ]
+    html, head, title, base, link, meta, style,
+    script, noscript,
+    body, section, nav, article, aside,
+    h1, h2, h3, h4, h5, h6,
+    header, footer, address, main
+
+    p, hr, pre, blockquote, ol, ul, li,
+    dl, dt, dd,
+    figure, figcaption,
+
+    tdiv = "div",
+
+    anchor, em, strong, small,
+    strikethrough = "s", cite, quote,
+    dfn, abbr, data, time, code, `var` = "var", samp,
+    kdb, sub, sup, italic = "i", bold = "b", underlined = "u",
+    mark, ruby, rt, rp, bdi, dbo, span, br, wbr,
+    ins, del, img, iframe, embed, `object` = "object",
+    param, video, audio, source, track, canvas, map,
+    area, svg, math,
+
+    table, caption, colgroup, col, tbody, thead,
+    tfoot, tr, td, th,
+
+    form, fieldset, legend, label, input, button,
+    select, datalist, optgroup, option, textarea,
+    keygen, output, progress, meter,
+    details, summary, command, menu
 
 type
-  EventKind* {.pure.} = enum
-    onclick, ondblclick, onkeyup, onkeydown, onkeypressed, onblur, onchange, onscroll
+  EventKind* {.pure.} = enum ## The events supported by the virtual DOM.
+    onclick, ## An element is clicked.
+    ondblclick, ## An element is double clicked.
+    onkeyup, ## A key was released.
+    onkeydown, ## A key is pressed.
+    onkeypressed, # A key was pressed.
+    onblur, ## An element lost the focus.
+    onchange, ## The selected value of an element was changed.
+    onscroll, ## The user scrolled within an element.
+    ondrag,  ## An element or text selection is being dragged (every 350ms).
+    ondragend, ## A drag operation is being ended (by releasing a mouse button
+               ## or hitting the escape key).
+    ondragenter, ## A dragged element or text selection enters a valid drop target.
+    ondragleave, ## A dragged element or text selection leaves a valid drop target.
+    ondragover, ## An element or text selection is being dragged over a valid
+                ## drop target (every 350ms).
+    ondragstart, ## The user starts dragging an element or text selection.
+    ondrop ## An element is dropped on a valid drop target.
 
-const
-  toEventName*: array[EventKind, cstring] = [
-    cstring"click", "dblclick", "keyup", "keydown", "keypressed", "blur",
-    "change", "scroll"
-  ]
+macro buildLookupTables(): untyped =
+  var a = newTree(nnkBracket)
+  for i in low(VNodeKind)..high(VNodeKind):
+    let x = $i
+    let y = if x[0] == '#': x else: toUpperAscii(x)
+    a.add(newCall("cstring", newLit(y)))
+  var e = newTree(nnkBracket)
+  for i in low(EventKind)..high(EventKind):
+    e.add(newCall("cstring", newLit(substr($i, 2))))
+
+  template tmpl(a, e) {.dirty.} =
+    const
+      toTag*: array[VNodeKind, cstring] = a
+      toEventName*: array[EventKind, cstring] = e
+
+  result = getAst tmpl(a, e)
+
+buildLookupTables()
 
 type
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}

From 74c5fb48ff20b470d23aabfb036009778ebd6853 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 14 Apr 2017 19:39:00 +0200
Subject: [PATCH 004/264] added support for all HTML5 tags and drag&drop events

---
 src/karaxdsl.nim | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index dce3034..d4bc1fb 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -23,10 +23,6 @@ proc getName(n: NimNode): string =
 proc newDotAsgn(tmp: NimNode, key: string, x: NimNode): NimNode =
   result = newTree(nnkAsgn, newDotExpr(tmp, newIdentNode key), x)
 
-proc isTag(s: string): bool =
-  for i in VNodeKind.low.succ..VNodeKind.high:
-    if $i == s: return true
-
 proc tcall2(n, tmpContext: NimNode): NimNode =
   # we need to distinguish statement and expression contexts:
   # every call statement 's' needs to be transformed to 'dest.add s'.
@@ -62,10 +58,9 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
   of nnkCallKinds:
     let op = getName(n[0])
     let ck = isComponent(op)
-    let isTag = isTag(op)
-    if isTag or ck != ComponentKind.None:
+    if ck != ComponentKind.None:
       let tmp = genSym(nskLet, "tmp")
-      let call = if isTag:
+      let call = if ck == ComponentKind.Tag:
                    newCall(bindSym"tree", newDotExpr(bindSym"VNodeKind", n[0]))
                  elif ck == ComponentKind.VNode:
                    newCall(bindSym"vthunk", newLit(op))
@@ -85,7 +80,7 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
             result.add newDotAsgn(tmp, key, x[1])
           else:
             result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
-        elif not isTag:
+        elif ck != ComponentKind.Tag:
           call.add x
         elif eqIdent(x, "setFocus"):
           result.add newCall(x, tmp)

From 199408f160d298a265dbe5750fdf8bfb31aa07bb Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 14 Apr 2017 19:39:18 +0200
Subject: [PATCH 005/264] wrote more documentation

---
 docs.rst | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 docs.rst

diff --git a/docs.rst b/docs.rst
new file mode 100644
index 0000000..8298ba9
--- /dev/null
+++ b/docs.rst
@@ -0,0 +1,58 @@
+
+Virtual DOM
+===========
+
+The virtual dom is in the ``vdom`` module.
+
+The ``VNodeKind`` enum describes every tag that the HTML 5 spec includes
+and some extensions that allow for an efficient component system.
+
+These extensions are:
+
+``VNodeKind.int``
+     The node havs a single integer field.
+
+``VNodeKind.bool``
+     The node has a single boolean field.
+
+``VNodeKint.vthunk``
+     The node is a `virtual thunk`:idx:. This means there is a
+     function attached to it that produces the ``VNode`` structure
+     on demand.
+
+``VNodeKint.dthunk``
+     The node is a `DOM thunk`:idx:. This means there is a
+     function attached to it that produces the ``Node`` DOM structure
+     on demand.
+
+For convenience of the resulting Nim DSL these tags have enum names
+that differ from their HTML equivalent:
+
+=================     =======================================================
+Enum value            HTML
+=================     =======================================================
+``tdiv``              ``div``  (changed because ``div`` is a keyword in Nim)
+``italic``            ``i``
+``bold``              ``b``
+``strikethrough``     ``s``
+``underlined``        ``u``
+=================     =======================================================
+
+
+A virtual dom node also has a special field set called ``key``, an integer
+that can be used as a data model specific key/id. It can be accessed in event
+handlers to change the data model. See the todoapp for an example of how to
+use it.
+
+**Note**: This is not a hint for the DOM diff algorithm, multipe nodes can
+all have the same key value.
+
+
+Event system
+============
+
+Karax does not abstract over the event system the DOM offers much: The same
+``Event`` structure is used. Every callback has the
+signature ``proc (ev: Event; n: VNode)``.
+
+

From 5d7166261712c0c590b519dddc413a599b598e07 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 14 Apr 2017 20:33:03 +0200
Subject: [PATCH 006/264] fixed .component macro

---
 docs.rst => docs/docs.rst |  0
 src/components.nim        | 27 +++++++++++++++------------
 src/karax.nim             |  1 -
 src/karaxprelude.nim      |  3 +++
 4 files changed, 18 insertions(+), 13 deletions(-)
 rename docs.rst => docs/docs.rst (100%)
 create mode 100644 src/karaxprelude.nim

diff --git a/docs.rst b/docs/docs.rst
similarity index 100%
rename from docs.rst
rename to docs/docs.rst
diff --git a/src/components.nim b/src/components.nim
index 30d5922..52775df 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -78,7 +78,9 @@ macro component*(prc: untyped): untyped =
     isvirtual = ComponentKind.Node
   else:
     error "component must return VNode or Node"
-  n[0] = ident("inner" & $name)
+  let realName = if name.kind == nnkPostfix: name[1] else: name
+  let nn = $realName
+  n[0] = ident("inner" & nn)
   var unpackCall = newCall(n[0])
   var counter = 0
   for i in 1.. <params.len:
@@ -89,27 +91,28 @@ macro component*(prc: untyped): untyped =
       unpackCall.add unpack(typ, counter)
       inc counter
 
-  template vwrapper(wname, nameStrLit, unpackCall) {.dirty.} =
-    proc wname*(args: seq[VNode]): VNode =
+  template vwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+    proc pname(args: seq[VNode]): VNode =
       unpackCall
-    vcomponents[cstring(nameStrLit)] = wname
+    vcomponents[cstring(nameStrLit)] = cname
 
-  template dwrapper(wname, nameStrLit, unpackCall) {.dirty.} =
-    proc wname(args: seq[VNode]): Node =
+  template dwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+    proc pname(args: seq[VNode]): Node =
       unpackCall
-    dcomponents[cstring(nameStrLit)] = wname
+    dcomponents[cstring(nameStrLit)] = cname
 
   result = newTree(nnkStmtList, n)
   if isvirtual == ComponentKind.VNode:
-    result.add getAst(vwrapper(newname name, newLit($name), unpackCall))
+    result.add getAst(vwrapper(newname name, realName, newLit(nn), unpackCall))
   else:
-    result.add getAst(dwrapper(newname name, newLit($name), unpackCall))
-  allcomponents[$name] = isvirtual
+    result.add getAst(dwrapper(newname name, realName, newLit(nn), unpackCall))
+  allcomponents[nn] = isvirtual
   when defined(debugKaraxDsl):
     echo repr result
 
 when isMainModule:
-  proc foo(x, y: int, b: bool; s: cstring): VNode {.component.} =
+  proc public*(x, y: int, b: bool; s: cstring): VNode {.component.} =
+    discard
+  proc private(x, y: int, b: bool; s: cstring): VNode {.component.} =
     discard
 
-
diff --git a/src/karax.nim b/src/karax.nim
index 0007ce5..99e103b 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -51,7 +51,6 @@ type
   Timeout* = ref object
 
 var
-  document* {.importc.}: Document
   toFocus: Node
   toFocusV: VNode
 
diff --git a/src/karaxprelude.nim b/src/karaxprelude.nim
new file mode 100644
index 0000000..285730a
--- /dev/null
+++ b/src/karaxprelude.nim
@@ -0,0 +1,3 @@
+## Include file that contains the common imports for the Karax framework.
+
+import karax, karaxdsl, vdom, components

From a9b12a231f46caaa2abab06e6d15d1f198126bac Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 14 Apr 2017 20:49:42 +0200
Subject: [PATCH 007/264] fixed components; added playerapp example

---
 examples/mediaplayer/mediaplayer.nim | 42 ++++++++++++++++++++++++++++
 examples/mediaplayer/playerapp.html  | 18 ++++++++++++
 examples/mediaplayer/playerapp.nim   | 24 ++++++++++++++++
 examples/mediaplayer/playerapp.nims  |  1 +
 src/components.nim                   | 20 +++++++++----
 5 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 examples/mediaplayer/mediaplayer.nim
 create mode 100644 examples/mediaplayer/playerapp.html
 create mode 100644 examples/mediaplayer/playerapp.nim
 create mode 100644 examples/mediaplayer/playerapp.nims

diff --git a/examples/mediaplayer/mediaplayer.nim b/examples/mediaplayer/mediaplayer.nim
new file mode 100644
index 0000000..d22e57d
--- /dev/null
+++ b/examples/mediaplayer/mediaplayer.nim
@@ -0,0 +1,42 @@
+
+import karax, karaxdsl, vdom, components
+
+const
+  Play = 0
+  Big = 1
+  Small = 2
+  Normal = 3
+
+proc paused(n: Node): bool {.importcpp: "#.paused".}
+proc play(n: Node) {.importcpp.}
+proc pause(n: Node) {.importcpp.}
+proc `width=`(n: Node, w: int) {.importcpp: "#.width = #".}
+
+proc mplayer*(id, resource: cstring): VNode {.component.} =
+  proc handler(ev: Event; n: VNode) =
+    let myVideo = document.getElementById(id)
+    case n.key
+    of Play:
+      if myVideo.paused:
+        myVideo.play()
+      else:
+        myVideo.pause()
+    of Big: myVideo.width = 560
+    of Small: myVideo.width = 320
+    of Normal: myVideo.width = 420
+    else: discard
+
+  result = buildHtml(tdiv):
+    button(onclick=handler, key=Play):
+      text "Play/Pause"
+    button(onclick=handler, key=Big):
+      text "Big"
+    button(onclick=handler, key=Small):
+      text "Small"
+    button(onclick=handler, key=Normal):
+      text "Normal"
+    br()
+    br()
+    video(id=id, width="420"):
+      source(src=resource, `type`="video/mp4"):
+        text "Your browser does not support HTML5 video."
diff --git a/examples/mediaplayer/playerapp.html b/examples/mediaplayer/playerapp.html
new file mode 100644
index 0000000..7b617f6
--- /dev/null
+++ b/examples/mediaplayer/playerapp.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Player app</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/playerapp.js"></script>
+<script type="text/javascript">
+  onload()
+</script>
+
+</body>
+</html>
diff --git a/examples/mediaplayer/playerapp.nim b/examples/mediaplayer/playerapp.nim
new file mode 100644
index 0000000..7a1ddb4
--- /dev/null
+++ b/examples/mediaplayer/playerapp.nim
@@ -0,0 +1,24 @@
+## Example app that shows how to write and embed a custom component.
+
+include karaxprelude
+import mediaplayer
+
+const url = "https://www.w3schools.com/html/mov_bbb.mp4"
+
+proc createDom(): VNode =
+  result = buildHtml(table):
+    tr:
+      td:
+        mplayer("vid1", url)
+      td:
+        mplayer("vid2", url)
+    tr:
+      td:
+        mplayer("vid3", url)
+      td:
+        mplayer("vid4", url)
+
+setRenderer createDom
+
+proc onload() {.exportc.} =
+  init()
diff --git a/examples/mediaplayer/playerapp.nims b/examples/mediaplayer/playerapp.nims
new file mode 100644
index 0000000..9028ff1
--- /dev/null
+++ b/examples/mediaplayer/playerapp.nims
@@ -0,0 +1 @@
+--path: "../../src"
diff --git a/src/components.nim b/src/components.nim
index 52775df..fbbc00d 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -91,21 +91,29 @@ macro component*(prc: untyped): untyped =
       unpackCall.add unpack(typ, counter)
       inc counter
 
-  template vwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+  template vwrapper(pname, unpackCall) {.dirty.} =
     proc pname(args: seq[VNode]): VNode =
       unpackCall
-    vcomponents[cstring(nameStrLit)] = cname
 
-  template dwrapper(pname, cname, nameStrLit, unpackCall) {.dirty.} =
+  template dwrapper(pname, unpackCall) {.dirty.} =
     proc pname(args: seq[VNode]): Node =
       unpackCall
-    dcomponents[cstring(nameStrLit)] = cname
+
+  template vregister(key, val) =
+    bind jdict.`[]=`
+    `[]=`(vcomponents, cstring(key), val)
+
+  template dregister(key, val) =
+    bind jdict.`[]=`
+    `[]=`(dcomponents, cstring(key), val)
 
   result = newTree(nnkStmtList, n)
   if isvirtual == ComponentKind.VNode:
-    result.add getAst(vwrapper(newname name, realName, newLit(nn), unpackCall))
+    result.add getAst(vwrapper(newname name, unpackCall))
+    result.add getAst(vregister(newLit(nn), realName))
   else:
-    result.add getAst(dwrapper(newname name, realName, newLit(nn), unpackCall))
+    result.add getAst(dwrapper(newname name, unpackCall))
+    result.add getAst(dregister(newLit(nn), realName))
   allcomponents[nn] = isvirtual
   when defined(debugKaraxDsl):
     echo repr result

From 3f14cdcf0d061aa80d7b15b42eec6b9bd9af4c56 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 14 Apr 2017 20:51:37 +0200
Subject: [PATCH 008/264] added missing files

---
 experiments/oldwidgets.nim | 113 +++++++++++
 experiments/scrollapp.nims |   1 +
 experiments/style.css      | 378 +++++++++++++++++++++++++++++++++++++
 3 files changed, 492 insertions(+)
 create mode 100644 experiments/oldwidgets.nim
 create mode 100644 experiments/scrollapp.nims
 create mode 100644 experiments/style.css

diff --git a/experiments/oldwidgets.nim b/experiments/oldwidgets.nim
new file mode 100644
index 0000000..46d87c2
--- /dev/null
+++ b/experiments/oldwidgets.nim
@@ -0,0 +1,113 @@
+var
+  linkCounter: int
+
+proc link*(id: int): VNode =
+  result = newVNode(VNodeKind.anchor)
+  result.setAttr("href", "#")
+  inc linkCounter
+  result.setAttr("id", $linkCounter & ":" & $id)
+
+proc link*(action: EventHandler): VNode =
+  result = newVNode(VNodeKind.anchor)
+  result.setAttr("href", "#")
+  result.setOnclick action
+
+when false:
+  proc button*(caption: cstring; action: EventHandler; disabled=false): VNode =
+    result = newVNode(VNodeKind.button)
+    result.add text(caption)
+    if action != nil:
+      result.setOnClick action
+    if disabled:
+      result.setAttr("disabled", "true")
+
+proc select*(choices: openarray[cstring]): VNode =
+  result = newVNode(VNodeKind.select)
+  var i = 0
+  for c in choices:
+    result.add tree(VNodeKind.option, [(cstring"value", toCstr(i))], text(c))
+    inc i
+
+proc select*(choices: openarray[(int, cstring)]): VNode =
+  result = newVNode(VNodeKind.select)
+  for c in choices:
+    result.add tree(VNodeKind.option, [(cstring"value", toCstr(c[0]))], text(c[1]))
+
+var radioCounter: int
+
+proc radio*(choices: openarray[(int, cstring)]): VNode =
+  result = newVNode(VNodeKind.fieldset)
+  var i = 0
+  inc radioCounter
+  for c in choices:
+    let id = cstring"radio_" & c[1] & toCstr(i)
+    var kid = tree(VNodeKind.input, [(cstring"type", cstring"radio"),
+      (cstring"id", id), (cstring"name", cstring"radio" & toCStr(radioCounter)),
+      (cstring"value", toCStr(c[0]))])
+    if i == 0:
+      kid.setAttr(cstring"checked", cstring"checked")
+    var lab = tree(VNodeKind.label, [(cstring"for", id)], text(c[1]))
+    kid.add lab
+    result.add kid
+    inc i
+
+proc tag*(kind: VNodeKind; id=cstring(nil), class=cstring(nil)): VNode =
+  result = newVNode(kind)
+  result.id = id
+  result.class = class
+
+proc tdiv*(id=cstring(nil), class=cstring(nil)): VNode = tag(VNodeKind.tdiv, id, class)
+proc span*(id=cstring(nil), class=cstring(nil)): VNode = tag(VNodeKind.span, id, class)
+
+proc valueAsInt*(e: Node): int = parseInt(e.value)
+
+proc th*(s: cstring): VNode =
+  result = newVNode(VNodeKind.th)
+  result.add text(s)
+
+proc td*(s: string): VNode =
+  result = newVNode(VNodeKind.td)
+  result.add text(s)
+
+proc td*(s: VNode): VNode =
+  result = newVNode(VNodeKind.td)
+  result.add s
+
+proc td*(class: cstring; s: VNode): VNode =
+  result = newVNode(VNodeKind.td)
+  result.add s
+  result.class = class
+
+proc table*(class=cstring(nil), kids: varargs[VNode]): VNode =
+  result = tag(VNodeKind.table, nil, class)
+  for k in kids: result.add k
+
+proc tr*(kids: varargs[VNode]): VNode =
+  result = newVNode(VNodeKind.tr)
+  for k in kids:
+    if k.kind in {VNodeKind.td, VNodeKind.th}:
+      result.add k
+    else:
+      result.add td(k)
+
+proc suffix*(s, prefix: cstring): cstring =
+  if s.startsWith(prefix):
+    result = s.substr(prefix.len)
+  else:
+    kout(cstring"bug! " & s & cstring" does not start with " & prefix)
+
+proc suffixAsInt*(s, prefix: cstring): int = parseInt(suffix(s, prefix))
+
+#proc ceil(f: float): int {.importc: "Math.ceil", nodecl.}
+
+
+when false:
+  var plugins {.exportc.}: seq[(string, proc())] = @[]
+
+  proc onInput(val: cstring) =
+    kout val
+    if val == "dyn":
+    kout(plugins.len)
+    if plugins.len > 0:
+      plugins[0][1]()
+
diff --git a/experiments/scrollapp.nims b/experiments/scrollapp.nims
new file mode 100644
index 0000000..532b206
--- /dev/null
+++ b/experiments/scrollapp.nims
@@ -0,0 +1 @@
+--path: "../src"
diff --git a/experiments/style.css b/experiments/style.css
new file mode 100644
index 0000000..ceaf090
--- /dev/null
+++ b/experiments/style.css
@@ -0,0 +1,378 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.todomvc-wrapper {
+    visibility: visible !important;
+}
+
+button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+body {
+    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.4em;
+    background: #f5f5f5;
+    color: #4d4d4d;
+    min-width: 230px;
+    max-width: 550px;
+    margin: 0 auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    font-weight: 300;
+}
+
+button,
+input[type="checkbox"] {
+    outline: none;
+}
+
+.hidden {
+    display: none;
+}
+
+.todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+                0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    font-size: 24px;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: 1.4em;
+    border: 0;
+    outline: none;
+    color: inherit;
+    padding: 6px;
+    border: 1px solid #999;
+    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+.new-todo {
+    padding: 16px 16px 16px 60px;
+    border: none;
+    background: rgba(0, 0, 0, 0.003);
+    box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+    position: relative;
+    z-index: 2;
+    border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+    display: none;
+}
+
+.toggle-all {
+    position: absolute;
+    top: -55px;
+    left: -12px;
+    width: 60px;
+    height: 34px;
+    text-align: center;
+    border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+    content: '>';
+    font-size: 22px;
+    color: #e6e6e6;
+    padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked:before {
+    color: #737373;
+}
+
+.todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+    border-bottom: none;
+}
+
+.todo-list li.editing {
+    border-bottom: none;
+    padding: 0;
+}
+
+.todo-list li.editing .edit {
+    display: block;
+    width: 506px;
+    padding: 13px 17px 12px 17px;
+    margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+    display: none;
+}
+
+.todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none; /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.todo-list li .toggle:after {
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+.todo-list li .toggle:checked:after {
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+.todo-list li label {
+    white-space: pre-line;
+    word-break: break-all;
+    padding: 15px 60px 15px 15px;
+    margin-left: 45px;
+    display: block;
+    line-height: 1.2;
+    transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
+    font-size: 30px;
+    color: #cc9a9a;
+    margin-bottom: 11px;
+    transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+    color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+    content: 'x';
+}
+
+.todo-list li:hover .destroy {
+    display: block;
+}
+
+.todo-list li.editing:last-child {
+    margin-bottom: -1px;
+}
+
+.footer {
+    color: #777;
+    padding: 10px 15px;
+    height: 20px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+                0 8px 0 -3px #f6f6f6,
+                0 9px 1px -3px rgba(0, 0, 0, 0.2),
+                0 16px 0 -6px #f6f6f6,
+                0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+    float: left;
+    text-align: left;
+}
+
+.todo-count strong {
+    font-weight: 300;
+}
+
+.filters {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: absolute;
+    right: 0;
+    left: 0;
+}
+
+.filters li {
+    display: inline;
+}
+
+.filters li a {
+    color: inherit;
+    margin: 3px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+}
+
+.filters li a.selected,
+.filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+    float: right;
+    position: relative;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+}
+
+.clear-completed:hover {
+    text-decoration: underline;
+}
+
+.info {
+    margin: 65px auto 0;
+    color: #bfbfbf;
+    /* font-size: 10px; */
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-align: center;
+}
+
+.info p {
+    line-height: 1;
+}
+
+.info a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 400;
+}
+
+.info a:hover {
+    text-decoration: underline;
+}
+
+/*
+    Hack to remove background from Mobile Safari.
+    Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .toggle-all,
+    .todo-list li .toggle {
+        background: none;
+    }
+
+    .todo-list li .toggle {
+        height: 40px;
+    }
+
+    .toggle-all {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+        -webkit-appearance: none;
+        appearance: none;
+    }
+}
+
+@media (max-width: 430px) {
+    .footer {
+        height: 50px;
+    }
+
+    .filters {
+        bottom: 10px;
+    }
+}
\ No newline at end of file

From 546162c3882e604956f494da1f6a4f8689fe4a4d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 14 Apr 2017 20:59:25 +0200
Subject: [PATCH 009/264] added what's left to do

---
 readme.rst | 11 +++++++++++
 todo.rst   |  6 ------
 2 files changed, 11 insertions(+), 6 deletions(-)
 delete mode 100644 todo.rst

diff --git a/readme.rst b/readme.rst
index 64582eb..daa9fef 100644
--- a/readme.rst
+++ b/readme.rst
@@ -11,6 +11,9 @@ To try it out, run::
   nim js todoapp.nim
   open todoapp.html
 
+  cd ../mediaplayer
+  nim js playerapp.nim
+  open playerapp.html
 
 It uses a virtual DOM like React, but is much smaller than the existing
 frameworks plus of course it's written in Nim for Nim. No external
@@ -24,3 +27,11 @@ Goals
 - Leverage Nim's macro system to produce a framework that allows
   for the development of applications that are boilerplate free.
 - Keep it small, keep it fast, keep it flexible.
+
+
+Todo
+====
+
+- Expose a way to access the attached real DOM element so that scroll
+  positions etc can be used.
+- Expose a nice API to do Ajax requests.
diff --git a/todo.rst b/todo.rst
deleted file mode 100644
index 7ddd5be..0000000
--- a/todo.rst
+++ /dev/null
@@ -1,6 +0,0 @@
-- Better virtual dom diff'ing algorithm: find longest common subsequence
-- add CSS changes to todo example.nim
-- handle onscroll events
-- introduce a way to test karax applications
-- introduce a way to do AJAX
-

From cfed5e05ec544e3cd4403836507b30d8c666eb74 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 15 Apr 2017 11:17:12 +0200
Subject: [PATCH 010/264] added more event kinds

---
 src/vdom.nim | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/vdom.nim b/src/vdom.nim
index 1f55e61..5e66a23 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -48,6 +48,20 @@ type
     onblur, ## An element lost the focus.
     onchange, ## The selected value of an element was changed.
     onscroll, ## The user scrolled within an element.
+
+    onmousedown, ## A pointing device button (usually a mouse) is pressed
+                 ## on an element.
+    onmouseenter, ## A pointing device is moved onto the element that
+                  ## has the listener attached.
+    onmouseleave, ## A pointing device is moved off the element that
+                  ## has the listener attached.
+    onmousemove, ## A pointing device is moved over an element.
+    onmouseout, ## A pointing device is moved off the element that
+                ## has the listener attached or off one of its children.
+    onmouseover, ## A pointing device is moved onto the element that has
+                 ## the listener attached or onto one of its children.
+    onmouseup, ## A pointing device button is released over an element.
+
     ondrag,  ## An element or text selection is being dragged (every 350ms).
     ondragend, ## A drag operation is being ended (by releasing a mouse button
                ## or hitting the escape key).

From 5bd43f13f94ec6c41e5d4013b284bddc364b87a7 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 15 Apr 2017 11:18:15 +0200
Subject: [PATCH 011/264] added code snippet

---
 experiments/oldwidgets.nim | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/experiments/oldwidgets.nim b/experiments/oldwidgets.nim
index 46d87c2..fce9908 100644
--- a/experiments/oldwidgets.nim
+++ b/experiments/oldwidgets.nim
@@ -111,3 +111,22 @@ when false:
     if plugins.len > 0:
       plugins[0][1]()
 
+var
+  images: seq[cstring] = @[cstring"a", "b", "c", "d"]
+
+proc carousel*(): VNode =
+  var currentIndex = 0
+
+  proc next(ev: Event; n: VNode) =
+    currentIndex = (currentIndex + 1) mod images.len
+
+  proc prev(ev: Event; n: VNode) =
+    currentIndex = (currentIndex - 1) mod images.len
+
+  result = buildHtml(tdiv):
+    text images[currentIndex]
+    button(onclick = next):
+      text "Next"
+    button(onclick = prev):
+      text "Previous"
+

From d9bb8d99e8837371507b3ab39b0700e0f7a824ab Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 15 Apr 2017 11:18:43 +0200
Subject: [PATCH 012/264] made readme.rst less confusing

---
 readme.rst | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index daa9fef..8f45568 100644
--- a/readme.rst
+++ b/readme.rst
@@ -10,8 +10,9 @@ To try it out, run::
   cd examples/todoapp
   nim js todoapp.nim
   open todoapp.html
+  cd ../..
 
-  cd ../mediaplayer
+  cd examples/mediaplayer
   nim js playerapp.nim
   open playerapp.html
 

From 5bc7d4e3369b093bfc66f68c3d8391ffcf0777af Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 15 Apr 2017 11:50:05 +0200
Subject: [PATCH 013/264] removed the need to call karax.init explicitly

---
 examples/mediaplayer/playerapp.html |  3 ---
 examples/mediaplayer/playerapp.nim  |  3 ---
 examples/todoapp/todoapp.html       |  3 ---
 examples/todoapp/todoapp.nim        |  9 +++------
 src/karax.nim                       | 11 ++++++-----
 5 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/examples/mediaplayer/playerapp.html b/examples/mediaplayer/playerapp.html
index 7b617f6..9e076e6 100644
--- a/examples/mediaplayer/playerapp.html
+++ b/examples/mediaplayer/playerapp.html
@@ -10,9 +10,6 @@
 <div id="ROOT" />
 
 <script type="text/javascript" src="nimcache/playerapp.js"></script>
-<script type="text/javascript">
-  onload()
-</script>
 
 </body>
 </html>
diff --git a/examples/mediaplayer/playerapp.nim b/examples/mediaplayer/playerapp.nim
index 7a1ddb4..e611eec 100644
--- a/examples/mediaplayer/playerapp.nim
+++ b/examples/mediaplayer/playerapp.nim
@@ -19,6 +19,3 @@ proc createDom(): VNode =
         mplayer("vid4", url)
 
 setRenderer createDom
-
-proc onload() {.exportc.} =
-  init()
diff --git a/examples/todoapp/todoapp.html b/examples/todoapp/todoapp.html
index 726070a..488a3bf 100644
--- a/examples/todoapp/todoapp.html
+++ b/examples/todoapp/todoapp.html
@@ -11,9 +11,6 @@
 <div id="ROOT" />
 
 <script type="text/javascript" src="nimcache/todoapp.js"></script>
-<script type="text/javascript">
-  onload()
-</script>
 
 </body>
 </html>
diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 23840f7..f2f0083 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -106,11 +106,8 @@ proc createDom(): VNode =
           text "Clear completed (" & &completedCount & ")"
 
 setOnHashChange(proc(hash: cstring) =
-  if hash == cstring"#/": filter = all
-  elif hash == cstring"#/completed": filter = completed
-  elif hash == cstring"#/active": filter = active
+  if hash == "#/": filter = all
+  elif hash == "#/completed": filter = completed
+  elif hash == "#/active": filter = active
 )
 setRenderer createDom
-
-proc onload() {.exportc.} =
-  init()
diff --git a/src/karax.nim b/src/karax.nim
index 99e103b..00efc5e 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -112,14 +112,11 @@ var
   dorender: proc (): VNode {.closure.}
   currentTree: VNode
 
-proc setRenderer*(renderer: proc (): VNode) =
-  dorender = renderer
-
 proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
 proc clearTimeout*(t: Timeout) {.importc, nodecl.}
 #proc targetElem*(e: Event): Element = cast[Element](e.target)
 
-proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
+proc getElementById(id: cstring): Element {.importc: "document.getElementById", nodecl.}
 
 #proc getElementsByClassName*(cls: cstring): seq[Element] {.importc:
 #  "document.getElementsByClassName", nodecl.}
@@ -259,9 +256,13 @@ proc redraw*() =
   else:
     dodraw()
 
-proc init*() =
+proc init(ev: Event) =
   reqFrame(dodraw)
 
+proc setRenderer*(renderer: proc (): VNode) =
+  dorender = renderer
+  window.onload = init
+
 proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
 proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
 proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}

From 686ad23f2f0f7311c2e4220339eb6f10afe25f6f Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 15 Apr 2017 15:50:07 +0200
Subject: [PATCH 014/264] reworked event handling again; added scrollapp
 example

---
 examples/scrollapp/scrollapp.html |  15 ++
 examples/scrollapp/scrollapp.nim  |  24 +++
 examples/scrollapp/scrollapp.nims |   1 +
 examples/todoapp/todoapp.nim      |  12 +-
 experiments/oldwidgets.nim        |  71 +++++++++
 readme.rst                        |   2 -
 src/dom.nim                       | 110 ++++++++------
 src/karax.nim                     | 235 ++++++++++--------------------
 src/karaxdsl.nim                  |   3 +-
 src/vdom.nim                      |  12 +-
 tests/diffDomTests.nim            |  12 +-
 tests/diffDomTests.nims           |   1 +
 12 files changed, 273 insertions(+), 225 deletions(-)
 create mode 100644 examples/scrollapp/scrollapp.html
 create mode 100644 examples/scrollapp/scrollapp.nim
 create mode 100644 examples/scrollapp/scrollapp.nims
 create mode 100644 tests/diffDomTests.nims

diff --git a/examples/scrollapp/scrollapp.html b/examples/scrollapp/scrollapp.html
new file mode 100644
index 0000000..1ff8b1b
--- /dev/null
+++ b/examples/scrollapp/scrollapp.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Todo app</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/scrollapp.js"></script>
+
+</body>
+</html>
diff --git a/examples/scrollapp/scrollapp.nim b/examples/scrollapp/scrollapp.nim
new file mode 100644
index 0000000..e5ef9c1
--- /dev/null
+++ b/examples/scrollapp/scrollapp.nim
@@ -0,0 +1,24 @@
+## Example that shows how to accomplish an "infinitely scrolling" app.
+
+include karaxprelude
+import jstrutils, dom
+
+var entries: seq[cstring] = @[]
+for i in 1..500:
+  entries.add(cstring("Entry ") & &i)
+
+proc scrollEvent(ev: Event; n: VNode) =
+  let d = n.dom
+  if d != nil and inViewport(d.lastChild):
+    # "load" more data:
+    for i in 1..50:
+      entries.add(cstring("Loaded Entry ") & &i)
+
+proc createDom(): VNode =
+  result = buildHtml():
+    tdiv(onscroll=scrollEvent, style="height: 400px; overflow: scroll"):
+      for x in entries:
+        tdiv:
+          text x
+
+setRenderer createDom
diff --git a/examples/scrollapp/scrollapp.nims b/examples/scrollapp/scrollapp.nims
new file mode 100644
index 0000000..9028ff1
--- /dev/null
+++ b/examples/scrollapp/scrollapp.nims
@@ -0,0 +1 @@
+--path: "../../src"
diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index f2f0083..9027603 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -59,8 +59,8 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
           button(class = "destroy", key=id, onclick=removeHandler)
       else:
         input(class = "edit", name = "title", key=id,
-          onfocusLost = focusLost,
-          onenter = editEntry, value = d, setFocus)
+          onblur = focusLost,
+          onkeyupenter = editEntry, value = d, setFocus)
 
 proc createDom(): VNode =
   result = buildHtml(tdiv(class="todomvc-wrapper")):
@@ -69,7 +69,7 @@ proc createDom(): VNode =
         h1:
           text "todos"
         input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
-              onenter = onTodoEnter, setFocus)
+              onkeyupenter = onTodoEnter, setFocus)
       section(class = "main"):
         input(class = "toggle-all", `type` = "checkbox", name = "toggle")
         label(`for` = "toggle-all", onclick = onAllDone):
@@ -94,13 +94,13 @@ proc createDom(): VNode =
           text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
         ul(class = "filters"):
           li:
-            anchor(class = selected(all), href = "#/"):
+            a(class = selected(all), href = "#/"):
               text "All"
           li:
-            anchor(class = selected(active), href = "#/active"):
+            a(class = selected(active), href = "#/active"):
               text "Active"
           li:
-            anchor(class = selected(completed), href = "#/completed"):
+            a(class = selected(completed), href = "#/completed"):
               text "Completed"
         button(class = "clear-completed", onclick = clearCompleted):
           text "Clear completed (" & &completedCount & ")"
diff --git a/experiments/oldwidgets.nim b/experiments/oldwidgets.nim
index fce9908..023dc98 100644
--- a/experiments/oldwidgets.nim
+++ b/experiments/oldwidgets.nim
@@ -100,6 +100,50 @@ proc suffixAsInt*(s, prefix: cstring): int = parseInt(suffix(s, prefix))
 
 #proc ceil(f: float): int {.importc: "Math.ceil", nodecl.}
 
+proc realtimeInput*(val: cstring; action: EventHandler): VNode =
+  var timer: Timeout
+  proc onkeyup(ev: Event; n: VNode) =
+    proc wrapper() = keyeventBody()
+
+    if timer != nil: clearTimeout(timer)
+    timer = setTimeout(wrapper, 400)
+  result = tree(VNodeKind.input, [(cstring"type", cstring"text")])
+  result.value = val
+  result.addEventListener(EventKind.onkeyup, onkeyup)
+
+proc enterInput*(id, val: cstring; action: EventHandler): VNode =
+  proc onkeyup(ev: Event; n: VNode) =
+    if ev.keyCode == 13: keyeventBody()
+
+  result = tree(VNodeKind.input, [(cstring"type", cstring"text")])
+  result.id = id
+  result.value = val
+  result.addEventListener(EventKind.onkeyup, onkeyup)
+
+proc setOnEnter*(n: VNode; action: EventHandler) =
+  proc onkeyup(ev: Event; n: VNode) =
+    if ev.keyCode == 13: keyeventBody()
+  n.addEventListener(EventKind.onkeyup, onkeyup)
+
+proc setOnscroll*(action: proc(min, max: VKey; diff: int)) =
+  var oldY = window.pageYOffset
+
+  proc wrapper(ev: Event) =
+    let dir = window.pageYOffset - oldY
+    if dir == 0: return
+
+    var a = VKey high(int)
+    var b = VKey 0
+    var h, count: int
+    document.visibleKeys(a, b, h, count)
+    let avgh = h / count
+    let diff = toInt(dir.float / avgh)
+    if diff != 0:
+      oldY = window.pageYOffset
+      action(a, b, diff)
+      redraw()
+
+  document.addEventListener("scroll", wrapper)
 
 when false:
   var plugins {.exportc.}: seq[(string, proc())] = @[]
@@ -130,3 +174,30 @@ proc carousel*(): VNode =
     button(onclick = prev):
       text "Previous"
 
+#proc targetElem*(e: Event): Element = cast[Element](e.target)
+
+#proc getElementsByClassName*(cls: cstring): seq[Element] {.importc:
+#  "document.getElementsByClassName", nodecl.}
+#proc textContent(e: Node): cstring {.
+#  importcpp: "#.textContent", nodecl.}
+
+proc isElementInViewport(el: Node; h: var int): bool =
+  let rect = el.getBoundingClientRect()
+  h = rect.bottom - rect.top
+  result = rect.top >= 0 and rect.left >= 0 and
+           rect.bottom <= clientHeight() and
+           rect.right <= clientWidth()
+
+proc visibleKeys(e: Node; a, b: var VKey; h, count: var int) =
+  # we only care about nodes that have a key:
+  var hh = 0
+  # do not recurse if there is a 'key' field already:
+  if e.key >= 0:
+    if isElementInViewport(e, hh):
+      inc count
+      inc h, hh
+      a = min(a, e.key)
+      b = max(b, e.key)
+  else:
+    for i in 0..<e.len:
+      visibleKeys(e[i], a, b, h, count)
diff --git a/readme.rst b/readme.rst
index 8f45568..791d68b 100644
--- a/readme.rst
+++ b/readme.rst
@@ -33,6 +33,4 @@ Goals
 Todo
 ====
 
-- Expose a way to access the attached real DOM element so that scroll
-  positions etc can be used.
 - Expose a nice API to do Ajax requests.
diff --git a/src/dom.nim b/src/dom.nim
index 87d1cfc..f3d3f73 100644
--- a/src/dom.nim
+++ b/src/dom.nim
@@ -46,17 +46,17 @@ type
     closed*: bool
     defaultStatus*: cstring
     innerHeight*, innerWidth*: int
-    locationbar*: ref TLocationBar
-    menubar*: ref TMenuBar
+    locationbar*: ref LocationBar
+    menubar*: ref MenuBar
     name*: cstring
     outerHeight*, outerWidth*: int
     pageXOffset*, pageYOffset*: int
-    personalbar*: ref TPersonalBar
-    scrollbars*: ref TScrollBars
-    statusbar*: ref TStatusBar
+    personalbar*: ref PersonalBar
+    scrollbars*: ref ScrollBars
+    statusbar*: ref StatusBar
     status*: cstring
-    toolbar*: ref TToolBar
-    frames*: seq[TFrame]
+    toolbar*: ref ToolBar
+    frames*: seq[Frame]
 
   Frame* = ref FrameObj
   FrameObj {.importc.} = object of WindowObj
@@ -360,26 +360,26 @@ type
     language*: cstring
     platform*: cstring
     userAgent*: cstring
-    mimeTypes*: seq[ref TMimeType]
+    mimeTypes*: seq[ref MimeType]
 
-  TPlugin* {.importc.} = object of RootObj
+  Plugin* {.importc.} = object of RootObj
     description*: cstring
     filename*: cstring
     name*: cstring
 
-  TMimeType* {.importc.} = object of RootObj
+  MimeType* {.importc.} = object of RootObj
     description*: cstring
-    enabledPlugin*: ref TPlugin
+    enabledPlugin*: ref Plugin
     suffixes*: seq[cstring]
     `type`*: cstring
 
-  TLocationBar* {.importc.} = object of RootObj
+  LocationBar* {.importc.} = object of RootObj
     visible*: bool
-  TMenuBar* = TLocationBar
-  TPersonalBar* = TLocationBar
-  TScrollBars* = TLocationBar
-  TToolBar* = TLocationBar
-  TStatusBar* = TLocationBar
+  MenuBar* = LocationBar
+  PersonalBar* = LocationBar
+  ScrollBars* = LocationBar
+  ToolBar* = LocationBar
+  StatusBar* = LocationBar
 
   Screen = ref ScreenObj
   ScreenObj {.importc.} = object of RootObj
@@ -390,8 +390,15 @@ type
     pixelDepth*: int
     width*: int
 
-  TTimeOut* {.importc.} = object of RootObj
-  TInterval* {.importc.} = object of RootObj
+  TimeOut* {.importc.} = ref object of RootObj
+  Interval* {.importc.} = object of RootObj
+
+proc len*(x: Node): int {.importcpp: "#.childNodes.length".}
+proc `[]`*(x: Node; idx: int): Element {.importcpp: "#.childNodes[#]".}
+
+proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
+proc clearTimeout*(t: Timeout) {.importc, nodecl.}
+proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
 
 {.push importcpp.}
 
@@ -403,8 +410,8 @@ proc alert*(w: Window, msg: cstring)
 proc back*(w: Window)
 proc blur*(w: Window)
 proc captureEvents*(w: Window, eventMask: int) {.deprecated.}
-proc clearInterval*(w: Window, interval: ref TInterval)
-proc clearTimeout*(w: Window, timeout: ref TTimeOut)
+proc clearInterval*(w: Window, interval: ref Interval)
+proc clearTimeout*(w: Window, timeout: TimeOut)
 proc close*(w: Window)
 proc confirm*(w: Window, msg: cstring): bool
 proc disableExternalCapture*(w: Window)
@@ -427,10 +434,10 @@ proc resizeTo*(w: Window, x, y: int)
 proc routeEvent*(w: Window, event: Event)
 proc scrollBy*(w: Window, x, y: int)
 proc scrollTo*(w: Window, x, y: int)
-proc setInterval*(w: Window, code: cstring, pause: int): ref TInterval
-proc setInterval*(w: Window, function: proc (), pause: int): ref TInterval
-proc setTimeout*(w: Window, code: cstring, pause: int): ref TTimeOut
-proc setTimeout*(w: Window, function: proc (), pause: int): ref TInterval
+proc setInterval*(w: Window, code: cstring, pause: int): ref Interval
+proc setInterval*(w: Window, function: proc (), pause: int): ref Interval
+proc setTimeout*(w: Window, code: cstring, pause: int): TimeOut
+proc setTimeout*(w: Window, function: proc (), pause: int): ref Interval
 proc stop*(w: Window)
 proc requestAnimationFrame*(w: Window, function: proc (time: float)): int
 proc cancelAnimationFrame*(w: Window, id: int)
@@ -543,24 +550,37 @@ proc parseInt*(s: cstring): int {.importc, nodecl.}
 proc parseInt*(s: cstring, radix: int):int {.importc, nodecl.}
 
 
+proc id*(n: Node): cstring {.importcpp: "#.id", nodecl.}
+proc `id=`*(n: Node; x: cstring) {.importcpp: "#.id = #", nodecl.}
+proc class*(n: Node): cstring {.importcpp: "#.className", nodecl.}
+proc `class=`*(n: Node; v: cstring) {.importcpp: "#.className = #", nodecl.}
+
+proc value*(n: Node): cstring {.importcpp: "#.value", nodecl.}
+proc `value=`*(n: Node; v: cstring) {.importcpp: "#.value = #", nodecl.}
+
+proc `disabled=`*(n: Node; v: bool) {.importcpp: "#.disabled = #", nodecl.}
+
+proc getElementsByClass*(n: Node; name: cstring): seq[Node] {.
+  importcpp: "#.getElementsByClassName(#)", nodecl.}
+
+
 type
-  TEventHandlers* {.deprecated.} = EventTargetObj
-  TWindow* {.deprecated.} = WindowObj
-  TFrame* {.deprecated.} = FrameObj
-  TNode* {.deprecated.} = NodeObj
-  TDocument* {.deprecated.} = DocumentObj
-  TElement* {.deprecated.} = ElementObj
-  TLink* {.deprecated.} = LinkObj
-  TEmbed* {.deprecated.} = EmbedObj
-  TAnchor* {.deprecated.} = AnchorObj
-  TOption* {.deprecated.} = OptionObj
-  TForm* {.deprecated.} = FormObj
-  TImage* {.deprecated.} = ImageObj
-  TNodeType* {.deprecated.} = NodeType
-  TEvent* {.deprecated.} = EventObj
-  TLocation* {.deprecated.} = LocationObj
-  THistory* {.deprecated.} = HistoryObj
-  TNavigator* {.deprecated.} = NavigatorObj
-  TStyle* {.deprecated.} = StyleObj
-  TScreen* {.deprecated.} = ScreenObj
-  TApplet* {.importc, deprecated.} = object of RootObj
+  BoundingRect* {.importc.} = object
+    top*, bottom*, left*, right*: int
+
+proc getBoundingClientRect*(e: Node): BoundingRect {.
+  importcpp: "getBoundingClientRect", nodecl.}
+proc clientHeight*(): int {.
+  importcpp: "(window.innerHeight || document.documentElement.clientHeight)@", nodecl}
+proc clientWidth*(): int {.
+  importcpp: "(window.innerWidth || document.documentElement.clientWidth)@", nodecl}
+
+proc inViewport*(el: Node): bool =
+  let rect = el.getBoundingClientRect()
+  result = rect.top >= 0 and rect.left >= 0 and
+           rect.bottom <= clientHeight() and
+           rect.right <= clientWidth()
+
+proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
+proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
+proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}
diff --git a/src/karax.nim b/src/karax.nim
index 00efc5e..a535ae7 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -1,28 +1,12 @@
-# Simple lib to write JS UIs
+## Karax -- Single page applications for Nim.
 
 import dom, vdom, jstrutils, components, jdict
 
-export dom.Event, dom.cloneNode, dom
-
-proc len(x: Node): int {.importcpp: "#.childNodes.length".}
-proc `[]`(x: Node; idx: int): Element {.importcpp: "#.childNodes[#]".}
+export dom.Event #, dom.cloneNode, dom
 
 proc kout*[T](x: T) {.importc: "console.log", varargs.}
   ## the preferred way of debugging karax applications.
 
-proc id*(e: Node): cstring {.importcpp: "#.id", nodecl.}
-proc `id=`*(e: Node; x: cstring) {.importcpp: "#.id = #", nodecl.}
-proc class*(e: Node): cstring {.importcpp: "#.className", nodecl.}
-proc `class=`*(e: Node; v: cstring) {.importcpp: "#.className = #", nodecl.}
-
-proc value*(e: Node): cstring {.importcpp: "#.value", nodecl.}
-proc `value=`*(e: Node; v: cstring) {.importcpp: "#.value = #", nodecl.}
-
-proc `disabled=`*(e: Node; v: bool) {.importcpp: "#.disabled = #", nodecl.}
-
-proc getElementsByClass*(e: Node; name: cstring): seq[Node] {.
-  importcpp: "#.getElementsByClassName(#)", nodecl.}
-
 proc hasProp(e: Node; prop: cstring): bool {.importcpp: "(#.hasOwnProperty(#))".}
 proc rawkey(e: Node): VKey {.importcpp: "#.karaxKey", nodecl.}
 proc key*(e: Node): VKey =
@@ -30,26 +14,6 @@ proc key*(e: Node): VKey =
   else: result = -1
 proc `key=`*(e: Node; x: VKey) {.importcpp: "#.karaxKey = #", nodecl.}
 
-type
-  BoundingRect {.importc.} = object
-    top, bottom, left, right: int
-
-proc getBoundingClientRect(e: Node): BoundingRect {.
-  importcpp: "getBoundingClientRect", nodecl.}
-proc clientHeight(): int {.
-  importcpp: "(window.innerHeight || document.documentElement.clientHeight)@", nodecl}
-proc clientWidth(): int {.
-  importcpp: "(window.innerWidth || document.documentElement.clientWidth)@", nodecl}
-
-when false:
-  proc pageYOffset(): int {.
-    importcpp: "(window.pageYOffset)@", nodecl}
-  proc pageXOffset(): int {.
-    importcpp: "(window.pageXOffset)@", nodecl}
-
-type
-  Timeout* = ref object
-
 var
   toFocus: Node
   toFocusV: VNode
@@ -57,24 +21,69 @@ var
 proc setFocus*(n: VNode) =
   toFocusV = n
 
-proc isElementInViewport(el: Node; h: var int): bool =
-  let rect = el.getBoundingClientRect()
-  h = rect.bottom - rect.top
-  result = rect.top >= 0 and rect.left >= 0 and
-           rect.bottom <= clientHeight() and
-           rect.right <= clientWidth()
+# ----------------- event wrapping ---------------------------------------
+
+template nativeValue(ev): cstring = cast[Element](ev.target).value
+template setNativeValue(ev, val) = cast[Element](ev.target).value = val
+
+template keyeventBody() =
+  n.value = nativeValue(ev)
+  action(ev, n)
+  setNativeValue(ev, n.value)
+  # Do not call redraw() here! That is already done
+  # by ``karax.addEventHandler``.
+
+proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
+  proc stdWrapper(): (proc (ev: Event)) =
+    let action = action
+    let n = n
+    result = proc (ev: Event) =
+      action(ev, n)
+
+  proc enterWrapper(): (proc (ev: Event)) =
+    let action = action
+    let n = n
+    result = proc (ev: Event) =
+      if ev.keyCode == 13: keyeventBody()
+
+  proc laterWrapper(): (proc (ev: Event)) =
+    let action = action
+    let n = n
+    var timer: Timeout
+    result = proc (ev: Event) =
+      proc wrapper() = keyeventBody()
+      if timer != nil: clearTimeout(timer)
+      timer = setTimeout(wrapper, 400)
+
+  case k
+  of EventKind.onkeyuplater:
+    d.addEventListener("keyup", laterWrapper())
+  of EventKind.onkeyupenter:
+    d.addEventListener("keyup", enterWrapper())
+  else:
+    d.addEventListener(toEventName[k], stdWrapper())
+
+# --------------------- DOM diff -----------------------------------------
+
+template detach(n: VNode) = n.dom = nil
+template attach(n: Vnode) = n.dom = result
 
 proc vnodeToDom(n: VNode): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
+    attach n
   elif n.kind == VNodeKind.vthunk:
     let x = callThunk(vcomponents[n.text], n)
-    return vnodeToDom(x)
+    result = vnodeToDom(x)
+    attach n
+    return result
   elif n.kind == VNodeKind.dthunk:
-    let x = callThunk(dcomponents[n.text], n)
-    return x
+    result = callThunk(dcomponents[n.text], n)
+    attach n
+    return result
   else:
     result = document.createElement(toTag[n.kind])
+    attach n
     for k in n:
       appendChild(result, vnodeToDom(k))
     # text is mapped to 'value':
@@ -89,14 +98,8 @@ proc vnodeToDom(n: VNode): Node =
   for k, v in attrs(n):
     if v != nil:
       result.setAttr(k, v)
-  let myn = n
   for e, h in items(n.events):
-    proc wrapper(): proc (ev: Event) =
-      let hh = h
-      result = proc (ev: Event) =
-        assert myn != nil
-        hh(ev, myn)
-    result.addEventListener(toEventName[e], wrapper())
+    wrapEvent(result, n, e, h)
   if n == toFocusV and toFocus.isNil:
     toFocus = result
 
@@ -112,23 +115,12 @@ var
   dorender: proc (): VNode {.closure.}
   currentTree: VNode
 
-proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
-proc clearTimeout*(t: Timeout) {.importc, nodecl.}
-#proc targetElem*(e: Event): Element = cast[Element](e.target)
-
-proc getElementById(id: cstring): Element {.importc: "document.getElementById", nodecl.}
-
-#proc getElementsByClassName*(cls: cstring): seq[Element] {.importc:
-#  "document.getElementsByClassName", nodecl.}
-#proc textContent(e: Node): cstring {.
-#  importcpp: "#.textContent", nodecl.}
-
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
   x.parentNode.replaceChild(newTree, x)
   #newTree.id = id
 
-proc equals(a, b: VNode): bool =
+proc equalsShallow(a, b: VNode): bool =
   if a.kind != b.kind: return false
   if a.id != b.id: return false
   if a.key != b.key: return false
@@ -138,7 +130,7 @@ proc equals(a, b: VNode): bool =
     if a.text != b.text: return false
     if a.len != b.len: return false
     for i in 0..<a.len:
-      if not equals(a[i], b[i]): return false
+      if not equalsShallow(a[i], b[i]): return false
   if not sameAttrs(a, b): return false
   if a.class != b.class: return false
   # XXX test event listeners here?
@@ -156,7 +148,8 @@ proc equalsTree(a, b: VNode): bool =
     return eq(a, b)
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
-  if not equals(newNode, oldNode):
+  if not equalsShallow(newNode, oldNode):
+    detach(oldNode)
     let n = vnodeToDom(newNode)
     if parent == nil:
       replaceById("ROOT", n)
@@ -175,6 +168,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
           current.appendChild(vnodeToDom(newNode[i]))
       elif oldLength > newLength:
         for i in countdown(oldLength-1, newLength):
+          detach(oldNode[i])
           current.removeChild(current.lastChild)
     else:
       var commonPrefix = 0
@@ -191,9 +185,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
 
       var pos = min(oldPos, newPos) + 1
       for i in commonPrefix..pos-1:
-        updateElement(current, current.childNodes[i],
-          newNode[i],
-          oldNode[i])
+        updateElement(current, current.childNodes[i], newNode[i], oldNode[i])
 
       var nextChildPos = oldPos + 1
       while pos <= newPos:
@@ -206,7 +198,8 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
         inc pos
         inc nextChildPos
 
-      for i in 0..oldPos-pos:
+      for i in pos..oldPos:
+        detach(oldNode[i])
         current.removeChild(current.childNodes[pos])
 
 when false:
@@ -229,20 +222,6 @@ proc dodraw() =
   if toFocus != nil:
     toFocus.focus()
 
-proc visibleKeys(e: Node; a, b: var VKey; h, count: var int) =
-  # we only care about nodes that have a key:
-  var hh = 0
-  # do not recurse if there is a 'key' field already:
-  if e.key >= 0:
-    if isElementInViewport(e, hh):
-      inc count
-      inc h, hh
-      a = min(a, e.key)
-      b = max(b, e.key)
-  else:
-    for i in 0..<e.len:
-      visibleKeys(e[i], a, b, h, count)
-
 proc reqFrame(callback: proc()) {.importc: "window.requestAnimationFrame".}
 
 proc redraw*() =
@@ -263,50 +242,16 @@ proc setRenderer*(renderer: proc (): VNode) =
   dorender = renderer
   window.onload = init
 
-proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
-proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
-proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}
-
-template onImpl(s) {.dirty.} =
+proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler) =
+  ## Implements the foundation of Karax's event management.
+  ## Karax DSL transforms ``tag(onEvent = handler)`` to
+  ## ``tempNode.addEventHandler(tagNode, EventKind.onEvent, wrapper)``
+  ## where ``wrapper`` calls the passed ``action`` and then triggers
+  ## a ``redraw``.
   proc wrapper(ev: Event; n: VNode) =
     action(ev, n)
     redraw()
-  addEventListener(e, s, wrapper)
-
-proc setOnclick*(e: VNode; action: EventHandler) =
-  onImpl EventKind.onclick
-
-proc setOnDblclick*(e: VNode; action: EventHandler) =
-  onImpl EventKind.ondblclick
-
-proc setOnfocuslost*(e: VNode; action: EventHandler) =
-  onImpl EventKind.onblur
-
-proc setOnchanged*(e: VNode; action: EventHandler) =
-  onImpl EventKind.onchange
-
-proc setOnscroll*(e: VNode; action: EventHandler) =
-  onImpl EventKind.onscroll
-
-proc setOnscroll*(action: proc(min, max: VKey; diff: int)) =
-  var oldY = window.pageYOffset
-
-  proc wrapper(ev: Event) =
-    let dir = window.pageYOffset - oldY
-    if dir == 0: return
-
-    var a = VKey high(int)
-    var b = VKey 0
-    var h, count: int
-    document.visibleKeys(a, b, h, count)
-    let avgh = h / count
-    let diff = toInt(dir.float / avgh)
-    if diff != 0:
-      oldY = window.pageYOffset
-      action(a, b, diff)
-      redraw()
-
-  document.addEventListener("scroll", wrapper)
+  addEventListener(n, k, wrapper)
 
 proc setOnHashChange*(action: proc (hashPart: cstring)) =
   var onhashChange {.importc: "window.onhashchange".}: proc()
@@ -316,40 +261,6 @@ proc setOnHashChange*(action: proc (hashPart: cstring)) =
     redraw()
   onhashchange = wrapper
 
-template nativeValue(ev): cstring = cast[Element](ev.target).value
-template setNativeValue(ev, val) = cast[Element](ev.target).value = val
-
-template keyeventBody() =
-  n.value = nativeValue(ev)
-  action(ev, n)
-  setNativeValue(ev, n.value)
-  redraw()
-
-proc realtimeInput*(val: cstring; action: EventHandler): VNode =
-  var timer: Timeout
-  proc onkeyup(ev: Event; n: VNode) =
-    proc wrapper() = keyeventBody()
-
-    if timer != nil: clearTimeout(timer)
-    timer = setTimeout(wrapper, 400)
-  result = tree(VNodeKind.input, [(cstring"type", cstring"text")])
-  result.value = val
-  result.addEventListener(EventKind.onkeyup, onkeyup)
-
-proc enterInput*(id, val: cstring; action: EventHandler): VNode =
-  proc onkeyup(ev: Event; n: VNode) =
-    if ev.keyCode == 13: keyeventBody()
-
-  result = tree(VNodeKind.input, [(cstring"type", cstring"text")])
-  result.id = id
-  result.value = val
-  result.addEventListener(EventKind.onkeyup, onkeyup)
-
-proc setOnEnter*(n: VNode; action: EventHandler) =
-  proc onkeyup(ev: Event; n: VNode) =
-    if ev.keyCode == 13: keyeventBody()
-  n.addEventListener(EventKind.onkeyup, onkeyup)
-
 proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int; response: cstring)) =
@@ -402,7 +313,7 @@ proc setupErrorHandler*(useAlert=false) =
 
 {.pop.}
 
-proc prepend*(parent, kid: Element) =
+proc prepend(parent, kid: Element) =
   parent.insertBefore(kid, parent.firstChild)
 
 proc loadScript*(jsfilename: cstring) =
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index d4bc1fb..ade1c24 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -75,7 +75,8 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
         if x.kind == nnkExprEqExpr:
           let key = getName x[0]
           if key.startsWith("on"):
-            result.add newCall(!("set" & key), tmp, x[1])
+            result.add newCall(bindSym"addEventHandler",
+              tmp, newDotExpr(bindSym"EventKind", x[0]), x[1])
           elif key in SpecialAttrs:
             result.add newDotAsgn(tmp, key, x[1])
           else:
diff --git a/src/vdom.nim b/src/vdom.nim
index 5e66a23..d138c7a 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -1,6 +1,6 @@
 ## Virtual DOM implementation for Karax.
 
-from dom import Event
+from dom import Event, Node
 import shash, macros
 from strutils import toUpperAscii
 
@@ -21,7 +21,7 @@ type
 
     tdiv = "div",
 
-    anchor, em, strong, small,
+    a, em, strong, small,
     strikethrough = "s", cite, quote,
     dfn, abbr, data, time, code, `var` = "var", samp,
     kdb, sub, sup, italic = "i", bold = "b", underlined = "u",
@@ -70,7 +70,11 @@ type
     ondragover, ## An element or text selection is being dragged over a valid
                 ## drop target (every 350ms).
     ondragstart, ## The user starts dragging an element or text selection.
-    ondrop ## An element is dropped on a valid drop target.
+    ondrop, ## An element is dropped on a valid drop target.
+
+    onkeyupenter, ## vdom extension: an input field received the ENTER key press
+    onkeyuplater  ## vdom extension: a key was pressed and some time
+                  ## passed (useful for on-the-fly text completions)
 
 macro buildLookupTables(): untyped =
   var a = newTree(nnkBracket)
@@ -104,6 +108,8 @@ type
     events*: seq[(EventKind, EventHandler)]
     hash*: Hash
     validHash*: bool
+    dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
+               ## is not part of the virtual DOM anymore.
 
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
diff --git a/tests/diffDomTests.nim b/tests/diffDomTests.nim
index 734a328..7fdcf85 100644
--- a/tests/diffDomTests.nim
+++ b/tests/diffDomTests.nim
@@ -1,10 +1,10 @@
 
-import vdom, times, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils
+import dom, vdom, times, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils
 
 var
     entries: seq[cstring]
     results: seq[cstring]
-    timeout : Timeout
+    timeout: Timeout
 
 proc reset() =
     results.add cstring"reset started"
@@ -139,12 +139,9 @@ proc createDom(): VNode =
             tdiv:
                 text r
 
-setRenderer createDom
-
-proc onload(session: cstring) {.exportc.} =
+proc onload() =
     for i in 0..5: # 0_000:
         entries.add(cstring($i))
-    init()
 
     var dtReset = 100
     var dtTest = 500
@@ -181,3 +178,6 @@ proc onload(session: cstring) {.exportc.} =
     t += dtReset
 
     timeout = setTimeout(test7, t)
+
+onload()
+setRenderer createDom
diff --git a/tests/diffDomTests.nims b/tests/diffDomTests.nims
new file mode 100644
index 0000000..532b206
--- /dev/null
+++ b/tests/diffDomTests.nims
@@ -0,0 +1 @@
+--path: "../src"

From 5f083a7d01c9f0f0e24ffdd0be8b976ee59b3de1 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 16 Apr 2017 01:36:42 +0200
Subject: [PATCH 015/264] bugfix: virtual thunks need to have a key of -1

---
 src/vdom.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/vdom.nim b/src/vdom.nim
index d138c7a..25f6c12 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -124,10 +124,10 @@ template callThunk*(fn: typed; n: VNode): untyped =
   fn(n.kids)
 
 proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
-  VNode(kind: VNodeKind.vthunk, text: name, kids: @args)
+  VNode(kind: VNodeKind.vthunk, text: name, key: -1, kids: @args)
 
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
-  VNode(kind: VNodeKind.dthunk, text: name, kids: @args)
+  VNode(kind: VNodeKind.dthunk, text: name, key: -1, kids: @args)
 
 proc eq*(a, b: VNode): bool =
   if a.kind != b.kind: return false

From 0255f58964a7c2ccd8761991d1f938481d0b7e22 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 16 Apr 2017 09:51:10 +0200
Subject: [PATCH 016/264] wip: stateful components

---
 experiments/example.html |   4 --
 experiments/example.nim  | 148 ++++++---------------------------------
 experiments/example.nims |   1 +
 src/components.nim       |  47 +++++++++++++
 src/karax.nim            |  29 +++++++-
 5 files changed, 99 insertions(+), 130 deletions(-)
 create mode 100644 experiments/example.nims

diff --git a/experiments/example.html b/experiments/example.html
index 35b9837..2303d95 100644
--- a/experiments/example.html
+++ b/experiments/example.html
@@ -3,7 +3,6 @@
 <html>
 <head>
   <title>Todo app</title>
-  <link rel="stylesheet" href="style.css">
 </head>
 
 <body id="body">
@@ -11,9 +10,6 @@
 <div id="ROOT" />
 
 <script type="text/javascript" src="nimcache/example.js"></script>
-<script type="text/javascript">
-  onload(window.location.pathname.split('/')[1])
-</script>
 
 </body>
 </html>
diff --git a/experiments/example.nim b/experiments/example.nim
index 0ea805e..78dcaae 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -1,135 +1,33 @@
 
-import vdom, karax, karaxdsl, jdict, jstrutils
-
-type
-  Filter = enum
-    all, active, completed
+import vdom, components, karax, karaxdsl, jdict, jstrutils
 
 var
-  entries: seq[(cstring, bool)]
-  selectedEntry = -1
-  filter: Filter
+  images: seq[cstring] = @[cstring"a", "b", "c", "d"]
 
-proc onTodoEnter(ev: Event; n: VNode) =
-  entries.add((n.value, false))
-  n.value = ""
+proc carousel*(key: VKey): VNode {.component.} =
+  state:
+    var counter = 0
 
-proc removeHandler(ev: Event; n: VNode) =
-  let id = suffixAsInt(n.id, "remove:")
-  entries[id] = (cstring(nil), false)
+  proc next(ev: Event; n: VNode) =
+    counter = (counter + 1) mod images.len
+    markDirty key
 
-proc editHandler(ev: Event; n: VNode) =
-  let id = suffixAsInt(n.id, "edit:")
-  selectedEntry = id
-
-when defined(usecache):
-  var entryCache = newJDict[int, VNode]()
-
-proc focusLost(ev: Event; n: VNode) = selectedEntry = -1
-
-proc editEntry(ev: Event; n: VNode) =
-  let id = suffixAsInt(n.id, "todo-edit:")
-  entries[id][0] = n.value
-  selectedEntry = -1
-
-proc toggleEntry(ev: Event; n: VNode) =
-  let id = suffixAsInt(n.id, "toggle:")
-  entries[id][1] = not entries[id][1]
-
-proc onAllDone(ev: Event; n: VNode) =
-  entries = @[]
-  selectedEntry = -1
-
-proc clearCompleted(ev: Event, n: VNode) =
-  for i in 0..<entries.len:
-    if entries[i][1]: entries[i][0] = nil
-
-proc toClass(completed: bool): cstring =
-  (if completed: cstring"completed" else: cstring"")
-
-proc toVis(visible: bool): cstring =
-  (if visible: cstring"visible" else: "hidden")
-
-proc toChecked(checked: bool): cstring =
-  (if checked: cstring"checked" else: cstring(nil))
-
-proc selected(v: Filter): cstring =
-  (if filter == v: cstring"selected" else: cstring(nil))
-
-proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
-  # implement caching:
-  when defined(usecache):
-    if entryCache.contains(i):
-      let old = entryCache[i]
-      return old
-
-  result = buildHtml(tr):
-    li(class=toClass(completed)):
-      if not selected:
-        tdiv(class = "view"):
-          input(class = "toggle", `type` = "checkbox", checked = toChecked(completed),
-                onclick=toggleEntry, id="toggle:" & &id)
-          label(onDblClick=editHandler, id="edit:" & &id):
-            text d
-          button(class = "destroy", id="remove:" & $id, onclick=removeHandler)
-      else:
-        input(class = "edit", name = "title", id = "todo-edit:" & &id,
-          onfocusLost = focusLost,
-          onenter = editEntry, value = d)
-  when defined(usecache):
-    entryCache[i] = result
+  result = buildHtml(tdiv(key=key)):
+    text images[counter]
+    button(onclick = next):
+      text "Next"
 
 proc createDom(): VNode =
-  result = buildHtml(tdiv(class="todomvc-wrapper")):
-    section(class = "todoapp"):
-      header(class = "header"):
-        h1:
-          text "todos"
-        input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
-              onenter = onTodoEnter)
-      section(class = "main"):
-        input(class = "toggle-all", `type` = "checkbox", name = "toggle")
-        label(`for` = "toggle-all", onclick = onAllDone):
-          text "Mark all as complete"
-        var entriesCount = 0
-        var completedCount = 0
-        ul(class = "todo-list"):
-          for i, d in pairs(entries):
-            if d[0] != nil:
-              let b = case filter
-                      of all: true
-                      of active: not d[1]
-                      of completed: d[1]
-              if b:
-                createEntry(i, d[0], d[1], i == selectedEntry)
-              inc completedCount, ord(d[1])
-              inc entriesCount
-      footer(class = "footer"):
-        span(class = "todo-count"):
-          strong:
-            text(&entriesCount)
-          text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
-        ul(class = "filters"):
-          li:
-            anchor(class = selected(all), href = "#/"):
-              text "All"
-          li:
-            anchor(class = selected(active), href = "#/active"):
-              text "Active"
-          li:
-            anchor(class = selected(completed), href = "#/completed"):
-              text "Completed"
-        button(class = "clear-completed", onclick = clearCompleted):
-          text "Clear completed (" & &completedCount & ")"
+  result = buildHtml(table):
+    tr:
+      td:
+        carousel(0)
+      td:
+        carousel(1)
+    tr:
+      td:
+        carousel(2)
+      td:
+        carousel(3)
 
-setOnHashChange(proc(hash: cstring) =
-  if hash == cstring"#/": filter = all
-  elif hash == cstring"#/completed": filter = completed
-  elif hash == cstring"#/active": filter = active
-)
 setRenderer createDom
-
-proc onload(session: cstring) {.exportc.} =
-  for i in 0..1: # 0_000:
-    entries.add((cstring"Entry " & &i, false))
-  init()
diff --git a/experiments/example.nims b/experiments/example.nims
new file mode 100644
index 0000000..6b5771c
--- /dev/null
+++ b/experiments/example.nims
@@ -0,0 +1 @@
+--path: "../src"
diff --git a/src/components.nim b/src/components.nim
index fbbc00d..54ac8b6 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -30,6 +30,53 @@ proc addTags() {.compileTime.} =
 static:
   addTags()
 
+template toState(x): untyped = "state" & x
+proc accessState(sv: string): NimNode {.compileTime.} =
+  newTree(nnkBracketExpr, newIdentNode(sv), newIdentNode("key"))
+
+proc stateDecl(n: NimNode; names: TableRef[string, bool]; decl, init: NimNode) =
+  case n.kind
+  of nnkVarSection, nnkLetSection:
+    for c in n:
+      expectKind c, nnkIdentDefs
+      let typ = c[^2]
+      let val = c[^1]
+      let usedType = if typ.kind != nnkEmpty: typ else: val
+      if usedType.kind == nnkEmpty:
+        error(c, "cannot determine the variable's type")
+      for i in 0 .. c.len-3:
+        let v = $c[i]
+        let sv = toState v
+        decl.add quote do:
+          var `sv` = newJDict[VKey, `usedType`]()
+        if val.kind != nnkEmpty:
+          init.add newTree(nnkAsgn, accessState(sv), val)
+        names[v] = true
+  of nnkStmtList, nnkStmtListExpr:
+    for x in n: stateDecl(x, names, decl, init)
+  of nnkDo:
+    stateDecl(n.body, names, decl, init)
+  of nnkCommentStmt: discard
+  else:
+    error(n, "invalid 'state' declaration")
+
+proc doState(n: NimNode; names: TableRef[string, bool]; decl, init: NimNode): NimNode =
+  result = n
+  case n.kind
+  of nnkCallKinds:
+    # handle 'state' declaration and remove it from the AST:
+    if n.len == 2 and repr(n[0]) == "state":
+      stateDecl(n[1], names, decl, init)
+      result = newTree(nnkEmpty)
+  of nnkSym, nnkIdent:
+    let v = $n
+    if v in names:
+      let sv = toState v
+      result = accessState(sv)
+  else:
+    for i in 0..<n.len:
+      result[i] = doState(n[i], names, decl, init)
+
 proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
   #let t = symbolicType.getTypeImpl
   let t = repr(symbolicType)
diff --git a/src/karax.nim b/src/karax.nim
index a535ae7..09ec20c 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -75,10 +75,12 @@ proc vnodeToDom(n: VNode): Node =
   elif n.kind == VNodeKind.vthunk:
     let x = callThunk(vcomponents[n.text], n)
     result = vnodeToDom(x)
+    n.key = result.key
     attach n
     return result
   elif n.kind == VNodeKind.dthunk:
     result = callThunk(dcomponents[n.text], n)
+    n.key = result.key
     attach n
     return result
   else:
@@ -114,6 +116,8 @@ proc same(n: VNode, e: Node): bool =
 var
   dorender: proc (): VNode {.closure.}
   currentTree: VNode
+  dirty = newJDict[cstring, bool]()
+  dirtyCount: int
 
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
@@ -145,7 +149,27 @@ proc equalsTree(a, b: VNode): bool =
       b.calcHash()
     return a.hash == b.hash
   else:
-    return eq(a, b)
+    result = eq(a, b)
+
+proc markDirty*(key: VKey) =
+  dirty[&key] = true
+  inc dirtyCount
+
+proc updateDirtyElements(parent, current: Node, newNode: VNode) =
+  if newNode.key >= 0 and dirty.contains(&newNode.key):
+    dirty.del(&newNode.key)
+    dec dirtyCount
+    let n = vnodeToDom(newNode)
+    if parent == nil:
+      replaceById("ROOT", n)
+    else:
+      parent.replaceChild(n, current)
+  elif newNode.kind != VNodeKind.text and newNode.kind != VNodeKind.vthunk and
+       newNode.kind != VNodeKind.dthunk:
+    for i in 0..newNode.len-1:
+      updateDirtyElements(current, current[i], newNode[i])
+      # leave early if we know there cannot be anything left to do:
+      #if dirtyCount <= 0: return
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
   if not equalsShallow(newNode, oldNode):
@@ -217,6 +241,9 @@ proc dodraw() =
     let olddom = document.getElementById("ROOT")
     updateElement(nil, olddom, newtree, currentTree)
     #assert same(newtree, document.getElementById("ROOT"))
+    if dirtyCount > 0:
+      updateDirtyElements(nil, olddom, newtree)
+      dirtyCount = 0
     currentTree = newtree
   # now that it's part of the DOM, give it the focus:
   if toFocus != nil:

From f0e2d41fdee293a14b37b92fe1995ece556e6c32 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 17 Apr 2017 09:39:13 +0200
Subject: [PATCH 017/264] next step to get stateful components

---
 experiments/example.nim    |   1 -
 experiments/oldwidgets.nim |  48 ++++++++++++++++
 src/components.nim         | 111 ++++++++++++++++++++++++-------------
 src/karax.nim              |  15 ++---
 4 files changed, 126 insertions(+), 49 deletions(-)

diff --git a/experiments/example.nim b/experiments/example.nim
index 78dcaae..61235f8 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -10,7 +10,6 @@ proc carousel*(key: VKey): VNode {.component.} =
 
   proc next(ev: Event; n: VNode) =
     counter = (counter + 1) mod images.len
-    markDirty key
 
   result = buildHtml(tdiv(key=key)):
     text images[counter]
diff --git a/experiments/oldwidgets.nim b/experiments/oldwidgets.nim
index 023dc98..c947d7f 100644
--- a/experiments/oldwidgets.nim
+++ b/experiments/oldwidgets.nim
@@ -201,3 +201,51 @@ proc visibleKeys(e: Node; a, b: var VKey; h, count: var int) =
   else:
     for i in 0..<e.len:
       visibleKeys(e[i], a, b, h, count)
+
+template toState(x): untyped = "state" & x
+proc accessState(sv: string): NimNode {.compileTime.} =
+  newTree(nnkBracketExpr, newIdentNode(sv), newIdentNode("key"))
+
+proc stateDecl(n: NimNode; names: TableRef[string, bool]; decl, init: NimNode) =
+  case n.kind
+  of nnkVarSection, nnkLetSection:
+    for c in n:
+      expectKind c, nnkIdentDefs
+      let typ = c[^2]
+      let val = c[^1]
+      let usedType = if typ.kind != nnkEmpty: typ else: val
+      if usedType.kind == nnkEmpty:
+        error("cannot determine the variable's type", c)
+      for i in 0 .. c.len-3:
+        let v = $c[i]
+        let sv = toState v
+        decl.add quote do:
+          var `sv` = newJDict[VKey, `usedType`]()
+        if val.kind != nnkEmpty:
+          init.add newTree(nnkAsgn, accessState(sv), val)
+        names[v] = true
+  of nnkStmtList, nnkStmtListExpr:
+    for x in n: stateDecl(x, names, decl, init)
+  of nnkDo:
+    stateDecl(n.body, names, decl, init)
+  of nnkCommentStmt: discard
+  else:
+    error("invalid 'state' declaration", n)
+
+proc doState(n: NimNode; names: TableRef[string, bool];
+             decl, init: NimNode): NimNode =
+  result = n
+  case n.kind
+  of nnkCallKinds:
+    # handle 'state' declaration and remove it from the AST:
+    if n.len == 2 and repr(n[0]) == "state":
+      stateDecl(n[1], names, decl, init)
+      result = newTree(nnkEmpty)
+  of nnkSym, nnkIdent:
+    let v = $n
+    if v in names:
+      let sv = toState v
+      result = accessState(sv)
+  else:
+    for i in 0..<n.len:
+      result[i] = doState(n[i], names, decl, init)
diff --git a/src/components.nim b/src/components.nim
index 54ac8b6..f86cd14 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -2,6 +2,32 @@
 
 import macros, jdict, dom, vdom, tables, strutils
 
+type
+  StateDict*[V] = ref object
+
+proc `[]`*[V](d: StateDict[V], k: VKey): V {.importcpp: "#[#]".}
+proc put[V](d: StateDict[V], k: VKey, v: V) {.importcpp: "#[#] = #".}
+
+proc contains*[V](d: StateDict[V], k: VKey): bool {.importcpp: "#.hasOwnProperty(#)".}
+proc del*[V](d: StateDict[V], k: VKey) {.importcpp: "delete #[#]".}
+
+proc newStateDict*[V](): StateDict[V] {.importcpp: "{@}".}
+
+var
+  dirty = newStateDict[bool]()
+  someDirty*: bool
+
+proc markDirty*(key: VKey) =
+  dirty.put(key, true)
+  someDirty = true
+
+proc unmarkDirty*(key: VKey) = dirty.del key
+proc isDirty*(key: VKey): bool = dirty.contains(key)
+
+proc `[]=`*[V](d: StateDict[V], k: VKey, v: V) =
+  d.put(k, v)
+  markDirty(k)
+
 var
   vcomponents* = newJDict[cstring, proc(args: seq[VNode]): VNode]()
   dcomponents* = newJDict[cstring, proc(args: seq[VNode]): Node]()
@@ -30,52 +56,50 @@ proc addTags() {.compileTime.} =
 static:
   addTags()
 
-template toState(x): untyped = "state" & x
-proc accessState(sv: string): NimNode {.compileTime.} =
-  newTree(nnkBracketExpr, newIdentNode(sv), newIdentNode("key"))
-
-proc stateDecl(n: NimNode; names: TableRef[string, bool]; decl, init: NimNode) =
+proc stateDecl(n: NimNode; names: TableRef[string, bool]) =
   case n.kind
   of nnkVarSection, nnkLetSection:
     for c in n:
       expectKind c, nnkIdentDefs
-      let typ = c[^2]
-      let val = c[^1]
-      let usedType = if typ.kind != nnkEmpty: typ else: val
-      if usedType.kind == nnkEmpty:
-        error(c, "cannot determine the variable's type")
       for i in 0 .. c.len-3:
         let v = $c[i]
-        let sv = toState v
-        decl.add quote do:
-          var `sv` = newJDict[VKey, `usedType`]()
-        if val.kind != nnkEmpty:
-          init.add newTree(nnkAsgn, accessState(sv), val)
         names[v] = true
   of nnkStmtList, nnkStmtListExpr:
-    for x in n: stateDecl(x, names, decl, init)
+    for x in n: stateDecl(x, names)
   of nnkDo:
-    stateDecl(n.body, names, decl, init)
-  of nnkCommentStmt: discard
-  else:
-    error(n, "invalid 'state' declaration")
+    stateDecl(n.body, names)
+  else: discard
 
-proc doState(n: NimNode; names: TableRef[string, bool]; decl, init: NimNode): NimNode =
+proc accessesState(n: NimNode; names: TableRef[string, bool]): bool =
+  case n.kind
+  of nnkSym, nnkIdent:
+    result = $n in names
+  of nnkBracketExpr, nnkDotExpr:
+    result = accessesState(n[0], names)
+  else:
+    for i in 0..<n.len:
+      if accessesState(n[i], names): return true
+
+proc doState(n: NimNode; names: TableRef[string, bool];
+             outer: NimNode): NimNode =
   result = n
   case n.kind
   of nnkCallKinds:
-    # handle 'state' declaration and remove it from the AST:
+    # handle 'state' declaration and move it to the outer block:
     if n.len == 2 and repr(n[0]) == "state":
-      stateDecl(n[1], names, decl, init)
-      result = newTree(nnkEmpty)
-  of nnkSym, nnkIdent:
-    let v = $n
-    if v in names:
-      let sv = toState v
-      result = accessState(sv)
+      stateDecl(n[1], names)
+      outer.add n[1]
+      result = newEmptyNode()
+  of nnkAsgn, nnkFastAsgn:
+    if accessesState(n[0], names):
+      result = newStmtList(n, newCall(bindSym"markDirty", newIdentNode"key"))
   else:
     for i in 0..<n.len:
-      result[i] = doState(n[i], names, decl, init)
+      result[i] = doState(n[i], names, outer)
+
+proc compBody(body, outer: NimNode): NimNode =
+  var names = newTable[string, bool]()
+  result = doState(body, names, outer)
 
 proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
   #let t = symbolicType.getTypeImpl
@@ -114,7 +138,7 @@ macro component*(prc: untyped): untyped =
   for i in 0..6: n.add prc[i].copyNimTree
   expectKind(n, nnkProcDef)
   if n[0].kind == nnkEmpty:
-    error("please pass a non anonymous proc")
+    error("please pass a non anonymous proc", n[0])
   let name = n[0]
   let params = params(n)
   let rettype = repr params[0]
@@ -124,7 +148,7 @@ macro component*(prc: untyped): untyped =
   elif rettype == "Node":
     isvirtual = ComponentKind.Node
   else:
-    error "component must return VNode or Node"
+    error "component must return VNode or Node", params[0]
   let realName = if name.kind == nnkPostfix: name[1] else: name
   let nn = $realName
   n[0] = ident("inner" & nn)
@@ -138,6 +162,9 @@ macro component*(prc: untyped): untyped =
       unpackCall.add unpack(typ, counter)
       inc counter
 
+  let outer = newTree(nnkStmtList)
+  discard compBody(n.body, outer)
+
   template vwrapper(pname, unpackCall) {.dirty.} =
     proc pname(args: seq[VNode]): VNode =
       unpackCall
@@ -154,20 +181,30 @@ macro component*(prc: untyped): untyped =
     bind jdict.`[]=`
     `[]=`(dcomponents, cstring(key), val)
 
-  result = newTree(nnkStmtList, n)
+  outer.add n
+  #outer.add body
+  outer.add unpackCall
+  result = newTree(nnkStmtList)
   if isvirtual == ComponentKind.VNode:
-    result.add getAst(vwrapper(newname name, unpackCall))
+    result.add getAst(vwrapper(newname name, outer))
     result.add getAst(vregister(newLit(nn), realName))
   else:
-    result.add getAst(dwrapper(newname name, unpackCall))
+    result.add getAst(dwrapper(newname name, outer))
     result.add getAst(dregister(newLit(nn), realName))
   allcomponents[nn] = isvirtual
   when defined(debugKaraxDsl):
     echo repr result
 
 when isMainModule:
-  proc public*(x, y: int, b: bool; s: cstring): VNode {.component.} =
-    discard
+  proc public*(key: VKey; x, y: int, b: bool; s: cstring): VNode {.component.} =
+    state:
+      var foo = 89
+
+    proc callback() =
+      foo = 78
+
+    let cc = callback
+
   proc private(x, y: int, b: bool; s: cstring): VNode {.component.} =
     discard
 
diff --git a/src/karax.nim b/src/karax.nim
index 09ec20c..1908d6f 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -116,8 +116,6 @@ proc same(n: VNode, e: Node): bool =
 var
   dorender: proc (): VNode {.closure.}
   currentTree: VNode
-  dirty = newJDict[cstring, bool]()
-  dirtyCount: int
 
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
@@ -151,14 +149,9 @@ proc equalsTree(a, b: VNode): bool =
   else:
     result = eq(a, b)
 
-proc markDirty*(key: VKey) =
-  dirty[&key] = true
-  inc dirtyCount
-
 proc updateDirtyElements(parent, current: Node, newNode: VNode) =
-  if newNode.key >= 0 and dirty.contains(&newNode.key):
-    dirty.del(&newNode.key)
-    dec dirtyCount
+  if newNode.key >= 0 and isDirty(newNode.key):
+    unmarkDirty(newNode.key)
     let n = vnodeToDom(newNode)
     if parent == nil:
       replaceById("ROOT", n)
@@ -241,9 +234,9 @@ proc dodraw() =
     let olddom = document.getElementById("ROOT")
     updateElement(nil, olddom, newtree, currentTree)
     #assert same(newtree, document.getElementById("ROOT"))
-    if dirtyCount > 0:
+    if someDirty:
       updateDirtyElements(nil, olddom, newtree)
-      dirtyCount = 0
+      someDirty = false
     currentTree = newtree
   # now that it's part of the DOM, give it the focus:
   if toFocus != nil:

From c74b90876d10904ca95fdf738e38e510094c64d2 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 18 Apr 2017 10:46:15 +0200
Subject: [PATCH 018/264] make playerapp compile again

---
 examples/mediaplayer/mediaplayer.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/mediaplayer/mediaplayer.nim b/examples/mediaplayer/mediaplayer.nim
index d22e57d..18179c1 100644
--- a/examples/mediaplayer/mediaplayer.nim
+++ b/examples/mediaplayer/mediaplayer.nim
@@ -1,5 +1,5 @@
 
-import karax, karaxdsl, vdom, components
+import karax, karaxdsl, vdom, dom, components
 
 const
   Play = 0

From 549a643fb9b1f40dda35991517f788776cd8d17a Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Wed, 19 Apr 2017 09:48:28 +0700
Subject: [PATCH 019/264] Update readme.rst

---
 readme.rst | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/readme.rst b/readme.rst
index 791d68b..907f016 100644
--- a/readme.rst
+++ b/readme.rst
@@ -7,6 +7,8 @@ to change.
 
 To try it out, run::
 
+  nimble install # For first time
+
   cd examples/todoapp
   nim js todoapp.nim
   open todoapp.html

From be4159fc117c0ac79d26570162665b3d9953bb96 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 19 Apr 2017 11:17:00 +0200
Subject: [PATCH 020/264] stateful components now work

---
 experiments/example.nim |  2 +-
 src/components.nim      | 93 ++++++++++++++++++++++++-----------------
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/experiments/example.nim b/experiments/example.nim
index 61235f8..3fe4000 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -6,7 +6,7 @@ var
 
 proc carousel*(key: VKey): VNode {.component.} =
   state:
-    var counter = 0
+    var counter: int = 0
 
   proc next(ev: Event; n: VNode) =
     counter = (counter + 1) mod images.len
diff --git a/src/components.nim b/src/components.nim
index f86cd14..b93742d 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -4,8 +4,9 @@ import macros, jdict, dom, vdom, tables, strutils
 
 type
   StateDict*[V] = ref object
+    defaultValue*: V
 
-proc `[]`*[V](d: StateDict[V], k: VKey): V {.importcpp: "#[#]".}
+proc get[V](d: StateDict[V], k: VKey): V {.importcpp: "#[#]".}
 proc put[V](d: StateDict[V], k: VKey, v: V) {.importcpp: "#[#] = #".}
 
 proc contains*[V](d: StateDict[V], k: VKey): bool {.importcpp: "#.hasOwnProperty(#)".}
@@ -24,6 +25,10 @@ proc markDirty*(key: VKey) =
 proc unmarkDirty*(key: VKey) = dirty.del key
 proc isDirty*(key: VKey): bool = dirty.contains(key)
 
+proc `[]`*[V](d: StateDict[V], k: VKey): V =
+  if d.contains(k): result = d.get(k)
+  else: result = d.defaultValue
+
 proc `[]=`*[V](d: StateDict[V], k: VKey, v: V) =
   d.put(k, v)
   markDirty(k)
@@ -56,50 +61,62 @@ proc addTags() {.compileTime.} =
 static:
   addTags()
 
-proc stateDecl(n: NimNode; names: TableRef[string, bool]) =
+
+template toState(x): untyped = newIdentNode("state" & x)
+proc accessState(sv: NimNode): NimNode {.compileTime.} =
+  newTree(nnkBracketExpr, sv, newIdentNode("key"))
+
+proc stateDecl(n: NimNode; names: TableRef[string, bool]; decl: NimNode) =
   case n.kind
   of nnkVarSection, nnkLetSection:
     for c in n:
       expectKind c, nnkIdentDefs
+      let typ = c[^2]
+      let val = c[^1]
+      let usedType = if typ.kind != nnkEmpty: typ else: newCall("type", val)
+      if usedType.kind == nnkEmpty:
+        error("cannot determine the variable's type", c)
       for i in 0 .. c.len-3:
         let v = $c[i]
+        let sv = toState v
+        decl.add quote do:
+          var `sv` = newStateDict[`usedType`]()
+        if val.kind != nnkEmpty:
+          decl.add newTree(nnkAsgn, newDotExpr(sv, newIdentNode"defaultValue"),
+                           val)
+        else:
+          error("component state must have a primitive initializer")
         names[v] = true
   of nnkStmtList, nnkStmtListExpr:
-    for x in n: stateDecl(x, names)
+    for x in n: stateDecl(x, names, decl)
   of nnkDo:
-    stateDecl(n.body, names)
-  else: discard
-
-proc accessesState(n: NimNode; names: TableRef[string, bool]): bool =
-  case n.kind
-  of nnkSym, nnkIdent:
-    result = $n in names
-  of nnkBracketExpr, nnkDotExpr:
-    result = accessesState(n[0], names)
+    stateDecl(n.body, names, decl)
+  of nnkCommentStmt: discard
   else:
-    for i in 0..<n.len:
-      if accessesState(n[i], names): return true
+    error("invalid 'state' declaration", n)
 
 proc doState(n: NimNode; names: TableRef[string, bool];
-             outer: NimNode): NimNode =
-  result = n
+             decl: NimNode): NimNode =
   case n.kind
   of nnkCallKinds:
-    # handle 'state' declaration and move it to the outer block:
+    # handle 'state' declaration and remove it from the AST:
     if n.len == 2 and repr(n[0]) == "state":
-      stateDecl(n[1], names)
-      outer.add n[1]
-      result = newEmptyNode()
-  of nnkAsgn, nnkFastAsgn:
-    if accessesState(n[0], names):
-      result = newStmtList(n, newCall(bindSym"markDirty", newIdentNode"key"))
-  else:
-    for i in 0..<n.len:
-      result[i] = doState(n[i], names, outer)
+      stateDecl(n[1], names, decl)
+      return nil #newTree(nnkEmpty)
+  of nnkSym, nnkIdent:
+    let v = $n
+    if v in names:
+      let sv = toState v
+      return accessState(sv)
+  else: discard
+  result = copyNimNode(n)
+  for i in 0..<n.len:
+    let x = doState(n[i], names, decl)
+    if x != nil: result.add x
 
-proc compBody(body, outer: NimNode): NimNode =
+proc compBody(body, decl: NimNode): NimNode =
   var names = newTable[string, bool]()
-  result = doState(body, names, outer)
+  result = doState(body, names, decl)
 
 proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
   #let t = symbolicType.getTypeImpl
@@ -162,8 +179,8 @@ macro component*(prc: untyped): untyped =
       unpackCall.add unpack(typ, counter)
       inc counter
 
-  let outer = newTree(nnkStmtList)
-  discard compBody(n.body, outer)
+  let decl = newTree(nnkStmtList)
+  let newBody = compBody(n, decl)
 
   template vwrapper(pname, unpackCall) {.dirty.} =
     proc pname(args: seq[VNode]): VNode =
@@ -181,15 +198,13 @@ macro component*(prc: untyped): untyped =
     bind jdict.`[]=`
     `[]=`(dcomponents, cstring(key), val)
 
-  outer.add n
-  #outer.add body
-  outer.add unpackCall
-  result = newTree(nnkStmtList)
+  result = newTree(nnkStmtList, decl, newBody)
+
   if isvirtual == ComponentKind.VNode:
-    result.add getAst(vwrapper(newname name, outer))
+    result.add getAst(vwrapper(newname name, unpackCall))
     result.add getAst(vregister(newLit(nn), realName))
   else:
-    result.add getAst(dwrapper(newname name, outer))
+    result.add getAst(dwrapper(newname name, unpackCall))
     result.add getAst(dregister(newLit(nn), realName))
   allcomponents[nn] = isvirtual
   when defined(debugKaraxDsl):
@@ -205,6 +220,6 @@ when isMainModule:
 
     let cc = callback
 
-  proc private(x, y: int, b: bool; s: cstring): VNode {.component.} =
-    discard
-
+  when false:
+    proc private(x, y: int, b: bool; s: cstring): VNode {.component.} =
+      discard

From e21b4fa6a13fc53b32166ff23cd91906547bb2af Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 21 Apr 2017 12:49:37 +0200
Subject: [PATCH 021/264] attempt to optimize todoapp wiht .component
 annotation

---
 examples/todoapp/todoapp.nim | 54 ++++++++++++++++++++----------------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 9027603..7fd6104 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -1,5 +1,5 @@
 
-import vdom, karax, karaxdsl, jstrutils
+import vdom, karax, karaxdsl, jstrutils, components
 
 type
   Filter = enum
@@ -47,7 +47,7 @@ proc toChecked(checked: bool): cstring =
 proc selected(v: Filter): cstring =
   (if filter == v: cstring"selected" else: cstring(nil))
 
-proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
+proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.component.} =
   result = buildHtml(tr):
     li(class=toClass(completed)):
       if not selected:
@@ -62,14 +62,36 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
           onblur = focusLost,
           onkeyupenter = editEntry, value = d, setFocus)
 
+proc makeFooter(entriesCount, completedCount: int): VNode {.component.} =
+  result = buildHtml(footer(class = "footer")):
+    span(class = "todo-count"):
+      strong:
+        text(&entriesCount)
+      text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
+    ul(class = "filters"):
+      li:
+        a(class = selected(all), href = "#/"):
+          text "All"
+      li:
+        a(class = selected(active), href = "#/active"):
+          text "Active"
+      li:
+        a(class = selected(completed), href = "#/completed"):
+          text "Completed"
+    button(class = "clear-completed", onclick = clearCompleted):
+      text "Clear completed (" & &completedCount & ")"
+
+proc makeHeader(): VNode {.component.} =
+  result = buildHtml(header(class = "header")):
+    h1:
+      text "todos"
+    input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
+          onkeyupenter = onTodoEnter, setFocus)
+
 proc createDom(): VNode =
   result = buildHtml(tdiv(class="todomvc-wrapper")):
     section(class = "todoapp"):
-      header(class = "header"):
-        h1:
-          text "todos"
-        input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
-              onkeyupenter = onTodoEnter, setFocus)
+      makeHeader()
       section(class = "main"):
         input(class = "toggle-all", `type` = "checkbox", name = "toggle")
         label(`for` = "toggle-all", onclick = onAllDone):
@@ -87,23 +109,7 @@ proc createDom(): VNode =
                 createEntry(i, d[0], d[1], i == selectedEntry)
               inc completedCount, ord(d[1])
               inc entriesCount
-      footer(class = "footer"):
-        span(class = "todo-count"):
-          strong:
-            text(&entriesCount)
-          text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
-        ul(class = "filters"):
-          li:
-            a(class = selected(all), href = "#/"):
-              text "All"
-          li:
-            a(class = selected(active), href = "#/active"):
-              text "Active"
-          li:
-            a(class = selected(completed), href = "#/completed"):
-              text "Completed"
-        button(class = "clear-completed", onclick = clearCompleted):
-          text "Clear completed (" & &completedCount & ")"
+      makeFooter(entriesCount, completedCount)
 
 setOnHashChange(proc(hash: cstring) =
   if hash == "#/": filter = all

From 371ae67c6480e1a694e6fd82e657f4028a53dea0 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 21 Apr 2017 18:15:12 +0200
Subject: [PATCH 022/264] fixes a bug in the components DSL tranformation

---
 src/components.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components.nim b/src/components.nim
index b93742d..c3cda9c 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -102,7 +102,7 @@ proc doState(n: NimNode; names: TableRef[string, bool];
     # handle 'state' declaration and remove it from the AST:
     if n.len == 2 and repr(n[0]) == "state":
       stateDecl(n[1], names, decl)
-      return nil #newTree(nnkEmpty)
+      return newTree(nnkNone)
   of nnkSym, nnkIdent:
     let v = $n
     if v in names:
@@ -112,7 +112,7 @@ proc doState(n: NimNode; names: TableRef[string, bool];
   result = copyNimNode(n)
   for i in 0..<n.len:
     let x = doState(n[i], names, decl)
-    if x != nil: result.add x
+    if x.kind != nnkNone: result.add x
 
 proc compBody(body, decl: NimNode): NimNode =
   var names = newTable[string, bool]()

From 037ddef91dc432f5ebc3a12ba543b41321041a0d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 21 Apr 2017 18:15:50 +0200
Subject: [PATCH 023/264] experiments: added an animation to the example

---
 experiments/example.nim | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/experiments/example.nim b/experiments/example.nim
index 3fe4000..229cce6 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -1,5 +1,5 @@
 
-import vdom, components, karax, karaxdsl, jdict, jstrutils
+import vdom, components, karax, karaxdsl, jdict, jstrutils, dom
 
 var
   images: seq[cstring] = @[cstring"a", "b", "c", "d"]
@@ -7,14 +7,29 @@ var
 proc carousel*(key: VKey): VNode {.component.} =
   state:
     var counter: int = 0
+    var cntdown: int = 5
+    var timer: Timeout = nil
+
+  proc docount() =
+    cntdown = cntdown - 1
+    if cntdown == 0:
+      counter = (counter + 1) mod images.len
+      cntdown = 5
+    else:
+      timer = setTimeout(docount, 30)
+    redraw()
 
   proc next(ev: Event; n: VNode) =
-    counter = (counter + 1) mod images.len
+    if timer != nil:
+      clearTimeout(timer)
+    timer = setTimeout(docount, 30)
 
   result = buildHtml(tdiv(key=key)):
     text images[counter]
     button(onclick = next):
       text "Next"
+    if cntdown != 5:
+      text &cntdown
 
 proc createDom(): VNode =
   result = buildHtml(table):

From 27cacbd2715b1d1f7287f89e789793da546a9623 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 21 Apr 2017 18:30:02 +0200
Subject: [PATCH 024/264] moved ajax support into its own module and make the
 callback call 'redraw' automatically

---
 src/ajax.nim  | 41 +++++++++++++++++++++++++++++++++++++++++
 src/karax.nim | 33 +--------------------------------
 2 files changed, 42 insertions(+), 32 deletions(-)
 create mode 100644 src/ajax.nim

diff --git a/src/ajax.nim b/src/ajax.nim
new file mode 100644
index 0000000..05e9740
--- /dev/null
+++ b/src/ajax.nim
@@ -0,0 +1,41 @@
+## Karax -- Single page applications for Nim.
+
+## This module implements support for `ajax`:idx: socket
+## handling.
+
+import karax
+
+proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
+          data: cstring;
+          cont: proc (httpStatus: int; response: cstring)) =
+  proc contWrapper(httpStatus: int; response: cstring) =
+    cont(httpStatus, response)
+    redraw()
+
+  proc setRequestHeader(a, b: cstring) {.importc: "ajax.setRequestHeader".}
+  {.emit: """
+  var ajax = new XMLHttpRequest();
+  ajax.open(`meth`,`url`,true);""".}
+  for a, b in items(headers):
+    setRequestHeader(a, b)
+  {.emit: """
+  ajax.onreadystatechange = function(){
+    if(this.readyState == 4){
+      if(this.status == 200){
+        `contWrapper`(this.status, this.responseText);
+      } else {
+        `contWrapper`(this.status, this.statusText);
+      }
+    }
+  }
+  ajax.send(`data`);
+  """.}
+
+proc ajaxPut*(url: string; headers: openarray[(cstring, cstring)];
+          data: cstring;
+          cont: proc (httpStatus: int, response: cstring)) =
+  ajax("PUT", url, headers, data, cont)
+
+proc ajaxGet*(url: string; headers: openarray[(cstring, cstring)];
+          cont: proc (httpStatus: int, response: cstring)) =
+  ajax("GET", url, headers, nil, cont)
diff --git a/src/karax.nim b/src/karax.nim
index 1908d6f..7d7267c 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -2,7 +2,7 @@
 
 import dom, vdom, jstrutils, components, jdict
 
-export dom.Event #, dom.cloneNode, dom
+export dom.Event
 
 proc kout*[T](x: T) {.importc: "console.log", varargs.}
   ## the preferred way of debugging karax applications.
@@ -281,37 +281,6 @@ proc setOnHashChange*(action: proc (hashPart: cstring)) =
     redraw()
   onhashchange = wrapper
 
-proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
-          data: cstring;
-          cont: proc (httpStatus: int; response: cstring)) =
-  proc setRequestHeader(a, b: cstring) {.importc: "ajax.setRequestHeader".}
-  {.emit: """
-  var ajax = new XMLHttpRequest();
-  ajax.open(`meth`,`url`,true);""".}
-  for a, b in items(headers):
-    setRequestHeader(a, b)
-  {.emit: """
-  ajax.onreadystatechange = function(){
-    if(this.readyState == 4){
-      if(this.status == 200){
-        `cont`(this.status, this.responseText);
-      } else {
-        `cont`(this.status, this.statusText);
-      }
-    }
-  }
-  ajax.send(`data`);
-  """.}
-
-proc ajaxPut*(url: string; headers: openarray[(cstring, cstring)];
-          data: cstring;
-          cont: proc (httpStatus: int, response: cstring)) =
-  ajax("PUT", url, headers, data, cont)
-
-proc ajaxGet*(url: string; headers: openarray[(cstring, cstring)];
-          cont: proc (httpStatus: int, response: cstring)) =
-  ajax("GET", url, headers, nil, cont)
-
 {.push stackTrace:off.}
 
 proc setupErrorHandler*(useAlert=false) =

From 7d3224183a5df50a2e1dd7eb91b68435341e5fca Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 21 Apr 2017 18:58:03 +0200
Subject: [PATCH 025/264] completed first version of the Ajax API

---
 readme.rst   | 6 ------
 src/ajax.nim | 7 +++++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/readme.rst b/readme.rst
index 907f016..abecc8b 100644
--- a/readme.rst
+++ b/readme.rst
@@ -30,9 +30,3 @@ Goals
 - Leverage Nim's macro system to produce a framework that allows
   for the development of applications that are boilerplate free.
 - Keep it small, keep it fast, keep it flexible.
-
-
-Todo
-====
-
-- Expose a nice API to do Ajax requests.
diff --git a/src/ajax.nim b/src/ajax.nim
index 05e9740..d002380 100644
--- a/src/ajax.nim
+++ b/src/ajax.nim
@@ -31,11 +31,14 @@ proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
   ajax.send(`data`);
   """.}
 
-proc ajaxPut*(url: string; headers: openarray[(cstring, cstring)];
+proc ajaxPut*(url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int, response: cstring)) =
   ajax("PUT", url, headers, data, cont)
 
-proc ajaxGet*(url: string; headers: openarray[(cstring, cstring)];
+proc ajaxGet*(url: cstring; headers: openarray[(cstring, cstring)];
           cont: proc (httpStatus: int, response: cstring)) =
   ajax("GET", url, headers, nil, cont)
+
+proc toJson*[T](data: T): cstring {.importc: "JSON.stringify".}
+proc fromJson*[T](blob: cstring): T {.importc: "JSON.parse".}

From 32384224125606671cdb14b2b8faf5d53451dbaf Mon Sep 17 00:00:00 2001
From: Roman Vishnevskii <roman.vishnevsky@xored.com>
Date: Sat, 22 Apr 2017 13:01:05 +0700
Subject: [PATCH 026/264] Add local storage for todoapp

---
 examples/todoapp/todoapp.nim | 118 ++++++++++++++++++++++++-----------
 1 file changed, 80 insertions(+), 38 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 9027603..051b6ed 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -1,21 +1,52 @@
 
-import vdom, karax, karaxdsl, jstrutils
+import vdom, karax, karaxdsl, jstrutils, components
 
 type
   Filter = enum
     all, active, completed
 
 var
-  entries: seq[(cstring, bool)]
   selectedEntry = -1
   filter: Filter
+  entriesSize: int
+
+proc getItem(key : cstring ): cstring {.importc: "localStorage.getItem"}
+proc setItem(key, value : cstring ) {.importc: "localStorage.setItem"}
+proc clearEntries() {.importc: "localStorage.clear"}
+
+proc getEntryCstring(pos : int): cstring =
+    result = getItem(cstring($pos & "cstring"))
+    if result == cstring"null":
+      result = nil
+
+proc getEntryBool(pos : int): bool =
+    var value = getItem(cstring($pos & "bool"))
+    result = value == cstring"true"
+
+proc setEntryCstring(pos : int, value : cstring) =
+    setItem(cstring($pos & "cstring"), value)
+
+proc setEntryBool(pos : int, value  : bool) =
+    var val = cstring"true"
+    if not value:
+        val = cstring"false"
+    setItem(cstring($pos & "bool"), val)
+
+proc addEntry(str : cstring, bval : bool) =
+  setEntryCstring(entriesSize, str)
+  setEntryBool(entriesSize, bval)
+  inc entriesSize
+
+proc setEntry(pos : int, str : cstring, bval : bool) =
+  setEntryCstring(pos, str)
+  setEntryBool(pos, bval)
 
 proc onTodoEnter(ev: Event; n: VNode) =
-  entries.add((n.value, false))
+  addEntry(n.value, false)
   n.value = ""
 
 proc removeHandler(ev: Event; n: VNode) =
-  entries[n.key] = (cstring(nil), false)
+  setEntry(n.key, cstring(nil), false)
 
 proc editHandler(ev: Event; n: VNode) =
   selectedEntry = n.key
@@ -23,20 +54,20 @@ proc editHandler(ev: Event; n: VNode) =
 proc focusLost(ev: Event; n: VNode) = selectedEntry = -1
 
 proc editEntry(ev: Event; n: VNode) =
-  entries[n.key][0] = n.value
+  setEntryCstring(n.key, n.value)
   selectedEntry = -1
 
 proc toggleEntry(ev: Event; n: VNode) =
   let id = n.key
-  entries[id][1] = not entries[id][1]
+  setEntryBool(id, not getEntryBool(id))
 
 proc onAllDone(ev: Event; n: VNode) =
-  entries = @[]
+  clearEntries()
   selectedEntry = -1
 
 proc clearCompleted(ev: Event, n: VNode) =
-  for i in 0..<entries.len:
-    if entries[i][1]: entries[i][0] = nil
+  for i in 0..<entriesSize:
+    if getEntryBool(i): setEntryCstring(i, nil)
 
 proc toClass(completed: bool): cstring =
   (if completed: cstring"completed" else: cstring(nil))
@@ -47,7 +78,7 @@ proc toChecked(checked: bool): cstring =
 proc selected(v: Filter): cstring =
   (if filter == v: cstring"selected" else: cstring(nil))
 
-proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
+proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.component.} =
   result = buildHtml(tr):
     li(class=toClass(completed)):
       if not selected:
@@ -62,14 +93,36 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
           onblur = focusLost,
           onkeyupenter = editEntry, value = d, setFocus)
 
+proc makeFooter(entriesCount, completedCount: int): VNode {.component.} =
+  result = buildHtml(footer(class = "footer")):
+    span(class = "todo-count"):
+      strong:
+        text(&entriesCount)
+      text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
+    ul(class = "filters"):
+      li:
+        a(class = selected(all), href = "#/"):
+          text "All"
+      li:
+        a(class = selected(active), href = "#/active"):
+          text "Active"
+      li:
+        a(class = selected(completed), href = "#/completed"):
+          text "Completed"
+    button(class = "clear-completed", onclick = clearCompleted):
+      text "Clear completed (" & &completedCount & ")"
+
+proc makeHeader(): VNode {.component.} =
+  result = buildHtml(header(class = "header")):
+    h1:
+      text "todos"
+    input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
+          onkeyupenter = onTodoEnter, setFocus)
+
 proc createDom(): VNode =
   result = buildHtml(tdiv(class="todomvc-wrapper")):
     section(class = "todoapp"):
-      header(class = "header"):
-        h1:
-          text "todos"
-        input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
-              onkeyupenter = onTodoEnter, setFocus)
+      makeHeader()
       section(class = "main"):
         input(class = "toggle-all", `type` = "checkbox", name = "toggle")
         label(`for` = "toggle-all", onclick = onAllDone):
@@ -77,37 +130,26 @@ proc createDom(): VNode =
         var entriesCount = 0
         var completedCount = 0
         ul(class = "todo-list"):
-          for i, d in pairs(entries):
-            if d[0] != nil:
+          #for i, d in pairs(entries):
+          for i in 0..entriesSize-1:
+  
+            var d0 = getEntryCstring(i)
+            var d1 = getEntryBool(i)
+            if d0 != nil:
               let b = case filter
                       of all: true
-                      of active: not d[1]
-                      of completed: d[1]
+                      of active: not d1
+                      of completed: d1
               if b:
-                createEntry(i, d[0], d[1], i == selectedEntry)
-              inc completedCount, ord(d[1])
+                createEntry(i, d0, d1, i == selectedEntry)
+              inc completedCount, ord(d1)
               inc entriesCount
-      footer(class = "footer"):
-        span(class = "todo-count"):
-          strong:
-            text(&entriesCount)
-          text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
-        ul(class = "filters"):
-          li:
-            a(class = selected(all), href = "#/"):
-              text "All"
-          li:
-            a(class = selected(active), href = "#/active"):
-              text "Active"
-          li:
-            a(class = selected(completed), href = "#/completed"):
-              text "Completed"
-        button(class = "clear-completed", onclick = clearCompleted):
-          text "Clear completed (" & &completedCount & ")"
+      makeFooter(entriesCount, completedCount)
 
 setOnHashChange(proc(hash: cstring) =
   if hash == "#/": filter = all
   elif hash == "#/completed": filter = completed
   elif hash == "#/active": filter = active
 )
+entriesSize = 0
 setRenderer createDom

From 459d696128078b8dd8d3bf1305e166f7fc4d8520 Mon Sep 17 00:00:00 2001
From: Roman Vishnevskii <roman.vishnevsky@xored.com>
Date: Sat, 22 Apr 2017 13:29:24 +0700
Subject: [PATCH 027/264] Codestyle fixes

---
 examples/todoapp/todoapp.nim | 46 ++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 051b6ed..81d03f9 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -8,36 +8,36 @@ type
 var
   selectedEntry = -1
   filter: Filter
-  entriesSize: int
+  entriesLen: int
 
 proc getItem(key : cstring ): cstring {.importc: "localStorage.getItem"}
 proc setItem(key, value : cstring ) {.importc: "localStorage.setItem"}
 proc clearEntries() {.importc: "localStorage.clear"}
 
-proc getEntryCstring(pos : int): cstring =
-    result = getItem(cstring($pos & "cstring"))
-    if result == cstring"null":
-      result = nil
+proc getEntryCstring(pos: int): cstring =
+  result = getItem(cstring($pos & "cstring"))
+  if result == cstring"null":
+    result = nil
 
-proc getEntryBool(pos : int): bool =
-    var value = getItem(cstring($pos & "bool"))
-    result = value == cstring"true"
+proc getEntryBool(pos: int): bool =
+  var value = getItem(cstring($pos & "bool"))
+  result = value == cstring"true"
 
-proc setEntryCstring(pos : int, value : cstring) =
-    setItem(cstring($pos & "cstring"), value)
+proc setEntryCstring(pos: int, value: cstring) =
+  setItem(cstring($pos & "cstring"), value)
 
-proc setEntryBool(pos : int, value  : bool) =
-    var val = cstring"true"
-    if not value:
-        val = cstring"false"
-    setItem(cstring($pos & "bool"), val)
+proc setEntryBool(pos: int, value : bool) =
+  var val = cstring"true"
+  if not value:
+    val = cstring"false"
+  setItem(cstring($pos & "bool"), val)
 
-proc addEntry(str : cstring, bval : bool) =
-  setEntryCstring(entriesSize, str)
-  setEntryBool(entriesSize, bval)
-  inc entriesSize
+proc addEntry(str: cstring, bval : bool) =
+  setEntryCstring(entriesLen, str)
+  setEntryBool(entriesLen, bval)
+  inc entriesLen
 
-proc setEntry(pos : int, str : cstring, bval : bool) =
+proc setEntry(pos: int, str: cstring, bval: bool) =
   setEntryCstring(pos, str)
   setEntryBool(pos, bval)
 
@@ -66,7 +66,7 @@ proc onAllDone(ev: Event; n: VNode) =
   selectedEntry = -1
 
 proc clearCompleted(ev: Event, n: VNode) =
-  for i in 0..<entriesSize:
+  for i in 0..<entriesLen:
     if getEntryBool(i): setEntryCstring(i, nil)
 
 proc toClass(completed: bool): cstring =
@@ -131,7 +131,7 @@ proc createDom(): VNode =
         var completedCount = 0
         ul(class = "todo-list"):
           #for i, d in pairs(entries):
-          for i in 0..entriesSize-1:
+          for i in 0..entriesLen-1:
   
             var d0 = getEntryCstring(i)
             var d1 = getEntryBool(i)
@@ -151,5 +151,5 @@ setOnHashChange(proc(hash: cstring) =
   elif hash == "#/completed": filter = completed
   elif hash == "#/active": filter = active
 )
-entriesSize = 0
+entriesLen = 0
 setRenderer createDom

From 479db8c2cc2bf9f2bd88d9bb06a5bf9a49d6faf9 Mon Sep 17 00:00:00 2001
From: Roman Vishnevskii <roman.vishnevsky@xored.com>
Date: Sat, 22 Apr 2017 13:33:20 +0700
Subject: [PATCH 028/264] Codestyle fixes

---
 examples/todoapp/todoapp.nim | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 81d03f9..1ba06a6 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -15,18 +15,18 @@ proc setItem(key, value : cstring ) {.importc: "localStorage.setItem"}
 proc clearEntries() {.importc: "localStorage.clear"}
 
 proc getEntryCstring(pos: int): cstring =
-  result = getItem(cstring($pos & "cstring"))
+  result = getItem(&pos & cstring"cstring")
   if result == cstring"null":
     result = nil
 
-proc getEntryBool(pos: int): bool =
+proc isCompleted(pos: int): bool =
   var value = getItem(cstring($pos & "bool"))
   result = value == cstring"true"
 
 proc setEntryCstring(pos: int, value: cstring) =
   setItem(cstring($pos & "cstring"), value)
 
-proc setEntryBool(pos: int, value : bool) =
+proc markAsCompleted(pos: int, value : bool) =
   var val = cstring"true"
   if not value:
     val = cstring"false"
@@ -34,19 +34,19 @@ proc setEntryBool(pos: int, value : bool) =
 
 proc addEntry(str: cstring, bval : bool) =
   setEntryCstring(entriesLen, str)
-  setEntryBool(entriesLen, bval)
+  markAsCompleted(entriesLen, bval)
   inc entriesLen
 
-proc setEntry(pos: int, str: cstring, bval: bool) =
+proc updateEntry(pos: int, str: cstring, bval: bool) =
   setEntryCstring(pos, str)
-  setEntryBool(pos, bval)
+  markAsCompleted(pos, bval)
 
 proc onTodoEnter(ev: Event; n: VNode) =
   addEntry(n.value, false)
   n.value = ""
 
 proc removeHandler(ev: Event; n: VNode) =
-  setEntry(n.key, cstring(nil), false)
+  updateEntry(n.key, cstring(nil), false)
 
 proc editHandler(ev: Event; n: VNode) =
   selectedEntry = n.key
@@ -59,7 +59,7 @@ proc editEntry(ev: Event; n: VNode) =
 
 proc toggleEntry(ev: Event; n: VNode) =
   let id = n.key
-  setEntryBool(id, not getEntryBool(id))
+  markAsCompleted(id, not isCompleted(id))
 
 proc onAllDone(ev: Event; n: VNode) =
   clearEntries()
@@ -67,7 +67,7 @@ proc onAllDone(ev: Event; n: VNode) =
 
 proc clearCompleted(ev: Event, n: VNode) =
   for i in 0..<entriesLen:
-    if getEntryBool(i): setEntryCstring(i, nil)
+    if isCompleted(i): setEntryCstring(i, nil)
 
 proc toClass(completed: bool): cstring =
   (if completed: cstring"completed" else: cstring(nil))
@@ -134,7 +134,7 @@ proc createDom(): VNode =
           for i in 0..entriesLen-1:
   
             var d0 = getEntryCstring(i)
-            var d1 = getEntryBool(i)
+            var d1 = isCompleted(i)
             if d0 != nil:
               let b = case filter
                       of all: true

From 6aa87e4b8168c7b1f45fadbc41ef479909792b52 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 22 Apr 2017 10:45:42 +0200
Subject: [PATCH 029/264] todoapp: use local storage properly

---
 examples/todoapp/todoapp.nim | 54 +++++++++++++++++++-----------------
 src/jstrutils.nim            |  2 ++
 src/localstorage.nim         | 10 +++++++
 3 files changed, 40 insertions(+), 26 deletions(-)
 create mode 100644 src/localstorage.nim

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 1ba06a6..802bfc9 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -1,5 +1,5 @@
 
-import vdom, karax, karaxdsl, jstrutils, components
+import vdom, karax, karaxdsl, jstrutils, components, localstorage
 
 type
   Filter = enum
@@ -10,36 +10,35 @@ var
   filter: Filter
   entriesLen: int
 
-proc getItem(key : cstring ): cstring {.importc: "localStorage.getItem"}
-proc setItem(key, value : cstring ) {.importc: "localStorage.setItem"}
-proc clearEntries() {.importc: "localStorage.clear"}
+const
+  contentSuffix = cstring"content"
+  completedSuffix = cstring"completed"
+  lenSuffix = cstring"entriesLen"
 
-proc getEntryCstring(pos: int): cstring =
-  result = getItem(&pos & cstring"cstring")
+proc getEntryContent(pos: int): cstring =
+  result = getItem(&pos & contentSuffix)
   if result == cstring"null":
     result = nil
 
 proc isCompleted(pos: int): bool =
-  var value = getItem(cstring($pos & "bool"))
+  var value = getItem(&pos & completedSuffix)
   result = value == cstring"true"
 
-proc setEntryCstring(pos: int, value: cstring) =
-  setItem(cstring($pos & "cstring"), value)
+proc setEntryContent(pos: int, content: cstring) =
+  setItem(&pos & contentSuffix, content)
 
-proc markAsCompleted(pos: int, value : bool) =
-  var val = cstring"true"
-  if not value:
-    val = cstring"false"
-  setItem(cstring($pos & "bool"), val)
+proc markAsCompleted(pos: int, completed: bool) =
+  setItem(&pos & completedSuffix, &completed)
 
-proc addEntry(str: cstring, bval : bool) =
-  setEntryCstring(entriesLen, str)
-  markAsCompleted(entriesLen, bval)
+proc addEntry(content: cstring, completed: bool) =
+  setEntryContent(entriesLen, content)
+  markAsCompleted(entriesLen, completed)
   inc entriesLen
+  setItem(lenSuffix, &entriesLen)
 
-proc updateEntry(pos: int, str: cstring, bval: bool) =
-  setEntryCstring(pos, str)
-  markAsCompleted(pos, bval)
+proc updateEntry(pos: int, content: cstring, completed: bool) =
+  setEntryContent(pos, content)
+  markAsCompleted(pos, completed)
 
 proc onTodoEnter(ev: Event; n: VNode) =
   addEntry(n.value, false)
@@ -54,7 +53,7 @@ proc editHandler(ev: Event; n: VNode) =
 proc focusLost(ev: Event; n: VNode) = selectedEntry = -1
 
 proc editEntry(ev: Event; n: VNode) =
-  setEntryCstring(n.key, n.value)
+  setEntryContent(n.key, n.value)
   selectedEntry = -1
 
 proc toggleEntry(ev: Event; n: VNode) =
@@ -62,12 +61,12 @@ proc toggleEntry(ev: Event; n: VNode) =
   markAsCompleted(id, not isCompleted(id))
 
 proc onAllDone(ev: Event; n: VNode) =
-  clearEntries()
+  clear()
   selectedEntry = -1
 
 proc clearCompleted(ev: Event, n: VNode) =
   for i in 0..<entriesLen:
-    if isCompleted(i): setEntryCstring(i, nil)
+    if isCompleted(i): setEntryContent(i, nil)
 
 proc toClass(completed: bool): cstring =
   (if completed: cstring"completed" else: cstring(nil))
@@ -132,8 +131,7 @@ proc createDom(): VNode =
         ul(class = "todo-list"):
           #for i, d in pairs(entries):
           for i in 0..entriesLen-1:
-  
-            var d0 = getEntryCstring(i)
+            var d0 = getEntryContent(i)
             var d1 = isCompleted(i)
             if d0 != nil:
               let b = case filter
@@ -151,5 +149,9 @@ setOnHashChange(proc(hash: cstring) =
   elif hash == "#/completed": filter = completed
   elif hash == "#/active": filter = active
 )
-entriesLen = 0
+
+if hasItem(lenSuffix):
+  entriesLen = parseInt getItem(lenSuffix)
+else:
+  entriesLen = 0
 setRenderer createDom
diff --git a/src/jstrutils.nim b/src/jstrutils.nim
index c69e2fa..0be4076 100644
--- a/src/jstrutils.nim
+++ b/src/jstrutils.nim
@@ -21,3 +21,5 @@ proc isInt*(s: cstring): bool {.asmNoStackFrame.} =
   asm """
     return s.match(/^[0-9]+$/);
   """
+
+proc parseInt*(s: cstring): int {.importcpp: "parseInt(#, 10)", nodecl.}
diff --git a/src/localstorage.nim b/src/localstorage.nim
new file mode 100644
index 0000000..5744124
--- /dev/null
+++ b/src/localstorage.nim
@@ -0,0 +1,10 @@
+## Karax -- Single page applications for Nim.
+
+## This module contains wrappers for the HTML 5 local storage.
+
+proc getItem*(key: cstring): cstring {.importc: "localStorage.getItem"}
+proc setItem*(key, value: cstring) {.importc: "localStorage.setItem"}
+proc hasItem*(key: cstring): bool {.importcpp: "(localStorage.getItem(#) !== null)".}
+proc clear*() {.importc: "localStorage.clear"}
+
+proc removeItem*(key: cstring) {.importc: "localStorage.removeItem".}

From a9c4b7ab67d72f7a19a2a071e9e6716157625cbb Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 22 Apr 2017 10:55:28 +0200
Subject: [PATCH 030/264] add benchmark result

---
 docs/benchmark.png | Bin 0 -> 30568 bytes
 readme.rst         |   5 ++++-
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 docs/benchmark.png

diff --git a/docs/benchmark.png b/docs/benchmark.png
new file mode 100644
index 0000000000000000000000000000000000000000..3949ad5830ea2f655fdecceec5d8d273cc10769f
GIT binary patch
literal 30568
zcmc$`WmuJ48#PLbfCyV@Bt+?wE-68jloF(+r4d*(NT`5{Al)F{y@*9C-Q6HccZ2kq
zkMH~Lz1ZJ5*ZFm>;}0)ftmm11-{T%*Oaqk^pWxw;<Dj6R;K@9dQb9pM=R`q4ExLXU
zd=j&;HiUwLQ)n(JsU#yQNuy+MYie#~f`aliFd`C5O;wY;b<3Tjw(r&>|GqeyTG_&{
za#$31zrMX?M8iWt>v!(~v6@touOAK0XUvdd8e-NPXv9S~+h~&W{4kZ3$FW!q%#PMK
z$1jETH@7^hwl3?Of7C8{peUV;p-JGdVu~}1>5{H5bbR{s!Sojv3Pyl8Mw&NqTo}C_
zHqI`3)?#b@>YSt_Uyi#px8CK&<(mi|e)b@A6vDUmto%V?A9gi)*k5COb3`HF@isL@
zynNrOl!4oirYy?&9ou0_=zFn)#~UZbS49*Z_fQBJt;!#uqU>Vv^mfhOPZlK<>Y(>v
z4-PI7?)V%p#YeK>5l)hxQIPmkm2s{4BJ9~W{f9=)iB?X&(MvNX>KM*?u{7@z&fl=N
zUaDJscy&QW{z~cAyP3x2Hu2FsdRKU1^l>q&&tBJDPfyZ<)EDQmhYkZ%DN8Y(PDcr5
z%J$Kn4@=+S9_<cje%)i$p=3Q=%Eb5`cs}>S@Uz_B^_V4>L<Y-5hg*{O76tuCs2=p1
zx8JS9b(m^${mS@4$DyWA_3U%DIWGM57;dlZvl|C`S$9=*@cDbDCF7U;1D9|Ibej`>
z!;{~gsMa(cmwh7Gsa;vV7PoZ2{8^vxvk(_gZ{ckeujOV8gN7T?=&JjVa%F=%W5)*@
ztl>1;ZE{cL%@E0%^q<>*Iea4F?3S0$M~xQrb4dE_`D1<Dm-Owsc$9;R$46``@Q{zs
zF_N*TNpPCp#gA~J+`otVs%s(OEt!L0R~J69$atvtO+s(xJ`A^p>-oJnW9VjOhSUVt
zA4w3tz!sqSD-G>#8^&4#y%NfYhMPrL;eL|II78lHvplcRNE(Rj(5Fy!XHi|yP8tbZ
z@LC$5JiwG7ph|hf^AuIZuk5a5+l>;RJ9qKh@NwR!B$G0t{*t79MOjA1>?@mWzkFQ{
z_Z%(3zd*bq*=G4K9+aR*Tge;`&{SUv<)N)Ld^DgK!#sQ^`IE>Ft>#*f&)!dKJ2D;Y
zByWnJEZda7QK#_h-!l++hx~Od<umDBz5t3_0aEvN0tm*v32D=x(y0WO(QLGdq*0Se
ziW=FGlD`k+{5ED(!)ZWz(-hAXJ%d#Bb9N(-VS&M>!L<i-(OWN=)yXUa;NMG%zKmg5
z(U+rWf5>l1{I1t3+HliA?3bOuHAND$puLvIKSS*-UpH5xS6<U$DWKpFh-;YJ!EuqS
zK^G<HZONR&-9FuB*pAu}`F;0{0WBt3`oTSyTPfHckEp(e+r`@j_DPb`%m0-gFd-#u
zNb^Omi{6HTimses>z03j>V5N2_I4jaSy@_Z+K4Z!GNUrjWVYIkORkMa)`WN6TMF%L
z%WUIsN1yK{B>RBc98?ldn_`uEC$&t4N_j>#Ta7Y@n>RLAaauY*T`yfU(<?MthE%TT
ze&sC+I_CT2bZ+-&p5CH^)9K#VkX?KlDVzAEhDDJ6arnR&`!GW}>yVrfA&y}d-n$B6
zd=WRp6(iUqMcF;&+@!8?q~4pm`#qvPDm%1_nfs~at5_a>a{uxer*NkPKB?Az*b1xL
zt=a&u&>0!(sE9A{5WJ}F(EN~E#>rlBQlT5f_udsJypG)o*?Fw^xaTpuqD`(&txoV%
zT1{w8sYkrWR}a54^kWVjc})Cw#_tkv6mWV8IX_(cAV<VagwL#}aYr?UWt`=8I8KBj
zi-`LB2)uB=h*4$@CTGTHSy?$Q+1J$$vvr=6shVU7<<e(ws@J9o<w&bKsLf?>s8{D5
zeqic!G{|_+89f?3x7x8fvr2n#Z#7|6l^j8CK<-M8N8ZaL6U!I76I;zY$<qoSDm#OZ
zm=BwajL=(5zGAT08nzit9O@qq>>E!ROyf>rDeN5R?$00e%y}~GFrb~Pk?pKcooSnz
zl=nuwz7vJ7i03I!)`LpR>l9jKyEpJjojAU+m*_U>t5s!<1{ls8h8w7v@x1JMaLC=m
zZNueN`oi+{{;!0OlO%8Wi+N-?1ub@))LMpGd3wv5_Y-1#$XfHht=9<-PYrscx|SYm
z<4S%M_~=LM8ObB}rjsqwI`T(eUjAG41NGDqtr5<V(|mX9Wj+bMW<GxF;_`xW3Tuur
zukz9oxe8(Hqs-bbo+an6PruM1<bFlo(dAlB{@LIp@T+gD&GFOghwEcoX`4+>IgV~W
z^H#cG1x{2>{mwG>f<Jd#hMS%*yY;{Zx_hi^wR44kZ7%37&#c^?`)g5ob7xBRJ9lGg
zkHb{wfMvc$F8|2nsC%X}huphngW-}E&pgkOQ=Pr^-|v4%p4M%1Z{I$F|Ned<dQp9r
zbnO+^HhL_Y1PzOw#%w9gbTY3*J$o}7o|abezDbe!He&XWK&ve$WbQ7tq^@LzzbN(~
z?(KK*cXIDJ@C)&hKG_8`1}+Ed+^G`XRSY*I<j4^ur>3ORr4%XdG8#`bk?drPB4K?~
z`N;Y4$Oml}B8`l^no3!FBKP4KQY(3>uAS(@b#W&;ciKpzYB8tyxt8%x*KXM2=HllT
z!KR2NyjJ0+sHWii0{7QtNfjJrSrzWgRqb@R+J@DH-K0~X$D*f}OH>SeYW|cittBmS
zsdGE*cvL;Nphs((?ExX-^^?)D{P9v#on@9hMZW>{G~Ud?e$!0JG=>uio{*o>%3pSv
zxF7DxM>-OV<=&g5ako6Q`)t<JYsqOTXgN8OT{u~0^Rl+{<Q_#bUNOZ4pM_1=4}tKt
z2<_6qGA7qSTUUBlI#+7GCssD?8tuK^)Mt%r{s^={Gy{n(;!`$%ucouM(_)9*;}K8o
zdJ=nFTap;U2x3pRMZzB!?faP}Nf{N*wrf*1@blT5Q#UU@`wJ&Hjf6jqnh(FRx%*?d
zGOnuH?#N#x_i&0C&L~nARi;r^QQuXV=bAK9M|oNo$q*@)WtabItgz<I+C@A16uJmj
z0{#fKilCa~a;L$}&$@ehPsmwd%yPMQ&&i&11iz=Yz8qg%ny_eIO<A>V{oQ(E>1$aq
ztTj49r6F2Zd$Zv7a8Tk4uavd4)AmKT)RTL7pWdga&W0}!<?0)Hxw=doIZl$raUYn$
zdpE_N2y2X8=QZX3%umO6!2g8TIq697$B5w%`%R5G{a{_CdZpLOhrbTx(&Ub#GB}oW
z5?>LOeb$w!<Qgl_*=Qeb%RMS&s~vHjK04{9NaQaluP)QCTd~{w##XJpWIH)!gD`?+
z7Jo09o3f3pPgpBkwW_i7tf=ZN&rNriIZCI>Ok_El+M2HHMZ8&(Xz<(gH^4u2i#j?y
zdVMNQmHyD}RA6prC~PWoEc0D&T4IE#hL_%P^~Dz6x%xQ?))bbI-rE`%t~N4{^CuJ3
z`u@B6D*BN(bMZz$M+fPU9^Bb*gRc+wSvIa^7yH)BTv}gJ)bg8MI$o3-J+${&&fnhH
zul{v}vlZ-F^t+GmFP@z<qt({z_HWN{k}O0gJ!~#-?U=YQ@3CB1j`N?}vi<O^7fVn~
zNF*+Lw?3|pB7y!n7;Bbtf<Y-2B^ib)9vZ#&#SF9i;Gh)a;&$&re`yI?at@JqpAO1d
z-)m~2)#SS?H^d3ZzxJT;@sqTQg%jJ_@GU*Id88dSu(ERW$~IsWYgT(}e_w5If4{<_
zY^)Wf%qxDa+wA_k!%KgS7=-5W^e62B)QiV&u+Swj<68Q3tpScrFjsrw_(DNm$jH{3
z-N4w^(1hK^+73Wl6qJW9Lf}Vh6GsCY7i%jU2O$>`+CSeA0zX3^bI{WK`HG{Z2<;06
zB^pUvdlMR7b{_Tzw4yjPG&B$GjZKAAq@@4*IQW+c?JGw|J0T7ZXJ==2XKr>|dovDB
zK|w)|2V5LnTx{SQY!0qAjs`AlHV*gx^OFC)N6N&($llz}(cIRC270f7p)Jf&gq9X+
z=<h%O>8FW{`9Ce$IQ(~5V1OLZZ#X#FA8`ErZt&<s=u;sja~Bh<7gFZdCN>VB4N(D3
z{)d0Q|9|}EpB9mx)cog39&Rq=Cy{>h-zOh(Km$M;(0^v@&!=FzL~$N+{5|!eI5SkW
zttcqsC^AwKYA&ej)7Tzr3$>R!)b2DGk6!SspBDHA5SyqrSeSR3+#a>aCGN~0**GbT
zn9M2D(6-1u&|)6&ZN`H$TQH3=GsiK~1{nOPAiZ%n<lS3>-QJ@rk-7WwG-2E_rfo~E
zwe${)ti7&1r|tG$u92#_MMXtzPp{K>qoDooFY!;;hdzI?SCPjc5Jy4%-(L;b1WnsP
zNMA!i<D?TOxUD+;*x)au?|IX_-}?I@=<xt1RNv_69Cn<K|1^PuhQaB9f2C1*@ct$>
znDUGNH3&UR6Y$ghpDuu(3}wA(=reLYexpV1iNuW`=>O|I)Chqpct7WJT|#2yo?JKl
zO@-7^6rbo@Gy#Fxt0_gu&x#X#KSJ*4^`>wX33>VFB<~(0_r#a94hwmDXfiOa8ye;y
z7+L?GNAMOfWg^HO{r_jml5ON8BLB>oC?*aLj#XzQ+g*oj-Rkn@)>iGk#qNCNRO!1%
zf$t;8$jA;CqVy3d@t%j{k>TNlc+EJuH;#{w%dIE*oaG-q@`YQDvgggg_p(=2CfA0t
zjq<hNC8pi6D@JM=`Pvl|#YU|<<8DWrlo2LrN?=ySd2k4tq>S>F=rIVgczp8mSlxHq
z8J@+|`^N0`2=^A$Uz}v!FdfO)Hsh$>53PQmTUa;o9*@GQV=b^H$p0oK&X8oi*SXd1
ze7gZj=|fny{A8K=+-iwY>t}<c)DnD`i{mA9)Rj+U+-R9{GBU+wWjsg6-*7p~T7oFB
z%8UQZ{7Y$Pt~y+>R6Z(b42tnZy`raGroD-}7P!<#$}fM^c^>+Uoi%cCa~oy+W>L>8
z($I5lt~Jb_;zXC1_)DB-5%X1G;4$+&8i9C2aKlixs&2)-g)dQ2W}Q(S6?Afum8|?$
zV=r5SsVfk$<L4`_l{ugB3gloKprc{ubJUl12X6bz%Gxz9#X*$9<vAa|yZ+fV%*x*N
zT@e9tBVe<hqmiqo6yMfc?fdHIdA8G<5jXqo+aqUm9Ry2o%h37+ymN>y$Mf`X1a7Ip
z|GA}8a?5hG0EQa!d80qopTa*i&LU{;)ieT*NBV%q*e*OQ%qWiEwp_&hu(J3Tn|68G
zUa!~>9-Fkhv{|_&)fk?ORI}bhx|ZlH%h1EXj~`1#Jx?l&8TB-UoHwnO;vGJBo;3KN
zXLufXjcA(1AUNNVQ-sIGSz3<dy`D}e%k!Mi;G`7tkCLTWpROJiJ>OTgoG8m?Nv+Ud
zIqDU=oDwwmoGiE2)s)@3z3PyK7=p8Emv?Q{y}7&yyD4lxAAsvLpT8F3ulE&gbYrq2
z4o#a<wNOule?}U1`|SMd9uo&$&|ZJ^9S-x_au(RyNOvrc`7djnn#{~hth$Pt2%$_w
zBy4L&WZP3IvBafy?=v`L@qys9n;GWYD_o~hGVmE1QX^?#L=Q^8UMDf!y{3P8qT!rM
z?SU5bwQ4ce(rSCQ(Py|<<S5?6%uG8|F<}a?S_{K>uzIV`()ov{b6}hoCP9b(61L)-
z)5#xJQ<bmzJbrJ_4%=wXJ@PuL{()%|4_8^}cS)4+yH@3?=Xvm)fAbOlG2&Ra=%tVL
zmgn(EMcqQd0mqx;kGNAc2e$R+<>&jEVsK(MEtgy!g5CAf-fO;}8s7iHR0w!r(m_a)
zW?pNSoIIQIk==gI<->;$I!c-1ENTPr3(#}>I6}f{r%CItPAo@=S#b#;O*^eB`}FQO
z{@x+k+wnY3i%-N(lxf<OET_189~$8l$TGl=5eFmM8&eLwusA|Hj9?9%n}(t%%lF*3
zYLBM8Dt>rX<DSSaWuj>QKyO@ukLo#4Z`JH6t_`HiRdwEq$La)!wjqYTAv&5nU%HA4
zgW$THIR8FEb9C(;iQe@ae52i4;30}OIsPByF8SiA>iJqWv-Q3h=SO-*uXx0@*#y!D
zdlH0oqv$cwEb_NQFIWl-EcH}anyD{;w>G>v9#$EwfAhw&FWCo|RL|>pA%wr5xxU4N
zk+H8%mbsV0w&tgnZ_U|3!Q~=Lw2EEw<*K`kYga69XSaQZ#Gzhpu+}@hH|H>0epQyn
zq{}li4XTaQ0!_rYhIfkN_N;{aQi3zusXMM#VVoyfB6BU62_F>ce8~=NHYy?o=0Yv6
znlxfg4s-jrf)0z7;5WLG?{B<jdoWQTr23Na2_2@e9*RRFCP}5eLiB^iZsSapCr%bs
zAEjg!70Wx>tMjDR!nB&o6!Wc~YeqiR!FPocSOlH8oV-bUC<og0rnllN>ez*SI5<NQ
z?Q(Ka>@fa{le5|_&)&M7AlpiX)r^DEr1P%n8yq^7eb;W@S@ylNB`{sN_FjYkD~=b~
zA@gWAtVj0|T7_xE*S9h>xnbFpQ3EFjYq~GfJ$S|@PlM|xUz|PWpS9>$CSij!p8X=J
ze*o{v;(ekUH3aLH>oEG&6zJoSlisvuk*<!T>+gFFQy5?Lce1e6(dP8b&&`wCksELv
z*U}Uwfxd2dD4O@c%J$Fi1<&UYYXuH$*sFCKZbgXo8iW!Jtdp%Ge0fnrs8=b8+I9Ym
zckSw9iBF+g8ERO16@r*ldX|A6o8Zidqx?RqznsP_<9bo+24{MuycQ9)Kc0&o<1R6v
zq3`+p*J<;l*pxFIZH10ILc)9~OWCL9;CwE<gZ-m3)eOK5KCcKt5^mA@Di02?30k9s
z|3zHE=0ozOuj)k8A(!(EVz1c<Eqs&*@QStW66(0f@F%QFrxm=iP-Z&s3i~SQf6b=A
z{a}^oy5Z2YybS*^IaX?#Q7wve(y+xY2)|>P0(x>EN8Dxj&k!-{7Gp(Ut5MZi{6c+W
z24qIp=wN%hzNFK$?)g+WYD2fu#ThFt<7{FNc0=PGQz@s=7BCHGL}#iI6|NF*D|*~V
z;g+9*LVL8oph&moJZ4r?;TH;$*a=N6PBq(LY@c-33lhb0P8fu(xDheB$>g)+7!HM|
z7w8hjkWX~x(r)#uMSciRGJ;akQvi0PWJ5g&#A)a;ZEAK}Ze8w-DpVqFt+c4Kk)1rN
zzPMe0@>pi_^61TFMVBRB-O8xqs?8!M*2x`@u)IL@@O^!ctwsImK-tXM<cxhj4)2{2
ztRM4k$L^E+n=qn5`|Vj6rg$Thi}tn~re*AcT>kA<8}-CA;w)8NKi|6??a!vyhiX}-
z9EYE4RMDumnh#*YP*rQq#V>C^d-zi;YX8CDEb4`Y#IDvC*`!`vv?rfP4J^J4luhCY
z3_nVZ3PrehE(!m@{v^hn@FY#_iK-^8r}ex)h{bR30Z90n_>|VWfs7+Lk{Cv`cOhIz
zOoGX&#}Z)E#!-K^E8Zz<9x@>DZWmWksLl~5ky3%b{b$;&(Raau{kpFm&)uk}n=HMn
z5$WdN(BTiVg(J1@Q+e+9-wH#+pw1O9D3jcFVmsQH9EF=QZL5q5!Ntu}yzN3eZm;i5
zZ+VSUxy+)D!W8oLEH<j<L*-=UGm>K#_HiO=WGD&WUTph|IZEVf&F_nRB^HKHF})ZN
z_s~tH3L%e|9bEw6#g|{>RaJ^fc3-=|bqKl|0_e(EaOcB&6tv-c$v(?^yIRUak5U?c
zBYZTXie@E#S$x@U(a%~_sg%iQI9MBXR%PBAEB>DF9hccL^=vQca!TP#-uM8IS1Ka3
z1#{&jVzc&WreW4Wfr2t;xRoW-nQdliU<=2WCwKhpcyBuTu5M||S{6%E(mZAwxozq^
zJR_nYmD8vtTp$RM&V-_z8x)%HK|O{rOUG>`eKUQ{bFZ5p{Wck6r82=BX0=dHoP}nm
z?96`0<x%#TzK8?mUy7O?Z>}9mLCE<TK+cD&pKjgr7RSIG;_a}c>kG<mDa+G>GuvI`
zc+oF!JTrzrO}KVV1N{<al=u49YD(IQV=d~A&y9}a<T#I@S|xtwb2EMZy&o5c71Keb
zrV4wAELRhzCy@~)a&{FQn7Vo@c5@8bALDND441AGN!d(Q_J`YUmkkpMKCx@~1$(2~
zmo-A7ke5u%4`Ub{qoosBR%4Tp<)3y8Tf4}_CL(;unEYHko88A^2b=129(G$^Uf!{F
z^<#lVW6<H?*gg16IKS(UunB#7oX<lYBw%dr?1z%j*p$K8h%JM-z}T8FYA8mO$a0z=
zU%F}xSeeAizTmGx2%ZlYdM#WVaPKAUS6KSJGuOFpO3ZvY3lmbGQy^@5b&VNQ11G13
z_$FTY<syGQna9%z4okZldSRuLZd<Q8G*r0w%H23Um5+}fhoPm)gwa=JXGHjq=Cd*}
zWv6H&I9X;I^&Vt-udL=4I*lf?>p6VL)Kd3OA;vGnjiwjbrkCjZeMccOnK)DbVmGRQ
zPVpe+L}kE*mgBmL-MqqwWU?0D)@Mw8J6h{CToDIU5BX#V)z{LOn%=5Lmh75}fRe(F
z{(AU&o+rJ|U!xGL{Y{{h>un>&8&rZ2z`T5-6Na)(Ke=W)kNE)cb4Ze`HrtuS-VOGA
z;5QzoEV)`?oaHp*+I#I@Y~|6M%F4<Q#+1cIJl@mQnxlm67I*v7Fk*!?@ekAnUb@(d
zdpuUmBkOwjL?JBC#>6XBtJ63u?WLSgKqz8SAwg&uhO0(tS&K$GuJ5taoZ+wR1}l`o
z=E05GRSC%`=Ebont4Dk@*WdaYDWr#AKji&}!+d(VKh=7^?aNHgU>%D~q@TvMEpNMy
zUzFd4|BMS~i2354>uP3jLZC)B?_DrDQB23%h30O<o^8+MB(e-&WpF8==Q+bXaj4Ax
zvbfCA%Ou8wGiEhQjOv|8SLbxj9eLoqoX>x`<T#V#Tw7L%Mnv{j)?&E-$e*52sUb}~
zgI2~T53!Sd8jChPt2R@DLH(TzYB>XxXYowD?J%S|R7nzJSy5e*IkpozGyg5{X665)
z2@q7Z2wg)eACupM$A>~bEOH@LzXGbD3hW7wofrD=qtHvT?gD(uo0d|ATu}EA`h4g<
zCZ*FTWD?DMmb6JFl)1vfo4(+SiMt;5O!Rf9n^Mf;;;34*+wxeA>)w>##QxA6hy<1X
zqbn-=vqB<wwND+_$NELE9-W3DH6~7Tf?-%rCym-^Sy*d2^L<gO+G?CjyWXpI8bCm&
zAD%~5v&Jg}>596~jBP;Cpb*E`U4U3+j^nkAj9b&+TeoxtAi^eYaW6^4-D!WAknYhx
z6M=%tKu{{t1zu!!etJ~lcCd<>qw-9d>Y+;!ug%n$h_ZGkRGK_{F$1cfAadRgkq7e6
zB1bI0zsF<mQ(lu>>PeX96H#^r1?Xn9cnd4i#CwYmU2ifb2#bs~)vmDNg^}PYYHDh3
zVt334iO6V!m$0z27c{9B!WE`l_Xkv?YSS2uEcNplp#Ac{@?Cr%yGe(@;a3y3`%W{7
z^|!a!4Cchd#9A8@`uZvfLNNI?*}_qug>k0=>=!=&JO*MrJAniGDVQ5w%gOS5KVg^c
zWQvBuBY?=FuN{#P5@IO9^I&e2VqOo6^l&E@VUKY|TP8DJGV$`ln>fFUdK@oAmD~Oh
zrFigCJgYnJ<6WP#Gmp;BPHuWwz*kw8)T|*BvIm^yv2LG=afBbg&hAv5Z5pFr<!WJO
zZTT1%AFs1W1p1vy)(#cIxf+E|B<XQI42dq^HY?|DI`3s~=na%0f>turd_ExJ=<eUI
z?4B4&eS**LpeZZ+!8rgFGSxc|KqZcYA?Ooymzbx~yTguop1{AD83$7>IF^yN(%pcN
zIE*$z(i_2wrE+8akw}X;T|{ZXkcr?|!<YQ4T-TVh-xKbv)oF0rH;(E!1fBO@o;{l#
zE;5jG|NYZ{0~9UgdbMujABb3Vaz7$M*!1hB6jJkuqu6y3(fq10S}&Z|#|)+su+jqE
zYQzHA8^S(NZR}aA9!qNQHTr)G1m=8*)F;|9Q1E&8D?ToTVvo!7qiW*Fo0LLhA$KLG
z?#4cHUF?csZ|fJo1ljo7#hj?kl)zC98GIm%Vtl?m>=}%_{K|^+g6LsW%$U=%r_qr;
zJd~ZL*#c@HrjNnF9Gs}$hsxWbVPUtIZPZUHOGI-q%|;7!`Cj!UmpB=Ce!AW#MRkwp
z`Da6ws0Hy4KDt@0q*-b9#9t7s3~D#lrFFp+4TsPsDzkCwCA`DYtFfMmCfzDMD$wli
zm{{ES6TJT3dusLKT|t4_UR<(&e+2FAVJ2|`)r6CHioZh%I7{D%X#%k0KA|HY+GHWj
z>xMb1Ne=gro);fOGn;R?C?XO-@wtBePFHV*^S}UY$ZbtWmc-37U(;^yzr)cZoW5JP
zL*GRpO*9QbJ_tMgTHN8d$gMvDgv?uG1G>Kt4OkPYT)=RZjoes3KI%Rp;PJbfF9MMd
zN<VYMx-s%Q;~R?4k0V8+#;Nb^Y!LhqYmC+FSr7hFbU%2Nh$bLg?@bS=(3KfO;zEsL
zY^gte3vE{a@=J)XEKP>ZD7P>C4?jmk4`MFy?P00ANRd>$;Wkac&V83BNYTe98W4hk
zffgwt$m5&^SlZ=Q&6Syx2eG+HidXsR|3WzQmTeH5A7VpA$KMkIng*<0N-X1j<oR#`
zBTvNGLT-fMHu#KFS%L7@-_L@#JVf;+edg<o+(-a6#CB%U<6N1yL==fn42@8}`+I#s
zu{a&gxIm`U=68I2sHinT=JD>iv-$L`TkBwHb2i_`WB=V$vKGdxz-(eC#Sh4fK?Kck
z)}7WX2LcX8u7)ejfJ|2Ud;p8CruKR6%9hgtL(h4a5Qfa8ia!SXkeRvlHBv`ul-STX
z1)Fzsp66Qir#y}X{1SB10S3}cl@7WyYZNSEiiwGd+O;#+TJ3q0TGR?qilqs{&RT;R
z3f5iGoFk=X&nkWZO3wP?>^Q?y$Z36fcTn{Hm01(@iN-ZN+?=+wtv!gGe%(sRZs!Wf
zy^SFLnIe$LMs89)eAW7yvUJk6UWA5{gk&jlsVl}v7vWeOXInS!v^8V>OynRO!Y9^H
zCR2#vY8G-_eu+!MUN&B8Hksf&L)PYpd8J7zpXfEkjFBineriG_sKNL5Bem|%AZ|OP
zoE~jeIBiU5ZcM=Q0mU&=`PwK~yP{x$L`=yZjB2w|2)6nHB9EZdmZ44xuXEg-8ZU!T
zPPs`Zv9tWX+HE?CfA$#)>NA=}Eki&B8n|T-)6vm26LaWU@z1!VRwn{xZ~Sm$a-$K8
zx-9icuoj>sbvrx1+<PL=#)U`Dvt2NG>-KHkBTh`=Zr{Y+0?)ESL?ql|n7K#{7kQNk
zDA71cnp~^^hg%L?Q)gjibu=<6s{>)1&t>~%_5Oey8$bUj)tj@|r`zB0^PRV53Sce5
z>RT4D{$fz5+TV_^v2I*@A&t~&pJjr8aT;m#lY@zJ>o{}y&U?WR4ev>Rx}Me2+BylC
z18cAmoHnbLCcx68PnIP&UgEgbm{e?UaZEUYEG(y>fTu@kFUZE$4abQv`=LZ;OdQ1m
z{tVHNykiPc*0IgL+|(jn{A%M26IL6QDs(rjbXAJ_`5~hA4Q$jz;)GK;HbU14bzFtr
zr>4uJ^BLQ5b%hSrg*!vNSlG|_kDe?V4Ys<(R01}FXZfF=(k++~zOY%ngnci3`rd1;
zgm!5@I+i5_%CF6>Is|*cZ_d64y;Js1N!wvtJxPy@f~a7?u9)Gx3?KTIGW(c2i0OfH
zQAkM0Y<YTSX0?sEMWAv8566G<>#FP`rr=Du($?e0k2f=p)Y`s&-WwU_sC%u**yA^^
zPm^6~6Xu7w_C7AvmjotxV^fb*k!r|9Kr3^m0<p%$f3KD6wnYLW#7ZPzT*pvSPS(bC
z;=E&`ajVx@^SGpL74vLlp*Y1u?%AxZ$$blUQKrUNdj4EHbuf-^42$9zve@D4Po7&C
z@pxGcqy@5RmNXGsF?yb?WCEIg-jrFp+9`icG~-~Ex!it1c5OH}3RjwkdmPYu@OF67
zI;ctE^Nt%6!)19gsNvxihiuPK=5Eg7A_pY3Z1FC5(+zT-Ha^=KEBuGs-V`o{OcC{$
z=Uc*M*thA&Ad1oL^QRFOaWX!u=t;iUzog;>9WwG?6o2FCdjs0=xvUJP;P1%*a8}EF
zC<vnMpKD>q-}pO@fxXqiLEs?q2@wFOqN4}A=5Ev99otvYGG?Xod14LZ2U*-@R5_jj
zObTOCbuOK4JX?+Bb6i&9mk_t}nkl{-<oB<8ct%l+m@sR|3{B_evFp2u%4=rl(L9z=
z(46e(_;`SPJd_U5IQi)_Rs#j@ArD$AOuVbSN$NJO$)D32AnIdu`q8W`Hjda6^JC+!
z<|B^8{?*+Ny|0M;qU65-J)i^919ovzT&}!a#hWH04J!#bzJhOFH%zJVWu!uGFC4I4
zOe>8HS0a%;#4;4pe1Hg)zY_!<cwE+P`=2BLCND(?)VUoj0l%(<d>Qa~D3!;R<jqI|
zGUfk&-AuL#j|xWWW&B+<ti8RBgt9X3d5fGQE(G2EG0g7R=eBoqcGl~Bqf=67Cu`j+
ztS8FaZ{87j36TFtn#^rEK)V7+tR2T^&H9xz`YrPGT$hqfek36;A>jigjxG>Q*L|b3
z;1-%7oAcVvOaVk`oaA+qO)26wWHDM`?RO2Yq(AkEb}9KCCh44#HZ0^l+4b$Fp^A#i
zdNYZB83ML85%AZ&JdHv<aI%bHt3ymbV}SmVot<6oxT5k04u{II7lTp^FrEjp>#bPG
zYbj21$EV0I8j9(>qdG>l?nmYO`;L><&V_KR@!d2BK8v9?gyYIDJ)rGg8f?{H)~(rO
zc>7-+nwlET`gl8g{h9sRU}kVOuBNo~`|fzbLD*g4=cuuK)~i|u*Iz28H}N62%or>_
zCLwQ^0TORHNLf|vMvZHl$k7}XgISJdebcxRvmXUQ*Atx_^;YhO>#udYWP7FgUN(5o
zN?r;7s2CpDzi|wCYIg^piEZE{YeMyjvx>oWLq%ExOr)&}*obYSrv2sq?};9}GSrz%
zO2{1(r+J8~FY)Qxk!8+8P0d4Xz!S%*9RK>rQ9joiT#co>D#&>S3y9N%qSg755*dS}
z%xBbcLn8yoeN{1?U{EH)PU}S!HkFMKhA7{`L|#OKfVbX-8Mj3GcC#}ROYTa(AA^7i
z9tEGHNvy!@6u9k=nHjIsji=#X9wHx86d!NzLK@Sxk$hrm>Mc`7+)bg8WC`@@UmsX>
zSQNaxyk?EBl&L6aUYH&*hR&WIK85VOV$Sq1G%|(8JR0fFFY>De<*)i_JKNifL1jIj
zCKHwiu!XvsnlUahYtb{&<0dxzI|6;u!BiU^&cC+}fJ&FRF;z8K<8OPoK0ZifIoA@z
z_vXT5P;~Vo<E#w->d}AJpdlv@AcxiE#d$f%-eCn+%^!#&qoZFb#PSH5$0ZR7jcVK0
znp8|X#hpX6F%dEG1SF`G=#*Q<<m=bZ0Pax_Q1++tjqM;WOqT-<<OLWvICSPtfCnDW
z(=27><{qpq%VW2j7|Bqeh!b%yPolNIqG+q7fa#(a6dVUK?PAOKn%xeTf`!NVG~8xA
zjy~_TcxV%bPPi<F7%gXNswn&h0ifa+j_oNm?Ix%AFG~P(7~GwJTk2Z&Whlf=y#^<Y
z6I0*KdaS4sQ^>+|WvZ&we6sD!J?lRt!PBUOGvwuJsP``1G!{As3|_u&wbS9n=~lIk
zw%csF=nvSaZb5F;C2eGvL~lm_+H9j=WN4`2M-q;5Fbn+~;Smug-Lbs5cakHM?>+fk
zsiC8z6KG>Sk+EsCibLY@2~lURZ*4i8^PGl*7`a6nAq)>JP8>9L#4_zsPKR7aTiXK#
z*5plNiv;BX`)v$#3(bDSz#6=;LSX@4l-?ySQs$o^4%A&;XfwmAV}+dyM9#LqGw2Q{
ziny-_G9(s3G%ADj$0i)S<x#*pSlf6&0P7c3O?Ep*O`3_wCshs+Z*Bo|aAFRoa%PRn
z9wj}C7x+mvL*^l$wE(p4QReX2SaOR!^HCGxC^@#L_b<`Nnhzqi&Sr-{&?`LpidC`t
z{EL*Xx)j?!=df-R=1S}OD|M&kZ^h+PXs$8Gkx5#+&bC$f>@)oUh5YoHi~PPdYS-2|
z#V?lHV6Vz@SgjnR5@j-=e*Av5K<+|ax}f9yBL9<)3^NA<o-Py1bH;%F8~Se2U7OR@
z(|DEF2BQ>l*!SgF23COB=TCvl?eW_#3f@wlwHDQpO4d9uIEbD(1c(gtTD04kxUmWf
zGLu7W3T&LKk&ATQl^OQAEHNbWE|ZUHEv0#;_Y-jhhhEPhPMViwkpb3i0I*hf0Ha8U
zAbB5#1ta@Bl6{oFiRkKXEADz5W~K{V0^?d*H0;G+>F6q0YY|gP=NIx+EFBg57+&>}
z6la9OEev!o2ImW_Et3pKL*lYJLs*APN)T(I^$}lko$BAP+|vkMZO?ur(Y01sznO?S
zM|9lIkhD)MSCbp3nHFX$3`wc$zPRjm=)c8){w*gfYp=?Bv^w0$!!kh^rSr=-Y@su%
z+QtS)8jAF$%+=tG=;C&MrW9V!h_kV8R<#T@)f`+mk&9$~eHzK&9k>twLX8|w<Mlvl
z`;@^yB5)hV;12Nh`d5D{p%r-`F!0yXCS1cKpGV8WqH<|~N8S;3>Z$_>t$GmfDR7+W
zH<#z^0V}{rfJesFWIagO5zDI}@%h?mFr_fxHuceKV7lC28PsJ7LVQt3d?+~3OfQBU
zs{=yB-}y#^qm3A}BrahosQd;Gkji?P*)8q2O;ncU9vz!myJ;Y#WTc-VA9IUzFj=#u
zCaq*u@WHAI2%q|f59$#ac$7jz3Iqi4NzSZSOK1_ay2RTK%YAoGms5iu>2=q6p01mT
zoocpOe|eF;sb_+D2S?8rJ$iO;C3>Lri+S}(M1=nK4(pY|{s2cUi_Uawrq%|f?AoDa
zjuDK7C4r|XNwY#Wcbg13ADrQ+F$TCUL}<v~Sic0y5J|}$z)Rs*C0-#(yg|jwOxQH#
zvDdv>#o{(L54cu&zjZkVyj5GE{jUsrTuq@K*x;@GJgu^n!cJv>-IK0l`s^9u>xaxK
zp!nEBP4DcEpx>=O$hRFgOY&SyY)r`<{oyhfl;MmiU_DuW;Iu%A+*^Wx0Pn)_b~WEo
zJ@;-P5!6=}7`a`1NTg0>m=W7;yLb50pISOC#Mt)=2692G(=x0(S!FpLt-mmFo^j0t
z-iT=cWpwIR4KvKzYc4NNH;-9n+ON<ks2FEBzbyj$8!q^)Cn`}g93^@Lm+nlKngwUW
z-d{x`QnC#i1gRs$FiPBr{ZG*VU_~7FwJWt2-MrFyfdr5gG63}(36K)xCkWiT1ArIg
zju>=OfXgF8Q&bFEx>-y4Pl@Obg9`lPkc!WL@wl;5j-%GtAD_BhI*7cgnClBO<MH26
z_)k2&1t12aAJ{V!lK3LV)Smla(lau&0ItgedBExCI}$ArCd+WIBu#>VXzwi=X}bRJ
z96))r=MSg{iMfD?-jMG8J>+dKPV=<EnIH_fdZ0`Vn9JzM2&m{*f<hR7rP#6uD>6%h
zf>wv&fyoI9K|ae7*2y~0YIiDmz)s{RCpYj}jm?6Mx%lVsXrKy`UYV%t#9$OqHHOK0
zH0_)O1BW4`u;u&m9#H=_;(nab=X0WxT}eL;h2DiskwEV>1O6)ZzZzUH$sfG*Uej{|
zb_ZLcD+kQm+ZF;^Ep_wr^KV(-QaNc>J6QuJ6u&Cr-+LbFK1AYxlRlC1_@n%sQB7L$
zgFlX!*#;k*>WaiGq?UL?q4<~)gpsYrOH6$BR=-Bt*6h4z(?tx4P)nnq^7iTD*9~zS
z|I0^s9}@s;$KBfuiWnWqn})!gk$9SS0402Q-xbXQ#ixVdx^Tb>K)WlCuWptc$%fJB
z=vBrCOGttYicc&XU{*`ll5&ywL7GK~%q!?%e1H^8d9^`lW;!aS5&X}|5%0p5dKl2&
z*;xvlG?Rd7F}&%Ab|uX0<GvLU)?AU(s<265dr{P2Q+uEe5kMj*%c)La(Q<)#ZrZ++
zZKVFq<$(Xyz(bH#<XspU-PI+3I+%1}92gjw;jibl-G~*Llw|8X_1Zt^j^F@vG+3CK
zbL@T!5M0?IjBK+k0ppdgQ+cf?hP-}%r`FQZiHFb|i2BB0hnE1<KE=hwwGQZ)^xk%}
zE895v8vq;8Q&T#Y{VDGNl<DLlHU-WPc5h|#A-H@t*q*g}|0ihX<b+&epk&chRQwE-
z_9r%X<N;BxTUGb_7cP(^64xw<1AVV8?Hn&9RlgR1inA&Qvp4{%dCdo!Hg*Bfj<_D*
z5=?Ciwv+?gqyN%>h!IG+e$ksKGR<kB94q#wZZZ=fc|P-j`xVc&1+Ua5fN6p%h|THA
z>GjL{%cIM@qN2X{_|!Il04oBvtWiu%$f@Haf1d*eUU)bl$5Hi~A17tTV^1LtAglAG
zHy4?d4_*2|k~IY;C->R#)x``Rvz|M^+4ON5ME8Q`WvDL5R?S3M12kH~q?+*p7!0j`
zetXB~erQz<?1<BRb;uz{+!3mNR)NXUc^Vc4Q7r{@^N_DfV-)Bjqe5IR+p_`s`C2Lv
zg#==JdFScbUT?+oT=gnQ0RfE6hR(+jdcuI<VCOa7@dki)*UKkuxFf1mGZi=C2H&rZ
z5-H|$058wLTZ~w1g;qwIdspiEKkYj*VPj(#VAB6CVF$}G8~m59`kJEMfH4}5PWTYq
z`t)$)aMllh0@Swowm<3s6z|Pb{wQy!ltMPlv*O*d#{(i%Ncv%a-NXnWa2wpN1Q&p9
z!3o{hiN+T@>udQ;xrPYI79PzGMYuj!*FrdEv+320ZPuOIIO7C0DzEjXN9kF_I?nF2
zQahVGuizJ{pclw~EUi0B*c1+Db9obqoCW{$YM!-dEoR5LLU!$$=&+ocJFo*c2+n{#
zTn2DWYmd+xtMds+qZl8)78rm3*t*QPtioRb>O!n?bBWRnrsbW;>2LM*uO<U;GqCdV
z^18s<AmGbSocZwdeFsfxrA}<JHz40qD`!+bnziS?8aRqD9Usi44MgMxXe}G%RI}p_
z1dsRUt@ph%vaZ71<=SHtgU@fx*i-A&r2a^1|AyYm=KrJcXGm0)t(UaVLWcUfb1GLl
zduLkyE*`+lfLGLsI6c=Us|r=qQ*3W<H!-DhB1koBSYDvR3oq<QYghraV(LnY*U4ZK
zf|GsbIEqbsv8B_+$bj$_lS_Z86=5{v3#B9ebU*{F0l%hYpp1;nPD#=Fy46vqx^8<7
z4MP!UlW#|A+>Gj7e*xB_9Iu@qhexle0GO9)hQ-|(;(ai6=Xvnzd(x@e2k{THI_=67
zYi$8NY9syGgnmc}c6Z!O%crvGePsC5ZrN!B+z$-P=<#u6V#C&GiN|+M>ZI_O3Ssq|
zZj?R66H$m88hN{ig`0?ZTa)?Kk*yycZ4qg1_RQn0Ic^;UBbtEs*gy*gK3s$pN~-)w
zf$kb2*j!V$S-n7K1&tl^UTlo~bZ_{O1@PeB<Uc6Mcso);kEx_pVjMVG@euWsur~*C
z^`n%IW>C?jX1?+$ULO6JS29M+pe9ZIcF@O|2L`?(dtKZ%<y;EzJQS0$A_E(K5jj(!
z{*@ax;|z+w30m3tkNg)W>WQ#SSLQEi4`XoG{Nwoi`<N=z12(Y>kALc=+dEkt(?8}P
zI(Z`)k5{W)Y@-#ZYzyRK5OJ9Ji=$&Pz$}LFcXFHVu9>@nhkTZA{XStALv$?U@&r-v
zv+w;b@g>CMHL+&l=H~mmDKISY2;AS~w^LDff<;fVD0uW2=$77I8SOnxkXNB#3Lwci
zsERD_Q;`JylXp<io^ycc-cL%1myyJ8tM}5WFsB})Cjj{yyfPr)k-{6Y<i>w~_uq)B
zKTCI~l3RIACw4mCYZ1yYdPM??U<L0p2X0EZ&GbYqb5*=CQkny=6##&sOVcc20TJdJ
z>DFKjL}FQa{dMcPe}PXxozO^Q_I<y5dEEPEVt1i)1MGkj;mykLkgy9Ff?|hW5&l~y
z_wldf8ycEf%a?DImA{;W$DAa(fJgKd<bopO2NWEHV#k19Ln-jr6`{gg{5}Lf0HJmW
z63V2=(UcL8J<1WV%R+-EsNMKp+vwVGi|6+{o>C!CuD7^2z@nv|r%t2Rtl&0D$k&QK
zV2GBJlPd+O_Wu?N$%8;YwckNbqAJAX4I=+%U{a{urx!&|^(bgW5GHe68ED32hD_)S
zOG{WduV))jArAo*Q+?P?eS-eQ0f}OGbSn~*keF4>xa9&?p%aRdgW{KB=PS?Hla;+4
z&JRXU8Oi;xqDBT>kWj*PLE2eg61%KQPfLrwc4GOy1gJm2^DwO_N@0o2JfNT^LEJ%*
z`#9V(YK?ECP+x5D<5hgFmI1Lb!orh_Jqc@wF9(2v!{mf;7RbzLT%GbW$TO(q2W?OC
zBPd~yN3v;Kou3?(yX+Y9C+n}(Mv{sA4!!#F|A7BTuWraEiF!`SCE@><Q)L70RS3Vt
zaT>i>54+N1pMdMXZyKt706ZTcG~ysW7ZMYyowv$CgIv<|w9lpJk^4jdZQy<@W5|#V
zabW;;E6f?P*Y2yV&D2(}NJRgO8XSNC4!A}Dfo|NF*KUx`f(i2P-!u9b^fb8+rh4et
zE-+C~;H_)$m(-tc*gAn#J&Gr_R_&B8)T?DqotnQQ((<Z-4R()PAu~^%v^IQ5Xb&X1
zYM=9u#B7Ey>s5bV5lg__I1{A$&Mz%Z0#cL>2znrl`M(4%kQw&s^^&I%VZhsoB&DG;
zfN?4p?E=~p5z~%?i<|GT)Wc`oM!?TP*6aUM_=-ltED1W|02spD=ed!(u;J%UGp<Wj
z1tt;7Pj`_~FeE@j%<9%!x|*8WJe6a%zdlgr+>fsY$?H<kz*0kBJ?#2%dEpGnf72x+
zD`cDy0kr{oH1gyY5@H6N6({NsiLQ7-2P>d%f`aD3+E{TaD0sW@Hb*5N@G43h{Tu10
zK_?mjo)YK^0LbuE{8>L(h8~mX8iSO1xEN=9tI37&s(K>@J>q_}2?z5Rb^T?HimrV-
z9YlY2c6F5j@!l3DHA5r-fp3v8Y3>w-c!7Qe=H%CcT9<&0spJ$w$GTYtP)~I`77unK
zsM@W7xoD)!T$O^`^wR;LQzOg(om!AL@gyH8)e82fQfWn3tLMLnvNjkhDk}wq-S%I#
zvD!O0=x!%_(#8NT)(8p&(~g4*hhVO>Ra8Q|6NE<-3_<Nvz%mIOoR(1W#w4H#Akt)p
zjV(?kz;=tKs*v)GTSRDVuIUp}4mTfc0ryNO+iAl{kY`s)30e$w0!&mOPCK$u>s9fL
zT@GvL!%!vC{7B(x`)i}UJ));pxgcI8ytz0oe{<>Oyvl1iG6opUd_dsXyysyn)U6&-
z5GXPqq^IDu2p7%(h%zIpWtS0{tUeYzK87lca;x!M(P<6U^j8fJfXxKnOIBlm#9^qN
zt<-O<fW}?w>x*`@EeG#=l_#I3x)O*6V$D`h?w+xUNmWdLjYAFvR3%NxHL8JnyGEhl
zW86_Zg|2^8S@7X7BsRF_x+2wKC_apTfsndPE)876ltPY0z=GaTceX1B)e@GJ%DMgs
zx96rR8pX{YNhYVAe{3kGj`vxNULan}u(4=qxYarxmaiBjG`3>cI>hW=saI0|9J}0=
z33#si^Wli>>eviB^}e)`#L^z2&IANh-P5(P_-nl@Q!E51(mi*&x}0fNWx(EUU<s6=
zFDxu9wpT+s&CSh0{oH83LBZ_T^~*jRGw{C{a&MP8{!3lq?uX#f|F1A)>_%lCA%KwP
z5xkLUH7g%j3K+Kv7ABr?hn(*Ozj0I*xCGZlU~J4YKCv)X5s~TB<;dZ5`86T{BcDEf
zYBvej52g~Cnn!11V)8L6DJ`Am(1y|N`NlW25a2Qg+qgY@cjs48L(WMve-C!EYseYy
zeWFood!^9^I|nt9913H*qi=S*$?V_zg%0Wfz^x(^jEqrQ8+vEFW{&ym7KN6Iedpk&
z#>h>tH}t_o3)*gI_4=K=cxIj+D!#l57l<{OK&yrRDwj@i$7KC~NmK3rk)}-RG}8IE
z0k6sAY<`cjDNnC<0+R|{12~W|Sq75yAEmgq6cGsd$M(C(G4BBb$7}8gT|m<n3>yOm
z#YuJNhM8>aw0s!)t3xi`xc}(Xi&sJ~(5c5Hy1Y@**C~GdmL7YjcEk$Tdd2!7Db43B
z_N#pU13i`8z?Npfhg#PI{!5o2wOD9I3gvHW*~>QyPiN0tJ)x^To+pl@vZ?lpi4Vs+
zW3Nyi0bG!d2g<sUAkKcZCP3MVY%FA9YqHUjd%tO=bbiqpNwlSv95!wD9dDCpwTb+c
z%cLW`A^QF7N&>G#Y$AFpyUEVZ4&Ajqd}`6D_ctjm0A}&oH2u13Mu{8_fO8Ct=3rFc
z7AP|XB8Ou}o5#$n--c^k9gYU9jBzkPtv}^L2oo6`>YTWM?vgm8sOlBW&Zh5k&O}EK
ztno@}YEH^-bzWftvP41eNinZOzzX<U#sS9zF*oclmHG2#)#|-Gq3jBk#Us_uwxhKy
zF2c~opMP+u_+zLrtO?@*u1-+cZ|TJz%c<h6rK9cuvFWvL_fYM>fQXa|4XyHfG?JiT
zre4yRr^Jah$muV65!>V3<uulLLx&T2@J-3Ucy>db{4o;AnoN%ie6{lvOA|=tWPk+F
zxJmPPK72yzqXO}^NRb#YwTK?i->#nZ#mxglJp>Ny2_P@!17oYx27FY@(9lrfZ~^&c
z;xvFJ(K7r@EoK9uf(<bF{0gNtz*6H5?1)fehA5smZZpNVALX2o=S67{LQoWZRz-eT
z_!AsnJGi62QfM*&NZdq?s+h9>XgyOiKBOXfmBIpiCrg0LvuA%CMF5iKWo5MipkM<?
z0%sFQC)19Kh#<-?3B^aA8=98@>45A6lt!md03O2Q<L^MLcIpA4m>J+mibk3saHk{y
z`#1U6k6aB7cgQ%kl9>cu0ek@tl>*xXi!Trpo(HZZ0h*q=_*>{-SDKp5rIY3kHeZ(m
zLURJR`gsWLv%msi?0~d$;LpGP4S5>8#icMk;7wWg0f2NUoK?|v=;mb)z}9PpY}Nnl
zA_8n^69&P?fe2XDo4?fhFV62N_FE7m0JXK)9Y?Zz20Tsn+@YAZ_XDs;UjB>92VcBF
z!Pf<j5xKxtX|L#7A`!ROnTzF*x>_J}#-b%e>3faS%SRK81z$0FiPPLdGr;1su<n;L
z2Y|F3$dK-U;DWqfHoCwOJVhD<cs0n`GM7j(x3T4P)e=K93)shXV{(cxF!|SC`gZnz
zmBa#YAq!+RMi<_zXU3ZYfH8T17FmJc30$*PWNrd(*gTMvfR`aGth^ZQ3elI91=U>m
zrNC*B*d5LJ9hl$Nt{qT|c})R8WcKEKO@AZap$AZ2k8!Ws@w~;&eTrI}FwFY0l<!r8
zD{j^Ru^i^=pLd8*WPq)O$qm-M45;LHU7W8_GAO7&pn4*q7VIVn*h~WUSH3r--}?ew
z@6`eu#gpXo4di2s;sfBeAE`-JF~_Qq^wmwxtPKEgsndqmDJW%D5{XjHn!*+9kGpMU
z3x9E6*#=4mP!S3iXeAMIus~OM5J1Sbq^qUIpE^bwzj}x?8t_8?nr+Obk!@F8vuJ2_
z881fGjR9lJ;Eiop^3OH{KSe;KDFg~A1?`&-w|?l4FWi4~rBZFc{=KT0VfGEOH&MB-
zbDp;F*BP*Bl@&pfMlz+Shf83u#}&YiaR!wTJVlq^@x>gME+NS(GL_3OTC>!2yzi@I
zK7g)14lK#cjEvVksKmT#+#|a|!43j|Yq`UcB6KM>h>W{sUtBRAa0(NE-&Z(YKIZ!a
zMKQPxP?7gSiZlcXXC)*gpJ%?qC7~NMK0rZXu800FfC+FmrqTJZ@Tu+yoHzPmZHyHg
zIh}4)V2w04H&-n{5<W0tuLFc#K3(lRsrpRB1YkkfB;k$!Ss*)r#bewF)P&b|UtVqX
z321dr_dO!Qdc33=*luPsG;M(W9RjYCcXpiNk!7HoDJdzDozE{8jNPmPhR6&qaAmxD
z1G*6ouxIr~`DC7Ag3w5|D#Ou4k%8YD@GXFA#OsG(9nv7^?)b@6@Bbh*ZyFK`WGxs1
z5s$6_9Dgq-paVUZrJ04HYnQ!J4s_U@tmuW}BXn~S^6#7+ZmenP@f>?=8T<N$g3@5r
zQ{KoWme-QF?aApYeHa_0+P@UJLNWk1Bvd+!!~la@^-BHeX0@&}Yd&-hq86yJn=nwH
zYm7&%8pN&YIjy8eY1!Bmh+O=hv*}U<-O^o?x04v6RekYdS?mAN83_<>*6=;xmjKw`
z6mYbgA67>TZ9!Gym`_D+X%A9QBB8k2NO~|SCv6BE5o)gD1MV}AS1l!4g4^QwR)fC2
zY?vZ5CECA_NUVil|9T7LtZRigtKz{82=b4riJp=sA(}b`1Jl1AZL}f=ag7N_wJr2!
zR-9Rl@L_kmSVZ*-Kipp}p|$uLoV|%)eJW=9q_jkm<THGMxUI9R;%q3i-o4Y)Zs#)q
za=7?+D&ke9KYte#JN04<Nm71Ul}&Uyou!l2S;&^_p8X#jcY1UCw1Uf?F1sckxaK>%
zrog5gZx62`X~0NI2Qh<PNx*SA#GS@;ySzh7512}_DdPBvrP)|<^mr&@AWdISb8v7l
z|4A@a0UbRsxhkdoi{)&YS%#dGcW>h6<>-6N#Vf^QwbzTQyrxO`f1x?U<Jm8U=u9mc
z|4Vdo4Q1Hp@11hH<}v;lxc&QFi+z1?o$!A|r)TW+vk7_KL@5<(7Qg@>1NJuO=s!bC
zjF&x3#VNf3NIFNq;{)o*0dt@ys8`tN4vvN8$N~uyPyRTsz>r0wpbS`Nt6oZRhe0wI
z(c^r2U_P=_<yiAc&^n|Vt1@oC#s5*$6)idk!QSKd4=h1J)5nF>)lYh>q8YC_q1zPh
zW9eG-<u=n609wEudIVd$uN@w&Fgu%r8!Crg+`VIfnV(YY#8HAgHHt#OSE<oM#G($!
zq5pf?zRDg~b`v?%{t2<4Om_wxG<Xgd>Mu|0b@|z0lLMt%Jk~qF7o+jhH)5%wdJ~b`
zWV4EP*no~7jd+`FWr4jLnxQu`M)^OpCAn~_zv<%qJO(1pwRH!&TmN@D@2A^7(DlOX
zOdt8|PvzD&6d`A1Jj9jiEy3+;e)4Pe=^x^>3__&Bj9E;U+AE&NNLUSAg<zN!4p8nN
z#+2)|soMUAJ1t4i&Bc|&=AA7n+jHfc&+h_Ku^uOjlOC$FJpl_>P(!YC`BDGu+r`Of
zeXJ?{m573Z_Jt6tHpw_SYPNkXefmpZg!9}4Sez+iydBWVb0h!uiG@QJBH$^s$A=H0
zT+I6HlH;fD&xbujEZOh?vO{Hojv6_4Wc`HDBDmp3b%XRygG(a#Zws71R#jEaFkh*x
z|C3##K`KS~OMwu!mF5c!RW0y=`*d^(WkE#$OeOdUxDKE)y!0iwLS+IuY^NR6hfY#_
z&R0##J&x@m$4E?iUJCE`D@J?*6(~<EHB15J@esOpJ>$M5(%IYV%+T+kRd+hQH3586
zl8NE}R(m1PDr63H#2{+18Q{Y=d-D0t>p3HrSH_QX{jOXJn015_e!@#YodEuT>vXr1
z!+Ic12GkJO)_^e!{;L0%<C58xdki!Lk=}(q=R$+u-r;WGzxnOACYwRC2>e-)LhZi%
z)!%BNBf@~_eZp0=ItYntgn2c`i*bjk)aPv?vnAkvRM_+&?<-_C1-{6Om7ZQF<Yf@2
zVTEu6#I^zV8E`Dbhbg)Nq&o>f7Ap(OTAFp<)%?xO3_w9PKv!`pf<x`K{yGqWI%GP6
ztg!+17xEQA&S>c30>H;?uXh0%5(m^uAkH_6Y?m}ii~fBG{;c62?iaGBR$rW~Z2)%%
z9Pk+0dU}bqhZC0UMS>udPkSCsi+*VNdS%TU+M$$W!vC@X1yl_{)8G2P+Pm&}D*v~i
zkwh{JB`Y%_A?su(N(mXsF(V_JLPkbKR<dPfQ^+n`*@|q1kd@6rR(P(vZ{J_%e4pR%
zc|HF;|2_Y4oO8R~_x-s(*Y#e87j^U?2EYuVHrt<yZHB+Xu?!HN;)6BQk+p`3MvQ-I
zG)IoS<&LB$RbRd|ieqfyLVB?j`X)dLPaw3crOPG=UT(w2pATw^&sL>FrohbdY|q`n
zJ^nkICE?dnoScmwd)vb|q4zgWFF=^U&d$y`NCYTE#1^Fd6%?j+{kVLAXfgDzrqKPT
zTN|$rI)p$|FhHyCW=N~&{DO=T)qj2t9-QhTklDqR5#GVJqJaGgVS2yIL?Vo7PtMIg
zp&SeZM&zg@N-nG-YR$#i{6O61@D~o<_3DNo?E82h;B%9VZpcib1#7M3mqo+8D?RiS
z&p!kslTbx;&=x(}CQ`s^piA?S92BzeNGCT3cv~?k-<t=I(U>dX?f!G0D38F|nV|w1
z&9d-zEbKb8>DZkFyD*?PJE^067V#SYX^>%6eS_8`0<t1r_>O0)rd)EHB)~cr0IA#v
zh=7O;W_n&))%j6cANsJpSnb(TpzFTYlQGz)fOR;?0zkCGbmx!5RPdp_9ic(XCv2}a
zRsA_V`04=@a?IVG?dN)WTX}n1{5GLDz=d>DCnCE*l0-xbFp<#Uv*14Qp;W{Y?>2xm
zz5~7LgybHi=d@JXypd=F8Uw*8z80F(7$D6XGFEqCAPi>cka;Z87LpV(=*pa7s`fX;
z8gKtwv0ADE(*sf{P{SO9Ee6=FceWz)9CJG8RqxK`lxnIj%O;uv<(__!2ykVJ=-wOm
z`9Qu6E7NBE>;1g@9zpnA`%lAq$p25BE$6i}LJ*rW3lcZ(#lNjRTjQ^=A2KhCBcLYf
z2yb!KxUFWX1RVL$ikWw7K1_eK-3X+S(_3hP$cd5X72znX%jeG_cq>R#nk#7tvmz8W
zoxsm?LePF(u`f2opY)iJ8AaTAoOzF8KQdVY=55c*Ji)ttL`zroE4sBZv5yRKNwEia
z$ejZ`_^5UiD0Go}n+LvYDjENhtbiEr=n-R@H)i@)FBc4WZCP-*C2486UL3;0J&~tx
zP&JJ>l15P0g*&yqdnXH;le-3mI_RR@RoD3uD|HHLH|3=gX$9PmcN4>`>^63M_)KN8
zfH_Bzx3{-+M-jMJr(@35Dk0C|l;(b>lp|YiV9-&oxmy+v{U(eTr~9g2U|LS|Md>_M
z+}(fn$t<rhf8IO#EK)<g<z-h5Hr1#js-*79|FY$rD6@UVTPm$*S~Zao`E%&zf=|G`
z)osBW&LeLombQf%FlX04wsXB6?0&LieLcO~B&JBC>cwxo(EcyHu%(q-OziE45AP2f
zwS3?vIcG-U>FVm5#HOQJDv+aPkZi!h!cuG1SHgJS_07Vqe}{L*?!O{ZnIU`FPTN3Z
z=iBiq-)|^5`DagN&xvJ97`_q9W(2HMC;7giC}Jxzi+3HK$!#4BWN1~+befSZSS!M}
z^C#owemh~l&SQB1Oht`PFudozhVx7|9~Dae^5A$5p(Wysi}{`CbG0Yt^@p6AfidsN
z83wT^kJ8#Wg5=WIAel5G&!fuB&+n{uWt`r$0VS2Xb;x+bZ`14?I0o!$n-N|W$@!`E
zGv&Am+yNHu2_w+ku6AG<V0yIyrPp2bM3D_Nmx__`xJa5C^3=sX+PFEq6$vf&TRttF
z;K<a^O+xjUo%P{GZ@LJLE*>6)EirA2oAzcP`@tk}_s)pa0xZ=+5LlIK9&<YR9OYtP
zq)Rn{y<tK;791HWs&Hk6<7bm7mjI1jk3RIh2+@p&s_!oR7A2aUr;YUh5Q;}U<G($&
z(ViPiqYE!${sK3@+Tn6MjtIi@T|r7vuy9bT0|q7g#p78ge0-uhU0jWgz>Iy!1X%V;
z{zUBFAZZK19+Bb$0(rf+mr=$If%c27!8ld0X8IREc{^JO3>82F8X%<S^LHDLoJRlX
zPJV$<WZ_cVbA?0uHbbO#`!)0QtY~#@y+B*kB=j@^ceA;k4tQ)}g6%MDFzaPoGcN%@
zHV;DJnDX0c-({j>d*1+`6mi2EgN0e{^E!5l;w}aCTsK$;`tVaU>CU6nYCjxcax*}5
za%<CFjaIY6)t*Z%IBHfzM`*DvF8+N4oaX)as#Z>j1R>I9gibsk#coD>6#KgTYA|(-
zyxTnhoxBM#P?kZP0Cply6&Sainf`(GR3l6&v@$mfO@k1;9kiYZ{a+BkU)3MvucWNJ
zdh=W`Hfw`Nc$F&i8bu*Qy&(eKJ1|tId+o-?E2EoXrg!_NXPy`!-#KQ}=4b3bAaN}^
zfm+aZM0&O_FR|yPRyz=!h<=|l0v=^+&KzSLw+Qn!Rb-#r&vOa7==28)dFpBOf~Ij6
zf&+i{R`|;6HFAsL-b$C|zxMl#g9x&6!{rWp`qaQR6!$YT6n^~<M%gJ#an#sbwFMY(
zl|R08$i<RldPRc~+kbi{WeMxa>IO@1bgb4C4o)oqVngb#o{OVcw<FU948g*AZEuaR
zws0dI@MopJ40(s8Fu1k?szeLDc!zqdUsG3vWD06AJ;b^J0FndnT_Ha81nbxMnZx-+
z=Sq@b={lr8f;BqJ#i{KG)~})HLJZ1icN)e&f45gGC#WP>X5x6To>k^_FqRpWZE>Nn
zS`}dkhe@C85!1q&#H5u0h_7>8Q+3Ar3;)A~%sk$eMy|Ti$awz)AfNa*e~SSN-#;cF
z_&40_e5u`-0@7n+DFT_PaiwV%gl(D3lfZd`0!5&F=f?m+jh&sHwM$!^SZ~^8+Hx2i
ztU%lNqg!3&GsN-@l_0=eIJf#MxyOe~Y)54g^U9FRRJ<2T8>h^DrxZ;o3!5LV9tM`+
zHsl$WAht26jyZtTA`(rQ3=0rXFu=pF{#NR#^91VXBgj_CZ)){huz!L@G8@({Wga;g
z2U!8oY!t$TIN(DrX$C+@G4#-7kx|eIN9){zE@A{-%Fe-2wqQ(h7Xh%e^AJ04;x9XI
z0uFNRci2nt)UWXcX{ZrFMC-?o#lY7NO8#7un;j}IwTwT=p%tKPX!yc1U$ym$Ev96D
zo-xiUNtPQ4BryUOmhxIqNJuHblLKIHn*$AF@o$Np&)$($=T_^{Vf~`{I)Ca&u#;4X
zkK60$#G0SJ>hgmuLdMkYEkJ;>Rz~RPU*?k7DB4L?{l#4C$1e4av;Rl-k_=EVpB0o!
z@s2iWjl2N~kji+FJ*G`l0i@o34w9o(R8)hAukK%hI=k6bc2L3W6liFj<!?H8=TQDN
z5JddXWav_|wO{QJ>HB7%vO^bVySFv(p(jnpwM}Jn)M=mPWE}Cke8)_wnOCJ;|AxfI
zP7F#j+-CaVPY>Q!k+`*GrGvdfo3punqYN+Ivs!KIPucAK_Q+WO<&nwe%y_nwnVoTn
zQeqY!H1KbmWd3(pDgN@`u+lvkL3u6J_N5`Y88<$(P}jU6*uYWyYn-xGD6Uh6V7dgC
zNqUe-ML^mUUdwC4_YB|R-dX)iI)@dVfvug>GH16vi?x&~xT<UD0mLNjCm=_Sl=+%J
z61b8#$9|;}W%Wg<FHL#qqxXRo%efB#cJp#_a(){6AQ6l+Y54JZ<t<`TUg}m|N||~e
z9#J76kXFj`@4+8i1&GIxRQLzd1NpJ)8l7=CW=vLAD7KUeXR$|BuWU$a%{pa{i?dNe
zDvv+$$r$YMTv`K)==BJpDV&e{K`4T}Z>Tc%UXhfI<R4s$UBUUdJiN&IP7z0=bWH<F
zs|NeWzmhwDAA^|{UZgZ+qsG3XnWvyyXFr=nVb=u;N_f%l%(H`7^_KX01Z)5rN)C{)
z_@_Gg`N50wbj^f+N;n>2HYDDrXQztckc0B_u+gvv;tE<c{{M3R<8n$5`HfSJ#XyQ@
z$7Fk=4Pq|=f%q51nF)}AfQJSR)1OQ2C8(a%P+E7()btAgcXuEK30fv0%dYgGj|u0u
zKfJQaCBc5PbW#Hlix2-wHOc`N<Qxo(0|h1lARtV{>uF`jdai6I4|Z=bE1;W@nxFX@
zC`WBT<7Rb^YB%F!KNa#p(m~`#h&t@<{If$Ap&hO`!Yuhj=^&<leE_R@xVX4f1-Ihj
z<E@z7mSp_bUPz{<rF{mn$O<G|FU}R_lI)k{myFUoas?u>jtN^_?>H^WCyTGD8pV6k
zQ9xMidEB>vz037@tQbM1^O_a--XVjR(L@e)tM)?OCdvc~Dx*jlOW@%yXOr5fC2twj
z9`m7dVuz63gZn_%>`WIFHVsgmf%^^8>FMd-3>BvJQ<hA<jgO=O2m{ilNPhiYKbKhA
zX<lh`<Wc{R?cK(AdT(Z`sYkuIZsc&niT?T8U5?1ITT<DA%OoleS75d+28CHa;2J{-
zARx(yWFf>~ebs^OIaWI)og@xPDBRZm^di=AR}v*5Ern_hir+aG%=k<uX&a87Z-OFo
zStc+Lu@OK|fbi$EP2ul@&{!)@Iw_XW!tLJKcC=u47CWx_sRQZyhSub!ao&%FL32|`
zVhcN^9idT@zqfNu9D6ZyA*+$ZHw32?4B;2U-3>@C_Y22$P;KZuh>XtT)y5`Sz33=L
z!~_JcDNS%EGj_UwHUaSz%r#2w+PNIg`Xq^jl*9<${sOIr_KPv6PY68->CL}rf6%PC
zLt1Syh>*2Js|Dw4z!XwGm2e*<Ij)*7HFIhvpyy~o^wPf^?FXbbyo#amf6W{B5WM&|
zA<Nbsf|}DOya*0_fr;dD9FM3}#FR+&=9Q$j6%1w$q><!b>v=;!XvX(u#5=4v(Vr)h
z4{d>9@GnoI6K6nfdlg~Uz5wBMeEIS&;7zYQ_jVB~{OpPzY+hEwRYMRwmR%!>WaJ_+
zzgN5a)@uHu+mwV?`&aK^bdg!;eNCWdh9L1msTas@n-!%+&`;R6_hu_emHrGqKRv+A
zp#^BeR<;!~hqUnI^+PLo#dE46by#rA9YOPlJ=eo;vn}XX6l}Wl@7ybP^cdZZ=W}<v
zvZ+kr@ThwgD3`%2^KhBw0XxsA_?*>txtDwr;ZY&n29cbDY+ztc#d9m{{OTt;2!a`#
zIjz$jza4s!F@IxY!!ODbbTuU&JFevbU=4j-2Q&?-Eg<cDN;L)JW1h0eEMzC=zk2nm
zrUcO%<dl9rwt*~MgbadeMAX~kyMM>7ayGYoFl~lNtM(n}8!W50dh$;5@$n@Sk{E%D
zlnOKD3J~ru!E{Rm&pb?Ar|rH%KsRtYvrw%}t=)&pIQLqHA!q<ey}b(xr8hMbpsy~4
zkeT<n08LZ5Ouq++-U{3~>BAzRUy(H5j;Zh-&cCfWkJ%P3n^E5@LL|@goKl-gP2STs
zS3$}kYaNglVX}kfbtjwHkw9;~iT$xTUTr3PW#rJ?uRu}tLuA68<096MB7!7T;f`G|
zj*r6lHvoX{P|zpd(!p=m1@`v#gCD0r{rd_WMhjAmWuNJV%%1M-u2+{XdhTt5f&DwC
z!&5#y!=u9)aVRC+Ul6-TFtKw{UqlkI`y&&3G0AjwxrNx$Gi&FyM7MZ3B@yqf5F1xl
zahbr!*W2zD->L+mSDV!)W@3T1Vg|uA`9!a`)*!$)iMV%|H`UMsSDBQ^wZx518D%Jt
z2t~PYUrwY1q+)V#L542&Y=hi&F4i(v?Bs5Zb06J8Ib-B~AQ_@PI9AW+GEag`u^4V}
zd(nJBE1yG-P>Ys~4{9y<z+5mG20nSGC2H+xsY#u*=ur!3f(TW^t@rDzT`J|8my6@}
za~7LsN2J3Jp^0h`c&+3V787F*vRFRio_2fN)`Zd&5AyG~2VSZd=iV7A>lx7fhW5(#
z&>}ogyjNXWxSszafMBU2Xiu8>p*)SBubHCI&4b4%*^V(q5Qh563UT=<aO$wR`rb+j
z&lF1Ttt44irHG)YFK@q5Jyhth_+jVE+QQqFpU=wgEewhYPD$Qw6RXY>EFXWsy*olD
zQ6Drgl_6I3!>ho%JlfLl>KWR#fbUW+m{bT@&;})cUjAgIYY#n>Ky36>FsyY^KI)Gg
zvtBOLJC7CbNmWk4TY3gcZC=8&oMsofl{~;8YHQG(_I$F3{lG_ey1NOvQL|re_th!O
z1avI}q!Ja*MZ+MjPTWG2C6`JHMW2^jdwB<@#IVPaT*RYaX!-S07rD1LSEkrWI{NbT
z!@Q49P3(Z3x~J4;I2+C<gErwi5GNTjL@Ij#4`ss~Gj-uv=Uo`P9=d~gM!8QH3dTE0
zk;#Jw&PInC0+fVli5w~xxiX4a7GKxXy>(eJy+rnn!D%#sxE(dD8vGrNK4TARgM>pd
zTlbb@&NV2qUiu_#NR_&{ytTV?e?|(_UWyG2gE4{p`c=B|FtY+>r}4z2*6$#N4@izB
zdO(D%-tDtf#O}TV>#HY%N9&p3zLQ59_gU5D7hOc3vmT88Vf<>`d(=l&ZjVje5k}4M
ztD#Kq&$SRdI&GfN9p(|#(W3(NaBOZ*q(yI@?({Z;@nxIZuUisTKhADeua6YTZ0;?O
zT~yJaOSGj5l346fQQSH<6}b8(-7W^=*H)&uZyK7KrmHT>tjnsfdV5p*Ei+YS^S%G@
zGMpZ6L1MLKVi0l*QWTR1p;&NSIJflbndYNL8iYkDh7qf%5{Pe_wIm-3FEKE~ooe(5
zk5Tm<<9;j~xE?dRa<zrz#2z5WIWB8Vl5UxbCgNa=#XJhMpXXz^T>cGBUMo=_o1wdu
zP<WVNl(EJ~<vFwbTeGRMq<*Rs#98;3jQ7qg(ltT&KHcP}EQv?E@4uu`1d6GxQY3Q&
z@~lkFl<4m`(wq_0-!7qdo}=gt^Jc>08Q-T}87iD|Gz5vpN@;ZLl@u2q2%q61>L#0b
z;Dl0bbPSy%r#=(Lzka~juRyUz;BIJr(H*g>+^WbrN*{rxxzB~YE+)|~<eYGn#G@W;
z++8e%g@sCcwKr(EORkKaH34hW^JHNpO`}|OQOpH%>rzx>v)nO$)hIg?v8idh*=w?5
zLD5t?=F%sYzkYM7?|PC{@tQx7uHp>~mz?8anxjV#8aw+2#@e(bNoPi^3bX}8vE2en
zEQjdOB}S8FzP^=>F$T0J=K<%Zow4`p1e7r)3sK^P>O}JuIsL(2ZZwm0Ep$0_m(etx
zxvZYgB`>gr2@9ay@W`2__1`}I`uM3u!@bmNlavB2<CIFQr^A{6K7GbQGX)xqYiA9j
zeYcB6=9>bXEK)-XOr>KuVKKYk^B$X>xuf2|t@a6!kpb;m!^!guuBr8plPpIF<+Y5+
zSjPAdrz)mc9gE_wc3GJey<)E{Jbga!ZQy{eG3;}sCJmppb6s5HETgU~oJ>#col)<D
zr=HD*fScz<QNbdld^JmF($-3Njo>NZnaJ2XPYB#emTP>Qj3SUl6IVauX;JU^Zo5hS
z^2^b4VXSgZNB9+W^E|Aj@)+;}Rfv`-N*u;Ge~`O!?nM=4ZdIPm929bAa(}!Y^Y%JH
zZ;=7p>)!o&x^&KSC&|2t4|Fs_bVoW3sx#bAn^pOP+u>0qae1M}_(T3QlqLZOqs2S-
z1m4)6BpM?PVOhI)rsNHuQ**?_Rg(jIq78RncW`br2j@}OJm<O8P3Pm2xttl?^Rp$;
z9Hk*h+i=~HsnZQSEwQ~J$r8mut>Nu!G3P2DKTfD~Yl&^reje9n*gro}7V@Z4FRPJv
zGCX{XR9w#n<(o>L&w*$1unz(})NZkP7FnF24)AixXJ#<0+)uur_(jT|#5(gn-^P+j
z!_P$y3*_+;3@$XR6-~~Q?-idI&n(LOE6RKm_;l=ylep)U;3a{q%Ur!&MS}!IC%wP5
zN}~c_@A^Od+JeGkeNIQB><62lBDYBglXE}5Sm!I2lNR)<^cc(-U8kV`H4Oa}{<Qum
zs^(g1jsj&I)wuh`?x4HrmDi}g=M54NuT7ST3R866p@T$H%vfjCiJxP11GNf?Bb*Xd
zSNAQdsH%-L%bIl=HdK-{kQp=YeZf2NI8%Axjc)bTu&+L0Pcj@aPmilLe{#^iiFz`=
zVl&__)FPI#qkU3ff9aW)!vS6@@#4kfT1iW1h?7!<=t&qH0DPE%LYP$;+WRh+R9vJ0
zdcE*tKDT2W>SAMm%AO{I{{Z2Ei5$sd-b>hT>#Q2<+btMg;hNo&b~);l+Nbaf`0{Ts
zTn9R+jxMR3DmqTC=eI(QAHo@ypLzU(TlC(Zm*MjasVh2p=3F5%59}J>Ijgm5Uk~ZP
z&w!>PEwL$<R!u5Kc~qG`nFUop35{^pA*%<*Mo^!#4iUA1GOnx3<y*6dk8|kFHUcT<
zqywQWZAyt3qbp);#c25tX?2clFp()YpeAxXbiZ`uO9kh54U7ov*7G~Mkx{)Ii!Y9Z
zT}3CqWh7NbtG2doFT?y;)a((n&iiz&F_&*F`n}eS5QuaN+eGO}>F<gqdJarZS19+D
z?!~Mue4L_nikCm&DYd7MZ^<<As1GusI#~^l=Cg$2cSWjUR;Jp=StjW?+)#~Nw_9d7
zDfD(x*Q>TH(VAo@NxWIYNXd1R5-IBI%#!vlJfU@eBJ_GAF6#L0=PO-N16u-9X}N>c
zbf^{#g>4|3F_=A}ez~|p)AD%KivEho8slP0oZDhaXtW+j{AW3u$F$RCsev!*eDMef
z!!u=`T$i^NWwh}jI>gpO5fl|+lTo%zrS*aA;m^@yZi(wzq8`ugwdq$YRIjM^rEmR^
z`0DO+P_*H&sZh>E(W=P40;@6mT}zCBYuZ14Pp~^G%}1DWt#SP>k+0Nse5$84B*^LE
zWhSU0-!S1H6ZlF(_4END8#CTPMQM0VT9wdE{D$gB6BG8oU;6daAiBlh@A&=ZBrf>y
z1z`|OV}1Gop^#C<fqxwg`H5FDu~{8WkFKUB9R1H*Klv>)Vtor=K4DFwRKM<U<Hlbn
z^7mU$Hrz+f>+f&zskojzP*DE=6QugzUcnJ56RT%zMGh9~$bT7Ax^PuKSJuG$zX0J@
BUxWYv

literal 0
HcmV?d00001

diff --git a/readme.rst b/readme.rst
index abecc8b..0371c7c 100644
--- a/readme.rst
+++ b/readme.rst
@@ -21,7 +21,10 @@ To try it out, run::
 It uses a virtual DOM like React, but is much smaller than the existing
 frameworks plus of course it's written in Nim for Nim. No external
 dependencies! And thanks to Nim's whole program optimization only what
-is used ends up in the generated JavaScript code.
+is used ends up in the generated JavaScript code. But don't take my
+word for it, look at this benchmark result:
+
+.. image:: docs/benchmark.png
 
 
 Goals

From b1e60fbd21f5480b7e7bcfe1a915e214836a2b95 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 22 Apr 2017 10:56:14 +0200
Subject: [PATCH 031/264] readme.rst: changed the wording slightly

---
 readme.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index 0371c7c..4aafac8 100644
--- a/readme.rst
+++ b/readme.rst
@@ -22,7 +22,7 @@ It uses a virtual DOM like React, but is much smaller than the existing
 frameworks plus of course it's written in Nim for Nim. No external
 dependencies! And thanks to Nim's whole program optimization only what
 is used ends up in the generated JavaScript code. But don't take my
-word for it, look at this benchmark result:
+word for it, look at this:
 
 .. image:: docs/benchmark.png
 

From 30491d401a711bbe253c84890cdf35e6f4df8723 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 24 Apr 2017 16:27:20 +0200
Subject: [PATCH 032/264] update karax.nimble file

---
 karax.nimble | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index be4879f..103da81 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,9 +1,10 @@
 # Package
 
 version       = "0.1.0"
-author        = "Araq"
+author        = "Xored Software, Inc."
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"
+srcDir        = "src"
 
 # Dependencies
 

From cf9b22ae62f8c99f2922a3aa4841398b37189eae Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 24 Apr 2017 17:45:40 +0200
Subject: [PATCH 033/264] bugfix: make ajax module work

---
 src/ajax.nim  | 40 +++++++++++++++++++++++-----------------
 src/karax.nim |  1 +
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/ajax.nim b/src/ajax.nim
index d002380..9a345e6 100644
--- a/src/ajax.nim
+++ b/src/ajax.nim
@@ -12,24 +12,30 @@ proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
     cont(httpStatus, response)
     redraw()
 
-  proc setRequestHeader(a, b: cstring) {.importc: "ajax.setRequestHeader".}
-  {.emit: """
-  var ajax = new XMLHttpRequest();
-  ajax.open(`meth`,`url`,true);""".}
+  type
+    HttpRequest {.importc.} = ref object
+    ThisObj {.importc.} = ref object
+      readyState, status: int
+      responseText, statusText: cstring
+
+  proc setRequestHeader(r: HttpRequest; a, b: cstring) {.importcpp: "#.setRequestHeader(@)".}
+  proc statechange(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
+  proc send(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
+  proc open(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
+  proc newRequest(): HttpRequest {.importcpp: "new XMLHttpRequest(@)",}
+
+  var this {.importc: "this".}: ThisObj
+  let ajax = newRequest()
+  ajax.open(meth, url, true)
   for a, b in items(headers):
-    setRequestHeader(a, b)
-  {.emit: """
-  ajax.onreadystatechange = function(){
-    if(this.readyState == 4){
-      if(this.status == 200){
-        `contWrapper`(this.status, this.responseText);
-      } else {
-        `contWrapper`(this.status, this.statusText);
-      }
-    }
-  }
-  ajax.send(`data`);
-  """.}
+    ajax.setRequestHeader(a, b)
+  ajax.statechange proc() =
+    if this.readyState == 4:
+      if this.status == 200:
+        contWrapper(this.status, this.responseText)
+      else:
+        contWrapper(this.status, this.statusText)
+  ajax.send(data)
 
 proc ajaxPut*(url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
diff --git a/src/karax.nim b/src/karax.nim
index 7d7267c..892f6d2 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -223,6 +223,7 @@ when false:
   var drawTimeout: Timeout
 
 proc dodraw() =
+  if dorender.isNil: return
   let newtree = dorender()
   newtree.id = "ROOT"
   toFocus = nil

From 23f00055a97a4a4fd3e381eb556bd2f4ce3bda28 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 24 Apr 2017 17:46:37 +0200
Subject: [PATCH 034/264] renamed ajax.nim to kajax.nim

---
 experiments/ajaxtest.html   | 13 +++++++++++++
 experiments/ajaxtest.nim    |  6 ++++++
 src/{ajax.nim => kajax.nim} |  0
 3 files changed, 19 insertions(+)
 create mode 100644 experiments/ajaxtest.html
 create mode 100644 experiments/ajaxtest.nim
 rename src/{ajax.nim => kajax.nim} (100%)

diff --git a/experiments/ajaxtest.html b/experiments/ajaxtest.html
new file mode 100644
index 0000000..39062ad
--- /dev/null
+++ b/experiments/ajaxtest.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Karax AJAX Test</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/ajaxtest.js"></script>
+</html>
diff --git a/experiments/ajaxtest.nim b/experiments/ajaxtest.nim
new file mode 100644
index 0000000..7af60cd
--- /dev/null
+++ b/experiments/ajaxtest.nim
@@ -0,0 +1,6 @@
+import dom, kajax
+
+proc cb(httpStatus: int, response: cstring) =
+  echo "Worked!"
+
+ajaxGet("https://httpbin.org/get", @[], cb)
diff --git a/src/ajax.nim b/src/kajax.nim
similarity index 100%
rename from src/ajax.nim
rename to src/kajax.nim

From 8666d8d6d6e67e5e82ed61d1e84c95ab17e29cc5 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 24 Apr 2017 17:52:29 +0200
Subject: [PATCH 035/264] kajax: PUT should have been POST

---
 src/kajax.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/kajax.nim b/src/kajax.nim
index 9a345e6..be230f0 100644
--- a/src/kajax.nim
+++ b/src/kajax.nim
@@ -37,10 +37,10 @@ proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
         contWrapper(this.status, this.statusText)
   ajax.send(data)
 
-proc ajaxPut*(url: cstring; headers: openarray[(cstring, cstring)];
+proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int, response: cstring)) =
-  ajax("PUT", url, headers, data, cont)
+  ajax("POST", url, headers, data, cont)
 
 proc ajaxGet*(url: cstring; headers: openarray[(cstring, cstring)];
           cont: proc (httpStatus: int, response: cstring)) =

From 2d1e6560616d0d23ac9e8addcb396d6b4b3c2614 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 26 Apr 2017 14:46:01 +0200
Subject: [PATCH 036/264] better setupErrorHandler

---
 src/karax.nim | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 892f6d2..ed956d8 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -284,23 +284,17 @@ proc setOnHashChange*(action: proc (hashPart: cstring)) =
 
 {.push stackTrace:off.}
 
-proc setupErrorHandler*(useAlert=false) =
+proc setupErrorHandler*() =
   ## Installs an error handler that transforms native JS unhandled
   ## exceptions into Nim based stack traces. If `useAlert` is false,
   ## the error message is put into the console, otherwise `alert`
   ## is called.
   proc stackTraceAsCstring(): cstring = cstring(getStackTrace())
-  {.emit: """
-  window.onerror = function(msg, url, line, col, error) {
-    var x = "Error: " + msg + "\n" + `stackTraceAsCstring`()
-    if (`useAlert`)
-      alert(x);
-    else
-      console.log(x);
-    var suppressErrorAlert = true;
-    return suppressErrorAlert;
-  };""".}
-
+  var onerror {.importc: "window.onerror".} =
+    proc (msg, url: cstring, line, col: int, error: cstring): bool =
+      var x = cstring"Error: " & msg & "\n" & stackTraceAsCstring()
+      kout(x)
+      return true # suppressErrorAlert
 {.pop.}
 
 proc prepend(parent, kid: Element) =

From 21c911ffd363cb01604902064dd265dabc9b821f Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 26 Apr 2017 14:51:09 +0200
Subject: [PATCH 037/264] added karaxdsl.flatHtml macro

---
 src/karaxdsl.nim | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index ade1c24..5ba525a 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -117,3 +117,8 @@ macro buildHtml*(children: untyped): VNode =
   result = tcall2(body(children), nil)
   when defined(debugKaraxDsl):
     echo repr result
+
+macro flatHtml*(tag: untyped): VNode =
+  result = tcall2(tag, nil)
+  when defined(debugKaraxDsl):
+    echo repr result

From 63c7cbc43bd35bea406478f0f38f63a16c6df59b Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 13 May 2017 12:57:53 +0200
Subject: [PATCH 038/264] test_diagram.xml

---
 experiments/Untitled Diagram.xml | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 experiments/Untitled Diagram.xml

diff --git a/experiments/Untitled Diagram.xml b/experiments/Untitled Diagram.xml
new file mode 100644
index 0000000..fd1e674
--- /dev/null
+++ b/experiments/Untitled Diagram.xml	
@@ -0,0 +1 @@
+<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram>UzV2zq1wL0osyPDNT0nNUTV2VTV2LsrPL4GwciucU3NyVI0MMlNUjV1UjYwMgFjVyA2HrCFY1qAgsSg1rwSLBiADYTaQg2Y1AA==</diagram></mxfile>
\ No newline at end of file

From 521ef9baecb61d1dce3b54f0e3d2d37bf664624d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 13 May 2017 13:01:50 +0200
Subject: [PATCH 039/264] Update Untitled Diagram.xml

---
 experiments/Untitled Diagram.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/experiments/Untitled Diagram.xml b/experiments/Untitled Diagram.xml
index fd1e674..6f1b80e 100644
--- a/experiments/Untitled Diagram.xml	
+++ b/experiments/Untitled Diagram.xml	
@@ -1 +1 @@
-<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram>UzV2zq1wL0osyPDNT0nNUTV2VTV2LsrPL4GwciucU3NyVI0MMlNUjV1UjYwMgFjVyA2HrCFY1qAgsSg1rwSLBiADYTaQg2Y1AA==</diagram></mxfile>
\ No newline at end of file
+<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram name="Page-1">1VZNj5swEP01HLsCO4Hk2jRtD61UKYd2j16YgLuGQY4JpL++Bg8Bl+6qatVIySHyvBnPx3vWJAHfld0HLeriM2agAhZmXcDfBYwl68h+98DFAavtxgG5lpmDogk4yB9AYEhoIzM4eYEGURlZ+2CKVQWp8TChNbZ+2BGVX7UWOSyAQyrUEv0qM1M4dMPiCf8IMi/GylG8dZ4nkT7nGpuK6gWMH4ePc5dizEWDngqRYTuD+D7gO41o3KnsdqB6akfa3L33L3ivfWuozJ9cSKgNcxlHh8wyQSZqU2COlVD7CX07jAd9gtBahSmVPUb2CJ0033r4ga3JfBxdldEX51uP5iNl+A7GXOgNiMaghabCnxBrynGUSu1QoR4atbxCnKYWPxmNzzDzZMn2Kewzu+H6iV6kh6ATNjqlKEYPTugcKIpfpbEvHrAE274N0aCEkWc/u6C3l1/jJv7tgST4vRyb/yNH8oocK+YJ8iZ8CKNkRL6AlnYI0Pcj1epGUlHps1DNL8trpl5bSAOHWgz9tnZV+gr9LU1n0Aa614laUjBe4NQn7eYtme206KJxPRWzJReH/04aX5DG74Kz2Kfsur5vwdlq+dDYXZDG1rdjzZrTj+bgm/0x4fuf</diagram></mxfile>
\ No newline at end of file

From b44f699dd017d36c7bf2b24317e1611c9e2f6e6e Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 13 May 2017 13:09:27 +0200
Subject: [PATCH 040/264] Update Untitled Diagram.xml

---
 experiments/Untitled Diagram.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/experiments/Untitled Diagram.xml b/experiments/Untitled Diagram.xml
index 6f1b80e..ad93172 100644
--- a/experiments/Untitled Diagram.xml	
+++ b/experiments/Untitled Diagram.xml	
@@ -1 +1 @@
-<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram name="Page-1">1VZNj5swEP01HLsCO4Hk2jRtD61UKYd2j16YgLuGQY4JpL++Bg8Bl+6qatVIySHyvBnPx3vWJAHfld0HLeriM2agAhZmXcDfBYwl68h+98DFAavtxgG5lpmDogk4yB9AYEhoIzM4eYEGURlZ+2CKVQWp8TChNbZ+2BGVX7UWOSyAQyrUEv0qM1M4dMPiCf8IMi/GylG8dZ4nkT7nGpuK6gWMH4ePc5dizEWDngqRYTuD+D7gO41o3KnsdqB6akfa3L33L3ivfWuozJ9cSKgNcxlHh8wyQSZqU2COlVD7CX07jAd9gtBahSmVPUb2CJ0033r4ga3JfBxdldEX51uP5iNl+A7GXOgNiMaghabCnxBrynGUSu1QoR4atbxCnKYWPxmNzzDzZMn2Kewzu+H6iV6kh6ATNjqlKEYPTugcKIpfpbEvHrAE274N0aCEkWc/u6C3l1/jJv7tgST4vRyb/yNH8oocK+YJ8iZ8CKNkRL6AlnYI0Pcj1epGUlHps1DNL8trpl5bSAOHWgz9tnZV+gr9LU1n0Aa614laUjBe4NQn7eYtme206KJxPRWzJReH/04aX5DG74Kz2Kfsur5vwdlq+dDYXZDG1rdjzZrTj+bgm/0x4fuf</diagram></mxfile>
\ No newline at end of file
+<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram name="Page-1">1VdNc5swEP01HJtBEgZzresmh3amMz40OSqwBjUy65Hlr/76ChAGFdvjOLE95sBIb1cf+/ZpER4bzTaPis/zn5iC9Kifbjz2zaM0GhDzLoFtDQTxsAYyJdIaIi0wEX/Bgr5FlyKFheOoEaUWcxdMsCgg0Q7GlcK16zZF6a465xn0gEnCZR/9LVKd1+iQhi3+BCLLm5VJGNeWV568ZQqXhV3Po2xaPbV5xpu5bKCLnKe47kBs7LGRQtR1a7YZgSypbWirx30/YN3tW0GhTxkQ2W3obRM6pIYJ20Wlc8yw4HLcol+r8KCcwDe9XM+kaRLThI3QzyX8QAe2+9KYCq22tW3QdF/sDH9A663VAF9qNFC78A/EuZ1jKqQcoURVbdTwCmGSGHyhFb5Bx5JG8atfzlwHV0Z0kB4LLXCpEutFreC4ysB6sV1qjOIBZ2C2b1wUSK7Fyp2dW+1lO7+Wf9OwKdifjuFl0hEdSUdAnYR88R98EjXIL1DCBAHqflIVXClVdukVl8v/ilcne+tcaJjMebXftSmVbobOpWkFSsPmOFF9CpoBzO7T1ubYdtdtoSNNeco7RS70P07aHoq6Ai+wOEnRpCPnTkF5tiPa6lLZThXteRJkt5Mg60vQo2aUz+5CiKGrw9038SpCJD2KzhGi7wiROkokrhLp5aUY3O7DFeythqUWCb0LMdLBLdUY9ej7kDwvK7O4LzMSXkln5PgN6eRze/SGGgfUPbs+Y+9gde/N6dOovtaJjg+e6ODd95xPOJ+Bf8NbS3i0ut2Ok+H1apbptn+lla3z58/G/wA=</diagram></mxfile>
\ No newline at end of file

From 1f0c5d98dd38a5eabc06e81a904cff887805d890 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 13 May 2017 13:16:19 +0200
Subject: [PATCH 041/264] Update Untitled Diagram.xml

---
 experiments/Untitled Diagram.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/experiments/Untitled Diagram.xml b/experiments/Untitled Diagram.xml
index ad93172..a3019f8 100644
--- a/experiments/Untitled Diagram.xml	
+++ b/experiments/Untitled Diagram.xml	
@@ -1 +1 @@
-<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram name="Page-1">1VdNc5swEP01HJtBEgZzresmh3amMz40OSqwBjUy65Hlr/76ChAGFdvjOLE95sBIb1cf+/ZpER4bzTaPis/zn5iC9Kifbjz2zaM0GhDzLoFtDQTxsAYyJdIaIi0wEX/Bgr5FlyKFheOoEaUWcxdMsCgg0Q7GlcK16zZF6a465xn0gEnCZR/9LVKd1+iQhi3+BCLLm5VJGNeWV568ZQqXhV3Po2xaPbV5xpu5bKCLnKe47kBs7LGRQtR1a7YZgSypbWirx30/YN3tW0GhTxkQ2W3obRM6pIYJ20Wlc8yw4HLcol+r8KCcwDe9XM+kaRLThI3QzyX8QAe2+9KYCq22tW3QdF/sDH9A663VAF9qNFC78A/EuZ1jKqQcoURVbdTwCmGSGHyhFb5Bx5JG8atfzlwHV0Z0kB4LLXCpEutFreC4ysB6sV1qjOIBZ2C2b1wUSK7Fyp2dW+1lO7+Wf9OwKdifjuFl0hEdSUdAnYR88R98EjXIL1DCBAHqflIVXClVdukVl8v/ilcne+tcaJjMebXftSmVbobOpWkFSsPmOFF9CpoBzO7T1ubYdtdtoSNNeco7RS70P07aHoq6Ai+wOEnRpCPnTkF5tiPa6lLZThXteRJkt5Mg60vQo2aUz+5CiKGrw9038SpCJD2KzhGi7wiROkokrhLp5aUY3O7DFeythqUWCb0LMdLBLdUY9ej7kDwvK7O4LzMSXkln5PgN6eRze/SGGgfUPbs+Y+9gde/N6dOovtaJjg+e6ODd95xPOJ+Bf8NbS3i0ut2Ok+H1apbptn+lla3z58/G/wA=</diagram></mxfile>
\ No newline at end of file
+<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram name="Page-1">5VhNc9owEP01PjYjS8bGx4bQ9tDOZIZDk6OwN7YaYTFCfPXXV7ZkbGHDEEJgMuXASE+rlfR230rgkdFs813Sef5LpMA9jNKNRx48jKOBr79LYGuAIB4aIJMsNZDfABP2FyyILLpkKSwcQyUEV2zugokoCkiUg1Epxdo1exHcXXVOM+gAk4TyLvqbpSo36BCHDf4DWJbXK/thbEamNHnNpFgWdj0Pk5fqY4ZntPZlD7rIaSrWLYiMPTKSQijTmm1GwEtqa9rMvG8HRnf7llCoUyZEdhtqWx8dUs2E7QqpcpGJgvJxg95Xx4PSAdK9XM24bvq6CRumnkr4Dg9s97keKpTcmrFB3X22Hv6AUlubA3SphIaahX8KMbc+XhjnI8GFrDaqeYUwSTS+UFK8QmskjeIpKj2bw5UnOkiPhRZiKRNrhW3CUZmBtSK70OiMBzEDvX1tIoFTxVaud2pzL9vZNfzrhg1BfziGHxOO6Eg4AuwE5Au6Q35UI48gmT4EyM8TquBKobJLryhf7hWvVvTWOVMwmdNqv2tdKt0InUvTCqSCzXGiuhTUE4jdp63Nse2um0Ln1+UpbxW5EL2ftJqiFmseDrle4T5lK93MVHVIA03lPqL999j9D1Nny4XSxBX6Yug6mcLJ6+kLR+picfmTHalbhShOKlR1+9m9J57sjObSqMbOrUXDBPpFdj9EEYrOrkXk8rWomvpVSrptGcwFK9Si5fmxBFr6jl1948HeE2DPfifKfnvdMDtoBL47ykmaJ91C6WE9C5FPUS7DPXbwNcul36HoHF0hR1fYEZbvCgu/RVnn6SS43fMq6L2zy1z08adIRkJumY1Rz+X9jvT82DSLu2nmh1fKM//4O/5k3R79HRUH2NUuIuQNrPa+7y9G9bUUHR9UdPDm1/gF9BmgG76tw6PV7XacDK9Xs3S3+e/EvFWa/6fI+B8=</diagram></mxfile>
\ No newline at end of file

From 28f3e61b2e7680646ca81858196139140e8fe8bb Mon Sep 17 00:00:00 2001
From: Andre Smit <freevryheid@gmail.com>
Date: Mon, 15 May 2017 09:46:38 -0500
Subject: [PATCH 042/264] Add oncontextmenu event

---
 src/vdom.nim | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vdom.nim b/src/vdom.nim
index 25f6c12..1dc389e 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -41,6 +41,7 @@ type
 type
   EventKind* {.pure.} = enum ## The events supported by the virtual DOM.
     onclick, ## An element is clicked.
+    oncontextmenu, ## An element is right-clicked.
     ondblclick, ## An element is double clicked.
     onkeyup, ## A key was released.
     onkeydown, ## A key is pressed.

From 9160776999e5b93d81b5c788694a2ee626efe99b Mon Sep 17 00:00:00 2001
From: Alexander Ivanov <alehander42@gmail.com>
Date: Thu, 18 May 2017 10:00:39 +0300
Subject: [PATCH 043/264] Resolve a quote bug

---
 src/components.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components.nim b/src/components.nim
index c3cda9c..7fcc707 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -79,8 +79,8 @@ proc stateDecl(n: NimNode; names: TableRef[string, bool]; decl: NimNode) =
       for i in 0 .. c.len-3:
         let v = $c[i]
         let sv = toState v
-        decl.add quote do:
-          var `sv` = newStateDict[`usedType`]()
+        decl.add(quote do:
+          var `sv` = newStateDict[`usedType`]())
         if val.kind != nnkEmpty:
           decl.add newTree(nnkAsgn, newDotExpr(sv, newIdentNode"defaultValue"),
                            val)

From 084a1988c809d1aec7d2d587a011bb8d22e389ae Mon Sep 17 00:00:00 2001
From: Alexander Ivanov <alehander42@gmail.com>
Date: Thu, 18 May 2017 10:01:02 +0300
Subject: [PATCH 044/264] Resolve a macro bug

---
 src/karaxdsl.nim | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index 5ba525a..faa43c3 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -101,20 +101,22 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
     result = n
 
 macro buildHtml*(tag, children: untyped): VNode =
-  expectKind children, nnkDo
+  let kids = newProc(procType=nnkDo, body=children)
+  expectKind kids, nnkDo
   var call: NimNode
   if tag.kind in nnkCallKinds:
     call = tag
   else:
     call = newCall(tag)
-  call.add body(children)
+  call.add body(kids)
   result = tcall2(call, nil)
   when defined(debugKaraxDsl):
     echo repr result
 
 macro buildHtml*(children: untyped): VNode =
-  expectKind children, nnkDo
-  result = tcall2(body(children), nil)
+  let kids = newProc(procType=nnkDo, body=children)
+  expectKind kids, nnkDo
+  result = tcall2(body(kids), nil)
   when defined(debugKaraxDsl):
     echo repr result
 

From 76a2031c37021a4dbf2ae43dadad689f57f91c28 Mon Sep 17 00:00:00 2001
From: Alexander Ivanov <alehander42@gmail.com>
Date: Thu, 18 May 2017 12:58:43 +0300
Subject: [PATCH 045/264] Support submit and input event in the vdom

---
 src/vdom.nim | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/vdom.nim b/src/vdom.nim
index 1dc389e..af0c98a 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -73,6 +73,9 @@ type
     ondragstart, ## The user starts dragging an element or text selection.
     ondrop, ## An element is dropped on a valid drop target.
 
+    onsubmit, ## A form is submitted
+    oninput, ## An input value changes
+
     onkeyupenter, ## vdom extension: an input field received the ENTER key press
     onkeyuplater  ## vdom extension: a key was pressed and some time
                   ## passed (useful for on-the-fly text completions)

From d6c7be710673b2393ef849a055cc9a1cb01bb122 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 18 May 2017 15:53:58 +0200
Subject: [PATCH 046/264] added vstyles karax module for inline CSS support

---
 experiments/example.nim |  12 +++-
 src/dom.nim             |   2 +-
 src/karax.nim           |   4 +-
 src/karaxdsl.nim        |   2 +-
 src/vdom.nim            |   6 +-
 src/vstyles.nim         | 154 ++++++++++++++++++++++++++++++++++++++++
 6 files changed, 175 insertions(+), 5 deletions(-)
 create mode 100644 src/vstyles.nim

diff --git a/experiments/example.nim b/experiments/example.nim
index 229cce6..caa7285 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -1,5 +1,5 @@
 
-import vdom, components, karax, karaxdsl, jdict, jstrutils, dom
+import vdom, vstyles, components, karax, karaxdsl, jdict, jstrutils, dom
 
 var
   images: seq[cstring] = @[cstring"a", "b", "c", "d"]
@@ -24,10 +24,20 @@ proc carousel*(key: VKey): VNode {.component.} =
       clearTimeout(timer)
     timer = setTimeout(docount, 30)
 
+  let col =
+    case counter
+    of 0: cstring"#4d4d4d"
+    of 1: cstring"#ff00ff"
+    of 2: cstring"#00ffff"
+    of 3: cstring"#ffff00"
+    else: cstring"red"
+
   result = buildHtml(tdiv(key=key)):
     text images[counter]
     button(onclick = next):
       text "Next"
+    tdiv(style = style(StyleAttr.color, col)):
+      text "This changes its color."
     if cntdown != 5:
       text &cntdown
 
diff --git a/src/dom.nim b/src/dom.nim
index f3d3f73..f2dabcf 100644
--- a/src/dom.nim
+++ b/src/dom.nim
@@ -188,7 +188,7 @@ type
     vspace*: int
     width*: int
 
-  Style = ref StyleObj
+  Style* = ref StyleObj
   StyleObj {.importc.} = object of RootObj
     background*: cstring
     backgroundAttachment*: cstring
diff --git a/src/karax.nim b/src/karax.nim
index ed956d8..2ac4e91 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -1,6 +1,6 @@
 ## Karax -- Single page applications for Nim.
 
-import dom, vdom, jstrutils, components, jdict
+import dom, vdom, jstrutils, components, jdict, vstyles
 
 export dom.Event
 
@@ -104,6 +104,7 @@ proc vnodeToDom(n: VNode): Node =
     wrapEvent(result, n, e, h)
   if n == toFocusV and toFocus.isNil:
     toFocus = result
+  if not n.style.isNil: applyStyle(result, n.style)
 
 proc same(n: VNode, e: Node): bool =
   if toTag[n.kind] == e.nodename:
@@ -135,6 +136,7 @@ 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.style != b.style: return false
   # XXX test event listeners here?
   return true
 
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index faa43c3..190545c 100644
--- a/src/karaxdsl.nim
+++ b/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", "style"]
 
 proc getName(n: NimNode): string =
   case n.kind
diff --git a/src/vdom.nim b/src/vdom.nim
index 1dc389e..9d2b90d 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -1,7 +1,7 @@
 ## Virtual DOM implementation for Karax.
 
 from dom import Event, Node
-import shash, macros
+import shash, macros, vstyles
 from strutils import toUpperAscii
 
 type
@@ -77,6 +77,7 @@ type
     onkeyuplater  ## vdom extension: a key was pressed and some time
                   ## passed (useful for on-the-fly text completions)
 
+
 macro buildLookupTables(): untyped =
   var a = newTree(nnkBracket)
   for i in low(VNodeKind)..high(VNodeKind):
@@ -99,6 +100,7 @@ buildLookupTables()
 type
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
   VKey* = int
+
   VNode* = ref object
     kind*: VNodeKind
     key*: VKey
@@ -109,6 +111,7 @@ type
     events*: seq[(EventKind, EventHandler)]
     hash*: Hash
     validHash*: bool
+    style*: VStyle ## the style that should be applied to the virtual node.
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
 
@@ -143,6 +146,7 @@ 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.style != b.style: return false
   result = true
 
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
diff --git a/src/vstyles.nim b/src/vstyles.nim
new file mode 100644
index 0000000..022476e
--- /dev/null
+++ b/src/vstyles.nim
@@ -0,0 +1,154 @@
+
+import dom, macros
+
+type
+  StyleAttr* {.pure.} = enum ## the style attributes supported by the virtual DOM.
+    background
+    backgroundAttachment
+    backgroundColor
+    backgroundImage
+    backgroundPosition
+    backgroundRepeat
+    border
+    borderBottom
+    borderBottomColor
+    borderBottomStyle
+    borderBottomWidth
+    borderColor
+    borderLeft
+    borderLeftColor
+    borderLeftStyle
+    borderLeftWidth
+    borderRight
+    borderRightColor
+    borderRightStyle
+    borderRightWidth
+    borderStyle
+    borderTop
+    borderTopColor
+    borderTopStyle
+    borderTopWidth
+    borderWidth
+    bottom
+    captionSide
+    clear
+    clip
+    color
+    cursor
+    direction
+    display
+    emptyCells
+    cssFloat
+    font
+    fontFamily
+    fontSize
+    fontStretch
+    fontStyle
+    fontVariant
+    fontWeight
+    height
+    left
+    letterSpacing
+    lineHeight
+    listStyle
+    listStyleImage
+    listStylePosition
+    listStyleType
+    margin
+    marginBottom
+    marginLeft
+    marginRight
+    marginTop
+    maxHeight
+    maxWidth
+    minHeight
+    minWidth
+    overflow
+    padding
+    paddingBottom
+    paddingLeft
+    paddingRight
+    paddingTop
+    pageBreakAfter
+    pageBreakBefore
+    position
+    right
+    scrollbar3dLightColor
+    scrollbarArrowColor
+    scrollbarBaseColor
+    scrollbarDarkshadowColor
+    scrollbarFaceColor
+    scrollbarHighlightColor
+    scrollbarShadowColor
+    scrollbarTrackColor
+    tableLayout
+    textAlign
+    textDecoration
+    textIndent
+    textTransform
+    top
+    verticalAlign
+    visibility
+    width
+    wordSpacing
+    zIndex
+
+macro buildLookupTables(): untyped =
+  var e = newTree(nnkBracket)
+  for i in low(StyleAttr)..high(StyleAttr):
+    e.add(newCall("cstring", newLit($i)))
+  template tmpl(e) {.dirty.} =
+    const
+      toStyleAttrName: array[StyleAttr, cstring] = e
+  result = getAst tmpl(e)
+
+buildLookupTables()
+
+type
+  VStyle* = ref object
+    attrs: array[StyleAttr, cstring]
+    mask: set[StyleAttr]
+
+proc `==`*(a, b: VStyle): bool =
+  if a.isNil:
+    if b.isNil: return true
+    else: return false
+  elif b.isNil: return false
+  if a.mask != b.mask: return false
+  for x in a.mask:
+    if a.attrs[x] != b.attrs[x]: return false
+  return true
+
+proc setAttr*(s: VStyle; attr: StyleAttr, value: cstring) =
+  assert value != nil, "value must not be nil"
+  s.attrs[attr] = value
+  incl(s.mask, attr)
+
+proc getAttr*(s: VStyle; attr: StyleAttr): cstring =
+  ## returns 'nil' if the attribute has not been set.
+  result = s.attrs[attr]
+
+proc style*(pairs: varargs[(StyleAttr, cstring)]): VStyle =
+  ## constructs a VStyle object from a list of (attribute, value)-pairs.
+  result = VStyle(mask: {})
+  for x in pairs:
+    result.setAttr x[0], x[1]
+
+proc style*(a: StyleAttr; val: cstring): VStyle =
+  ## constructs a VStyle object from a single (attribute, value)-pair.
+  result = VStyle(mask: {})
+  result.setAttr a, val
+
+proc setStyle(d: Style; key, val: cstring) {.importcpp: "#[#] = #".}
+
+proc merge*(a, b: VStyle): VStyle =
+  ## merges two styles. ``b`` takes precedence over ``a``.
+  result = VStyle(mask: a.mask + b.mask)
+  for i in low(StyleAttr)..high(StyleAttr):
+    result.attrs[i] = if b.attrs[i].isNil: a.attrs[i] else: b.attrs[i]
+
+proc applyStyle*(n: Node; s: VStyle) =
+  ## apply the style to the real DOM node ``n``.
+  n.style = Style()
+  for x in s.mask:
+    n.style.setStyle(toStyleAttrName[x], s.attrs[x])

From c895d18ccb6531fba61733fc999a68e3fced07b4 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 29 May 2017 10:59:59 +0200
Subject: [PATCH 047/264] renamed dom module to 'kdom' to avoid conflicts with
 Nim's stdlib dom module; it will further diverge from it anyway

---
 examples/mediaplayer/mediaplayer.nim | 2 +-
 examples/scrollapp/scrollapp.nim     | 5 +++--
 experiments/ajaxtest.nim             | 2 +-
 experiments/example.nim              | 2 +-
 src/components.nim                   | 2 +-
 src/karax.nim                        | 4 ++--
 src/{dom.nim => kdom.nim}            | 0
 src/vdom.nim                         | 2 +-
 src/vstyles.nim                      | 2 +-
 tests/diffDomTests.nim               | 2 +-
 10 files changed, 12 insertions(+), 11 deletions(-)
 rename src/{dom.nim => kdom.nim} (100%)

diff --git a/examples/mediaplayer/mediaplayer.nim b/examples/mediaplayer/mediaplayer.nim
index 18179c1..890c078 100644
--- a/examples/mediaplayer/mediaplayer.nim
+++ b/examples/mediaplayer/mediaplayer.nim
@@ -1,5 +1,5 @@
 
-import karax, karaxdsl, vdom, dom, components
+import karax, karaxdsl, vdom, kdom, components
 
 const
   Play = 0
diff --git a/examples/scrollapp/scrollapp.nim b/examples/scrollapp/scrollapp.nim
index e5ef9c1..8ead611 100644
--- a/examples/scrollapp/scrollapp.nim
+++ b/examples/scrollapp/scrollapp.nim
@@ -1,7 +1,7 @@
 ## Example that shows how to accomplish an "infinitely scrolling" app.
 
 include karaxprelude
-import jstrutils, dom
+import jstrutils, kdom, vstyles
 
 var entries: seq[cstring] = @[]
 for i in 1..500:
@@ -16,7 +16,8 @@ proc scrollEvent(ev: Event; n: VNode) =
 
 proc createDom(): VNode =
   result = buildHtml():
-    tdiv(onscroll=scrollEvent, style="height: 400px; overflow: scroll"):
+    tdiv(onscroll=scrollEvent, style=style(
+        (StyleAttr.height, cstring"400px"), (StyleAttr.overflow, cstring"scroll"))):
       for x in entries:
         tdiv:
           text x
diff --git a/experiments/ajaxtest.nim b/experiments/ajaxtest.nim
index 7af60cd..720b6b2 100644
--- a/experiments/ajaxtest.nim
+++ b/experiments/ajaxtest.nim
@@ -1,4 +1,4 @@
-import dom, kajax
+import kdom, kajax
 
 proc cb(httpStatus: int, response: cstring) =
   echo "Worked!"
diff --git a/experiments/example.nim b/experiments/example.nim
index caa7285..fd1e208 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -1,5 +1,5 @@
 
-import vdom, vstyles, components, karax, karaxdsl, jdict, jstrutils, dom
+import vdom, vstyles, components, karax, karaxdsl, jdict, jstrutils, kdom
 
 var
   images: seq[cstring] = @[cstring"a", "b", "c", "d"]
diff --git a/src/components.nim b/src/components.nim
index 7fcc707..555de77 100644
--- a/src/components.nim
+++ b/src/components.nim
@@ -1,6 +1,6 @@
 ## Components in Karax are built by the ``.component`` macro annotation.
 
-import macros, jdict, dom, vdom, tables, strutils
+import macros, jdict, kdom, vdom, tables, strutils
 
 type
   StateDict*[V] = ref object
diff --git a/src/karax.nim b/src/karax.nim
index 2ac4e91..3915b7f 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -1,8 +1,8 @@
 ## Karax -- Single page applications for Nim.
 
-import dom, vdom, jstrutils, components, jdict, vstyles
+import kdom, vdom, jstrutils, components, jdict, vstyles
 
-export dom.Event
+export kdom.Event
 
 proc kout*[T](x: T) {.importc: "console.log", varargs.}
   ## the preferred way of debugging karax applications.
diff --git a/src/dom.nim b/src/kdom.nim
similarity index 100%
rename from src/dom.nim
rename to src/kdom.nim
diff --git a/src/vdom.nim b/src/vdom.nim
index 9d2b90d..a10dce6 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -1,6 +1,6 @@
 ## Virtual DOM implementation for Karax.
 
-from dom import Event, Node
+from kdom import Event, Node
 import shash, macros, vstyles
 from strutils import toUpperAscii
 
diff --git a/src/vstyles.nim b/src/vstyles.nim
index 022476e..f3d8dbc 100644
--- a/src/vstyles.nim
+++ b/src/vstyles.nim
@@ -1,5 +1,5 @@
 
-import dom, macros
+import kdom, macros
 
 type
   StyleAttr* {.pure.} = enum ## the style attributes supported by the virtual DOM.
diff --git a/tests/diffDomTests.nim b/tests/diffDomTests.nim
index 7fdcf85..d2c09ab 100644
--- a/tests/diffDomTests.nim
+++ b/tests/diffDomTests.nim
@@ -1,5 +1,5 @@
 
-import dom, vdom, times, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils
+import kdom, vdom, times, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils
 
 var
     entries: seq[cstring]

From a9b5216a423c0e19c67d6e303d6441cb2a0c04d0 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 5 Jun 2017 10:21:38 +0200
Subject: [PATCH 048/264] diff algorithm special cases diffing of virtual
 styles

---
 src/karax.nim | 131 +++++++++++++++++++++++++++-----------------------
 1 file changed, 72 insertions(+), 59 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 3915b7f..198a244 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -123,22 +123,26 @@ proc replaceById(id: cstring; newTree: Node) =
   x.parentNode.replaceChild(newTree, x)
   #newTree.id = id
 
-proc equalsShallow(a, b: VNode): bool =
-  if a.kind != b.kind: return false
-  if a.id != b.id: return false
-  if a.key != b.key: return false
+type
+  EqResult = enum
+    different, similar, identical
+
+proc equalsShallow(a, b: VNode): EqResult =
+  if a.kind != b.kind: return different
+  if a.id != b.id: return different
+  if a.key != b.key: return different
   if a.kind == VNodeKind.text:
-    if a.text != b.text: return false
+    if a.text != b.text: return different
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
-    if a.text != b.text: return false
-    if a.len != b.len: return false
+    if a.text != b.text: return different
+    if a.len != b.len: return different
     for i in 0..<a.len:
-      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.style != b.style: return false
-  # XXX test event listeners here?
-  return true
+      if equalsShallow(a[i], b[i]) == different: return different
+  if not sameAttrs(a, b): return different
+  if a.class != b.class: return different
+  if a.style != b.style: return similar
+  # Do not test event listeners here!
+  return identical
 
 proc equalsTree(a, b: VNode): bool =
   when false:
@@ -167,59 +171,68 @@ proc updateDirtyElements(parent, current: Node, newNode: VNode) =
       #if dirtyCount <= 0: return
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
-  if not equalsShallow(newNode, oldNode):
+  let res = equalsShallow(newNode, oldNode)
+  if res == different:
     detach(oldNode)
     let n = vnodeToDom(newNode)
     if parent == nil:
       replaceById("ROOT", n)
     else:
       parent.replaceChild(n, current)
-  elif newNode.kind != VNodeKind.text:
-    let newLength = newNode.len
-    var oldLength = oldNode.len
-    let minLength = min(newLength, oldLength)
-    assert oldNode.kind == newNode.kind
-    when defined(simpleDiff):
-      for i in 0..min(newLength, oldLength)-1:
-        updateElement(current, current[i], newNode[i], oldNode[i])
-      if newLength > oldLength:
-        for i in oldLength..newLength-1:
-          current.appendChild(vnodeToDom(newNode[i]))
-      elif oldLength > newLength:
-        for i in countdown(oldLength-1, newLength):
+  else:
+    if res == similar:
+      # we keep the oldNode, but take over the style from the new node:
+      if oldNode.dom != nil:
+        if newNode.style != nil: applyStyle(oldNode.dom, newNode.style)
+        else: oldNode.dom.style = Style()
+      oldNode.style = newNode.style
+
+    if newNode.kind != VNodeKind.text:
+      let newLength = newNode.len
+      var oldLength = oldNode.len
+      let minLength = min(newLength, oldLength)
+      assert oldNode.kind == newNode.kind
+      when defined(simpleDiff):
+        for i in 0..min(newLength, oldLength)-1:
+          updateElement(current, current[i], newNode[i], oldNode[i])
+        if newLength > oldLength:
+          for i in oldLength..newLength-1:
+            current.appendChild(vnodeToDom(newNode[i]))
+        elif oldLength > newLength:
+          for i in countdown(oldLength-1, newLength):
+            detach(oldNode[i])
+            current.removeChild(current.lastChild)
+      else:
+        var commonPrefix = 0
+        while commonPrefix < minLength and
+            equalsTree(newNode[commonPrefix], oldNode[commonPrefix]):
+          inc commonPrefix
+
+        var oldPos = oldLength - 1
+        var newPos = newLength - 1
+        while oldPos >= commonPrefix and newPos >= commonPrefix and
+            equalsTree(newNode[newPos], oldNode[oldPos]):
+          dec oldPos
+          dec newPos
+
+        var pos = min(oldPos, newPos) + 1
+        for i in commonPrefix..pos-1:
+          updateElement(current, current.childNodes[i], newNode[i], oldNode[i])
+
+        var nextChildPos = oldPos + 1
+        while pos <= newPos:
+          if nextChildPos == oldLength:
+            current.appendChild(vnodeToDom(newNode[pos]))
+          else:
+            current.insertBefore(vnodeToDom(newNode[pos]), current.childNodes[nextChildPos])
+          # added new Node, so old state of VDOM have one more Node
+          inc oldLength
+          inc pos
+          inc nextChildPos
+
+        for i in pos..oldPos:
           detach(oldNode[i])
-          current.removeChild(current.lastChild)
-    else:
-      var commonPrefix = 0
-      while commonPrefix < minLength and
-          equalsTree(newNode[commonPrefix], oldNode[commonPrefix]):
-        inc commonPrefix
-
-      var oldPos = oldLength - 1
-      var newPos = newLength - 1
-      while oldPos >= commonPrefix and newPos >= commonPrefix and
-          equalsTree(newNode[newPos], oldNode[oldPos]):
-        dec oldPos
-        dec newPos
-
-      var pos = min(oldPos, newPos) + 1
-      for i in commonPrefix..pos-1:
-        updateElement(current, current.childNodes[i], newNode[i], oldNode[i])
-
-      var nextChildPos = oldPos + 1
-      while pos <= newPos:
-        if nextChildPos == oldLength:
-          current.appendChild(vnodeToDom(newNode[pos]))
-        else:
-          current.insertBefore(vnodeToDom(newNode[pos]), current.childNodes[nextChildPos])
-        # added new Node, so old state of VDOM have one more Node
-        inc oldLength
-        inc pos
-        inc nextChildPos
-
-      for i in pos..oldPos:
-        detach(oldNode[i])
-        current.removeChild(current.childNodes[pos])
+          current.removeChild(current.childNodes[pos])
 
 when false:
   var drawTimeout: Timeout

From 06f528370979d9eaa94a765fbf9c4ad3951f654c Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 5 Jun 2017 10:25:46 +0200
Subject: [PATCH 049/264] vstyle diff: performance improvement

---
 src/vdom.nim | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/vdom.nim b/src/vdom.nim
index a10dce6..7cab49a 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -146,7 +146,9 @@ 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.style != b.style: return false
+  # Do not compare styles here. The idea is that nodes only
+  # differing in styling can be made equal easily enough:
+  #if a.style != b.style: return false
   result = true
 
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =

From 8a639f312126fa2341ee8d32828e744717b6e60c Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 5 Jun 2017 17:06:58 +0200
Subject: [PATCH 050/264] stuff

---
 src/karax.nim | 80 ++++++++++++++++++++++++++++++++-------------------
 src/vdom.nim  | 18 ------------
 2 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 198a244..555b3bb 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -127,33 +127,35 @@ type
   EqResult = enum
     different, similar, identical
 
-proc equalsShallow(a, b: VNode): EqResult =
+proc eq(a, b: VNode; shallow: bool): EqResult =
   if a.kind != b.kind: return different
   if a.id != b.id: return different
-  if a.key != b.key: return different
+  result = identical
+  if a.key != b.key:
+    kout cstring"different keys", a.key, b.key
+    if b.key == 0:
+      kout cstring"key for ", cstring($b.kind)
+    return different
   if a.kind == VNodeKind.text:
     if a.text != b.text: return different
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
     if a.text != b.text: return different
     if a.len != b.len: return different
     for i in 0..<a.len:
-      if equalsShallow(a[i], b[i]) == different: return different
+      if eq(a[i], b[i], shallow) == different: return different
+  elif not shallow:
+    if a.len != b.len: return different
+    for i in 0..<a.len:
+      let res = eq(a[i], b[i], shallow)
+      if res == different: return different
+      elif res == similar:
+        # but continue, maybe something makes it 'different'!
+        result = similar
   if not sameAttrs(a, b): return different
   if a.class != b.class: return different
   if a.style != b.style: return similar
   # Do not test event listeners here!
-  return identical
-
-proc equalsTree(a, b: VNode): bool =
-  when false:
-    # hashing is too fragile now with component support:
-    if not a.validHash:
-      a.calcHash()
-    if not b.validHash:
-      b.calcHash()
-    return a.hash == b.hash
-  else:
-    result = eq(a, b)
+  return result
 
 proc updateDirtyElements(parent, current: Node, newNode: VNode) =
   if newNode.key >= 0 and isDirty(newNode.key):
@@ -170,8 +172,21 @@ proc updateDirtyElements(parent, current: Node, newNode: VNode) =
       # leave early if we know there cannot be anything left to do:
       #if dirtyCount <= 0: return
 
+proc updateStyles(newNode, oldNode: VNode; shallow: bool) =
+  # we keep the oldNode, but take over the style from the new node:
+  if oldNode.dom != nil:
+    kout cstring"updateStyle deep updated dom"
+    if newNode.style != nil: applyStyle(oldNode.dom, newNode.style)
+    else: oldNode.dom.style = Style()
+  oldNode.style = newNode.style
+  if not shallow:
+    assert newNode.len == oldNode.len
+    for i in 0 ..< newNode.len:
+      updateStyles(newNode[i], oldNode[i], shallow)
+
 proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
-  let res = equalsShallow(newNode, oldNode)
+  let res = eq(newNode, oldNode, shallow=true)
+  kout cstring($res), cstring"shallow"
   if res == different:
     detach(oldNode)
     let n = vnodeToDom(newNode)
@@ -180,12 +195,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
     else:
       parent.replaceChild(n, current)
   else:
-    if res == similar:
-      # we keep the oldNode, but take over the style from the new node:
-      if oldNode.dom != nil:
-        if newNode.style != nil: applyStyle(oldNode.dom, newNode.style)
-        else: oldNode.dom.style = Style()
-      oldNode.style = newNode.style
+    if res == similar: updateStyles(newNode, oldNode, true)
 
     if newNode.kind != VNodeKind.text:
       let newLength = newNode.len
@@ -204,16 +214,27 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
             current.removeChild(current.lastChild)
       else:
         var commonPrefix = 0
-        while commonPrefix < minLength and
-            equalsTree(newNode[commonPrefix], oldNode[commonPrefix]):
-          inc commonPrefix
+
+        template eqAndUpdate(a, b: VNode; action: untyped) =
+          let r = eq(a, b, false)
+          kout cstring($r), cstring"eqAndUpdate"
+          case r
+          of identical: action
+          of different: break
+          of similar:
+            updateStyles(a, b, false)
+            action
+
+        while commonPrefix < minLength:
+          eqAndUpdate(newNode[commonPrefix], oldNode[commonPrefix]):
+            inc commonPrefix
 
         var oldPos = oldLength - 1
         var newPos = newLength - 1
-        while oldPos >= commonPrefix and newPos >= commonPrefix and
-            equalsTree(newNode[newPos], oldNode[oldPos]):
-          dec oldPos
-          dec newPos
+        while oldPos >= commonPrefix and newPos >= commonPrefix:
+          eqAndUpdate(newNode[newPos], oldNode[oldPos]):
+            dec oldPos
+            dec newPos
 
         var pos = min(oldPos, newPos) + 1
         for i in commonPrefix..pos-1:
@@ -241,6 +262,7 @@ proc dodraw() =
   if dorender.isNil: return
   let newtree = dorender()
   newtree.id = "ROOT"
+  kout cstring"do draw!", cstring getStackTrace()
   toFocus = nil
   if currentTree == nil:
     currentTree = newtree
diff --git a/src/vdom.nim b/src/vdom.nim
index 7cab49a..4275c7b 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -133,24 +133,6 @@ proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, key: -1, kids: @args)
 
-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.key != b.key: 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
-  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
-  # Do not compare styles here. The idea is that nodes only
-  # differing in styling can be made equal easily enough:
-  #if a.style != b.style: return false
-  result = true
-
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
   if n.attrs.isNil:
     n.attrs = @[key, val]

From 22f458724f19bb389e0fac0e8aa7b6daa7b6ab36 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 5 Jun 2017 21:31:26 +0200
Subject: [PATCH 051/264] new diff algorithm works

---
 src/karax.nim | 44 +++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 555b3bb..3fa2d7e 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -127,26 +127,22 @@ type
   EqResult = enum
     different, similar, identical
 
-proc eq(a, b: VNode; shallow: bool): EqResult =
+proc eq(a, b: VNode; deep: bool): EqResult =
   if a.kind != b.kind: return different
   if a.id != b.id: return different
   result = identical
-  if a.key != b.key:
-    kout cstring"different keys", a.key, b.key
-    if b.key == 0:
-      kout cstring"key for ", cstring($b.kind)
-    return different
+  if a.key != b.key: return different
   if a.kind == VNodeKind.text:
     if a.text != b.text: return different
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
     if a.text != b.text: return different
     if a.len != b.len: return different
     for i in 0..<a.len:
-      if eq(a[i], b[i], shallow) == different: return different
-  elif not shallow:
+      if eq(a[i], b[i], deep) == different: return different
+  elif deep:
     if a.len != b.len: return different
     for i in 0..<a.len:
-      let res = eq(a[i], b[i], shallow)
+      let res = eq(a[i], b[i], deep)
       if res == different: return different
       elif res == similar:
         # but continue, maybe something makes it 'different'!
@@ -172,21 +168,25 @@ proc updateDirtyElements(parent, current: Node, newNode: VNode) =
       # leave early if we know there cannot be anything left to do:
       #if dirtyCount <= 0: return
 
-proc updateStyles(newNode, oldNode: VNode; shallow: bool) =
+proc updateStyles(newNode, oldNode: VNode; deep: bool) =
   # we keep the oldNode, but take over the style from the new node:
   if oldNode.dom != nil:
-    kout cstring"updateStyle deep updated dom"
     if newNode.style != nil: applyStyle(oldNode.dom, newNode.style)
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
-  if not shallow:
+  if deep:
     assert newNode.len == oldNode.len
     for i in 0 ..< newNode.len:
-      updateStyles(newNode[i], oldNode[i], shallow)
+      updateStyles(newNode[i], oldNode[i], deep)
+
+proc updateDom(newNode, oldNode: VNode) =
+  newNode.dom = oldNode.dom
+  assert newNode.len == oldNode.len
+  for i in 0 ..< newNode.len:
+    updateDom(newNode[i], oldNode[i])
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
-  let res = eq(newNode, oldNode, shallow=true)
-  kout cstring($res), cstring"shallow"
+  let res = eq(newNode, oldNode, deep=false)
   if res == different:
     detach(oldNode)
     let n = vnodeToDom(newNode)
@@ -195,7 +195,8 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
     else:
       parent.replaceChild(n, current)
   else:
-    if res == similar: updateStyles(newNode, oldNode, true)
+    if res == similar: updateStyles(newNode, oldNode, false)
+    newNode.dom = oldNode.dom
 
     if newNode.kind != VNodeKind.text:
       let newLength = newNode.len
@@ -216,13 +217,15 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
         var commonPrefix = 0
 
         template eqAndUpdate(a, b: VNode; action: untyped) =
-          let r = eq(a, b, false)
-          kout cstring($r), cstring"eqAndUpdate"
+          let r = eq(a, b, true)
           case r
-          of identical: action
+          of identical:
+            updateDom(a, b)
+            action
           of different: break
           of similar:
-            updateStyles(a, b, false)
+            updateDom(a, b)
+            updateStyles(a, b, true)
             action
 
         while commonPrefix < minLength:
@@ -262,7 +265,6 @@ proc dodraw() =
   if dorender.isNil: return
   let newtree = dorender()
   newtree.id = "ROOT"
-  kout cstring"do draw!", cstring getStackTrace()
   toFocus = nil
   if currentTree == nil:
     currentTree = newtree

From ed3d467f31b7cae97bbcae0b610c10f2e8cb24cc Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 5 Jun 2017 23:20:22 +0200
Subject: [PATCH 052/264] diff algorithm bugfix: don't be too smart in key
 handling

---
 src/karax.nim | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 3fa2d7e..1445b1b 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -75,12 +75,12 @@ proc vnodeToDom(n: VNode): Node =
   elif n.kind == VNodeKind.vthunk:
     let x = callThunk(vcomponents[n.text], n)
     result = vnodeToDom(x)
-    n.key = result.key
+    #n.key = result.key
     attach n
     return result
   elif n.kind == VNodeKind.dthunk:
     result = callThunk(dcomponents[n.text], n)
-    n.key = result.key
+    #n.key = result.key
     attach n
     return result
   else:
@@ -95,8 +95,8 @@ proc vnodeToDom(n: VNode): Node =
     result.id = n.id
   if n.class != nil:
     result.class = n.class
-  if n.key >= 0:
-    result.key = n.key
+  #if n.key >= 0:
+  #  result.key = n.key
   for k, v in attrs(n):
     if v != nil:
       result.setAttr(k, v)

From fca6b2a6ca1ef5b4ebad9d431742a5247ccca9ae Mon Sep 17 00:00:00 2001
From: Fabian Keller <github.100.fkeller@spamgourmet.com>
Date: Tue, 6 Jun 2017 20:02:46 +0200
Subject: [PATCH 053/264] added all css styles to close #20

---
 src/vstyles.nim | 121 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 112 insertions(+), 9 deletions(-)

diff --git a/src/vstyles.nim b/src/vstyles.nim
index f3d8dbc..649c322 100644
--- a/src/vstyles.nim
+++ b/src/vstyles.nim
@@ -2,51 +2,112 @@
 import kdom, macros
 
 type
-  StyleAttr* {.pure.} = enum ## the style attributes supported by the virtual DOM.
+  StyleAttr* {.pure.} = enum
+    ## The style attributes supported by the virtual DOM.
+    ## Reference: https://www.w3schools.com/jsref/dom_obj_style.asp
+    alignContent
+    alignItems
+    alignSelf
+    animation
+    animationDelay
+    animationDirection
+    animationDuration
+    animationFillMode
+    animationIterationCount
+    animationName
+    animationTimingFunction
+    animationPlayState
     background
     backgroundAttachment
     backgroundColor
     backgroundImage
     backgroundPosition
     backgroundRepeat
+    backgroundClip
+    backgroundOrigin
+    backgroundSize
+    backfaceVisibility
     border
     borderBottom
     borderBottomColor
+    borderBottomLeftRadius
+    borderBottomRightRadius
     borderBottomStyle
     borderBottomWidth
+    borderCollapse
     borderColor
+    borderImage
+    borderImageOutset
+    borderImageRepeat
+    borderImageSlice
+    borderImageSource
+    borderImageWidth
     borderLeft
     borderLeftColor
     borderLeftStyle
     borderLeftWidth
+    borderRadius
     borderRight
     borderRightColor
     borderRightStyle
     borderRightWidth
+    borderSpacing
     borderStyle
     borderTop
     borderTopColor
+    borderTopLeftRadius
+    borderTopRightRadius
     borderTopStyle
     borderTopWidth
     borderWidth
     bottom
+    boxDecorationBreak
+    boxShadow
+    boxSizing
     captionSide
     clear
     clip
     color
+    columnCount
+    columnFill
+    columnGap
+    columnRule
+    columnRuleColor
+    columnRuleStyle
+    columnRuleWidth
+    columns
+    columnSpan
+    columnWidth
+    content
+    counterIncrement
+    counterReset
     cursor
     direction
     display
     emptyCells
+    filter
+    flex
+    flexBasis
+    flexDirection
+    flexFlow
+    flexGrow
+    flexShrink
+    flexWrap
     cssFloat
     font
     fontFamily
     fontSize
+    fontSizeAdjust
     fontStretch
     fontStyle
     fontVariant
     fontWeight
+    hangingPunctuation
     height
+    hyphens
+    icon
+    imageOrientation
+    justifyContent
     left
     letterSpacing
     lineHeight
@@ -63,7 +124,22 @@ type
     maxWidth
     minHeight
     minWidth
+    navDown
+    navIndex
+    navLeft
+    navRight
+    navUp
+    opacity
+    order
+    orphans
+    outline
+    outlineColor
+    outlineOffset
+    outlineStyle
+    outlineWidth
     overflow
+    overflowX
+    overflowY
     padding
     paddingBottom
     paddingLeft
@@ -71,26 +147,53 @@ type
     paddingTop
     pageBreakAfter
     pageBreakBefore
+    pageBreakInside
+    perspective
+    perspectiveOrigin
     position
+    quotes
+    resize
     right
-    scrollbar3dLightColor
-    scrollbarArrowColor
-    scrollbarBaseColor
-    scrollbarDarkshadowColor
-    scrollbarFaceColor
-    scrollbarHighlightColor
-    scrollbarShadowColor
-    scrollbarTrackColor
+    scrollbar3dLightColor # note: missing in w3schools reference
+    scrollbarArrowColor # note: missing in w3schools reference
+    scrollbarBaseColor # note: missing in w3schools reference
+    scrollbarDarkshadowColor # note: missing in w3schools reference
+    scrollbarFaceColor # note: missing in w3schools reference
+    scrollbarHighlightColor # note: missing in w3schools reference
+    scrollbarShadowColor # note: missing in w3schools reference
+    scrollbarTrackColor # note: missing in w3schools reference
     tableLayout
+    tabSize
     textAlign
+    textAlignLast
     textDecoration
+    textDecorationColor
+    textDecorationLine
+    textDecorationStyle
     textIndent
+    textJustify
+    textOverflow
+    textShadow
     textTransform
     top
+    transform
+    transformOrigin
+    transformStyle
+    transition
+    transitionDelay
+    transitionDuration
+    transitionProperty
+    transitionTimingFunction
+    unicodeBidi
+    userSelect
     verticalAlign
     visibility
+    whiteSpace
     width
+    wordBreak
     wordSpacing
+    wordWrap
+    widows
     zIndex
 
 macro buildLookupTables(): untyped =

From e49fa7edf7ff285b55ef3e37999fc39914a66548 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 7 Jun 2017 10:07:37 +0200
Subject: [PATCH 054/264] disable smart vstyle diffing for now

---
 src/karax.nim | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/karax.nim b/src/karax.nim
index 1445b1b..f8929e1 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -149,7 +149,8 @@ proc eq(a, b: VNode; deep: bool): EqResult =
         result = similar
   if not sameAttrs(a, b): return different
   if a.class != b.class: return different
-  if a.style != b.style: return similar
+  # XXX Fixme: smart diffing still is broken for complex apps:
+  if a.style != b.style: return different # similar
   # Do not test event listeners here!
   return result
 

From dc5ba1f6461d90439eafb19b4fb5d173690f5482 Mon Sep 17 00:00:00 2001
From: Pavel Nuzhdin <pnzhdin@gmail.com>
Date: Fri, 9 Jun 2017 15:44:16 +0700
Subject: [PATCH 055/264] Added stopPropagation event method

---
 src/kdom.nim | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/kdom.nim b/src/kdom.nim
index f2dabcf..349f02d 100644
--- a/src/kdom.nim
+++ b/src/kdom.nim
@@ -520,6 +520,7 @@ proc setAttribute*(s: Style, attr, value: cstring, caseSensitive=false)
 
 # Event "methods"
 proc preventDefault*(ev: Event)
+proc stopPropagation*(ev: Event)
 
 # TouchEvent "methods"
 proc identifiedTouch*(list: TouchList): Touch

From d5596c8ff50af6002ac24b26a63b0b451627ca6a Mon Sep 17 00:00:00 2001
From: Fabian Keller <github.100.fkeller@spamgourmet.com>
Date: Fri, 19 May 2017 20:15:07 +0200
Subject: [PATCH 056/264] added post render callback

---
 src/karax.nim | 8 +++++++-
 src/kdom.nim  | 7 ++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index f8929e1..cc52e2f 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -117,6 +117,7 @@ proc same(n: VNode, e: Node): bool =
 var
   dorender: proc (): VNode {.closure.}
   currentTree: VNode
+  postRenderCallback: proc ()
 
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
@@ -279,6 +280,10 @@ proc dodraw() =
       updateDirtyElements(nil, olddom, newtree)
       someDirty = false
     currentTree = newtree
+
+  if not postRenderCallback.isNil:
+    postRenderCallback()
+
   # now that it's part of the DOM, give it the focus:
   if toFocus != nil:
     toFocus.focus()
@@ -299,9 +304,10 @@ proc redraw*() =
 proc init(ev: Event) =
   reqFrame(dodraw)
 
-proc setRenderer*(renderer: proc (): VNode) =
+proc setRenderer*(renderer: proc (): VNode, clientPostRenderCallback: proc () = nil) =
   dorender = renderer
   window.onload = init
+  postRenderCallback = clientPostRenderCallback
 
 proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler) =
   ## Implements the foundation of Karax's event management.
diff --git a/src/kdom.nim b/src/kdom.nim
index 349f02d..0adb1dd 100644
--- a/src/kdom.nim
+++ b/src/kdom.nim
@@ -273,6 +273,7 @@ type
     textDecoration*: cstring
     textIndent*: cstring
     textTransform*: cstring
+    transform*: cstring
     top*: cstring
     verticalAlign*: cstring
     visibility*: cstring
@@ -567,7 +568,7 @@ proc getElementsByClass*(n: Node; name: cstring): seq[Node] {.
 
 type
   BoundingRect* {.importc.} = object
-    top*, bottom*, left*, right*: int
+    top*, bottom*, left*, right*, x*, y*, width*, height*: float
 
 proc getBoundingClientRect*(e: Node): BoundingRect {.
   importcpp: "getBoundingClientRect", nodecl.}
@@ -579,8 +580,8 @@ proc clientWidth*(): int {.
 proc inViewport*(el: Node): bool =
   let rect = el.getBoundingClientRect()
   result = rect.top >= 0 and rect.left >= 0 and
-           rect.bottom <= clientHeight() and
-           rect.right <= clientWidth()
+           rect.bottom <= clientHeight().float and
+           rect.right <= clientWidth().float
 
 proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
 proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}

From 14660f9d685d1b14cdead9cb09421f0f8ff7512e Mon Sep 17 00:00:00 2001
From: Fabian Keller <github.100.fkeller@spamgourmet.com>
Date: Thu, 15 Jun 2017 13:53:53 +0200
Subject: [PATCH 057/264] implemented refs draft

---
 experiments/refs/demo.html | 13 +++++++++++++
 experiments/refs/demo.nim  | 39 ++++++++++++++++++++++++++++++++++++++
 experiments/refs/demo.nims |  1 +
 src/karax.nim              | 10 ++++++++--
 src/karaxdsl.nim           |  2 +-
 src/vdom.nim               |  4 ++++
 6 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 experiments/refs/demo.html
 create mode 100644 experiments/refs/demo.nim
 create mode 100644 experiments/refs/demo.nims

diff --git a/experiments/refs/demo.html b/experiments/refs/demo.html
new file mode 100644
index 0000000..e1fe419
--- /dev/null
+++ b/experiments/refs/demo.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <meta charSet="utf-8"/>
+  <title>Refs</title>
+</head>
+
+<body id="body">
+  <div id="ROOT"></div>
+  <script type="text/javascript" src="nimcache/demo.js"></script>
+</body>
+</html>
diff --git a/experiments/refs/demo.nim b/experiments/refs/demo.nim
new file mode 100644
index 0000000..dffb1e9
--- /dev/null
+++ b/experiments/refs/demo.nim
@@ -0,0 +1,39 @@
+include karaxprelude
+import random
+
+var
+  modelData = @[5, 2, 4]
+
+  refA = VNodeRef()
+  refB = VNodeRef()
+  refSeq = newSeq[VNodeRef]()
+
+proc onClick(ev: Event, n: VNode) =
+  kout(refA)
+  kout(refB)
+  kout(refSeq)
+
+proc secureRefSlot(i: int): VNodeRef =
+  while refSeq.len <= i:
+    refSeq.add(VNodeRef())
+  result = refSeq[i]
+
+proc view(): VNode =
+  result = buildHtml():
+    tdiv:
+      button(onclick=onClick):
+        text "click me"
+      # storing refs to single elements is straightforward now
+      tdiv(nref=refA):
+        text "A"
+      tdiv(nref=refB):
+        text "B"
+      # It's a bit more tricky when containers are involved:
+      for i, x in modelData.pairs:
+        tdiv(nref=secureRefSlot(i)):
+          text "List item: " & $x
+
+proc renderer(): VNode =
+  view()
+
+setRenderer renderer
diff --git a/experiments/refs/demo.nims b/experiments/refs/demo.nims
new file mode 100644
index 0000000..9028ff1
--- /dev/null
+++ b/experiments/refs/demo.nims
@@ -0,0 +1 @@
+--path: "../../src"
diff --git a/src/karax.nim b/src/karax.nim
index cc52e2f..d8a4cb1 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -65,8 +65,14 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
 
 # --------------------- DOM diff -----------------------------------------
 
-template detach(n: VNode) = n.dom = nil
-template attach(n: Vnode) = n.dom = result
+template detach(n: VNode) =
+  if not n.nref.isNil():
+    n.nref.vnode = nil
+  n.dom = nil
+template attach(n: VNode) =
+  if not n.nref.isNil():
+    n.nref.vnode = n
+  n.dom = result
 
 proc vnodeToDom(n: VNode): Node =
   if n.kind == VNodeKind.text:
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index 190545c..8693f5b 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -4,7 +4,7 @@ from strutils import startsWith, toLowerAscii
 
 const
   StmtContext = ["kout", "inc", "echo", "dec", "!"]
-  SpecialAttrs = ["id", "class", "value", "key", "style"]
+  SpecialAttrs = ["id", "class", "value", "key", "style", "nref"]
 
 proc getName(n: NimNode): string =
   case n.kind
diff --git a/src/vdom.nim b/src/vdom.nim
index d55e7b4..f4ccff8 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -101,6 +101,9 @@ macro buildLookupTables(): untyped =
 buildLookupTables()
 
 type
+  VNodeRef* = ref object
+    vnode*: VNode
+
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
   VKey* = int
 
@@ -108,6 +111,7 @@ type
     kind*: VNodeKind
     key*: VKey
     id*, class*, text*: cstring
+    nref*: VNodeRef
     kids: seq[VNode]
     # even index: key, odd index: value; done this way for memory efficiency:
     attrs: seq[cstring]

From 472f1deb58cb1ae718e395034e1e4099cf53c7c9 Mon Sep 17 00:00:00 2001
From: Fabian Keller <github.100.fkeller@spamgourmet.com>
Date: Thu, 15 Jun 2017 14:38:39 +0200
Subject: [PATCH 058/264] cleaned up example

---
 experiments/refs/demo.nim | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/experiments/refs/demo.nim b/experiments/refs/demo.nim
index dffb1e9..cfbf7a3 100644
--- a/experiments/refs/demo.nim
+++ b/experiments/refs/demo.nim
@@ -1,5 +1,5 @@
 include karaxprelude
-import random
+import future, sequtils
 
 var
   modelData = @[5, 2, 4]
@@ -9,9 +9,9 @@ var
   refSeq = newSeq[VNodeRef]()
 
 proc onClick(ev: Event, n: VNode) =
-  kout(refA)
-  kout(refB)
-  kout(refSeq)
+  kout(refA.vnode)
+  kout(refB.vnode)
+  kout(refSeq.map(nref => nref.vnode))
 
 proc secureRefSlot(i: int): VNodeRef =
   while refSeq.len <= i:

From e33b9dc09a2242b6b85c027ebc76d0ba982018b2 Mon Sep 17 00:00:00 2001
From: Fabian Keller <github.100.fkeller@spamgourmet.com>
Date: Thu, 15 Jun 2017 19:01:15 +0200
Subject: [PATCH 059/264] added base methods for VNodeRef

---
 experiments/refs/demo.nim | 31 ++++++++++++++++++++++++-------
 src/karax.nim             |  2 ++
 src/vdom.nim              |  6 +++++-
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/experiments/refs/demo.nim b/experiments/refs/demo.nim
index cfbf7a3..6ecc7db 100644
--- a/experiments/refs/demo.nim
+++ b/experiments/refs/demo.nim
@@ -1,16 +1,30 @@
 include karaxprelude
 import future, sequtils
 
+type
+  CustomRef = ref object of VNodeRef
+
+method onAttach(r: CustomRef) =
+  kout(cstring"custom ref attached")
+
+method onDetach(r: CustomRef) =
+  kout(cstring"custom ref detached")
+
 var
   modelData = @[5, 2, 4]
 
   refA = VNodeRef()
   refB = VNodeRef()
+  refC = CustomRef()
   refSeq = newSeq[VNodeRef]()
 
 proc onClick(ev: Event, n: VNode) =
-  kout(refA.vnode)
-  kout(refB.vnode)
+  modelData.add(0)
+
+proc showRefs() =
+  kout(refA)
+  kout(refB)
+  kout(refC)
   kout(refSeq.map(nref => nref.vnode))
 
 proc secureRefSlot(i: int): VNodeRef =
@@ -24,10 +38,13 @@ proc view(): VNode =
       button(onclick=onClick):
         text "click me"
       # storing refs to single elements is straightforward now
-      tdiv(nref=refA):
-        text "A"
-      tdiv(nref=refB):
-        text "B"
+      if modelData.len mod 2 == 0:
+        tdiv(nref=refA):
+          text "A"
+        tdiv(nref=refB):
+          text "B"
+        tdiv(nref=refC):
+          text "C"
       # It's a bit more tricky when containers are involved:
       for i, x in modelData.pairs:
         tdiv(nref=secureRefSlot(i)):
@@ -36,4 +53,4 @@ proc view(): VNode =
 proc renderer(): VNode =
   view()
 
-setRenderer renderer
+setRenderer(renderer, showRefs)
diff --git a/src/karax.nim b/src/karax.nim
index d8a4cb1..b454050 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -68,10 +68,12 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
 template detach(n: VNode) =
   if not n.nref.isNil():
     n.nref.vnode = nil
+    n.nref.onDetach()
   n.dom = nil
 template attach(n: VNode) =
   if not n.nref.isNil():
     n.nref.vnode = n
+    n.nref.onAttach()
   n.dom = result
 
 proc vnodeToDom(n: VNode): Node =
diff --git a/src/vdom.nim b/src/vdom.nim
index f4ccff8..9f9c642 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -101,7 +101,7 @@ macro buildLookupTables(): untyped =
 buildLookupTables()
 
 type
-  VNodeRef* = ref object
+  VNodeRef* = ref object of RootObj
     vnode*: VNode
 
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
@@ -122,6 +122,10 @@ type
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
 
+method onAttach*(v: VNodeRef) {.base.} = discard
+method onDetach*(v: VNodeRef) {.base.} = discard
+method changed*(v: VNodeRef): bool {.base.} = false
+
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
 

From 08538f7f2675814436c60de3316323c7991692ef Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Fri, 16 Jun 2017 16:45:06 +0200
Subject: [PATCH 060/264] move parseInt to jstrutils.nim to avoid conflicts;
 introduce travis testing

---
 .travis.yml       | 18 ++++++++++++++++++
 src/jstrutils.nim |  1 +
 src/kdom.nim      |  3 ---
 tests/tester.nim  | 15 +++++++++++++++
 4 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 .travis.yml
 create mode 100644 tests/tester.nim

diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..0c60bd2
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,18 @@
+sudo: false
+language: c
+os: linux
+install:
+  - git clone https://github.com/nim-lang/nim
+  - cd nim
+  - git clone --depth 1 https://github.com/nim-lang/csources.git
+  - cd csources
+  - sh build.sh
+  - cd ../
+  - bin/nim c koch
+  - ./koch boot -d:release
+  - cd ..
+before_script:
+  - set -e
+  - export PATH=$(pwd)/nim/bin:$(pwd):$PATH
+script:
+  - nim c -r tests/tester.nim
diff --git a/src/jstrutils.nim b/src/jstrutils.nim
index 0be4076..a16473d 100644
--- a/src/jstrutils.nim
+++ b/src/jstrutils.nim
@@ -23,3 +23,4 @@ proc isInt*(s: cstring): bool {.asmNoStackFrame.} =
   """
 
 proc parseInt*(s: cstring): int {.importcpp: "parseInt(#, 10)", nodecl.}
+proc parseFloat*(s: cstring): BiggestFloat {.importc, nodecl.}
diff --git a/src/kdom.nim b/src/kdom.nim
index 0adb1dd..f933b87 100644
--- a/src/kdom.nim
+++ b/src/kdom.nim
@@ -547,9 +547,6 @@ proc decodeURIComponent*(uri: cstring): cstring {.importc, nodecl.}
 proc encodeURIComponent*(uri: cstring): cstring {.importc, nodecl.}
 proc isFinite*(x: BiggestFloat): bool {.importc, nodecl.}
 proc isNaN*(x: BiggestFloat): bool {.importc, nodecl.}
-proc parseFloat*(s: cstring): BiggestFloat {.importc, nodecl.}
-proc parseInt*(s: cstring): int {.importc, nodecl.}
-proc parseInt*(s: cstring, radix: int):int {.importc, nodecl.}
 
 
 proc id*(n: Node): cstring {.importcpp: "#.id", nodecl.}
diff --git a/tests/tester.nim b/tests/tester.nim
new file mode 100644
index 0000000..5dc7426
--- /dev/null
+++ b/tests/tester.nim
@@ -0,0 +1,15 @@
+# For now we only test that the things still compile.
+
+import os
+
+proc exec(cmd: string) =
+  if os.execShellCmd(cmd) != 0:
+    quit "command failed " & cmd
+
+proc main =
+  exec("nim js tests/diffDomTests.nim")
+  exec("nim js examples/todoapp/todoapp.nim")
+  exec("nim js examples/scrollapp/scrollapp.nim")
+  exec("nim js examples/mediaplayer/playerapp.nim")
+
+main()

From b3fba429ad89ee45419e9c3555bdbd53a9c53ba7 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Fri, 16 Jun 2017 18:02:35 +0200
Subject: [PATCH 061/264] introduce KaraxInstance; 100% backwards compatible

---
 src/karax.nim    | 121 ++++++++++++++++++++++++++---------------------
 src/karaxdsl.nim |   4 +-
 2 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index cc52e2f..d9f5773 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -14,12 +14,26 @@ proc key*(e: Node): VKey =
   else: result = -1
 proc `key=`*(e: Node; x: VKey) {.importcpp: "#.karaxKey = #", nodecl.}
 
-var
-  toFocus: Node
-  toFocusV: VNode
+type
+  KaraxInstance* = ref object ## underlying karax instance. Usually you don't have
+                              ## know about this.
+    rootId: cstring not nil
+    renderer: proc (): VNode {.closure.}
+    currentTree: VNode
+    postRenderCallback: proc ()
+    toFocus: Node
+    toFocusV: VNode
 
-proc setFocus*(n: VNode) =
-  toFocusV = n
+var
+  kxi*: KaraxInstance ## The current Karax instance. This is always used
+                      ## as the default. **Note**: Within the karax DSL
+                      ## always a symbol of the name *kxi* is assumed, so
+                      ## if you have a local karax instance to use instead
+                      ## in your 'buildHtml' statement, it needs to be named
+                      ## 'kxi'.
+
+proc setFocus*(n: VNode; kxi: KaraxInstance = kxi) =
+  kxi.toFocusV = n
 
 # ----------------- event wrapping ---------------------------------------
 
@@ -68,13 +82,13 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
 template detach(n: VNode) = n.dom = nil
 template attach(n: Vnode) = n.dom = result
 
-proc vnodeToDom(n: VNode): Node =
+proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
     attach n
   elif n.kind == VNodeKind.vthunk:
     let x = callThunk(vcomponents[n.text], n)
-    result = vnodeToDom(x)
+    result = vnodeToDom(x, kxi)
     #n.key = result.key
     attach n
     return result
@@ -87,7 +101,7 @@ proc vnodeToDom(n: VNode): Node =
     result = document.createElement(toTag[n.kind])
     attach n
     for k in n:
-      appendChild(result, vnodeToDom(k))
+      appendChild(result, vnodeToDom(k, kxi))
     # text is mapped to 'value':
     if n.text != nil:
       result.value = n.text
@@ -102,8 +116,8 @@ proc vnodeToDom(n: VNode): Node =
       result.setAttr(k, v)
   for e, h in items(n.events):
     wrapEvent(result, n, e, h)
-  if n == toFocusV and toFocus.isNil:
-    toFocus = result
+  if n == kxi.toFocusV and kxi.toFocus.isNil:
+    kxi.toFocus = result
   if not n.style.isNil: applyStyle(result, n.style)
 
 proc same(n: VNode, e: Node): bool =
@@ -114,11 +128,6 @@ proc same(n: VNode, e: Node): bool =
       for i in 0 ..< n.len:
         if not same(n[i], e[i]): return false
 
-var
-  dorender: proc (): VNode {.closure.}
-  currentTree: VNode
-  postRenderCallback: proc ()
-
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
   x.parentNode.replaceChild(newTree, x)
@@ -155,18 +164,19 @@ proc eq(a, b: VNode; deep: bool): EqResult =
   # Do not test event listeners here!
   return result
 
-proc updateDirtyElements(parent, current: Node, newNode: VNode) =
+proc updateDirtyElements(parent, current: Node, newNode: VNode,
+                         kxi: KaraxInstance) =
   if newNode.key >= 0 and isDirty(newNode.key):
     unmarkDirty(newNode.key)
-    let n = vnodeToDom(newNode)
+    let n = vnodeToDom(newNode, kxi)
     if parent == nil:
-      replaceById("ROOT", n)
+      replaceById(kxi.rootId, n)
     else:
       parent.replaceChild(n, current)
   elif newNode.kind != VNodeKind.text and newNode.kind != VNodeKind.vthunk and
        newNode.kind != VNodeKind.dthunk:
     for i in 0..newNode.len-1:
-      updateDirtyElements(current, current[i], newNode[i])
+      updateDirtyElements(current, current[i], newNode[i], kxi)
       # leave early if we know there cannot be anything left to do:
       #if dirtyCount <= 0: return
 
@@ -187,13 +197,14 @@ proc updateDom(newNode, oldNode: VNode) =
   for i in 0 ..< newNode.len:
     updateDom(newNode[i], oldNode[i])
 
-proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
+proc updateElement(parent, current: Node, newNode, oldNode: VNode;
+                   kxi: KaraxInstance) =
   let res = eq(newNode, oldNode, deep=false)
   if res == different:
     detach(oldNode)
-    let n = vnodeToDom(newNode)
+    let n = vnodeToDom(newNode, kxi)
     if parent == nil:
-      replaceById("ROOT", n)
+      replaceById(kxi.rootId, n)
     else:
       parent.replaceChild(n, current)
   else:
@@ -207,7 +218,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
       assert oldNode.kind == newNode.kind
       when defined(simpleDiff):
         for i in 0..min(newLength, oldLength)-1:
-          updateElement(current, current[i], newNode[i], oldNode[i])
+          updateElement(current, current[i], newNode[i], oldNode[i], kxi)
         if newLength > oldLength:
           for i in oldLength..newLength-1:
             current.appendChild(vnodeToDom(newNode[i]))
@@ -243,14 +254,14 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
 
         var pos = min(oldPos, newPos) + 1
         for i in commonPrefix..pos-1:
-          updateElement(current, current.childNodes[i], newNode[i], oldNode[i])
+          updateElement(current, current.childNodes[i], newNode[i], oldNode[i], kxi)
 
         var nextChildPos = oldPos + 1
         while pos <= newPos:
           if nextChildPos == oldLength:
-            current.appendChild(vnodeToDom(newNode[pos]))
+            current.appendChild(vnodeToDom(newNode[pos], kxi))
           else:
-            current.insertBefore(vnodeToDom(newNode[pos]), current.childNodes[nextChildPos])
+            current.insertBefore(vnodeToDom(newNode[pos], kxi), current.childNodes[nextChildPos])
           # added new Node, so old state of VDOM have one more Node
           inc oldLength
           inc pos
@@ -263,53 +274,57 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) =
 when false:
   var drawTimeout: Timeout
 
-proc dodraw() =
-  if dorender.isNil: return
-  let newtree = dorender()
-  newtree.id = "ROOT"
-  toFocus = nil
-  if currentTree == nil:
-    currentTree = newtree
-    let asdom = vnodeToDom currentTree
-    replaceById("ROOT", asdom)
+proc dodraw(kxi: KaraxInstance) =
+  if kxi.renderer.isNil: return
+  let newtree = kxi.renderer()
+  newtree.id = kxi.rootId
+  kxi.toFocus = nil
+  if kxi.currentTree == nil:
+    kxi.currentTree = newtree
+    let asdom = vnodeToDom(kxi.currentTree, kxi)
+    replaceById(kxi.rootId, asdom)
   else:
-    let olddom = document.getElementById("ROOT")
-    updateElement(nil, olddom, newtree, currentTree)
+    let olddom = document.getElementById(kxi.rootId)
+    updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
     #assert same(newtree, document.getElementById("ROOT"))
     if someDirty:
-      updateDirtyElements(nil, olddom, newtree)
+      updateDirtyElements(nil, olddom, newtree, kxi)
       someDirty = false
-    currentTree = newtree
+    kxi.currentTree = newtree
 
-  if not postRenderCallback.isNil:
-    postRenderCallback()
+  if not kxi.postRenderCallback.isNil:
+    kxi.postRenderCallback()
 
   # now that it's part of the DOM, give it the focus:
-  if toFocus != nil:
-    toFocus.focus()
+  if kxi.toFocus != nil:
+    kxi.toFocus.focus()
 
 proc reqFrame(callback: proc()) {.importc: "window.requestAnimationFrame".}
 
-proc redraw*() =
+proc redraw*(kxi: KaraxInstance = kxi) =
   # we buffer redraw requests:
   when false:
     if drawTimeout != nil:
       clearTimeout(drawTimeout)
     drawTimeout = setTimeout(dodraw, 30)
   elif true:
-    reqFrame(dodraw)
+    reqFrame(proc () = kxi.dodraw)
   else:
     dodraw()
 
 proc init(ev: Event) =
-  reqFrame(dodraw)
+  reqFrame(proc () = kxi.dodraw)
 
-proc setRenderer*(renderer: proc (): VNode, clientPostRenderCallback: proc () = nil) =
-  dorender = renderer
+proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
+                  clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =
+  ## Setup Karax. Usually the return value can be ignored.
+  result = KaraxInstance(rootId: root, renderer: renderer,
+                         postRenderCallback: clientPostRenderCallback)
+  kxi = result
   window.onload = init
-  postRenderCallback = clientPostRenderCallback
 
-proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler) =
+proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler;
+                      kxi: KaraxInstance = kxi) =
   ## Implements the foundation of Karax's event management.
   ## Karax DSL transforms ``tag(onEvent = handler)`` to
   ## ``tempNode.addEventHandler(tagNode, EventKind.onEvent, wrapper)``
@@ -317,7 +332,7 @@ proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler) =
   ## a ``redraw``.
   proc wrapper(ev: Event; n: VNode) =
     action(ev, n)
-    redraw()
+    redraw(kxi)
   addEventListener(n, k, wrapper)
 
 proc setOnHashChange*(action: proc (hashPart: cstring)) =
@@ -346,10 +361,10 @@ proc setupErrorHandler*() =
 proc prepend(parent, kid: Element) =
   parent.insertBefore(kid, parent.firstChild)
 
-proc loadScript*(jsfilename: cstring) =
+proc loadScript*(jsfilename: cstring; kxi: KaraxInstance = kxi) =
   let body = getElementById("body")
   let s = document.createElement("script")
   s.setAttr "type", "text/javascript"
   s.setAttr "src", jsfilename
   body.prepend(s)
-  redraw()
+  redraw(kxi)
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index 190545c..a3558c8 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -76,7 +76,7 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
           let key = getName x[0]
           if key.startsWith("on"):
             result.add newCall(bindSym"addEventHandler",
-              tmp, newDotExpr(bindSym"EventKind", x[0]), x[1])
+              tmp, newDotExpr(bindSym"EventKind", x[0]), x[1], ident("kxi"))
           elif key in SpecialAttrs:
             result.add newDotAsgn(tmp, key, x[1])
           else:
@@ -84,7 +84,7 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
         elif ck != ComponentKind.Tag:
           call.add x
         elif eqIdent(x, "setFocus"):
-          result.add newCall(x, tmp)
+          result.add newCall(x, tmp, ident"kxi")
         else:
           result.add tcall2(x, tmp)
       if tmpContext == nil:

From 28c4f4b76a0cf66618a70a9a4e9f6d9f220040a6 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Fri, 16 Jun 2017 22:57:32 +0200
Subject: [PATCH 062/264] update kajax.nim to use the 'kxi' context too

---
 src/kajax.nim | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/kajax.nim b/src/kajax.nim
index be230f0..414b9d2 100644
--- a/src/kajax.nim
+++ b/src/kajax.nim
@@ -7,10 +7,11 @@ import karax
 
 proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
-          cont: proc (httpStatus: int; response: cstring)) =
+          cont: proc (httpStatus: int; response: cstring);
+          kxi: KaraxInstance = kxi) =
   proc contWrapper(httpStatus: int; response: cstring) =
     cont(httpStatus, response)
-    redraw()
+    redraw(kxi)
 
   type
     HttpRequest {.importc.} = ref object
@@ -39,12 +40,14 @@ proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
 
 proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
-          cont: proc (httpStatus: int, response: cstring)) =
-  ajax("POST", url, headers, data, cont)
+          cont: proc (httpStatus: int, response: cstring);
+          kxi: KaraxInstance = kxi) =
+  ajax("POST", url, headers, data, cont, kxi)
 
 proc ajaxGet*(url: cstring; headers: openarray[(cstring, cstring)];
-          cont: proc (httpStatus: int, response: cstring)) =
-  ajax("GET", url, headers, nil, cont)
+          cont: proc (httpStatus: int, response: cstring);
+          kxi: KaraxInstance = kxi) =
+  ajax("GET", url, headers, nil, cont, kxi)
 
 proc toJson*[T](data: T): cstring {.importc: "JSON.stringify".}
 proc fromJson*[T](blob: cstring): T {.importc: "JSON.parse".}

From 7b246d0d40612e230cd53bbbb535428711aff585 Mon Sep 17 00:00:00 2001
From: Fabian Keller <github.100.fkeller@spamgourmet.com>
Date: Sat, 17 Jun 2017 16:57:36 +0200
Subject: [PATCH 063/264] added travis link

---
 readme.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index 4aafac8..13e670a 100644
--- a/readme.rst
+++ b/readme.rst
@@ -1,4 +1,4 @@
-Karax -- Single page applications in Nim
+Karax – Single page applications in Nim [![Build Status](https://travis-ci.org/pragmagic/karax.svg?branch=master)](https://travis-ci.org/pragmagic/karax)
 ========================================
 
 Karax is a framework for developing single page applications in Nim.

From 972fcb0950a275e06f3fab0b054d264cc386fdbd Mon Sep 17 00:00:00 2001
From: Fabian Keller <bluenote10@users.noreply.github.com>
Date: Sat, 17 Jun 2017 17:05:37 +0200
Subject: [PATCH 064/264] proper rst solution

---
 readme.rst | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/readme.rst b/readme.rst
index 13e670a..3fac7ad 100644
--- a/readme.rst
+++ b/readme.rst
@@ -1,5 +1,5 @@
-Karax – Single page applications in Nim [![Build Status](https://travis-ci.org/pragmagic/karax.svg?branch=master)](https://travis-ci.org/pragmagic/karax)
-========================================
+Karax – Single page applications in Nim |travis|
+================================================
 
 Karax is a framework for developing single page applications in Nim.
 It's still in heavy development, so keep in mind that the API is subject
@@ -33,3 +33,6 @@ Goals
 - Leverage Nim's macro system to produce a framework that allows
   for the development of applications that are boilerplate free.
 - Keep it small, keep it fast, keep it flexible.
+
+.. |travis| image:: https://travis-ci.org/pragmagic/karax.svg?branch=master
+    :target: https://travis-ci.org/pragmagic/karax

From b189b24a4f6f3afb5856db9634a55cbf6ca86375 Mon Sep 17 00:00:00 2001
From: Fabian Keller <bluenote10@users.noreply.github.com>
Date: Sun, 18 Jun 2017 00:01:27 +0200
Subject: [PATCH 065/264] fixes #25 (#26)

---
 .gitignore                           |  1 +
 src/karaxdsl.nim                     | 10 ++++++++--
 tests/compiler_tests.nim             | 18 ++++++++++++++++++
 tests/{diffDomTests.nims => nim.cfg} |  0
 tests/tester.nim                     |  1 +
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 tests/compiler_tests.nim
 rename tests/{diffDomTests.nims => nim.cfg} (100%)

diff --git a/.gitignore b/.gitignore
index 67d9b34..42b07a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 nimcache/
+/tests/tester
\ No newline at end of file
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index a3558c8..e3e8290 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -47,12 +47,18 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
     assert n.len == result.len
     if L > 0:
       result[L-1] = tcall2(result[L-1], tmpContext)
-  of nnkStmtList, nnkStmtListExpr, nnkWhenStmt, nnkIfStmt, nnkCaseStmt,
-     nnkTryStmt, nnkFinally:
+  of nnkStmtList, nnkStmtListExpr, nnkWhenStmt, nnkIfStmt, nnkTryStmt,
+     nnkFinally:
     # recurse for every child:
     result = copyNimNode(n)
     for x in n:
       result.add tcall2(x, tmpContext)
+  of nnkCaseStmt:
+    # recurse for children, but don't add call for case ident
+    result = copyNimNode(n)
+    result.add n[0]
+    for i in 1 ..< n.len:
+      result.add tcall2(n[i], tmpContext)
   of nnkVarSection, nnkLetSection, nnkConstSection:
     result = n
   of nnkCallKinds:
diff --git a/tests/compiler_tests.nim b/tests/compiler_tests.nim
new file mode 100644
index 0000000..4352cab
--- /dev/null
+++ b/tests/compiler_tests.nim
@@ -0,0 +1,18 @@
+include karaxprelude
+
+block:
+  type
+    TestEnum {.pure.} = enum
+      ValA, ValB
+
+  var e = TestEnum.ValA
+
+  proc renderDom(): VNode {.used.} =
+    result = buildHtml():
+      tdiv():
+        case e
+        of TestEnum.ValA:
+          tdiv: text "A"
+        of TestEnum.ValB:
+          tdiv: text "B"
+
diff --git a/tests/diffDomTests.nims b/tests/nim.cfg
similarity index 100%
rename from tests/diffDomTests.nims
rename to tests/nim.cfg
diff --git a/tests/tester.nim b/tests/tester.nim
index 5dc7426..482cad3 100644
--- a/tests/tester.nim
+++ b/tests/tester.nim
@@ -8,6 +8,7 @@ proc exec(cmd: string) =
 
 proc main =
   exec("nim js tests/diffDomTests.nim")
+  exec("nim js tests/compiler_tests.nim")
   exec("nim js examples/todoapp/todoapp.nim")
   exec("nim js examples/scrollapp/scrollapp.nim")
   exec("nim js examples/mediaplayer/playerapp.nim")

From d1e0e1367b417114ddd5ac44b149c069c43eb389 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 18 Jun 2017 18:01:48 +0200
Subject: [PATCH 066/264] wip

---
 experiments/example.nim   | 79 +++++++++++++++++++++++----------------
 experiments/refs/demo.nim | 18 +++++----
 src/karax.nim             |  4 ++
 src/vdom.nim              | 11 +++---
 4 files changed, 66 insertions(+), 46 deletions(-)

diff --git a/experiments/example.nim b/experiments/example.nim
index fd1e208..d48143d 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -1,57 +1,72 @@
 
-import vdom, vstyles, components, karax, karaxdsl, jdict, jstrutils, kdom
+import vdom, vstyles, karax, karaxdsl, jdict, jstrutils, kdom
+
+type
+  Car = ref object of VComponent
+    counter: int
+    cntdown: int
+    timer: TimeOut
+    list: seq[cstring]
+    change: bool
+    onclick: proc (ev: Event; n: VNode)
+
+const ticksUntilChange = 5
+
+proc car*(images: seq[cstring]): Car =
+  new(result)
+  result.list = images
+  result.cntdown = ticksUntilChange
+
+  proc docount() =
+    dec result.cntdown
+    if result.cntdown == 0:
+      result.counter = (result.counter + 1) mod result.list.len
+      result.cntdown = ticksUntilChange
+    else:
+      result.timer = setTimeout(docount, 30)
+    result.change = true
+    redraw()
+
+  result.onclick = proc (ev: Event; n: VNode) =
+    result.change = false
+    if result.timer != nil:
+      clearTimeout(result.timer)
+    result.timer = setTimeout(docount, 30)
+
+method changed(c: Car): bool = true
 
 var
   images: seq[cstring] = @[cstring"a", "b", "c", "d"]
 
-proc carousel*(key: VKey): VNode {.component.} =
-  state:
-    var counter: int = 0
-    var cntdown: int = 5
-    var timer: Timeout = nil
-
-  proc docount() =
-    cntdown = cntdown - 1
-    if cntdown == 0:
-      counter = (counter + 1) mod images.len
-      cntdown = 5
-    else:
-      timer = setTimeout(docount, 30)
-    redraw()
-
-  proc next(ev: Event; n: VNode) =
-    if timer != nil:
-      clearTimeout(timer)
-    timer = setTimeout(docount, 30)
-
+proc carousel*(): VNode =
+  let c = car(images)
   let col =
-    case counter
+    case c.counter
     of 0: cstring"#4d4d4d"
     of 1: cstring"#ff00ff"
     of 2: cstring"#00ffff"
     of 3: cstring"#ffff00"
     else: cstring"red"
-
-  result = buildHtml(tdiv(key=key)):
-    text images[counter]
-    button(onclick = next):
+  result = buildHtml(tdiv(nref = c)):
+    text images[c.counter]
+    button(onclick = c.onclick):
       text "Next"
     tdiv(style = style(StyleAttr.color, col)):
       text "This changes its color."
-    if cntdown != 5:
-      text &cntdown
+    if c.cntdown != ticksUntilChange:
+      text &c.cntdown
 
 proc createDom(): VNode =
   result = buildHtml(table):
     tr:
       td:
-        carousel(0)
+        carousel()
       td:
-        carousel(1)
+        carousel()
     tr:
       td:
-        carousel(2)
+        carousel()
       td:
-        carousel(3)
+        carousel()
 
 setRenderer createDom
diff --git a/experiments/refs/demo.nim b/experiments/refs/demo.nim
index 6ecc7db..a0db59f 100644
--- a/experiments/refs/demo.nim
+++ b/experiments/refs/demo.nim
@@ -2,7 +2,7 @@ include karaxprelude
 import future, sequtils
 
 type
-  CustomRef = ref object of VNodeRef
+  CustomRef = ref object of VComponent
 
 method onAttach(r: CustomRef) =
   kout(cstring"custom ref attached")
@@ -13,10 +13,10 @@ method onDetach(r: CustomRef) =
 var
   modelData = @[5, 2, 4]
 
-  refA = VNodeRef()
-  refB = VNodeRef()
+  refA = VComponent()
+  refB = VComponent()
   refC = CustomRef()
-  refSeq = newSeq[VNodeRef]()
+  refSeq = newSeq[VComponent]()
 
 proc onClick(ev: Event, n: VNode) =
   modelData.add(0)
@@ -25,11 +25,13 @@ proc showRefs() =
   kout(refA)
   kout(refB)
   kout(refC)
-  kout(refSeq.map(nref => nref.vnode))
+  for i in 0 ..< refSeq.len:
+    kout(refSeq[i].vnode)
+  #kout(refSeq.map(nref => nref.vnode))
 
-proc secureRefSlot(i: int): VNodeRef =
+proc secureRefSlot(i: int): VComponent =
   while refSeq.len <= i:
-    refSeq.add(VNodeRef())
+    refSeq.add(VComponent())
   result = refSeq[i]
 
 proc view(): VNode =
@@ -53,4 +55,4 @@ proc view(): VNode =
 proc renderer(): VNode =
   view()
 
-setRenderer(renderer, showRefs)
+setRenderer(renderer, "ROOT", showRefs)
diff --git a/src/karax.nim b/src/karax.nim
index 77cebdf..56357ef 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -150,6 +150,9 @@ proc eq(a, b: VNode; deep: bool): EqResult =
   if a.id != b.id: return different
   result = identical
   if a.key != b.key: return different
+  if a.nref != nil and changed(a.nref):
+    kout cstring"yes, change!"
+    return different
   if a.kind == VNodeKind.text:
     if a.text != b.text: return different
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
@@ -201,6 +204,7 @@ proc updateStyles(newNode, oldNode: VNode; deep: bool) =
 
 proc updateDom(newNode, oldNode: VNode) =
   newNode.dom = oldNode.dom
+  newNode.nref = oldNode.nref
   assert newNode.len == oldNode.len
   for i in 0 ..< newNode.len:
     updateDom(newNode[i], oldNode[i])
diff --git a/src/vdom.nim b/src/vdom.nim
index 9f9c642..e478da1 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -101,8 +101,7 @@ macro buildLookupTables(): untyped =
 buildLookupTables()
 
 type
-  VNodeRef* = ref object of RootObj
-    vnode*: VNode
+  VComponent* = ref object of RootObj
 
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
   VKey* = int
@@ -111,7 +110,7 @@ type
     kind*: VNodeKind
     key*: VKey
     id*, class*, text*: cstring
-    nref*: VNodeRef
+    nref*: VComponent
     kids: seq[VNode]
     # even index: key, odd index: value; done this way for memory efficiency:
     attrs: seq[cstring]
@@ -122,9 +121,9 @@ type
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
 
-method onAttach*(v: VNodeRef) {.base.} = discard
-method onDetach*(v: VNodeRef) {.base.} = discard
-method changed*(v: VNodeRef): bool {.base.} = false
+method onAttach*(v: VComponent) {.base.} = discard
+method onDetach*(v: VComponent) {.base.} = discard
+method changed*(v: VComponent): bool {.base.} = false
 
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v

From 4801b8d8c115fec6301a4307cd18a791290fedcc Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 19 Jun 2017 21:25:34 +0200
Subject: [PATCH 067/264] new component example works

---
 experiments/example.nim | 79 +++++++++++++++++++++++------------------
 src/karax.nim           | 61 ++++++++++++++++++++-----------
 src/karaxdsl.nim        |  2 +-
 src/vdom.nim            | 22 ++++++++----
 4 files changed, 100 insertions(+), 64 deletions(-)

diff --git a/experiments/example.nim b/experiments/example.nim
index d48143d..5653e22 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -2,59 +2,68 @@
 import vdom, vstyles, karax, karaxdsl, jdict, jstrutils, kdom
 
 type
-  Car = ref object of VComponent
+  Carousel = ref object of VComponent
     counter: int
-    cntdown: int
+    cntdown, myid: int
     timer: TimeOut
     list: seq[cstring]
     change: bool
-    onclick: proc (ev: Event; n: VNode)
 
 const ticksUntilChange = 5
 
-proc car*(images: seq[cstring]): Car =
-  new(result)
-  result.list = images
-  result.cntdown = ticksUntilChange
-
-  proc docount() =
-    dec result.cntdown
-    if result.cntdown == 0:
-      result.counter = (result.counter + 1) mod result.list.len
-      result.cntdown = ticksUntilChange
-    else:
-      result.timer = setTimeout(docount, 30)
-    result.change = true
-    redraw()
-
-  result.onclick = proc (ev: Event; n: VNode) =
-    result.change = false
-    if result.timer != nil:
-      clearTimeout(result.timer)
-    result.timer = setTimeout(docount, 30)
-
-method changed(c: Car): bool = true
-
 var
   images: seq[cstring] = @[cstring"a", "b", "c", "d"]
 
-proc carousel*(): VNode =
-  let c = car(images)
+proc render(x: VComponent): VNode =
+  let self = Carousel(x)
+
+  proc docount() =
+    dec self.cntdown
+    if self.cntdown == 0:
+      self.counter = (self.counter + 1) mod self.list.len
+      self.cntdown = ticksUntilChange
+    else:
+      self.timer = setTimeout(docount, 30)
+    self.change = true
+    redraw()
+
+  proc onclick(ev: Event; n: VNode) =
+    self.change = false
+    if self.timer != nil:
+      clearTimeout(self.timer)
+    self.timer = setTimeout(docount, 30)
+
   let col =
-    case c.counter
+    case self.counter
     of 0: cstring"#4d4d4d"
     of 1: cstring"#ff00ff"
     of 2: cstring"#00ffff"
     of 3: cstring"#ffff00"
     else: cstring"red"
-  result = buildHtml(tdiv(nref = c)):
-    text images[c.counter]
-    button(onclick = c.onclick):
+  result = buildHtml(tdiv()):
+    text self.list[self.counter]
+    button(onclick = onclick):
       text "Next"
     tdiv(style = style(StyleAttr.color, col)):
-      text "This changes its color."
-    if c.cntdown != ticksUntilChange:
-      text &c.cntdown
+      text "This changes its color." & &self.myid
+    if self.cntdown != ticksUntilChange:
+      text &self.cntdown
+
+var gid: int
+
+proc carousel(): Carousel =
+  result = Carousel(kind: VNodeKind.component, key: -1)
+  result.render = render
+  result.list = images
+  result.changed = proc (c: VComponent): bool =
+    let x = Carousel(c)
+    result = x.change
+  result.cntdown = ticksUntilChange
+  result.myid = gid
+  inc gid
+  #result.onAttach = proc (_: VComponent) =
+  #  result.cntdown = ticksUntilChange
+  #  kout cstring"attached!"
 
 proc createDom(): VNode =
   result = buildHtml(table):
diff --git a/src/karax.nim b/src/karax.nim
index 56357ef..f15326d 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -80,14 +80,11 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
 # --------------------- DOM diff -----------------------------------------
 
 template detach(n: VNode) =
-  if not n.nref.isNil():
-    n.nref.vnode = nil
-    n.nref.onDetach()
+  if n.kind == VNodeKind.component:
+    let x = VComponent(n)
+    if x.onDetach != nil: x.onDetach(x)
   n.dom = nil
 template attach(n: VNode) =
-  if not n.nref.isNil():
-    n.nref.vnode = n
-    n.nref.onAttach()
   n.dom = result
 
 proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
@@ -105,6 +102,13 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
     #n.key = result.key
     attach n
     return result
+  elif n.kind == VNodeKind.component:
+    let x = VComponent(n)
+    if x.onAttach != nil: x.onAttach(x)
+    assert x.render != nil
+    result = vnodeToDom(x.render(x), kxi)
+    attach n
+    return result
   else:
     result = document.createElement(toTag[n.kind])
     attach n
@@ -150,9 +154,6 @@ proc eq(a, b: VNode; deep: bool): EqResult =
   if a.id != b.id: return different
   result = identical
   if a.key != b.key: return different
-  if a.nref != nil and changed(a.nref):
-    kout cstring"yes, change!"
-    return different
   if a.kind == VNodeKind.text:
     if a.text != b.text: return different
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
@@ -160,6 +161,11 @@ proc eq(a, b: VNode; deep: bool): EqResult =
     if a.len != b.len: return different
     for i in 0..<a.len:
       if eq(a[i], b[i], deep) == different: return different
+  elif b.kind == VNodeKind.component:
+  #  let x = VComponent(b)
+  #  assert x.changed != nil
+  #  return if x.changed(x): different else: identical
+    return different
   elif deep:
     if a.len != b.len: return different
     for i in 0..<a.len:
@@ -204,13 +210,23 @@ proc updateStyles(newNode, oldNode: VNode; deep: bool) =
 
 proc updateDom(newNode, oldNode: VNode) =
   newNode.dom = oldNode.dom
-  newNode.nref = oldNode.nref
   assert newNode.len == oldNode.len
   for i in 0 ..< newNode.len:
     updateDom(newNode[i], oldNode[i])
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode;
-                   kxi: KaraxInstance) =
+                   kxi: KaraxInstance): bool =
+  if oldNode.kind == newNode.kind and oldNode.kind == VNodeKind.component:
+    let x = VComponent(oldNode)
+    assert x.changed != nil
+    if x.changed(x):
+      let n = vnodeToDom(x.render(x), kxi)
+      if parent == nil:
+        replaceById(kxi.rootId, n)
+      else:
+        parent.replaceChild(n, current)
+    return true
+
   let res = eq(newNode, oldNode, deep=false)
   if res == different:
     detach(oldNode)
@@ -241,32 +257,35 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
       else:
         var commonPrefix = 0
 
-        template eqAndUpdate(a, b: VNode; action: untyped) =
-          let r = eq(a, b, true)
+        template eqAndUpdate(a: VNode; i: int; b: VNode; action: untyped) =
+          let r = eq(a[i], b, true)
           case r
           of identical:
-            updateDom(a, b)
+            a[i] = b
+            #updateDom(a, b)
             action
           of different: break
           of similar:
-            updateDom(a, b)
-            updateStyles(a, b, true)
+            #updateDom(a, b)
+            a[i] = b
+            #updateStyles(a, b, true)
             action
 
         while commonPrefix < minLength:
-          eqAndUpdate(newNode[commonPrefix], oldNode[commonPrefix]):
+          eqAndUpdate(newNode, commonPrefix, oldNode[commonPrefix]):
             inc commonPrefix
 
         var oldPos = oldLength - 1
         var newPos = newLength - 1
         while oldPos >= commonPrefix and newPos >= commonPrefix:
-          eqAndUpdate(newNode[newPos], oldNode[oldPos]):
+          eqAndUpdate(newNode, newPos, oldNode[oldPos]):
             dec oldPos
             dec newPos
 
         var pos = min(oldPos, newPos) + 1
         for i in commonPrefix..pos-1:
-          updateElement(current, current.childNodes[i], newNode[i], oldNode[i], kxi)
+          if updateElement(current, current.childNodes[i], newNode[i], oldNode[i], kxi):
+            newNode[i] = oldNode[i]
 
         var nextChildPos = oldPos + 1
         while pos <= newPos:
@@ -297,7 +316,7 @@ proc dodraw(kxi: KaraxInstance) =
     replaceById(kxi.rootId, asdom)
   else:
     let olddom = document.getElementById(kxi.rootId)
-    updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
+    discard updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
     #assert same(newtree, document.getElementById("ROOT"))
     if someDirty:
       updateDirtyElements(nil, olddom, newtree, kxi)
@@ -363,7 +382,7 @@ proc setupErrorHandler*() =
   ## the error message is put into the console, otherwise `alert`
   ## is called.
   proc stackTraceAsCstring(): cstring = cstring(getStackTrace())
-  var onerror {.importc: "window.onerror".} =
+  var onerror {.importc: "window.onerror", used.} =
     proc (msg, url: cstring, line, col: int, error: cstring): bool =
       var x = cstring"Error: " & msg & "\n" & stackTraceAsCstring()
       kout(x)
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index 07a336f..a3558c8 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -4,7 +4,7 @@ from strutils import startsWith, toLowerAscii
 
 const
   StmtContext = ["kout", "inc", "echo", "dec", "!"]
-  SpecialAttrs = ["id", "class", "value", "key", "style", "nref"]
+  SpecialAttrs = ["id", "class", "value", "key", "style"]
 
 proc getName(n: NimNode): string =
   case n.kind
diff --git a/src/vdom.nim b/src/vdom.nim
index e478da1..f25b1a7 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -8,6 +8,7 @@ type
   VNodeKind* {.pure.} = enum
     text = "#text", int = "#int", bool = "#bool",
     vthunk = "#vthunk", dthunk = "#dthunk",
+    component = "#component",
 
     html, head, title, base, link, meta, style,
     script, noscript,
@@ -101,16 +102,13 @@ macro buildLookupTables(): untyped =
 buildLookupTables()
 
 type
-  VComponent* = ref object of RootObj
-
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
   VKey* = int
 
-  VNode* = ref object
+  VNode* = ref object of RootObj
     kind*: VNodeKind
     key*: VKey
     id*, class*, text*: cstring
-    nref*: VComponent
     kids: seq[VNode]
     # even index: key, odd index: value; done this way for memory efficiency:
     attrs: seq[cstring]
@@ -121,9 +119,11 @@ type
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
 
-method onAttach*(v: VComponent) {.base.} = discard
-method onDetach*(v: VComponent) {.base.} = discard
-method changed*(v: VComponent): bool {.base.} = false
+  VComponent* = ref object of VNode
+    render*: proc(self: VComponent): VNode
+    changed*: proc(self: VComponent): bool
+    onAttach*: proc(self: VComponent)
+    onDetach*: proc(self: VComponent)
 
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
@@ -143,6 +143,13 @@ proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, key: -1, kids: @args)
 
+proc vcomponent*(render: (proc(self: VComponent): VNode) not nil,
+                 changed: (proc(self: VComponent): bool) not nil,
+                 onAttach: proc(self: VComponent) = nil,
+                 onDetach: proc(self: VComponent) = nil): VNode =
+  result = VComponent(kind: VNodeKind.component, key: -1, render: render,
+                      changed: changed, onAttach: onAttach, onDetach: onDetach)
+
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
   if n.attrs.isNil:
     n.attrs = @[key, val]
@@ -160,6 +167,7 @@ proc getAttr*(n: VNode; key: cstring): cstring =
 
 proc len*(x: VNode): int = x.kids.len
 proc `[]`*(x: VNode; idx: int): VNode = x.kids[idx]
+proc `[]=`*(x: VNode; idx: int; y: VNode) = x.kids[idx] = y
 proc add*(parent, kid: VNode) = parent.kids.add kid
 proc newVNode*(kind: VNodeKind): VNode = VNode(kind: kind, key: -1)
 

From c86916e37df24647cee1f4b24f565cd539e4a02a Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 20 Jun 2017 00:14:54 +0200
Subject: [PATCH 068/264] stateful components now in a workable state; renamed
 .component macro to .compact which much better captures its meaning

---
 examples/mediaplayer/mediaplayer.nim |   4 +-
 examples/todoapp/todoapp.nim         |   8 +-
 experiments/example.nim              |  10 +-
 experiments/scrollapp.nim            |   2 +-
 src/compact.nim                      | 121 ++++++++++++++
 src/components.nim                   | 225 ---------------------------
 src/karax.nim                        |  83 +++++-----
 src/karaxdsl.nim                     |   2 +-
 src/karaxprelude.nim                 |   2 +-
 src/vdom.nim                         |  19 ++-
 10 files changed, 185 insertions(+), 291 deletions(-)
 create mode 100644 src/compact.nim
 delete mode 100644 src/components.nim

diff --git a/examples/mediaplayer/mediaplayer.nim b/examples/mediaplayer/mediaplayer.nim
index 890c078..3f970a8 100644
--- a/examples/mediaplayer/mediaplayer.nim
+++ b/examples/mediaplayer/mediaplayer.nim
@@ -1,5 +1,5 @@
 
-import karax, karaxdsl, vdom, kdom, components
+import karax, karaxdsl, vdom, kdom, compact
 
 const
   Play = 0
@@ -12,7 +12,7 @@ proc play(n: Node) {.importcpp.}
 proc pause(n: Node) {.importcpp.}
 proc `width=`(n: Node, w: int) {.importcpp: "#.width = #".}
 
-proc mplayer*(id, resource: cstring): VNode {.component.} =
+proc mplayer*(id, resource: cstring): VNode {.compact.} =
   proc handler(ev: Event; n: VNode) =
     let myVideo = document.getElementById(id)
     case n.key
diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 802bfc9..f74abc3 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -1,5 +1,5 @@
 
-import vdom, karax, karaxdsl, jstrutils, components, localstorage
+import vdom, karax, karaxdsl, jstrutils, compact, localstorage
 
 type
   Filter = enum
@@ -77,7 +77,7 @@ proc toChecked(checked: bool): cstring =
 proc selected(v: Filter): cstring =
   (if filter == v: cstring"selected" else: cstring(nil))
 
-proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.component.} =
+proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.compact.} =
   result = buildHtml(tr):
     li(class=toClass(completed)):
       if not selected:
@@ -92,7 +92,7 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.compon
           onblur = focusLost,
           onkeyupenter = editEntry, value = d, setFocus)
 
-proc makeFooter(entriesCount, completedCount: int): VNode {.component.} =
+proc makeFooter(entriesCount, completedCount: int): VNode {.compact.} =
   result = buildHtml(footer(class = "footer")):
     span(class = "todo-count"):
       strong:
@@ -111,7 +111,7 @@ proc makeFooter(entriesCount, completedCount: int): VNode {.component.} =
     button(class = "clear-completed", onclick = clearCompleted):
       text "Clear completed (" & &completedCount & ")"
 
-proc makeHeader(): VNode {.component.} =
+proc makeHeader(): VNode {.compact.} =
   result = buildHtml(header(class = "header")):
     h1:
       text "todos"
diff --git a/experiments/example.nim b/experiments/example.nim
index 5653e22..fa1e739 100644
--- a/experiments/example.nim
+++ b/experiments/example.nim
@@ -51,13 +51,13 @@ proc render(x: VComponent): VNode =
 
 var gid: int
 
+proc changed(c: VComponent): bool =
+  let x = Carousel(c)
+  result = x.change
+
 proc carousel(): Carousel =
-  result = Carousel(kind: VNodeKind.component, key: -1)
-  result.render = render
+  result = newComponent(Carousel, render, changed)
   result.list = images
-  result.changed = proc (c: VComponent): bool =
-    let x = Carousel(c)
-    result = x.change
   result.cntdown = ticksUntilChange
   result.myid = gid
   inc gid
diff --git a/experiments/scrollapp.nim b/experiments/scrollapp.nim
index f9c8ccb..86a802f 100644
--- a/experiments/scrollapp.nim
+++ b/experiments/scrollapp.nim
@@ -1,5 +1,5 @@
 
-import vdom, karax, karaxdsl, jdict, jstrutils, components
+import vdom, karax, karaxdsl, jdict, jstrutils, compact
 
 type
   Filter = enum
diff --git a/src/compact.nim b/src/compact.nim
new file mode 100644
index 0000000..51de228
--- /dev/null
+++ b/src/compact.nim
@@ -0,0 +1,121 @@
+## Components in Karax are built by the ``.component`` macro annotation.
+
+import macros, jdict, kdom, vdom, tables, strutils
+
+var
+  vcomponents* = newJDict[cstring, proc(args: seq[VNode]): VNode]()
+  dcomponents* = newJDict[cstring, proc(args: seq[VNode]): Node]()
+
+type
+  ComponentKind* {.pure.} = enum
+    None,
+    Tag,
+    VNode,
+    Node
+
+var
+  allcomponents {.compileTime.} = initTable[string, ComponentKind]()
+
+proc isComponent*(x: string): ComponentKind {.compileTime.} =
+  allcomponents.getOrDefault(x)
+
+proc addTags() {.compileTime.} =
+  let x = (bindSym"VNodeKind").getTypeImpl
+  expectKind(x, nnkEnumTy)
+  for i in ord(VNodeKind.html)..ord(VNodeKind.high):
+    # +1 because of empty node at the start of the enum AST:
+    let tag = $x[i+1]
+    allcomponents[tag] = ComponentKind.Tag
+
+static:
+  addTags()
+
+proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
+  #let t = symbolicType.getTypeImpl
+  let t = repr(symbolicType)
+  case t
+  of "cstring":
+    result = quote do:
+      args[`index`].text
+  of "int", "VKey":
+    result = quote do:
+      args[`index`].intValue
+  of "bool":
+    result = quote do:
+      args[`index`].intValue != 0
+  elif t.endsWith"Kind":
+    result = quote do:
+      `symbolicType`(args[`index`].intValue)
+  else:
+    # just pass it along, maybe there is some conversion for it:
+    result = quote do:
+      args[`index`]
+
+proc newname*(n: NimNode): NimNode =
+  if n.kind == nnkPostfix:
+    n[1] = newname(n[1])
+    result = n
+  elif n.kind == nnkSym:
+    result = ident($n.symbol)
+  else:
+    result = n
+
+macro compact*(prc: untyped): untyped =
+  ## A 'compact' tree generation proc is one that only depends on its
+  ## inputs and should be stored as a compact virtual DOM tree and
+  ## only expanded on demand (when its inputs changed).
+  var n = prc.copyNimNode
+  for i in 0..6: n.add prc[i].copyNimTree
+  expectKind(n, nnkProcDef)
+  if n[0].kind == nnkEmpty:
+    error("please pass a non anonymous proc", n[0])
+  let name = n[0]
+  let params = params(n)
+  let rettype = repr params[0]
+  var isvirtual = ComponentKind.None
+  if rettype == "VNode":
+    isvirtual = ComponentKind.VNode
+  elif rettype == "Node":
+    isvirtual = ComponentKind.Node
+  else:
+    error "component must return VNode or Node", params[0]
+  let realName = if name.kind == nnkPostfix: name[1] else: name
+  let nn = $realName
+  n[0] = ident("inner" & nn)
+  var unpackCall = newCall(n[0])
+  var counter = 0
+  for i in 1.. <params.len:
+    let param = params[i]
+    let L = param.len
+    let typ = param[L-2]
+    for j in 0 .. L-3:
+      unpackCall.add unpack(typ, counter)
+      inc counter
+
+  template vwrapper(pname, unpackCall) {.dirty.} =
+    proc pname(args: seq[VNode]): VNode =
+      unpackCall
+
+  template dwrapper(pname, unpackCall) {.dirty.} =
+    proc pname(args: seq[VNode]): Node =
+      unpackCall
+
+  template vregister(key, val) =
+    bind jdict.`[]=`
+    `[]=`(vcomponents, cstring(key), val)
+
+  template dregister(key, val) =
+    bind jdict.`[]=`
+    `[]=`(dcomponents, cstring(key), val)
+
+  result = newTree(nnkStmtList, n)
+
+  if isvirtual == ComponentKind.VNode:
+    result.add getAst(vwrapper(newname name, unpackCall))
+    result.add getAst(vregister(newLit(nn), realName))
+  else:
+    result.add getAst(dwrapper(newname name, unpackCall))
+    result.add getAst(dregister(newLit(nn), realName))
+  allcomponents[nn] = isvirtual
+  when defined(debugKaraxDsl):
+    echo repr result
diff --git a/src/components.nim b/src/components.nim
deleted file mode 100644
index 555de77..0000000
--- a/src/components.nim
+++ /dev/null
@@ -1,225 +0,0 @@
-## Components in Karax are built by the ``.component`` macro annotation.
-
-import macros, jdict, kdom, vdom, tables, strutils
-
-type
-  StateDict*[V] = ref object
-    defaultValue*: V
-
-proc get[V](d: StateDict[V], k: VKey): V {.importcpp: "#[#]".}
-proc put[V](d: StateDict[V], k: VKey, v: V) {.importcpp: "#[#] = #".}
-
-proc contains*[V](d: StateDict[V], k: VKey): bool {.importcpp: "#.hasOwnProperty(#)".}
-proc del*[V](d: StateDict[V], k: VKey) {.importcpp: "delete #[#]".}
-
-proc newStateDict*[V](): StateDict[V] {.importcpp: "{@}".}
-
-var
-  dirty = newStateDict[bool]()
-  someDirty*: bool
-
-proc markDirty*(key: VKey) =
-  dirty.put(key, true)
-  someDirty = true
-
-proc unmarkDirty*(key: VKey) = dirty.del key
-proc isDirty*(key: VKey): bool = dirty.contains(key)
-
-proc `[]`*[V](d: StateDict[V], k: VKey): V =
-  if d.contains(k): result = d.get(k)
-  else: result = d.defaultValue
-
-proc `[]=`*[V](d: StateDict[V], k: VKey, v: V) =
-  d.put(k, v)
-  markDirty(k)
-
-var
-  vcomponents* = newJDict[cstring, proc(args: seq[VNode]): VNode]()
-  dcomponents* = newJDict[cstring, proc(args: seq[VNode]): Node]()
-
-type
-  ComponentKind* {.pure.} = enum
-    None,
-    Tag,
-    VNode,
-    Node
-
-var
-  allcomponents {.compileTime.} = initTable[string, ComponentKind]()
-
-proc isComponent*(x: string): ComponentKind {.compileTime.} =
-  allcomponents.getOrDefault(x)
-
-proc addTags() {.compileTime.} =
-  let x = (bindSym"VNodeKind").getTypeImpl
-  expectKind(x, nnkEnumTy)
-  for i in ord(VNodeKind.html)..ord(VNodeKind.high):
-    # +1 because of empty node at the start of the enum AST:
-    let tag = $x[i+1]
-    allcomponents[tag] = ComponentKind.Tag
-
-static:
-  addTags()
-
-
-template toState(x): untyped = newIdentNode("state" & x)
-proc accessState(sv: NimNode): NimNode {.compileTime.} =
-  newTree(nnkBracketExpr, sv, newIdentNode("key"))
-
-proc stateDecl(n: NimNode; names: TableRef[string, bool]; decl: NimNode) =
-  case n.kind
-  of nnkVarSection, nnkLetSection:
-    for c in n:
-      expectKind c, nnkIdentDefs
-      let typ = c[^2]
-      let val = c[^1]
-      let usedType = if typ.kind != nnkEmpty: typ else: newCall("type", val)
-      if usedType.kind == nnkEmpty:
-        error("cannot determine the variable's type", c)
-      for i in 0 .. c.len-3:
-        let v = $c[i]
-        let sv = toState v
-        decl.add(quote do:
-          var `sv` = newStateDict[`usedType`]())
-        if val.kind != nnkEmpty:
-          decl.add newTree(nnkAsgn, newDotExpr(sv, newIdentNode"defaultValue"),
-                           val)
-        else:
-          error("component state must have a primitive initializer")
-        names[v] = true
-  of nnkStmtList, nnkStmtListExpr:
-    for x in n: stateDecl(x, names, decl)
-  of nnkDo:
-    stateDecl(n.body, names, decl)
-  of nnkCommentStmt: discard
-  else:
-    error("invalid 'state' declaration", n)
-
-proc doState(n: NimNode; names: TableRef[string, bool];
-             decl: NimNode): NimNode =
-  case n.kind
-  of nnkCallKinds:
-    # handle 'state' declaration and remove it from the AST:
-    if n.len == 2 and repr(n[0]) == "state":
-      stateDecl(n[1], names, decl)
-      return newTree(nnkNone)
-  of nnkSym, nnkIdent:
-    let v = $n
-    if v in names:
-      let sv = toState v
-      return accessState(sv)
-  else: discard
-  result = copyNimNode(n)
-  for i in 0..<n.len:
-    let x = doState(n[i], names, decl)
-    if x.kind != nnkNone: result.add x
-
-proc compBody(body, decl: NimNode): NimNode =
-  var names = newTable[string, bool]()
-  result = doState(body, names, decl)
-
-proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
-  #let t = symbolicType.getTypeImpl
-  let t = repr(symbolicType)
-  case t
-  of "cstring":
-    result = quote do:
-      args[`index`].text
-  of "int", "VKey":
-    result = quote do:
-      args[`index`].intValue
-  of "bool":
-    result = quote do:
-      args[`index`].intValue != 0
-  elif t.endsWith"Kind":
-    result = quote do:
-      `symbolicType`(args[`index`].intValue)
-  else:
-    # just pass it along, maybe there is some conversion for it:
-    result = quote do:
-      args[`index`]
-
-proc newname*(n: NimNode): NimNode =
-  if n.kind == nnkPostfix:
-    n[1] = newname(n[1])
-    result = n
-  elif n.kind == nnkSym:
-    result = ident($n.symbol)
-  else:
-    result = n
-
-macro component*(prc: untyped): untyped =
-  ## A component takes an proc body and registers it as a component to the
-  ## virtual dom.
-  var n = prc.copyNimNode
-  for i in 0..6: n.add prc[i].copyNimTree
-  expectKind(n, nnkProcDef)
-  if n[0].kind == nnkEmpty:
-    error("please pass a non anonymous proc", n[0])
-  let name = n[0]
-  let params = params(n)
-  let rettype = repr params[0]
-  var isvirtual = ComponentKind.None
-  if rettype == "VNode":
-    isvirtual = ComponentKind.VNode
-  elif rettype == "Node":
-    isvirtual = ComponentKind.Node
-  else:
-    error "component must return VNode or Node", params[0]
-  let realName = if name.kind == nnkPostfix: name[1] else: name
-  let nn = $realName
-  n[0] = ident("inner" & nn)
-  var unpackCall = newCall(n[0])
-  var counter = 0
-  for i in 1.. <params.len:
-    let param = params[i]
-    let L = param.len
-    let typ = param[L-2]
-    for j in 0 .. L-3:
-      unpackCall.add unpack(typ, counter)
-      inc counter
-
-  let decl = newTree(nnkStmtList)
-  let newBody = compBody(n, decl)
-
-  template vwrapper(pname, unpackCall) {.dirty.} =
-    proc pname(args: seq[VNode]): VNode =
-      unpackCall
-
-  template dwrapper(pname, unpackCall) {.dirty.} =
-    proc pname(args: seq[VNode]): Node =
-      unpackCall
-
-  template vregister(key, val) =
-    bind jdict.`[]=`
-    `[]=`(vcomponents, cstring(key), val)
-
-  template dregister(key, val) =
-    bind jdict.`[]=`
-    `[]=`(dcomponents, cstring(key), val)
-
-  result = newTree(nnkStmtList, decl, newBody)
-
-  if isvirtual == ComponentKind.VNode:
-    result.add getAst(vwrapper(newname name, unpackCall))
-    result.add getAst(vregister(newLit(nn), realName))
-  else:
-    result.add getAst(dwrapper(newname name, unpackCall))
-    result.add getAst(dregister(newLit(nn), realName))
-  allcomponents[nn] = isvirtual
-  when defined(debugKaraxDsl):
-    echo repr result
-
-when isMainModule:
-  proc public*(key: VKey; x, y: int, b: bool; s: cstring): VNode {.component.} =
-    state:
-      var foo = 89
-
-    proc callback() =
-      foo = 78
-
-    let cc = callback
-
-  when false:
-    proc private(x, y: int, b: bool; s: cstring): VNode {.component.} =
-      discard
diff --git a/src/karax.nim b/src/karax.nim
index f15326d..42be93f 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -1,6 +1,6 @@
 ## Karax -- Single page applications for Nim.
 
-import kdom, vdom, jstrutils, components, jdict, vstyles
+import kdom, vdom, jstrutils, compact, jdict, vstyles
 
 export kdom.Event
 
@@ -82,7 +82,7 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
 template detach(n: VNode) =
   if n.kind == VNodeKind.component:
     let x = VComponent(n)
-    if x.onDetach != nil: x.onDetach(x)
+    if x.onDetachImpl != nil: x.onDetachImpl(x)
   n.dom = nil
 template attach(n: VNode) =
   n.dom = result
@@ -104,9 +104,9 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
     return result
   elif n.kind == VNodeKind.component:
     let x = VComponent(n)
-    if x.onAttach != nil: x.onAttach(x)
-    assert x.render != nil
-    result = vnodeToDom(x.render(x), kxi)
+    if x.onAttachImpl != nil: x.onAttachImpl(x)
+    assert x.renderImpl != nil
+    result = vnodeToDom(x.renderImpl(x), kxi)
     attach n
     return result
   else:
@@ -147,7 +147,7 @@ proc replaceById(id: cstring; newTree: Node) =
 
 type
   EqResult = enum
-    different, similar, identical
+    changed, different, similar, identical
 
 proc eq(a, b: VNode; deep: bool): EqResult =
   if a.kind != b.kind: return different
@@ -162,15 +162,16 @@ proc eq(a, b: VNode; deep: bool): EqResult =
     for i in 0..<a.len:
       if eq(a[i], b[i], deep) == different: return different
   elif b.kind == VNodeKind.component:
-  #  let x = VComponent(b)
-  #  assert x.changed != nil
-  #  return if x.changed(x): different else: identical
-    return different
+    # different component names mean different components:
+    if a.text != b.text: return different
+    let x = VComponent(b)
+    assert x.changedImpl != nil
+    return if x.changedImpl(x): changed else: identical
   elif deep:
     if a.len != b.len: return different
     for i in 0..<a.len:
       let res = eq(a[i], b[i], deep)
-      if res == different: return different
+      if res <= different: return different
       elif res == similar:
         # but continue, maybe something makes it 'different'!
         result = similar
@@ -181,21 +182,22 @@ proc eq(a, b: VNode; deep: bool): EqResult =
   # Do not test event listeners here!
   return result
 
-proc updateDirtyElements(parent, current: Node, newNode: VNode,
-                         kxi: KaraxInstance) =
-  if newNode.key >= 0 and isDirty(newNode.key):
-    unmarkDirty(newNode.key)
-    let n = vnodeToDom(newNode, kxi)
-    if parent == nil:
-      replaceById(kxi.rootId, n)
-    else:
-      parent.replaceChild(n, current)
-  elif newNode.kind != VNodeKind.text and newNode.kind != VNodeKind.vthunk and
-       newNode.kind != VNodeKind.dthunk:
-    for i in 0..newNode.len-1:
-      updateDirtyElements(current, current[i], newNode[i], kxi)
-      # leave early if we know there cannot be anything left to do:
-      #if dirtyCount <= 0: return
+when false:
+  proc updateDirtyElements(parent, current: Node, newNode: VNode,
+                          kxi: KaraxInstance) =
+    if newNode.key >= 0 and isDirty(newNode.key):
+      unmarkDirty(newNode.key)
+      let n = vnodeToDom(newNode, kxi)
+      if parent == nil:
+        replaceById(kxi.rootId, n)
+      else:
+        parent.replaceChild(n, current)
+    elif newNode.kind != VNodeKind.text and newNode.kind != VNodeKind.vthunk and
+        newNode.kind != VNodeKind.dthunk:
+      for i in 0..newNode.len-1:
+        updateDirtyElements(current, current[i], newNode[i], kxi)
+        # leave early if we know there cannot be anything left to do:
+        #if dirtyCount <= 0: return
 
 proc updateStyles(newNode, oldNode: VNode; deep: bool) =
   # we keep the oldNode, but take over the style from the new node:
@@ -216,21 +218,17 @@ proc updateDom(newNode, oldNode: VNode) =
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode;
                    kxi: KaraxInstance): bool =
-  if oldNode.kind == newNode.kind and oldNode.kind == VNodeKind.component:
-    let x = VComponent(oldNode)
-    assert x.changed != nil
-    if x.changed(x):
-      let n = vnodeToDom(x.render(x), kxi)
-      if parent == nil:
-        replaceById(kxi.rootId, n)
-      else:
-        parent.replaceChild(n, current)
-    return true
-
   let res = eq(newNode, oldNode, deep=false)
-  if res == different:
-    detach(oldNode)
-    let n = vnodeToDom(newNode, kxi)
+  if res <= different:
+    var n: Node
+    if res == changed:
+      assert oldNode.kind == VNodeKind.component
+      let x = VComponent(oldNode)
+      n = vnodeToDom(x.renderImpl(x), kxi)
+      result = true
+    else:
+      detach(oldNode)
+      n = vnodeToDom(newNode, kxi)
     if parent == nil:
       replaceById(kxi.rootId, n)
     else:
@@ -264,7 +262,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
             a[i] = b
             #updateDom(a, b)
             action
-          of different: break
+          of different, changed: break
           of similar:
             #updateDom(a, b)
             a[i] = b
@@ -318,9 +316,6 @@ proc dodraw(kxi: KaraxInstance) =
     let olddom = document.getElementById(kxi.rootId)
     discard updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
     #assert same(newtree, document.getElementById("ROOT"))
-    if someDirty:
-      updateDirtyElements(nil, olddom, newtree, kxi)
-      someDirty = false
     kxi.currentTree = newtree
 
   if not kxi.postRenderCallback.isNil:
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index a3558c8..e46ee62 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -1,5 +1,5 @@
 
-import macros, karax, vdom, components
+import macros, karax, vdom, compact
 from strutils import startsWith, toLowerAscii
 
 const
diff --git a/src/karaxprelude.nim b/src/karaxprelude.nim
index 285730a..ed9349c 100644
--- a/src/karaxprelude.nim
+++ b/src/karaxprelude.nim
@@ -1,3 +1,3 @@
 ## Include file that contains the common imports for the Karax framework.
 
-import karax, karaxdsl, vdom, components
+import karax, karaxdsl, vdom, compact
diff --git a/src/vdom.nim b/src/vdom.nim
index f25b1a7..8c19ea2 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -120,10 +120,10 @@ type
                ## is not part of the virtual DOM anymore.
 
   VComponent* = ref object of VNode
-    render*: proc(self: VComponent): VNode
-    changed*: proc(self: VComponent): bool
-    onAttach*: proc(self: VComponent)
-    onDetach*: proc(self: VComponent)
+    renderImpl*: proc(self: VComponent): VNode
+    changedImpl*: proc(self: VComponent): bool
+    onAttachImpl*: proc(self: VComponent)
+    onDetachImpl*: proc(self: VComponent)
 
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
@@ -143,12 +143,15 @@ proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, key: -1, kids: @args)
 
-proc vcomponent*(render: (proc(self: VComponent): VNode) not nil,
+template newComponent*[T](t: typeDesc[T];
+                 render: (proc(self: VComponent): VNode) not nil,
                  changed: (proc(self: VComponent): bool) not nil,
                  onAttach: proc(self: VComponent) = nil,
-                 onDetach: proc(self: VComponent) = nil): VNode =
-  result = VComponent(kind: VNodeKind.component, key: -1, render: render,
-                      changed: changed, onAttach: onAttach, onDetach: onDetach)
+                 onDetach: proc(self: VComponent) = nil): T =
+  ## Use this template to create new components.
+  T(kind: VNodeKind.component, key: -1,
+    text: cstring(astToStr(t)), renderImpl: render,
+    changedImpl: changed, onAttachImpl: onAttach, onDetachImpl: onDetach)
 
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
   if n.attrs.isNil:

From e58cbb78d20c94490a86337b5316a69ce0831884 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 21 Jun 2017 08:21:05 +0200
Subject: [PATCH 069/264] fixes jstrutils.isInt

---
 src/jstrutils.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/jstrutils.nim b/src/jstrutils.nim
index 0be4076..f0f22c0 100644
--- a/src/jstrutils.nim
+++ b/src/jstrutils.nim
@@ -19,7 +19,7 @@ proc `&`*(s: cstring): cstring {.importcpp: "(#)", nodecl.}
 
 proc isInt*(s: cstring): bool {.asmNoStackFrame.} =
   asm """
-    return s.match(/^[0-9]+$/);
+    return `s`.match(/^[0-9]+$/);
   """
 
 proc parseInt*(s: cstring): int {.importcpp: "parseInt(#, 10)", nodecl.}

From d9648be60c21da7536359935f4daa802e8a3393d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 21 Jun 2017 17:20:31 +0200
Subject: [PATCH 070/264] sane markDirty() mechanism for components

---
 experiments/carousel.html                   | 15 ++++++++++++
 experiments/{example.nim => carousel.nim}   | 11 +++------
 experiments/{example.nims => carousel.nims} |  0
 experiments/example.html                    | 15 ------------
 src/karax.nim                               |  1 +
 src/vdom.nim                                | 26 +++++++++++++++++----
 6 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 experiments/carousel.html
 rename experiments/{example.nim => carousel.nim} (89%)
 rename experiments/{example.nims => carousel.nims} (100%)
 delete mode 100644 experiments/example.html

diff --git a/experiments/carousel.html b/experiments/carousel.html
new file mode 100644
index 0000000..979dd38
--- /dev/null
+++ b/experiments/carousel.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Carousel app</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/carousel.js"></script>
+
+</body>
+</html>
diff --git a/experiments/example.nim b/experiments/carousel.nim
similarity index 89%
rename from experiments/example.nim
rename to experiments/carousel.nim
index fa1e739..a820be7 100644
--- a/experiments/example.nim
+++ b/experiments/carousel.nim
@@ -1,3 +1,4 @@
+## This demo shows how you can develop your own stateful components with Karax.
 
 import vdom, vstyles, karax, karaxdsl, jdict, jstrutils, kdom
 
@@ -7,7 +8,6 @@ type
     cntdown, myid: int
     timer: TimeOut
     list: seq[cstring]
-    change: bool
 
 const ticksUntilChange = 5
 
@@ -24,11 +24,10 @@ proc render(x: VComponent): VNode =
       self.cntdown = ticksUntilChange
     else:
       self.timer = setTimeout(docount, 30)
-    self.change = true
+    markDirty(self)
     redraw()
 
   proc onclick(ev: Event; n: VNode) =
-    self.change = false
     if self.timer != nil:
       clearTimeout(self.timer)
     self.timer = setTimeout(docount, 30)
@@ -51,12 +50,8 @@ proc render(x: VComponent): VNode =
 
 var gid: int
 
-proc changed(c: VComponent): bool =
-  let x = Carousel(c)
-  result = x.change
-
 proc carousel(): Carousel =
-  result = newComponent(Carousel, render, changed)
+  result = newComponent(Carousel, render)
   result.list = images
   result.cntdown = ticksUntilChange
   result.myid = gid
diff --git a/experiments/example.nims b/experiments/carousel.nims
similarity index 100%
rename from experiments/example.nims
rename to experiments/carousel.nims
diff --git a/experiments/example.html b/experiments/example.html
deleted file mode 100644
index 2303d95..0000000
--- a/experiments/example.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-<head>
-  <title>Todo app</title>
-</head>
-
-<body id="body">
-
-<div id="ROOT" />
-
-<script type="text/javascript" src="nimcache/example.js"></script>
-
-</body>
-</html>
diff --git a/src/karax.nim b/src/karax.nim
index 42be93f..57c5162 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -225,6 +225,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
       assert oldNode.kind == VNodeKind.component
       let x = VComponent(oldNode)
       n = vnodeToDom(x.renderImpl(x), kxi)
+      x.updatedImpl(x)
       result = true
     else:
       detach(oldNode)
diff --git a/src/vdom.nim b/src/vdom.nim
index 8c19ea2..4edcd4e 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -119,11 +119,16 @@ type
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
 
-  VComponent* = ref object of VNode
+  VComponent* = ref object of VNode ## The abstract class for every karax component.
     renderImpl*: proc(self: VComponent): VNode
     changedImpl*: proc(self: VComponent): bool
+    updatedImpl*: proc(self: VComponent)
     onAttachImpl*: proc(self: VComponent)
     onDetachImpl*: proc(self: VComponent)
+    version*: int         ## Update this to trigger a redraw by karax. Usually you
+                          ## should call 'markDirty' instead which is an alias for
+                          ## 'inc version'.
+    renderedVersion*: int ## Do not touch. Used by karax.
 
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
@@ -143,15 +148,28 @@ proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, key: -1, kids: @args)
 
+proc defaultChangedImpl*(v: VComponent): bool =
+  ## The default implementation of 'changed'.
+  result = v.version != v.renderedVersion
+
+proc defaultUpdatedImpl*(v: VComponent) =
+  v.renderedVersion = v.version
+
 template newComponent*[T](t: typeDesc[T];
                  render: (proc(self: VComponent): VNode) not nil,
-                 changed: (proc(self: VComponent): bool) not nil,
                  onAttach: proc(self: VComponent) = nil,
-                 onDetach: proc(self: VComponent) = nil): T =
+                 onDetach: proc(self: VComponent) = nil,
+                 changed: (proc(self: VComponent): bool) = defaultChangedImpl,
+                 updated: proc(self: VComponent) = defaultUpdatedImpl): T =
   ## Use this template to create new components.
   T(kind: VNodeKind.component, key: -1,
     text: cstring(astToStr(t)), renderImpl: render,
-    changedImpl: changed, onAttachImpl: onAttach, onDetachImpl: onDetach)
+    changedImpl: changed, updatedImpl: updated,
+    onAttachImpl: onAttach, onDetachImpl: onDetach)
+
+template markDirty*(c: VComponent) =
+  ## mark the component as dirty so that it is re-rendered.
+  inc c.version
 
 proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
   if n.attrs.isNil:

From a535ad709ba566767287b5af2a92613c30b14517 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 21 Jun 2017 17:57:02 +0200
Subject: [PATCH 071/264] carousel is now a real example

---
 {experiments => examples/carousel}/carousel.html |  0
 {experiments => examples/carousel}/carousel.nim  | 11 ++---------
 examples/carousel/carousel.nims                  |  1 +
 experiments/carousel.nims                        |  1 -
 tests/tester.nim                                 |  1 +
 5 files changed, 4 insertions(+), 10 deletions(-)
 rename {experiments => examples/carousel}/carousel.html (100%)
 rename {experiments => examples/carousel}/carousel.nim (86%)
 create mode 100644 examples/carousel/carousel.nims
 delete mode 100644 experiments/carousel.nims

diff --git a/experiments/carousel.html b/examples/carousel/carousel.html
similarity index 100%
rename from experiments/carousel.html
rename to examples/carousel/carousel.html
diff --git a/experiments/carousel.nim b/examples/carousel/carousel.nim
similarity index 86%
rename from experiments/carousel.nim
rename to examples/carousel/carousel.nim
index a820be7..c2db56c 100644
--- a/experiments/carousel.nim
+++ b/examples/carousel/carousel.nim
@@ -5,7 +5,7 @@ import vdom, vstyles, karax, karaxdsl, jdict, jstrutils, kdom
 type
   Carousel = ref object of VComponent
     counter: int
-    cntdown, myid: int
+    cntdown: int
     timer: TimeOut
     list: seq[cstring]
 
@@ -44,21 +44,14 @@ proc render(x: VComponent): VNode =
     button(onclick = onclick):
       text "Next"
     tdiv(style = style(StyleAttr.color, col)):
-      text "This changes its color." & &self.myid
+      text "This changes its color."
     if self.cntdown != ticksUntilChange:
       text &self.cntdown
 
-var gid: int
-
 proc carousel(): Carousel =
   result = newComponent(Carousel, render)
   result.list = images
   result.cntdown = ticksUntilChange
-  result.myid = gid
-  inc gid
-  #result.onAttach = proc (_: VComponent) =
-  #  result.cntdown = ticksUntilChange
-  #  kout cstring"attached!"
 
 proc createDom(): VNode =
   result = buildHtml(table):
diff --git a/examples/carousel/carousel.nims b/examples/carousel/carousel.nims
new file mode 100644
index 0000000..1451fc0
--- /dev/null
+++ b/examples/carousel/carousel.nims
@@ -0,0 +1 @@
+--path: "../../src"
diff --git a/experiments/carousel.nims b/experiments/carousel.nims
deleted file mode 100644
index 6b5771c..0000000
--- a/experiments/carousel.nims
+++ /dev/null
@@ -1 +0,0 @@
---path: "../src"
diff --git a/tests/tester.nim b/tests/tester.nim
index 5dc7426..e2d7cfd 100644
--- a/tests/tester.nim
+++ b/tests/tester.nim
@@ -11,5 +11,6 @@ proc main =
   exec("nim js examples/todoapp/todoapp.nim")
   exec("nim js examples/scrollapp/scrollapp.nim")
   exec("nim js examples/mediaplayer/playerapp.nim")
+  exec("nim js examples/carousel/carousel.nim")
 
 main()

From 8dbc1da708a7e48433f335e4b76e02a30e47e638 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 21 Jun 2017 18:20:57 +0200
Subject: [PATCH 072/264] fixes #28

---
 src/jstrutils.nim | 1 +
 src/vstyles.nim   | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/src/jstrutils.nim b/src/jstrutils.nim
index 63a9ae8..507e7a6 100644
--- a/src/jstrutils.nim
+++ b/src/jstrutils.nim
@@ -14,6 +14,7 @@ proc `&`*(a, b: cstring): cstring {.importcpp: "(# + #)", nodecl.}
 proc toCstr*(s: int): cstring {.importcpp: "((#)+'')", nodecl.}
 proc `&`*(s: int): cstring {.importcpp: "((#)+'')", nodecl.}
 proc `&`*(s: bool): cstring {.importcpp: "((#)+'')", nodecl.}
+proc `&`*(s: float): cstring {.importcpp: "((#)+'')", nodecl.}
 
 proc `&`*(s: cstring): cstring {.importcpp: "(#)", nodecl.}
 
diff --git a/src/vstyles.nim b/src/vstyles.nim
index 649c322..161c207 100644
--- a/src/vstyles.nim
+++ b/src/vstyles.nim
@@ -255,3 +255,11 @@ proc applyStyle*(n: Node; s: VStyle) =
   n.style = Style()
   for x in s.mask:
     n.style.setStyle(toStyleAttrName[x], s.attrs[x])
+
+import jstrutils
+
+proc rgb*(r, g, b: range[0..255]): cstring =
+  cstring"rgb(" & &r & cstring", " & &g & cstring", " & &b & cstring")"
+
+proc rgba*(r, g, b: range[0..255], alpha: float): cstring =
+  cstring"rgb(" & &r & cstring", " & &g & cstring", " & &b & cstring", " & &alpha & cstring")"

From 67ee246f40b6c32f96d6bd208addd6ca5a4aa663 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 21 Jun 2017 20:11:41 +0200
Subject: [PATCH 073/264] fixes new rgba proc

---
 experiments/Untitled Diagram.xml | 1 -
 src/vstyles.nim                  | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)
 delete mode 100644 experiments/Untitled Diagram.xml

diff --git a/experiments/Untitled Diagram.xml b/experiments/Untitled Diagram.xml
deleted file mode 100644
index a3019f8..0000000
--- a/experiments/Untitled Diagram.xml	
+++ /dev/null
@@ -1 +0,0 @@
-<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" version="6.5.10" editor="www.draw.io" type="github"><diagram name="Page-1">5VhNc9owEP01PjYjS8bGx4bQ9tDOZIZDk6OwN7YaYTFCfPXXV7ZkbGHDEEJgMuXASE+rlfR230rgkdFs813Sef5LpMA9jNKNRx48jKOBr79LYGuAIB4aIJMsNZDfABP2FyyILLpkKSwcQyUEV2zugokoCkiUg1Epxdo1exHcXXVOM+gAk4TyLvqbpSo36BCHDf4DWJbXK/thbEamNHnNpFgWdj0Pk5fqY4ZntPZlD7rIaSrWLYiMPTKSQijTmm1GwEtqa9rMvG8HRnf7llCoUyZEdhtqWx8dUs2E7QqpcpGJgvJxg95Xx4PSAdK9XM24bvq6CRumnkr4Dg9s97keKpTcmrFB3X22Hv6AUlubA3SphIaahX8KMbc+XhjnI8GFrDaqeYUwSTS+UFK8QmskjeIpKj2bw5UnOkiPhRZiKRNrhW3CUZmBtSK70OiMBzEDvX1tIoFTxVaud2pzL9vZNfzrhg1BfziGHxOO6Eg4AuwE5Au6Q35UI48gmT4EyM8TquBKobJLryhf7hWvVvTWOVMwmdNqv2tdKt0InUvTCqSCzXGiuhTUE4jdp63Nse2um0Ln1+UpbxW5EL2ftJqiFmseDrle4T5lK93MVHVIA03lPqL999j9D1Nny4XSxBX6Yug6mcLJ6+kLR+picfmTHalbhShOKlR1+9m9J57sjObSqMbOrUXDBPpFdj9EEYrOrkXk8rWomvpVSrptGcwFK9Si5fmxBFr6jl1948HeE2DPfifKfnvdMDtoBL47ykmaJ91C6WE9C5FPUS7DPXbwNcul36HoHF0hR1fYEZbvCgu/RVnn6SS43fMq6L2zy1z08adIRkJumY1Rz+X9jvT82DSLu2nmh1fKM//4O/5k3R79HRUH2NUuIuQNrPa+7y9G9bUUHR9UdPDm1/gF9BmgG76tw6PV7XacDK9Xs3S3+e/EvFWa/6fI+B8=</diagram></mxfile>
\ No newline at end of file
diff --git a/src/vstyles.nim b/src/vstyles.nim
index 161c207..c5a0931 100644
--- a/src/vstyles.nim
+++ b/src/vstyles.nim
@@ -262,4 +262,4 @@ proc rgb*(r, g, b: range[0..255]): cstring =
   cstring"rgb(" & &r & cstring", " & &g & cstring", " & &b & cstring")"
 
 proc rgba*(r, g, b: range[0..255], alpha: float): cstring =
-  cstring"rgb(" & &r & cstring", " & &g & cstring", " & &b & cstring", " & &alpha & cstring")"
+  cstring"rgba(" & &r & cstring", " & &g & cstring", " & &b & cstring", " & &alpha & cstring")"

From 8a2b893d5ed31bf01faba73de9fbd877e99f120d Mon Sep 17 00:00:00 2001
From: Pavel Nuzhdin <pnzhdin@gmail.com>
Date: Thu, 22 Jun 2017 01:09:52 +0700
Subject: [PATCH 074/264] Added onfocus (#29)

---
 src/vdom.nim | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vdom.nim b/src/vdom.nim
index 4edcd4e..be4fb5d 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -47,6 +47,7 @@ type
     onkeyup, ## A key was released.
     onkeydown, ## A key is pressed.
     onkeypressed, # A key was pressed.
+    onfocus, ## An element got the focus.
     onblur, ## An element lost the focus.
     onchange, ## The selected value of an element was changed.
     onscroll, ## The user scrolled within an element.

From bd2d8e7d3f248306ab890859f4c08fc03ba1b632 Mon Sep 17 00:00:00 2001
From: Pavel Nuzhdin <pnzhdin@gmail.com>
Date: Thu, 22 Jun 2017 01:11:54 +0700
Subject: [PATCH 075/264] Added pointer-events style (#30)

---
 src/kdom.nim    | 1 +
 src/vstyles.nim | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/kdom.nim b/src/kdom.nim
index f933b87..607d882 100644
--- a/src/kdom.nim
+++ b/src/kdom.nim
@@ -258,6 +258,7 @@ type
     paddingTop*: cstring
     pageBreakAfter*: cstring
     pageBreakBefore*: cstring
+    pointerEvents*: cstring
     position*: cstring
     right*: cstring
     scrollbar3dLightColor*: cstring
diff --git a/src/vstyles.nim b/src/vstyles.nim
index c5a0931..252dda4 100644
--- a/src/vstyles.nim
+++ b/src/vstyles.nim
@@ -150,6 +150,7 @@ type
     pageBreakInside
     perspective
     perspectiveOrigin
+    pointerEvents
     position
     quotes
     resize

From 051e9985b14496e8951edd59402e01049956daa4 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 21 Jun 2017 21:08:20 +0200
Subject: [PATCH 076/264] added 'karun' tool for convenient testing of karax
 apps

---
 tools/karun.nim | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 tools/karun.nim

diff --git a/tools/karun.nim b/tools/karun.nim
new file mode 100644
index 0000000..dd498ea
--- /dev/null
+++ b/tools/karun.nim
@@ -0,0 +1,41 @@
+## Simple tool to quickly run Karax applications. Generates the HTML
+## required to run a Karax app and opens it in a browser.
+
+import os, strutils, parseopt, browsers
+
+const
+  html = """
+<!DOCTYPE html>
+<html>
+<head><title>$1</title></head>
+<body id="body">
+<div id="ROOT" />
+<script type="text/javascript" src="$1.js"></script>
+</body>
+</html>
+"""
+
+proc exec(cmd: string) =
+  if os.execShellCmd(cmd) != 0:
+    quit "External command failed: " & cmd
+
+proc main =
+  var op = initOptParser()
+  let rest = op.cmdLineRest
+  var file = ""
+  while true:
+    op.next()
+    case op.kind
+    of cmdLongOption, cmdShortOption: discard
+    of cmdArgument: file = op.key
+    of cmdEnd: break
+
+  if file.len == 0: quit "filename expected"
+  let name = file.splitFile.name
+  createDir("nimcache")
+  exec("nim js --out:nimcache/" & name & ".js " & rest)
+  let dest = "nimcache" / name & ".html"
+  writeFile(dest, html % name)
+  openDefaultBrowser(dest)
+
+main()

From c8030bc1853ba38e1d1a152f4a696bc78fba0953 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 22 Jun 2017 09:17:19 +0200
Subject: [PATCH 077/264] diff algorithm also diffs components' expansions

---
 src/karax.nim | 27 ++++++++++++++++++++-------
 src/vdom.nim  |  2 ++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 57c5162..788cd61 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -177,8 +177,7 @@ proc eq(a, b: VNode; deep: bool): EqResult =
         result = similar
   if not sameAttrs(a, b): return different
   if a.class != b.class: return different
-  # XXX Fixme: smart diffing still is broken for complex apps:
-  if a.style != b.style: return different # similar
+  if a.style != b.style: return similar
   # Do not test event listeners here!
   return result
 
@@ -206,7 +205,10 @@ proc updateStyles(newNode, oldNode: VNode; deep: bool) =
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
   if deep:
-    assert newNode.len == oldNode.len
+    if newNode.len != oldNode.len:
+      kout cstring"argh ", newNode.len, " ", oldNode.len
+      kout newNode, oldNode
+    doAssert newNode.len == oldNode.len
     for i in 0 ..< newNode.len:
       updateStyles(newNode[i], oldNode[i], deep)
 
@@ -224,8 +226,18 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
     if res == changed:
       assert oldNode.kind == VNodeKind.component
       let x = VComponent(oldNode)
-      n = vnodeToDom(x.renderImpl(x), kxi)
+      let oldExpanded = x.expanded
+      x.expanded = x.renderImpl(x)
       x.updatedImpl(x)
+      if oldExpanded == nil:
+        n = vnodeToDom(x.expanded, kxi)
+      else:
+        if updateElement(parent, current, x.expanded, oldExpanded, kxi):
+          n = x.expanded.dom
+          doAssert n != nil, "expanded.dom is nil"
+        else:
+          n = oldExpanded.dom
+          doAssert n != nil, "old expanded.dom is nil"
       result = true
     else:
       detach(oldNode)
@@ -234,10 +246,10 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
       replaceById(kxi.rootId, n)
     else:
       parent.replaceChild(n, current)
+  elif res == similar:
+    updateStyles(newNode, oldNode, false)
   else:
-    if res == similar: updateStyles(newNode, oldNode, false)
     newNode.dom = oldNode.dom
-
     if newNode.kind != VNodeKind.text:
       let newLength = newNode.len
       var oldLength = oldNode.len
@@ -266,8 +278,8 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
           of different, changed: break
           of similar:
             #updateDom(a, b)
+            updateStyles(a[i], b, true)
             a[i] = b
-            #updateStyles(a, b, true)
             action
 
         while commonPrefix < minLength:
@@ -299,6 +311,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
 
         for i in pos..oldPos:
           detach(oldNode[i])
+          doAssert pos < current.childNodes.len
           current.removeChild(current.childNodes[pos])
 
 when false:
diff --git a/src/vdom.nim b/src/vdom.nim
index 4edcd4e..c11d532 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -129,6 +129,8 @@ type
                           ## should call 'markDirty' instead which is an alias for
                           ## 'inc version'.
     renderedVersion*: int ## Do not touch. Used by karax.
+    expanded*: VNode      ## Do not touch. Used by karax. The VDOM the component
+                          ## expanded to.
 
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v

From 79270c3423a4e690f74c92f55a37c49310bc9c1b Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 22 Jun 2017 09:34:44 +0200
Subject: [PATCH 078/264] fixes #31

---
 src/karax.nim | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 788cd61..c03ddbe 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -219,11 +219,11 @@ proc updateDom(newNode, oldNode: VNode) =
     updateDom(newNode[i], oldNode[i])
 
 proc updateElement(parent, current: Node, newNode, oldNode: VNode;
-                   kxi: KaraxInstance): bool =
-  let res = eq(newNode, oldNode, deep=false)
-  if res <= different:
+                   kxi: KaraxInstance): EqResult =
+  result = eq(newNode, oldNode, deep=false)
+  if result <= different:
     var n: Node
-    if res == changed:
+    if result == changed:
       assert oldNode.kind == VNodeKind.component
       let x = VComponent(oldNode)
       let oldExpanded = x.expanded
@@ -232,13 +232,13 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
       if oldExpanded == nil:
         n = vnodeToDom(x.expanded, kxi)
       else:
-        if updateElement(parent, current, x.expanded, oldExpanded, kxi):
-          n = x.expanded.dom
-          doAssert n != nil, "expanded.dom is nil"
-        else:
+        if updateElement(parent, current, x.expanded, oldExpanded, kxi) >= similar:
+          x.expanded = oldExpanded
           n = oldExpanded.dom
           doAssert n != nil, "old expanded.dom is nil"
-      result = true
+        else:
+          n = x.expanded.dom
+          doAssert n != nil, "expanded.dom is nil"
     else:
       detach(oldNode)
       n = vnodeToDom(newNode, kxi)
@@ -246,7 +246,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
       replaceById(kxi.rootId, n)
     else:
       parent.replaceChild(n, current)
-  elif res == similar:
+  elif result == similar:
     updateStyles(newNode, oldNode, false)
   else:
     newNode.dom = oldNode.dom
@@ -295,7 +295,8 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
 
         var pos = min(oldPos, newPos) + 1
         for i in commonPrefix..pos-1:
-          if updateElement(current, current.childNodes[i], newNode[i], oldNode[i], kxi):
+          if updateElement(current, current.childNodes[i],
+                           newNode[i], oldNode[i], kxi) >= similar:
             newNode[i] = oldNode[i]
 
         var nextChildPos = oldPos + 1

From 9aa3ba545ded60775e473529731444a6d3b69acb Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 22 Jun 2017 21:21:54 +0200
Subject: [PATCH 079/264] wip

---
 src/karax.nim   | 46 ++++++++++++++++++++++++++++++++-------
 src/vdom.nim    |  1 +
 src/vstyles.nim | 12 ++++++++--
 tests/blur.nim  | 58 +++++++++++++++++++++++++++++++++++++++++++++++++
 tools/karun.nim | 14 +++++++++---
 5 files changed, 118 insertions(+), 13 deletions(-)
 create mode 100644 tests/blur.nim

diff --git a/src/karax.nim b/src/karax.nim
index c03ddbe..01e5c0f 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -106,7 +106,10 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
     let x = VComponent(n)
     if x.onAttachImpl != nil: x.onAttachImpl(x)
     assert x.renderImpl != nil
-    result = vnodeToDom(x.renderImpl(x), kxi)
+    if x.expanded == nil:
+      x.expanded = x.renderImpl(x)
+      x.updatedImpl(x)
+    result = vnodeToDom(x.expanded, kxi)
     attach n
     return result
   else:
@@ -133,7 +136,9 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
   if not n.style.isNil: applyStyle(result, n.style)
 
 proc same(n: VNode, e: Node): bool =
-  if toTag[n.kind] == e.nodename:
+  if n.kind == VNodeKind.component:
+    result = same(VComponent(n).expanded, e)
+  elif toTag[n.kind] == e.nodename:
     result = true
     if n.kind != VNodeKind.text:
       if e.len != n.len: return false
@@ -177,7 +182,9 @@ proc eq(a, b: VNode; deep: bool): EqResult =
         result = similar
   if not sameAttrs(a, b): return different
   if a.class != b.class: return different
-  if a.style != b.style: return similar
+  if not eq(a.style, b.style):
+    kout cstring"yes, styles differ"
+    return similar
   # Do not test event listeners here!
   return result
 
@@ -218,11 +225,22 @@ proc updateDom(newNode, oldNode: VNode) =
   for i in 0 ..< newNode.len:
     updateDom(newNode[i], oldNode[i])
 
+proc printV(n: VNode; depth: cstring = "") =
+  kout depth, cstring($n.kind), n.myid, cstring"key ", n.key
+  #for k, v in pairs(n.style):
+  #  kout depth, "style: ", k, v
+  if n.kind == VNodeKind.component:
+    let nn = VComponent(n)
+    if nn.expanded != nil: printV(nn.expanded, ">>" & depth)
+  for i in 0 ..< n.len:
+    printV(n[i], depth & "  ")
+
 proc updateElement(parent, current: Node, newNode, oldNode: VNode;
                    kxi: KaraxInstance): EqResult =
   result = eq(newNode, oldNode, deep=false)
   if result <= different:
     var n: Node
+    var state = 0
     if result == changed:
       assert oldNode.kind == VNodeKind.component
       let x = VComponent(oldNode)
@@ -231,7 +249,11 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
       x.updatedImpl(x)
       if oldExpanded == nil:
         n = vnodeToDom(x.expanded, kxi)
+        state = 1
       else:
+        kout cstring"now comparing components"
+        printV(oldExpanded)
+        printV(x.expanded)
         if updateElement(parent, current, x.expanded, oldExpanded, kxi) >= similar:
           x.expanded = oldExpanded
           n = oldExpanded.dom
@@ -239,12 +261,16 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
         else:
           n = x.expanded.dom
           doAssert n != nil, "expanded.dom is nil"
+          state = 2
+          return
     else:
       detach(oldNode)
       n = vnodeToDom(newNode, kxi)
+      state = 3
     if parent == nil:
       replaceById(kxi.rootId, n)
     else:
+      kout cstring"state ", state, parent, current
       parent.replaceChild(n, current)
   elif result == similar:
     updateStyles(newNode, oldNode, false)
@@ -295,8 +321,9 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
 
         var pos = min(oldPos, newPos) + 1
         for i in commonPrefix..pos-1:
-          if updateElement(current, current.childNodes[i],
-                           newNode[i], oldNode[i], kxi) >= similar:
+          let res = updateElement(current, current.childNodes[i],
+                           newNode[i], oldNode[i], kxi)
+          if res != different:
             newNode[i] = oldNode[i]
 
         var nextChildPos = oldPos + 1
@@ -323,6 +350,9 @@ proc dodraw(kxi: KaraxInstance) =
   let newtree = kxi.renderer()
   newtree.id = kxi.rootId
   kxi.toFocus = nil
+  #if kxi.currentTree != nil:
+  #  kout cstring"same? ", same(kxi.currentTree, document.getElementById(kxi.rootId))
+  kout cstring"dodraw -----------------------------"
   if kxi.currentTree == nil:
     kxi.currentTree = newtree
     let asdom = vnodeToDom(kxi.currentTree, kxi)
@@ -330,8 +360,8 @@ proc dodraw(kxi: KaraxInstance) =
   else:
     let olddom = document.getElementById(kxi.rootId)
     discard updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
-    #assert same(newtree, document.getElementById("ROOT"))
     kxi.currentTree = newtree
+  #kout cstring"same? ", same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
     kxi.postRenderCallback()
@@ -348,10 +378,10 @@ proc redraw*(kxi: KaraxInstance = kxi) =
     if drawTimeout != nil:
       clearTimeout(drawTimeout)
     drawTimeout = setTimeout(dodraw, 30)
-  elif true:
+  elif false:
     reqFrame(proc () = kxi.dodraw)
   else:
-    dodraw()
+    dodraw(kxi)
 
 proc init(ev: Event) =
   reqFrame(proc () = kxi.dodraw)
diff --git a/src/vdom.nim b/src/vdom.nim
index f022b7f..16b0f36 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -119,6 +119,7 @@ type
     style*: VStyle ## the style that should be applied to the virtual node.
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
+    myid*: int
 
   VComponent* = ref object of VNode ## The abstract class for every karax component.
     renderImpl*: proc(self: VComponent): VNode
diff --git a/src/vstyles.nim b/src/vstyles.nim
index 252dda4..a6f1996 100644
--- a/src/vstyles.nim
+++ b/src/vstyles.nim
@@ -213,7 +213,9 @@ type
     attrs: array[StyleAttr, cstring]
     mask: set[StyleAttr]
 
-proc `==`*(a, b: VStyle): bool =
+proc kout[T](x: T) {.importc: "console.log", varargs.}
+
+proc eq*(a, b: VStyle): bool =
   if a.isNil:
     if b.isNil: return true
     else: return false
@@ -247,9 +249,10 @@ proc setStyle(d: Style; key, val: cstring) {.importcpp: "#[#] = #".}
 
 proc merge*(a, b: VStyle): VStyle =
   ## merges two styles. ``b`` takes precedence over ``a``.
-  result = VStyle(mask: a.mask + b.mask)
+  result = VStyle(mask: {})
   for i in low(StyleAttr)..high(StyleAttr):
     result.attrs[i] = if b.attrs[i].isNil: a.attrs[i] else: b.attrs[i]
+    if result.attrs[i] != nil: incl(result.mask, i)
 
 proc applyStyle*(n: Node; s: VStyle) =
   ## apply the style to the real DOM node ``n``.
@@ -257,6 +260,11 @@ proc applyStyle*(n: Node; s: VStyle) =
   for x in s.mask:
     n.style.setStyle(toStyleAttrName[x], s.attrs[x])
 
+iterator pairs*(v: VStyle): (cstring, cstring) =
+  if v != nil:
+    for x in v.mask:
+      yield (toStyleAttrName[x], v.attrs[x])
+
 import jstrutils
 
 proc rgb*(r, g, b: range[0..255]): cstring =
diff --git a/tests/blur.nim b/tests/blur.nim
new file mode 100644
index 0000000..062c47f
--- /dev/null
+++ b/tests/blur.nim
@@ -0,0 +1,58 @@
+import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
+
+type TextInput* = ref object of VComponent
+  value: cstring
+  isActive: bool
+
+var renderId: int
+proc render(x: VComponent): VNode =
+  let self = TextInput(x)
+
+  let style = style(
+    (StyleAttr.position, cstring"relative"),
+    (StyleAttr.paddingLeft, cstring"10px"),
+    (StyleAttr.paddingRight, cstring"5px"),
+    (StyleAttr.height, cstring"30px"),
+    (StyleAttr.lineHeight, cstring"30px"),
+    (StyleAttr.border, cstring"solid 1px " & (if self.isActive: cstring"red" else: cstring"black")),
+    (StyleAttr.fontSize, cstring"12px"),
+    (StyleAttr.fontWeight, cstring"600")
+  ).merge(self.style)
+
+  let inputStyle = style.merge(style(
+    (StyleAttr.color, cstring"inherit"),
+    (StyleAttr.fontSize, cstring"inherit"),
+    (StyleAttr.fontWeight, cstring"inherit"),
+    (StyleAttr.fontFamily, cstring"inherit"),
+    (StyleAttr.position, cstring"absolute"),
+    (StyleAttr.top, cstring"0"),
+    (StyleAttr.left, cstring"0"),
+    (StyleAttr.height, cstring"100%"),
+    (StyleAttr.width, cstring"100%"),
+    (StyleAttr.border, cstring"none"),
+    (StyleAttr.backgroundColor, cstring"transparent"),
+  ))
+
+  proc flip(ev: Event; n: VNode) =
+    self.isActive = not self.isActive
+    markDirty(self)
+
+  kout cstring"rendering ", self.myid
+  inc renderId
+  result = buildHtml(tdiv(style=style, key=renderId)):
+    input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip,
+          key=renderId)
+
+var gid = 0
+proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring""): TextInput =
+  result = newComponent(TextInput, render)
+  result.style = style
+  result.value = value
+  inc gid
+  result.myid = gid
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    newTextInput(value=cstring"test")
+
+setRenderer createDom
diff --git a/tools/karun.nim b/tools/karun.nim
index dd498ea..a67b9f5 100644
--- a/tools/karun.nim
+++ b/tools/karun.nim
@@ -21,12 +21,20 @@ proc exec(cmd: string) =
 
 proc main =
   var op = initOptParser()
-  let rest = op.cmdLineRest
+  var rest = op.cmdLineRest
   var file = ""
+  var run = false
   while true:
     op.next()
     case op.kind
-    of cmdLongOption, cmdShortOption: discard
+    of cmdLongOption:
+      if op.key == "run":
+        run = true
+        rest = rest.replace("--run ")
+    of cmdShortOption:
+      if op.key == "r":
+        run = true
+        rest = rest.replace("-r ")
     of cmdArgument: file = op.key
     of cmdEnd: break
 
@@ -36,6 +44,6 @@ proc main =
   exec("nim js --out:nimcache/" & name & ".js " & rest)
   let dest = "nimcache" / name & ".html"
   writeFile(dest, html % name)
-  openDefaultBrowser(dest)
+  if run: openDefaultBrowser(dest)
 
 main()

From cd74cd9d4e31589c21b7012da9894ce2598d93d3 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 23 Jun 2017 11:09:22 +0200
Subject: [PATCH 080/264] another attempt to fix bug #31

---
 src/karax.nim  | 39 ++++++++++++++++++++++++---------------
 tests/blur.nim |  5 ++---
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 01e5c0f..07d4fd5 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -182,9 +182,7 @@ proc eq(a, b: VNode; deep: bool): EqResult =
         result = similar
   if not sameAttrs(a, b): return different
   if a.class != b.class: return different
-  if not eq(a.style, b.style):
-    kout cstring"yes, styles differ"
-    return similar
+  if not eq(a.style, b.style): return similar
   # Do not test event listeners here!
   return result
 
@@ -212,9 +210,6 @@ proc updateStyles(newNode, oldNode: VNode; deep: bool) =
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
   if deep:
-    if newNode.len != oldNode.len:
-      kout cstring"argh ", newNode.len, " ", oldNode.len
-      kout newNode, oldNode
     doAssert newNode.len == oldNode.len
     for i in 0 ..< newNode.len:
       updateStyles(newNode[i], oldNode[i], deep)
@@ -232,6 +227,8 @@ proc printV(n: VNode; depth: cstring = "") =
   if n.kind == VNodeKind.component:
     let nn = VComponent(n)
     if nn.expanded != nil: printV(nn.expanded, ">>" & depth)
+  elif n.kind == VNodeKind.text:
+    kout depth, n.text
   for i in 0 ..< n.len:
     printV(n[i], depth & "  ")
 
@@ -251,17 +248,22 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
         n = vnodeToDom(x.expanded, kxi)
         state = 1
       else:
-        kout cstring"now comparing components"
-        printV(oldExpanded)
-        printV(x.expanded)
-        if updateElement(parent, current, x.expanded, oldExpanded, kxi) >= similar:
+        let res = updateElement(parent, current, x.expanded, oldExpanded, kxi)
+        if res != different:
           x.expanded = oldExpanded
           n = oldExpanded.dom
           doAssert n != nil, "old expanded.dom is nil"
+          #kout cstring"produced old DOM: ", cstring($res)
+          #printV(oldExpanded)
+          #printV(x.expanded)
+          return
         else:
           n = x.expanded.dom
           doAssert n != nil, "expanded.dom is nil"
           state = 2
+          #kout cstring"produced new DOM:"
+          #printV(oldExpanded)
+          #printV(x.expanded)
           return
     else:
       detach(oldNode)
@@ -270,8 +272,9 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
     if parent == nil:
       replaceById(kxi.rootId, n)
     else:
-      kout cstring"state ", state, parent, current
-      parent.replaceChild(n, current)
+      #kout cstring"state ", state, parent, current
+      if n != current:
+        parent.replaceChild(n, current)
   elif result == similar:
     updateStyles(newNode, oldNode, false)
   else:
@@ -301,7 +304,9 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
             a[i] = b
             #updateDom(a, b)
             action
-          of different, changed: break
+          of different, changed:
+            if result != different: result = r
+            break
           of similar:
             #updateDom(a, b)
             updateStyles(a[i], b, true)
@@ -325,6 +330,8 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
                            newNode[i], oldNode[i], kxi)
           if res != different:
             newNode[i] = oldNode[i]
+          else:
+            result = different
 
         var nextChildPos = oldPos + 1
         while pos <= newPos:
@@ -336,11 +343,13 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode;
           inc oldLength
           inc pos
           inc nextChildPos
+          result = different
 
         for i in pos..oldPos:
           detach(oldNode[i])
           doAssert pos < current.childNodes.len
           current.removeChild(current.childNodes[pos])
+          result = different
 
 when false:
   var drawTimeout: Timeout
@@ -352,7 +361,7 @@ proc dodraw(kxi: KaraxInstance) =
   kxi.toFocus = nil
   #if kxi.currentTree != nil:
   #  kout cstring"same? ", same(kxi.currentTree, document.getElementById(kxi.rootId))
-  kout cstring"dodraw -----------------------------"
+  #kout cstring"dodraw -----------------------------"
   if kxi.currentTree == nil:
     kxi.currentTree = newtree
     let asdom = vnodeToDom(kxi.currentTree, kxi)
@@ -361,7 +370,7 @@ proc dodraw(kxi: KaraxInstance) =
     let olddom = document.getElementById(kxi.rootId)
     discard updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
     kxi.currentTree = newtree
-  #kout cstring"same? ", same(kxi.currentTree, document.getElementById(kxi.rootId))
+  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
     kxi.postRenderCallback()
diff --git a/tests/blur.nim b/tests/blur.nim
index 062c47f..74b8ba1 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -39,9 +39,8 @@ proc render(x: VComponent): VNode =
 
   kout cstring"rendering ", self.myid
   inc renderId
-  result = buildHtml(tdiv(style=style, key=renderId)):
-    input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip,
-          key=renderId)
+  result = buildHtml(tdiv(style=style)):
+    input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip)
 
 var gid = 0
 proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring""): TextInput =

From 64bc900456d292a282bd0f70fa1f693a149bd8e6 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 23 Jun 2017 21:03:31 +0200
Subject: [PATCH 081/264] rewritten diff algorithm

---
 src/karax.nim      | 147 +++++++++++++++++++++++++++++++++++++++++++--
 src/kdom.nim       |  94 +++++++++++++++++++++++++----
 src/vdom.nim       |  58 +++++++++---------
 tests/difftest.nim |  37 ++++++++++++
 tests/lists.nim    |  18 ++++++
 5 files changed, 310 insertions(+), 44 deletions(-)
 create mode 100644 tests/difftest.nim
 create mode 100644 tests/lists.nim

diff --git a/src/karax.nim b/src/karax.nim
index 07d4fd5..cdb68f7 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -141,9 +141,13 @@ proc same(n: VNode, e: Node): bool =
   elif toTag[n.kind] == e.nodename:
     result = true
     if n.kind != VNodeKind.text:
-      if e.len != n.len: return false
+      if e.len != n.len:
+        kout e.len, n.len
+        return false
       for i in 0 ..< n.len:
         if not same(n[i], e[i]): return false
+  else:
+    kout toTag[n.kind], e.nodename
 
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
@@ -232,6 +236,134 @@ proc printV(n: VNode; depth: cstring = "") =
   for i in 0 ..< n.len:
     printV(n[i], depth & "  ")
 
+type
+  PatchKind = enum
+    pkReplace, pkRemove, pkAppend, pkInsertBefore
+  Patch = object
+    k: PatchKind
+    parent, current, n: Node
+
+proc addPatch(patches: var seq[Patch]; k: PatchKind; parent, current, n: Node) =
+  patches.add(Patch(k: k, parent: parent, current: current, n: n))
+
+proc apply(patches: seq[Patch]; kxi: KaraxInstance) =
+  for p in patches:
+    case p.k
+    of pkReplace:
+      if p.parent == nil:
+        replaceById(kxi.rootId, p.n)
+      else:
+        if p.n != p.current:
+          p.parent.replaceChild(p.n, p.current)
+    of pkRemove:
+      p.parent.removeChild(p.current)
+    of pkAppend:
+      p.parent.appendChild(p.n)
+    of pkInsertBefore:
+      p.parent.insertBefore(p.n, p.current)
+
+proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch];
+          kxi: KaraxInstance): EqResult =
+  result = eq(newNode, oldNode, deep=false)
+  if result <= different:
+    var n: Node
+    if result == changed:
+      assert oldNode.kind == VNodeKind.component
+      let x = VComponent(oldNode)
+      let oldExpanded = x.expanded
+      x.expanded = x.renderImpl(x)
+      x.updatedImpl(x)
+      if oldExpanded == nil:
+        n = vnodeToDom(x.expanded, kxi)
+      else:
+        let res = diff(parent, current, x.expanded, oldExpanded, patches, kxi)
+        if res != different:
+          x.expanded = oldExpanded
+          n = oldExpanded.dom
+          doAssert n != nil, "old expanded.dom is nil"
+        else:
+          n = x.expanded.dom
+          doAssert n != nil, "expanded.dom is nil"
+        return
+    else:
+      detach(oldNode)
+      n = vnodeToDom(newNode, kxi)
+    patches.addPatch(pkReplace, parent, current, n)
+  elif result == similar:
+    updateStyles(newNode, oldNode, false)
+  else:
+    newNode.dom = oldNode.dom
+    let newLength = newNode.len
+    var oldLength = oldNode.len
+    let minLength = min(newLength, oldLength)
+
+    assert oldNode.kind == newNode.kind
+    var commonPrefix = 0
+
+    template eqAndUpdate(a: VNode; i: int; b: VNode; j: int; info, action: untyped) =
+      let oldLen = patches.len
+      if oldNode.kind notin {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
+        assert current != nil
+        assert current.childNodes[j] != nil, $info
+        assert oldNode.len == current.len
+
+      let r = if oldNode.kind in {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
+                diff(parent, current, a[i], b[j], patches, kxi)
+              else:
+                diff(current, current.childNodes[j], a[i], b[j], patches, kxi)
+      case r
+      of identical, changed:
+        a[i] = b[j]
+        action
+      of different:
+        # undo what 'diff' would have done:
+        setLen(patches, oldLen)
+        if result != different: result = r
+        break
+      of similar:
+        updateStyles(a[i], b[j], true)
+        a[i] = b[j]
+        action
+
+    while commonPrefix < minLength:
+      eqAndUpdate(newNode, commonPrefix, oldNode, commonPrefix, cstring"prefix"):
+        inc commonPrefix
+
+    var oldPos = oldLength - 1
+    var newPos = newLength - 1
+    while oldPos >= commonPrefix and newPos >= commonPrefix:
+      eqAndUpdate(newNode, newPos, oldNode, oldPos, cstring"suffix"):
+        dec oldPos
+        dec newPos
+
+    var pos = min(oldPos, newPos) + 1
+    for i in commonPrefix..pos-1:
+      let res = diff(current, current.childNodes[i],
+                        newNode[i], oldNode[i], patches, kxi)
+      if res != different:
+        newNode[i] = oldNode[i]
+      else:
+        result = different
+
+    var nextChildPos = oldPos + 1
+    if nextChildPos == oldLength:
+      for i in pos..newPos:
+        patches.addPatch(pkAppend, current, nil, vnodeToDom(newNode[i], kxi))
+        result = different
+    else:
+      let before = current.childNodes[nextChildPos]
+      for i in pos..newPos:
+        patches.addPatch(pkInsertBefore, current, before,
+                        vnodeToDom(newNode[i], kxi))
+        result = different
+    # XXX call 'attach' here?
+    for i in pos..oldPos:
+      detach(oldNode[i])
+      doAssert i < current.childNodes.len
+      patches.addPatch(pkRemove, current, current.childNodes[i], nil)
+      result = different
+
+
 proc updateElement(parent, current: Node, newNode, oldNode: VNode;
                    kxi: KaraxInstance): EqResult =
   result = eq(newNode, oldNode, deep=false)
@@ -368,9 +500,14 @@ proc dodraw(kxi: KaraxInstance) =
     replaceById(kxi.rootId, asdom)
   else:
     let olddom = document.getElementById(kxi.rootId)
-    discard updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
+    when false:
+      discard updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
+    else:
+      var patches: seq[Patch] = @[]
+      discard diff(nil, olddom, newtree, kxi.currentTree, patches, kxi)
+      patches.apply(kxi)
     kxi.currentTree = newtree
-  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
+  #doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
     kxi.postRenderCallback()
@@ -387,7 +524,7 @@ proc redraw*(kxi: KaraxInstance = kxi) =
     if drawTimeout != nil:
       clearTimeout(drawTimeout)
     drawTimeout = setTimeout(dodraw, 30)
-  elif false:
+  elif true:
     reqFrame(proc () = kxi.dodraw)
   else:
     dodraw(kxi)
@@ -442,7 +579,7 @@ proc prepend(parent, kid: Element) =
   parent.insertBefore(kid, parent.firstChild)
 
 proc loadScript*(jsfilename: cstring; kxi: KaraxInstance = kxi) =
-  let body = getElementById("body")
+  let body = document.getElementById("body")
   let s = document.createElement("script")
   s.setAttr "type", "text/javascript"
   s.setAttr "src", jsfilename
diff --git a/src/kdom.nim b/src/kdom.nim
index 607d882..6799976 100644
--- a/src/kdom.nim
+++ b/src/kdom.nim
@@ -94,6 +94,8 @@ type
     previousSibling*: Node
     innerHTML*: cstring
     style*: Style
+    when defined(nodejs):
+      id*: cstring
 
   Document* = ref DocumentObj
   DocumentObj {.importc.} = object of NodeObj
@@ -395,12 +397,87 @@ type
   TimeOut* {.importc.} = ref object of RootObj
   Interval* {.importc.} = object of RootObj
 
-proc len*(x: Node): int {.importcpp: "#.childNodes.length".}
-proc `[]`*(x: Node; idx: int): Element {.importcpp: "#.childNodes[#]".}
+when defined(nodejs):
+  # we provide a dummy DOM for nodejs for testing purposes
+  proc len*(x: Node): int = x.childNodes.len
+  proc `[]`*(x: Node; idx: int): Element =
+    assert idx >= 0 and idx < x.childNodes.len
+    result = cast[Element](x.childNodes[idx])
+
+  var document* = Document(nodeType: DocumentNode)
+
+  proc getElem(x: Element; id: cstring): Element =
+    if x.id == id: return x
+    for i in 0..<x.len:
+      result = getElem(x[i], id)
+      if result != nil: return result
+
+  proc getElementById*(doc: Document; id: cstring): Element =
+    getElem(doc.body, id)
+  proc getElementById*(id: cstring): Element = document.getElementById(id)
+
+  proc appendChild*(parent, n: Node) =
+    n.parentNode = parent
+    parent.childNodes.add n
+
+  proc replaceChild*(parent, newNode, oldNode: Node) =
+    newNode.parentNode = parent
+    oldNode.parentNode = nil
+    var i = 0
+    while i < parent.len:
+      if Node(parent[i]) == oldNode:
+        parent.childNodes[i] = newNode
+        return
+      inc i
+    doAssert false, "old node not in node list"
+
+  proc removeChild*(parent, child: Node) =
+    child.parentNode = nil
+    var i = 0
+    while i < parent.len:
+      if Node(parent[i]) == child:
+        parent.childNodes.delete(i)
+        return
+      inc i
+    doAssert false, "old node not in node list"
+
+  proc insertBefore*(parent, newNode, before: Node) =
+    appendChild(parent, newNode)
+    var i = 0
+    while i < parent.len-1:
+      if Node(parent[i]) == before:
+        for j in countdown(parent.len-1, i-1):
+          parent.childNodes[j] = parent.childNodes[j-1]
+        parent.childNodes[i-1] = newNode
+        return
+      inc i
+    #doAssert false, "before not in node list"
+
+  proc createElement*(d: Document, identifier: cstring): Element =
+    new(result)
+    result.nodeName = identifier
+    result.nodeType = NodeType.ElementNode
+
+  proc createTextNode*(d: Document, identifier: cstring): Node =
+    new(result)
+    result.nodeName = "#text"
+    result.nodeValue = identifier
+    result.nodeType = NodeType.TextNode
+
+else:
+  proc len*(x: Node): int {.importcpp: "#.childNodes.length".}
+  proc `[]`*(x: Node; idx: int): Element {.importcpp: "#.childNodes[#]".}
+  proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
+  proc appendChild*(n, child: Node) {.importcpp.}
+  proc removeChild*(n, child: Node) {.importcpp.}
+  proc replaceChild*(n, newNode, oldNode: Node) {.importcpp.}
+  proc insertBefore*(n, newNode, before: Node) {.importcpp.}
+  proc getElementById*(d: Document, id: cstring): Element {.importcpp.}
+  proc createElement*(d: Document, identifier: cstring): Element {.importcpp.}
+  proc createTextNode*(d: Document, identifier: cstring): Node {.importcpp.}
 
 proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
 proc clearTimeout*(t: Timeout) {.importc, nodecl.}
-proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
 
 {.push importcpp.}
 
@@ -445,19 +522,15 @@ proc requestAnimationFrame*(w: Window, function: proc (time: float)): int
 proc cancelAnimationFrame*(w: Window, id: int)
 
 # Node "methods"
-proc appendChild*(n, child: Node)
 proc appendData*(n: Node, data: cstring)
 proc cloneNode*(n: Node, copyContent: bool): Node
 proc deleteData*(n: Node, start, len: int)
 proc getAttribute*(n: Node, attr: cstring): cstring
 proc getAttributeNode*(n: Node, attr: cstring): Node
 proc hasChildNodes*(n: Node): bool
-proc insertBefore*(n, newNode, before: Node)
 proc insertData*(n: Node, position: int, data: cstring)
 proc removeAttribute*(n: Node, attr: cstring)
 proc removeAttributeNode*(n, attr: Node)
-proc removeChild*(n, child: Node)
-proc replaceChild*(n, newNode, oldNode: Node)
 proc replaceData*(n: Node, start, len: int, text: cstring)
 proc scrollIntoView*(n: Node)
 proc setAttribute*(n: Node, name, value: cstring)
@@ -466,9 +539,6 @@ proc setAttributeNode*(n: Node, attr: Node)
 # Document "methods"
 proc captureEvents*(d: Document, eventMask: int) {.deprecated.}
 proc createAttribute*(d: Document, identifier: cstring): Node
-proc createElement*(d: Document, identifier: cstring): Element
-proc createTextNode*(d: Document, identifier: cstring): Node
-proc getElementById*(d: Document, id: cstring): Element
 proc getElementsByName*(d: Document, name: cstring): seq[Element]
 proc getElementsByTagName*(d: Document, name: cstring): seq[Element]
 proc getElementsByClassName*(d: Document, name: cstring): seq[Element]
@@ -534,10 +604,12 @@ proc setAttr*(n: Node; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
 
 var
   window* {.importc, nodecl.}: Window
-  document* {.importc, nodecl.}: Document
   navigator* {.importc, nodecl.}: Navigator
   screen* {.importc, nodecl.}: Screen
 
+when not defined(nodejs):
+  var document* {.importc, nodecl.}: Document
+
 proc decodeURI*(uri: cstring): cstring {.importc, nodecl.}
 proc encodeURI*(uri: cstring): cstring {.importc, nodecl.}
 
diff --git a/src/vdom.nim b/src/vdom.nim
index 16b0f36..9a88d0a 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -114,8 +114,9 @@ type
     # even index: key, odd index: value; done this way for memory efficiency:
     attrs: seq[cstring]
     events*: seq[(EventKind, EventHandler)]
-    hash*: Hash
-    validHash*: bool
+    when false:
+      hash*: Hash
+      validHash*: bool
     style*: VStyle ## the style that should be applied to the virtual node.
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
@@ -248,32 +249,33 @@ proc toString*(n: VNode; result: var string; indent: int) =
   for i in 1..indent: result.add ' '
   result.add "\L</" & $n.kind & ">"
 
-proc calcHash*(n: VNode) =
-  if n.validHash: return
-  n.validHash = true
-  var h: Hash = ord n.kind
-  if n.id != nil:
-    h &= "id"
-    h &= n.id
-  if n.class != nil:
-    h &= "class"
-    h &= n.class
-  if n.key >= 0:
-    h &= "k"
-    h &= n.key
-  for k, v in attrs(n):
-    h &= " "
-    h &= k
-    h &= "="
-    h &= v
-  if n.kind == VNodeKind.text or n.text != nil:
-    h &= "t"
-    h &= n.text
-  else:
-    for child in items(n):
-      calcHash(child)
-      h &= child.hash
-  n.hash = h
+when false:
+  proc calcHash*(n: VNode) =
+    if n.validHash: return
+    n.validHash = true
+    var h: Hash = ord n.kind
+    if n.id != nil:
+      h &= "id"
+      h &= n.id
+    if n.class != nil:
+      h &= "class"
+      h &= n.class
+    if n.key >= 0:
+      h &= "k"
+      h &= n.key
+    for k, v in attrs(n):
+      h &= " "
+      h &= k
+      h &= "="
+      h &= v
+    if n.kind == VNodeKind.text or n.text != nil:
+      h &= "t"
+      h &= n.text
+    else:
+      for child in items(n):
+        calcHash(child)
+        h &= child.hash
+    n.hash = h
 
 proc `$`*(n: VNode): cstring =
   var res = ""
diff --git a/tests/difftest.nim b/tests/difftest.nim
new file mode 100644
index 0000000..9f80037
--- /dev/null
+++ b/tests/difftest.nim
@@ -0,0 +1,37 @@
+
+include "../src/karax"
+import "../src/karaxdsl"
+
+proc doDiff(a, b: VNode) =
+  var patches: seq[Patch] = @[]
+  echo diff(nil, vnodeToDom(a, kxi), b, a, patches, kxi)
+  echo patches
+
+proc testAppend() =
+  let a = buildHtml(tdiv):
+    ul:
+      li: text "A"
+      li: text "B"
+  let b = buildHtml(tdiv):
+    ul:
+      li: text "A"
+      li: text "B"
+      li: text "C"
+  doDiff(a, b)
+
+proc testInsert() =
+  let a = buildHtml(tdiv):
+    ul:
+      li: text "A"
+      li: text "C"
+  let b = buildHtml(tdiv):
+    ul:
+      li: text "A"
+      li: text "B"
+      li: text "C"
+  doDiff(a, b)
+
+kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard)
+
+#testAppend()
+testInsert()
diff --git a/tests/lists.nim b/tests/lists.nim
new file mode 100644
index 0000000..cce9abf
--- /dev/null
+++ b/tests/lists.nim
@@ -0,0 +1,18 @@
+import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
+
+var contents: seq[cstring] = @[]
+
+proc onTodoEnter(e: Event; n: VNode) =
+  contents.insert(n.value & "BBBB")
+  contents.insert(n.value)
+  n.value = ""
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
+          onkeyupenter = onTodoEnter, setFocus)
+    for c in contents:
+      tdiv:
+        text c
+
+setRenderer createDom

From f89da765fab9a45873374e1f59015dd1065ba08b Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 23 Jun 2017 21:33:48 +0200
Subject: [PATCH 082/264] another bugfix for smart-diffing

---
 src/karax.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/karax.nim b/src/karax.nim
index cdb68f7..36a0506 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -321,7 +321,7 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
         if result != different: result = r
         break
       of similar:
-        updateStyles(a[i], b[j], true)
+        updateStyles(a[i], b[j], false)
         a[i] = b[j]
         action
 

From 74c07f063444ebfeebd20345da4923c20734c32d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 23 Jun 2017 22:21:06 +0200
Subject: [PATCH 083/264] code cleanups

---
 src/karax.nim | 256 +++++++++-----------------------------------------
 1 file changed, 45 insertions(+), 211 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 36a0506..00863c6 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -152,13 +152,12 @@ proc same(n: VNode, e: Node): bool =
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
   x.parentNode.replaceChild(newTree, x)
-  #newTree.id = id
 
 type
   EqResult = enum
     changed, different, similar, identical
 
-proc eq(a, b: VNode; deep: bool): EqResult =
+proc eq(a, b: VNode): EqResult =
   if a.kind != b.kind: return different
   if a.id != b.id: return different
   result = identical
@@ -169,60 +168,25 @@ proc eq(a, b: VNode; deep: bool): EqResult =
     if a.text != b.text: return different
     if a.len != b.len: return different
     for i in 0..<a.len:
-      if eq(a[i], b[i], deep) == different: return different
+      if eq(a[i], b[i]) == different: return different
   elif b.kind == VNodeKind.component:
     # different component names mean different components:
     if a.text != b.text: return different
     let x = VComponent(b)
     assert x.changedImpl != nil
     return if x.changedImpl(x): changed else: identical
-  elif deep:
-    if a.len != b.len: return different
-    for i in 0..<a.len:
-      let res = eq(a[i], b[i], deep)
-      if res <= different: return different
-      elif res == similar:
-        # but continue, maybe something makes it 'different'!
-        result = similar
   if not sameAttrs(a, b): return different
   if a.class != b.class: return different
   if not eq(a.style, b.style): return similar
   # Do not test event listeners here!
   return result
 
-when false:
-  proc updateDirtyElements(parent, current: Node, newNode: VNode,
-                          kxi: KaraxInstance) =
-    if newNode.key >= 0 and isDirty(newNode.key):
-      unmarkDirty(newNode.key)
-      let n = vnodeToDom(newNode, kxi)
-      if parent == nil:
-        replaceById(kxi.rootId, n)
-      else:
-        parent.replaceChild(n, current)
-    elif newNode.kind != VNodeKind.text and newNode.kind != VNodeKind.vthunk and
-        newNode.kind != VNodeKind.dthunk:
-      for i in 0..newNode.len-1:
-        updateDirtyElements(current, current[i], newNode[i], kxi)
-        # leave early if we know there cannot be anything left to do:
-        #if dirtyCount <= 0: return
-
-proc updateStyles(newNode, oldNode: VNode; deep: bool) =
+proc updateStyles(newNode, oldNode: VNode) =
   # we keep the oldNode, but take over the style from the new node:
   if oldNode.dom != nil:
     if newNode.style != nil: applyStyle(oldNode.dom, newNode.style)
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
-  if deep:
-    doAssert newNode.len == oldNode.len
-    for i in 0 ..< newNode.len:
-      updateStyles(newNode[i], oldNode[i], deep)
-
-proc updateDom(newNode, oldNode: VNode) =
-  newNode.dom = oldNode.dom
-  assert newNode.len == oldNode.len
-  for i in 0 ..< newNode.len:
-    updateDom(newNode[i], oldNode[i])
 
 proc printV(n: VNode; depth: cstring = "") =
   kout depth, cstring($n.kind), n.myid, cstring"key ", n.key
@@ -264,55 +228,32 @@ proc apply(patches: seq[Patch]; kxi: KaraxInstance) =
 
 proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch];
           kxi: KaraxInstance): EqResult =
-  result = eq(newNode, oldNode, deep=false)
-  if result <= different:
-    var n: Node
-    if result == changed:
-      assert oldNode.kind == VNodeKind.component
-      let x = VComponent(oldNode)
-      let oldExpanded = x.expanded
-      x.expanded = x.renderImpl(x)
-      x.updatedImpl(x)
-      if oldExpanded == nil:
-        n = vnodeToDom(x.expanded, kxi)
-      else:
-        let res = diff(parent, current, x.expanded, oldExpanded, patches, kxi)
-        if res != different:
-          x.expanded = oldExpanded
-          n = oldExpanded.dom
-          doAssert n != nil, "old expanded.dom is nil"
-        else:
-          n = x.expanded.dom
-          doAssert n != nil, "expanded.dom is nil"
-        return
-    else:
-      detach(oldNode)
-      n = vnodeToDom(newNode, kxi)
-    patches.addPatch(pkReplace, parent, current, n)
-  elif result == similar:
-    updateStyles(newNode, oldNode, false)
-  else:
+  result = eq(newNode, oldNode)
+  case result
+  of identical:
     newNode.dom = oldNode.dom
     let newLength = newNode.len
     var oldLength = oldNode.len
     let minLength = min(newLength, oldLength)
+    if minLength == 0: return result
 
     assert oldNode.kind == newNode.kind
     var commonPrefix = 0
 
     template eqAndUpdate(a: VNode; i: int; b: VNode; j: int; info, action: untyped) =
       let oldLen = patches.len
-      if oldNode.kind notin {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
-        assert current != nil
-        assert current.childNodes[j] != nil, $info
-        assert oldNode.len == current.len
+      when false:
+        if oldNode.kind notin {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
+          assert current != nil
+          assert current.childNodes[j] != nil, $info
+          assert oldNode.len == current.len
 
       let r = if oldNode.kind in {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
                 diff(parent, current, a[i], b[j], patches, kxi)
               else:
                 diff(current, current.childNodes[j], a[i], b[j], patches, kxi)
       case r
-      of identical, changed:
+      of identical, changed, similar:
         a[i] = b[j]
         action
       of different:
@@ -320,10 +261,10 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
         setLen(patches, oldLen)
         if result != different: result = r
         break
-      of similar:
-        updateStyles(a[i], b[j], false)
-        a[i] = b[j]
-        action
+      #of similar:
+      #  updateStyles(a[i], b[j])
+      #  a[i] = b[j]
+      #  action
 
     while commonPrefix < minLength:
       eqAndUpdate(newNode, commonPrefix, oldNode, commonPrefix, cstring"prefix"):
@@ -338,20 +279,18 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
 
     var pos = min(oldPos, newPos) + 1
     for i in commonPrefix..pos-1:
-      let res = diff(current, current.childNodes[i],
-                        newNode[i], oldNode[i], patches, kxi)
-      if res != different:
+      if diff(current, current.childNodes[i],
+              newNode[i], oldNode[i], patches, kxi) != different:
         newNode[i] = oldNode[i]
       else:
         result = different
 
-    var nextChildPos = oldPos + 1
-    if nextChildPos == oldLength:
+    if oldPos + 1 == oldLength:
       for i in pos..newPos:
         patches.addPatch(pkAppend, current, nil, vnodeToDom(newNode[i], kxi))
         result = different
     else:
-      let before = current.childNodes[nextChildPos]
+      let before = current.childNodes[oldPos + 1]
       for i in pos..newPos:
         patches.addPatch(pkInsertBefore, current, before,
                         vnodeToDom(newNode[i], kxi))
@@ -359,153 +298,48 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
     # XXX call 'attach' here?
     for i in pos..oldPos:
       detach(oldNode[i])
-      doAssert i < current.childNodes.len
+      #doAssert i < current.childNodes.len
       patches.addPatch(pkRemove, current, current.childNodes[i], nil)
       result = different
 
-
-proc updateElement(parent, current: Node, newNode, oldNode: VNode;
-                   kxi: KaraxInstance): EqResult =
-  result = eq(newNode, oldNode, deep=false)
-  if result <= different:
-    var n: Node
-    var state = 0
-    if result == changed:
-      assert oldNode.kind == VNodeKind.component
-      let x = VComponent(oldNode)
-      let oldExpanded = x.expanded
-      x.expanded = x.renderImpl(x)
-      x.updatedImpl(x)
-      if oldExpanded == nil:
-        n = vnodeToDom(x.expanded, kxi)
-        state = 1
-      else:
-        let res = updateElement(parent, current, x.expanded, oldExpanded, kxi)
-        if res != different:
-          x.expanded = oldExpanded
-          n = oldExpanded.dom
-          doAssert n != nil, "old expanded.dom is nil"
-          #kout cstring"produced old DOM: ", cstring($res)
-          #printV(oldExpanded)
-          #printV(x.expanded)
-          return
-        else:
-          n = x.expanded.dom
-          doAssert n != nil, "expanded.dom is nil"
-          state = 2
-          #kout cstring"produced new DOM:"
-          #printV(oldExpanded)
-          #printV(x.expanded)
-          return
-    else:
+  of similar:
+    updateStyles(newNode, oldNode)
+  of changed:
+    assert oldNode.kind == VNodeKind.component
+    let x = VComponent(oldNode)
+    let oldExpanded = x.expanded
+    x.expanded = x.renderImpl(x)
+    x.updatedImpl(x)
+    if oldExpanded == nil:
       detach(oldNode)
-      n = vnodeToDom(newNode, kxi)
-      state = 3
-    if parent == nil:
-      replaceById(kxi.rootId, n)
+      let n = vnodeToDom(x.expanded, kxi)
+      patches.addPatch(pkReplace, parent, current, n)
     else:
-      #kout cstring"state ", state, parent, current
-      if n != current:
-        parent.replaceChild(n, current)
-  elif result == similar:
-    updateStyles(newNode, oldNode, false)
-  else:
-    newNode.dom = oldNode.dom
-    if newNode.kind != VNodeKind.text:
-      let newLength = newNode.len
-      var oldLength = oldNode.len
-      let minLength = min(newLength, oldLength)
-      assert oldNode.kind == newNode.kind
-      when defined(simpleDiff):
-        for i in 0..min(newLength, oldLength)-1:
-          updateElement(current, current[i], newNode[i], oldNode[i], kxi)
-        if newLength > oldLength:
-          for i in oldLength..newLength-1:
-            current.appendChild(vnodeToDom(newNode[i]))
-        elif oldLength > newLength:
-          for i in countdown(oldLength-1, newLength):
-            detach(oldNode[i])
-            current.removeChild(current.lastChild)
+      let res = diff(parent, current, x.expanded, oldExpanded, patches, kxi)
+      if res != different:
+        x.expanded = oldExpanded
+        assert oldExpanded.dom != nil, "old expanded.dom is nil"
       else:
-        var commonPrefix = 0
-
-        template eqAndUpdate(a: VNode; i: int; b: VNode; action: untyped) =
-          let r = eq(a[i], b, true)
-          case r
-          of identical:
-            a[i] = b
-            #updateDom(a, b)
-            action
-          of different, changed:
-            if result != different: result = r
-            break
-          of similar:
-            #updateDom(a, b)
-            updateStyles(a[i], b, true)
-            a[i] = b
-            action
-
-        while commonPrefix < minLength:
-          eqAndUpdate(newNode, commonPrefix, oldNode[commonPrefix]):
-            inc commonPrefix
-
-        var oldPos = oldLength - 1
-        var newPos = newLength - 1
-        while oldPos >= commonPrefix and newPos >= commonPrefix:
-          eqAndUpdate(newNode, newPos, oldNode[oldPos]):
-            dec oldPos
-            dec newPos
-
-        var pos = min(oldPos, newPos) + 1
-        for i in commonPrefix..pos-1:
-          let res = updateElement(current, current.childNodes[i],
-                           newNode[i], oldNode[i], kxi)
-          if res != different:
-            newNode[i] = oldNode[i]
-          else:
-            result = different
-
-        var nextChildPos = oldPos + 1
-        while pos <= newPos:
-          if nextChildPos == oldLength:
-            current.appendChild(vnodeToDom(newNode[pos], kxi))
-          else:
-            current.insertBefore(vnodeToDom(newNode[pos], kxi), current.childNodes[nextChildPos])
-          # added new Node, so old state of VDOM have one more Node
-          inc oldLength
-          inc pos
-          inc nextChildPos
-          result = different
-
-        for i in pos..oldPos:
-          detach(oldNode[i])
-          doAssert pos < current.childNodes.len
-          current.removeChild(current.childNodes[pos])
-          result = different
-
-when false:
-  var drawTimeout: Timeout
+        assert x.expanded.dom != nil, "expanded.dom is nil"
+  of different:
+    detach(oldNode)
+    let n = vnodeToDom(newNode, kxi)
+    patches.addPatch(pkReplace, parent, current, n)
 
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
   let newtree = kxi.renderer()
   newtree.id = kxi.rootId
   kxi.toFocus = nil
-  #if kxi.currentTree != nil:
-  #  kout cstring"same? ", same(kxi.currentTree, document.getElementById(kxi.rootId))
-  #kout cstring"dodraw -----------------------------"
   if kxi.currentTree == nil:
     kxi.currentTree = newtree
     let asdom = vnodeToDom(kxi.currentTree, kxi)
     replaceById(kxi.rootId, asdom)
   else:
     let olddom = document.getElementById(kxi.rootId)
-    when false:
-      discard updateElement(nil, olddom, newtree, kxi.currentTree, kxi)
-    else:
-      var patches: seq[Patch] = @[]
-      discard diff(nil, olddom, newtree, kxi.currentTree, patches, kxi)
-      patches.apply(kxi)
+    var patches: seq[Patch] = @[]
+    discard diff(nil, olddom, newtree, kxi.currentTree, patches, kxi)
+    patches.apply(kxi)
     kxi.currentTree = newtree
   #doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 

From 4bfe66edd6de36657efe6e3e6de12bb1d026b8b2 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 24 Jun 2017 08:22:31 +0200
Subject: [PATCH 084/264] optimized VStyle representation

---
 src/jdict.nim   |  9 +++++
 src/vstyles.nim | 95 ++++++++++++++++++++++++++++++++-----------------
 2 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/src/jdict.nim b/src/jdict.nim
index 0eecb58..f541ac7 100644
--- a/src/jdict.nim
+++ b/src/jdict.nim
@@ -11,3 +11,12 @@ proc contains*[K, V](d: JDict[K, V], k: K): bool {.importcpp: "#.hasOwnProperty(
 
 proc del*[K, V](d: JDict[K, V], k: K) {.importcpp: "delete #[#]".}
 
+type
+  JSeq*[T] = ref object
+
+proc `[]`*[T](s: JSeq[T], i: int): T {.importcpp: "#[#]", noSideEffect.}
+proc `[]=`*[T](s: JSeq[T], i: int, v: T) {.importcpp: "#[#] = #", noSideEffect.}
+
+proc newJSeq*[T](): JSeq[T] {.importcpp: "[@]".}
+proc len*[T](s: JSeq[T]): int {.importcpp: "#.length", noSideEffect.}
+proc add*[T](s: JSeq[T]; x: T) {.importcpp: "#.push(#)", noSideEffect.}
diff --git a/src/vstyles.nim b/src/vstyles.nim
index a6f1996..2f854e1 100644
--- a/src/vstyles.nim
+++ b/src/vstyles.nim
@@ -1,5 +1,5 @@
 
-import kdom, macros
+import kdom, macros, jdict
 
 type
   StyleAttr* {.pure.} = enum
@@ -208,62 +208,93 @@ macro buildLookupTables(): untyped =
 
 buildLookupTables()
 
-type
-  VStyle* = ref object
-    attrs: array[StyleAttr, cstring]
-    mask: set[StyleAttr]
+# I optimized the heck out of this representation since profiling showed
+# it's relevant.
+# even index: key, odd index: value; done this way for memory efficiency:
 
-proc kout[T](x: T) {.importc: "console.log", varargs.}
+type
+  VStyle* = JSeq[cstring]
 
 proc eq*(a, b: VStyle): bool =
   if a.isNil:
     if b.isNil: return true
     else: return false
   elif b.isNil: return false
-  if a.mask != b.mask: return false
-  for x in a.mask:
-    if a.attrs[x] != b.attrs[x]: return false
+  if a.len != b.len: return false
+  for i in 0..<a.len:
+    if a[i] != b[i]: return false
   return true
 
-proc setAttr*(s: VStyle; attr: StyleAttr, value: cstring) =
+proc kout[T](x: T) {.importc: "console.log", varargs.}
+
+proc setAttr(s: VStyle; a, value: cstring) {.noSideEffect.} =
+  var i = 0
+  while i < s.len:
+    if s[i] == a:
+      s[i+1] = value
+      return
+    elif s[i] > a:
+      s.add nil
+      s.add nil
+      # insertion point here:
+      for j in countdown(s.len-1, i, 2):
+        s[j] = s[j-2]
+        s[j-1] = s[j-3]
+      s[i] = a
+      s[i+1] = value
+      return
+    inc i, 2
+  s.add a
+  s.add value
+
+proc setAttr*(s: VStyle; attr: StyleAttr, value: cstring) {.noSideEffect.} =
   assert value != nil, "value must not be nil"
-  s.attrs[attr] = value
-  incl(s.mask, attr)
+  setAttr(s, toStyleAttrName[attr], value)
 
-proc getAttr*(s: VStyle; attr: StyleAttr): cstring =
+proc getAttr*(s: VStyle; attr: StyleAttr): cstring {.noSideEffect.} =
   ## returns 'nil' if the attribute has not been set.
-  result = s.attrs[attr]
+  var i = 0
+  let a = toStyleAttrName[attr]
+  while i < s.len:
+    if s[i] == a:
+      return s[i+1]
+    elif s[i] > a:
+      return nil
+    inc i, 2
 
-proc style*(pairs: varargs[(StyleAttr, cstring)]): VStyle =
+proc style*(pairs: varargs[(StyleAttr, cstring)]): VStyle {.noSideEffect.} =
   ## constructs a VStyle object from a list of (attribute, value)-pairs.
-  result = VStyle(mask: {})
+  result = newJSeq[cstring]()
   for x in pairs:
     result.setAttr x[0], x[1]
 
-proc style*(a: StyleAttr; val: cstring): VStyle =
+proc style*(a: StyleAttr; val: cstring): VStyle {.noSideEffect.} =
   ## constructs a VStyle object from a single (attribute, value)-pair.
-  result = VStyle(mask: {})
+  result = newJSeq[cstring]()
   result.setAttr a, val
 
-proc setStyle(d: Style; key, val: cstring) {.importcpp: "#[#] = #".}
+proc setStyle(d: Style; key, val: cstring) {.importcpp: "#[#] = #", noSideEffect.}
 
-proc merge*(a, b: VStyle): VStyle =
+proc merge*(a, b: VStyle): VStyle {.noSideEffect.} =
   ## merges two styles. ``b`` takes precedence over ``a``.
-  result = VStyle(mask: {})
-  for i in low(StyleAttr)..high(StyleAttr):
-    result.attrs[i] = if b.attrs[i].isNil: a.attrs[i] else: b.attrs[i]
-    if result.attrs[i] != nil: incl(result.mask, i)
+  result = newJSeq[cstring]()
+  for i in 0..<a.len:
+    result.add a[i]
+  for i in countup(0, b.len-1, 2):
+    setAttr(result, b[i], b[i+1])
 
-proc applyStyle*(n: Node; s: VStyle) =
+proc applyStyle*(n: Node; s: VStyle) {.noSideEffect.} =
   ## apply the style to the real DOM node ``n``.
-  n.style = Style()
-  for x in s.mask:
-    n.style.setStyle(toStyleAttrName[x], s.attrs[x])
 
-iterator pairs*(v: VStyle): (cstring, cstring) =
-  if v != nil:
-    for x in v.mask:
-      yield (toStyleAttrName[x], v.attrs[x])
+  #n.style = Style() # optimized, this is a hotspot:
+  {.emit: "`n`.style = {};".}
+  for i in countup(0, s.len-1, 2):
+    n.style.setStyle(s[i], s[i+1])
+
+iterator pairs*(s: VStyle): (cstring, cstring) {.noSideEffect.} =
+  if s != nil:
+    for i in countup(0, s.len-1, 2):
+      yield (s[i], s[i+1])
 
 import jstrutils
 

From 09a5e1c34e57e7928f2ad016efea090231f830f6 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 24 Jun 2017 08:23:22 +0200
Subject: [PATCH 085/264] optimized the new diff algorihtm

---
 src/karax.nim | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 00863c6..3f3ebed 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -205,26 +205,30 @@ type
     pkReplace, pkRemove, pkAppend, pkInsertBefore
   Patch = object
     k: PatchKind
-    parent, current, n: Node
+    parent, current: Node
+    n: VNode
 
-proc addPatch(patches: var seq[Patch]; k: PatchKind; parent, current, n: Node) =
+proc addPatch(patches: var seq[Patch]; k: PatchKind; parent, current: Node;
+              n: VNode) =
   patches.add(Patch(k: k, parent: parent, current: current, n: n))
 
 proc apply(patches: seq[Patch]; kxi: KaraxInstance) =
   for p in patches:
     case p.k
     of pkReplace:
+      let nn = vnodeToDom(p.n, kxi)
       if p.parent == nil:
-        replaceById(kxi.rootId, p.n)
+        replaceById(kxi.rootId, nn)
       else:
-        if p.n != p.current:
-          p.parent.replaceChild(p.n, p.current)
+        p.parent.replaceChild(nn, p.current)
     of pkRemove:
       p.parent.removeChild(p.current)
     of pkAppend:
-      p.parent.appendChild(p.n)
+      let nn = vnodeToDom(p.n, kxi)
+      p.parent.appendChild(nn)
     of pkInsertBefore:
-      p.parent.insertBefore(p.n, p.current)
+      let nn = vnodeToDom(p.n, kxi)
+      p.parent.insertBefore(nn, p.current)
 
 proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch];
           kxi: KaraxInstance): EqResult =
@@ -248,7 +252,8 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
           assert current.childNodes[j] != nil, $info
           assert oldNode.len == current.len
 
-      let r = if oldNode.kind in {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
+      let r = if oldNode.kind == VNodeKind.component or oldNode.kind == VNodeKind.vthunk or
+                 oldNode.kind == VNodeKind.dthunk:
                 diff(parent, current, a[i], b[j], patches, kxi)
               else:
                 diff(current, current.childNodes[j], a[i], b[j], patches, kxi)
@@ -287,13 +292,12 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
 
     if oldPos + 1 == oldLength:
       for i in pos..newPos:
-        patches.addPatch(pkAppend, current, nil, vnodeToDom(newNode[i], kxi))
+        patches.addPatch(pkAppend, current, nil, newNode[i])
         result = different
     else:
       let before = current.childNodes[oldPos + 1]
       for i in pos..newPos:
-        patches.addPatch(pkInsertBefore, current, before,
-                        vnodeToDom(newNode[i], kxi))
+        patches.addPatch(pkInsertBefore, current, before, newNode[i])
         result = different
     # XXX call 'attach' here?
     for i in pos..oldPos:
@@ -312,8 +316,7 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
     x.updatedImpl(x)
     if oldExpanded == nil:
       detach(oldNode)
-      let n = vnodeToDom(x.expanded, kxi)
-      patches.addPatch(pkReplace, parent, current, n)
+      patches.addPatch(pkReplace, parent, current, x.expanded)
     else:
       let res = diff(parent, current, x.expanded, oldExpanded, patches, kxi)
       if res != different:
@@ -323,8 +326,7 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
         assert x.expanded.dom != nil, "expanded.dom is nil"
   of different:
     detach(oldNode)
-    let n = vnodeToDom(newNode, kxi)
-    patches.addPatch(pkReplace, parent, current, n)
+    patches.addPatch(pkReplace, parent, current, newNode)
 
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return

From 8a1424669f6269db0b1ba94d3ab43b75270272bd Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 26 Jun 2017 21:03:39 +0200
Subject: [PATCH 086/264] optimized diff algorithm further; fixed a stupid bug;
 cleaned up the tests

---
 src/jdict.nim           |   2 +
 src/karax.nim           |  30 +++---
 tests/diffDomTests.html |   1 -
 tests/diffDomTests.nim  | 223 +++++++++++++---------------------------
 tests/difftest.nim      |  29 +++++-
 5 files changed, 117 insertions(+), 168 deletions(-)

diff --git a/src/jdict.nim b/src/jdict.nim
index f541ac7..b239af2 100644
--- a/src/jdict.nim
+++ b/src/jdict.nim
@@ -20,3 +20,5 @@ proc `[]=`*[T](s: JSeq[T], i: int, v: T) {.importcpp: "#[#] = #", noSideEffect.}
 proc newJSeq*[T](): JSeq[T] {.importcpp: "[@]".}
 proc len*[T](s: JSeq[T]): int {.importcpp: "#.length", noSideEffect.}
 proc add*[T](s: JSeq[T]; x: T) {.importcpp: "#.push(#)", noSideEffect.}
+
+proc shrink*[T](s: JSeq[T]; shorterLen: int) {.importcpp: "#.length = #", noSideEffect.}
diff --git a/src/karax.nim b/src/karax.nim
index 3f3ebed..f07bf71 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -208,12 +208,13 @@ type
     parent, current: Node
     n: VNode
 
-proc addPatch(patches: var seq[Patch]; k: PatchKind; parent, current: Node;
+proc addPatch(patches: JSeq[Patch]; k: PatchKind; parent, current: Node;
               n: VNode) =
   patches.add(Patch(k: k, parent: parent, current: current, n: n))
 
-proc apply(patches: seq[Patch]; kxi: KaraxInstance) =
-  for p in patches:
+proc apply(patches: JSeq[Patch]; kxi: KaraxInstance) =
+  for i in 0..<patches.len:
+    let p = patches[i]
     case p.k
     of pkReplace:
       let nn = vnodeToDom(p.n, kxi)
@@ -230,8 +231,7 @@ proc apply(patches: seq[Patch]; kxi: KaraxInstance) =
       let nn = vnodeToDom(p.n, kxi)
       p.parent.insertBefore(nn, p.current)
 
-proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch];
-          kxi: KaraxInstance): EqResult =
+proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]): EqResult =
   result = eq(newNode, oldNode)
   case result
   of identical:
@@ -239,7 +239,7 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
     let newLength = newNode.len
     var oldLength = oldNode.len
     let minLength = min(newLength, oldLength)
-    if minLength == 0: return result
+    if newLength == 0 and oldLength == 0: return result
 
     assert oldNode.kind == newNode.kind
     var commonPrefix = 0
@@ -254,16 +254,16 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
 
       let r = if oldNode.kind == VNodeKind.component or oldNode.kind == VNodeKind.vthunk or
                  oldNode.kind == VNodeKind.dthunk:
-                diff(parent, current, a[i], b[j], patches, kxi)
+                diff(a[i], b[j], parent, current, patches)
               else:
-                diff(current, current.childNodes[j], a[i], b[j], patches, kxi)
+                diff(a[i], b[j], current, current.childNodes[j], patches)
       case r
       of identical, changed, similar:
         a[i] = b[j]
         action
       of different:
         # undo what 'diff' would have done:
-        setLen(patches, oldLen)
+        shrink(patches, oldLen)
         if result != different: result = r
         break
       #of similar:
@@ -284,8 +284,8 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
 
     var pos = min(oldPos, newPos) + 1
     for i in commonPrefix..pos-1:
-      if diff(current, current.childNodes[i],
-              newNode[i], oldNode[i], patches, kxi) != different:
+      if diff(newNode[i], oldNode[i], current, current.childNodes[i],
+              patches) != different:
         newNode[i] = oldNode[i]
       else:
         result = different
@@ -318,7 +318,7 @@ proc diff(parent, current: Node; newNode, oldNode: VNode; patches: var seq[Patch
       detach(oldNode)
       patches.addPatch(pkReplace, parent, current, x.expanded)
     else:
-      let res = diff(parent, current, x.expanded, oldExpanded, patches, kxi)
+      let res = diff(x.expanded, oldExpanded, parent, current, patches)
       if res != different:
         x.expanded = oldExpanded
         assert oldExpanded.dom != nil, "old expanded.dom is nil"
@@ -339,8 +339,8 @@ proc dodraw(kxi: KaraxInstance) =
     replaceById(kxi.rootId, asdom)
   else:
     let olddom = document.getElementById(kxi.rootId)
-    var patches: seq[Patch] = @[]
-    discard diff(nil, olddom, newtree, kxi.currentTree, patches, kxi)
+    var patches = newJSeq[Patch]()
+    discard diff(newtree, kxi.currentTree, nil, olddom, patches)
     patches.apply(kxi)
     kxi.currentTree = newtree
   #doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
@@ -365,6 +365,8 @@ proc redraw*(kxi: KaraxInstance = kxi) =
   else:
     dodraw(kxi)
 
+proc redrawSync*(kxi: KaraxInstance = kxi) = dodraw(kxi)
+
 proc init(ev: Event) =
   reqFrame(proc () = kxi.dodraw)
 
diff --git a/tests/diffDomTests.html b/tests/diffDomTests.html
index 5ecf130..cb6ab28 100644
--- a/tests/diffDomTests.html
+++ b/tests/diffDomTests.html
@@ -3,7 +3,6 @@
 <html>
 <head>
   <title>Diff dom tests</title>
-  <link rel="stylesheet" href="style.css">
 </head>
 
 <body id="body">
diff --git a/tests/diffDomTests.nim b/tests/diffDomTests.nim
index d2c09ab..e28c6f6 100644
--- a/tests/diffDomTests.nim
+++ b/tests/diffDomTests.nim
@@ -2,182 +2,107 @@
 import kdom, vdom, times, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils
 
 var
-    entries: seq[cstring]
-    results: seq[cstring]
-    timeout: Timeout
+  entries: seq[cstring]
+  results: seq[cstring]
 
 proc reset() =
-    results.add cstring"reset started"
-    entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ]
-    redraw()
-    results.add cstring"reset finished"
+  entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
+  redrawSync()
 
-proc checkOrder(order : seq[int]): bool =
-    var ul = getElementById("ul")
-    if ul == nil or len(ul.children) != len(order):
-        return false
-    var pos = 0
-    for child in ul.children:
-        if child.id != $order[pos]:
-            return false
-        inc pos
-    return true
+proc checkOrder(order: seq[int]): bool =
+  var ul = getElementById("ul")
+  if ul == nil or len(ul.children) != len(order):
+    kout ul, len(order)
+    return false
+  var pos = 0
+  for child in ul.children:
+    if child.id != $order[pos]:
+      kout pos
+      return false
+    inc pos
+  return true
 
-proc check1() =
-    let result = checkOrder(@[0, 1, 2, 3, 4, 7, 5])
-    if result:
-        results.add cstring"test1 - OK"
-    else:
-        results.add cstring"test1 - FAIL"
+proc check(name: cstring; order: seq[int]) =
+  let result = checkOrder(order)
+  results.add name & (if result: cstring" - OK" else: cstring" -FAIL")
 
 # result: 0 1 2 3 4 7 5
 proc test1() =
-    results.add cstring"test1 started"
-    entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ]
-    entries.insert(cstring("7"), 5)
-    redraw()
-    timeout = setTimeout(check1, 20)
+  results.add cstring"test1 started"
+  entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
+  entries.insert(cstring("7"), 5)
+  redrawSync()
+  check("test1", @[0, 1, 2, 3, 4, 7, 5])
 
-proc check2() =
-    let result = checkOrder(@[8, 0, 1, 2, 3, 4, 7, 5])
-    if result:
-        results.add cstring"test1 - OK"
-    else:
-        results.add cstring"test2 - FAIL"
-
-# result: 8 0 1 2 3 4 7 5
 proc test2() =
-    results.add cstring"test2 started"
-    entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ]
-    entries.insert(cstring("7"), 5)
-    entries.insert(cstring("8"), 0)
-    redraw()
-    timeout = setTimeout(check2, 20)
+  results.add cstring"test2 started"
+  entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
+  entries.insert(cstring("7"), 5)
+  entries.insert(cstring("8"), 0)
+  redrawSync()
+  check("test2", @[8, 0, 1, 2, 3, 4, 7, 5])
 
-proc check3() =
-    let result = checkOrder(@[2, 3, 4, 1])
-    if result:
-        results.add cstring"test3 - OK"
-    else:
-        results.add cstring"test3 - FAIL"
-
-# result: 2 3 4 1
 proc test3() =
-    results.add cstring"test3 started"
-    entries = @[cstring("2"), cstring("3"), cstring("4"), cstring("1") ]
-    redraw()
-    timeout = setTimeout(check3, 20)
+  results.add cstring"test3 started"
+  entries = @[cstring("2"), cstring("3"), cstring("4"), cstring("1")]
+  redrawSync()
+  check("test3", @[2, 3, 4, 1])
 
-proc check4() =
-    let result = checkOrder(@[5, 6, 7, 8])
-    if result:
-        results.add cstring"test4 - OK"
-    else:
-        results.add cstring"test4 - FAIL"
-
-# result: 5 6 7 8
 proc test4() =
-    results.add cstring"test4 started"
-    entries = @[cstring("5"), cstring("6"), cstring("7"), cstring("8") ]
-    redraw()
-    timeout = setTimeout(check4, 20)
+  results.add cstring"test4 started"
+  entries = @[cstring("5"), cstring("6"), cstring("7"), cstring("8") ]
+  redrawSync()
+  check("test4", @[5, 6, 7, 8])
 
-proc check5() =
-    let result = checkOrder(@[0, 1, 3, 5, 4, 5])
-    if result:
-        results.add cstring"test5 - OK"
-    else:
-        results.add cstring"test5 - FAIL"
-
-# result: 0 1 3 5 4 5
 proc test5() =
-    results.add cstring"test5 started"
-    entries = @[cstring("0"), cstring("1"), cstring("3"), cstring("5"), cstring("4"), cstring("5") ]
-    redraw()
-    timeout = setTimeout(check5, 20)
+  results.add cstring"test5 started"
+  entries = @[cstring("0"), cstring("1"), cstring("3"), cstring("5"), cstring("4"), cstring("5")]
+  redrawSync()
+  check("test 5", @[0, 1, 3, 5, 4, 5])
 
-proc check6() =
-    let result = checkOrder(@[])
-    if result:
-        results.add cstring"test6 - OK"
-    else:
-        results.add cstring"test6 - FAIL"
-
-# result: empty
 proc test6() =
-    results.add cstring"test6 started"
-    entries = @[]
-    redraw()
-    timeout = setTimeout(check6, 20)
-
-proc check7() =
-    let result = checkOrder(@[2])
-    if result:
-        results.add cstring"test7 - OK"
-    else:
-        results.add cstring"test7 - FAIL"
-    redraw()
+  results.add cstring"test6 started"
+  entries = @[]
+  redrawSync()
+  check("test 6", @[])
 
 # result: 2
 proc test7() =
-    results.add cstring"test7 started"
-    entries = @[cstring("2")]
-    redraw()
-    timeout = setTimeout(check7, 20)
+  results.add cstring"test7 started"
+  entries = @[cstring("2")]
+  redrawSync()
+  check("test 7", @[2])
 
 proc createEntry(id: int): VNode =
   result = buildHtml():
     button(id="" & $id):
-        text $id
+      text $id
 
 proc createDom(): VNode =
-    result = buildHtml(tdiv()):
-        ul(id="ul"):
-            for e in entries:
-                createEntry(parseInt(e))
-        for r in results:
-            tdiv:
-                text r
+  result = buildHtml(tdiv()):
+    ul(id="ul"):
+      for e in entries:
+        createEntry(parseInt(e))
+    for r in results:
+      tdiv:
+        text r
 
 proc onload() =
-    for i in 0..5: # 0_000:
-        entries.add(cstring($i))
+  for i in 0..5: # 0_000:
+    entries.add(cstring($i))
+  test1()
+  reset()
+  test2()
+  reset()
+  test3()
+  reset()
+  test4()
+  reset()
+  test5()
+  reset()
+  test6()
+  reset()
+  test7()
 
-    var dtReset = 100
-    var dtTest = 500
-
-    var t = dtReset
-    timeout = setTimeout(test1, t)
-    t += dtTest
-    timeout = setTimeout(reset, t)
-    t += dtReset
-
-    timeout = setTimeout(test2, t)
-    t += dtTest
-    timeout = setTimeout(reset, t)
-    t += dtReset
-
-    timeout = setTimeout(test3, t)
-    t += dtTest
-    timeout = setTimeout(reset, t)
-    t += dtReset
-
-    timeout = setTimeout(test4, t)
-    t += dtTest
-    timeout = setTimeout(reset, t)
-    t += dtReset
-
-    timeout = setTimeout(test5, t)
-    t += dtTest
-    timeout = setTimeout(reset, t)
-    t += dtReset
-
-    timeout = setTimeout(test6, t)
-    t += dtTest
-    timeout = setTimeout(reset, t)
-    t += dtReset
-
-    timeout = setTimeout(test7, t)
-
-onload()
 setRenderer createDom
+onload()
diff --git a/tests/difftest.nim b/tests/difftest.nim
index 9f80037..bd90b6a 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -2,10 +2,19 @@
 include "../src/karax"
 import "../src/karaxdsl"
 
+proc hasDom(n: Vnode) =
+  if n.kind in {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
+    discard
+  else:
+    doAssert n.dom != nil
+    for i in 0..<n.len: hasDom(n[i])
+
 proc doDiff(a, b: VNode) =
-  var patches: seq[Patch] = @[]
-  echo diff(nil, vnodeToDom(a, kxi), b, a, patches, kxi)
-  echo patches
+  var patches = newJSeq[Patch]()
+  echo diff(b, a, nil, vnodeToDom(a, kxi), patches)
+  for i in 0..<patches.len:
+    echo patches[i]
+  #hasDom(kxi.currentTree)
 
 proc testAppend() =
   let a = buildHtml(tdiv):
@@ -31,7 +40,19 @@ proc testInsert() =
       li: text "C"
   doDiff(a, b)
 
+proc testDelete() =
+  let a = buildHtml(tdiv):
+    ul:
+      li: text "A"
+      li: text "B"
+      li: text "C"
+  let b = buildHtml(tdiv):
+    ul:
+      discard
+  doDiff(a, b)
+
 kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard)
 
-#testAppend()
+testAppend()
 testInsert()
+testDelete()

From 418c027f6c1027291477f8ddf971649b0c9e8f13 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 27 Jun 2017 23:54:58 +0200
Subject: [PATCH 087/264] smart-diff algorithm works now

---
 src/karax.nim | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index f07bf71..f8230c7 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -234,8 +234,10 @@ proc apply(patches: JSeq[Patch]; kxi: KaraxInstance) =
 proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]): EqResult =
   result = eq(newNode, oldNode)
   case result
-  of identical:
+  of identical, similar:
     newNode.dom = oldNode.dom
+    if result == similar: updateStyles(newNode, oldNode)
+
     let newLength = newNode.len
     var oldLength = oldNode.len
     let minLength = min(newLength, oldLength)
@@ -306,8 +308,6 @@ proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]):
       patches.addPatch(pkRemove, current, current.childNodes[i], nil)
       result = different
 
-  of similar:
-    updateStyles(newNode, oldNode)
   of changed:
     assert oldNode.kind == VNodeKind.component
     let x = VComponent(oldNode)

From fe7d72fa4e6d8dfd1051b4e6bc159aacfa35f6ff Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 28 Jun 2017 08:46:48 +0200
Subject: [PATCH 088/264] special treatment for input and textarea fields;
 minor code cleanups

---
 src/karax.nim  |  6 ++++--
 src/vdom.nim   |  1 -
 tests/blur.nim | 13 +++++--------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index f8230c7..09a3e1b 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -52,7 +52,9 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
     let action = action
     let n = n
     result = proc (ev: Event) =
-      action(ev, n)
+      if n.kind == VNodeKind.textarea or n.kind == VNodeKind.input:
+        keyeventBody()
+      else: action(ev, n)
 
   proc enterWrapper(): (proc (ev: Event)) =
     let action = action
@@ -189,7 +191,7 @@ proc updateStyles(newNode, oldNode: VNode) =
   oldNode.style = newNode.style
 
 proc printV(n: VNode; depth: cstring = "") =
-  kout depth, cstring($n.kind), n.myid, cstring"key ", n.key
+  kout depth, cstring($n.kind), cstring"key ", n.key
   #for k, v in pairs(n.style):
   #  kout depth, "style: ", k, v
   if n.kind == VNodeKind.component:
diff --git a/src/vdom.nim b/src/vdom.nim
index 9a88d0a..e3f74b5 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -120,7 +120,6 @@ type
     style*: VStyle ## the style that should be applied to the virtual node.
     dom*: Node ## the attached real DOM node. Can be 'nil' if the virtual node
                ## is not part of the virtual DOM anymore.
-    myid*: int
 
   VComponent* = ref object of VNode ## The abstract class for every karax component.
     renderImpl*: proc(self: VComponent): VNode
diff --git a/tests/blur.nim b/tests/blur.nim
index 74b8ba1..4ad3eb1 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -4,7 +4,6 @@ type TextInput* = ref object of VComponent
   value: cstring
   isActive: bool
 
-var renderId: int
 proc render(x: VComponent): VNode =
   let self = TextInput(x)
 
@@ -37,18 +36,16 @@ proc render(x: VComponent): VNode =
     self.isActive = not self.isActive
     markDirty(self)
 
-  kout cstring"rendering ", self.myid
-  inc renderId
-  result = buildHtml(tdiv(style=style)):
-    input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip)
+  proc onchanged(ev: Event; n: VNode) =
+    kout cstring"onchanged", n.value
+
+  result = buildHtml(tdiv(style=style)):
+    textarea(style=inputStyle, value=self.value, onblur=flip, onfocus=flip, onkeyup=onchanged)
 
-var gid = 0
 proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring""): TextInput =
   result = newComponent(TextInput, render)
   result.style = style
   result.value = value
-  inc gid
-  result.myid = gid
 
 proc createDom(): VNode =
   result = buildHtml(tdiv):

From c987323dbaac4770e1c733046372ecbf38a1e7df Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 28 Jun 2017 09:44:50 +0200
Subject: [PATCH 089/264] test nested components (still buggy)

---
 tests/blur.nim | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/tests/blur.nim b/tests/blur.nim
index 4ad3eb1..02a0de2 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -34,21 +34,37 @@ proc render(x: VComponent): VNode =
 
   proc flip(ev: Event; n: VNode) =
     self.isActive = not self.isActive
+    kout cstring"onflip", n.value
     markDirty(self)
 
   proc onchanged(ev: Event; n: VNode) =
     kout cstring"onchanged", n.value
 
   result = buildHtml(tdiv(style=style)):
-    textarea(style=inputStyle, value=self.value, onblur=flip, onfocus=flip, onkeyup=onchanged)
+    input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip, onkeyup=onchanged)
 
 proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring""): TextInput =
   result = newComponent(TextInput, render)
   result.style = style
   result.value = value
 
+type
+  Combined = ref object of VComponent
+    a, b: TextInput
+
+proc renderComb(self: VComponent): VNode =
+  let self = Combined(self)
+  result = buildHtml(tdiv(style=self.style)):
+    self.a
+    self.b
+
+proc newCombined*(style: VStyle = VStyle()): Combined =
+  result = newComponent(Combined, renderComb)
+  result.a = newTextInput(style, "AAA")
+  result.b = newTextInput(style, "BBB")
+
 proc createDom(): VNode =
   result = buildHtml(tdiv):
-    newTextInput(value=cstring"test")
+    newCombined()
 
 setRenderer createDom

From ba88fb9a0b2e15c7eebf49498706b6a9c4ffdc49 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 28 Jun 2017 09:46:26 +0200
Subject: [PATCH 090/264] cancel redraw requests as an attempt to improve
 performance

---
 src/karax.nim | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 09a3e1b..0b1d8db 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -23,6 +23,7 @@ type
     postRenderCallback: proc ()
     toFocus: Node
     toFocusV: VNode
+    renderId: int
 
 var
   kxi*: KaraxInstance ## The current Karax instance. This is always used
@@ -354,7 +355,8 @@ proc dodraw(kxi: KaraxInstance) =
   if kxi.toFocus != nil:
     kxi.toFocus.focus()
 
-proc reqFrame(callback: proc()) {.importc: "window.requestAnimationFrame".}
+proc reqFrame(callback: proc()): int {.importc: "window.requestAnimationFrame".}
+proc cancelFrame(id: int) {.importc: "window.cancelAnimationFrame".}
 
 proc redraw*(kxi: KaraxInstance = kxi) =
   # we buffer redraw requests:
@@ -363,14 +365,15 @@ proc redraw*(kxi: KaraxInstance = kxi) =
       clearTimeout(drawTimeout)
     drawTimeout = setTimeout(dodraw, 30)
   elif true:
-    reqFrame(proc () = kxi.dodraw)
+    cancelFrame kxi.renderId
+    kxi.renderId = reqFrame(proc () = kxi.dodraw)
   else:
     dodraw(kxi)
 
 proc redrawSync*(kxi: KaraxInstance = kxi) = dodraw(kxi)
 
 proc init(ev: Event) =
-  reqFrame(proc () = kxi.dodraw)
+  kxi.renderId = reqFrame(proc () = kxi.dodraw)
 
 proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
                   clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =

From 0ad9d68c8102f336b4e721e30e06c40186e1880c Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 28 Jun 2017 11:26:09 +0200
Subject: [PATCH 091/264] fixes #35

---
 src/karax.nim | 39 ++++++++++++++++++++++++++++++---------
 src/kdom.nim  |  1 +
 src/vdom.nim  |  5 +++--
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 0b1d8db..5ea7d62 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -48,8 +48,9 @@ template keyeventBody() =
   # Do not call redraw() here! That is already done
   # by ``karax.addEventHandler``.
 
-proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
-  proc stdWrapper(): (proc (ev: Event)) =
+proc wrapEvent(d: Node; n: VNode; k: EventKind;
+               action: EventHandler): NativeEventHandler =
+  proc stdWrapper(): NativeEventHandler =
     let action = action
     let n = n
     result = proc (ev: Event) =
@@ -57,13 +58,13 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
         keyeventBody()
       else: action(ev, n)
 
-  proc enterWrapper(): (proc (ev: Event)) =
+  proc enterWrapper(): NativeEventHandler =
     let action = action
     let n = n
     result = proc (ev: Event) =
       if ev.keyCode == 13: keyeventBody()
 
-  proc laterWrapper(): (proc (ev: Event)) =
+  proc laterWrapper(): NativeEventHandler =
     let action = action
     let n = n
     var timer: Timeout
@@ -74,11 +75,14 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
 
   case k
   of EventKind.onkeyuplater:
-    d.addEventListener("keyup", laterWrapper())
+    result = laterWrapper()
+    d.addEventListener("keyup", result)
   of EventKind.onkeyupenter:
-    d.addEventListener("keyup", enterWrapper())
+    result = enterWrapper()
+    d.addEventListener("keyup", result)
   else:
-    d.addEventListener(toEventName[k], stdWrapper())
+    result = stdWrapper()
+    d.addEventListener(toEventName[k], result)
 
 # --------------------- DOM diff -----------------------------------------
 
@@ -90,6 +94,11 @@ template detach(n: VNode) =
 template attach(n: VNode) =
   n.dom = result
 
+proc applyEvents(n: VNode; kxi: KaraxInstance) =
+  let dest = n.dom
+  for i in 0..<len(n.events):
+    n.events[i][2] = wrapEvent(dest, n, n.events[i][0], n.events[i][1])
+
 proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
@@ -132,8 +141,7 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
   for k, v in attrs(n):
     if v != nil:
       result.setAttr(k, v)
-  for e, h in items(n.events):
-    wrapEvent(result, n, e, h)
+  applyEvents(n, kxi)
   if n == kxi.toFocusV and kxi.toFocus.isNil:
     kxi.toFocus = result
   if not n.style.isNil: applyStyle(result, n.style)
@@ -191,6 +199,17 @@ proc updateStyles(newNode, oldNode: VNode) =
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
 
+proc mergeEvents(newNode, oldNode: VNode) =
+  let d = oldNode.dom
+  for i in 0..<oldNode.events.len:
+    let k = oldNode.events[i][0]
+    let name = case k
+               of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
+               else: toEventName[k]
+    d.removeEventListener(name, oldNode.events[i][2])
+  shallowCopy(oldNode.events, newNode.events)
+  applyEvents(oldNode, kxi)
+
 proc printV(n: VNode; depth: cstring = "") =
   kout depth, cstring($n.kind), cstring"key ", n.key
   #for k, v in pairs(n.style):
@@ -240,6 +259,8 @@ proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]):
   of identical, similar:
     newNode.dom = oldNode.dom
     if result == similar: updateStyles(newNode, oldNode)
+    if newNode.events.len != 0 or oldNode.events.len != 0:
+      mergeEvents(newNode, oldNode)
 
     let newLength = newNode.len
     var oldLength = oldNode.len
diff --git a/src/kdom.nim b/src/kdom.nim
index 6799976..106666c 100644
--- a/src/kdom.nim
+++ b/src/kdom.nim
@@ -483,6 +483,7 @@ proc clearTimeout*(t: Timeout) {.importc, nodecl.}
 
 # EventTarget "methods"
 proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), useCapture: bool = false)
+proc removeEventListener*(et: EventTarget; ev: cstring; cb: proc(ev: Event))
 
 # Window "methods"
 proc alert*(w: Window, msg: cstring)
diff --git a/src/vdom.nim b/src/vdom.nim
index e3f74b5..b0f7293 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -104,6 +104,7 @@ buildLookupTables()
 
 type
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
+  NativeEventHandler* = proc (ev: Event) {.closure.}
   VKey* = int
 
   VNode* = ref object of RootObj
@@ -113,7 +114,7 @@ type
     kids: seq[VNode]
     # even index: key, odd index: value; done this way for memory efficiency:
     attrs: seq[cstring]
-    events*: seq[(EventKind, EventHandler)]
+    events*: seq[(EventKind, EventHandler, NativeEventHandler)]
     when false:
       hash*: Hash
       validHash*: bool
@@ -222,7 +223,7 @@ proc sameAttrs*(a, b: VNode): bool =
       if a.attrs[i] != b.attrs[i]: return false
 
 proc addEventListener*(n: VNode; event: EventKind; handler: EventHandler) =
-  n.events.add((event, handler))
+  n.events.add((event, handler, nil))
 
 template toStringAttr(field) =
   if n.field != nil:

From 4199c42e3b1624dada18c25ab20e425d3e233052 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 28 Jun 2017 12:56:51 +0200
Subject: [PATCH 092/264] combined components work

---
 tests/blur.nim | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/tests/blur.nim b/tests/blur.nim
index 02a0de2..f40cb97 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -58,8 +58,12 @@ proc renderComb(self: VComponent): VNode =
     self.a
     self.b
 
+proc changed(self: VComponent): bool =
+  let self = Combined(self)
+  result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
+
 proc newCombined*(style: VStyle = VStyle()): Combined =
-  result = newComponent(Combined, renderComb)
+  result = newComponent(Combined, renderComb, changed=changed)
   result.a = newTextInput(style, "AAA")
   result.b = newTextInput(style, "BBB")
 

From c681f0055f2d63c7cee91788e65e8cb2acf7db9d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 28 Jun 2017 15:23:19 +0200
Subject: [PATCH 093/264] update value property of real DOM nodes; minor DOM
 diff speedups; allow setFocus=false in the DSL

---
 src/jdict.nim    |  2 +-
 src/karax.nim    | 90 +++++++++++++++++++++++++++++-------------------
 src/karaxdsl.nim |  4 ++-
 tests/blur.nim   |  9 +++++
 4 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/src/jdict.nim b/src/jdict.nim
index b239af2..6e2aa9f 100644
--- a/src/jdict.nim
+++ b/src/jdict.nim
@@ -17,7 +17,7 @@ type
 proc `[]`*[T](s: JSeq[T], i: int): T {.importcpp: "#[#]", noSideEffect.}
 proc `[]=`*[T](s: JSeq[T], i: int, v: T) {.importcpp: "#[#] = #", noSideEffect.}
 
-proc newJSeq*[T](): JSeq[T] {.importcpp: "[@]".}
+proc newJSeq*[T](len: int = 0): JSeq[T] {.importcpp: "new Array(#)".}
 proc len*[T](s: JSeq[T]): int {.importcpp: "#.length", noSideEffect.}
 proc add*[T](s: JSeq[T]; x: T) {.importcpp: "#.push(#)", noSideEffect.}
 
diff --git a/src/karax.nim b/src/karax.nim
index 5ea7d62..ad8ddfc 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -14,6 +14,14 @@ proc key*(e: Node): VKey =
   else: result = -1
 proc `key=`*(e: Node; x: VKey) {.importcpp: "#.karaxKey = #", nodecl.}
 
+type
+  PatchKind = enum
+    pkReplace, pkRemove, pkAppend, pkInsertBefore
+  Patch = object
+    k: PatchKind
+    parent, current: Node
+    n: VNode
+
 type
   KaraxInstance* = ref object ## underlying karax instance. Usually you don't have
                               ## know about this.
@@ -24,6 +32,9 @@ type
     toFocus: Node
     toFocusV: VNode
     renderId: int
+    patches: seq[Patch] # we reuse this to save allocations
+    patchLen: int
+
 
 var
   kxi*: KaraxInstance ## The current Karax instance. This is always used
@@ -33,8 +44,9 @@ var
                       ## in your 'buildHtml' statement, it needs to be named
                       ## 'kxi'.
 
-proc setFocus*(n: VNode; kxi: KaraxInstance = kxi) =
-  kxi.toFocusV = n
+proc setFocus*(n: VNode; enabled = true; kxi: KaraxInstance = kxi) =
+  if enabled:
+    kxi.toFocusV = n
 
 # ----------------- event wrapping ---------------------------------------
 
@@ -199,7 +211,7 @@ proc updateStyles(newNode, oldNode: VNode) =
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
 
-proc mergeEvents(newNode, oldNode: VNode) =
+proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   let d = oldNode.dom
   for i in 0..<oldNode.events.len:
     let k = oldNode.events[i][0]
@@ -222,21 +234,22 @@ proc printV(n: VNode; depth: cstring = "") =
   for i in 0 ..< n.len:
     printV(n[i], depth & "  ")
 
-type
-  PatchKind = enum
-    pkReplace, pkRemove, pkAppend, pkInsertBefore
-  Patch = object
-    k: PatchKind
-    parent, current: Node
-    n: VNode
+template addPatch(kxi: KaraxInstance; ka: PatchKind; parenta, currenta: Node;
+              na: VNode) =
+  let L = kxi.patchLen
+  if L >= kxi.patches.len:
+    # allocate more space:
+    kxi.patches.add(Patch(k: ka, parent: parenta, current: currenta, n: na))
+  else:
+    kxi.patches[L].k = ka
+    kxi.patches[L].parent = parenta
+    kxi.patches[L].current = currenta
+    kxi.patches[L].n = na
+  inc kxi.patchLen
 
-proc addPatch(patches: JSeq[Patch]; k: PatchKind; parent, current: Node;
-              n: VNode) =
-  patches.add(Patch(k: k, parent: parent, current: current, n: n))
-
-proc apply(patches: JSeq[Patch]; kxi: KaraxInstance) =
-  for i in 0..<patches.len:
-    let p = patches[i]
+proc apply(kxi: KaraxInstance) =
+  for i in 0..<kxi.patchLen:
+    let p = kxi.patches[i]
     case p.k
     of pkReplace:
       let nn = vnodeToDom(p.n, kxi)
@@ -252,15 +265,18 @@ proc apply(patches: JSeq[Patch]; kxi: KaraxInstance) =
     of pkInsertBefore:
       let nn = vnodeToDom(p.n, kxi)
       p.parent.insertBefore(nn, p.current)
+  kxi.patchLen = 0
 
-proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]): EqResult =
+proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
   result = eq(newNode, oldNode)
   case result
   of identical, similar:
     newNode.dom = oldNode.dom
     if result == similar: updateStyles(newNode, oldNode)
     if newNode.events.len != 0 or oldNode.events.len != 0:
-      mergeEvents(newNode, oldNode)
+      mergeEvents(newNode, oldNode, kxi)
+    if newNode.kind == VNodeKind.input or newNode.kind == VNodeKind.textarea:
+      oldNode.dom.value = newNode.text
 
     let newLength = newNode.len
     var oldLength = oldNode.len
@@ -271,7 +287,7 @@ proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]):
     var commonPrefix = 0
 
     template eqAndUpdate(a: VNode; i: int; b: VNode; j: int; info, action: untyped) =
-      let oldLen = patches.len
+      let oldLen = kxi.patchLen
       when false:
         if oldNode.kind notin {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
           assert current != nil
@@ -280,16 +296,16 @@ proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]):
 
       let r = if oldNode.kind == VNodeKind.component or oldNode.kind == VNodeKind.vthunk or
                  oldNode.kind == VNodeKind.dthunk:
-                diff(a[i], b[j], parent, current, patches)
+                diff(a[i], b[j], parent, current, kxi)
               else:
-                diff(a[i], b[j], current, current.childNodes[j], patches)
+                diff(a[i], b[j], current, current.childNodes[j], kxi)
       case r
       of identical, changed, similar:
         a[i] = b[j]
         action
       of different:
         # undo what 'diff' would have done:
-        shrink(patches, oldLen)
+        kxi.patchLen = oldLen
         if result != different: result = r
         break
       #of similar:
@@ -311,25 +327,25 @@ proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]):
     var pos = min(oldPos, newPos) + 1
     for i in commonPrefix..pos-1:
       if diff(newNode[i], oldNode[i], current, current.childNodes[i],
-              patches) != different:
+              kxi) != different:
         newNode[i] = oldNode[i]
       else:
         result = different
 
     if oldPos + 1 == oldLength:
       for i in pos..newPos:
-        patches.addPatch(pkAppend, current, nil, newNode[i])
+        kxi.addPatch(pkAppend, current, nil, newNode[i])
         result = different
     else:
       let before = current.childNodes[oldPos + 1]
       for i in pos..newPos:
-        patches.addPatch(pkInsertBefore, current, before, newNode[i])
+        kxi.addPatch(pkInsertBefore, current, before, newNode[i])
         result = different
     # XXX call 'attach' here?
     for i in pos..oldPos:
       detach(oldNode[i])
       #doAssert i < current.childNodes.len
-      patches.addPatch(pkRemove, current, current.childNodes[i], nil)
+      kxi.addPatch(pkRemove, current, current.childNodes[i], nil)
       result = different
 
   of changed:
@@ -340,9 +356,9 @@ proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]):
     x.updatedImpl(x)
     if oldExpanded == nil:
       detach(oldNode)
-      patches.addPatch(pkReplace, parent, current, x.expanded)
+      kxi.addPatch(pkReplace, parent, current, x.expanded)
     else:
-      let res = diff(x.expanded, oldExpanded, parent, current, patches)
+      let res = diff(x.expanded, oldExpanded, parent, current, kxi)
       if res != different:
         x.expanded = oldExpanded
         assert oldExpanded.dom != nil, "old expanded.dom is nil"
@@ -350,7 +366,7 @@ proc diff(newNode, oldNode: VNode;parent, current: Node; patches: JSeq[Patch]):
         assert x.expanded.dom != nil, "expanded.dom is nil"
   of different:
     detach(oldNode)
-    patches.addPatch(pkReplace, parent, current, newNode)
+    kxi.addPatch(pkReplace, parent, current, newNode)
 
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
@@ -363,9 +379,9 @@ proc dodraw(kxi: KaraxInstance) =
     replaceById(kxi.rootId, asdom)
   else:
     let olddom = document.getElementById(kxi.rootId)
-    var patches = newJSeq[Patch]()
-    discard diff(newtree, kxi.currentTree, nil, olddom, patches)
-    patches.apply(kxi)
+    discard diff(newtree, kxi.currentTree, nil, olddom, kxi)
+    #kout cstring"patch len ", patches.len
+    apply(kxi)
     kxi.currentTree = newtree
   #doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
@@ -375,6 +391,7 @@ proc dodraw(kxi: KaraxInstance) =
   # now that it's part of the DOM, give it the focus:
   if kxi.toFocus != nil:
     kxi.toFocus.focus()
+  kxi.renderId = 0
 
 proc reqFrame(callback: proc()): int {.importc: "window.requestAnimationFrame".}
 proc cancelFrame(id: int) {.importc: "window.cancelAnimationFrame".}
@@ -386,8 +403,8 @@ proc redraw*(kxi: KaraxInstance = kxi) =
       clearTimeout(drawTimeout)
     drawTimeout = setTimeout(dodraw, 30)
   elif true:
-    cancelFrame kxi.renderId
-    kxi.renderId = reqFrame(proc () = kxi.dodraw)
+    if kxi.renderId == 0:
+      kxi.renderId = reqFrame(proc () = kxi.dodraw)
   else:
     dodraw(kxi)
 
@@ -400,7 +417,8 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
                   clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =
   ## Setup Karax. Usually the return value can be ignored.
   result = KaraxInstance(rootId: root, renderer: renderer,
-                         postRenderCallback: clientPostRenderCallback)
+                         postRenderCallback: clientPostRenderCallback,
+                         patches: newSeq[Patch](60))
   kxi = result
   window.onload = init
 
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index b40f3c4..47cd761 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -85,12 +85,14 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
               tmp, newDotExpr(bindSym"EventKind", x[0]), x[1], ident("kxi"))
           elif key in SpecialAttrs:
             result.add newDotAsgn(tmp, key, x[1])
+          elif eqIdent(key, "setFocus"):
+            result.add newCall(x, tmp, x[1], ident"kxi")
           else:
             result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
         elif ck != ComponentKind.Tag:
           call.add x
         elif eqIdent(x, "setFocus"):
-          result.add newCall(x, tmp, ident"kxi")
+          result.add newCall(x, tmp, bindSym"true", ident"kxi")
         else:
           result.add tcall2(x, tmp)
       if tmpContext == nil:
diff --git a/tests/blur.nim b/tests/blur.nim
index f40cb97..84d69dd 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -54,9 +54,18 @@ type
 
 proc renderComb(self: VComponent): VNode =
   let self = Combined(self)
+
+  proc bu(ev: Event; n: VNode) =
+    self.a.value = ""
+    self.b.value = ""
+    markDirty(self.a)
+    markDirty(self.b)
+
   result = buildHtml(tdiv(style=self.style)):
     self.a
     self.b
+    button(onclick=bu):
+      text "reset"
 
 proc changed(self: VComponent): bool =
   let self = Combined(self)

From 8eef2074b43ddd60147c6276c7f1bc0f849decaf Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 28 Jun 2017 22:54:24 +0200
Subject: [PATCH 094/264] make setFocus: bool work

---
 examples/todoapp/todoapp.nim | 2 +-
 src/karaxdsl.nim             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index f74abc3..0caa70c 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -90,7 +90,7 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.compac
       else:
         input(class = "edit", name = "title", key=id,
           onblur = focusLost,
-          onkeyupenter = editEntry, value = d, setFocus)
+          onkeyupenter = editEntry, value = d, setFocus=true)
 
 proc makeFooter(entriesCount, completedCount: int): VNode {.compact.} =
   result = buildHtml(footer(class = "footer")):
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index 47cd761..15c6fc6 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -86,7 +86,7 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
           elif key in SpecialAttrs:
             result.add newDotAsgn(tmp, key, x[1])
           elif eqIdent(key, "setFocus"):
-            result.add newCall(x, tmp, x[1], ident"kxi")
+            result.add newCall(key, tmp, x[1], ident"kxi")
           else:
             result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
         elif ck != ComponentKind.Tag:

From e7399094667f3fb6d31477feefce7457050d67b4 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 29 Jun 2017 11:04:43 +0200
Subject: [PATCH 095/264] rollback dom.value behaviour; fixes
 removeEventListener problem

---
 src/karax.nim | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index ad8ddfc..595ff60 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -213,12 +213,13 @@ proc updateStyles(newNode, oldNode: VNode) =
 
 proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   let d = oldNode.dom
-  for i in 0..<oldNode.events.len:
-    let k = oldNode.events[i][0]
-    let name = case k
-               of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
-               else: toEventName[k]
-    d.removeEventListener(name, oldNode.events[i][2])
+  if d != nil:
+    for i in 0..<oldNode.events.len:
+      let k = oldNode.events[i][0]
+      let name = case k
+                of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
+                else: toEventName[k]
+      d.removeEventListener(name, oldNode.events[i][2])
   shallowCopy(oldNode.events, newNode.events)
   applyEvents(oldNode, kxi)
 
@@ -275,8 +276,8 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     if result == similar: updateStyles(newNode, oldNode)
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
-    if newNode.kind == VNodeKind.input or newNode.kind == VNodeKind.textarea:
-      oldNode.dom.value = newNode.text
+    #if newNode.kind == VNodeKind.input or newNode.kind == VNodeKind.textarea:
+    #  oldNode.dom.value = newNode.text
 
     let newLength = newNode.len
     var oldLength = oldNode.len

From 8e777a0c19af21f004e1aaf37e10fe6578cfa258 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 29 Jun 2017 12:25:08 +0200
Subject: [PATCH 096/264] different detach handling to make event handlers work
 better

---
 src/karax.nim | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 595ff60..b8c2aa1 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -16,7 +16,7 @@ proc `key=`*(e: Node; x: VKey) {.importcpp: "#.karaxKey = #", nodecl.}
 
 type
   PatchKind = enum
-    pkReplace, pkRemove, pkAppend, pkInsertBefore
+    pkReplace, pkRemove, pkAppend, pkInsertBefore, pkDetach
   Patch = object
     k: PatchKind
     parent, current: Node
@@ -99,10 +99,8 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind;
 # --------------------- DOM diff -----------------------------------------
 
 template detach(n: VNode) =
-  if n.kind == VNodeKind.component:
-    let x = VComponent(n)
-    if x.onDetachImpl != nil: x.onDetachImpl(x)
-  n.dom = nil
+  addPatch(kxi, pkDetach, nil, nil, n)
+
 template attach(n: VNode) =
   n.dom = result
 
@@ -213,13 +211,12 @@ proc updateStyles(newNode, oldNode: VNode) =
 
 proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   let d = oldNode.dom
-  if d != nil:
-    for i in 0..<oldNode.events.len:
-      let k = oldNode.events[i][0]
-      let name = case k
+  for i in 0..<oldNode.events.len:
+    let k = oldNode.events[i][0]
+    let name = case k
                 of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
                 else: toEventName[k]
-      d.removeEventListener(name, oldNode.events[i][2])
+    d.removeEventListener(name, oldNode.events[i][2])
   shallowCopy(oldNode.events, newNode.events)
   applyEvents(oldNode, kxi)
 
@@ -235,7 +232,7 @@ proc printV(n: VNode; depth: cstring = "") =
   for i in 0 ..< n.len:
     printV(n[i], depth & "  ")
 
-template addPatch(kxi: KaraxInstance; ka: PatchKind; parenta, currenta: Node;
+proc addPatch(kxi: KaraxInstance; ka: PatchKind; parenta, currenta: Node;
               na: VNode) =
   let L = kxi.patchLen
   if L >= kxi.patches.len:
@@ -266,6 +263,12 @@ proc apply(kxi: KaraxInstance) =
     of pkInsertBefore:
       let nn = vnodeToDom(p.n, kxi)
       p.parent.insertBefore(nn, p.current)
+    of pkDetach:
+      let n = p.n
+      if n.kind == VNodeKind.component:
+        let x = VComponent(n)
+        if x.onDetachImpl != nil: x.onDetachImpl(x)
+      n.dom = nil
   kxi.patchLen = 0
 
 proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
@@ -273,6 +276,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
   case result
   of identical, similar:
     newNode.dom = oldNode.dom
+    assert oldNode.dom != nil
     if result == similar: updateStyles(newNode, oldNode)
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
@@ -280,9 +284,9 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     #  oldNode.dom.value = newNode.text
 
     let newLength = newNode.len
-    var oldLength = oldNode.len
-    let minLength = min(newLength, oldLength)
+    let oldLength = oldNode.len
     if newLength == 0 and oldLength == 0: return result
+    let minLength = min(newLength, oldLength)
 
     assert oldNode.kind == newNode.kind
     var commonPrefix = 0

From ea7eee756498452224bc822aeeb3d3a27829e4e8 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 29 Jun 2017 17:10:29 +0200
Subject: [PATCH 097/264] better input element handling

---
 src/karax.nim  | 13 ++++++++-----
 tests/blur.nim | 43 ++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index b8c2aa1..3c41d7e 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -54,9 +54,11 @@ template nativeValue(ev): cstring = cast[Element](ev.target).value
 template setNativeValue(ev, val) = cast[Element](ev.target).value = val
 
 template keyeventBody() =
-  n.value = nativeValue(ev)
+  let v = nativeValue(ev)
+  n.value = v
   action(ev, n)
-  setNativeValue(ev, n.value)
+  if n.value != v:
+    setNativeValue(ev, n.value)
   # Do not call redraw() here! That is already done
   # by ``karax.addEventHandler``.
 
@@ -276,12 +278,13 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
   case result
   of identical, similar:
     newNode.dom = oldNode.dom
-    assert oldNode.dom != nil
     if result == similar: updateStyles(newNode, oldNode)
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
-    #if newNode.kind == VNodeKind.input or newNode.kind == VNodeKind.textarea:
-    #  oldNode.dom.value = newNode.text
+    if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
+      if oldNode.text != newNode.text:
+        oldNode.text = newNode.text
+        oldNode.dom.value = newNode.text
 
     let newLength = newNode.len
     let oldLength = oldNode.len
diff --git a/tests/blur.nim b/tests/blur.nim
index 84d69dd..844ab8b 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -3,6 +3,7 @@ import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
 type TextInput* = ref object of VComponent
   value: cstring
   isActive: bool
+  onchange: proc (value: cstring)
 
 proc render(x: VComponent): VNode =
   let self = TextInput(x)
@@ -38,15 +39,23 @@ proc render(x: VComponent): VNode =
     markDirty(self)
 
   proc onchanged(ev: Event; n: VNode) =
-    kout cstring"onchanged", n.value
+    if self.onchange != nil and self.value != n.value:
+      self.onchange n.value
+      self.value = n.value
 
   result = buildHtml(tdiv(style=style)):
     input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip, onkeyup=onchanged)
 
-proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring""): TextInput =
+proc setValue(x: TextInput; value: cstring) =
+  x.value = value
+  markDirty(x)
+
+proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring"",
+                   onchange: proc(v: cstring) = nil): TextInput =
   result = newComponent(TextInput, render)
   result.style = style
   result.value = value
+  result.onchange = onchange
 
 type
   Combined = ref object of VComponent
@@ -76,8 +85,36 @@ proc newCombined*(style: VStyle = VStyle()): Combined =
   result.a = newTextInput(style, "AAA")
   result.b = newTextInput(style, "BBB")
 
+
+var
+  persons: seq[cstring] = @[cstring"Karax", "Abathur", "Fenix"]
+  selected = -1
+  errmsg = cstring""
+  ti = newTextInput(VStyle(), "", proc (v: cstring) =
+    if v.len > 0:
+      if selected >= 0: persons[selected] = v
+      errmsg = ""
+    else:
+      errmsg = "name must not be empty"
+  )
+
+proc renderPerson(text: cstring, index: int): VNode =
+  proc select(ev: Event, n: VNode) =
+    selected = index
+    ti.setValue(persons[selected])
+
+  result = buildHtml():
+    tdiv(onClick=select):
+      text text
+
 proc createDom(): VNode =
   result = buildHtml(tdiv):
-    newCombined()
+    tdiv:
+      for index, text in persons.pairs:
+        renderPerson(text, index)
+    tdiv:
+      ti
+    tdiv:
+      text errmsg
 
 setRenderer createDom

From d538b7bc938f8c70cf72980b9e5a7ae8905192e3 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 2 Jul 2017 09:34:58 +0200
Subject: [PATCH 098/264] try to make components aware of the previous state

---
 src/karax.nim  | 10 ++++++---
 src/vdom.nim   | 17 ++++++++-------
 tests/blur.nim | 56 +++++++++++++++++++++++++++++++-------------------
 3 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 3c41d7e..5edda89 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -132,7 +132,8 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
     assert x.renderImpl != nil
     if x.expanded == nil:
       x.expanded = x.renderImpl(x)
-      x.updatedImpl(x)
+      #  x.updatedImpl(x, nil)
+    assert x.expanded != nil
     result = vnodeToDom(x.expanded, kxi)
     attach n
     return result
@@ -197,7 +198,7 @@ proc eq(a, b: VNode): EqResult =
     if a.text != b.text: return different
     let x = VComponent(b)
     assert x.changedImpl != nil
-    return if x.changedImpl(x): changed else: identical
+    return if x.changedImpl(x, VComponent(a)): changed else: identical
   if not sameAttrs(a, b): return different
   if a.class != b.class: return different
   if not eq(a.style, b.style): return similar
@@ -282,6 +283,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
     if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
+      echo "comparing ", oldNode.text != newNode.text
       if oldNode.text != newNode.text:
         oldNode.text = newNode.text
         oldNode.dom.value = newNode.text
@@ -359,9 +361,11 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
   of changed:
     assert oldNode.kind == VNodeKind.component
     let x = VComponent(oldNode)
+    x.updatedImpl(x, VComponent newNode)
     let oldExpanded = x.expanded
     x.expanded = x.renderImpl(x)
-    x.updatedImpl(x)
+    x.version = VComponent(newNode).version
+    #x.updatedImpl(x)
     if oldExpanded == nil:
       detach(oldNode)
       kxi.addPatch(pkReplace, parent, current, x.expanded)
diff --git a/src/vdom.nim b/src/vdom.nim
index b0f7293..bbb4eac 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -124,14 +124,13 @@ type
 
   VComponent* = ref object of VNode ## The abstract class for every karax component.
     renderImpl*: proc(self: VComponent): VNode
-    changedImpl*: proc(self: VComponent): bool
-    updatedImpl*: proc(self: VComponent)
+    changedImpl*: proc(self, newInstance: VComponent): bool
+    updatedImpl*: proc(self, newInstance: VComponent)
     onAttachImpl*: proc(self: VComponent)
     onDetachImpl*: proc(self: VComponent)
     version*: int         ## Update this to trigger a redraw by karax. Usually you
                           ## should call 'markDirty' instead which is an alias for
                           ## 'inc version'.
-    renderedVersion*: int ## Do not touch. Used by karax.
     expanded*: VNode      ## Do not touch. Used by karax. The VDOM the component
                           ## expanded to.
 
@@ -153,19 +152,19 @@ proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, key: -1, kids: @args)
 
-proc defaultChangedImpl*(v: VComponent): bool =
+proc defaultChangedImpl*(v, newInstance: VComponent): bool =
   ## The default implementation of 'changed'.
-  result = v.version != v.renderedVersion
+  result = v.version != newInstance.version
 
-proc defaultUpdatedImpl*(v: VComponent) =
-  v.renderedVersion = v.version
+proc defaultUpdatedImpl*(v, newInstance: VComponent) =
+  discard
 
 template newComponent*[T](t: typeDesc[T];
                  render: (proc(self: VComponent): VNode) not nil,
                  onAttach: proc(self: VComponent) = nil,
                  onDetach: proc(self: VComponent) = nil,
-                 changed: (proc(self: VComponent): bool) = defaultChangedImpl,
-                 updated: proc(self: VComponent) = defaultUpdatedImpl): T =
+                 changed: (proc(self, newInstance: VComponent): bool) = defaultChangedImpl,
+                 updated: proc(self, newInstance: VComponent) = defaultUpdatedImpl): T =
   ## Use this template to create new components.
   T(kind: VNodeKind.component, key: -1,
     text: cstring(astToStr(t)), renderImpl: render,
diff --git a/tests/blur.nim b/tests/blur.nim
index 844ab8b..3823f93 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -41,18 +41,33 @@ proc render(x: VComponent): VNode =
   proc onchanged(ev: Event; n: VNode) =
     if self.onchange != nil and self.value != n.value:
       self.onchange n.value
-      self.value = n.value
+      #self.value = n.value
 
   result = buildHtml(tdiv(style=style)):
     input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip, onkeyup=onchanged)
 
-proc setValue(x: TextInput; value: cstring) =
-  x.value = value
-  markDirty(x)
+#proc setValue(x: TextInput; value: cstring) =
+#  x.value = value
+#  markDirty(x)
+
+proc update(current, next: VComponent) =
+  let current = TextInput(current)
+  let next = TextInput(next)
+  if not current.isActive:
+    current.value = next.value
+    echo "updated! ", current.value
+  else:
+    echo "not updated! ", current.value
+  #markDirty(current)
+
+proc changed(current, next: VComponent): bool =
+  let current = TextInput(current)
+  let next = TextInput(next)
+  result = next.value != current.value or true
 
 proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring"",
                    onchange: proc(v: cstring) = nil): TextInput =
-  result = newComponent(TextInput, render)
+  result = newComponent(TextInput, render, changed=changed, updated=update)
   result.style = style
   result.value = value
   result.onchange = onchange
@@ -76,32 +91,25 @@ proc renderComb(self: VComponent): VNode =
     button(onclick=bu):
       text "reset"
 
-proc changed(self: VComponent): bool =
-  let self = Combined(self)
-  result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
+when false:
+  proc changed(self: VComponent): bool =
+    let self = Combined(self)
+    result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
 
-proc newCombined*(style: VStyle = VStyle()): Combined =
-  result = newComponent(Combined, renderComb, changed=changed)
-  result.a = newTextInput(style, "AAA")
-  result.b = newTextInput(style, "BBB")
+  proc newCombined*(style: VStyle = VStyle()): Combined =
+    result = newComponent(Combined, renderComb, changed=changed)
+    result.a = newTextInput(style, "AAA")
+    result.b = newTextInput(style, "BBB")
 
 
 var
   persons: seq[cstring] = @[cstring"Karax", "Abathur", "Fenix"]
   selected = -1
   errmsg = cstring""
-  ti = newTextInput(VStyle(), "", proc (v: cstring) =
-    if v.len > 0:
-      if selected >= 0: persons[selected] = v
-      errmsg = ""
-    else:
-      errmsg = "name must not be empty"
-  )
 
 proc renderPerson(text: cstring, index: int): VNode =
   proc select(ev: Event, n: VNode) =
     selected = index
-    ti.setValue(persons[selected])
 
   result = buildHtml():
     tdiv(onClick=select):
@@ -113,7 +121,13 @@ proc createDom(): VNode =
       for index, text in persons.pairs:
         renderPerson(text, index)
     tdiv:
-      ti
+      newTextInput(VStyle(), if selected >= 0: persons[selected] else: "", proc (v: cstring) =
+        if v.len > 0:
+          if selected >= 0: persons[selected] = v
+          errmsg = ""
+        else:
+          errmsg = "name must not be empty"
+      )
     tdiv:
       text errmsg
 

From 43ee8903561b0d06adb26c1d88f6d8ecb4cd7929 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 3 Jul 2017 23:03:30 +0200
Subject: [PATCH 099/264] fix exponential blowup in diff algorith; wip

---
 src/karax.nim      | 96 +++++++++++++++++++++++++++++++++-------------
 tests/difftest.nim | 37 +++++++++++++-----
 2 files changed, 96 insertions(+), 37 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 3c41d7e..0be777a 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -34,6 +34,7 @@ type
     renderId: int
     patches: seq[Patch] # we reuse this to save allocations
     patchLen: int
+    recursion: int
 
 
 var
@@ -161,6 +162,9 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
 proc same(n: VNode, e: Node): bool =
   if n.kind == VNodeKind.component:
     result = same(VComponent(n).expanded, e)
+  elif n.kind == VNodeKind.vthunk or n.kind == VNodeKind.dthunk:
+    # we don't check these for now:
+    result = true
   elif toTag[n.kind] == e.nodename:
     result = true
     if n.kind != VNodeKind.text:
@@ -178,7 +182,7 @@ proc replaceById(id: cstring; newTree: Node) =
 
 type
   EqResult = enum
-    changed, different, similar, identical
+    changed, different, similar, identical, usenewNode
 
 proc eq(a, b: VNode): EqResult =
   if a.kind != b.kind: return different
@@ -274,6 +278,13 @@ proc apply(kxi: KaraxInstance) =
   kxi.patchLen = 0
 
 proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
+  if kxi.recursion > 100:
+    echo "newNode ", newNode.kind, " oldNode ", oldNode.kind, " eq ", eq(newNode, oldNode)
+    if oldNode.kind == VNodeKind.text:
+      echo oldNode.text
+    return
+    #doAssert false, "overflow!"
+  inc kxi.recursion
   result = eq(newNode, oldNode)
   case result
   of identical, similar:
@@ -293,68 +304,85 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
 
     assert oldNode.kind == newNode.kind
     var commonPrefix = 0
+    let isSpecial = oldNode.kind == VNodeKind.component or
+                    oldNode.kind == VNodeKind.vthunk or
+                    oldNode.kind == VNodeKind.dthunk
 
     template eqAndUpdate(a: VNode; i: int; b: VNode; j: int; info, action: untyped) =
       let oldLen = kxi.patchLen
-      when false:
-        if oldNode.kind notin {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
-          assert current != nil
-          assert current.childNodes[j] != nil, $info
-          assert oldNode.len == current.len
-
-      let r = if oldNode.kind == VNodeKind.component or oldNode.kind == VNodeKind.vthunk or
-                 oldNode.kind == VNodeKind.dthunk:
+      assert i < a.len
+      assert j < b.len
+      let r = if isSpecial:
                 diff(a[i], b[j], parent, current, kxi)
               else:
-                diff(a[i], b[j], current, current.childNodes[j], kxi)
+                (assert j < current.len;
+                diff(a[i], b[j], current, current.childNodes[j], kxi))
       case r
       of identical, changed, similar:
         a[i] = b[j]
         action
+      of usenewNode:
+        b[j] = a[i]
+        action
       of different:
         # undo what 'diff' would have done:
         kxi.patchLen = oldLen
-        if result != different: result = r
+        #if result != different: result = r
         break
-      #of similar:
-      #  updateStyles(a[i], b[j])
-      #  a[i] = b[j]
-      #  action
-
+    # compute common prefix:
     while commonPrefix < minLength:
       eqAndUpdate(newNode, commonPrefix, oldNode, commonPrefix, cstring"prefix"):
         inc commonPrefix
 
+    # compute common suffix:
     var oldPos = oldLength - 1
     var newPos = newLength - 1
     while oldPos >= commonPrefix and newPos >= commonPrefix:
       eqAndUpdate(newNode, newPos, oldNode, oldPos, cstring"suffix"):
         dec oldPos
         dec newPos
+        echo "came here"
 
-    var pos = min(oldPos, newPos) + 1
-    for i in commonPrefix..pos-1:
-      if diff(newNode[i], oldNode[i], current, current.childNodes[i],
-              kxi) != different:
-        newNode[i] = oldNode[i]
-      else:
-        result = different
+    let pos = min(oldPos, newPos) + 1
+    # now the different children are in commonPrefix .. pos - 1:
+    when false:
+      for i in commonPrefix..pos-1:
+        detach(oldNode[i])
+        kxi.addPatch(pkReplace, current, current.childNodes[i], newNode[i])
+    when true:
+      for i in commonPrefix..pos-1:
+        let r = diff(newNode[i], oldNode[i], current, current.childNodes[i],
+                kxi)
+        if r == usenewNode:
+          oldNode[i] = newNode[i]
+        elif r != different:
+          newNode[i] = oldNode[i]
+        #else:
+        #  result = different
 
     if oldPos + 1 == oldLength:
       for i in pos..newPos:
         kxi.addPatch(pkAppend, current, nil, newNode[i])
-        result = different
+        result = usenewNode
+        #result = different
     else:
       let before = current.childNodes[oldPos + 1]
       for i in pos..newPos:
         kxi.addPatch(pkInsertBefore, current, before, newNode[i])
-        result = different
+        result = usenewNode
+        #result = different
     # XXX call 'attach' here?
     for i in pos..oldPos:
       detach(oldNode[i])
       #doAssert i < current.childNodes.len
       kxi.addPatch(pkRemove, current, current.childNodes[i], nil)
-      result = different
+      result = usenewNode #different
+    # after the applied patch, conceptually the nodes are identical, so
+    # no further search is required. 'changed' needs to be propagated
+    # for the component system to work. 'similar' was transformed into
+    # identical too:
+    #if result == different or result == similar:
+    #  result = identical
 
   of changed:
     assert oldNode.kind == VNodeKind.component
@@ -375,6 +403,16 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
   of different:
     detach(oldNode)
     kxi.addPatch(pkReplace, parent, current, newNode)
+  of usenewNode: doAssert(false, "eq returned usenewNode")
+  dec kxi.recursion
+
+when defined(stats):
+  proc depth(n: VNode; total: var int): int =
+    var m = 0
+    for i in 0..<n.len:
+      m = max(m, depth(n[i], total))
+    result = m + 1
+    inc total
 
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
@@ -391,7 +429,7 @@ proc dodraw(kxi: KaraxInstance) =
     #kout cstring"patch len ", patches.len
     apply(kxi)
     kxi.currentTree = newtree
-  #doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
+  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
     kxi.postRenderCallback()
@@ -400,6 +438,10 @@ proc dodraw(kxi: KaraxInstance) =
   if kxi.toFocus != nil:
     kxi.toFocus.focus()
   kxi.renderId = 0
+  kxi.recursion = 0
+  when defined(stats):
+    var total = 0
+    echo "depth ", depth(kxi.currentTree, total), " total ", total
 
 proc reqFrame(callback: proc()): int {.importc: "window.requestAnimationFrame".}
 proc cancelFrame(id: int) {.importc: "window.cancelAnimationFrame".}
diff --git a/tests/difftest.nim b/tests/difftest.nim
index bd90b6a..52b354f 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -9,12 +9,27 @@ proc hasDom(n: Vnode) =
     doAssert n.dom != nil
     for i in 0..<n.len: hasDom(n[i])
 
-proc doDiff(a, b: VNode) =
-  var patches = newJSeq[Patch]()
-  echo diff(b, a, nil, vnodeToDom(a, kxi), patches)
-  for i in 0..<patches.len:
-    echo patches[i]
+proc shortRepr(n: VNode): string =
+  if n == nil:
+    result = "nil"
+  elif n.kind == VNodeKind.text:
+    result = $n.text
+  else:
+    result = $n.kind
+    for i in 0..<n.len:
+      result &= " " & shortRepr(n[i])
+
+proc doDiff(a, b: VNode; expected: varargs[string]) =
+  discard diff(b, a, nil, vnodeToDom(a, kxi), kxi)
+  for i in 0..<kxi.patchLen:
+    let p = $kxi.patches[i].k & " " & shortRepr(kxi.patches[i].n)
+    echo "got ", p
+    if i >= expected.len:
+      echo "patches differ; expected nothing but got: ", p
+    elif p != expected[i]:
+      echo "patches differ; expected ", expected[i], " but got: ", p
   #hasDom(kxi.currentTree)
+  kxi.patchLen = 0
 
 proc testAppend() =
   let a = buildHtml(tdiv):
@@ -26,7 +41,7 @@ proc testAppend() =
       li: text "A"
       li: text "B"
       li: text "C"
-  doDiff(a, b)
+  doDiff(a, b, "pkAppend li C")
 
 proc testInsert() =
   let a = buildHtml(tdiv):
@@ -38,7 +53,7 @@ proc testInsert() =
       li: text "A"
       li: text "B"
       li: text "C"
-  doDiff(a, b)
+  doDiff(a, b, "pkInsert li B")
 
 proc testDelete() =
   let a = buildHtml(tdiv):
@@ -49,10 +64,12 @@ proc testDelete() =
   let b = buildHtml(tdiv):
     ul:
       discard
-  doDiff(a, b)
+  doDiff(a, b, "pkDetach li A", "pkRemove nil",
+               "pkDetach li B", "pkRemove nil",
+               "pkDetach li C", "pkRemove nil")
 
 kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard)
 
-testAppend()
+#testAppend()
 testInsert()
-testDelete()
+#testDelete()

From 5f7f33bb0232810cd9f9edd9454caa7230814e81 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 4 Jul 2017 08:04:04 +0200
Subject: [PATCH 100/264] wip

---
 src/karax.nim      |  7 +++----
 tests/difftest.nim | 33 +++++++++++++++++++++++++++++----
 tests/tester.nim   |  1 +
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 0be777a..147965c 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -282,7 +282,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     echo "newNode ", newNode.kind, " oldNode ", oldNode.kind, " eq ", eq(newNode, oldNode)
     if oldNode.kind == VNodeKind.text:
       echo oldNode.text
-    return
+    #return
     #doAssert false, "overflow!"
   inc kxi.recursion
   result = eq(newNode, oldNode)
@@ -315,7 +315,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       let r = if isSpecial:
                 diff(a[i], b[j], parent, current, kxi)
               else:
-                (assert j < current.len;
+                (assert same(b, current); #(j < current.len, "j: " & $j & " len " & $current.len);
                 diff(a[i], b[j], current, current.childNodes[j], kxi))
       case r
       of identical, changed, similar:
@@ -327,7 +327,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       of different:
         # undo what 'diff' would have done:
         kxi.patchLen = oldLen
-        #if result != different: result = r
+        if result != different: result = r
         break
     # compute common prefix:
     while commonPrefix < minLength:
@@ -341,7 +341,6 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       eqAndUpdate(newNode, newPos, oldNode, oldPos, cstring"suffix"):
         dec oldPos
         dec newPos
-        echo "came here"
 
     let pos = min(oldPos, newPos) + 1
     # now the different children are in commonPrefix .. pos - 1:
diff --git a/tests/difftest.nim b/tests/difftest.nim
index 52b354f..8bd4d0f 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -19,15 +19,18 @@ proc shortRepr(n: VNode): string =
     for i in 0..<n.len:
       result &= " " & shortRepr(n[i])
 
+var err = 0
+
 proc doDiff(a, b: VNode; expected: varargs[string]) =
   discard diff(b, a, nil, vnodeToDom(a, kxi), kxi)
   for i in 0..<kxi.patchLen:
     let p = $kxi.patches[i].k & " " & shortRepr(kxi.patches[i].n)
-    echo "got ", p
     if i >= expected.len:
       echo "patches differ; expected nothing but got: ", p
+      inc err
     elif p != expected[i]:
       echo "patches differ; expected ", expected[i], " but got: ", p
+      inc err
   #hasDom(kxi.currentTree)
   kxi.patchLen = 0
 
@@ -53,7 +56,24 @@ proc testInsert() =
       li: text "A"
       li: text "B"
       li: text "C"
-  doDiff(a, b, "pkInsert li B")
+  doDiff(a, b, "pkInsertBefore li B")
+
+proc testInsert2() =
+  let a = buildHtml(tdiv):
+    tdiv:
+      tdiv:
+        ul:
+          li: text "A"
+          li: text "D"
+  let b = buildHtml(tdiv):
+    tdiv:
+      tdiv:
+        ul:
+          li: text "A"
+          li: text "B"
+          li: text "C"
+          li: text "D"
+  doDiff(a, b, "pkInsertBefore li B", "pkInsertBefore li C")
 
 proc testDelete() =
   let a = buildHtml(tdiv):
@@ -70,6 +90,11 @@ proc testDelete() =
 
 kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard)
 
-#testAppend()
+testAppend()
 testInsert()
-#testDelete()
+testInsert2()
+testDelete()
+if err == 0:
+  echo "Success"
+else:
+  quit 1
diff --git a/tests/tester.nim b/tests/tester.nim
index 4f2ae66..60a787b 100644
--- a/tests/tester.nim
+++ b/tests/tester.nim
@@ -13,5 +13,6 @@ proc main =
   exec("nim js examples/scrollapp/scrollapp.nim")
   exec("nim js examples/mediaplayer/playerapp.nim")
   exec("nim js examples/carousel/carousel.nim")
+  exec("nim js -d:nodejs -r tests/difftest.nim")
 
 main()

From a93e739081fbb3572777665165343854c394e5b5 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 5 Jul 2017 16:07:52 +0200
Subject: [PATCH 101/264] new component system: blur.nim example now works

---
 src/karax.nim  |  5 ++--
 src/vdom.nim   | 13 +++++++--
 tests/blur.nim | 75 ++++++++++++++++++++++++--------------------------
 3 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 5edda89..3fb0fc4 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -283,7 +283,6 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
     if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
-      echo "comparing ", oldNode.text != newNode.text
       if oldNode.text != newNode.text:
         oldNode.text = newNode.text
         oldNode.dom.value = newNode.text
@@ -364,8 +363,8 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     x.updatedImpl(x, VComponent newNode)
     let oldExpanded = x.expanded
     x.expanded = x.renderImpl(x)
-    x.version = VComponent(newNode).version
-    #x.updatedImpl(x)
+    x.renderedVersion = x.version
+    #echo "expanding ", x.debugId
     if oldExpanded == nil:
       detach(oldNode)
       kxi.addPatch(pkReplace, parent, current, x.expanded)
diff --git a/src/vdom.nim b/src/vdom.nim
index bbb4eac..997b059 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -131,8 +131,11 @@ type
     version*: int         ## Update this to trigger a redraw by karax. Usually you
                           ## should call 'markDirty' instead which is an alias for
                           ## 'inc version'.
+    renderedVersion*: int ## Do not touch. Used by karax. The last version of the
+                          ## component we rendered.
     expanded*: VNode      ## Do not touch. Used by karax. The VDOM the component
                           ## expanded to.
+    debugId*: int
 
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
@@ -154,11 +157,16 @@ proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 
 proc defaultChangedImpl*(v, newInstance: VComponent): bool =
   ## The default implementation of 'changed'.
-  result = v.version != newInstance.version
+  result = v.version != v.renderedVersion
 
 proc defaultUpdatedImpl*(v, newInstance: VComponent) =
   discard
 
+var gid = 0
+proc getDebugId(): int =
+  inc(gid)
+  gid
+
 template newComponent*[T](t: typeDesc[T];
                  render: (proc(self: VComponent): VNode) not nil,
                  onAttach: proc(self: VComponent) = nil,
@@ -169,7 +177,8 @@ template newComponent*[T](t: typeDesc[T];
   T(kind: VNodeKind.component, key: -1,
     text: cstring(astToStr(t)), renderImpl: render,
     changedImpl: changed, updatedImpl: updated,
-    onAttachImpl: onAttach, onDetachImpl: onDetach)
+    onAttachImpl: onAttach, onDetachImpl: onDetach,
+    debugId: getDebugId())
 
 template markDirty*(c: VComponent) =
   ## mark the component as dirty so that it is re-rendered.
diff --git a/tests/blur.nim b/tests/blur.nim
index 3823f93..25c0b24 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -1,7 +1,7 @@
 import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
 
 type TextInput* = ref object of VComponent
-  value: cstring
+  value, guid: cstring
   isActive: bool
   onchange: proc (value: cstring)
 
@@ -35,63 +35,60 @@ proc render(x: VComponent): VNode =
 
   proc flip(ev: Event; n: VNode) =
     self.isActive = not self.isActive
-    kout cstring"onflip", n.value
+    echo "flip! ", self.isActive, " id: ", self.debugId, " version ", self.version
     markDirty(self)
 
   proc onchanged(ev: Event; n: VNode) =
-    if self.onchange != nil and self.value != n.value:
+    if self.onchange != nil:
       self.onchange n.value
-      #self.value = n.value
+      self.value = n.value
 
   result = buildHtml(tdiv(style=style)):
     input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip, onkeyup=onchanged)
 
-#proc setValue(x: TextInput; value: cstring) =
-#  x.value = value
-#  markDirty(x)
+proc changed(current, next: VComponent): bool =
+  let current = TextInput(current)
+  let next = TextInput(next)
+  if current.guid != next.guid:
+    result = true
+  else:
+    result = defaultChangedImpl(current, next)
 
 proc update(current, next: VComponent) =
   let current = TextInput(current)
   let next = TextInput(next)
-  if not current.isActive:
-    current.value = next.value
-    echo "updated! ", current.value
-  else:
-    echo "not updated! ", current.value
-  #markDirty(current)
+  current.value = next.value
+  current.guid = next.guid
+  next.isActive = current.isActive
 
-proc changed(current, next: VComponent): bool =
-  let current = TextInput(current)
-  let next = TextInput(next)
-  result = next.value != current.value or true
-
-proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring"",
+proc newTextInput*(style: VStyle = VStyle(); guid: cstring; value: cstring = cstring"",
                    onchange: proc(v: cstring) = nil): TextInput =
   result = newComponent(TextInput, render, changed=changed, updated=update)
   result.style = style
   result.value = value
   result.onchange = onchange
-
-type
-  Combined = ref object of VComponent
-    a, b: TextInput
-
-proc renderComb(self: VComponent): VNode =
-  let self = Combined(self)
-
-  proc bu(ev: Event; n: VNode) =
-    self.a.value = ""
-    self.b.value = ""
-    markDirty(self.a)
-    markDirty(self.b)
-
-  result = buildHtml(tdiv(style=self.style)):
-    self.a
-    self.b
-    button(onclick=bu):
-      text "reset"
+  result.guid = guid
 
 when false:
+  type
+    Combined = ref object of VComponent
+      a, b: TextInput
+
+  proc renderComb(self: VComponent): VNode =
+    let self = Combined(self)
+
+    proc bu(ev: Event; n: VNode) =
+      self.a.value = ""
+      self.b.value = ""
+      markDirty(self.a)
+      markDirty(self.b)
+
+    result = buildHtml(tdiv(style=self.style)):
+      self.a
+      self.b
+      button(onclick=bu):
+        text "reset"
+
   proc changed(self: VComponent): bool =
     let self = Combined(self)
     result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
@@ -121,7 +118,7 @@ proc createDom(): VNode =
       for index, text in persons.pairs:
         renderPerson(text, index)
     tdiv:
-      newTextInput(VStyle(), if selected >= 0: persons[selected] else: "", proc (v: cstring) =
+      newTextInput(VStyle(), &selected, if selected >= 0: persons[selected] else: "", proc (v: cstring) =
         if v.len > 0:
           if selected >= 0: persons[selected] = v
           errmsg = ""

From 7779560b6b0002bae211dfe78d0310a683773fcb Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 6 Jul 2017 18:34:32 +0200
Subject: [PATCH 102/264] more tests and diff fixes; wip

---
 src/karax.nim          | 55 +++++++++++++++++++++++--------
 tests/diffDomTests.nim |  1 -
 tests/difftest.nim     | 74 ++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 114 insertions(+), 16 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 147965c..adbd2f2 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -21,6 +21,9 @@ type
     k: PatchKind
     parent, current: Node
     n: VNode
+  PatchV = object
+    parent, newChild: VNode
+    pos: int
 
 type
   KaraxInstance* = ref object ## underlying karax instance. Usually you don't have
@@ -34,7 +37,11 @@ type
     renderId: int
     patches: seq[Patch] # we reuse this to save allocations
     patchLen: int
-    recursion: int
+    patchesV: seq[PatchV]
+    patchLenV: int
+    runCount: int
+    when defined(stats):
+      recursion: int
 
 
 var
@@ -251,6 +258,17 @@ proc addPatch(kxi: KaraxInstance; ka: PatchKind; parenta, currenta: Node;
     kxi.patches[L].n = na
   inc kxi.patchLen
 
+proc addPatchV(kxi: KaraxInstance; parent: VNode; pos: int; newChild: VNode) =
+  let L = kxi.patchLenV
+  if L >= kxi.patchesV.len:
+    # allocate more space:
+    kxi.patchesV.add(PatchV(parent: parent, newChild: newChild, pos: pos))
+  else:
+    kxi.patchesV[L].parent = parent
+    kxi.patchesV[L].newChild = newChild
+    kxi.patchesV[L].pos = pos
+  inc kxi.patchLenV
+
 proc apply(kxi: KaraxInstance) =
   for i in 0..<kxi.patchLen:
     let p = kxi.patches[i]
@@ -276,15 +294,20 @@ proc apply(kxi: KaraxInstance) =
         if x.onDetachImpl != nil: x.onDetachImpl(x)
       n.dom = nil
   kxi.patchLen = 0
+  for i in 0..<kxi.patchLenV:
+    let p = kxi.patchesV[i]
+    p.parent[p.pos] = p.newChild
+  kxi.patchLenV = 0
 
 proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
-  if kxi.recursion > 100:
-    echo "newNode ", newNode.kind, " oldNode ", oldNode.kind, " eq ", eq(newNode, oldNode)
-    if oldNode.kind == VNodeKind.text:
-      echo oldNode.text
-    #return
-    #doAssert false, "overflow!"
-  inc kxi.recursion
+  when defined(stats):
+    if kxi.recursion > 100:
+      echo "newNode ", newNode.kind, " oldNode ", oldNode.kind, " eq ", eq(newNode, oldNode)
+      if oldNode.kind == VNodeKind.text:
+        echo oldNode.text
+      #return
+      #doAssert false, "overflow!"
+    inc kxi.recursion
   result = eq(newNode, oldNode)
   case result
   of identical, similar:
@@ -310,6 +333,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
 
     template eqAndUpdate(a: VNode; i: int; b: VNode; j: int; info, action: untyped) =
       let oldLen = kxi.patchLen
+      let oldLenV = kxi.patchLenV
       assert i < a.len
       assert j < b.len
       let r = if isSpecial:
@@ -322,11 +346,13 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
         a[i] = b[j]
         action
       of usenewNode:
-        b[j] = a[i]
+        #b[j] = a[i]
+        kxi.addPatchV(b, j, a[i])
         action
       of different:
         # undo what 'diff' would have done:
         kxi.patchLen = oldLen
+        kxi.patchLenV = oldLenV
         if result != different: result = r
         break
     # compute common prefix:
@@ -403,7 +429,8 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     detach(oldNode)
     kxi.addPatch(pkReplace, parent, current, newNode)
   of usenewNode: doAssert(false, "eq returned usenewNode")
-  dec kxi.recursion
+  when defined(stats):
+    dec kxi.recursion
 
 when defined(stats):
   proc depth(n: VNode; total: var int): int =
@@ -416,6 +443,7 @@ when defined(stats):
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
   let newtree = kxi.renderer()
+  inc kxi.runCount
   newtree.id = kxi.rootId
   kxi.toFocus = nil
   if kxi.currentTree == nil:
@@ -428,7 +456,7 @@ proc dodraw(kxi: KaraxInstance) =
     #kout cstring"patch len ", patches.len
     apply(kxi)
     kxi.currentTree = newtree
-  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
+  #doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
     kxi.postRenderCallback()
@@ -437,8 +465,8 @@ proc dodraw(kxi: KaraxInstance) =
   if kxi.toFocus != nil:
     kxi.toFocus.focus()
   kxi.renderId = 0
-  kxi.recursion = 0
   when defined(stats):
+    kxi.recursion = 0
     var total = 0
     echo "depth ", depth(kxi.currentTree, total), " total ", total
 
@@ -467,7 +495,8 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
   ## Setup Karax. Usually the return value can be ignored.
   result = KaraxInstance(rootId: root, renderer: renderer,
                          postRenderCallback: clientPostRenderCallback,
-                         patches: newSeq[Patch](60))
+                         patches: newSeq[Patch](60),
+                         patchesV: newSeq[PatchV](30))
   kxi = result
   window.onload = init
 
diff --git a/tests/diffDomTests.nim b/tests/diffDomTests.nim
index e28c6f6..56f8b9f 100644
--- a/tests/diffDomTests.nim
+++ b/tests/diffDomTests.nim
@@ -26,7 +26,6 @@ proc check(name: cstring; order: seq[int]) =
   let result = checkOrder(order)
   results.add name & (if result: cstring" - OK" else: cstring" -FAIL")
 
-# result: 0 1 2 3 4 7 5
 proc test1() =
   results.add cstring"test1 started"
   entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
diff --git a/tests/difftest.nim b/tests/difftest.nim
index 8bd4d0f..3fbb800 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -43,8 +43,10 @@ proc testAppend() =
     ul:
       li: text "A"
       li: text "B"
-      li: text "C"
-  doDiff(a, b, "pkAppend li C")
+      li:
+        tdiv:
+          text "C"
+  doDiff(a, b, "pkAppend li div C")
 
 proc testInsert() =
   let a = buildHtml(tdiv):
@@ -88,12 +90,80 @@ proc testDelete() =
                "pkDetach li B", "pkRemove nil",
                "pkDetach li C", "pkRemove nil")
 
+proc testDeleteMiddle() =
+  let a = buildHtml(tdiv):
+    ul:
+      li:
+        tdiv: text "A"
+      li:
+        tdiv: text "B"
+      li:
+        tdiv: text "C"
+      li:
+        tdiv: text "D"
+      li:
+        tdiv: text "E"
+      li:
+        tdiv: text "F"
+      li:
+        tdiv: text "G"
+      li:
+        tdiv: text "H"
+  let b = buildHtml(tdiv):
+    ul:
+      li:
+        tdiv: text "A"
+      li:
+        tdiv: text "B"
+      li:
+        tdiv: text "C"
+      li:
+        tdiv: text "D"
+      li:
+        tdiv: text "E"
+      li:
+        tdiv: text "F"
+      li:
+        tdiv: text "H"
+  doDiff(a, b, "pkDetach li div G", "pkRemove nil")
+
+proc createEntry(id: cstring): VNode =
+  result = buildHtml():
+    button(id="" & id):
+      text id
+
+proc createEntries(entries: seq[cstring]): VNode =
+  result = buildHtml(tdiv()):
+    ul(id="ul"):
+      for e in entries:
+        createEntry(e)
+    for r in entries:
+      tdiv:
+        text r
+
+proc testWild() =
+  var entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring"7", cstring("5")]
+  let a = createEntries(entries)
+  entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
+  let b = createEntries(entries)
+  doDiff(a, b, "pkDetach button 7", "pkRemove nil", "pkDetach div 7", "pkRemove nil")
+
+proc testWildInsert() =
+  var entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
+  let a = createEntries(entries)
+  entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring"7", cstring("5")]
+  let b = createEntries(entries)
+  doDiff(a, b, "pkInsertBefore button 7", "pkInsertBefore div 7")
+
 kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard)
 
 testAppend()
 testInsert()
 testInsert2()
 testDelete()
+testWild()
+testWildInsert()
+testDeleteMiddle()
 if err == 0:
   echo "Success"
 else:

From 907c372c27b019b0f3327cb084d680754d79cc96 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 6 Jul 2017 18:53:07 +0200
Subject: [PATCH 103/264] code cleanups

---
 src/karax.nim | 40 +++++++++++++---------------------------
 1 file changed, 13 insertions(+), 27 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index adbd2f2..b83f8c0 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -339,14 +339,12 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       let r = if isSpecial:
                 diff(a[i], b[j], parent, current, kxi)
               else:
-                (assert same(b, current); #(j < current.len, "j: " & $j & " len " & $current.len);
-                diff(a[i], b[j], current, current.childNodes[j], kxi))
+                diff(a[i], b[j], current, current.childNodes[j], kxi)
       case r
       of identical, changed, similar:
         a[i] = b[j]
         action
       of usenewNode:
-        #b[j] = a[i]
         kxi.addPatchV(b, j, a[i])
         action
       of different:
@@ -370,44 +368,32 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
 
     let pos = min(oldPos, newPos) + 1
     # now the different children are in commonPrefix .. pos - 1:
-    when false:
-      for i in commonPrefix..pos-1:
-        detach(oldNode[i])
-        kxi.addPatch(pkReplace, current, current.childNodes[i], newNode[i])
-    when true:
-      for i in commonPrefix..pos-1:
-        let r = diff(newNode[i], oldNode[i], current, current.childNodes[i],
-                kxi)
-        if r == usenewNode:
-          oldNode[i] = newNode[i]
-        elif r != different:
-          newNode[i] = oldNode[i]
-        #else:
-        #  result = different
+    for i in commonPrefix..pos-1:
+      let r = diff(newNode[i], oldNode[i], current, current.childNodes[i],
+              kxi)
+      if r == usenewNode:
+        #oldNode[i] = newNode[i]
+        kxi.addPatchV(oldNode, i, newNode[i])
+      elif r != different:
+        newNode[i] = oldNode[i]
+      #else:
+      #  result = different
 
     if oldPos + 1 == oldLength:
       for i in pos..newPos:
         kxi.addPatch(pkAppend, current, nil, newNode[i])
         result = usenewNode
-        #result = different
     else:
       let before = current.childNodes[oldPos + 1]
       for i in pos..newPos:
         kxi.addPatch(pkInsertBefore, current, before, newNode[i])
         result = usenewNode
-        #result = different
     # XXX call 'attach' here?
     for i in pos..oldPos:
       detach(oldNode[i])
       #doAssert i < current.childNodes.len
       kxi.addPatch(pkRemove, current, current.childNodes[i], nil)
-      result = usenewNode #different
-    # after the applied patch, conceptually the nodes are identical, so
-    # no further search is required. 'changed' needs to be propagated
-    # for the component system to work. 'similar' was transformed into
-    # identical too:
-    #if result == different or result == similar:
-    #  result = identical
+      result = usenewNode
 
   of changed:
     assert oldNode.kind == VNodeKind.component
@@ -456,7 +442,7 @@ proc dodraw(kxi: KaraxInstance) =
     #kout cstring"patch len ", patches.len
     apply(kxi)
     kxi.currentTree = newtree
-  #doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
+  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
     kxi.postRenderCallback()

From 920bd2db9d6e3432bcfe2dd4ae020ac40fa59d90 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 7 Jul 2017 16:40:48 +0200
Subject: [PATCH 104/264] bugfix: component handling

---
 src/karax.nim | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index a2ef499..ba992d9 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -167,9 +167,9 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
     kxi.toFocus = result
   if not n.style.isNil: applyStyle(result, n.style)
 
-proc same(n: VNode, e: Node): bool =
+proc same(n: VNode, e: Node; nesting = 0): bool =
   if n.kind == VNodeKind.component:
-    result = same(VComponent(n).expanded, e)
+    result = same(VComponent(n).expanded, e, nesting+1)
   elif n.kind == VNodeKind.vthunk or n.kind == VNodeKind.dthunk:
     # we don't check these for now:
     result = true
@@ -177,10 +177,10 @@ proc same(n: VNode, e: Node): bool =
     result = true
     if n.kind != VNodeKind.text:
       if e.len != n.len:
-        kout e.len, n.len
+        kout e.len, n.len, toTag[n.kind], nesting
         return false
       for i in 0 ..< n.len:
-        if not same(n[i], e[i]): return false
+        if not same(n[i], e[i], nesting+1): return false
   else:
     kout toTag[n.kind], e.nodename
 
@@ -298,6 +298,7 @@ proc apply(kxi: KaraxInstance) =
   for i in 0..<kxi.patchLenV:
     let p = kxi.patchesV[i]
     p.parent[p.pos] = p.newChild
+    assert p.newChild.dom != nil
   kxi.patchLenV = 0
 
 proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
@@ -310,6 +311,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       #doAssert false, "overflow!"
     inc kxi.recursion
   result = eq(newNode, oldNode)
+  assert(same(oldNode, current))
   case result
   of identical, similar:
     newNode.dom = oldNode.dom
@@ -378,7 +380,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       elif r != different:
         newNode[i] = oldNode[i]
       #else:
-      #  result = different
+      #  result = usenewNode
 
     if oldPos + 1 == oldLength:
       for i in pos..newPos:
@@ -403,13 +405,16 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     let oldExpanded = x.expanded
     x.expanded = x.renderImpl(x)
     x.renderedVersion = x.version
-    #echo "expanding ", x.debugId
     if oldExpanded == nil:
       detach(oldNode)
       kxi.addPatch(pkReplace, parent, current, x.expanded)
     else:
       let res = diff(x.expanded, oldExpanded, parent, current, kxi)
-      if res != different:
+      if res == usenewNode:
+        #oldNode[i] = newNode[i]
+        #kxi.addPatchV(oldNode, i, newNode[i])
+        kxi.addPatch(pkReplace, parent, current, x.expanded)
+      elif res != different:
         x.expanded = oldExpanded
         assert oldExpanded.dom != nil, "old expanded.dom is nil"
       else:
@@ -440,6 +445,7 @@ proc dodraw(kxi: KaraxInstance) =
     let asdom = vnodeToDom(kxi.currentTree, kxi)
     replaceById(kxi.rootId, asdom)
   else:
+    doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
     let olddom = document.getElementById(kxi.rootId)
     discard diff(newtree, kxi.currentTree, nil, olddom, kxi)
     #kout cstring"patch len ", patches.len

From dc88eeaae3bd3f0e892eacfaba8eae0ad7adc0a2 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 7 Jul 2017 17:37:29 +0200
Subject: [PATCH 105/264] make todoapp work again

---
 src/karax.nim | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index ba992d9..c35e72a 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -311,7 +311,6 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       #doAssert false, "overflow!"
     inc kxi.recursion
   result = eq(newNode, oldNode)
-  assert(same(oldNode, current))
   case result
   of identical, similar:
     newNode.dom = oldNode.dom
@@ -350,6 +349,8 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       of usenewNode:
         kxi.addPatchV(b, j, a[i])
         action
+        # unfortunately, we need to propagate the changes upwards:
+        result = useNewNode
       of different:
         # undo what 'diff' would have done:
         kxi.patchLen = oldLen
@@ -372,8 +373,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     let pos = min(oldPos, newPos) + 1
     # now the different children are in commonPrefix .. pos - 1:
     for i in commonPrefix..pos-1:
-      let r = diff(newNode[i], oldNode[i], current, current.childNodes[i],
-              kxi)
+      let r = diff(newNode[i], oldNode[i], current, current.childNodes[i], kxi)
       if r == usenewNode:
         #oldNode[i] = newNode[i]
         kxi.addPatchV(oldNode, i, newNode[i])

From ec4a413a7bcbcc28c22f8faa26cbce9cb0200e07 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 10 Jul 2017 18:00:35 +0200
Subject: [PATCH 106/264] bugfix: better diff'ing for complex components

---
 src/karax.nim  | 5 ++---
 tests/blur.nim | 6 ++++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index c35e72a..13c52a2 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -411,9 +411,8 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     else:
       let res = diff(x.expanded, oldExpanded, parent, current, kxi)
       if res == usenewNode:
-        #oldNode[i] = newNode[i]
-        #kxi.addPatchV(oldNode, i, newNode[i])
-        kxi.addPatch(pkReplace, parent, current, x.expanded)
+        #kxi.addPatch(pkReplace, parent, current, x.expanded)
+        discard "diff created a patchset for us, so this is fine"
       elif res != different:
         x.expanded = oldExpanded
         assert oldExpanded.dom != nil, "old expanded.dom is nil"
diff --git a/tests/blur.nim b/tests/blur.nim
index 25c0b24..fbb0a46 100644
--- a/tests/blur.nim
+++ b/tests/blur.nim
@@ -59,7 +59,7 @@ proc update(current, next: VComponent) =
   let next = TextInput(next)
   current.value = next.value
   current.guid = next.guid
-  next.isActive = current.isActive
+  #next.isActive = current.isActive
 
 proc newTextInput*(style: VStyle = VStyle(); guid: cstring; value: cstring = cstring"",
                    onchange: proc(v: cstring) = nil): TextInput =
@@ -107,10 +107,12 @@ var
 proc renderPerson(text: cstring, index: int): VNode =
   proc select(ev: Event, n: VNode) =
     selected = index
+    errmsg = ""
 
   result = buildHtml():
-    tdiv(onClick=select):
+    tdiv:
       text text
+      button(onClick = select)
 
 proc createDom(): VNode =
   result = buildHtml(tdiv):

From 6c152ed516b2154fc16b26248676be9aa5601533 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 10 Jul 2017 21:42:22 +0200
Subject: [PATCH 107/264] smart attribute comparisons

---
 src/karax.nim | 19 ++++++++++++++++---
 src/vdom.nim  |  3 +++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 13c52a2..2035f19 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -210,9 +210,8 @@ proc eq(a, b: VNode): EqResult =
     let x = VComponent(b)
     assert x.changedImpl != nil
     return if x.changedImpl(x, VComponent(a)): changed else: identical
-  if not sameAttrs(a, b): return different
   if a.class != b.class: return different
-  if not eq(a.style, b.style): return similar
+  if not eq(a.style, b.style) or not sameAttrs(a, b): return similar
   # Do not test event listeners here!
   return result
 
@@ -223,6 +222,16 @@ proc updateStyles(newNode, oldNode: VNode) =
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
 
+proc updateAttributes(newNode, oldNode: VNode) =
+  # we keep the oldNode, but take over the attributes from the new node:
+  if oldNode.dom != nil:
+    for k, _ in attrs(oldNode):
+      oldNode.dom.removeAttribute(k)
+    for k, v in attrs(newNode):
+      if v != nil:
+        oldNode.dom.setAttr(k, v)
+  takeOverAttr(newNode, oldNode)
+
 proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   let d = oldNode.dom
   for i in 0..<oldNode.events.len:
@@ -301,6 +310,8 @@ proc apply(kxi: KaraxInstance) =
     assert p.newChild.dom != nil
   kxi.patchLenV = 0
 
+var outputted = false
+
 proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
   when defined(stats):
     if kxi.recursion > 100:
@@ -314,7 +325,9 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
   case result
   of identical, similar:
     newNode.dom = oldNode.dom
-    if result == similar: updateStyles(newNode, oldNode)
+    if result == similar:
+      updateStyles(newNode, oldNode)
+      updateAttributes(newNode, oldNode)
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
     if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
diff --git a/src/vdom.nim b/src/vdom.nim
index 997b059..f751676 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -199,6 +199,9 @@ proc getAttr*(n: VNode; key: cstring): cstring =
   for i in countup(0, n.attrs.len-2, 2):
     if n.attrs[i] == key: return n.attrs[i+1]
 
+proc takeOverAttr*(newNode, oldNode: VNode) =
+  oldNode.attrs = newNode.attrs
+
 proc len*(x: VNode): int = x.kids.len
 proc `[]`*(x: VNode; idx: int): VNode = x.kids[idx]
 proc `[]=`*(x: VNode; idx: int; y: VNode) = x.kids[idx] = y

From 1e378b2ac238754a0fab34f8e351f4df80608fdd Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 11 Jul 2017 00:20:43 +0200
Subject: [PATCH 108/264] separate component updating from diffing algorithm

---
 src/karax.nim | 87 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 2035f19..b8b1d60 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -24,6 +24,9 @@ type
   PatchV = object
     parent, newChild: VNode
     pos: int
+  ComponentPair = object
+    oldNode, newNode: VComponent
+    parent, current: Node
 
 type
   KaraxInstance* = ref object ## underlying karax instance. Usually you don't have
@@ -40,6 +43,7 @@ type
     patchesV: seq[PatchV]
     patchLenV: int
     runCount: int
+    components: seq[ComponentPair]
     when defined(stats):
       recursion: int
 
@@ -190,7 +194,7 @@ proc replaceById(id: cstring; newTree: Node) =
 
 type
   EqResult = enum
-    changed, different, similar, identical, usenewNode
+    componentsIdentical, different, similar, identical, usenewNode
 
 proc eq(a, b: VNode): EqResult =
   if a.kind != b.kind: return different
@@ -207,9 +211,7 @@ proc eq(a, b: VNode): EqResult =
   elif b.kind == VNodeKind.component:
     # different component names mean different components:
     if a.text != b.text: return different
-    let x = VComponent(b)
-    assert x.changedImpl != nil
-    return if x.changedImpl(x, VComponent(a)): changed else: identical
+    return componentsIdentical
   if a.class != b.class: return different
   if not eq(a.style, b.style) or not sameAttrs(a, b): return similar
   # Do not test event listeners here!
@@ -279,7 +281,7 @@ proc addPatchV(kxi: KaraxInstance; parent: VNode; pos: int; newChild: VNode) =
     kxi.patchesV[L].pos = pos
   inc kxi.patchLenV
 
-proc apply(kxi: KaraxInstance) =
+proc applyPatch(kxi: KaraxInstance) =
   for i in 0..<kxi.patchLen:
     let p = kxi.patches[i]
     case p.k
@@ -310,8 +312,6 @@ proc apply(kxi: KaraxInstance) =
     assert p.newChild.dom != nil
   kxi.patchLenV = 0
 
-var outputted = false
-
 proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
   when defined(stats):
     if kxi.recursion > 100:
@@ -323,11 +323,16 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     inc kxi.recursion
   result = eq(newNode, oldNode)
   case result
-  of identical, similar:
+  of identical, componentsIdentical, similar:
     newNode.dom = oldNode.dom
     if result == similar:
       updateStyles(newNode, oldNode)
       updateAttributes(newNode, oldNode)
+    elif result == componentsIdentical:
+      kxi.components.add ComponentPair(oldNode: VComponent(oldNode),
+                                       newNode: VComponent(newNode),
+                                       parent: parent,
+                                       current: current)
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
     if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
@@ -356,7 +361,7 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
               else:
                 diff(a[i], b[j], current, current.childNodes[j], kxi)
       case r
-      of identical, changed, similar:
+      of identical, componentsIdentical, similar:
         a[i] = b[j]
         action
       of usenewNode:
@@ -410,27 +415,6 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
       #doAssert i < current.childNodes.len
       kxi.addPatch(pkRemove, current, current.childNodes[i], nil)
       result = usenewNode
-
-  of changed:
-    assert oldNode.kind == VNodeKind.component
-    let x = VComponent(oldNode)
-    x.updatedImpl(x, VComponent newNode)
-    let oldExpanded = x.expanded
-    x.expanded = x.renderImpl(x)
-    x.renderedVersion = x.version
-    if oldExpanded == nil:
-      detach(oldNode)
-      kxi.addPatch(pkReplace, parent, current, x.expanded)
-    else:
-      let res = diff(x.expanded, oldExpanded, parent, current, kxi)
-      if res == usenewNode:
-        #kxi.addPatch(pkReplace, parent, current, x.expanded)
-        discard "diff created a patchset for us, so this is fine"
-      elif res != different:
-        x.expanded = oldExpanded
-        assert oldExpanded.dom != nil, "old expanded.dom is nil"
-      else:
-        assert x.expanded.dom != nil, "expanded.dom is nil"
   of different:
     detach(oldNode)
     kxi.addPatch(pkReplace, parent, current, newNode)
@@ -438,6 +422,38 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
   when defined(stats):
     dec kxi.recursion
 
+proc applyComponents(kxi: KaraxInstance) =
+  # the first 'diff' pass detects components in the VDOM. The
+  # 'applyComponents' expands components and so on until no
+  # components are left to check.
+  var i = 0
+  # beware: 'diff' appends to kxi.components!
+  # So this is actually a fixpoint iteration:
+  while i < kxi.components.len:
+    let x = kxi.components[i].oldNode
+    let newNode = kxi.components[i].newNode
+    if x.changedImpl != nil and x.changedImpl(x, newNode):
+      let current = kxi.components[i].current
+      let parent = kxi.components[i].parent
+      x.updatedImpl(x, newNode)
+      let oldExpanded = x.expanded
+      x.expanded = x.renderImpl(x)
+      x.renderedVersion = x.version
+      if oldExpanded == nil:
+        detach(x)
+        kxi.addPatch(pkReplace, parent, current, x.expanded)
+      else:
+        let res = diff(x.expanded, oldExpanded, parent, current, kxi)
+        if res == usenewNode:
+          discard "diff created a patchset for us, so this is fine"
+        elif res != different:
+          x.expanded = oldExpanded
+          assert oldExpanded.dom != nil, "old expanded.dom is nil"
+        else:
+          assert x.expanded.dom != nil, "expanded.dom is nil"
+    inc i
+  setLen(kxi.components, 0)
+
 when defined(stats):
   proc depth(n: VNode; total: var int): int =
     var m = 0
@@ -453,16 +469,16 @@ proc dodraw(kxi: KaraxInstance) =
   newtree.id = kxi.rootId
   kxi.toFocus = nil
   if kxi.currentTree == nil:
-    kxi.currentTree = newtree
-    let asdom = vnodeToDom(kxi.currentTree, kxi)
+    let asdom = vnodeToDom(newtree, kxi)
     replaceById(kxi.rootId, asdom)
   else:
     doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
     let olddom = document.getElementById(kxi.rootId)
     discard diff(newtree, kxi.currentTree, nil, olddom, kxi)
     #kout cstring"patch len ", patches.len
-    apply(kxi)
-    kxi.currentTree = newtree
+  applyComponents(kxi)
+  applyPatch(kxi)
+  kxi.currentTree = newtree
   doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
@@ -503,7 +519,8 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
   result = KaraxInstance(rootId: root, renderer: renderer,
                          postRenderCallback: clientPostRenderCallback,
                          patches: newSeq[Patch](60),
-                         patchesV: newSeq[PatchV](30))
+                         patchesV: newSeq[PatchV](30),
+                         components: @[])
   kxi = result
   window.onload = init
 

From 5838271f8b6e2d9c1b7188db3f79fa5e807d13a7 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 11 Jul 2017 12:43:32 +0200
Subject: [PATCH 109/264] nicer indentation

---
 src/karax.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index b8b1d60..22ceceb 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -239,8 +239,8 @@ proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   for i in 0..<oldNode.events.len:
     let k = oldNode.events[i][0]
     let name = case k
-                of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
-                else: toEventName[k]
+               of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
+               else: toEventName[k]
     d.removeEventListener(name, oldNode.events[i][2])
   shallowCopy(oldNode.events, newNode.events)
   applyEvents(oldNode, kxi)

From 91d7ba25eaffa78c94fb7e42207c75ee3ebeb8ab Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 11 Jul 2017 12:54:53 +0200
Subject: [PATCH 110/264] renamed key to 'index'; all virtual components have a
 'key' attribute

---
 examples/mediaplayer/mediaplayer.nim | 10 +++++-----
 examples/todoapp/todoapp.nim         | 16 ++++++++--------
 src/karax.nim                        | 24 +++++++++---------------
 src/karaxdsl.nim                     |  2 +-
 src/vdom.nim                         | 26 ++++++++++++++------------
 5 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/examples/mediaplayer/mediaplayer.nim b/examples/mediaplayer/mediaplayer.nim
index 3f970a8..7bc9c65 100644
--- a/examples/mediaplayer/mediaplayer.nim
+++ b/examples/mediaplayer/mediaplayer.nim
@@ -15,7 +15,7 @@ proc `width=`(n: Node, w: int) {.importcpp: "#.width = #".}
 proc mplayer*(id, resource: cstring): VNode {.compact.} =
   proc handler(ev: Event; n: VNode) =
     let myVideo = document.getElementById(id)
-    case n.key
+    case n.index
     of Play:
       if myVideo.paused:
         myVideo.play()
@@ -27,13 +27,13 @@ proc mplayer*(id, resource: cstring): VNode {.compact.} =
     else: discard
 
   result = buildHtml(tdiv):
-    button(onclick=handler, key=Play):
+    button(onclick=handler, index=Play):
       text "Play/Pause"
-    button(onclick=handler, key=Big):
+    button(onclick=handler, index=Big):
       text "Big"
-    button(onclick=handler, key=Small):
+    button(onclick=handler, index=Small):
       text "Small"
-    button(onclick=handler, key=Normal):
+    button(onclick=handler, index=Normal):
       text "Normal"
     br()
     br()
diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 0caa70c..47ddeae 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -45,19 +45,19 @@ proc onTodoEnter(ev: Event; n: VNode) =
   n.value = ""
 
 proc removeHandler(ev: Event; n: VNode) =
-  updateEntry(n.key, cstring(nil), false)
+  updateEntry(n.index, cstring(nil), false)
 
 proc editHandler(ev: Event; n: VNode) =
-  selectedEntry = n.key
+  selectedEntry = n.index
 
 proc focusLost(ev: Event; n: VNode) = selectedEntry = -1
 
 proc editEntry(ev: Event; n: VNode) =
-  setEntryContent(n.key, n.value)
+  setEntryContent(n.index, n.value)
   selectedEntry = -1
 
 proc toggleEntry(ev: Event; n: VNode) =
-  let id = n.key
+  let id = n.index
   markAsCompleted(id, not isCompleted(id))
 
 proc onAllDone(ev: Event; n: VNode) =
@@ -83,12 +83,12 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.compac
       if not selected:
         tdiv(class = "view"):
           input(class = "toggle", `type` = "checkbox", checked = toChecked(completed),
-                onclick=toggleEntry, key=id)
-          label(onDblClick=editHandler, key=id):
+                onclick=toggleEntry, index=id)
+          label(onDblClick=editHandler, index=id):
             text d
-          button(class = "destroy", key=id, onclick=removeHandler)
+          button(class = "destroy", index=id, onclick=removeHandler)
       else:
-        input(class = "edit", name = "title", key=id,
+        input(class = "edit", name = "title", index=id,
           onblur = focusLost,
           onkeyupenter = editEntry, value = d, setFocus=true)
 
diff --git a/src/karax.nim b/src/karax.nim
index 22ceceb..c96901b 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -7,13 +7,6 @@ export kdom.Event
 proc kout*[T](x: T) {.importc: "console.log", varargs.}
   ## the preferred way of debugging karax applications.
 
-proc hasProp(e: Node; prop: cstring): bool {.importcpp: "(#.hasOwnProperty(#))".}
-proc rawkey(e: Node): VKey {.importcpp: "#.karaxKey", nodecl.}
-proc key*(e: Node): VKey =
-  if e.hasProp"karaxKey": result = e.rawkey
-  else: result = -1
-proc `key=`*(e: Node; x: VKey) {.importcpp: "#.karaxKey = #", nodecl.}
-
 type
   PatchKind = enum
     pkReplace, pkRemove, pkAppend, pkInsertBefore, pkDetach
@@ -200,7 +193,7 @@ proc eq(a, b: VNode): EqResult =
   if a.kind != b.kind: return different
   if a.id != b.id: return different
   result = identical
-  if a.key != b.key: return different
+  if a.index != b.index: return different
   if a.kind == VNodeKind.text:
     if a.text != b.text: return different
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
@@ -211,6 +204,7 @@ proc eq(a, b: VNode): EqResult =
   elif b.kind == VNodeKind.component:
     # different component names mean different components:
     if a.text != b.text: return different
+    if VComponent(a).key != VComponent(b).key: return different
     return componentsIdentical
   if a.class != b.class: return different
   if not eq(a.style, b.style) or not sameAttrs(a, b): return similar
@@ -246,7 +240,7 @@ proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   applyEvents(oldNode, kxi)
 
 proc printV(n: VNode; depth: cstring = "") =
-  kout depth, cstring($n.kind), cstring"key ", n.key
+  kout depth, cstring($n.kind), cstring"key ", n.index
   #for k, v in pairs(n.style):
   #  kout depth, "style: ", k, v
   if n.kind == VNodeKind.component:
@@ -323,16 +317,16 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     inc kxi.recursion
   result = eq(newNode, oldNode)
   case result
-  of identical, componentsIdentical, similar:
+  of componentsIdentical:
+    kxi.components.add ComponentPair(oldNode: VComponent(oldNode),
+                                      newNode: VComponent(newNode),
+                                      parent: parent,
+                                      current: current)
+  of identical, similar:
     newNode.dom = oldNode.dom
     if result == similar:
       updateStyles(newNode, oldNode)
       updateAttributes(newNode, oldNode)
-    elif result == componentsIdentical:
-      kxi.components.add ComponentPair(oldNode: VComponent(oldNode),
-                                       newNode: VComponent(newNode),
-                                       parent: parent,
-                                       current: current)
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
     if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index 15c6fc6..c17d725 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -4,7 +4,7 @@ from strutils import startsWith, toLowerAscii
 
 const
   StmtContext = ["kout", "inc", "echo", "dec", "!"]
-  SpecialAttrs = ["id", "class", "value", "key", "style"]
+  SpecialAttrs = ["id", "class", "value", "index", "style"]
 
 proc getName(n: NimNode): string =
   case n.kind
diff --git a/src/vdom.nim b/src/vdom.nim
index f751676..8e4f983 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -105,11 +105,11 @@ buildLookupTables()
 type
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
   NativeEventHandler* = proc (ev: Event) {.closure.}
-  VKey* = int
+  VKey* = cstring
 
   VNode* = ref object of RootObj
     kind*: VNodeKind
-    key*: VKey
+    index*: int ## a generally useful 'index'
     id*, class*, text*: cstring
     kids: seq[VNode]
     # even index: key, odd index: value; done this way for memory efficiency:
@@ -123,6 +123,8 @@ type
                ## is not part of the virtual DOM anymore.
 
   VComponent* = ref object of VNode ## The abstract class for every karax component.
+    key*: VKey                      ## key that determines if two components are
+                                    ## identical.
     renderImpl*: proc(self: VComponent): VNode
     changedImpl*: proc(self, newInstance: VComponent): bool
     updatedImpl*: proc(self, newInstance: VComponent)
@@ -140,20 +142,20 @@ type
 proc value*(n: VNode): cstring = n.text
 proc `value=`*(n: VNode; v: cstring) = n.text = v
 
-proc intValue*(n: VNode): int = n.key
-proc vn*(i: int): VNode = VNode(kind: VNodeKind.int, key: i)
-proc vn*(b: bool): VNode = VNode(kind: VNodeKind.int, key: ord(b))
-proc vn*(x: cstring): VNode = VNode(kind: VNodeKind.text, key: -1, text: x)
+proc intValue*(n: VNode): int = n.index
+proc vn*(i: int): VNode = VNode(kind: VNodeKind.int, index: i)
+proc vn*(b: bool): VNode = VNode(kind: VNodeKind.int, index: ord(b))
+proc vn*(x: cstring): VNode = VNode(kind: VNodeKind.text, index: -1, text: x)
 
 template callThunk*(fn: typed; n: VNode): untyped =
   ## for internal usage only.
   fn(n.kids)
 
 proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
-  VNode(kind: VNodeKind.vthunk, text: name, key: -1, kids: @args)
+  VNode(kind: VNodeKind.vthunk, text: name, index: -1, kids: @args)
 
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
-  VNode(kind: VNodeKind.dthunk, text: name, key: -1, kids: @args)
+  VNode(kind: VNodeKind.dthunk, text: name, index: -1, kids: @args)
 
 proc defaultChangedImpl*(v, newInstance: VComponent): bool =
   ## The default implementation of 'changed'.
@@ -174,7 +176,7 @@ template newComponent*[T](t: typeDesc[T];
                  changed: (proc(self, newInstance: VComponent): bool) = defaultChangedImpl,
                  updated: proc(self, newInstance: VComponent) = defaultUpdatedImpl): T =
   ## Use this template to create new components.
-  T(kind: VNodeKind.component, key: -1,
+  T(kind: VNodeKind.component, index: -1,
     text: cstring(astToStr(t)), renderImpl: render,
     changedImpl: changed, updatedImpl: updated,
     onAttachImpl: onAttach, onDetachImpl: onDetach,
@@ -206,7 +208,7 @@ proc len*(x: VNode): int = x.kids.len
 proc `[]`*(x: VNode; idx: int): VNode = x.kids[idx]
 proc `[]=`*(x: VNode; idx: int; y: VNode) = x.kids[idx] = y
 proc add*(parent, kid: VNode) = parent.kids.add kid
-proc newVNode*(kind: VNodeKind): VNode = VNode(kind: kind, key: -1)
+proc newVNode*(kind: VNodeKind): VNode = VNode(kind: kind, index: -1)
 
 proc tree*(kind: VNodeKind; kids: varargs[VNode]): VNode =
   result = newVNode(kind)
@@ -217,8 +219,8 @@ proc tree*(kind: VNodeKind; attrs: openarray[(cstring, cstring)];
   result = tree(kind, kids)
   for a in attrs: result.setAttr(a[0], a[1])
 
-proc text*(s: string): VNode = VNode(kind: VNodeKind.text, text: cstring(s), key: -1)
-proc text*(s: cstring): VNode = VNode(kind: VNodeKind.text, text: s, key: -1)
+proc text*(s: string): VNode = VNode(kind: VNodeKind.text, text: cstring(s), index: -1)
+proc text*(s: cstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
 
 iterator items*(n: VNode): VNode =
   for i in 0..<n.kids.len: yield n.kids[i]

From 507094bdfd92dc56d3cec5f65a9f4c2b7eee8a3d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 11 Jul 2017 18:59:38 +0200
Subject: [PATCH 111/264] better event handling for components and in the DSL

---
 src/karax.nim        |   1 +
 src/karaxdsl.nim     |  38 ++++++++++++-
 src/vdom.nim         |  19 ++++++-
 tests/components.nim | 128 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 183 insertions(+), 3 deletions(-)
 create mode 100644 tests/components.nim

diff --git a/src/karax.nim b/src/karax.nim
index c96901b..f284d31 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -61,6 +61,7 @@ template setNativeValue(ev, val) = cast[Element](ev.target).value = val
 template keyeventBody() =
   let v = nativeValue(ev)
   n.value = v
+  assert action != nil
   action(ev, n)
   if n.value != v:
     setNativeValue(ev, n.value)
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index c17d725..cfbe391 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -59,6 +59,19 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
     result.add n[0]
     for i in 1 ..< n.len:
       result.add tcall2(n[i], tmpContext)
+  of nnkProcDef:
+    let name = getName n[0]
+    if name.startsWith"on":
+      # turn it into an anon proc:
+      let anon = copyNimTree(n)
+      anon[0] = newEmptyNode()
+      if tmpContext == nil:
+        error "no VNode to attach the event handler to"
+      else:
+        result = newCall(bindSym"addEventHandler", tmpContext,
+                         newDotExpr(bindSym"EventKind", n[0]), anon, ident("kxi"))
+    else:
+      result = n
   of nnkVarSection, nnkLetSection, nnkConstSection:
     result = n
   of nnkCallKinds:
@@ -87,6 +100,8 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
             result.add newDotAsgn(tmp, key, x[1])
           elif eqIdent(key, "setFocus"):
             result.add newCall(key, tmp, x[1], ident"kxi")
+          elif eqIdent(key, "events"):
+            result.add newCall(bindSym"mergeEvents", tmp, x[1])
           else:
             result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
         elif ck != ComponentKind.Tag:
@@ -100,7 +115,28 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
       else:
         result.add newCall(bindSym"add", tmpContext, tmp)
     elif tmpContext != nil and op notin StmtContext:
-      result = newCall(bindSym"add", tmpContext, n)
+      var hasEventHandlers = false
+      for i in 1..<n.len:
+        let it = n[i]
+        if it.kind in {nnkProcDef, nnkStmtList}:
+          hasEventHandlers = true
+          break
+      if not hasEventHandlers:
+        result = newCall(bindSym"add", tmpContext, n)
+      else:
+        let tmp = genSym(nskLet, "tmp")
+        var slicedCall = newCall(n[0])
+        let ex = newTree(nnkStmtListExpr)
+        ex.add newEmptyNode() # will become the let statement
+        for i in 1..<n.len:
+          let it = n[i]
+          if it.kind in {nnkProcDef, nnkStmtList}:
+            ex.add tcall2(it, tmp)
+          else:
+            slicedCall.add it
+        ex[0] = newLetStmt(tmp, slicedCall)
+        ex.add tmp
+        result = newCall(bindSym"add", tmpContext, ex)
     elif op == "!" and n.len == 2:
       result = n[1]
     else:
diff --git a/src/vdom.nim b/src/vdom.nim
index 8e4f983..4ffb7f4 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -105,6 +105,9 @@ buildLookupTables()
 type
   EventHandler* = proc (ev: Event; target: VNode) {.closure.}
   NativeEventHandler* = proc (ev: Event) {.closure.}
+
+  EventHandlers* = seq[(EventKind, EventHandler, NativeEventHandler)]
+
   VKey* = cstring
 
   VNode* = ref object of RootObj
@@ -114,7 +117,7 @@ type
     kids: seq[VNode]
     # even index: key, odd index: value; done this way for memory efficiency:
     attrs: seq[cstring]
-    events*: seq[(EventKind, EventHandler, NativeEventHandler)]
+    events*: EventHandlers
     when false:
       hash*: Hash
       validHash*: bool
@@ -157,9 +160,21 @@ proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, index: -1, kids: @args)
 
+proc setEvent(v: VNode; kind: EventKind; handler: EventHandler) =
+  assert handler != nil
+  for i in 0..<v.events.len:
+    if v.events[i][0] == kind:
+      v.events[i][1] = handler
+      return
+  v.events.add((kind, handler, nil))
+
+proc mergeEvents*(v: VNode; handlers: EventHandlers) =
+  ## Overrides or adds the event handlers to `v`'s internal event handler list.
+  for h in handlers: v.setEvent(h[0], h[1])
+
 proc defaultChangedImpl*(v, newInstance: VComponent): bool =
   ## The default implementation of 'changed'.
-  result = v.version != v.renderedVersion
+  result = v.key != newInstance.key or v.version != v.renderedVersion
 
 proc defaultUpdatedImpl*(v, newInstance: VComponent) =
   discard
diff --git a/tests/components.nim b/tests/components.nim
new file mode 100644
index 0000000..39f070f
--- /dev/null
+++ b/tests/components.nim
@@ -0,0 +1,128 @@
+import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
+
+type TextInput* = ref object of VComponent
+  value: cstring
+  isActive: bool
+
+proc render(x: VComponent): VNode =
+  let self = TextInput(x)
+
+  let style = style(
+    (StyleAttr.position, cstring"relative"),
+    (StyleAttr.paddingLeft, cstring"10px"),
+    (StyleAttr.paddingRight, cstring"5px"),
+    (StyleAttr.height, cstring"30px"),
+    (StyleAttr.lineHeight, cstring"30px"),
+    (StyleAttr.border, cstring"solid 1px " & (if self.isActive: cstring"red" else: cstring"black")),
+    (StyleAttr.fontSize, cstring"12px"),
+    (StyleAttr.fontWeight, cstring"600")
+  ).merge(self.style)
+
+  let inputStyle = style.merge(style(
+    (StyleAttr.color, cstring"inherit"),
+    (StyleAttr.fontSize, cstring"inherit"),
+    (StyleAttr.fontWeight, cstring"inherit"),
+    (StyleAttr.fontFamily, cstring"inherit"),
+    (StyleAttr.position, cstring"absolute"),
+    (StyleAttr.top, cstring"0"),
+    (StyleAttr.left, cstring"0"),
+    (StyleAttr.height, cstring"100%"),
+    (StyleAttr.width, cstring"100%"),
+    (StyleAttr.border, cstring"none"),
+    (StyleAttr.backgroundColor, cstring"transparent"),
+  ))
+
+  proc flip(ev: Event; n: VNode) =
+    self.isActive = not self.isActive
+    echo "flip! ", self.isActive, " id: ", self.debugId, " version ", self.version
+    markDirty(self)
+
+  result = buildHtml(tdiv(style=style)):
+    input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip,
+                    events=self.events)
+
+proc update(current, next: VComponent) =
+  let current = TextInput(current)
+  let next = TextInput(next)
+  current.value = next.value
+  current.key = next.key
+
+proc changed(current, next: VComponent): bool = true
+
+proc newTextInput*(style: VStyle = VStyle(); key: cstring;
+                   value = cstring""): TextInput =
+  result = newComponent(TextInput, render, changed=changed, updated=update)
+  result.style = style
+  result.value = value
+  result.key = key
+
+when false:
+  type
+    Combined = ref object of VComponent
+      a, b: TextInput
+
+  proc renderComb(self: VComponent): VNode =
+    let self = Combined(self)
+
+    proc bu(ev: Event; n: VNode) =
+      self.a.value = ""
+      self.b.value = ""
+      markDirty(self.a)
+      markDirty(self.b)
+
+    result = buildHtml(tdiv(style=self.style)):
+      self.a
+      self.b
+      button(onclick=bu):
+        text "reset"
+
+  proc changed(self: VComponent): bool =
+    let self = Combined(self)
+    result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
+
+  proc newCombined*(style: VStyle = VStyle()): Combined =
+    result = newComponent(Combined, renderComb, changed=changed)
+    result.a = newTextInput(style, "AAA")
+    result.b = newTextInput(style, "BBB")
+
+
+var
+  persons: seq[cstring] = @[cstring"Karax", "Abathur", "Fenix"]
+  errmsg = cstring""
+
+proc renderPerson(text: cstring, index: int): VNode =
+  result = buildHtml(tdiv):
+    newTextInput(VStyle(), &index, text):
+      proc onkeyuplater(ev: Event; n: VNode) =
+        let v = n.value
+        if v.len > 0:
+          persons[index] = v
+          errmsg = ""
+        else:
+          errmsg = "name must not be empty"
+    button:
+      proc onclick(ev: Event; n: VNode) =
+        persons.delete(index)
+        errmsg = ""
+        echo persons
+      text "(x)"
+
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    tdiv:
+      for index, text in persons.pairs:
+        renderPerson(text, index)
+    tdiv:
+      newTextInput(VStyle(), &persons.len, ""):
+        proc onkeyuplater(ev: Event; n: VNode) =
+          let v = n.value
+          if v.len > 0:
+            persons.add v
+            errmsg = ""
+          else:
+            errmsg = "name must not be empty"
+    tdiv:
+      text errmsg
+
+setRenderer createDom

From b3c83ed11998efb03b2a578ca0832430e7457343 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 11 Jul 2017 20:41:01 +0200
Subject: [PATCH 112/264] optimized the diff algorithm further

---
 src/karax.nim | 55 +++++++++++++++++++++++++++++++++++++++++++--------
 src/vdom.nim  |  2 +-
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index f284d31..6c048cc 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -190,13 +190,33 @@ type
   EqResult = enum
     componentsIdentical, different, similar, identical, usenewNode
 
+  DifferEnum = enum
+    deKind, deId, deIndex, deText, deComponent, deClass,
+    deSimilar
+
+when defined(profileKarax):
+  var
+    reasons: array[DifferEnum, int]
+
+  proc echa(a: array[DifferEnum, int]) =
+    for i in low(DifferEnum)..high(DifferEnum):
+      echo i, " value: ", a[i]
+
 proc eq(a, b: VNode): EqResult =
-  if a.kind != b.kind: return different
-  if a.id != b.id: return different
+  if a.kind != b.kind:
+    when defined(profileKarax): inc reasons[deKind]
+    return different
+  if a.id != b.id:
+    when defined(profileKarax): inc reasons[deId]
+    return different
   result = identical
-  if a.index != b.index: return different
+  if a.index != b.index:
+    when defined(profileKarax): inc reasons[deIndex]
+    return different
   if a.kind == VNodeKind.text:
-    if a.text != b.text: return different
+    if a.text != b.text:
+      when defined(profileKarax): inc reasons[deText]
+      return similar
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
     if a.text != b.text: return different
     if a.len != b.len: return different
@@ -204,11 +224,19 @@ proc eq(a, b: VNode): EqResult =
       if eq(a[i], b[i]) == different: return different
   elif b.kind == VNodeKind.component:
     # different component names mean different components:
-    if a.text != b.text: return different
-    if VComponent(a).key != VComponent(b).key: return different
+    if a.text != b.text:
+      when defined(profileKarax): inc reasons[deComponent]
+      return different
+    if VComponent(a).key != VComponent(b).key:
+      when defined(profileKarax): inc reasons[deComponent]
+      return different
     return componentsIdentical
-  if a.class != b.class: return different
-  if not eq(a.style, b.style) or not sameAttrs(a, b): return similar
+  if a.class != b.class:
+    when defined(profileKarax): inc reasons[deClass]
+    return different
+  if not eq(a.style, b.style) or not sameAttrs(a, b):
+    when defined(profileKarax): inc reasons[deSimilar]
+    return similar
   # Do not test event listeners here!
   return result
 
@@ -328,6 +356,10 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
     if result == similar:
       updateStyles(newNode, oldNode)
       updateAttributes(newNode, oldNode)
+      if oldNode.kind == VNodeKind.text:
+        oldNode.text = newNode.text
+        oldNode.dom.nodeValue = newNode.text
+
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
     if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
@@ -471,7 +503,14 @@ proc dodraw(kxi: KaraxInstance) =
     let olddom = document.getElementById(kxi.rootId)
     discard diff(newtree, kxi.currentTree, nil, olddom, kxi)
     #kout cstring"patch len ", patches.len
+  when defined(profileKarax):
+    echo "<<<<<<<<<<<<<<"
+    echa reasons
   applyComponents(kxi)
+  when defined(profileKarax):
+    echo "--------------"
+    echa reasons
+    echo ">>>>>>>>>>>>>>"
   applyPatch(kxi)
   kxi.currentTree = newtree
   doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
diff --git a/src/vdom.nim b/src/vdom.nim
index 4ffb7f4..2e3b7dd 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -217,7 +217,7 @@ proc getAttr*(n: VNode; key: cstring): cstring =
     if n.attrs[i] == key: return n.attrs[i+1]
 
 proc takeOverAttr*(newNode, oldNode: VNode) =
-  oldNode.attrs = newNode.attrs
+  shallowCopy oldNode.attrs, newNode.attrs
 
 proc len*(x: VNode): int = x.kids.len
 proc `[]`*(x: VNode; idx: int): VNode = x.kids[idx]

From e4d8cb4c206571751c12f59d2ae72e8f0a30f75a Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 11 Jul 2017 22:26:46 +0200
Subject: [PATCH 113/264] make tests green again

---
 tests/difftest.nim | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/tests/difftest.nim b/tests/difftest.nim
index 3fbb800..cfdd9b4 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -52,12 +52,16 @@ proc testInsert() =
   let a = buildHtml(tdiv):
     ul:
       li: text "A"
-      li: text "C"
+      li:
+        button:
+          text "C"
   let b = buildHtml(tdiv):
     ul:
       li: text "A"
       li: text "B"
-      li: text "C"
+      li:
+        button:
+          text "C"
   doDiff(a, b, "pkInsertBefore li B")
 
 proc testInsert2() =
@@ -66,7 +70,9 @@ proc testInsert2() =
       tdiv:
         ul:
           li: text "A"
-          li: text "D"
+          li:
+            button:
+              text "D"
   let b = buildHtml(tdiv):
     tdiv:
       tdiv:
@@ -74,7 +80,9 @@ proc testInsert2() =
           li: text "A"
           li: text "B"
           li: text "C"
-          li: text "D"
+          li:
+            button:
+              text "D"
   doDiff(a, b, "pkInsertBefore li B", "pkInsertBefore li C")
 
 proc testDelete() =
@@ -108,7 +116,8 @@ proc testDeleteMiddle() =
       li:
         tdiv: text "G"
       li:
-        tdiv: text "H"
+        button:
+          tdiv: text "H"
   let b = buildHtml(tdiv):
     ul:
       li:
@@ -124,7 +133,8 @@ proc testDeleteMiddle() =
       li:
         tdiv: text "F"
       li:
-        tdiv: text "H"
+        button:
+          tdiv: text "H"
   doDiff(a, b, "pkDetach li div G", "pkRemove nil")
 
 proc createEntry(id: cstring): VNode =
@@ -146,14 +156,14 @@ proc testWild() =
   let a = createEntries(entries)
   entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
   let b = createEntries(entries)
-  doDiff(a, b, "pkDetach button 7", "pkRemove nil", "pkDetach div 7", "pkRemove nil")
+  doDiff(a, b, "pkDetach button 7", "pkRemove nil", "pkDetach div 5", "pkRemove nil")
 
 proc testWildInsert() =
   var entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
   let a = createEntries(entries)
   entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring"7", cstring("5")]
   let b = createEntries(entries)
-  doDiff(a, b, "pkInsertBefore button 7", "pkInsertBefore div 7")
+  doDiff(a, b, "pkInsertBefore button 7", "pkAppend div 5")
 
 kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard)
 

From 2ced69038786eb8456825ef46fb362360248c461 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 12 Jul 2017 12:23:24 +0200
Subject: [PATCH 114/264] better event merging for components

---
 src/karax.nim        | 12 ++++++++----
 src/vdom.nim         |  6 +++---
 tests/components.nim |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 6c048cc..d5de6f5 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -190,11 +190,12 @@ type
   EqResult = enum
     componentsIdentical, different, similar, identical, usenewNode
 
-  DifferEnum = enum
-    deKind, deId, deIndex, deText, deComponent, deClass,
-    deSimilar
-
 when defined(profileKarax):
+  type
+    DifferEnum = enum
+      deKind, deId, deIndex, deText, deComponent, deClass,
+      deSimilar
+
   var
     reasons: array[DifferEnum, int]
 
@@ -227,6 +228,9 @@ proc eq(a, b: VNode): EqResult =
     if a.text != b.text:
       when defined(profileKarax): inc reasons[deComponent]
       return different
+    if VComponent(a).key.isNil and VComponent(b).key.isNil:
+      when defined(profileKarax): inc reasons[deComponent]
+      return different
     if VComponent(a).key != VComponent(b).key:
       when defined(profileKarax): inc reasons[deComponent]
       return different
diff --git a/src/vdom.nim b/src/vdom.nim
index 2e3b7dd..f31d6d6 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -160,17 +160,17 @@ proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
 proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, index: -1, kids: @args)
 
-proc setEvent(v: VNode; kind: EventKind; handler: EventHandler) =
+proc setEventIfNoConflict(v: VNode; kind: EventKind; handler: EventHandler) =
   assert handler != nil
   for i in 0..<v.events.len:
     if v.events[i][0] == kind:
-      v.events[i][1] = handler
+      #v.events[i][1] = handler
       return
   v.events.add((kind, handler, nil))
 
 proc mergeEvents*(v: VNode; handlers: EventHandlers) =
   ## Overrides or adds the event handlers to `v`'s internal event handler list.
-  for h in handlers: v.setEvent(h[0], h[1])
+  for h in handlers: v.setEventIfNoConflict(h[0], h[1])
 
 proc defaultChangedImpl*(v, newInstance: VComponent): bool =
   ## The default implementation of 'changed'.
diff --git a/tests/components.nim b/tests/components.nim
index 39f070f..99e1bed 100644
--- a/tests/components.nim
+++ b/tests/components.nim
@@ -115,7 +115,7 @@ proc createDom(): VNode =
         renderPerson(text, index)
     tdiv:
       newTextInput(VStyle(), &persons.len, ""):
-        proc onkeyuplater(ev: Event; n: VNode) =
+        proc onkeyupenter(ev: Event; n: VNode) =
           let v = n.value
           if v.len > 0:
             persons.add v

From e94071b077d125534d8e95006c1b7c4e74171b27 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 12 Jul 2017 13:23:58 +0200
Subject: [PATCH 115/264] components work without 'key' attribute set

---
 src/karax.nim        | 6 +++---
 tests/components.nim | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index d5de6f5..9d74a9e 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -228,9 +228,9 @@ proc eq(a, b: VNode): EqResult =
     if a.text != b.text:
       when defined(profileKarax): inc reasons[deComponent]
       return different
-    if VComponent(a).key.isNil and VComponent(b).key.isNil:
-      when defined(profileKarax): inc reasons[deComponent]
-      return different
+    #if VComponent(a).key.isNil and VComponent(b).key.isNil:
+    #  when defined(profileKarax): inc reasons[deComponent]
+    #  return different
     if VComponent(a).key != VComponent(b).key:
       when defined(profileKarax): inc reasons[deComponent]
       return different
diff --git a/tests/components.nim b/tests/components.nim
index 99e1bed..6024689 100644
--- a/tests/components.nim
+++ b/tests/components.nim
@@ -54,7 +54,7 @@ proc newTextInput*(style: VStyle = VStyle(); key: cstring;
   result = newComponent(TextInput, render, changed=changed, updated=update)
   result.style = style
   result.value = value
-  result.key = key
+  #result.key = key
 
 when false:
   type

From f9525dc646224afe8988303e87dc8ffafc5fae94 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Fri, 14 Jul 2017 16:17:06 +0200
Subject: [PATCH 116/264] added support for i18n (candidate for the stdlib?)

---
 src/i18n.nim      | 152 ++++++++++++
 src/languages.nim | 616 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 768 insertions(+)
 create mode 100644 src/i18n.nim
 create mode 100644 src/languages.nim

diff --git a/src/i18n.nim b/src/i18n.nim
new file mode 100644
index 0000000..42274ff
--- /dev/null
+++ b/src/i18n.nim
@@ -0,0 +1,152 @@
+## Karax -- Single page applications for Nim.
+
+## i18n support for Karax applications. We distinguish between:
+##
+## - translate:  Lookup text translations
+## - localize:   Localize Date and Time objects to local formats
+##
+## Localization has not yet been implemented.
+
+import languages, jdict, jstrutils
+
+var currentLanguage = Language.enUS
+
+proc getLanguage(): cstring =
+  {.emit: "`result` = (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.language;".}
+
+proc detectLanguage*(): Language =
+  let x = getLanguage()
+  for i in low(Language)..high(Language):
+    if languageToCode[i] == x: return i
+  return Language.enUS
+
+proc setCurrentLanguage*(newLanguage = detectLanguage()) =
+  currentLanguage = newLanguage
+
+proc getCurrentLanguage*(): Language = currentLanguage
+
+type Translation* = JDict[cstring, cstring]
+
+var
+  translations: array[Language, Translation]
+
+proc registerTranslation*(lang: Language; t: Translation) = translations[lang] = t
+
+proc addTranslation*(lang: Language; key, val: cstring) =
+  if translations[lang].isNil: translations[lang] = newJDict[cstring, cstring]()
+  translations[lang][key] = val
+
+proc translate(x: cstring): cstring =
+  let y = translations[currentLanguage]
+  if y != nil and y.contains(x):
+    result = y[x]
+  else:
+    result = x
+
+type TranslatedString* = distinct cstring
+
+template i18n*(x: string): TranslatedString = TranslatedString(translate(cstring x))
+
+proc raiseInvalidFormat(errmsg: string) =
+  raise newException(ValueError, errmsg)
+
+discard """
+  $[1:item|items]1$ selected.
+"""
+
+proc `{}`(x: cstring; i: int): char {.importcpp: "#.charCodeAt(#)".}
+proc sadd(s: JSeq[char]; c: char) {.importcpp: "#.push(String.fromCharCode(#))".}
+
+proc parseChoice(f: cstring; i, choice: int,
+                 r: JSeq[char]) =
+  var i = i
+  while i < f.len:
+    var n = 0
+    let oldI = i
+    var toAdd = false
+    while i < f.len and f{i} >= '0' and f{i} <= '9':
+      n = n * 10 + ord(f{i}) - ord('0')
+      inc i
+    if oldI != i:
+      if f{i} == ':':
+        inc i
+      else:
+        raiseInvalidFormat"':' after number expected"
+      toAdd = choice == n
+    else:
+      # an else section does not start with a number:
+      toAdd = true
+    while i < f.len and f{i} != ']' and f{i} != '|':
+      if toAdd: r.sadd f{i}
+      inc i
+    if toAdd: break
+    inc i
+
+proc join(x: JSeq[char]): cstring {.importcpp: "#.join(\"\")".}
+proc add(x: JSeq[char]; y: cstring) =
+  for i in 0..<y.len: x.sadd y{i}
+
+proc `%`*(formatString: TranslatedString; args: openArray[cstring]): cstring =
+  let f = cstring(formatString)
+  var i = 0
+  var num = 0
+  var r = newJSeq[char]()
+  while i < f.len:
+    if f{i} == '$' and i+1 < f.len:
+      inc i
+      case f{i}
+      of '#':
+        r.add args[num]
+        inc i
+        inc num
+      of '1'..'9', '-':
+        var j = 0
+        var negative = f{i} == '-'
+        if negative: inc i
+        while f{i} >= '0' and f{i} <= '9':
+          j = j * 10 + ord(f{i}) - ord('0')
+          inc i
+        let idx = if not negative: j-1 else: args.len-j
+        r.add args[idx]
+      of '$':
+        inc(i)
+        r.add '$'
+      of '[':
+        let start = i+1
+        while i < f.len and f{i} != ']': inc i
+        inc i
+        if i >= f.len: raiseInvalidFormat"']' expected"
+        case f{i}
+        of '#':
+          parseChoice(f, start, parseInt args[num], r)
+          inc i
+          inc num
+        of '1'..'9', '-':
+          var j = 0
+          var negative = f{i} == '-'
+          if negative: inc i
+          while f{i} >= '0' and f{i} <= '9':
+            j = j * 10 + ord(f{i}) - ord('0')
+            inc i
+          let idx = if not negative: j-1 else: args.len-j
+          parseChoice(f, start, parseInt args[idx], r)
+        else: raiseInvalidFormat"argument index expected after ']'"
+      else:
+        raiseInvalidFormat("'#', '$', or number expected")
+      if i < f.len and f{i} == '$': inc i
+    else:
+      r.sadd f{i}
+      inc i
+  result = join(r)
+
+
+when isMainModule:
+  addTranslation(Language.deDE, "$#$ -> $#$", "$2 macht $1")
+  setCurrentLanguage(Language.deDE)
+
+  echo(i18n"$#$ -> $#$" % [cstring"1", "2"])
+  echo(i18n"$[1:item |items ]1$ -> $1" % [cstring"1", "2"])
+  echo(i18n"$[1:item |items ]1 -> $1" % [cstring"0", "2"])
+  echo(i18n"$[1:item |items ]1 -> $1" % [cstring"2", "2"])
+  echo(i18n"$[1:item |items ]1$ -> $1" % [cstring"3", "2"])
+  echo(i18n"$1 $[1:item |4:huha |items ]1$ -> $1" % [cstring"4", "2"])
diff --git a/src/languages.nim b/src/languages.nim
new file mode 100644
index 0000000..6b6b027
--- /dev/null
+++ b/src/languages.nim
@@ -0,0 +1,616 @@
+## Karax -- Single page applications for Nim.
+
+type
+  Language* {.pure.} = enum ## A pure enum that contains most (all?)
+                            ## known human languages in current use.
+    afZA ## "South Africa - Afrikaans"
+    amET ## "Ethiopia - Amharic"
+    arAE ## "U.A.E. - Arabic"
+    arBH ## "Bahrain - Arabic"
+    arDZ ## "Algeria - Arabic"
+    arEG ## "Egypt - Arabic"
+    arIQ ## "Iraq - Arabic"
+    arJO ## "Jordan - Arabic"
+    arKW ## "Kuwait - Arabic"
+    arLB ## "Lebanon - Arabic"
+    arLY ## "Libya - Arabic"
+    arMA ## "Morocco - Arabic"
+    arOM ## "Oman - Arabic"
+    arQA ## "Qatar - Arabic"
+    arSA ## "Saudi Arabia - Arabic"
+    arSY ## "Syria - Arabic"
+    arTN ## "Tunisia - Arabic"
+    arYE ## "Yemen - Arabic"
+    arnCL ## "Chile - Mapudungun"
+    asIN ## "India - Assamese"
+    azAZ ## "Azerbaijan - Azeri (Cyrillic)"
+    baRU ## "Russia - Bashkir"
+    beBY ## "Belarus - Belarusian"
+    bgBG ## "Bulgaria - Bulgarian"
+    bnBD ## "Bangladesh - Bengali"
+    bnIN ## "India - Bengali"
+    boCN ## "People's Republic of China - Tibetan"
+    brFR ## "France - Breton"
+    bsBA ## "Bosnia and Herzegovina - Bosnian (Cyrillic)"
+    caES ## "Spain - Catalan"
+    coFR ## "France - Corsican"
+    csCZ ## "Czech Republic - Czech"
+    cyGB ## "United Kingdom - Welsh"
+    daDK ## "Denmark - Danish"
+    deAT ## "Austria - German"
+    deCH ## "Switzerland - German"
+    deDE ## "Germany - German"
+    deLI ## "Liechtenstein - German"
+    deLU ## "Luxembourg - German"
+    dsbDE ## "Germany - Lower Sorbian"
+    dvMV ## "Maldives - Divehi"
+    elGR ## "Greece - Greek"
+    en029 ## "Caribbean - English"
+    enAU ## "Australia - English"
+    enBZ ## "Belize - English"
+    enCA ## "Canada - English"
+    enGB ## "United Kingdom - English"
+    enIE ## "Ireland - English"
+    enIN ## "India - English"
+    enJM ## "Jamaica - English"
+    enMY ## "Malaysia - English"
+    enNZ ## "New Zealand - English"
+    enPH ## "Republic of the Philippines - English"
+    enSG ## "Singapore - English"
+    enTT ## "Trinidad and Tobago - English"
+    enUS ## "United States - English"
+    enZA ## "South Africa - English"
+    enZW ## "Zimbabwe - English"
+    esAR ## "Argentina - Spanish"
+    esBO ## "Bolivia - Spanish"
+    esCL ## "Chile - Spanish"
+    esCO ## "Colombia - Spanish"
+    esCR ## "Costa Rica - Spanish"
+    esDO ## "Dominican Republic - Spanish"
+    esEC ## "Ecuador - Spanish"
+    esES ## "Spain - Spanish"
+    esGT ## "Guatemala - Spanish"
+    esHN ## "Honduras - Spanish"
+    esMX ## "Mexico - Spanish"
+    esNI ## "Nicaragua - Spanish"
+    esPA ## "Panama - Spanish"
+    esPE ## "Peru - Spanish"
+    esPR ## "Puerto Rico - Spanish"
+    esPY ## "Paraguay - Spanish"
+    esSV ## "El Salvador - Spanish"
+    esUS ## "United States - Spanish"
+    esUY ## "Uruguay - Spanish"
+    esVE ## "Bolivarian Republic of Venezuela - Spanish"
+    etEE ## "Estonia - Estonian"
+    euES ## "Spain - Basque"
+    faIR ## "Iran - Persian"
+    fiFI ## "Finland - Finnish"
+    filPH ## "Philippines - Filipino"
+    foFO ## "Faroe Islands - Faroese"
+    frBE ## "Belgium - French"
+    frCA ## "Canada - French"
+    frCH ## "Switzerland - French"
+    frFR ## "France - French"
+    frLU ## "Luxembourg - French"
+    frMC ## "Principality of Monaco - French"
+    fyNL ## "Netherlands - Frisian"
+    gaIE ## "Ireland - Irish"
+    gdGB ## "United Kingdom - Scottish Gaelic"
+    glES ## "Spain - Galician"
+    gswFR ## "France - Alsatian"
+    guIN ## "India - Gujarati"
+    haNG ## "Nigeria - Hausa (Latin)"
+    heIL ## "Israel - Hebrew"
+    hiIN ## "India - Hindi"
+    hrBA ## "Bosnia and Herzegovina - Croatian"
+    hrHR ## "Croatia - Croatian"
+    hsbDE ## "Germany - Upper Sorbian"
+    huHU ## "Hungary - Hungarian"
+    hyAM ## "Armenia - Armenian"
+    idID ## "Indonesia - Indonesian"
+    igNG ## "Nigeria - Igbo"
+    iiCN ## "People's Republic of China - Yi"
+    isIS ## "Iceland - Icelandic"
+    itCH ## "Switzerland - Italian"
+    itIT ## "Italy - Italian"
+    iuCA ## "Canada - Inuktitut (Latin)"
+    jaJP ## "Japan - Japanese"
+    kaGE ## "Georgia - Georgian"
+    kkKZ ## "Kazakhstan - Kazakh"
+    klGL ## "Greenland - Greenlandic"
+    kmKH ## "Cambodia - Khmer"
+    knIN ## "India - Kannada"
+    koKR ## "Korea - Korean"
+    kokIN ## "India - Konkani"
+    kyKG ## "Kyrgyzstan - Kyrgyz"
+    lbLU ## "Luxembourg - Luxembourgish"
+    loLA ## "Lao P.D.R. - Lao"
+    ltLT ## "Lithuania - Lithuanian"
+    lvLV ## "Latvia - Latvian"
+    miNZ ## "New Zealand - Maori"
+    mkMK ## "Macedonia (FYROM) - Macedonian (FYROM)"
+    mlIN ## "India - Malayalam"
+    mnCN ## "People's Republic of China - Mongolian (Traditional Mongolian)"
+    mnMN ## "Mongolia - Mongolian (Cyrillic)"
+    mohCA ## "Canada - Mohawk"
+    mrIN ## "India - Marathi"
+    msBN ## "Brunei Darussalam - Malay"
+    msMY ## "Malaysia - Malay"
+    mtMT ## "Malta - Maltese"
+    nbNO ## "Norway - Norwegian (Bokmal)"
+    neNP ## "Nepal - Nepali"
+    nlBE ## "Belgium - Dutch"
+    nlNL ## "Netherlands - Dutch"
+    nnNO ## "Norway - Norwegian (Nynorsk)"
+    nsoZA ## "South Africa - Sesotho sa Leboa"
+    ocFR ## "France - Occitan"
+    orIN ## "India - Oriya"
+    paIN ## "India - Punjabi"
+    plPL ## "Poland - Polish"
+    prsAF ## "Afghanistan - Dari"
+    psAF ## "Afghanistan - Pashto"
+    ptBR ## "Brazil - Portuguese"
+    ptPT ## "Portugal - Portuguese"
+    qutGT ## "Guatemala - K'iche"
+    quzBO ## "Bolivia - Quechua"
+    quzEC ## "Ecuador - Quechua"
+    quzPE ## "Peru - Quechua"
+    rmCH ## "Switzerland - Romansh"
+    roRO ## "Romania - Romanian"
+    ruRU ## "Russia - Russian"
+    rwRW ## "Rwanda - Kinyarwanda"
+    saIN ## "India - Sanskrit"
+    sahRU ## "Russia - Yakut"
+    seFI ## "Finland - Sami (Northern)"
+    seNO ## "Norway - Sami (Northern)"
+    seSE ## "Sweden - Sami (Northern)"
+    siLK ## "Sri Lanka - Sinhala"
+    skSK ## "Slovakia - Slovak"
+    slSI ## "Slovenia - Slovenian"
+    smaNO ## "Norway - Sami (Southern)"
+    smaSE ## "Sweden - Sami (Southern)"
+    smjNO ## "Norway - Sami (Lule)"
+    smjSE ## "Sweden - Sami (Lule)"
+    smnFI ## "Finland - Sami (Inari)"
+    smsFI ## "Finland - Sami (Skolt)"
+    sqAL ## "Albania - Albanian"
+    srBA ## "Bosnia and Herzegovina - Serbian (Cyrillic)"
+    srCS ## "Serbia and Montenegro (Former) - Serbian (Cyrillic)"
+    srME ## "Montenegro - Serbian (Cyrillic)"
+    srRS ## "Serbia - Serbian (Cyrillic)"
+    svFI ## "Finland - Swedish"
+    svSE ## "Sweden - Swedish"
+    swKE ## "Kenya - Kiswahili"
+    syrSY ## "Syria - Syriac"
+    taIN ## "India - Tamil"
+    teIN ## "India - Telugu"
+    tgTJ ## "Tajikistan - Tajik (Cyrillic)"
+    thTH ## "Thailand - Thai"
+    tkTM ## "Turkmenistan - Turkmen"
+    tnZA ## "South Africa - Setswana"
+    trTR ## "Turkey - Turkish"
+    ttRU ## "Russia - Tatar"
+    tzmDZ ## "Algeria - Tamazight (Latin)"
+    ugCN ## "People's Republic of China - Uyghur"
+    ukUA ## "Ukraine - Ukrainian"
+    urPK ## "Islamic Republic of Pakistan - Urdu"
+    uzUZ ## "Uzbekistan - Uzbek (Cyrillic)"
+    viVN ## "Vietnam - Vietnamese"
+    woSN ## "Senegal - Wolof"
+    xhZA ## "South Africa - isiXhosa"
+    yoNG ## "Nigeria - Yoruba"
+    zhCN ## "People's Republic of China - Chinese (Simplified) Legacy"
+    zhHK ## "Hong Kong S.A.R. - Chinese (Traditional) Legacy"
+    zhMO ## "Macao S.A.R. - Chinese (Traditional) Legacy"
+    zhSG ## "Singapore - Chinese (Simplified) Legacy"
+    zhTW ## "Taiwan - Chinese (Traditional) Legacy"
+    zuZA ## "South Africa - isiZulu"
+
+const
+  languageToName*: array[Language, cstring] = [
+    Language.afZA: cstring"South Africa - Afrikaans",
+    Language.amET: cstring"Ethiopia - Amharic",
+    Language.arAE: cstring"U.A.E. - Arabic",
+    Language.arBH: cstring"Bahrain - Arabic",
+    Language.arDZ: cstring"Algeria - Arabic",
+    Language.arEG: cstring"Egypt - Arabic",
+    Language.arIQ: cstring"Iraq - Arabic",
+    Language.arJO: cstring"Jordan - Arabic",
+    Language.arKW: cstring"Kuwait - Arabic",
+    Language.arLB: cstring"Lebanon - Arabic",
+    Language.arLY: cstring"Libya - Arabic",
+    Language.arMA: cstring"Morocco - Arabic",
+    Language.arOM: cstring"Oman - Arabic",
+    Language.arQA: cstring"Qatar - Arabic",
+    Language.arSA: cstring"Saudi Arabia - Arabic",
+    Language.arSY: cstring"Syria - Arabic",
+    Language.arTN: cstring"Tunisia - Arabic",
+    Language.arYE: cstring"Yemen - Arabic",
+    Language.arnCL: cstring"Chile - Mapudungun",
+    Language.asIN: cstring"India - Assamese",
+    Language.azAZ: cstring"Azerbaijan - Azeri (Cyrillic)",
+    Language.baRU: cstring"Russia - Bashkir",
+    Language.beBY: cstring"Belarus - Belarusian",
+    Language.bgBG: cstring"Bulgaria - Bulgarian",
+    Language.bnBD: cstring"Bangladesh - Bengali",
+    Language.bnIN: cstring"India - Bengali",
+    Language.boCN: cstring"People's Republic of China - Tibetan",
+    Language.brFR: cstring"France - Breton",
+    Language.bsBA: cstring"Bosnia and Herzegovina - Bosnian (Cyrillic)",
+    Language.caES: cstring"Spain - Catalan",
+    Language.coFR: cstring"France - Corsican",
+    Language.csCZ: cstring"Czech Republic - Czech",
+    Language.cyGB: cstring"United Kingdom - Welsh",
+    Language.daDK: cstring"Denmark - Danish",
+    Language.deAT: cstring"Austria - German",
+    Language.deCH: cstring"Switzerland - German",
+    Language.deDE: cstring"Germany - German",
+    Language.deLI: cstring"Liechtenstein - German",
+    Language.deLU: cstring"Luxembourg - German",
+    Language.dsbDE: cstring"Germany - Lower Sorbian",
+    Language.dvMV: cstring"Maldives - Divehi",
+    Language.elGR: cstring"Greece - Greek",
+    Language.en029: cstring"Caribbean - English",
+    Language.enAU: cstring"Australia - English",
+    Language.enBZ: cstring"Belize - English",
+    Language.enCA: cstring"Canada - English",
+    Language.enGB: cstring"United Kingdom - English",
+    Language.enIE: cstring"Ireland - English",
+    Language.enIN: cstring"India - English",
+    Language.enJM: cstring"Jamaica - English",
+    Language.enMY: cstring"Malaysia - English",
+    Language.enNZ: cstring"New Zealand - English",
+    Language.enPH: cstring"Republic of the Philippines - English",
+    Language.enSG: cstring"Singapore - English",
+    Language.enTT: cstring"Trinidad and Tobago - English",
+    Language.enUS: cstring"United States - English",
+    Language.enZA: cstring"South Africa - English",
+    Language.enZW: cstring"Zimbabwe - English",
+    Language.esAR: cstring"Argentina - Spanish",
+    Language.esBO: cstring"Bolivia - Spanish",
+    Language.esCL: cstring"Chile - Spanish",
+    Language.esCO: cstring"Colombia - Spanish",
+    Language.esCR: cstring"Costa Rica - Spanish",
+    Language.esDO: cstring"Dominican Republic - Spanish",
+    Language.esEC: cstring"Ecuador - Spanish",
+    Language.esES: cstring"Spain - Spanish",
+    Language.esGT: cstring"Guatemala - Spanish",
+    Language.esHN: cstring"Honduras - Spanish",
+    Language.esMX: cstring"Mexico - Spanish",
+    Language.esNI: cstring"Nicaragua - Spanish",
+    Language.esPA: cstring"Panama - Spanish",
+    Language.esPE: cstring"Peru - Spanish",
+    Language.esPR: cstring"Puerto Rico - Spanish",
+    Language.esPY: cstring"Paraguay - Spanish",
+    Language.esSV: cstring"El Salvador - Spanish",
+    Language.esUS: cstring"United States - Spanish",
+    Language.esUY: cstring"Uruguay - Spanish",
+    Language.esVE: cstring"Bolivarian Republic of Venezuela - Spanish",
+    Language.etEE: cstring"Estonia - Estonian",
+    Language.euES: cstring"Spain - Basque",
+    Language.faIR: cstring"Iran - Persian",
+    Language.fiFI: cstring"Finland - Finnish",
+    Language.filPH: cstring"Philippines - Filipino",
+    Language.foFO: cstring"Faroe Islands - Faroese",
+    Language.frBE: cstring"Belgium - French",
+    Language.frCA: cstring"Canada - French",
+    Language.frCH: cstring"Switzerland - French",
+    Language.frFR: cstring"France - French",
+    Language.frLU: cstring"Luxembourg - French",
+    Language.frMC: cstring"Principality of Monaco - French",
+    Language.fyNL: cstring"Netherlands - Frisian",
+    Language.gaIE: cstring"Ireland - Irish",
+    Language.gdGB: cstring"United Kingdom - Scottish Gaelic",
+    Language.glES: cstring"Spain - Galician",
+    Language.gswFR: cstring"France - Alsatian",
+    Language.guIN: cstring"India - Gujarati",
+    Language.haNG: cstring"Nigeria - Hausa (Latin)",
+    Language.heIL: cstring"Israel - Hebrew",
+    Language.hiIN: cstring"India - Hindi",
+    Language.hrBA: cstring"Bosnia and Herzegovina - Croatian",
+    Language.hrHR: cstring"Croatia - Croatian",
+    Language.hsbDE: cstring"Germany - Upper Sorbian",
+    Language.huHU: cstring"Hungary - Hungarian",
+    Language.hyAM: cstring"Armenia - Armenian",
+    Language.idID: cstring"Indonesia - Indonesian",
+    Language.igNG: cstring"Nigeria - Igbo",
+    Language.iiCN: cstring"People's Republic of China - Yi",
+    Language.isIS: cstring"Iceland - Icelandic",
+    Language.itCH: cstring"Switzerland - Italian",
+    Language.itIT: cstring"Italy - Italian",
+    Language.iuCA: cstring"Canada - Inuktitut (Latin)",
+    Language.jaJP: cstring"Japan - Japanese",
+    Language.kaGE: cstring"Georgia - Georgian",
+    Language.kkKZ: cstring"Kazakhstan - Kazakh",
+    Language.klGL: cstring"Greenland - Greenlandic",
+    Language.kmKH: cstring"Cambodia - Khmer",
+    Language.knIN: cstring"India - Kannada",
+    Language.koKR: cstring"Korea - Korean",
+    Language.kokIN: cstring"India - Konkani",
+    Language.kyKG: cstring"Kyrgyzstan - Kyrgyz",
+    Language.lbLU: cstring"Luxembourg - Luxembourgish",
+    Language.loLA: cstring"Lao P.D.R. - Lao",
+    Language.ltLT: cstring"Lithuania - Lithuanian",
+    Language.lvLV: cstring"Latvia - Latvian",
+    Language.miNZ: cstring"New Zealand - Maori",
+    Language.mkMK: cstring"Macedonia (FYROM) - Macedonian (FYROM)",
+    Language.mlIN: cstring"India - Malayalam",
+    Language.mnCN: cstring"People's Republic of China - Mongolian (Traditional Mongolian)",
+    Language.mnMN: cstring"Mongolia - Mongolian (Cyrillic)",
+    Language.mohCA: cstring"Canada - Mohawk",
+    Language.mrIN: cstring"India - Marathi",
+    Language.msBN: cstring"Brunei Darussalam - Malay",
+    Language.msMY: cstring"Malaysia - Malay",
+    Language.mtMT: cstring"Malta - Maltese",
+    Language.nbNO: cstring"Norway - Norwegian (Bokmal)",
+    Language.neNP: cstring"Nepal - Nepali",
+    Language.nlBE: cstring"Belgium - Dutch",
+    Language.nlNL: cstring"Netherlands - Dutch",
+    Language.nnNO: cstring"Norway - Norwegian (Nynorsk)",
+    Language.nsoZA: cstring"South Africa - Sesotho sa Leboa",
+    Language.ocFR: cstring"France - Occitan",
+    Language.orIN: cstring"India - Oriya",
+    Language.paIN: cstring"India - Punjabi",
+    Language.plPL: cstring"Poland - Polish",
+    Language.prsAF: cstring"Afghanistan - Dari",
+    Language.psAF: cstring"Afghanistan - Pashto",
+    Language.ptBR: cstring"Brazil - Portuguese",
+    Language.ptPT: cstring"Portugal - Portuguese",
+    Language.qutGT: cstring"Guatemala - K'iche",
+    Language.quzBO: cstring"Bolivia - Quechua",
+    Language.quzEC: cstring"Ecuador - Quechua",
+    Language.quzPE: cstring"Peru - Quechua",
+    Language.rmCH: cstring"Switzerland - Romansh",
+    Language.roRO: cstring"Romania - Romanian",
+    Language.ruRU: cstring"Russia - Russian",
+    Language.rwRW: cstring"Rwanda - Kinyarwanda",
+    Language.saIN: cstring"India - Sanskrit",
+    Language.sahRU: cstring"Russia - Yakut",
+    Language.seFI: cstring"Finland - Sami (Northern)",
+    Language.seNO: cstring"Norway - Sami (Northern)",
+    Language.seSE: cstring"Sweden - Sami (Northern)",
+    Language.siLK: cstring"Sri Lanka - Sinhala",
+    Language.skSK: cstring"Slovakia - Slovak",
+    Language.slSI: cstring"Slovenia - Slovenian",
+    Language.smaNO: cstring"Norway - Sami (Southern)",
+    Language.smaSE: cstring"Sweden - Sami (Southern)",
+    Language.smjNO: cstring"Norway - Sami (Lule)",
+    Language.smjSE: cstring"Sweden - Sami (Lule)",
+    Language.smnFI: cstring"Finland - Sami (Inari)",
+    Language.smsFI: cstring"Finland - Sami (Skolt)",
+    Language.sqAL: cstring"Albania - Albanian",
+    Language.srBA: cstring"Bosnia and Herzegovina - Serbian (Cyrillic)",
+    Language.srCS: cstring"Serbia and Montenegro (Former) - Serbian (Cyrillic)",
+    Language.srME: cstring"Montenegro - Serbian (Cyrillic)",
+    Language.srRS: cstring"Serbia - Serbian (Cyrillic)",
+    Language.svFI: cstring"Finland - Swedish",
+    Language.svSE: cstring"Sweden - Swedish",
+    Language.swKE: cstring"Kenya - Kiswahili",
+    Language.syrSY: cstring"Syria - Syriac",
+    Language.taIN: cstring"India - Tamil",
+    Language.teIN: cstring"India - Telugu",
+    Language.tgTJ: cstring"Tajikistan - Tajik (Cyrillic)",
+    Language.thTH: cstring"Thailand - Thai",
+    Language.tkTM: cstring"Turkmenistan - Turkmen",
+    Language.tnZA: cstring"South Africa - Setswana",
+    Language.trTR: cstring"Turkey - Turkish",
+    Language.ttRU: cstring"Russia - Tatar",
+    Language.tzmDZ: cstring"Algeria - Tamazight (Latin)",
+    Language.ugCN: cstring"People's Republic of China - Uyghur",
+    Language.ukUA: cstring"Ukraine - Ukrainian",
+    Language.urPK: cstring"Islamic Republic of Pakistan - Urdu",
+    Language.uzUZ: cstring"Uzbekistan - Uzbek (Cyrillic)",
+    Language.viVN: cstring"Vietnam - Vietnamese",
+    Language.woSN: cstring"Senegal - Wolof",
+    Language.xhZA: cstring"South Africa - isiXhosa",
+    Language.yoNG: cstring"Nigeria - Yoruba",
+    Language.zhCN: cstring"People's Republic of China - Chinese (Simplified) Legacy",
+    Language.zhHK: cstring"Hong Kong S.A.R. - Chinese (Traditional) Legacy",
+    Language.zhMO: cstring"Macao S.A.R. - Chinese (Traditional) Legacy",
+    Language.zhSG: cstring"Singapore - Chinese (Simplified) Legacy",
+    Language.zhTW: cstring"Taiwan - Chinese (Traditional) Legacy",
+    Language.zuZA: cstring"South Africa - isiZulu"]
+
+  languageToCode*: array[Language, cstring] = [
+    Language.afZA: cstring"af-ZA",
+    Language.amET: cstring"am-ET",
+    Language.arAE: cstring"ar-AE",
+    Language.arBH: cstring"ar-BH",
+    Language.arDZ: cstring"ar-DZ",
+    Language.arEG: cstring"ar-EG",
+    Language.arIQ: cstring"ar-IQ",
+    Language.arJO: cstring"ar-JO",
+    Language.arKW: cstring"ar-KW",
+    Language.arLB: cstring"ar-LB",
+    Language.arLY: cstring"ar-LY",
+    Language.arMA: cstring"ar-MA",
+    Language.arOM: cstring"ar-OM",
+    Language.arQA: cstring"ar-QA",
+    Language.arSA: cstring"ar-SA",
+    Language.arSY: cstring"ar-SY",
+    Language.arTN: cstring"ar-TN",
+    Language.arYE: cstring"ar-YE",
+    Language.arnCL: cstring"arn-CL",
+    Language.asIN: cstring"as-IN",
+    Language.azAZ: cstring"az-AZ",
+    Language.baRU: cstring"ba-RU",
+    Language.beBY: cstring"be-BY",
+    Language.bgBG: cstring"bg-BG",
+    Language.bnBD: cstring"bn-BD",
+    Language.bnIN: cstring"bn-IN",
+    Language.boCN: cstring"bo-CN",
+    Language.brFR: cstring"br-FR",
+    Language.bsBA: cstring"bs-BA",
+    Language.caES: cstring"ca-ES",
+    Language.coFR: cstring"co-FR",
+    Language.csCZ: cstring"cs-CZ",
+    Language.cyGB: cstring"cy-GB",
+    Language.daDK: cstring"da-DK",
+    Language.deAT: cstring"de-AT",
+    Language.deCH: cstring"de-CH",
+    Language.deDE: cstring"de-DE",
+    Language.deLI: cstring"de-LI",
+    Language.deLU: cstring"de-LU",
+    Language.dsbDE: cstring"dsb-DE",
+    Language.dvMV: cstring"dv-MV",
+    Language.elGR: cstring"el-GR",
+    Language.en029: cstring"en-029",
+    Language.enAU: cstring"en-AU",
+    Language.enBZ: cstring"en-BZ",
+    Language.enCA: cstring"en-CA",
+    Language.enGB: cstring"en-GB",
+    Language.enIE: cstring"en-IE",
+    Language.enIN: cstring"en-IN",
+    Language.enJM: cstring"en-JM",
+    Language.enMY: cstring"en-MY",
+    Language.enNZ: cstring"en-NZ",
+    Language.enPH: cstring"en-PH",
+    Language.enSG: cstring"en-SG",
+    Language.enTT: cstring"en-TT",
+    Language.enUS: cstring"en-US",
+    Language.enZA: cstring"en-ZA",
+    Language.enZW: cstring"en-ZW",
+    Language.esAR: cstring"es-AR",
+    Language.esBO: cstring"es-BO",
+    Language.esCL: cstring"es-CL",
+    Language.esCO: cstring"es-CO",
+    Language.esCR: cstring"es-CR",
+    Language.esDO: cstring"es-DO",
+    Language.esEC: cstring"es-EC",
+    Language.esES: cstring"es-ES",
+    Language.esGT: cstring"es-GT",
+    Language.esHN: cstring"es-HN",
+    Language.esMX: cstring"es-MX",
+    Language.esNI: cstring"es-NI",
+    Language.esPA: cstring"es-PA",
+    Language.esPE: cstring"es-PE",
+    Language.esPR: cstring"es-PR",
+    Language.esPY: cstring"es-PY",
+    Language.esSV: cstring"es-SV",
+    Language.esUS: cstring"es-US",
+    Language.esUY: cstring"es-UY",
+    Language.esVE: cstring"es-VE",
+    Language.etEE: cstring"et-EE",
+    Language.euES: cstring"eu-ES",
+    Language.faIR: cstring"fa-IR",
+    Language.fiFI: cstring"fi-FI",
+    Language.filPH: cstring"fil-PH",
+    Language.foFO: cstring"fo-FO",
+    Language.frBE: cstring"fr-BE",
+    Language.frCA: cstring"fr-CA",
+    Language.frCH: cstring"fr-CH",
+    Language.frFR: cstring"fr-FR",
+    Language.frLU: cstring"fr-LU",
+    Language.frMC: cstring"fr-MC",
+    Language.fyNL: cstring"fy-NL",
+    Language.gaIE: cstring"ga-IE",
+    Language.gdGB: cstring"gd-GB",
+    Language.glES: cstring"gl-ES",
+    Language.gswFR: cstring"gsw-FR",
+    Language.guIN: cstring"gu-IN",
+    Language.haNG: cstring"ha-NG",
+    Language.heIL: cstring"he-IL",
+    Language.hiIN: cstring"hi-IN",
+    Language.hrBA: cstring"hr-BA",
+    Language.hrHR: cstring"hr-HR",
+    Language.hsbDE: cstring"hsb-DE",
+    Language.huHU: cstring"hu-HU",
+    Language.hyAM: cstring"hy-AM",
+    Language.idID: cstring"id-ID",
+    Language.igNG: cstring"ig-NG",
+    Language.iiCN: cstring"ii-CN",
+    Language.isIS: cstring"is-IS",
+    Language.itCH: cstring"it-CH",
+    Language.itIT: cstring"it-IT",
+    Language.iuCA: cstring"iu-CA",
+    Language.jaJP: cstring"ja-JP",
+    Language.kaGE: cstring"ka-GE",
+    Language.kkKZ: cstring"kk-KZ",
+    Language.klGL: cstring"kl-GL",
+    Language.kmKH: cstring"km-KH",
+    Language.knIN: cstring"kn-IN",
+    Language.koKR: cstring"ko-KR",
+    Language.kokIN: cstring"kok-IN",
+    Language.kyKG: cstring"ky-KG",
+    Language.lbLU: cstring"lb-LU",
+    Language.loLA: cstring"lo-LA",
+    Language.ltLT: cstring"lt-LT",
+    Language.lvLV: cstring"lv-LV",
+    Language.miNZ: cstring"mi-NZ",
+    Language.mkMK: cstring"mk-MK",
+    Language.mlIN: cstring"ml-IN",
+    Language.mnCN: cstring"mn-CN",
+    Language.mnMN: cstring"mn-MN",
+    Language.mohCA: cstring"moh-CA",
+    Language.mrIN: cstring"mr-IN",
+    Language.msBN: cstring"ms-BN",
+    Language.msMY: cstring"ms-MY",
+    Language.mtMT: cstring"mt-MT",
+    Language.nbNO: cstring"nb-NO",
+    Language.neNP: cstring"ne-NP",
+    Language.nlBE: cstring"nl-BE",
+    Language.nlNL: cstring"nl-NL",
+    Language.nnNO: cstring"nn-NO",
+    Language.nsoZA: cstring"nso-ZA",
+    Language.ocFR: cstring"oc-FR",
+    Language.orIN: cstring"or-IN",
+    Language.paIN: cstring"pa-IN",
+    Language.plPL: cstring"pl-PL",
+    Language.prsAF: cstring"prs-AF",
+    Language.psAF: cstring"ps-AF",
+    Language.ptBR: cstring"pt-BR",
+    Language.ptPT: cstring"pt-PT",
+    Language.qutGT: cstring"qut-GT",
+    Language.quzBO: cstring"quz-BO",
+    Language.quzEC: cstring"quz-EC",
+    Language.quzPE: cstring"quz-PE",
+    Language.rmCH: cstring"rm-CH",
+    Language.roRO: cstring"ro-RO",
+    Language.ruRU: cstring"ru-RU",
+    Language.rwRW: cstring"rw-RW",
+    Language.saIN: cstring"sa-IN",
+    Language.sahRU: cstring"sah-RU",
+    Language.seFI: cstring"se-FI",
+    Language.seNO: cstring"se-NO",
+    Language.seSE: cstring"se-SE",
+    Language.siLK: cstring"si-LK",
+    Language.skSK: cstring"sk-SK",
+    Language.slSI: cstring"sl-SI",
+    Language.smaNO: cstring"sma-NO",
+    Language.smaSE: cstring"sma-SE",
+    Language.smjNO: cstring"smj-NO",
+    Language.smjSE: cstring"smj-SE",
+    Language.smnFI: cstring"smn-FI",
+    Language.smsFI: cstring"sms-FI",
+    Language.sqAL: cstring"sq-AL",
+    Language.srBA: cstring"sr-BA",
+    Language.srCS: cstring"sr-CS",
+    Language.srME: cstring"sr-ME",
+    Language.srRS: cstring"sr-RS",
+    Language.svFI: cstring"sv-FI",
+    Language.svSE: cstring"sv-SE",
+    Language.swKE: cstring"sw-KE",
+    Language.syrSY: cstring"syr-SY",
+    Language.taIN: cstring"ta-IN",
+    Language.teIN: cstring"te-IN",
+    Language.tgTJ: cstring"tg-TJ",
+    Language.thTH: cstring"th-TH",
+    Language.tkTM: cstring"tk-TM",
+    Language.tnZA: cstring"tn-ZA",
+    Language.trTR: cstring"tr-TR",
+    Language.ttRU: cstring"tt-RU",
+    Language.tzmDZ: cstring"tzm-DZ",
+    Language.ugCN: cstring"ug-CN",
+    Language.ukUA: cstring"uk-UA",
+    Language.urPK: cstring"ur-PK",
+    Language.uzUZ: cstring"uz-UZ",
+    Language.viVN: cstring"vi-VN",
+    Language.woSN: cstring"wo-SN",
+    Language.xhZA: cstring"xh-ZA",
+    Language.yoNG: cstring"yo-NG",
+    Language.zhCN: cstring"zh-CN",
+    Language.zhHK: cstring"zh-HK",
+    Language.zhMO: cstring"zh-MO",
+    Language.zhSG: cstring"zh-SG",
+    Language.zhTW: cstring"zh-TW",
+    Language.zuZA: cstring"zu-ZA"]

From bb846644b5a6b6f7148712fc67c5c33cbc062f44 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 8 Aug 2017 13:29:29 +0200
Subject: [PATCH 117/264] added support for a --define:karaxDebug switch

---
 src/karax.nim | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/karax.nim b/src/karax.nim
index 9d74a9e..5cee5cf 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -463,24 +463,38 @@ proc applyComponents(kxi: KaraxInstance) =
   while i < kxi.components.len:
     let x = kxi.components[i].oldNode
     let newNode = kxi.components[i].newNode
+    when defined(karaxDebug):
+      echo "Processing component ", newNode.text, " changed impl set ", x.changedImpl != nil
     if x.changedImpl != nil and x.changedImpl(x, newNode):
+      when defined(karaxDebug):
+        echo "Component ", newNode.text, " did change"
       let current = kxi.components[i].current
       let parent = kxi.components[i].parent
       x.updatedImpl(x, newNode)
       let oldExpanded = x.expanded
       x.expanded = x.renderImpl(x)
+      when defined(karaxDebug):
+        echo "Component ", newNode.text, " re-rendered"
       x.renderedVersion = x.version
       if oldExpanded == nil:
         detach(x)
         kxi.addPatch(pkReplace, parent, current, x.expanded)
+        when defined(karaxDebug):
+          echo "Component ", newNode.text, ": old expansion didn't exist"
       else:
         let res = diff(x.expanded, oldExpanded, parent, current, kxi)
         if res == usenewNode:
+          when defined(karaxDebug):
+            echo "Component ", newNode.text, ": re-render triggered a DOM change (case A)"
           discard "diff created a patchset for us, so this is fine"
         elif res != different:
+          when defined(karaxDebug):
+            echo "Component ", newNode.text, ": re-render triggered no DOM change whatsoever"
           x.expanded = oldExpanded
           assert oldExpanded.dom != nil, "old expanded.dom is nil"
         else:
+          when defined(karaxDebug):
+            echo "Component ", newNode.text, ": re-render triggered a DOM change (case B)"
           assert x.expanded.dom != nil, "expanded.dom is nil"
     inc i
   setLen(kxi.components, 0)

From 7c08c6bb76498f05b512ef09b4129a75496ec620 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 16 Aug 2017 19:42:16 +0200
Subject: [PATCH 118/264] first version; wip

---
 experiments/nextgen.nim    | 181 +++++++++++++++++++++++++++++++++++++
 experiments/scrollapp.nims |   1 -
 src/karax.nim              |  32 ++++++-
 src/vdom.nim               |   3 +-
 4 files changed, 212 insertions(+), 5 deletions(-)
 create mode 100644 experiments/nextgen.nim
 delete mode 100644 experiments/scrollapp.nims

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
new file mode 100644
index 0000000..eb94658
--- /dev/null
+++ b/experiments/nextgen.nim
@@ -0,0 +1,181 @@
+
+import kdom, jdict, jstrutils
+
+type
+  Message = enum
+    Unchanged
+    Changed
+    Mark
+    Inserted
+    Deleted
+
+  State = object
+    stale: int
+    outdated: bool
+    phantom: bool
+
+type
+  ReactiveBase* = ref object of RootObj ## everything that is a "reactive"
+                                        ## value derives from that
+    sinks*: seq[proc(msg: Message, pos: int)]
+  Reactive*[T] = ref object of ReactiveBase
+    value*: T
+
+  RString* = Reactive[cstring]
+#  RTime* = Reactive[Time]
+  RInt* = Reactive[int]
+
+  RBool* = Reactive[bool]
+
+  RSeq*[T] = ref object of ReactiveBase
+    s: seq[T]
+    L: RInt
+
+proc addSink[T](x: Reactive[T]; sink: proc(msg: Message; pos: int)) =
+  x.sinks.add sink
+
+proc broadcast(x: ReactiveBase, msg: Message; pos = 0) =
+  for s in x.sinks: s(msg, pos)
+
+var toTrack: proc (msg: Message; pos: int) = nil
+
+proc now[T](x: Reactive[T]): T =
+  if toTrack != nil:
+    x.addSink toTrack
+  result = x.value
+
+proc `:=`[T](x: Reactive[T], f: proc(): T) =
+  var state: State
+
+  toTrack = proc(msg: Message; pos: int) =
+    if not state.phantom:
+      case msg.kind:
+      of Changed, Unchanged:
+        state.outdated = state.outdated or (msg.kind == Changed)
+        dec state.stale
+        if state.stale == 0:
+          if state.outdated:
+            var t = f()
+            let thisChanged = if x.value != t: Changed else: Unchanged
+            x.value = t
+            x.broadcast(thisChanged, pos)
+            state.outdated = false
+          else:
+            x.broadcast(Unchanged, pos)
+      of Mark:
+        if state.stale == 0:
+          x.broadcast(msg, pos)
+        inc state.stale
+      of Inserted, Deleted:
+        dec state.stale
+        if state.stale == 0:
+          x.broadcast(msg, pos)
+          #state.phantom = true
+
+  x.value = f()
+  toTrack = nil
+
+proc `<-`[T](x: Reactive[T], val: T) =
+  if x.value != val:
+    x.value = val
+    x.broadcast(Mark)
+    x.broadcast(Changed)
+
+proc changed*(x: ReactiveBase) =
+  x.broadcast(Mark)
+  x.broadcast(Changed)
+
+proc subscribe[T](x: Reactive[T], f: proc(x: T)) =
+  let reactor = proc (msg: Message, pos: int) =
+    case msg:
+    of Mark: discard
+    of Changed, Unchanged: f(x.value)
+    of Inserted, Deleted: discard
+  x.addSink reactor
+
+template lift1(op: untyped) =
+  proc op[T](a: Reactive[T]): (proc(): T) =
+    result = proc(): T = op(a.now)
+
+template lift2(op: untyped) =
+  proc op[T](a, b: Reactive[T]): (proc(): T) =
+    result = proc(): T = op(a.now, b.now)
+
+lift1 `not`
+lift2 `&`
+
+proc newReactive[T](x: T): Reactive[T] =
+  result = Reactive[T](value: x)
+
+proc rstr(x: cstring): RString =
+  result = RString(value: x)
+
+proc newRSeq*[T](len: int): RSeq[T] =
+  result = RSeq[T](s: newSeq[T](len), L: newReactive[int](0))
+
+proc newRSeq*[T](data: seq[T]): RSeq[T] =
+  result = RSeq[T](s: newSeq[T](data.len), L: newReactive[int](0))
+  for i in 0..high(data):
+    result.s[i] = data[i]
+
+proc `[]=`[T](x: RSeq[T]; index: int; v: T) =
+  x.s[index] = v
+
+proc `[]`[T](x: RSeq[T]; index: int): T = x.s[index]
+
+proc insert*[T](x: RSeq[T]; y: T; position = 0) =
+  x.s.insert(y, position)
+  x.broadcast(Mark)
+  x.broadcast(Inserted, position)
+
+proc delete*[T](x: RSeq[T]; position = 0) =
+  x.s.delete(position)
+  x.broadcast(Mark)
+  x.broadcast(Deleted, position)
+
+proc map[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
+  let xl = x.L.value
+  let res = newRSeq[U](xl)
+  for i in 0..<xl:
+    res.s[i] := proc(): U = f(x[i].now)
+
+  let reactor = proc (msg: Message, pos: int) =
+    case msg:
+    of Mark, Changed, Unchanged: discard "nothing to do"
+    of Inserted:
+      res.insert(f(x[pos]), pos)
+    of Deleted:
+      res.delete(pos)
+  x.addSink reactor
+  result = res
+
+type
+  User = ref object
+    firstname, lastname: cstring
+
+var gu = newReactive(User(firstname: "Some", lastname: "Body"))
+
+proc renderUser(u: Reactive[User]): Node =
+  result = document.createElement("button")
+  result.appendChild document.createTextNode(u.now.firstname & " " & u.now.lastname)
+  result.addEventListener "click", proc (ev: Event) =
+    gu <- User(firstname: "Another", lastname: "Guy")
+
+proc replaceById(id: cstring; newTree: Node) =
+  let x = document.getElementById(id)
+  x.parentNode.replaceChild(newTree, x)
+  newTree.id = id
+
+template track(r: ReactiveBase; a, b: Node) =
+  r.addSink proc(m: Message; pos: int) =
+    if m == Changed:
+      a.parentNode.replaceChild(b, a)
+
+proc main(): Node =
+  result = renderUser(gu)
+  track gu, result, renderUser(gu)
+
+proc init(ev: Event) =
+  replaceById("ROOT", main())
+
+window.onload = init
diff --git a/experiments/scrollapp.nims b/experiments/scrollapp.nims
deleted file mode 100644
index 532b206..0000000
--- a/experiments/scrollapp.nims
+++ /dev/null
@@ -1 +0,0 @@
---path: "../src"
diff --git a/src/karax.nim b/src/karax.nim
index 5cee5cf..b0b7761 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -37,6 +37,7 @@ type
     patchLenV: int
     runCount: int
     components: seq[ComponentPair]
+    surpressRedraws*: bool
     when defined(stats):
       recursion: int
 
@@ -117,7 +118,7 @@ proc applyEvents(n: VNode; kxi: KaraxInstance) =
   for i in 0..<len(n.events):
     n.events[i][2] = wrapEvent(dest, n, n.events[i][0], n.events[i][1])
 
-proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
+proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
     attach n
@@ -134,6 +135,7 @@ proc vnodeToDom(n: VNode; kxi: KaraxInstance): Node =
     return result
   elif n.kind == VNodeKind.component:
     let x = VComponent(n)
+    if x.realDomImpl != nil: return x.realDomImpl(x)
     if x.onAttachImpl != nil: x.onAttachImpl(x)
     assert x.renderImpl != nil
     if x.expanded == nil:
@@ -465,7 +467,11 @@ proc applyComponents(kxi: KaraxInstance) =
     let newNode = kxi.components[i].newNode
     when defined(karaxDebug):
       echo "Processing component ", newNode.text, " changed impl set ", x.changedImpl != nil
-    if x.changedImpl != nil and x.changedImpl(x, newNode):
+    if x.realDomImpl != nil:
+      let current = kxi.components[i].current
+      let parent = kxi.components[i].parent
+      kxi.addPatch(pkReplace, parent, current, x)
+    elif x.changedImpl != nil and x.changedImpl(x, newNode):
       when defined(karaxDebug):
         echo "Component ", newNode.text, " did change"
       let current = kxi.components[i].current
@@ -507,6 +513,14 @@ when defined(stats):
     result = m + 1
     inc total
 
+proc runDiff*(kxi: KaraxInstance; oldNode, newNode: VNode) =
+  let olddom = oldNode.dom
+  discard diff(newNode, oldNode, nil, olddom, kxi)
+  applyComponents(kxi)
+  applyPatch(kxi)
+  if kxi.currentTree == oldNode:
+    kxi.currentTree = newNode
+
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
   let newtree = kxi.renderer()
@@ -576,6 +590,18 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
   kxi = result
   window.onload = init
 
+proc setInitializer*(renderer: proc (): VNode, root: cstring = "ROOT",
+                    clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =
+  ## Setup Karax. Usually the return value can be ignored.
+  result = KaraxInstance(rootId: root, renderer: renderer,
+                        postRenderCallback: clientPostRenderCallback,
+                        patches: newSeq[Patch](60),
+                        patchesV: newSeq[PatchV](30),
+                        components: @[],
+                        surpressRedraws: true)
+  kxi = result
+  window.onload = init
+
 proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler;
                       kxi: KaraxInstance = kxi) =
   ## Implements the foundation of Karax's event management.
@@ -585,7 +611,7 @@ proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler;
   ## a ``redraw``.
   proc wrapper(ev: Event; n: VNode) =
     action(ev, n)
-    redraw(kxi)
+    if not kxi.surpressRedraws: redraw(kxi)
   addEventListener(n, k, wrapper)
 
 proc setOnHashChange*(action: proc (hashPart: cstring)) =
diff --git a/src/vdom.nim b/src/vdom.nim
index f31d6d6..d055b50 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -133,6 +133,7 @@ type
     updatedImpl*: proc(self, newInstance: VComponent)
     onAttachImpl*: proc(self: VComponent)
     onDetachImpl*: proc(self: VComponent)
+    realDomImpl*: proc(self: VComponent): kdom.Node
     version*: int         ## Update this to trigger a redraw by karax. Usually you
                           ## should call 'markDirty' instead which is an alias for
                           ## 'inc version'.
@@ -185,7 +186,7 @@ proc getDebugId(): int =
   gid
 
 template newComponent*[T](t: typeDesc[T];
-                 render: (proc(self: VComponent): VNode) not nil,
+                 render: (proc(self: VComponent): VNode) = nil,
                  onAttach: proc(self: VComponent) = nil,
                  onDetach: proc(self: VComponent) = nil,
                  changed: (proc(self, newInstance: VComponent): bool) = defaultChangedImpl,

From bfb998575438e29bb7b5c37bb78c123b203546fc Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 17 Aug 2017 08:36:17 +0200
Subject: [PATCH 119/264] nextgen uses the karax DSL and DOM diffing

---
 experiments/nextgen.nim | 28 ++++++++++------------------
 src/karax.nim           |  1 +
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index eb94658..8df39a2 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -1,5 +1,5 @@
 
-import kdom, jdict, jstrutils
+import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
 
 type
   Message = enum
@@ -155,27 +155,19 @@ type
 
 var gu = newReactive(User(firstname: "Some", lastname: "Body"))
 
-proc renderUser(u: Reactive[User]): Node =
-  result = document.createElement("button")
-  result.appendChild document.createTextNode(u.now.firstname & " " & u.now.lastname)
-  result.addEventListener "click", proc (ev: Event) =
-    gu <- User(firstname: "Another", lastname: "Guy")
+proc renderUser(u: Reactive[User]): VNode =
+  result = buildHtml(button):
+    text u.now.firstname & " " & u.now.lastname
+    proc onclick(ev: Event; n: VNode) =
+      gu <- User(firstname: "Another", lastname: "Guy")
 
-proc replaceById(id: cstring; newTree: Node) =
-  let x = document.getElementById(id)
-  x.parentNode.replaceChild(newTree, x)
-  newTree.id = id
-
-template track(r: ReactiveBase; a, b: Node) =
+template track(r: ReactiveBase; a, b: VNode) =
   r.addSink proc(m: Message; pos: int) =
     if m == Changed:
-      a.parentNode.replaceChild(b, a)
+      runDiff(kxi, a, b)
 
-proc main(): Node =
+proc main(): VNode =
   result = renderUser(gu)
   track gu, result, renderUser(gu)
 
-proc init(ev: Event) =
-  replaceById("ROOT", main())
-
-window.onload = init
+setInitializer(main)
diff --git a/src/karax.nim b/src/karax.nim
index b0b7761..3f53405 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -187,6 +187,7 @@ proc same(n: VNode, e: Node; nesting = 0): bool =
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
   x.parentNode.replaceChild(newTree, x)
+  newTree.id = id
 
 type
   EqResult = enum

From 46b12594984d571a0a19e2e8c9f98fc75f238c62 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 17 Aug 2017 11:28:11 +0200
Subject: [PATCH 120/264] added .track macro

---
 experiments/nextgen.nim | 170 +++----------------------------------
 src/reactive.nim        | 182 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 193 insertions(+), 159 deletions(-)
 create mode 100644 src/reactive.nim

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index 8df39a2..fb95a6b 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -1,173 +1,25 @@
 
-import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
-
-type
-  Message = enum
-    Unchanged
-    Changed
-    Mark
-    Inserted
-    Deleted
-
-  State = object
-    stale: int
-    outdated: bool
-    phantom: bool
-
-type
-  ReactiveBase* = ref object of RootObj ## everything that is a "reactive"
-                                        ## value derives from that
-    sinks*: seq[proc(msg: Message, pos: int)]
-  Reactive*[T] = ref object of ReactiveBase
-    value*: T
-
-  RString* = Reactive[cstring]
-#  RTime* = Reactive[Time]
-  RInt* = Reactive[int]
-
-  RBool* = Reactive[bool]
-
-  RSeq*[T] = ref object of ReactiveBase
-    s: seq[T]
-    L: RInt
-
-proc addSink[T](x: Reactive[T]; sink: proc(msg: Message; pos: int)) =
-  x.sinks.add sink
-
-proc broadcast(x: ReactiveBase, msg: Message; pos = 0) =
-  for s in x.sinks: s(msg, pos)
-
-var toTrack: proc (msg: Message; pos: int) = nil
-
-proc now[T](x: Reactive[T]): T =
-  if toTrack != nil:
-    x.addSink toTrack
-  result = x.value
-
-proc `:=`[T](x: Reactive[T], f: proc(): T) =
-  var state: State
-
-  toTrack = proc(msg: Message; pos: int) =
-    if not state.phantom:
-      case msg.kind:
-      of Changed, Unchanged:
-        state.outdated = state.outdated or (msg.kind == Changed)
-        dec state.stale
-        if state.stale == 0:
-          if state.outdated:
-            var t = f()
-            let thisChanged = if x.value != t: Changed else: Unchanged
-            x.value = t
-            x.broadcast(thisChanged, pos)
-            state.outdated = false
-          else:
-            x.broadcast(Unchanged, pos)
-      of Mark:
-        if state.stale == 0:
-          x.broadcast(msg, pos)
-        inc state.stale
-      of Inserted, Deleted:
-        dec state.stale
-        if state.stale == 0:
-          x.broadcast(msg, pos)
-          #state.phantom = true
-
-  x.value = f()
-  toTrack = nil
-
-proc `<-`[T](x: Reactive[T], val: T) =
-  if x.value != val:
-    x.value = val
-    x.broadcast(Mark)
-    x.broadcast(Changed)
-
-proc changed*(x: ReactiveBase) =
-  x.broadcast(Mark)
-  x.broadcast(Changed)
-
-proc subscribe[T](x: Reactive[T], f: proc(x: T)) =
-  let reactor = proc (msg: Message, pos: int) =
-    case msg:
-    of Mark: discard
-    of Changed, Unchanged: f(x.value)
-    of Inserted, Deleted: discard
-  x.addSink reactor
-
-template lift1(op: untyped) =
-  proc op[T](a: Reactive[T]): (proc(): T) =
-    result = proc(): T = op(a.now)
-
-template lift2(op: untyped) =
-  proc op[T](a, b: Reactive[T]): (proc(): T) =
-    result = proc(): T = op(a.now, b.now)
-
-lift1 `not`
-lift2 `&`
-
-proc newReactive[T](x: T): Reactive[T] =
-  result = Reactive[T](value: x)
-
-proc rstr(x: cstring): RString =
-  result = RString(value: x)
-
-proc newRSeq*[T](len: int): RSeq[T] =
-  result = RSeq[T](s: newSeq[T](len), L: newReactive[int](0))
-
-proc newRSeq*[T](data: seq[T]): RSeq[T] =
-  result = RSeq[T](s: newSeq[T](data.len), L: newReactive[int](0))
-  for i in 0..high(data):
-    result.s[i] = data[i]
-
-proc `[]=`[T](x: RSeq[T]; index: int; v: T) =
-  x.s[index] = v
-
-proc `[]`[T](x: RSeq[T]; index: int): T = x.s[index]
-
-proc insert*[T](x: RSeq[T]; y: T; position = 0) =
-  x.s.insert(y, position)
-  x.broadcast(Mark)
-  x.broadcast(Inserted, position)
-
-proc delete*[T](x: RSeq[T]; position = 0) =
-  x.s.delete(position)
-  x.broadcast(Mark)
-  x.broadcast(Deleted, position)
-
-proc map[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
-  let xl = x.L.value
-  let res = newRSeq[U](xl)
-  for i in 0..<xl:
-    res.s[i] := proc(): U = f(x[i].now)
-
-  let reactor = proc (msg: Message, pos: int) =
-    case msg:
-    of Mark, Changed, Unchanged: discard "nothing to do"
-    of Inserted:
-      res.insert(f(x[pos]), pos)
-    of Deleted:
-      res.delete(pos)
-  x.addSink reactor
-  result = res
+import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, reactive
 
 type
   User = ref object
     firstname, lastname: cstring
 
-var gu = newReactive(User(firstname: "Some", lastname: "Body"))
+var gu = @[newReactive(User(firstname: "Some", lastname: "Body")),
+           newReactive(User(firstname: "Some", lastname: "One")),
+           newReactive(User(firstname: "Some", lastname: "Two"))]
+var clicks = 0
 
-proc renderUser(u: Reactive[User]): VNode =
+proc renderUser(u: Reactive[User]): VNode {.track.} =
   result = buildHtml(button):
     text u.now.firstname & " " & u.now.lastname
     proc onclick(ev: Event; n: VNode) =
-      gu <- User(firstname: "Another", lastname: "Guy")
-
-template track(r: ReactiveBase; a, b: VNode) =
-  r.addSink proc(m: Message; pos: int) =
-    if m == Changed:
-      runDiff(kxi, a, b)
+      inc clicks
+      u <- User(firstname: "Another", lastname: &clicks)
 
 proc main(): VNode =
-  result = renderUser(gu)
-  track gu, result, renderUser(gu)
+  result = buildHtml(tdiv):
+    for i in 0..high(gu):
+      renderUser(gu[i])
 
 setInitializer(main)
diff --git a/src/reactive.nim b/src/reactive.nim
new file mode 100644
index 0000000..a1782f0
--- /dev/null
+++ b/src/reactive.nim
@@ -0,0 +1,182 @@
+
+import jdict
+
+type
+  Message = enum
+    Unchanged
+    Changed
+    Mark
+    Inserted
+    Deleted
+
+  State = object
+    stale: int
+    outdated: bool
+    phantom: bool
+
+type
+  ReactiveBase* = ref object of RootObj ## everything that is a "reactive"
+                                        ## value derives from that
+    sinks*: seq[proc(msg: Message, pos: int)]
+    dups: JDict[cstring, bool] # prevent duplicate registrations
+  Reactive*[T] = ref object of ReactiveBase
+    value*: T
+
+  RString* = Reactive[cstring]
+#  RTime* = Reactive[Time]
+  RInt* = Reactive[int]
+
+  RBool* = Reactive[bool]
+
+  RSeq*[T] = ref object of ReactiveBase
+    s: seq[T]
+    L: RInt
+
+proc addSink[T](x: Reactive[T]; sink: proc(msg: Message; pos: int)) =
+  x.sinks.add sink
+
+proc addSink(x: ReactiveBase; key: cstring; sink: proc(msg: Message; pos: int)) =
+  if x.dups == nil: x.dups = newJDict[cstring, bool]()
+  if not x.dups.contains(key):
+    x.dups[key] = true
+    x.sinks.add sink
+
+proc broadcast(x: ReactiveBase, msg: Message; pos = 0) =
+  for s in x.sinks: s(msg, pos)
+
+var toTrack: proc (msg: Message; pos: int) = nil
+
+proc now*[T](x: Reactive[T]): T =
+  if toTrack != nil:
+    x.addSink toTrack
+  result = x.value
+
+template wrapObserver(f: untyped) =
+  var state: State
+  proc helper(msg: Message; pos: int) =
+    case msg.kind:
+    of Changed, Unchanged:
+      state.outdated = state.outdated or (msg.kind == Changed)
+      dec state.stale
+      if state.stale == 0:
+        if state.outdated:
+          var t = f()
+          let thisChanged = if x.value != t: Changed else: Unchanged
+          x.value = t
+          x.broadcast(thisChanged, pos)
+          state.outdated = false
+        else:
+          x.broadcast(Unchanged, pos)
+    of Mark:
+      if state.stale == 0: x.broadcast(msg, pos)
+      inc state.stale
+    of Inserted, Deleted:
+      dec state.stale
+      if state.stale == 0:
+        x.broadcast(msg, pos)
+        #state.phantom = true
+  helper
+
+proc `:=`[T](x: Reactive[T], f: proc(): T) =
+  toTrack = wrapObserver(f())
+  x.value = f()
+  toTrack = nil
+
+proc `<-`*[T](x: Reactive[T], val: T) =
+  #if x.value != val:
+  x.value = val
+  x.broadcast(Mark)
+  x.broadcast(Changed)
+
+proc changed*(x: ReactiveBase) =
+  x.broadcast(Mark)
+  x.broadcast(Changed)
+
+proc subscribe[T](x: Reactive[T], f: proc(x: T)) =
+  let reactor = proc (msg: Message, pos: int) =
+    case msg:
+    of Mark: discard
+    of Changed, Unchanged: f(x.value)
+    of Inserted, Deleted: discard
+  x.addSink reactor
+
+template lift1(op: untyped) =
+  proc op[T](a: Reactive[T]): (proc(): T) =
+    result = proc(): T = op(a.now)
+
+template lift2(op: untyped) =
+  proc op[T](a, b: Reactive[T]): (proc(): T) =
+    result = proc(): T = op(a.now, b.now)
+
+lift1 `not`
+lift2 `&`
+
+proc newReactive*[T](x: T): Reactive[T] =
+  result = Reactive[T](value: x)
+
+proc rstr*(x: cstring): RString =
+  result = RString(value: x)
+
+proc newRSeq*[T](len: int): RSeq[T] =
+  result = RSeq[T](s: newSeq[T](len), L: newReactive[int](0))
+
+proc newRSeq*[T](data: seq[T]): RSeq[T] =
+  result = RSeq[T](s: newSeq[T](data.len), L: newReactive[int](0))
+  for i in 0..high(data):
+    result.s[i] = data[i]
+
+proc `[]=`[T](x: RSeq[T]; index: int; v: T) =
+  x.s[index] = v
+
+proc `[]`[T](x: RSeq[T]; index: int): T = x.s[index]
+
+proc insert*[T](x: RSeq[T]; y: T; position = 0) =
+  x.s.insert(y, position)
+  x.broadcast(Mark)
+  x.broadcast(Inserted, position)
+
+proc delete*[T](x: RSeq[T]; position = 0) =
+  x.s.delete(position)
+  x.broadcast(Mark)
+  x.broadcast(Deleted, position)
+
+proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
+  let xl = x.L.value
+  let res = newRSeq[U](xl)
+  for i in 0..<xl:
+    res.s[i] := proc(): U = f(x[i].now)
+
+  let reactor = proc (msg: Message, pos: int) =
+    case msg:
+    of Mark, Changed, Unchanged: discard "nothing to do"
+    of Inserted:
+      res.insert(f(x[pos]), pos)
+    of Deleted:
+      res.delete(pos)
+  x.addSink reactor
+  result = res
+
+import macros
+
+template trackImpl(r: ReactiveBase; key: cstring; a, b: untyped) =
+  when r is Reactive:
+    addSink r, key, proc(m: Message; pos: int) =
+      if m == Changed:
+        runDiff(kxi, a, b)
+
+macro track*(procDef: untyped): untyped =
+  let params = params(procDef)
+  let key = lineInfo(procDef)
+  var call = newCall(procDef.name)
+  var trackings = newStmtList()
+  for b in procDef.body: trackings.add b
+  for j in 1..<params.len:
+    let x = params[j]
+    expectKind x, nnkIdentDefs
+    for i in 0..x.len-3:
+      let param = x[i]
+      call.add param
+      trackings.add getAst(trackImpl(param, key, ident"result", call))
+
+  result = copyNimTree(procDef)
+  result.body = trackings

From 56a50679dee82bacbebf8e9dcb7a9632f90ef7b5 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 19 Aug 2017 14:54:10 +0200
Subject: [PATCH 121/264] reactive sequence works now

---
 experiments/nextgen.nim | 67 ++++++++++++++++++++++++++++---------
 src/karax.nim           | 18 ++++++++++
 src/reactive.nim        | 73 +++++++++++++++++++++++++++++++++++------
 src/vdom.nim            |  4 +++
 4 files changed, 137 insertions(+), 25 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index fb95a6b..4f955aa 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -2,24 +2,61 @@
 import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, reactive
 
 type
-  User = ref object
+  User = ref object of ReactiveBase
     firstname, lastname: cstring
 
-var gu = @[newReactive(User(firstname: "Some", lastname: "Body")),
-           newReactive(User(firstname: "Some", lastname: "One")),
-           newReactive(User(firstname: "Some", lastname: "Two"))]
+var gu = newRSeq(@[ (User(firstname: "Some", lastname: "Body")),
+                    (User(firstname: "Some", lastname: "One")),
+                    (User(firstname: "Some", lastname: "Two"))])
 var clicks = 0
 
-proc renderUser(u: Reactive[User]): VNode {.track.} =
-  result = buildHtml(button):
-    text u.now.firstname & " " & u.now.lastname
-    proc onclick(ev: Event; n: VNode) =
-      inc clicks
-      u <- User(firstname: "Another", lastname: &clicks)
+discard """
+  # Text gets a *reactive* string in the first place!
+  # Text can register and knows how to update itself!
+  proc toReact(): RString =
+    observe(u):
+      u.firstname & u.lastname
 
-proc main(): VNode =
-  result = buildHtml(tdiv):
-    for i in 0..high(gu):
-      renderUser(gu[i])
+  let t = text(u.firstname & " " & u.lastname)
+  observe(u, t.update(u.firstname & " " & u.lastname))
+  t
+"""
 
-setInitializer(main)
+proc renderUser(u: User): VNode = #{.track.} =
+  proc inner(u: User): VNode =
+    result = buildHtml(tdiv):
+      text u.firstname & " " & u.lastname
+      button:
+        text "(X)"
+        proc onclick(ev: Event; n: VNode) =
+          #u.firstname = "kfdj"
+          #u.lastname = &clicks
+          #notifyObservers(u)
+          gu.deleteElem(u)
+
+  result = inner(u)
+  doTrack(u, result, inner(u))
+
+template vmap(x: RSeq; elem, f: untyped): VNode =
+  let tmp = buildHtml(elem):
+    for i in 0..<len(x):
+      f(x[i])
+  doTrackResize(x, tmp, f(x[pos]))
+  tmp
+
+proc main(gu: RSeq[User]): VNode = #{.track.} =
+  proc inner(gu: RSeq[User]): VNode =
+    result = buildHtml(tdiv):
+      vmap(gu, tdiv, renderUser)
+      tdiv:
+        button:
+          text "Add User"
+          proc onclick(ev: Event; n: VNode) =
+            inc clicks
+            gu.add User(firstname: "Added", lastname: &clicks)
+  result = inner(gu)
+  doTrack(gu, result, inner(gu))
+
+proc init(): VNode = main(gu)
+
+setInitializer(init)
diff --git a/src/karax.nim b/src/karax.nim
index 3f53405..3df1edb 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -514,6 +514,24 @@ when defined(stats):
     result = m + 1
     inc total
 
+proc runDel*(kxi: KaraxInstance; parent: VNode; position: int) =
+  detach(parent[position])
+  let current = parent.dom
+  kxi.addPatch(pkRemove, current, current.childNodes[position], nil)
+  parent.delete(position)
+  applyPatch(kxi)
+
+proc runIns*(kxi: KaraxInstance; parent, kid: VNode; position: int) =
+  let current = parent.dom
+  if position >= parent.len:
+    kxi.addPatch(pkAppend, current, nil, kid)
+    parent.add(kid)
+  else:
+    let before = current.childNodes[position]
+    kxi.addPatch(pkInsertBefore, current, before, kid)
+    parent.insert(kid, position)
+  applyPatch(kxi)
+
 proc runDiff*(kxi: KaraxInstance; oldNode, newNode: VNode) =
   let olddom = oldNode.dom
   discard diff(newNode, oldNode, nil, olddom, kxi)
diff --git a/src/reactive.nim b/src/reactive.nim
index a1782f0..4fcc851 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -32,7 +32,7 @@ type
     s: seq[T]
     L: RInt
 
-proc addSink[T](x: Reactive[T]; sink: proc(msg: Message; pos: int)) =
+proc addSink(x: ReactiveBase; sink: proc(msg: Message; pos: int)) =
   x.sinks.add sink
 
 proc addSink(x: ReactiveBase; key: cstring; sink: proc(msg: Message; pos: int)) =
@@ -88,7 +88,7 @@ proc `<-`*[T](x: Reactive[T], val: T) =
   x.broadcast(Mark)
   x.broadcast(Changed)
 
-proc changed*(x: ReactiveBase) =
+proc notifyObservers*(x: ReactiveBase) =
   x.broadcast(Mark)
   x.broadcast(Changed)
 
@@ -125,10 +125,17 @@ proc newRSeq*[T](data: seq[T]): RSeq[T] =
   for i in 0..high(data):
     result.s[i] = data[i]
 
-proc `[]=`[T](x: RSeq[T]; index: int; v: T) =
+proc `[]=`*[T](x: RSeq[T]; index: int; v: T) =
   x.s[index] = v
 
-proc `[]`[T](x: RSeq[T]; index: int): T = x.s[index]
+proc `[]`*[T](x: RSeq[T]; index: int): T = x.s[index]
+proc len*[T](x: RSeq[T]): int = x.s.len
+
+proc add*[T](x: RSeq[T]; y: T) =
+  let position = x.s.len
+  x.s.add(y)
+  x.broadcast(Mark)
+  x.broadcast(Inserted, position)
 
 proc insert*[T](x: RSeq[T]; y: T; position = 0) =
   x.s.insert(y, position)
@@ -140,6 +147,16 @@ proc delete*[T](x: RSeq[T]; position = 0) =
   x.broadcast(Mark)
   x.broadcast(Deleted, position)
 
+proc deleteElem*[T](x: RSeq[T]; y: T) =
+  var position = -1
+  for i in 0..<x.len:
+    if x[i] == y:
+      position = i; break
+  if position >= 0:
+    x.s.delete(position)
+    x.broadcast(Mark)
+    x.broadcast(Deleted, position)
+
 proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
   let xl = x.L.value
   let res = newRSeq[U](xl)
@@ -159,24 +176,60 @@ proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
 import macros
 
 template trackImpl(r: ReactiveBase; key: cstring; a, b: untyped) =
-  when r is Reactive:
+  when r is ReactiveBase:
     addSink r, key, proc(m: Message; pos: int) =
       if m == Changed:
         runDiff(kxi, a, b)
 
+template doTrack*(r: ReactiveBase; a, b: untyped) {.dirty.} =
+  bind addSink, Message, RSeq, Changed, Deleted, Inserted
+  addSink r, proc(m: Message; pos: int) =
+    #when r is RSeq:
+    #echo "Message: ", m, " ", pos
+    if m == Changed: karax.runDiff(kxi, a, b)
+
+template doTrackResize*(r: ReactiveBase; a, b: untyped) {.dirty.} =
+  bind addSink, Message, RSeq, Changed, Deleted, Inserted
+  addSink r, proc(m: Message; pos: int) =
+    #when r is RSeq:
+    #echo "Message: ", m, " ", pos
+    case m
+    of Deleted: karax.runDel(kxi, a, pos)
+    of Inserted:
+      karax.runIns(kxi, a, b, pos)
+    else: discard
+
+template notifyImpl(r: untyped) =
+  when r is ReactiveBase:
+    notifyObservers(r)
+
+proc root(n: NimNode): NimNode =
+  result = n
+  while result.kind in {nnkDotExpr, nnkBracketExpr}: result = result[0]
+
+proc analyse(n: NimNode; paramList: seq[NimNode]): NimNode =
+  result = n
+  #if n.kind in {nnkAsgn, nnkFastAsgn}:
+  #
+  #   n[0]
+  #else:
+  #  recurse()
+
 macro track*(procDef: untyped): untyped =
   let params = params(procDef)
   let key = lineInfo(procDef)
   var call = newCall(procDef.name)
   var trackings = newStmtList()
-  for b in procDef.body: trackings.add b
+  var paramList: seq[NimNode] = @[]
   for j in 1..<params.len:
     let x = params[j]
     expectKind x, nnkIdentDefs
-    for i in 0..x.len-3:
-      let param = x[i]
-      call.add param
-      trackings.add getAst(trackImpl(param, key, ident"result", call))
+    for i in 0..x.len-3: paramList.add(x[i])
+
+  for b in procDef.body: trackings.add analyse(b, paramList)
+  for param in paramList:
+    call.add param
+    trackings.add getAst(trackImpl(param, key, ident"result", call))
 
   result = copyNimTree(procDef)
   result.body = trackings
diff --git a/src/vdom.nim b/src/vdom.nim
index d055b50..bf84cb8 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -224,6 +224,10 @@ proc len*(x: VNode): int = x.kids.len
 proc `[]`*(x: VNode; idx: int): VNode = x.kids[idx]
 proc `[]=`*(x: VNode; idx: int; y: VNode) = x.kids[idx] = y
 proc add*(parent, kid: VNode) = parent.kids.add kid
+proc delete*(parent: VNode; position: int) =
+  parent.kids.delete(position)
+proc insert*(parent, kid: VNode; position: int) =
+   parent.kids.insert(kid, position)
 proc newVNode*(kind: VNodeKind): VNode = VNode(kind: kind, index: -1)
 
 proc tree*(kind: VNodeKind; kids: varargs[VNode]): VNode =

From 9fce711bd6c0584e613e2a696fa50d707c32cde4 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 22 Aug 2017 18:04:49 +0200
Subject: [PATCH 122/264] wip; nothing works

---
 experiments/nextgen.nim | 109 +++++++++++++++++++++++++++++++---------
 src/reactive.nim        |  17 +++++--
 src/vdom.nim            |  11 +++-
 3 files changed, 107 insertions(+), 30 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index 4f955aa..d311eb9 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -1,6 +1,25 @@
 
 import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, reactive
 
+proc newTextInput*(text: RString; focus: RBool): VNode =
+  proc onFlip(ev: Event; target: VNode) =
+    focus <- not focus.value
+
+  proc onKeyupEnter(ev: Event; target: VNode) =
+    text <- target.value
+    #text.notifyObservers()
+
+  proc onkeyup(ev: Event; n: VNode) =
+    # keep displayValue up to date, but do not tell the client yet!
+    text.value = n.value
+
+  result = buildHtml(input(`type`="text",
+    value=text.value, onblur=onFlip, onfocus=onFlip,
+    onkeyupenter=onkeyupenter, onkeyup=onkeyup, setFocus=focus.value))
+
+var
+  errmsg = rstr("")
+
 type
   User = ref object of ReactiveBase
     firstname, lastname: cstring
@@ -8,6 +27,43 @@ type
 var gu = newRSeq(@[ (User(firstname: "Some", lastname: "Body")),
                     (User(firstname: "Some", lastname: "One")),
                     (User(firstname: "Some", lastname: "Two"))])
+var selected = newReactive[User](nil)
+
+proc toUI*(): RString =
+  result = RString()
+  result.subscribe proc (v: cstring) =
+    if v.len > 0:
+      if selected >= 0:
+        # XXX what's happening here?
+        persons[selected].firstname = v
+        notifyObservers(persons[selected])
+      errmsg <- ""
+    else:
+      errmsg <- "name must not be empty"
+
+var inp = toUI()
+
+proc adaptFocus(def = false): RBool =
+  result = RBool()
+  result.value = def
+  result.subscribe proc (hasFocus: bool) =
+    if not hasFocus:
+      inp.notifyObservers()
+
+var focus = adaptFocus()
+
+proc styler(): VStyle =
+  result = style(
+    (StyleAttr.position, cstring"relative"),
+    (StyleAttr.paddingLeft, cstring"10px"),
+    (StyleAttr.paddingRight, cstring"5px"),
+    (StyleAttr.height, cstring"30px"),
+    (StyleAttr.lineHeight, cstring"30px"),
+    (StyleAttr.border, cstring"solid 8px " & (if focus.value: cstring"red" else: cstring"black")),
+    (StyleAttr.fontSize, cstring"12px"),
+    (StyleAttr.fontWeight, cstring"600")
+  )
+
 var clicks = 0
 
 discard """
@@ -22,20 +78,23 @@ discard """
   t
 """
 
-proc renderUser(u: User): VNode = #{.track.} =
-  proc inner(u: User): VNode =
-    result = buildHtml(tdiv):
-      text u.firstname & " " & u.lastname
-      button:
-        text "(X)"
-        proc onclick(ev: Event; n: VNode) =
-          #u.firstname = "kfdj"
-          #u.lastname = &clicks
-          #notifyObservers(u)
-          gu.deleteElem(u)
+template observe(s: cstring): RString =
+  let tmp = rstr(s)
+  u.subscribeSelf proc () =
+    tmp <- s
+  temp
 
-  result = inner(u)
-  doTrack(u, result, inner(u))
+proc renderUser(u: User; selected: RBool): VNode =
+  result = buildHtml(tdiv):
+    let displayName = observe(u.firstname & " " & u.lastname)
+    if selected == u:
+      newTextInput displayName, focus
+    else:
+      text displayName
+    button:
+      text "(x)"
+      proc onclick(ev: Event; n: VNode) =
+        gu.deleteElem(u)
 
 template vmap(x: RSeq; elem, f: untyped): VNode =
   let tmp = buildHtml(elem):
@@ -44,18 +103,18 @@ template vmap(x: RSeq; elem, f: untyped): VNode =
   doTrackResize(x, tmp, f(x[pos]))
   tmp
 
-proc main(gu: RSeq[User]): VNode = #{.track.} =
-  proc inner(gu: RSeq[User]): VNode =
-    result = buildHtml(tdiv):
-      vmap(gu, tdiv, renderUser)
-      tdiv:
-        button:
-          text "Add User"
-          proc onclick(ev: Event; n: VNode) =
-            inc clicks
-            gu.add User(firstname: "Added", lastname: &clicks)
-  result = inner(gu)
-  doTrack(gu, result, inner(gu))
+proc main(gu: RSeq[User]): VNode =
+  result = buildHtml(tdiv):
+    tdiv:
+      button:
+        text "Add User"
+        proc onclick(ev: Event; n: VNode) =
+          inc clicks
+          gu.add User(firstname: "Added", lastname: &clicks)
+    tdiv:
+      text errmsg
+    vmap(gu, tdiv, renderUser)
+
 
 proc init(): VNode = main(gu)
 
diff --git a/src/reactive.nim b/src/reactive.nim
index 4fcc851..a0944a9 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -8,6 +8,7 @@ type
     Mark
     Inserted
     Deleted
+    Replaced
 
   State = object
     stale: int
@@ -70,7 +71,7 @@ template wrapObserver(f: untyped) =
     of Mark:
       if state.stale == 0: x.broadcast(msg, pos)
       inc state.stale
-    of Inserted, Deleted:
+    of Inserted, Deleted, Replaced:
       dec state.stale
       if state.stale == 0:
         x.broadcast(msg, pos)
@@ -92,12 +93,20 @@ proc notifyObservers*(x: ReactiveBase) =
   x.broadcast(Mark)
   x.broadcast(Changed)
 
-proc subscribe[T](x: Reactive[T], f: proc(x: T)) =
+proc subscribeVal*[T](x: Reactive[T], f: proc(x: T)) =
   let reactor = proc (msg: Message, pos: int) =
     case msg:
     of Mark: discard
     of Changed, Unchanged: f(x.value)
-    of Inserted, Deleted: discard
+    of Inserted, Deleted, Replaced: discard
+  x.addSink reactor
+
+proc subscribeSelf*[T: ReactiveBase](x: T, f: proc()) =
+  let reactor = proc (msg: Message, pos: int) =
+    case msg:
+    of Mark: discard
+    of Changed, Unchanged: f()
+    of Inserted, Deleted, Replaced: discard
   x.addSink reactor
 
 template lift1(op: untyped) =
@@ -127,6 +136,8 @@ proc newRSeq*[T](data: seq[T]): RSeq[T] =
 
 proc `[]=`*[T](x: RSeq[T]; index: int; v: T) =
   x.s[index] = v
+  x.broadcast(Mark)
+  x.broadcast(Replaced, index)
 
 proc `[]`*[T](x: RSeq[T]; index: int): T = x.s[index]
 proc len*[T](x: RSeq[T]): int = x.s.len
diff --git a/src/vdom.nim b/src/vdom.nim
index bf84cb8..63f6669 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -239,8 +239,15 @@ proc tree*(kind: VNodeKind; attrs: openarray[(cstring, cstring)];
   result = tree(kind, kids)
   for a in attrs: result.setAttr(a[0], a[1])
 
-proc text*(s: string): VNode = VNode(kind: VNodeKind.text, text: cstring(s), index: -1)
-proc text*(s: cstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
+proc rawtext*(s: string): VNode = VNode(kind: VNodeKind.text, text: cstring(s), index: -1)
+proc rawtext*(s: cstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
+
+import reactive
+
+proc text*(s: RString): VNode =
+  result = VNode(kind: VNodeKind.text, text: s, index: -1)
+  s.subscribe proc(v: cstring) =
+    result.dom.value = v
 
 iterator items*(n: VNode): VNode =
   for i in 0..<n.kids.len: yield n.kids[i]

From 2482c772f8b0b201732682281a7e16d40ff482b6 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 23 Aug 2017 19:35:27 +0200
Subject: [PATCH 123/264] more reactive stuff works now

---
 experiments/nextgen.nim | 55 +++++++++++++++++++++++++--------
 src/karax.nim           |  9 ++++--
 src/reactive.nim        | 67 +++++++++++++++++------------------------
 src/vdom.nim            | 25 +++++++++------
 4 files changed, 94 insertions(+), 62 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index d311eb9..40acf04 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -1,7 +1,7 @@
 
 import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, reactive
 
-proc newTextInput*(text: RString; focus: RBool): VNode =
+proc newTextInput*(text: RString; focus: RBool): VNode {.track.} =
   proc onFlip(ev: Event; target: VNode) =
     focus <- not focus.value
 
@@ -23,20 +23,22 @@ var
 type
   User = ref object of ReactiveBase
     firstname, lastname: cstring
+    selected: bool
 
 var gu = newRSeq(@[ (User(firstname: "Some", lastname: "Body")),
                     (User(firstname: "Some", lastname: "One")),
                     (User(firstname: "Some", lastname: "Two"))])
-var selected = newReactive[User](nil)
+var prevSelected: User = nil #newReactive[User](nil)
 
 proc toUI*(): RString =
   result = RString()
   result.subscribe proc (v: cstring) =
     if v.len > 0:
-      if selected >= 0:
+      let p = prevSelected #selected.value
+      if p != nil:
         # XXX what's happening here?
-        persons[selected].firstname = v
-        notifyObservers(persons[selected])
+        p.firstname = v
+        notifyObservers(p)
       errmsg <- ""
     else:
       errmsg <- "name must not be empty"
@@ -76,20 +78,31 @@ discard """
   let t = text(u.firstname & " " & u.lastname)
   observe(u, t.update(u.firstname & " " & u.lastname))
   t
-"""
 
 template observe(s: cstring): RString =
   let tmp = rstr(s)
   u.subscribeSelf proc () =
     tmp <- s
   temp
+"""
 
-proc renderUser(u: User; selected: RBool): VNode =
+proc renderUser(u: User): VNode {.track.} =
   result = buildHtml(tdiv):
-    let displayName = observe(u.firstname & " " & u.lastname)
-    if selected == u:
-      newTextInput displayName, focus
+    let displayName = u.firstname & " " & u.lastname
+    if u.selected:
+      # == selected.value:
+      !(inp <- displayName)
+      newTextInput inp, focus
     else:
+      button:
+        text "..."
+        proc onclick(ev: Event; n: VNode) =
+          if prevSelected != nil:
+            prevSelected.selected = false
+            notifyObservers(prevSelected)
+          u.selected = true
+          notifyObservers(u)
+          prevSelected = u
       text displayName
     button:
       text "(x)"
@@ -103,6 +116,25 @@ template vmap(x: RSeq; elem, f: untyped): VNode =
   doTrackResize(x, tmp, f(x[pos]))
   tmp
 
+template vmapIt(x: RSeq; elem, call: untyped): VNode =
+  var it {.inject}: type(x[0])
+  let tmp = buildHtml(elem):
+    for i in 0..<len(x):
+      it = x[i]
+      call
+  doTrackResize(x, tmp, call)
+  tmp
+
+proc hasNativeNode(parent, x: Node): bool =
+  if parent == x: return true
+  for i in 0..<parent.len:
+    if hasNativeNode(parent[i], x): return true
+
+proc text*(s: RString): VNode =
+  result = text(s.value)
+  s.subscribe proc(v: cstring) =
+    if result.dom != nil: result.dom.nodeValue = v
+
 proc main(gu: RSeq[User]): VNode =
   result = buildHtml(tdiv):
     tdiv:
@@ -113,8 +145,7 @@ proc main(gu: RSeq[User]): VNode =
           gu.add User(firstname: "Added", lastname: &clicks)
     tdiv:
       text errmsg
-    vmap(gu, tdiv, renderUser)
-
+    vmapIt(gu, tdiv, renderUser(it))
 
 proc init(): VNode = main(gu)
 
diff --git a/src/karax.nim b/src/karax.nim
index 3df1edb..f68e3ff 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -177,7 +177,7 @@ proc same(n: VNode, e: Node; nesting = 0): bool =
     result = true
     if n.kind != VNodeKind.text:
       if e.len != n.len:
-        kout e.len, n.len, toTag[n.kind], nesting
+        echo "expected ", e.len, " real ", n.len, toTag[n.kind], " nesting ", nesting
         return false
       for i in 0 ..< n.len:
         if not same(n[i], e[i], nesting+1): return false
@@ -520,6 +520,7 @@ proc runDel*(kxi: KaraxInstance; parent: VNode; position: int) =
   kxi.addPatch(pkRemove, current, current.childNodes[position], nil)
   parent.delete(position)
   applyPatch(kxi)
+  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
 proc runIns*(kxi: KaraxInstance; parent, kid: VNode; position: int) =
   let current = parent.dom
@@ -531,14 +532,18 @@ proc runIns*(kxi: KaraxInstance; parent, kid: VNode; position: int) =
     kxi.addPatch(pkInsertBefore, current, before, kid)
     parent.insert(kid, position)
   applyPatch(kxi)
+  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
 proc runDiff*(kxi: KaraxInstance; oldNode, newNode: VNode) =
   let olddom = oldNode.dom
-  discard diff(newNode, oldNode, nil, olddom, kxi)
+  doAssert olddom != nil
+  if diff(newNode, oldNode, nil, olddom, kxi) == usenewNode:
+    takeOverFields(newNode, oldNode)
   applyComponents(kxi)
   applyPatch(kxi)
   if kxi.currentTree == oldNode:
     kxi.currentTree = newNode
+  doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
diff --git a/src/reactive.nim b/src/reactive.nim
index a0944a9..307d317 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -1,6 +1,4 @@
 
-import jdict
-
 type
   Message = enum
     Unchanged
@@ -19,7 +17,7 @@ type
   ReactiveBase* = ref object of RootObj ## everything that is a "reactive"
                                         ## value derives from that
     sinks*: seq[proc(msg: Message, pos: int)]
-    dups: JDict[cstring, bool] # prevent duplicate registrations
+    id: int
   Reactive*[T] = ref object of ReactiveBase
     value*: T
 
@@ -33,14 +31,16 @@ type
     s: seq[T]
     L: RInt
 
-proc addSink(x: ReactiveBase; sink: proc(msg: Message; pos: int)) =
-  x.sinks.add sink
+var rid: int
 
-proc addSink(x: ReactiveBase; key: cstring; sink: proc(msg: Message; pos: int)) =
-  if x.dups == nil: x.dups = newJDict[cstring, bool]()
-  if not x.dups.contains(key):
-    x.dups[key] = true
-    x.sinks.add sink
+proc addSink(x: ReactiveBase; sink: proc(msg: Message; pos: int)) =
+  #if x.sinks.len > 0:
+  #  x.sinks[0] = sink
+  #else:
+  x.sinks.add sink
+  if x.id == 0:
+    inc rid
+    x.id = rid
 
 proc broadcast(x: ReactiveBase, msg: Message; pos = 0) =
   for s in x.sinks: s(msg, pos)
@@ -93,7 +93,7 @@ proc notifyObservers*(x: ReactiveBase) =
   x.broadcast(Mark)
   x.broadcast(Changed)
 
-proc subscribeVal*[T](x: Reactive[T], f: proc(x: T)) =
+proc subscribe*[T](x: Reactive[T], f: proc(x: T)) =
   let reactor = proc (msg: Message, pos: int) =
     case msg:
     of Mark: discard
@@ -186,11 +186,10 @@ proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
 
 import macros
 
-template trackImpl(r: ReactiveBase; key: cstring; a, b: untyped) =
+template trackImpl(r: ReactiveBase; a, b: untyped) =
   when r is ReactiveBase:
-    addSink r, key, proc(m: Message; pos: int) =
-      if m == Changed:
-        runDiff(kxi, a, b)
+    addSink r, proc(m: Message; pos: int) =
+      if m == Changed: karax.runDiff(kxi, a, b)
 
 template doTrack*(r: ReactiveBase; a, b: untyped) {.dirty.} =
   bind addSink, Message, RSeq, Changed, Deleted, Inserted
@@ -207,40 +206,30 @@ template doTrackResize*(r: ReactiveBase; a, b: untyped) {.dirty.} =
     case m
     of Deleted: karax.runDel(kxi, a, pos)
     of Inserted:
+      let it {.used.} = r[pos]
       karax.runIns(kxi, a, b, pos)
     else: discard
 
-template notifyImpl(r: untyped) =
-  when r is ReactiveBase:
-    notifyObservers(r)
-
-proc root(n: NimNode): NimNode =
-  result = n
-  while result.kind in {nnkDotExpr, nnkBracketExpr}: result = result[0]
-
-proc analyse(n: NimNode; paramList: seq[NimNode]): NimNode =
-  result = n
-  #if n.kind in {nnkAsgn, nnkFastAsgn}:
-  #
-  #   n[0]
-  #else:
-  #  recurse()
-
 macro track*(procDef: untyped): untyped =
   let params = params(procDef)
-  let key = lineInfo(procDef)
-  var call = newCall(procDef.name)
   var trackings = newStmtList()
-  var paramList: seq[NimNode] = @[]
+  var inner = copyNimTree(procDef)
+  inner[0] = ident($procDef.name & "Inner")
+  var call = newCall(inner[0])
+  trackings.add inner
+  trackings.add newAssignment(ident"result", call)
+
   for j in 1..<params.len:
     let x = params[j]
     expectKind x, nnkIdentDefs
-    for i in 0..x.len-3: paramList.add(x[i])
+    for i in 0..x.len-3:
+      let param = x[i]
+      call.add(param)
 
-  for b in procDef.body: trackings.add analyse(b, paramList)
-  for param in paramList:
-    call.add param
-    trackings.add getAst(trackImpl(param, key, ident"result", call))
+  for j in 1..<call.len:
+    trackings.add getAst(trackImpl(call[j], ident"result", call))
 
   result = copyNimTree(procDef)
   result.body = trackings
+  when defined(debugKaraxDsl):
+    echo repr result
diff --git a/src/vdom.nim b/src/vdom.nim
index 63f6669..c438e3c 100644
--- a/src/vdom.nim
+++ b/src/vdom.nim
@@ -220,6 +220,20 @@ proc getAttr*(n: VNode; key: cstring): cstring =
 proc takeOverAttr*(newNode, oldNode: VNode) =
   shallowCopy oldNode.attrs, newNode.attrs
 
+proc takeOverFields*(newNode, oldNode: VNode) =
+  template take(field) =
+    shallowCopy oldNode.field, newNode.field
+  take kind
+  take index
+  take id
+  take class
+  take text
+  take kids
+  take attrs
+  take events
+  take style
+  take dom
+
 proc len*(x: VNode): int = x.kids.len
 proc `[]`*(x: VNode; idx: int): VNode = x.kids[idx]
 proc `[]=`*(x: VNode; idx: int; y: VNode) = x.kids[idx] = y
@@ -239,15 +253,8 @@ proc tree*(kind: VNodeKind; attrs: openarray[(cstring, cstring)];
   result = tree(kind, kids)
   for a in attrs: result.setAttr(a[0], a[1])
 
-proc rawtext*(s: string): VNode = VNode(kind: VNodeKind.text, text: cstring(s), index: -1)
-proc rawtext*(s: cstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
-
-import reactive
-
-proc text*(s: RString): VNode =
-  result = VNode(kind: VNodeKind.text, text: s, index: -1)
-  s.subscribe proc(v: cstring) =
-    result.dom.value = v
+proc text*(s: string): VNode = VNode(kind: VNodeKind.text, text: cstring(s), index: -1)
+proc text*(s: cstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
 
 iterator items*(n: VNode): VNode =
   for i in 0..<n.kids.len: yield n.kids[i]

From cb2dd6331d4a5e0a71e84b30b161079d3a13b7b2 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 28 Aug 2017 11:29:12 +0200
Subject: [PATCH 124/264] improvments to the new local diff algorithm

---
 src/karax.nim | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index f68e3ff..2df1d9f 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -182,7 +182,7 @@ proc same(n: VNode, e: Node; nesting = 0): bool =
       for i in 0 ..< n.len:
         if not same(n[i], e[i], nesting+1): return false
   else:
-    kout toTag[n.kind], e.nodename
+    echo "VDOM: ", toTag[n.kind], " DOM: ", e.nodename
 
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
@@ -334,7 +334,8 @@ proc applyPatch(kxi: KaraxInstance) =
       if n.kind == VNodeKind.component:
         let x = VComponent(n)
         if x.onDetachImpl != nil: x.onDetachImpl(x)
-      n.dom = nil
+      # XXX for some reason this causes assertion errors otherwise:
+      if not kxi.surpressRedraws: n.dom = nil
   kxi.patchLen = 0
   for i in 0..<kxi.patchLenV:
     let p = kxi.patchesV[i]
@@ -537,8 +538,11 @@ proc runIns*(kxi: KaraxInstance; parent, kid: VNode; position: int) =
 proc runDiff*(kxi: KaraxInstance; oldNode, newNode: VNode) =
   let olddom = oldNode.dom
   doAssert olddom != nil
-  if diff(newNode, oldNode, nil, olddom, kxi) == usenewNode:
-    takeOverFields(newNode, oldNode)
+  discard diff(newNode, oldNode, nil, olddom, kxi)
+  # this is a bit nasty: Since we cannot patch the 'parent' of
+  # the current VNode (because we don't store it at all!), we
+  # need to override the fields individually:
+  takeOverFields(newNode, oldNode)
   applyComponents(kxi)
   applyPatch(kxi)
   if kxi.currentTree == oldNode:

From 4032bed306195154b6f2c2152ab6bae4b46a4678 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 28 Aug 2017 11:29:43 +0200
Subject: [PATCH 125/264] created a nice 'makeReactive' macro

---
 src/reactive.nim | 128 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 9 deletions(-)

diff --git a/src/reactive.nim b/src/reactive.nim
index 307d317..34c630e 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -1,4 +1,6 @@
 
+import jdict
+
 type
   Message = enum
     Unchanged
@@ -14,9 +16,11 @@ type
     phantom: bool
 
 type
+  SinkSeq = seq[proc(msg: Message, pos: int)]
   ReactiveBase* = ref object of RootObj ## everything that is a "reactive"
                                         ## value derives from that
-    sinks*: seq[proc(msg: Message, pos: int)]
+    sinks*: SinkSeq
+    dups: JDict[cstring, bool]
     id: int
   Reactive*[T] = ref object of ReactiveBase
     value*: T
@@ -33,10 +37,16 @@ type
 
 var rid: int
 
+proc addSink(x: ReactiveBase; key: cstring; sink: proc(msg: Message; pos: int)) =
+  if x.dups == nil: x.dups = newJDict[cstring, bool]()
+  if not x.dups.contains(key):
+    x.dups[key] = true
+    x.sinks.add sink
+    if x.id == 0:
+      inc rid
+      x.id = rid
+
 proc addSink(x: ReactiveBase; sink: proc(msg: Message; pos: int)) =
-  #if x.sinks.len > 0:
-  #  x.sinks[0] = sink
-  #else:
   x.sinks.add sink
   if x.id == 0:
     inc rid
@@ -78,6 +88,29 @@ template wrapObserver(f: untyped) =
         #state.phantom = true
   helper
 
+template glitchFree(f: untyped) =
+  var state: State
+  proc helper(msg: Message; pos: int) =
+    case msg.kind:
+    of Changed, Unchanged:
+      state.outdated = state.outdated or (msg.kind == Changed)
+      dec state.stale
+      if state.stale == 0:
+        if state.outdated:
+          x.value = f
+          x.broadcast(msg.kind, pos)
+          state.outdated = false
+        else:
+          x.broadcast(Unchanged, pos)
+    of Mark:
+      if state.stale == 0: x.broadcast(msg, pos)
+      inc state.stale
+    of Inserted, Deleted, Replaced:
+      dec state.stale
+      if state.stale == 0:
+        x.broadcast(msg, pos)
+  helper
+
 proc `:=`[T](x: Reactive[T], f: proc(): T) =
   toTrack = wrapObserver(f())
   x.value = f()
@@ -186,17 +219,29 @@ proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
 
 import macros
 
-template trackImpl(r: ReactiveBase; a, b: untyped) =
+template protect(r: ReactiveBase; body: untyped) =
+  var tmp: seq[proc(msg: Message, pos: int)]
+  swap(r.sinks, tmp)
+  body
+  swap(r.sinks, tmp)
+
+template trackImpl(r: ReactiveBase; key: cstring; a, b: untyped) =
   when r is ReactiveBase:
-    addSink r, proc(m: Message; pos: int) =
-      if m == Changed: karax.runDiff(kxi, a, b)
+    addSink r, key, proc(m: Message; pos: int) =
+      if m == Changed:
+        protect r:
+          echo "runDiff A"
+          karax.runDiff(kxi, a, b)
 
 template doTrack*(r: ReactiveBase; a, b: untyped) {.dirty.} =
   bind addSink, Message, RSeq, Changed, Deleted, Inserted
   addSink r, proc(m: Message; pos: int) =
     #when r is RSeq:
     #echo "Message: ", m, " ", pos
-    if m == Changed: karax.runDiff(kxi, a, b)
+    if m == Changed:
+      protect r:
+        echo "runDiff B"
+        karax.runDiff(kxi, a, b)
 
 template doTrackResize*(r: ReactiveBase; a, b: untyped) {.dirty.} =
   bind addSink, Message, RSeq, Changed, Deleted, Inserted
@@ -226,10 +271,75 @@ macro track*(procDef: untyped): untyped =
       let param = x[i]
       call.add(param)
 
+  let key = lineInfo(procDef)
   for j in 1..<call.len:
-    trackings.add getAst(trackImpl(call[j], ident"result", call))
+    trackings.add getAst(trackImpl(call[j], key, ident"result", call))
 
   result = copyNimTree(procDef)
   result.body = trackings
   when defined(debugKaraxDsl):
     echo repr result
+
+macro mut(t: typed): untyped =
+  if getType(t).typeKind == ntyRef:
+    result = t
+  else:
+    result = newTree(nnkVarTy, t)
+
+proc generatePrivateAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
+  template helper(name, hidden, typ, fieldTyp) {.dirty.} =
+    proc name(self: typ): fieldTyp = self.hidden
+    proc `name=`(self: mut typ; val: fieldTyp) =
+      self.hidden = val
+      notifyObservers(self)
+  result = getAst(helper(name, hidden, typ, fieldTyp))
+
+proc generatePublicAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
+  template helper(name, hidden, typ, fieldTyp) {.dirty.} =
+    proc name*(self: typ): fieldTyp = self.hidden
+    proc `name=`*(self: mut typ; val: fieldTyp) =
+      self.hidden = val
+      notifyObservers(self)
+  result = getAst(helper(name, hidden, typ, fieldTyp))
+
+proc transform(n: NimNode; stmts, obj: NimNode): NimNode =
+  if n.kind == nnkIdentDefs and obj.kind == nnkIdent:
+    for i in 0..n.len-3:
+      let it = n[i]
+      let itB = if it.kind == nnkPostFix: it[1] else: it
+      let hidden = newIdentNode("raw" & $itB)
+      if it.kind == nnkPostFix:
+        stmts.add generatePublicAccessors(itB, hidden, obj, n[n.len-2])
+      else:
+        stmts.add generatePrivateAccessors(itB, hidden, obj, n[n.len-2])
+      n[i] = hidden
+    result = n
+  else:
+    var objB = if n.kind == nnkTypeDef: n[0] else: obj
+    result = copyNimNode(n)
+    for i in 0..<n.len:
+      if n.kind == nnkObjectTy and i == 1 and n[1].kind == nnkEmpty:
+        result.add newTree(nnkOfInherit, ident("ReactiveBase"))
+      else:
+        result.add transform(n[i], stmts, objB)
+
+macro makeReactive*(n: untyped): untyped =
+  var a = newStmtList()
+  a.add newEmptyNode()
+  let t = transform(n, a, newEmptyNode())
+  a[0] = t
+  result = a
+  when defined(debugKaraxDsl):
+    echo repr result
+
+when isMainModule:
+  makeReactive:
+    type
+      Foo = ref object of ReactiveBase
+        x, y: int
+      Bar = ref object of ReactiveBase
+        z: string
+        exported*: int
+      Another = ref object
+        a, b: cstring
+        c: bool

From f663d2f21bd597006024cbb4e9b0376de1e3e415 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 28 Aug 2017 11:48:04 +0200
Subject: [PATCH 126/264] removed debugging code

---
 src/reactive.nim | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/reactive.nim b/src/reactive.nim
index 34c630e..5d793c5 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -230,7 +230,6 @@ template trackImpl(r: ReactiveBase; key: cstring; a, b: untyped) =
     addSink r, key, proc(m: Message; pos: int) =
       if m == Changed:
         protect r:
-          echo "runDiff A"
           karax.runDiff(kxi, a, b)
 
 template doTrack*(r: ReactiveBase; a, b: untyped) {.dirty.} =
@@ -240,7 +239,6 @@ template doTrack*(r: ReactiveBase; a, b: untyped) {.dirty.} =
     #echo "Message: ", m, " ", pos
     if m == Changed:
       protect r:
-        echo "runDiff B"
         karax.runDiff(kxi, a, b)
 
 template doTrackResize*(r: ReactiveBase; a, b: untyped) {.dirty.} =

From 775a4a12899748b2cedb4fccbee951b75935a217 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 28 Aug 2017 12:10:48 +0200
Subject: [PATCH 127/264] nextgen example works now

---
 experiments/nextgen.nim | 60 ++++++++++++++++++++++++++---------------
 src/reactive.nim        | 13 ++++++---
 2 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index 40acf04..0fa76bb 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -1,13 +1,12 @@
 
 import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, reactive
 
-proc newTextInput*(text: RString; focus: RBool): VNode {.track.} =
+proc textInput*(text: RString; focus: RBool): VNode {.track.} =
   proc onFlip(ev: Event; target: VNode) =
     focus <- not focus.value
 
   proc onKeyupEnter(ev: Event; target: VNode) =
     text <- target.value
-    #text.notifyObservers()
 
   proc onkeyup(ev: Event; n: VNode) =
     # keep displayValue up to date, but do not tell the client yet!
@@ -30,29 +29,49 @@ var gu = newRSeq(@[ (User(firstname: "Some", lastname: "Body")),
                     (User(firstname: "Some", lastname: "Two"))])
 var prevSelected: User = nil #newReactive[User](nil)
 
-proc toUI*(): RString =
+proc unselect() =
+  if prevSelected != nil:
+    prevSelected.selected = false
+    notifyObservers(prevSelected)
+    prevSelected = nil
+
+proc select(u: User) =
+  unselect()
+  u.selected = true
+  notifyObservers(u)
+  prevSelected = u
+
+proc toUI*(isFirstname: bool): RString =
   result = RString()
   result.subscribe proc (v: cstring) =
     if v.len > 0:
       let p = prevSelected #selected.value
       if p != nil:
-        # XXX what's happening here?
-        p.firstname = v
+        if isFirstName:
+          p.firstname = v
+        else:
+          p.lastname = v
         notifyObservers(p)
+        unselect()
       errmsg <- ""
     else:
       errmsg <- "name must not be empty"
 
-var inp = toUI()
+var firstname = toUI(true)
+var lastname = toUI(false)
 
 proc adaptFocus(def = false): RBool =
   result = RBool()
   result.value = def
-  result.subscribe proc (hasFocus: bool) =
-    if not hasFocus:
-      inp.notifyObservers()
+  when false:
+    result.subscribe proc (hasFocus: bool) =
+      if not hasFocus:
+        unselect()
+        firstname.notifyObservers()
+        lastname.notifyObservers()
 
-var focus = adaptFocus()
+var focusA = adaptFocus()
+var focusB = adaptFocus()
 
 proc styler(): VStyle =
   result = style(
@@ -61,7 +80,7 @@ proc styler(): VStyle =
     (StyleAttr.paddingRight, cstring"5px"),
     (StyleAttr.height, cstring"30px"),
     (StyleAttr.lineHeight, cstring"30px"),
-    (StyleAttr.border, cstring"solid 8px " & (if focus.value: cstring"red" else: cstring"black")),
+    (StyleAttr.border, cstring"solid 8px " & (if focusA.value: cstring"red" else: cstring"black")),
     (StyleAttr.fontSize, cstring"12px"),
     (StyleAttr.fontWeight, cstring"600")
   )
@@ -88,22 +107,19 @@ template observe(s: cstring): RString =
 
 proc renderUser(u: User): VNode {.track.} =
   result = buildHtml(tdiv):
-    let displayName = u.firstname & " " & u.lastname
     if u.selected:
-      # == selected.value:
-      !(inp <- displayName)
-      newTextInput inp, focus
+      !(firstname <- u.firstname)
+      tdiv:
+        textInput firstname, focusA
+      !(lastname <- u.lastname)
+      tdiv:
+        textInput lastname, focusB
     else:
       button:
         text "..."
         proc onclick(ev: Event; n: VNode) =
-          if prevSelected != nil:
-            prevSelected.selected = false
-            notifyObservers(prevSelected)
-          u.selected = true
-          notifyObservers(u)
-          prevSelected = u
-      text displayName
+          select(u)
+      text u.firstname & " " & u.lastname
     button:
       text "(x)"
       proc onclick(ev: Event; n: VNode) =
diff --git a/src/reactive.nim b/src/reactive.nim
index 5d793c5..ded1779 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -52,8 +52,11 @@ proc addSink(x: ReactiveBase; sink: proc(msg: Message; pos: int)) =
     inc rid
     x.id = rid
 
+var inhibited: int
+
 proc broadcast(x: ReactiveBase, msg: Message; pos = 0) =
-  for s in x.sinks: s(msg, pos)
+  if inhibited == 0:
+    for s in x.sinks: s(msg, pos)
 
 var toTrack: proc (msg: Message; pos: int) = nil
 
@@ -220,10 +223,12 @@ proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
 import macros
 
 template protect(r: ReactiveBase; body: untyped) =
-  var tmp: seq[proc(msg: Message, pos: int)]
-  swap(r.sinks, tmp)
+  #var tmp: seq[proc(msg: Message, pos: int)]
+  #swap(r.sinks, tmp)
+  inc inhibited
   body
-  swap(r.sinks, tmp)
+  dec inhibited
+  #swap(r.sinks, tmp)
 
 template trackImpl(r: ReactiveBase; key: cstring; a, b: untyped) =
   when r is ReactiveBase:

From db0bba2c3ff9ff00122ce4fc866228aed1646fa9 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 28 Aug 2017 12:15:58 +0200
Subject: [PATCH 128/264] change DSL: assume nkInfix nodes imply a void context

---
 experiments/nextgen.nim | 4 ++--
 src/karaxdsl.nim        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index 0fa76bb..e995be6 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -108,10 +108,10 @@ template observe(s: cstring): RString =
 proc renderUser(u: User): VNode {.track.} =
   result = buildHtml(tdiv):
     if u.selected:
-      !(firstname <- u.firstname)
+      firstname <- u.firstname
       tdiv:
         textInput firstname, focusA
-      !(lastname <- u.lastname)
+      lastname <- u.lastname
       tdiv:
         textInput lastname, focusB
     else:
diff --git a/src/karaxdsl.nim b/src/karaxdsl.nim
index cfbe391..dd480e1 100644
--- a/src/karaxdsl.nim
+++ b/src/karaxdsl.nim
@@ -74,7 +74,7 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
       result = n
   of nnkVarSection, nnkLetSection, nnkConstSection:
     result = n
-  of nnkCallKinds:
+  of nnkCallKinds - {nnkInfix}:
     let op = getName(n[0])
     let ck = isComponent(op)
     if ck != ComponentKind.None:

From e70924c88e6013b132dac9e725199346c7825730 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 28 Aug 2017 12:23:32 +0200
Subject: [PATCH 129/264] nextgen example now uses the makeReactive macro

---
 experiments/nextgen.nim | 78 ++++++++---------------------------------
 src/reactive.nim        | 33 ++++++++++++-----
 2 files changed, 40 insertions(+), 71 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index e995be6..56330d0 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -19,26 +19,25 @@ proc textInput*(text: RString; focus: RBool): VNode {.track.} =
 var
   errmsg = rstr("")
 
-type
-  User = ref object of ReactiveBase
-    firstname, lastname: cstring
-    selected: bool
+makeReactive:
+  type
+    User = ref object
+      firstname, lastname: cstring
+      selected: bool
 
-var gu = newRSeq(@[ (User(firstname: "Some", lastname: "Body")),
-                    (User(firstname: "Some", lastname: "One")),
-                    (User(firstname: "Some", lastname: "Two"))])
+var gu = newRSeq(@[ (User(rawFirstname: "Some", rawLastname: "Body")),
+                    (User(rawFirstname: "Some", rawLastname: "One")),
+                    (User(rawFirstname: "Some", rawLastname: "Two"))])
 var prevSelected: User = nil #newReactive[User](nil)
 
 proc unselect() =
   if prevSelected != nil:
     prevSelected.selected = false
-    notifyObservers(prevSelected)
     prevSelected = nil
 
 proc select(u: User) =
   unselect()
   u.selected = true
-  notifyObservers(u)
   prevSelected = u
 
 proc toUI*(isFirstname: bool): RString =
@@ -51,14 +50,13 @@ proc toUI*(isFirstname: bool): RString =
           p.firstname = v
         else:
           p.lastname = v
-        notifyObservers(p)
         unselect()
       errmsg <- ""
     else:
       errmsg <- "name must not be empty"
 
-var firstname = toUI(true)
-var lastname = toUI(false)
+var inpFirstname = toUI(true)
+var inpLastname = toUI(false)
 
 proc adaptFocus(def = false): RBool =
   result = RBool()
@@ -67,8 +65,6 @@ proc adaptFocus(def = false): RBool =
     result.subscribe proc (hasFocus: bool) =
       if not hasFocus:
         unselect()
-        firstname.notifyObservers()
-        lastname.notifyObservers()
 
 var focusA = adaptFocus()
 var focusB = adaptFocus()
@@ -87,33 +83,15 @@ proc styler(): VStyle =
 
 var clicks = 0
 
-discard """
-  # Text gets a *reactive* string in the first place!
-  # Text can register and knows how to update itself!
-  proc toReact(): RString =
-    observe(u):
-      u.firstname & u.lastname
-
-  let t = text(u.firstname & " " & u.lastname)
-  observe(u, t.update(u.firstname & " " & u.lastname))
-  t
-
-template observe(s: cstring): RString =
-  let tmp = rstr(s)
-  u.subscribeSelf proc () =
-    tmp <- s
-  temp
-"""
-
 proc renderUser(u: User): VNode {.track.} =
   result = buildHtml(tdiv):
     if u.selected:
-      firstname <- u.firstname
+      inpFirstname <- u.firstname
       tdiv:
-        textInput firstname, focusA
-      lastname <- u.lastname
+        textInput inpFirstname, focusA
+      inpLastname <- u.lastname
       tdiv:
-        textInput lastname, focusB
+        textInput inpLastname, focusB
     else:
       button:
         text "..."
@@ -125,32 +103,6 @@ proc renderUser(u: User): VNode {.track.} =
       proc onclick(ev: Event; n: VNode) =
         gu.deleteElem(u)
 
-template vmap(x: RSeq; elem, f: untyped): VNode =
-  let tmp = buildHtml(elem):
-    for i in 0..<len(x):
-      f(x[i])
-  doTrackResize(x, tmp, f(x[pos]))
-  tmp
-
-template vmapIt(x: RSeq; elem, call: untyped): VNode =
-  var it {.inject}: type(x[0])
-  let tmp = buildHtml(elem):
-    for i in 0..<len(x):
-      it = x[i]
-      call
-  doTrackResize(x, tmp, call)
-  tmp
-
-proc hasNativeNode(parent, x: Node): bool =
-  if parent == x: return true
-  for i in 0..<parent.len:
-    if hasNativeNode(parent[i], x): return true
-
-proc text*(s: RString): VNode =
-  result = text(s.value)
-  s.subscribe proc(v: cstring) =
-    if result.dom != nil: result.dom.nodeValue = v
-
 proc main(gu: RSeq[User]): VNode =
   result = buildHtml(tdiv):
     tdiv:
@@ -158,7 +110,7 @@ proc main(gu: RSeq[User]): VNode =
         text "Add User"
         proc onclick(ev: Event; n: VNode) =
           inc clicks
-          gu.add User(firstname: "Added", lastname: &clicks)
+          gu.add User(rawFirstname: "Added", rawLastname: &clicks)
     tdiv:
       text errmsg
     vmapIt(gu, tdiv, renderUser(it))
diff --git a/src/reactive.nim b/src/reactive.nim
index ded1779..1b28df7 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -283,16 +283,10 @@ macro track*(procDef: untyped): untyped =
   when defined(debugKaraxDsl):
     echo repr result
 
-macro mut(t: typed): untyped =
-  if getType(t).typeKind == ntyRef:
-    result = t
-  else:
-    result = newTree(nnkVarTy, t)
-
 proc generatePrivateAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
   template helper(name, hidden, typ, fieldTyp) {.dirty.} =
     proc name(self: typ): fieldTyp = self.hidden
-    proc `name=`(self: mut typ; val: fieldTyp) =
+    proc `name=`(self: typ; val: fieldTyp) =
       self.hidden = val
       notifyObservers(self)
   result = getAst(helper(name, hidden, typ, fieldTyp))
@@ -300,7 +294,7 @@ proc generatePrivateAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
 proc generatePublicAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
   template helper(name, hidden, typ, fieldTyp) {.dirty.} =
     proc name*(self: typ): fieldTyp = self.hidden
-    proc `name=`*(self: mut typ; val: fieldTyp) =
+    proc `name=`*(self: typ; val: fieldTyp) =
       self.hidden = val
       notifyObservers(self)
   result = getAst(helper(name, hidden, typ, fieldTyp))
@@ -335,6 +329,29 @@ macro makeReactive*(n: untyped): untyped =
   when defined(debugKaraxDsl):
     echo repr result
 
+import vdom
+
+template vmap*(x: RSeq; elem, f: untyped): VNode =
+  let tmp = buildHtml(elem):
+    for i in 0..<len(x):
+      f(x[i])
+  doTrackResize(x, tmp, f(x[pos]))
+  tmp
+
+template vmapIt*(x: RSeq; elem, call: untyped): VNode =
+  var it {.inject}: type(x[0])
+  let tmp = buildHtml(elem):
+    for i in 0..<len(x):
+      it = x[i]
+      call
+  doTrackResize(x, tmp, call)
+  tmp
+
+proc text*(s: RString): VNode =
+  result = text(s.value)
+  s.subscribe proc(v: cstring) =
+    if result.dom != nil: result.dom.nodeValue = v
+
 when isMainModule:
   makeReactive:
     type

From 539f6d724402824ca46e7b7174b12fab98540444 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 29 Aug 2017 10:53:16 +0200
Subject: [PATCH 130/264] use the generated getters to make the reactive
 extensions more robust

---
 src/reactive.nim | 101 +++++++++++++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 43 deletions(-)

diff --git a/src/reactive.nim b/src/reactive.nim
index 1b28df7..167d6e9 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -20,7 +20,7 @@ type
   ReactiveBase* = ref object of RootObj ## everything that is a "reactive"
                                         ## value derives from that
     sinks*: SinkSeq
-    dups: JDict[cstring, bool]
+    dups: JDict[cstring, int]
     id: int
   Reactive*[T] = ref object of ReactiveBase
     value*: T
@@ -38,13 +38,16 @@ type
 var rid: int
 
 proc addSink(x: ReactiveBase; key: cstring; sink: proc(msg: Message; pos: int)) =
-  if x.dups == nil: x.dups = newJDict[cstring, bool]()
+  if x.dups == nil: x.dups = newJDict[cstring, int]()
   if not x.dups.contains(key):
-    x.dups[key] = true
+    x.dups[key] = x.sinks.len
     x.sinks.add sink
     if x.id == 0:
       inc rid
       x.id = rid
+  else:
+    # update existing entry:
+    x.sinks[x.dups[key]] = sink
 
 proc addSink(x: ReactiveBase; sink: proc(msg: Message; pos: int)) =
   x.sinks.add sink
@@ -58,12 +61,16 @@ proc broadcast(x: ReactiveBase, msg: Message; pos = 0) =
   if inhibited == 0:
     for s in x.sinks: s(msg, pos)
 
-var toTrack: proc (msg: Message; pos: int) = nil
+var toTrack: seq[(cstring, proc (msg: Message; pos: int))] = @[]
 
-proc now*[T](x: Reactive[T]): T =
-  if toTrack != nil:
-    x.addSink toTrack
-  result = x.value
+template withTrack(key, t, body) =
+  toTrack.add((key, t))
+  body
+  discard toTrack.pop()
+
+proc trackDependency*(r: ReactiveBase) =
+  for t in toTrack:
+    r.addSink t[0], t[1]
 
 template wrapObserver(f: untyped) =
   var state: State
@@ -114,11 +121,6 @@ template glitchFree(f: untyped) =
         x.broadcast(msg, pos)
   helper
 
-proc `:=`[T](x: Reactive[T], f: proc(): T) =
-  toTrack = wrapObserver(f())
-  x.value = f()
-  toTrack = nil
-
 proc `<-`*[T](x: Reactive[T], val: T) =
   #if x.value != val:
   x.value = val
@@ -204,25 +206,31 @@ proc deleteElem*[T](x: RSeq[T]; y: T) =
     x.broadcast(Mark)
     x.broadcast(Deleted, position)
 
-proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
-  let xl = x.L.value
-  let res = newRSeq[U](xl)
-  for i in 0..<xl:
-    res.s[i] := proc(): U = f(x[i].now)
+when false:
+  proc `:=`[T](x: Reactive[T], f: proc(): T) =
+    toTrack = wrapObserver(f())
+    x.value = f()
+    toTrack = nil
 
-  let reactor = proc (msg: Message, pos: int) =
-    case msg:
-    of Mark, Changed, Unchanged: discard "nothing to do"
-    of Inserted:
-      res.insert(f(x[pos]), pos)
-    of Deleted:
-      res.delete(pos)
-  x.addSink reactor
-  result = res
+  proc map*[T, U](x: RSeq[T], f: proc(x: T): U): RSeq[U] =
+    let xl = x.L.value
+    let res = newRSeq[U](xl)
+    for i in 0..<xl:
+      res.s[i] := proc(): U = f(x[i].now)
+
+    let reactor = proc (msg: Message, pos: int) =
+      case msg:
+      of Mark, Changed, Unchanged: discard "nothing to do"
+      of Inserted:
+        res.insert(f(x[pos]), pos)
+      of Deleted:
+        res.delete(pos)
+    x.addSink reactor
+    result = res
 
 import macros
 
-template protect(r: ReactiveBase; body: untyped) =
+template protect(body: untyped) =
   #var tmp: seq[proc(msg: Message, pos: int)]
   #swap(r.sinks, tmp)
   inc inhibited
@@ -230,14 +238,17 @@ template protect(r: ReactiveBase; body: untyped) =
   dec inhibited
   #swap(r.sinks, tmp)
 
-template trackImpl(r: ReactiveBase; key: cstring; a, b: untyped) =
-  when r is ReactiveBase:
-    addSink r, key, proc(m: Message; pos: int) =
-      if m == Changed:
-        protect r:
-          karax.runDiff(kxi, a, b)
+template trackStart(key: cstring; a, b: untyped) =
+  proc differ(m: Message; pos: int) =
+    if m == Changed:
+      protect:
+        karax.runDiff(kxi, a, b)
+  toTrack.add((key, differ))
 
-template doTrack*(r: ReactiveBase; a, b: untyped) {.dirty.} =
+template trackEnd() =
+  discard toTrack.pop()
+
+template doTrack(r: ReactiveBase; a, b: untyped) {.dirty.} =
   bind addSink, Message, RSeq, Changed, Deleted, Inserted
   addSink r, proc(m: Message; pos: int) =
     #when r is RSeq:
@@ -246,7 +257,7 @@ template doTrack*(r: ReactiveBase; a, b: untyped) {.dirty.} =
       protect r:
         karax.runDiff(kxi, a, b)
 
-template doTrackResize*(r: ReactiveBase; a, b: untyped) {.dirty.} =
+template doTrackResize(r: ReactiveBase; a, b: untyped) {.dirty.} =
   bind addSink, Message, RSeq, Changed, Deleted, Inserted
   addSink r, proc(m: Message; pos: int) =
     #when r is RSeq:
@@ -264,8 +275,6 @@ macro track*(procDef: untyped): untyped =
   var inner = copyNimTree(procDef)
   inner[0] = ident($procDef.name & "Inner")
   var call = newCall(inner[0])
-  trackings.add inner
-  trackings.add newAssignment(ident"result", call)
 
   for j in 1..<params.len:
     let x = params[j]
@@ -274,9 +283,11 @@ macro track*(procDef: untyped): untyped =
       let param = x[i]
       call.add(param)
 
-  let key = lineInfo(procDef)
-  for j in 1..<call.len:
-    trackings.add getAst(trackImpl(call[j], key, ident"result", call))
+  trackings.add inner
+  let key = newCall("cstring", newLit lineInfo(procDef))
+  trackings.add getAst(trackStart(key, ident"result", call))
+  trackings.add newAssignment(ident"result", call)
+  trackings.add getAst(trackEnd())
 
   result = copyNimTree(procDef)
   result.body = trackings
@@ -285,7 +296,9 @@ macro track*(procDef: untyped): untyped =
 
 proc generatePrivateAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
   template helper(name, hidden, typ, fieldTyp) {.dirty.} =
-    proc name(self: typ): fieldTyp = self.hidden
+    proc name(self: typ): fieldTyp =
+      trackDependency(self)
+      result = self.hidden
     proc `name=`(self: typ; val: fieldTyp) =
       self.hidden = val
       notifyObservers(self)
@@ -293,7 +306,9 @@ proc generatePrivateAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
 
 proc generatePublicAccessors(name, hidden, typ, fieldTyp: NimNode): NimNode =
   template helper(name, hidden, typ, fieldTyp) {.dirty.} =
-    proc name*(self: typ): fieldTyp = self.hidden
+    proc name*(self: typ): fieldTyp =
+      trackDependency(self)
+      result = self.hidden
     proc `name=`*(self: typ; val: fieldTyp) =
       self.hidden = val
       notifyObservers(self)

From 2c3e8be9b4a4da7d6bc8fb9c829d59a62c725e72 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 29 Aug 2017 19:32:49 +0200
Subject: [PATCH 131/264] support parameter-less event handlers

---
 src/karax.nim | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/karax.nim b/src/karax.nim
index 2df1d9f..0a630a6 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -642,6 +642,18 @@ proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler;
     if not kxi.surpressRedraws: redraw(kxi)
   addEventListener(n, k, wrapper)
 
+proc addEventHandler*(n: VNode; k: EventKind; action: proc();
+                      kxi: KaraxInstance = kxi) =
+  ## Implements the foundation of Karax's event management.
+  ## Karax DSL transforms ``tag(onEvent = handler)`` to
+  ## ``tempNode.addEventHandler(tagNode, EventKind.onEvent, wrapper)``
+  ## where ``wrapper`` calls the passed ``action`` and then triggers
+  ## a ``redraw``.
+  proc wrapper(ev: Event; n: VNode) =
+    action()
+    if not kxi.surpressRedraws: redraw(kxi)
+  addEventListener(n, k, wrapper)
+
 proc setOnHashChange*(action: proc (hashPart: cstring)) =
   var onhashChange {.importc: "window.onhashchange".}: proc()
   var hashPart {.importc: "window.location.hash".}: cstring

From 741ff50caeb51495a93c0cda81ad3d29e7ce014e Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 31 Aug 2017 21:44:51 +0200
Subject: [PATCH 132/264] allow newRSeq[T]() as construction

---
 src/reactive.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/reactive.nim b/src/reactive.nim
index 167d6e9..4d83a92 100644
--- a/src/reactive.nim
+++ b/src/reactive.nim
@@ -164,7 +164,7 @@ proc newReactive*[T](x: T): Reactive[T] =
 proc rstr*(x: cstring): RString =
   result = RString(value: x)
 
-proc newRSeq*[T](len: int): RSeq[T] =
+proc newRSeq*[T](len: int = 0): RSeq[T] =
   result = RSeq[T](s: newSeq[T](len), L: newReactive[int](0))
 
 proc newRSeq*[T](data: seq[T]): RSeq[T] =
@@ -354,7 +354,7 @@ template vmap*(x: RSeq; elem, f: untyped): VNode =
   tmp
 
 template vmapIt*(x: RSeq; elem, call: untyped): VNode =
-  var it {.inject}: type(x[0])
+  var it {.inject.}: type(x[0])
   let tmp = buildHtml(elem):
     for i in 0..<len(x):
       it = x[i]

From c324793f62705f1e2e92c6da979da1934bbd57ca Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 6 Sep 2017 16:36:27 +0200
Subject: [PATCH 133/264] disable input text overwritings; needs further
 throughts

---
 src/karax.nim | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 0a630a6..aef2730 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -75,7 +75,7 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind;
     let action = action
     let n = n
     result = proc (ev: Event) =
-      if n.kind == VNodeKind.textarea or n.kind == VNodeKind.input:
+      if n.kind == VNodeKind.textarea or n.kind == VNodeKind.input or n.kind == VNodeKind.select:
         keyeventBody()
       else: action(ev, n)
 
@@ -370,10 +370,11 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
 
     if newNode.events.len != 0 or oldNode.events.len != 0:
       mergeEvents(newNode, oldNode, kxi)
-    if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
-      if oldNode.text != newNode.text:
-        oldNode.text = newNode.text
-        oldNode.dom.value = newNode.text
+    when false:
+      if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
+        if oldNode.text != newNode.text:
+          oldNode.text = newNode.text
+          oldNode.dom.value = newNode.text
 
     let newLength = newNode.len
     let oldLength = oldNode.len

From 79d0b21cb37e7a9e59ba176cca594398830ea549 Mon Sep 17 00:00:00 2001
From: konqoro <capoiosct@gmail.com>
Date: Sun, 17 Sep 2017 19:16:30 +0300
Subject: [PATCH 134/264] Fix ending .} of pragmas (#39)

---
 src/kajax.nim        | 2 +-
 src/kdom.nim         | 6 +++---
 src/localstorage.nim | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/kajax.nim b/src/kajax.nim
index 414b9d2..c226c50 100644
--- a/src/kajax.nim
+++ b/src/kajax.nim
@@ -23,7 +23,7 @@ proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
   proc statechange(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
   proc send(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
   proc open(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
-  proc newRequest(): HttpRequest {.importcpp: "new XMLHttpRequest(@)",}
+  proc newRequest(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
 
   var this {.importc: "this".}: ThisObj
   let ajax = newRequest()
diff --git a/src/kdom.nim b/src/kdom.nim
index 106666c..2c015a9 100644
--- a/src/kdom.nim
+++ b/src/kdom.nim
@@ -583,7 +583,7 @@ proc javaEnabled*(h: Navigator): bool
 # ClassList "methods"
 proc add*(c: ClassList, class: cstring)
 proc remove*(c: ClassList, class: cstring)
-proc contains*(c: ClassList, class: cstring):bool
+proc contains*(c: ClassList, class: cstring): bool
 proc toggle*(c: ClassList, class: cstring)
 
 # Style "methods"
@@ -644,9 +644,9 @@ type
 proc getBoundingClientRect*(e: Node): BoundingRect {.
   importcpp: "getBoundingClientRect", nodecl.}
 proc clientHeight*(): int {.
-  importcpp: "(window.innerHeight || document.documentElement.clientHeight)@", nodecl}
+  importcpp: "(window.innerHeight || document.documentElement.clientHeight)@", nodecl.}
 proc clientWidth*(): int {.
-  importcpp: "(window.innerWidth || document.documentElement.clientWidth)@", nodecl}
+  importcpp: "(window.innerWidth || document.documentElement.clientWidth)@", nodecl.}
 
 proc inViewport*(el: Node): bool =
   let rect = el.getBoundingClientRect()
diff --git a/src/localstorage.nim b/src/localstorage.nim
index 5744124..e2fb62e 100644
--- a/src/localstorage.nim
+++ b/src/localstorage.nim
@@ -2,9 +2,9 @@
 
 ## This module contains wrappers for the HTML 5 local storage.
 
-proc getItem*(key: cstring): cstring {.importc: "localStorage.getItem"}
-proc setItem*(key, value: cstring) {.importc: "localStorage.setItem"}
+proc getItem*(key: cstring): cstring {.importc: "localStorage.getItem".}
+proc setItem*(key, value: cstring) {.importc: "localStorage.setItem".}
 proc hasItem*(key: cstring): bool {.importcpp: "(localStorage.getItem(#) !== null)".}
-proc clear*() {.importc: "localStorage.clear"}
+proc clear*() {.importc: "localStorage.clear".}
 
 proc removeItem*(key: cstring) {.importc: "localStorage.removeItem".}

From 34e2b8b7b46648d8c4c83dbae1b44950b8d56b40 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 19 Sep 2017 16:20:33 +0200
Subject: [PATCH 135/264] added karax.runLater

---
 src/karax.nim | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/karax.nim b/src/karax.nim
index 13c52a2..5ebb7dc 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -539,3 +539,9 @@ proc loadScript*(jsfilename: cstring; kxi: KaraxInstance = kxi) =
   s.setAttr "src", jsfilename
   body.prepend(s)
   redraw(kxi)
+
+proc runLater*(action: proc(); later = 400): Timeout {.discardable.} =
+  proc wrapper() =
+    action()
+    redraw()
+  result = setTimeout(wrapper, later)

From 45951c96a4fe763f2e08ae34e2a7da74edabe049 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 22 Sep 2017 18:10:30 +0200
Subject: [PATCH 136/264] added an example of how to do menus and
 auto-completion with Karax

---
 experiments/menus.nim | 119 ++++++++++++++++++++++++++++++++++++++++++
 tools/karun.nim       |   6 ++-
 2 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 experiments/menus.nim

diff --git a/experiments/menus.nim b/experiments/menus.nim
new file mode 100644
index 0000000..450847b
--- /dev/null
+++ b/experiments/menus.nim
@@ -0,0 +1,119 @@
+## Example program that shows how to create menus with Karax.
+
+include karaxprelude
+import jstrutils, kdom
+
+var
+  candidates: seq[cstring] = @[]
+  selected: cstring
+  showCandidates: bool
+
+proc autocomplete(choices: seq[cstring]): VNode =
+  proc onkeyuplater(ev: Event; n: VNode) =
+    let v = n.value
+    if v.len > 0:
+      candidates.setLen 0
+      for c in choices:
+        if v in c: candidates.add(c)
+
+  let inp = buildHtml:
+    input(onkeyuplater = onkeyuplater,
+      #onblur = proc () = showCandidates = false,
+      onfocus = proc () = showCandidates = true)
+
+  proc select(t: cstring): proc() =
+    result = proc() =
+      selected = t
+      showCandidates = false
+      inp.text = t
+      inp.dom.value = t
+
+  result = buildHtml(tdiv):
+    inp
+    if showCandidates: # or true:
+      for candy in candidates:
+        tdiv(onclick = select(candy)):
+          text candy
+
+proc contentA(): VNode =
+  result = buildHtml(tdiv):
+    text "content A"
+
+proc contentB(): VNode =
+  result = buildHtml(tdiv):
+    text "content B"
+
+proc contentC(): VNode =
+  result = buildHtml(tdiv):
+    text "content C"
+    autocomplete(@[cstring"ActionScript",
+      "AppleScript",
+      "Asp",
+      "BASIC",
+      "C",
+      "C++",
+      "Clojure",
+      "COBOL",
+      "Erlang",
+      "Fortran",
+      "Groovy",
+      "Haskell",
+      "Java",
+      "JavaScript",
+      "Lisp",
+      "Nim",
+      "Perl",
+      "PHP",
+      "Python",
+      "Ruby",
+      "Scala",
+      "Scheme"])
+
+
+
+type
+  MenuItemHandler = proc(): VNode
+
+var content: MenuItemHandler = contentA
+
+proc menuAction(x: MenuItemHandler): proc() =
+  result = proc() = content = x
+
+proc buildMenu(): VNode =
+  result = buildHtml(tdiv):
+    nav(class="navbar is-primary"):
+      tdiv(class="navbar-brand"):
+        a(class="navbar-item", onclick = menuAction(contentA)):
+          strong:
+            text "My awesome menu"
+
+      tdiv(id="navMenuTransparentExample", class="navbar-menu"):
+        tdiv(class = "navbar-start"):
+          tdiv(class="navbar-item has-dropdown is-hoverable"):
+            a(class="navbar-link", onclick = menuAction(contentB)):
+              text "Masters"
+            tdiv(class="navbar-dropdown is-boxed"):
+              a(class="navbar-item", onclick = menuAction(contentC)):
+                text "Inventory"
+              a(class="navbar-item", onclick = menuAction(contentC)):
+                text "Product"
+              hr(class="navbar-divider"):
+                a(class="navbar-item", onclick = menuAction(contentC)):
+                  text "Product"
+
+        tdiv(class="navbar-item has-dropdown is-hoverable"):
+          a(class="navbar-link", onclick = menuAction(contentC)):
+            text "Transactions"
+          tdiv(class = "navbar-dropdown is-boxed", id="blogDropdown"):
+            a(class="navbar-item", onclick = menuAction(contentC)):
+              text "Purchase Bill"
+            a(class="navbar-item", onclick = menuAction(contentC)):
+              text "Purchase Return"
+            a(class="navbar-item", onclick = menuAction(contentC)):
+              text "Sale Bill"
+            hr(class="navbar-divider"):
+              a(class="navbar-item", onclick = menuAction(contentC)):
+                text "Stock Adjustment"
+    content()
+
+setRenderer buildMenu
diff --git a/tools/karun.nim b/tools/karun.nim
index a67b9f5..320802f 100644
--- a/tools/karun.nim
+++ b/tools/karun.nim
@@ -7,7 +7,11 @@ const
   html = """
 <!DOCTYPE html>
 <html>
-<head><title>$1</title></head>
+<head>
+  <title>$1</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
 <body id="body">
 <div id="ROOT" />
 <script type="text/javascript" src="$1.js"></script>

From 312eb5180a5a8aee4e0ca79fc311c964d397a504 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 2 Oct 2017 13:52:49 +0200
Subject: [PATCH 137/264] added getVNodeById() for easier form handling

---
 src/karax.nim | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/karax.nim b/src/karax.nim
index 737f3ef..a1597a3 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -38,6 +38,7 @@ type
     runCount: int
     components: seq[ComponentPair]
     surpressRedraws*: bool
+    byId: JDict[cstring, VNode]
     when defined(stats):
       recursion: int
 
@@ -112,12 +113,19 @@ template detach(n: VNode) =
 
 template attach(n: VNode) =
   n.dom = result
+  if n.id != nil: kxi.byId[n.id] = n
 
 proc applyEvents(n: VNode; kxi: KaraxInstance) =
   let dest = n.dom
   for i in 0..<len(n.events):
     n.events[i][2] = wrapEvent(dest, n, n.events[i][0], n.events[i][1])
 
+proc getVNodeById*(id: cstring; kxi: KaraxInstance = kxi): VNode =
+  ## Get the VNode that was marked with ``id``. Returns ``nil``
+  ## if no node exists.
+  if kxi.byId.contains(id):
+    result = kxi.byId[id]
+
 proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
@@ -331,6 +339,7 @@ proc applyPatch(kxi: KaraxInstance) =
       p.parent.insertBefore(nn, p.current)
     of pkDetach:
       let n = p.n
+      if n.id != nil: kxi.byId.del(n.id)
       if n.kind == VNodeKind.component:
         let x = VComponent(n)
         if x.onDetachImpl != nil: x.onDetachImpl(x)
@@ -615,7 +624,9 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
                          postRenderCallback: clientPostRenderCallback,
                          patches: newSeq[Patch](60),
                          patchesV: newSeq[PatchV](30),
-                         components: @[])
+                         components: @[],
+                         surpressRedraws: false,
+                         byId: newJDict[cstring, VNode]())
   kxi = result
   window.onload = init
 
@@ -627,7 +638,8 @@ proc setInitializer*(renderer: proc (): VNode, root: cstring = "ROOT",
                         patches: newSeq[Patch](60),
                         patchesV: newSeq[PatchV](30),
                         components: @[],
-                        surpressRedraws: true)
+                        surpressRedraws: true,
+                        byId: newJDict[cstring, VNode]())
   kxi = result
   window.onload = init
 
@@ -694,3 +706,8 @@ proc runLater*(action: proc(); later = 400): Timeout {.discardable.} =
     action()
     redraw()
   result = setTimeout(wrapper, later)
+
+proc setInputText*(n: VNode; s: cstring) =
+  ## Sets the text of input elements.
+  n.text = s
+  if n.dom != nil: n.dom.value = s

From 57a6fca9d13ce8ea85a54fe5d7e8d1b62a3d65d9 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 2 Oct 2017 13:53:53 +0200
Subject: [PATCH 138/264] implement a autocomplete widget (work in progress)

---
 experiments/menus.nim |  54 --------------
 src/autocomplete.nim  | 160 ++++++++++++++++++++++++++++++++++++++++++
 src/jstrutils.nim     |   4 ++
 3 files changed, 164 insertions(+), 54 deletions(-)
 create mode 100644 src/autocomplete.nim

diff --git a/experiments/menus.nim b/experiments/menus.nim
index 450847b..3f79d83 100644
--- a/experiments/menus.nim
+++ b/experiments/menus.nim
@@ -3,38 +3,6 @@
 include karaxprelude
 import jstrutils, kdom
 
-var
-  candidates: seq[cstring] = @[]
-  selected: cstring
-  showCandidates: bool
-
-proc autocomplete(choices: seq[cstring]): VNode =
-  proc onkeyuplater(ev: Event; n: VNode) =
-    let v = n.value
-    if v.len > 0:
-      candidates.setLen 0
-      for c in choices:
-        if v in c: candidates.add(c)
-
-  let inp = buildHtml:
-    input(onkeyuplater = onkeyuplater,
-      #onblur = proc () = showCandidates = false,
-      onfocus = proc () = showCandidates = true)
-
-  proc select(t: cstring): proc() =
-    result = proc() =
-      selected = t
-      showCandidates = false
-      inp.text = t
-      inp.dom.value = t
-
-  result = buildHtml(tdiv):
-    inp
-    if showCandidates: # or true:
-      for candy in candidates:
-        tdiv(onclick = select(candy)):
-          text candy
-
 proc contentA(): VNode =
   result = buildHtml(tdiv):
     text "content A"
@@ -46,28 +14,6 @@ proc contentB(): VNode =
 proc contentC(): VNode =
   result = buildHtml(tdiv):
     text "content C"
-    autocomplete(@[cstring"ActionScript",
-      "AppleScript",
-      "Asp",
-      "BASIC",
-      "C",
-      "C++",
-      "Clojure",
-      "COBOL",
-      "Erlang",
-      "Fortran",
-      "Groovy",
-      "Haskell",
-      "Java",
-      "JavaScript",
-      "Lisp",
-      "Nim",
-      "Perl",
-      "PHP",
-      "Python",
-      "Ruby",
-      "Scala",
-      "Scheme"])
 
 
 
diff --git a/src/autocomplete.nim b/src/autocomplete.nim
new file mode 100644
index 0000000..210ed4a
--- /dev/null
+++ b/src/autocomplete.nim
@@ -0,0 +1,160 @@
+
+import karax, karaxdsl, vdom, kdom, jstrutils
+
+type
+  AutocompleteState* = ref object
+    choices, candidates: seq[cstring]
+    selected, maxMatches: int
+    showCandidates, controlPressed: bool
+
+proc newAutocomplete*(choices: seq[cstring]; maxMatches = 5): AutocompleteState =
+  ## Creates a new state for the autocomplete widget. ``maxMatches`` is the maximum
+  ## number of elements to show.
+  AutocompleteState(choices: choices, candidates: @[],
+    selected: -1, maxMatches: maxMatches, showCandidates: false,
+    controlPressed: false)
+
+proc autocomplete*(s: AutocompleteState; onselection: proc(s: cstring)): VNode =
+  var inp: VNode
+
+  proc commit(ev: Event) =
+    s.showCandidates = false
+    onselection(inp.dom.value)
+    when false:
+      if inp.dom != nil:
+        echo "setting to A ", inp.dom.value.isNil
+        result.text = inp.dom.value
+      else:
+        echo "setting to B ", inp.text.isNil
+        result.text = inp.text
+      for e in result.events:
+        if e[0] == EventKind.onchange:
+          e[1](ev, result)
+
+  proc onkeyuplater(ev: Event; n: VNode) =
+    if not s.controlPressed:
+      let v = n.value
+      s.candidates.setLen 0
+      for c in s.choices:
+        if v.len == 0 or c.containsIgnoreCase(v): s.candidates.add(c)
+
+  proc onkeydown(ev: Event; n: VNode) =
+    const
+      LEFT = 37
+      UP = 38
+      RIGHT = 39
+      DOWN = 40
+      TAB = 9
+      ESC = 27
+      ENTER = 13
+    # UP: Move focus to the previous item. If on first item, move focus to the input.
+    #     If on the input, move focus to last item.
+    # DOWN: Move focus to the next item. If on last item, move focus to the input.
+    #       If on the input, move focus to the first item.
+    # ESCAPE: Close the menu.
+    # ENTER: Select the currently focused item and close the menu.
+    # TAB: Select the currently focused item, close the menu, and
+    #      move focus to the next focusable element
+    s.controlPressed = false
+    case ev.keyCode
+    of UP:
+      s.controlPressed = true
+      s.showCandidates = true
+      if s.selected > 0:
+        dec s.selected
+        n.setInputText s.candidates[s.selected]
+    of DOWN:
+      s.controlPressed = true
+      s.showCandidates = true
+      if s.selected < s.candidates.len - 1:
+        inc s.selected
+        n.setInputText s.candidates[s.selected]
+    of ESC:
+      s.showCandidates = false
+      s.controlPressed = true
+    of ENTER:
+      s.controlPressed = true
+#      inp.setInputText s.choices[i]
+      commit(ev)
+    else:
+      discard
+
+  proc window(s: AutocompleteState): (int, int) =
+    var first, last: int
+    if s.selected >= 0:
+      first = s.selected - (s.maxMatches div 2)
+      last = s.selected + (s.maxMatches div 2)
+      if first < 0: first = 0
+      # too few because we had to trim first?
+      if (last - first + 1) < s.maxMatches: last = first + s.maxMatches - 1
+    else:
+      first = 0
+      last = s.maxMatches - 1
+    if last > high(s.candidates): last = high(s.candidates)
+    # still too few because we're at the end?
+    if (last - first + 1) < s.maxMatches:
+      first = last - s.maxMatches + 1
+      if first < 0: first = 0
+
+    result = (first, last)
+
+  inp = buildHtml:
+    input(onkeyuplater = onkeyuplater,
+      onkeydown = onkeydown,
+      # onblur = proc (ev: Event; n: VNode) = commit(ev),
+      onfocus = proc (ev: Event; n: VNode) =
+        onkeyuplater(ev, n)
+        s.showCandidates = true)
+
+  proc select(i: int): proc(ev: Event; n: VNode) =
+    result = proc(ev: Event; n: VNode) =
+      s.selected = i
+      s.showCandidates = false
+      inp.setInputText s.choices[i]
+      commit(ev)
+
+  result = buildHtml(table):
+    tr:
+      td:
+        inp
+    if s.showCandidates:
+      let (first, last) = window(s)
+      for i in first..last:
+        tr:
+          td(onclick = select(i), class = cstring"button " &
+              (if i == s.selected: cstring"is-primary" else: "")):
+            text s.candidates[i]
+
+when isMainModule:
+  const suggestions = @[cstring"ActionScript",
+    "AppleScript",
+    "Asp",
+    "BASIC",
+    "C",
+    "C++",
+    "Clojure",
+    "COBOL",
+    "Erlang",
+    "Fortran",
+    "Groovy",
+    "Haskell",
+    "Java",
+    "JavaScript",
+    "Lisp",
+    "Nim",
+    "Perl",
+    "PHP",
+    "Python",
+    "Ruby",
+    "Scala",
+    "Scheme"]
+
+  var s = newAutocomplete(suggestions)
+
+  proc main(): VNode =
+    result = buildHtml(tdiv):
+      autocomplete(s, proc (s: cstring) = echo "now ", s)#:
+      #  proc onchange(ev: Event; n: VNode) =
+      #    echo "now selected ", n.kind
+
+  setRenderer(main)
diff --git a/src/jstrutils.nim b/src/jstrutils.nim
index 507e7a6..a6f2cc9 100644
--- a/src/jstrutils.nim
+++ b/src/jstrutils.nim
@@ -6,6 +6,10 @@ proc split*(s, sep: cstring; max: int): seq[cstring] {.importcpp, nodecl.}
 
 proc startsWith*(a, b: cstring): bool {.importcpp: "startsWith", nodecl.}
 proc contains*(a, b: cstring): bool {.importcpp: "(#.indexOf(#)>=0)", nodecl.}
+
+proc containsIgnoreCase*(a, b: cstring): bool {.
+  importcpp: """(#.search(new RegExp(#.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$$\|]/g, "\\$$&") , "i"))>=0)""", nodecl.}
+
 proc substr*(s: cstring; start: int): cstring {.importcpp: "substr", nodecl.}
 proc substr*(s: cstring; start, length: int): cstring {.importcpp: "substr", nodecl.}
 

From bb1732c834454838dab0747389d162e7230c2eac Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 2 Oct 2017 16:00:30 +0200
Subject: [PATCH 139/264] make tests green again

---
 tests/difftest.nim | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/difftest.nim b/tests/difftest.nim
index cfdd9b4..604384d 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -165,7 +165,8 @@ proc testWildInsert() =
   let b = createEntries(entries)
   doDiff(a, b, "pkInsertBefore button 7", "pkAppend div 5")
 
-kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard)
+kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard,
+                    byId: newJDict[cstring, VNode]())
 
 testAppend()
 testInsert()

From 8e8ada7cd206b7cda7462389bd038e6613765bd6 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 2 Oct 2017 22:54:25 +0200
Subject: [PATCH 140/264] move karax source code from 'src' to 'karax'; make
 karaxdsl work with native Nim; added jjson and jwebsockets modules

---
 examples/carousel/carousel.nims           |   2 +-
 examples/mediaplayer/mediaplayer.nim      |   2 +-
 examples/mediaplayer/playerapp.nim        |   2 +-
 examples/mediaplayer/playerapp.nims       |   2 +-
 examples/scrollapp/scrollapp.nim          |   4 +-
 examples/scrollapp/scrollapp.nims         |   2 +-
 examples/todoapp/todoapp.nim              |   2 +-
 examples/todoapp/todoapp.nims             |   2 +-
 karax.nimble                              |   5 +-
 {src => karax}/autocomplete.nim           |   0
 karax/compact.nim                         | 130 +++++++++++++++++++
 {src => karax}/i18n.nim                   |   0
 {src => karax}/jdict.nim                  |   0
 karax/jjson.nim                           |  33 +++++
 {src => karax}/jstrutils.nim              |   0
 karax/jwebsockets.nim                     |  13 ++
 {src => karax}/kajax.nim                  |   0
 {src => karax}/karax.nim                  |   7 +-
 {src => karax}/karaxdsl.nim               |  14 +-
 karax/kbase.nim                           |   8 ++
 {src => karax}/kdom.nim                   |   0
 {src => karax}/languages.nim              |   0
 {src => karax}/localstorage.nim           |   0
 src/karaxprelude.nim => karax/prelude.nim |   0
 {src => karax}/reactive.nim               |   0
 {src => karax}/shash.nim                  |   0
 {src => karax}/vdom.nim                   | 149 ++++++++++++++++++----
 {src => karax}/vstyles.nim                |  83 +++++++-----
 src/compact.nim                           | 121 ------------------
 tests/compiler_tests.nim                  |   2 +-
 tests/difftest.nim                        |   4 +-
 tests/nativehtmlgen.nim                   |  20 +++
 tests/nim.cfg                             |   2 +-
 tests/tester.nim                          |   1 +
 34 files changed, 407 insertions(+), 203 deletions(-)
 rename {src => karax}/autocomplete.nim (100%)
 create mode 100644 karax/compact.nim
 rename {src => karax}/i18n.nim (100%)
 rename {src => karax}/jdict.nim (100%)
 create mode 100644 karax/jjson.nim
 rename {src => karax}/jstrutils.nim (100%)
 create mode 100644 karax/jwebsockets.nim
 rename {src => karax}/kajax.nim (100%)
 rename {src => karax}/karax.nim (98%)
 rename {src => karax}/karaxdsl.nim (94%)
 create mode 100644 karax/kbase.nim
 rename {src => karax}/kdom.nim (100%)
 rename {src => karax}/languages.nim (100%)
 rename {src => karax}/localstorage.nim (100%)
 rename src/karaxprelude.nim => karax/prelude.nim (100%)
 rename {src => karax}/reactive.nim (100%)
 rename {src => karax}/shash.nim (100%)
 rename {src => karax}/vdom.nim (72%)
 rename {src => karax}/vstyles.nim (76%)
 delete mode 100644 src/compact.nim
 create mode 100644 tests/nativehtmlgen.nim

diff --git a/examples/carousel/carousel.nims b/examples/carousel/carousel.nims
index 1451fc0..cef2dec 100644
--- a/examples/carousel/carousel.nims
+++ b/examples/carousel/carousel.nims
@@ -1 +1 @@
---path: "../../src"
+--path: "../../karax"
diff --git a/examples/mediaplayer/mediaplayer.nim b/examples/mediaplayer/mediaplayer.nim
index 7bc9c65..c84b68b 100644
--- a/examples/mediaplayer/mediaplayer.nim
+++ b/examples/mediaplayer/mediaplayer.nim
@@ -1,5 +1,5 @@
 
-import karax, karaxdsl, vdom, kdom, compact
+import karax / [karax, karaxdsl, vdom, kdom, compact]
 
 const
   Play = 0
diff --git a/examples/mediaplayer/playerapp.nim b/examples/mediaplayer/playerapp.nim
index e611eec..acb2e68 100644
--- a/examples/mediaplayer/playerapp.nim
+++ b/examples/mediaplayer/playerapp.nim
@@ -1,6 +1,6 @@
 ## Example app that shows how to write and embed a custom component.
 
-include karaxprelude
+include karax/prelude
 import mediaplayer
 
 const url = "https://www.w3schools.com/html/mov_bbb.mp4"
diff --git a/examples/mediaplayer/playerapp.nims b/examples/mediaplayer/playerapp.nims
index 9028ff1..cf2eb9e 100644
--- a/examples/mediaplayer/playerapp.nims
+++ b/examples/mediaplayer/playerapp.nims
@@ -1 +1 @@
---path: "../../src"
+--path: "../.."
diff --git a/examples/scrollapp/scrollapp.nim b/examples/scrollapp/scrollapp.nim
index 8ead611..4490447 100644
--- a/examples/scrollapp/scrollapp.nim
+++ b/examples/scrollapp/scrollapp.nim
@@ -1,7 +1,7 @@
 ## Example that shows how to accomplish an "infinitely scrolling" app.
 
-include karaxprelude
-import jstrutils, kdom, vstyles
+include karax/prelude
+import karax / [jstrutils, kdom, vstyles]
 
 var entries: seq[cstring] = @[]
 for i in 1..500:
diff --git a/examples/scrollapp/scrollapp.nims b/examples/scrollapp/scrollapp.nims
index 9028ff1..cf2eb9e 100644
--- a/examples/scrollapp/scrollapp.nims
+++ b/examples/scrollapp/scrollapp.nims
@@ -1 +1 @@
---path: "../../src"
+--path: "../.."
diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 47ddeae..99f70ea 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -1,5 +1,5 @@
 
-import vdom, karax, karaxdsl, jstrutils, compact, localstorage
+import karax / [vdom, karax, karaxdsl, jstrutils, compact, localstorage]
 
 type
   Filter = enum
diff --git a/examples/todoapp/todoapp.nims b/examples/todoapp/todoapp.nims
index 9028ff1..cf2eb9e 100644
--- a/examples/todoapp/todoapp.nims
+++ b/examples/todoapp/todoapp.nims
@@ -1 +1 @@
---path: "../../src"
+--path: "../.."
diff --git a/karax.nimble b/karax.nimble
index 103da81..65e9d1f 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,13 +1,12 @@
 # Package
 
-version       = "0.1.0"
+version       = "0.2.0"
 author        = "Xored Software, Inc."
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"
-srcDir        = "src"
 
 # Dependencies
 
 requires "nim >= 0.16.1"
 
-skipDirs = @["examples/todoapp"]
\ No newline at end of file
+skipDirs = @["examples"]
diff --git a/src/autocomplete.nim b/karax/autocomplete.nim
similarity index 100%
rename from src/autocomplete.nim
rename to karax/autocomplete.nim
diff --git a/karax/compact.nim b/karax/compact.nim
new file mode 100644
index 0000000..f5f21a8
--- /dev/null
+++ b/karax/compact.nim
@@ -0,0 +1,130 @@
+## Components in Karax are built by the ``.component`` macro annotation.
+
+when defined(js):
+  import jdict, kdom
+
+import macros, vdom, tables, strutils, kbase
+
+when defined(js):
+  var
+    vcomponents* = newJDict[cstring, proc(args: seq[VNode]): VNode]()
+    dcomponents* = newJDict[cstring, proc(args: seq[VNode]): Node]()
+else:
+  var
+    vcomponents* = newTable[kstring, proc(args: seq[VNode]): VNode]()
+    dcomponents* = newTable[kstring, proc(args: seq[VNode]): Node]()
+
+type
+  ComponentKind* {.pure.} = enum
+    None,
+    Tag,
+    VNode,
+    Node
+
+var
+  allcomponents {.compileTime.} = initTable[string, ComponentKind]()
+
+proc isComponent*(x: string): ComponentKind {.compileTime.} =
+  allcomponents.getOrDefault(x)
+
+proc addTags() {.compileTime.} =
+  let x = (bindSym"VNodeKind").getTypeImpl
+  expectKind(x, nnkEnumTy)
+  for i in ord(VNodeKind.html)..ord(VNodeKind.high):
+    # +1 because of empty node at the start of the enum AST:
+    let tag = $x[i+1]
+    allcomponents[tag] = ComponentKind.Tag
+
+static:
+  addTags()
+
+proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
+  #let t = symbolicType.getTypeImpl
+  let t = repr(symbolicType)
+  case t
+  of "cstring":
+    result = quote do:
+      args[`index`].text
+  of "int", "VKey":
+    result = quote do:
+      args[`index`].intValue
+  of "bool":
+    result = quote do:
+      args[`index`].intValue != 0
+  elif t.endsWith"Kind":
+    result = quote do:
+      `symbolicType`(args[`index`].intValue)
+  else:
+    # just pass it along, maybe there is some conversion for it:
+    result = quote do:
+      args[`index`]
+
+proc newname*(n: NimNode): NimNode =
+  if n.kind == nnkPostfix:
+    n[1] = newname(n[1])
+    result = n
+  elif n.kind == nnkSym:
+    result = ident($n.symbol)
+  else:
+    result = n
+
+when defined(js):
+  macro compact*(prc: untyped): untyped =
+    ## A 'compact' tree generation proc is one that only depends on its
+    ## inputs and should be stored as a compact virtual DOM tree and
+    ## only expanded on demand (when its inputs changed).
+    var n = prc.copyNimNode
+    for i in 0..6: n.add prc[i].copyNimTree
+    expectKind(n, nnkProcDef)
+    if n[0].kind == nnkEmpty:
+      error("please pass a non anonymous proc", n[0])
+    let name = n[0]
+    let params = params(n)
+    let rettype = repr params[0]
+    var isvirtual = ComponentKind.None
+    if rettype == "VNode":
+      isvirtual = ComponentKind.VNode
+    elif rettype == "Node":
+      isvirtual = ComponentKind.Node
+    else:
+      error "component must return VNode or Node", params[0]
+    let realName = if name.kind == nnkPostfix: name[1] else: name
+    let nn = $realName
+    n[0] = ident("inner" & nn)
+    var unpackCall = newCall(n[0])
+    var counter = 0
+    for i in 1.. <params.len:
+      let param = params[i]
+      let L = param.len
+      let typ = param[L-2]
+      for j in 0 .. L-3:
+        unpackCall.add unpack(typ, counter)
+        inc counter
+
+    template vwrapper(pname, unpackCall) {.dirty.} =
+      proc pname(args: seq[VNode]): VNode =
+        unpackCall
+
+    template dwrapper(pname, unpackCall) {.dirty.} =
+      proc pname(args: seq[VNode]): Node =
+        unpackCall
+
+    template vregister(key, val) =
+      bind jdict.`[]=`
+      `[]=`(vcomponents, kstring(key), val)
+
+    template dregister(key, val) =
+      bind jdict.`[]=`
+      `[]=`(dcomponents, kstring(key), val)
+
+    result = newTree(nnkStmtList, n)
+
+    if isvirtual == ComponentKind.VNode:
+      result.add getAst(vwrapper(newname name, unpackCall))
+      result.add getAst(vregister(newLit(nn), realName))
+    else:
+      result.add getAst(dwrapper(newname name, unpackCall))
+      result.add getAst(dregister(newLit(nn), realName))
+    allcomponents[nn] = isvirtual
+    when defined(debugKaraxDsl):
+      echo repr result
diff --git a/src/i18n.nim b/karax/i18n.nim
similarity index 100%
rename from src/i18n.nim
rename to karax/i18n.nim
diff --git a/src/jdict.nim b/karax/jdict.nim
similarity index 100%
rename from src/jdict.nim
rename to karax/jdict.nim
diff --git a/karax/jjson.nim b/karax/jjson.nim
new file mode 100644
index 0000000..88580f9
--- /dev/null
+++ b/karax/jjson.nim
@@ -0,0 +1,33 @@
+## This module implements some small zero-overhead 'JsonNode' type
+## and helper that maps directly to JavaScript objects.
+
+type
+  JsonNode* {.importc.} = ref object
+
+proc `[]`*(obj: JsonNode; fieldname: cstring): JsonNode {.importcpp: "#[#]".}
+proc `[]`*(obj: JsonNode; index: int): JsonNode {.importcpp: "#[#]".}
+proc `[]=`*[T](obj: JsonNode; fieldname: cstring; value: T)
+  {.importcpp: "#[#] = #".}
+proc length(x: JsonNode): int {.importcpp: "#.length".}
+proc len*(x: JsonNode): int = (if x.isNil: 0 else: x.length)
+
+proc newJsonNode*(fields: varargs[(cstring, JsonNode)]): JsonNode =
+  result = JsonNode()
+  for f in fields:
+    result[f[0]] = f[1]
+
+proc newJObject*(): JsonNode =
+  result = JsonNode()
+
+proc newJNull*(): JsonNode = nil
+
+template `%`*(x: typed): JsonNode = cast[JsonNode](x)
+
+proc getNum*(x: JsonNode): int {.importcpp: "#".}
+
+proc getInt*(x: JsonNode): int {.importcpp: "#".}
+proc getStr*(x: JsonNode): cstring {.importcpp: "#".}
+proc getFNum*(x: JsonNode): cstring {.importcpp: "#".}
+
+iterator items*(x: JsonNode): JsonNode =
+  for i in 0..<len(x): yield x[i]
diff --git a/src/jstrutils.nim b/karax/jstrutils.nim
similarity index 100%
rename from src/jstrutils.nim
rename to karax/jstrutils.nim
diff --git a/karax/jwebsockets.nim b/karax/jwebsockets.nim
new file mode 100644
index 0000000..c662ad1
--- /dev/null
+++ b/karax/jwebsockets.nim
@@ -0,0 +1,13 @@
+## Websockets support for the JSON backend.
+
+type
+  MessageEvent* {.importc.} = ref object
+    data*: cstring
+
+  WebSocket* {.importc.} = ref object
+    onmessage*: proc (e: MessageEvent)
+
+proc newWebSocket*(url, key: cstring): WebSocket
+  {.importcpp: "new WebSocket(@)".}
+
+proc send*(w: WebSocket; data: cstring) {.importcpp.}
diff --git a/src/kajax.nim b/karax/kajax.nim
similarity index 100%
rename from src/kajax.nim
rename to karax/kajax.nim
diff --git a/src/karax.nim b/karax/karax.nim
similarity index 98%
rename from src/karax.nim
rename to karax/karax.nim
index a1597a3..d0ed73d 100644
--- a/src/karax.nim
+++ b/karax/karax.nim
@@ -143,7 +143,6 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
     return result
   elif n.kind == VNodeKind.component:
     let x = VComponent(n)
-    if x.realDomImpl != nil: return x.realDomImpl(x)
     if x.onAttachImpl != nil: x.onAttachImpl(x)
     assert x.renderImpl != nil
     if x.expanded == nil:
@@ -479,11 +478,7 @@ proc applyComponents(kxi: KaraxInstance) =
     let newNode = kxi.components[i].newNode
     when defined(karaxDebug):
       echo "Processing component ", newNode.text, " changed impl set ", x.changedImpl != nil
-    if x.realDomImpl != nil:
-      let current = kxi.components[i].current
-      let parent = kxi.components[i].parent
-      kxi.addPatch(pkReplace, parent, current, x)
-    elif x.changedImpl != nil and x.changedImpl(x, newNode):
+    if x.changedImpl != nil and x.changedImpl(x, newNode):
       when defined(karaxDebug):
         echo "Component ", newNode.text, " did change"
       let current = kxi.components[i].current
diff --git a/src/karaxdsl.nim b/karax/karaxdsl.nim
similarity index 94%
rename from src/karaxdsl.nim
rename to karax/karaxdsl.nim
index dd480e1..b9c6a56 100644
--- a/src/karaxdsl.nim
+++ b/karax/karaxdsl.nim
@@ -1,7 +1,10 @@
 
-import macros, karax, vdom, compact
+import macros, vdom, compact
 from strutils import startsWith, toLowerAscii
 
+when defined(js):
+  import karax
+
 const
   StmtContext = ["kout", "inc", "echo", "dec", "!"]
   SpecialAttrs = ["id", "class", "value", "index", "style"]
@@ -32,6 +35,11 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
   # (except for the last child of the macros we consider here),
   # lets, consts, types can be considered as expressions
   # case is complex, calls are assumed to produce a value.
+  when defined(js):
+    template evHandler(): untyped = bindSym"addEventHandler"
+  else:
+    template evHandler(): untyped = ident"addEventHandler"
+
   case n.kind
   of nnkLiterals, nnkIdent, nnkSym, nnkDotExpr, nnkBracketExpr:
     if tmpContext != nil:
@@ -68,7 +76,7 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
       if tmpContext == nil:
         error "no VNode to attach the event handler to"
       else:
-        result = newCall(bindSym"addEventHandler", tmpContext,
+        result = newCall(evHandler(), tmpContext,
                          newDotExpr(bindSym"EventKind", n[0]), anon, ident("kxi"))
     else:
       result = n
@@ -94,7 +102,7 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
         if x.kind == nnkExprEqExpr:
           let key = getName x[0]
           if key.startsWith("on"):
-            result.add newCall(bindSym"addEventHandler",
+            result.add newCall(evHandler(),
               tmp, newDotExpr(bindSym"EventKind", x[0]), x[1], ident("kxi"))
           elif key in SpecialAttrs:
             result.add newDotAsgn(tmp, key, x[1])
diff --git a/karax/kbase.nim b/karax/kbase.nim
new file mode 100644
index 0000000..1a0cb93
--- /dev/null
+++ b/karax/kbase.nim
@@ -0,0 +1,8 @@
+## Karax -- Single page applications for Nim.
+
+## Basic type definitions for Karax.
+when defined(js):
+  type kstring* = cstring
+else:
+  type kstring* = string
+
diff --git a/src/kdom.nim b/karax/kdom.nim
similarity index 100%
rename from src/kdom.nim
rename to karax/kdom.nim
diff --git a/src/languages.nim b/karax/languages.nim
similarity index 100%
rename from src/languages.nim
rename to karax/languages.nim
diff --git a/src/localstorage.nim b/karax/localstorage.nim
similarity index 100%
rename from src/localstorage.nim
rename to karax/localstorage.nim
diff --git a/src/karaxprelude.nim b/karax/prelude.nim
similarity index 100%
rename from src/karaxprelude.nim
rename to karax/prelude.nim
diff --git a/src/reactive.nim b/karax/reactive.nim
similarity index 100%
rename from src/reactive.nim
rename to karax/reactive.nim
diff --git a/src/shash.nim b/karax/shash.nim
similarity index 100%
rename from src/shash.nim
rename to karax/shash.nim
diff --git a/src/vdom.nim b/karax/vdom.nim
similarity index 72%
rename from src/vdom.nim
rename to karax/vdom.nim
index c438e3c..91f4116 100644
--- a/src/vdom.nim
+++ b/karax/vdom.nim
@@ -1,7 +1,13 @@
 ## Virtual DOM implementation for Karax.
 
-from kdom import Event, Node
-import shash, macros, vstyles
+when defined(js):
+  from kdom import Event, Node
+else:
+  type
+    Event* = ref object
+    Node* = ref object
+
+import macros, vstyles, kbase
 from strutils import toUpperAscii
 
 type
@@ -88,15 +94,15 @@ macro buildLookupTables(): untyped =
   for i in low(VNodeKind)..high(VNodeKind):
     let x = $i
     let y = if x[0] == '#': x else: toUpperAscii(x)
-    a.add(newCall("cstring", newLit(y)))
+    a.add(newCall("kstring", newLit(y)))
   var e = newTree(nnkBracket)
   for i in low(EventKind)..high(EventKind):
-    e.add(newCall("cstring", newLit(substr($i, 2))))
+    e.add(newCall("kstring", newLit(substr($i, 2))))
 
   template tmpl(a, e) {.dirty.} =
     const
-      toTag*: array[VNodeKind, cstring] = a
-      toEventName*: array[EventKind, cstring] = e
+      toTag*: array[VNodeKind, kstring] = a
+      toEventName*: array[EventKind, kstring] = e
 
   result = getAst tmpl(a, e)
 
@@ -108,15 +114,15 @@ type
 
   EventHandlers* = seq[(EventKind, EventHandler, NativeEventHandler)]
 
-  VKey* = cstring
+  VKey* = kstring
 
   VNode* = ref object of RootObj
     kind*: VNodeKind
     index*: int ## a generally useful 'index'
-    id*, class*, text*: cstring
+    id*, class*, text*: kstring
     kids: seq[VNode]
     # even index: key, odd index: value; done this way for memory efficiency:
-    attrs: seq[cstring]
+    attrs: seq[kstring]
     events*: EventHandlers
     when false:
       hash*: Hash
@@ -133,7 +139,6 @@ type
     updatedImpl*: proc(self, newInstance: VComponent)
     onAttachImpl*: proc(self: VComponent)
     onDetachImpl*: proc(self: VComponent)
-    realDomImpl*: proc(self: VComponent): kdom.Node
     version*: int         ## Update this to trigger a redraw by karax. Usually you
                           ## should call 'markDirty' instead which is an alias for
                           ## 'inc version'.
@@ -143,22 +148,22 @@ type
                           ## expanded to.
     debugId*: int
 
-proc value*(n: VNode): cstring = n.text
-proc `value=`*(n: VNode; v: cstring) = n.text = v
+proc value*(n: VNode): kstring = n.text
+proc `value=`*(n: VNode; v: kstring) = n.text = v
 
 proc intValue*(n: VNode): int = n.index
 proc vn*(i: int): VNode = VNode(kind: VNodeKind.int, index: i)
 proc vn*(b: bool): VNode = VNode(kind: VNodeKind.int, index: ord(b))
-proc vn*(x: cstring): VNode = VNode(kind: VNodeKind.text, index: -1, text: x)
+proc vn*(x: kstring): VNode = VNode(kind: VNodeKind.text, index: -1, text: x)
 
 template callThunk*(fn: typed; n: VNode): untyped =
   ## for internal usage only.
   fn(n.kids)
 
-proc vthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
+proc vthunk*(name: kstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.vthunk, text: name, index: -1, kids: @args)
 
-proc dthunk*(name: cstring; args: varargs[VNode, vn]): VNode =
+proc dthunk*(name: kstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.dthunk, text: name, index: -1, kids: @args)
 
 proc setEventIfNoConflict(v: VNode; kind: EventKind; handler: EventHandler) =
@@ -193,7 +198,7 @@ template newComponent*[T](t: typeDesc[T];
                  updated: proc(self, newInstance: VComponent) = defaultUpdatedImpl): T =
   ## Use this template to create new components.
   T(kind: VNodeKind.component, index: -1,
-    text: cstring(astToStr(t)), renderImpl: render,
+    text: kstring(astToStr(t)), renderImpl: render,
     changedImpl: changed, updatedImpl: updated,
     onAttachImpl: onAttach, onDetachImpl: onDetach,
     debugId: getDebugId())
@@ -202,7 +207,7 @@ template markDirty*(c: VComponent) =
   ## mark the component as dirty so that it is re-rendered.
   inc c.version
 
-proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
+proc setAttr*(n: VNode; key: kstring; val: kstring = "") =
   if n.attrs.isNil:
     n.attrs = @[key, val]
   else:
@@ -213,7 +218,7 @@ proc setAttr*(n: VNode; key: cstring; val: cstring = "") =
     n.attrs.add key
     n.attrs.add val
 
-proc getAttr*(n: VNode; key: cstring): cstring =
+proc getAttr*(n: VNode; key: kstring): kstring =
   for i in countup(0, n.attrs.len-2, 2):
     if n.attrs[i] == key: return n.attrs[i+1]
 
@@ -237,7 +242,12 @@ proc takeOverFields*(newNode, oldNode: VNode) =
 proc len*(x: VNode): int = x.kids.len
 proc `[]`*(x: VNode; idx: int): VNode = x.kids[idx]
 proc `[]=`*(x: VNode; idx: int; y: VNode) = x.kids[idx] = y
-proc add*(parent, kid: VNode) = parent.kids.add kid
+
+proc add*(parent, kid: VNode) =
+  when not defined(js) and not defined(nimNoNil):
+    if parent.kids.isNil: parent.kids = @[]
+  parent.kids.add kid
+
 proc delete*(parent: VNode; position: int) =
   parent.kids.delete(position)
 proc insert*(parent, kid: VNode; position: int) =
@@ -248,18 +258,19 @@ proc tree*(kind: VNodeKind; kids: varargs[VNode]): VNode =
   result = newVNode(kind)
   for k in kids: result.add k
 
-proc tree*(kind: VNodeKind; attrs: openarray[(cstring, cstring)];
+proc tree*(kind: VNodeKind; attrs: openarray[(kstring, kstring)];
            kids: varargs[VNode]): VNode =
   result = tree(kind, kids)
   for a in attrs: result.setAttr(a[0], a[1])
 
-proc text*(s: string): VNode = VNode(kind: VNodeKind.text, text: cstring(s), index: -1)
-proc text*(s: cstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
+when defined(js):
+  proc text*(s: string): VNode = VNode(kind: VNodeKind.text, text: kstring(s), index: -1)
+proc text*(s: kstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
 
 iterator items*(n: VNode): VNode =
   for i in 0..<n.kids.len: yield n.kids[i]
 
-iterator attrs*(n: VNode): (cstring, cstring) =
+iterator attrs*(n: VNode): (kstring, kstring) =
   for i in countup(0, n.attrs.len-2, 2):
     yield (n.attrs[i], n.attrs[i+1])
 
@@ -324,7 +335,91 @@ when false:
         h &= child.hash
     n.hash = h
 
-proc `$`*(n: VNode): cstring =
-  var res = ""
-  toString(n, res, 0)
-  result = cstring(res)
+
+proc add*(result: var string, n: VNode, indent = 0, indWidth = 2) =
+  ## adds the textual representation of `n` to `result`.
+
+  proc addEscapedAttr(result: var string, s: kstring) =
+    # `addEscaped` alternative with less escaped characters.
+    # Only to be used for escaping attribute values enclosed in double quotes!
+    for c in items(s):
+      case c
+      of '<': result.add("&lt;")
+      of '>': result.add("&gt;")
+      of '&': result.add("&amp;")
+      of '"': result.add("&quot;")
+      else: result.add(c)
+
+  proc addEscaped(result: var string, s: kstring) =
+    ## same as ``result.add(escape(s))``, but more efficient.
+    for c in items(s):
+      case c
+      of '<': result.add("&lt;")
+      of '>': result.add("&gt;")
+      of '&': result.add("&amp;")
+      of '"': result.add("&quot;")
+      of '\'': result.add("&#x27;")
+      of '/': result.add("&#x2F;")
+      else: result.add(c)
+
+  proc addIndent(result: var string, indent: int) =
+    result.add("\n")
+    for i in 1..indent: result.add(' ')
+
+  if n.kind == VNodeKind.text:
+    result.addEscaped(n.text)
+  else:
+    let kind = $n.kind
+    result.add('<')
+    result.add(kind)
+    if n.id != nil:
+      result.add " id=\""
+      result.addEscapedAttr(n.id)
+      result.add('"')
+    if n.class != nil:
+      result.add " class=\""
+      result.addEscapedAttr(n.class)
+      result.add('"')
+    for k, v in attrs(n):
+      result.add(' ')
+      result.add(k)
+      result.add("=\"")
+      result.addEscapedAttr(v)
+      result.add('"')
+    # XXX add style to string
+    if n.len > 0:
+      result.add('>')
+      if n.len > 1:
+        var noWhitespace = false
+        for i in 0..<n.len:
+          if n[i].kind == VNodeKind.text:
+            noWhitespace = true
+            break
+
+        if noWhitespace:
+          # for mixed leaves, we cannot output whitespace for readability,
+          # because this would be wrong. For example: ``a<b>b</b>`` is
+          # different from ``a <b>b</b>``.
+          for i in 0..<n.len: result.add(n[i], indent+indWidth, indWidth)
+        else:
+          for i in 0..<n.len:
+            result.addIndent(indent+indWidth)
+            result.add(n[i], indent+indWidth, indWidth)
+          result.addIndent(indent)
+      else:
+        result.add(n[0], indent+indWidth, indWidth)
+      result.add("</")
+      result.add(kind)
+      result.add(">")
+    else:
+      result.add(" />")
+
+
+proc `$`*(n: VNode): kstring =
+  when defined(js):
+    var res = ""
+    toString(n, res, 0)
+    result = kstring(res)
+  else:
+    result = ""
+    add(result, n)
diff --git a/src/vstyles.nim b/karax/vstyles.nim
similarity index 76%
rename from src/vstyles.nim
rename to karax/vstyles.nim
index 2f854e1..2b7e48f 100644
--- a/src/vstyles.nim
+++ b/karax/vstyles.nim
@@ -1,5 +1,8 @@
 
-import kdom, macros, jdict
+import macros, kbase
+
+when defined(js):
+  import kdom, jdict
 
 type
   StyleAttr* {.pure.} = enum
@@ -200,10 +203,10 @@ type
 macro buildLookupTables(): untyped =
   var e = newTree(nnkBracket)
   for i in low(StyleAttr)..high(StyleAttr):
-    e.add(newCall("cstring", newLit($i)))
+    e.add(newCall("kstring", newLit($i)))
   template tmpl(e) {.dirty.} =
     const
-      toStyleAttrName: array[StyleAttr, cstring] = e
+      toStyleAttrName: array[StyleAttr, kstring] = e
   result = getAst tmpl(e)
 
 buildLookupTables()
@@ -212,8 +215,14 @@ buildLookupTables()
 # it's relevant.
 # even index: key, odd index: value; done this way for memory efficiency:
 
-type
-  VStyle* = JSeq[cstring]
+when defined(js):
+  type
+    VStyle* = JSeq[cstring]
+else:
+  type
+    VStyle* = ref seq[string]
+  proc len*(a: VStyle): int = len(a[])
+  proc add*(a: VStyle; x: string) = add(a[], x)
 
 proc eq*(a, b: VStyle): bool =
   if a.isNil:
@@ -225,9 +234,7 @@ proc eq*(a, b: VStyle): bool =
     if a[i] != b[i]: return false
   return true
 
-proc kout[T](x: T) {.importc: "console.log", varargs.}
-
-proc setAttr(s: VStyle; a, value: cstring) {.noSideEffect.} =
+proc setAttr(s: VStyle; a, value: kstring) {.noSideEffect.} =
   var i = 0
   while i < s.len:
     if s[i] == a:
@@ -247,11 +254,11 @@ proc setAttr(s: VStyle; a, value: cstring) {.noSideEffect.} =
   s.add a
   s.add value
 
-proc setAttr*(s: VStyle; attr: StyleAttr, value: cstring) {.noSideEffect.} =
+proc setAttr*(s: VStyle; attr: StyleAttr, value: kstring) {.noSideEffect.} =
   assert value != nil, "value must not be nil"
   setAttr(s, toStyleAttrName[attr], value)
 
-proc getAttr*(s: VStyle; attr: StyleAttr): cstring {.noSideEffect.} =
+proc getAttr*(s: VStyle; attr: StyleAttr): kstring {.noSideEffect.} =
   ## returns 'nil' if the attribute has not been set.
   var i = 0
   let a = toStyleAttrName[attr]
@@ -262,44 +269,60 @@ proc getAttr*(s: VStyle; attr: StyleAttr): cstring {.noSideEffect.} =
       return nil
     inc i, 2
 
-proc style*(pairs: varargs[(StyleAttr, cstring)]): VStyle {.noSideEffect.} =
+proc style*(pairs: varargs[(StyleAttr, kstring)]): VStyle {.noSideEffect.} =
   ## constructs a VStyle object from a list of (attribute, value)-pairs.
-  result = newJSeq[cstring]()
+  when defined(js):
+    result = newJSeq[cstring]()
+  else:
+    new(result)
+    result[] = @[]
   for x in pairs:
     result.setAttr x[0], x[1]
 
-proc style*(a: StyleAttr; val: cstring): VStyle {.noSideEffect.} =
+proc style*(a: StyleAttr; val: kstring): VStyle {.noSideEffect.} =
   ## constructs a VStyle object from a single (attribute, value)-pair.
-  result = newJSeq[cstring]()
+  when defined(js):
+    result = newJSeq[cstring]()
+  else:
+    new(result)
+    result[] = @[]
   result.setAttr a, val
 
-proc setStyle(d: Style; key, val: cstring) {.importcpp: "#[#] = #", noSideEffect.}
+when defined(js):
+  proc setStyle(d: Style; key, val: cstring) {.importcpp: "#[#] = #", noSideEffect.}
+
+  proc applyStyle*(n: Node; s: VStyle) {.noSideEffect.} =
+    ## apply the style to the real DOM node ``n``.
+
+    #n.style = Style() # optimized, this is a hotspot:
+    {.emit: "`n`.style = {};".}
+    for i in countup(0, s.len-1, 2):
+      n.style.setStyle(s[i], s[i+1])
 
 proc merge*(a, b: VStyle): VStyle {.noSideEffect.} =
   ## merges two styles. ``b`` takes precedence over ``a``.
-  result = newJSeq[cstring]()
+  when defined(js):
+    result = newJSeq[cstring]()
+  else:
+    new(result)
+    result[] = @[]
   for i in 0..<a.len:
     result.add a[i]
   for i in countup(0, b.len-1, 2):
     setAttr(result, b[i], b[i+1])
 
-proc applyStyle*(n: Node; s: VStyle) {.noSideEffect.} =
-  ## apply the style to the real DOM node ``n``.
-
-  #n.style = Style() # optimized, this is a hotspot:
-  {.emit: "`n`.style = {};".}
-  for i in countup(0, s.len-1, 2):
-    n.style.setStyle(s[i], s[i+1])
-
-iterator pairs*(s: VStyle): (cstring, cstring) {.noSideEffect.} =
+iterator pairs*(s: VStyle): (kstring, kstring) {.noSideEffect.} =
   if s != nil:
     for i in countup(0, s.len-1, 2):
       yield (s[i], s[i+1])
 
-import jstrutils
+when defined(js):
+  import jstrutils
+else:
+  template `&`(x: untyped): untyped = $x
 
-proc rgb*(r, g, b: range[0..255]): cstring =
-  cstring"rgb(" & &r & cstring", " & &g & cstring", " & &b & cstring")"
+proc rgb*(r, g, b: range[0..255]): kstring =
+  kstring"rgb(" & &r & kstring", " & &g & kstring", " & &b & kstring")"
 
-proc rgba*(r, g, b: range[0..255], alpha: float): cstring =
-  cstring"rgba(" & &r & cstring", " & &g & cstring", " & &b & cstring", " & &alpha & cstring")"
+proc rgba*(r, g, b: range[0..255], alpha: float): kstring =
+  kstring"rgba(" & &r & kstring", " & &g & kstring", " & &b & kstring", " & &alpha & kstring")"
diff --git a/src/compact.nim b/src/compact.nim
deleted file mode 100644
index 51de228..0000000
--- a/src/compact.nim
+++ /dev/null
@@ -1,121 +0,0 @@
-## Components in Karax are built by the ``.component`` macro annotation.
-
-import macros, jdict, kdom, vdom, tables, strutils
-
-var
-  vcomponents* = newJDict[cstring, proc(args: seq[VNode]): VNode]()
-  dcomponents* = newJDict[cstring, proc(args: seq[VNode]): Node]()
-
-type
-  ComponentKind* {.pure.} = enum
-    None,
-    Tag,
-    VNode,
-    Node
-
-var
-  allcomponents {.compileTime.} = initTable[string, ComponentKind]()
-
-proc isComponent*(x: string): ComponentKind {.compileTime.} =
-  allcomponents.getOrDefault(x)
-
-proc addTags() {.compileTime.} =
-  let x = (bindSym"VNodeKind").getTypeImpl
-  expectKind(x, nnkEnumTy)
-  for i in ord(VNodeKind.html)..ord(VNodeKind.high):
-    # +1 because of empty node at the start of the enum AST:
-    let tag = $x[i+1]
-    allcomponents[tag] = ComponentKind.Tag
-
-static:
-  addTags()
-
-proc unpack(symbolicType: NimNode; index: int): NimNode {.compileTime.} =
-  #let t = symbolicType.getTypeImpl
-  let t = repr(symbolicType)
-  case t
-  of "cstring":
-    result = quote do:
-      args[`index`].text
-  of "int", "VKey":
-    result = quote do:
-      args[`index`].intValue
-  of "bool":
-    result = quote do:
-      args[`index`].intValue != 0
-  elif t.endsWith"Kind":
-    result = quote do:
-      `symbolicType`(args[`index`].intValue)
-  else:
-    # just pass it along, maybe there is some conversion for it:
-    result = quote do:
-      args[`index`]
-
-proc newname*(n: NimNode): NimNode =
-  if n.kind == nnkPostfix:
-    n[1] = newname(n[1])
-    result = n
-  elif n.kind == nnkSym:
-    result = ident($n.symbol)
-  else:
-    result = n
-
-macro compact*(prc: untyped): untyped =
-  ## A 'compact' tree generation proc is one that only depends on its
-  ## inputs and should be stored as a compact virtual DOM tree and
-  ## only expanded on demand (when its inputs changed).
-  var n = prc.copyNimNode
-  for i in 0..6: n.add prc[i].copyNimTree
-  expectKind(n, nnkProcDef)
-  if n[0].kind == nnkEmpty:
-    error("please pass a non anonymous proc", n[0])
-  let name = n[0]
-  let params = params(n)
-  let rettype = repr params[0]
-  var isvirtual = ComponentKind.None
-  if rettype == "VNode":
-    isvirtual = ComponentKind.VNode
-  elif rettype == "Node":
-    isvirtual = ComponentKind.Node
-  else:
-    error "component must return VNode or Node", params[0]
-  let realName = if name.kind == nnkPostfix: name[1] else: name
-  let nn = $realName
-  n[0] = ident("inner" & nn)
-  var unpackCall = newCall(n[0])
-  var counter = 0
-  for i in 1.. <params.len:
-    let param = params[i]
-    let L = param.len
-    let typ = param[L-2]
-    for j in 0 .. L-3:
-      unpackCall.add unpack(typ, counter)
-      inc counter
-
-  template vwrapper(pname, unpackCall) {.dirty.} =
-    proc pname(args: seq[VNode]): VNode =
-      unpackCall
-
-  template dwrapper(pname, unpackCall) {.dirty.} =
-    proc pname(args: seq[VNode]): Node =
-      unpackCall
-
-  template vregister(key, val) =
-    bind jdict.`[]=`
-    `[]=`(vcomponents, cstring(key), val)
-
-  template dregister(key, val) =
-    bind jdict.`[]=`
-    `[]=`(dcomponents, cstring(key), val)
-
-  result = newTree(nnkStmtList, n)
-
-  if isvirtual == ComponentKind.VNode:
-    result.add getAst(vwrapper(newname name, unpackCall))
-    result.add getAst(vregister(newLit(nn), realName))
-  else:
-    result.add getAst(dwrapper(newname name, unpackCall))
-    result.add getAst(dregister(newLit(nn), realName))
-  allcomponents[nn] = isvirtual
-  when defined(debugKaraxDsl):
-    echo repr result
diff --git a/tests/compiler_tests.nim b/tests/compiler_tests.nim
index 4352cab..fec1eb0 100644
--- a/tests/compiler_tests.nim
+++ b/tests/compiler_tests.nim
@@ -1,4 +1,4 @@
-include karaxprelude
+include ../karax/prelude
 
 block:
   type
diff --git a/tests/difftest.nim b/tests/difftest.nim
index 604384d..2762612 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -1,6 +1,6 @@
 
-include "../src/karax"
-import "../src/karaxdsl"
+include "../karax/karax"
+import "../karax/karaxdsl"
 
 proc hasDom(n: Vnode) =
   if n.kind in {VNodeKind.component, VNodeKind.vthunk, VNodeKind.dthunk}:
diff --git a/tests/nativehtmlgen.nim b/tests/nativehtmlgen.nim
new file mode 100644
index 0000000..5bb7186
--- /dev/null
+++ b/tests/nativehtmlgen.nim
@@ -0,0 +1,20 @@
+## Simple test that shows Karax can also do client-side HTML rendering.
+
+import "../karax" / [karaxdsl, vdom]
+
+when defined(js):
+  {.error: "Use 'nim c' to compile this example".}
+
+let tab = buildHtml(table):
+  tr:
+    td:
+      text "Cell A"
+    td:
+      text "Cell B"
+  tr:
+    td:
+      text "Cell C"
+    td:
+      text "Cell D"
+
+echo tab
diff --git a/tests/nim.cfg b/tests/nim.cfg
index 532b206..4071d27 100644
--- a/tests/nim.cfg
+++ b/tests/nim.cfg
@@ -1 +1 @@
---path: "../src"
+--path: "../karax"
diff --git a/tests/tester.nim b/tests/tester.nim
index 60a787b..ea4022a 100644
--- a/tests/tester.nim
+++ b/tests/tester.nim
@@ -14,5 +14,6 @@ proc main =
   exec("nim js examples/mediaplayer/playerapp.nim")
   exec("nim js examples/carousel/carousel.nim")
   exec("nim js -d:nodejs -r tests/difftest.nim")
+  exec("nim c tests/nativehtmlgen.nim")
 
 main()

From 5bc983e0bf89243d21354ff9a5fb2db49318d794 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 3 Oct 2017 09:35:28 +0200
Subject: [PATCH 141/264] added lookuptables.nim helper module

---
 karax/lookuptables.nim | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 karax/lookuptables.nim

diff --git a/karax/lookuptables.nim b/karax/lookuptables.nim
new file mode 100644
index 0000000..c888b49
--- /dev/null
+++ b/karax/lookuptables.nim
@@ -0,0 +1,24 @@
+
+import macros, kbase
+from strutils import `%`
+
+macro fieldNamesAsArray*(t: typed; pattern = "$1"): untyped =
+  var impl = getTypeImpl(getTypeImpl(t)[1])
+  if impl.kind == nnkRefTy: impl = getTypeImpl(impl[0])
+  expectKind impl, nnkObjectTy
+  impl = impl[2]
+  expectKind impl, nnkRecList
+  result = newTree(nnkBracket)
+  for x in impl:
+    expectKind x, nnkIdentDefs
+    result.add(newCall(bindSym"kstring", newLit(pattern.strVal % $x[0])))
+
+when isMainModule:
+  type
+    MyObject = ref object
+      x*: string
+      next*: int
+      more, here*: float
+
+  const myObjectFields = fieldNamesAsArray(MyObject, "MyObject_$1")
+  for f in myObjectFields: echo f

From 9a8b020269e25db3b42bb2d41d46e50b743e6cba Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 5 Oct 2017 12:29:52 +0200
Subject: [PATCH 142/264] added 'kstrLits' macro

---
 karax/lookuptables.nim | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/karax/lookuptables.nim b/karax/lookuptables.nim
index c888b49..1a1d51d 100644
--- a/karax/lookuptables.nim
+++ b/karax/lookuptables.nim
@@ -13,6 +13,20 @@ macro fieldNamesAsArray*(t: typed; pattern = "$1"): untyped =
     expectKind x, nnkIdentDefs
     result.add(newCall(bindSym"kstring", newLit(pattern.strVal % $x[0])))
 
+proc str(n: NimNode): NimNode =
+  if n.kind in {nnkStrLit, nnkTripleStrLit}:
+    result = newCall(bindSym"kstring", n)
+  else:
+    result = copyNimNode(n)
+    for i in 0..<n.len:
+      result.add str(n[i])
+
+macro kstrLits*(x: untyped): untyped =
+  ## Transforms every string literal "abc" to ``kstring"abc"``. This makes
+  ## things much easier to write. String literals of the form ``r"abc"`` are
+  ## not affected.
+  result = str(x)
+
 when isMainModule:
   type
     MyObject = ref object

From 6bd32a0e8855302dca7a74031a78fd255a9a474f Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 5 Oct 2017 12:32:14 +0200
Subject: [PATCH 143/264] added toChecked and toDisabled helpers

---
 examples/todoapp/todoapp.nim | 3 ---
 karax/karax.nim              | 6 ++++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 99f70ea..7aa90d1 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -71,9 +71,6 @@ proc clearCompleted(ev: Event, n: VNode) =
 proc toClass(completed: bool): cstring =
   (if completed: cstring"completed" else: cstring(nil))
 
-proc toChecked(checked: bool): cstring =
-  (if checked: cstring"checked" else: cstring(nil))
-
 proc selected(v: Filter): cstring =
   (if filter == v: cstring"selected" else: cstring(nil))
 
diff --git a/karax/karax.nim b/karax/karax.nim
index d0ed73d..560d121 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -706,3 +706,9 @@ proc setInputText*(n: VNode; s: cstring) =
   ## Sets the text of input elements.
   n.text = s
   if n.dom != nil: n.dom.value = s
+
+proc toChecked*(checked: bool): cstring =
+  (if checked: cstring"checked" else: cstring(nil))
+
+proc toDisabled*(disabled: bool): cstring =
+  (if disabled: cstring"disabled" else: cstring(nil))

From 6ea55856b549b13718137338d1592468dfaea279 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 5 Oct 2017 14:55:14 +0200
Subject: [PATCH 144/264] added JDict.keys iterator

---
 karax/jdict.nim | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/karax/jdict.nim b/karax/jdict.nim
index 6e2aa9f..c9e2224 100644
--- a/karax/jdict.nim
+++ b/karax/jdict.nim
@@ -11,6 +11,12 @@ proc contains*[K, V](d: JDict[K, V], k: K): bool {.importcpp: "#.hasOwnProperty(
 
 proc del*[K, V](d: JDict[K, V], k: K) {.importcpp: "delete #[#]".}
 
+iterator keys*[K, V](d: JDict[K, V]): K =
+  var kkk: K
+  {.emit: ["for (", kkk, " in ", d, ") {"].}
+  yield kkk
+  {.emit: ["}"].}
+
 type
   JSeq*[T] = ref object
 

From 4be45499f7046420f9e0545e70bb2b3b9139d475 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 10 Oct 2017 12:59:38 +0200
Subject: [PATCH 145/264] improve karax.nimble

---
 karax.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index 65e9d1f..2d27544 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -9,4 +9,4 @@ license       = "MIT"
 
 requires "nim >= 0.16.1"
 
-skipDirs = @["examples"]
+skipDirs = @["examples", "experiments"]

From 0ddf6098f7f2409a2981920b67d311cf37e10f11 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 31 Oct 2017 09:40:52 +0100
Subject: [PATCH 146/264] improve performance for class-only changes; improves
 #40 but doesn't fix the real underlying combinatorial explosion

---
 karax/compact.nim | 2 +-
 karax/karax.nim   | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/karax/compact.nim b/karax/compact.nim
index f5f21a8..7a7664d 100644
--- a/karax/compact.nim
+++ b/karax/compact.nim
@@ -93,7 +93,7 @@ when defined(js):
     n[0] = ident("inner" & nn)
     var unpackCall = newCall(n[0])
     var counter = 0
-    for i in 1.. <params.len:
+    for i in 1 ..< params.len:
       let param = params[i]
       let L = param.len
       let typ = param[L-2]
diff --git a/karax/karax.nim b/karax/karax.nim
index 560d121..68b2048 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -245,10 +245,10 @@ proc eq(a, b: VNode): EqResult =
       when defined(profileKarax): inc reasons[deComponent]
       return different
     return componentsIdentical
-  if a.class != b.class:
-    when defined(profileKarax): inc reasons[deClass]
-    return different
-  if not eq(a.style, b.style) or not sameAttrs(a, b):
+  #if:
+  #  when defined(profileKarax): inc reasons[deClass]
+  #  return different
+  if a.class != b.class or not eq(a.style, b.style) or not sameAttrs(a, b):
     when defined(profileKarax): inc reasons[deSimilar]
     return similar
   # Do not test event listeners here!
@@ -260,6 +260,7 @@ proc updateStyles(newNode, oldNode: VNode) =
     if newNode.style != nil: applyStyle(oldNode.dom, newNode.style)
     else: oldNode.dom.style = Style()
   oldNode.style = newNode.style
+  oldNode.class = newNode.class
 
 proc updateAttributes(newNode, oldNode: VNode) =
   # we keep the oldNode, but take over the attributes from the new node:

From a0665bc544a5b76ef13cbbca00a7bba1f6d53c63 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 13 Nov 2017 15:27:58 +0100
Subject: [PATCH 147/264] added errors.nim module for UI error handling

---
 karax/errors.nim | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 karax/errors.nim

diff --git a/karax/errors.nim b/karax/errors.nim
new file mode 100644
index 0000000..847bd85
--- /dev/null
+++ b/karax/errors.nim
@@ -0,0 +1,30 @@
+## Error handling logic for form input validation.
+
+import karax, jdict
+
+var
+  gerrorMsgs = newJDict[cstring, cstring]()
+  gerrorCounter = 0
+
+proc hasErrors*(): bool = gerrorCounter != 0
+
+proc disableOnError*(): cstring = toDisabled(hasErrors())
+
+proc getError*(field: cstring): cstring =
+  if not gerrorMsgs.contains(field):
+    result = ""
+  else:
+    result = gerrorMsgs[field]
+
+proc setError*(field, msg: cstring) =
+  let previous = getError(field)
+  if len(msg) == 0:
+    if len(previous) != 0: dec(gerrorCounter)
+  else:
+    if len(previous) == 0: inc(gerrorCounter)
+  gerrorMsgs[field] = msg
+
+proc clearErrors*() =
+  let m = gerrorMsgs
+  for k in m.keys:
+    setError(k, "")

From e112f1509252a7570137588f9c5350e1e1c93cb5 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 16 Nov 2017 15:34:08 +0100
Subject: [PATCH 148/264] tools/karun: produce CSS only with --css switch

---
 tools/karun.nim | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/tools/karun.nim b/tools/karun.nim
index 320802f..a7ba3c0 100644
--- a/tools/karun.nim
+++ b/tools/karun.nim
@@ -4,13 +4,16 @@
 import os, strutils, parseopt, browsers
 
 const
+  css = """
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+"""
   html = """
 <!DOCTYPE html>
 <html>
 <head>
   <title>$1</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  $2
 </head>
 <body id="body">
 <div id="ROOT" />
@@ -28,13 +31,18 @@ proc main =
   var rest = op.cmdLineRest
   var file = ""
   var run = false
+  var selectedCss = ""
   while true:
     op.next()
     case op.kind
     of cmdLongOption:
-      if op.key == "run":
+      case op.key
+      of "run":
         run = true
         rest = rest.replace("--run ")
+      of "css":
+        selectedCss = css
+      else: discard
     of cmdShortOption:
       if op.key == "r":
         run = true
@@ -47,7 +55,7 @@ proc main =
   createDir("nimcache")
   exec("nim js --out:nimcache/" & name & ".js " & rest)
   let dest = "nimcache" / name & ".html"
-  writeFile(dest, html % name)
+  writeFile(dest, html % [name, css])
   if run: openDefaultBrowser(dest)
 
 main()

From bcc45feea341592b7b7aec8bf8a955d46394cafd Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 20 Nov 2017 12:26:10 +0100
Subject: [PATCH 149/264] added 'karun' tool to karax.nimble

---
 karax.nimble | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/karax.nimble b/karax.nimble
index 2d27544..bc49e03 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -10,3 +10,5 @@ license       = "MIT"
 requires "nim >= 0.16.1"
 
 skipDirs = @["examples", "experiments"]
+
+bin = @["tools/karun"]

From fb604321f3db185fa21ea04ac56a42fa740d59aa Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 20 Nov 2017 12:26:30 +0100
Subject: [PATCH 150/264] added many more examples

---
 examples/button.nim        | 16 +++++++++++++
 examples/buttonlambda.nim  | 14 +++++++++++
 examples/hellouniverse.nim | 13 +++++++++++
 examples/helloworld.nim    |  7 ++++++
 examples/login.nim         | 48 ++++++++++++++++++++++++++++++++++++++
 examples/toychat.nim       | 36 ++++++++++++++++++++++++++++
 karax/karax.nim            |  5 ++--
 karax/prelude.nim          |  2 +-
 tests/tester.nim           |  3 +++
 9 files changed, 141 insertions(+), 3 deletions(-)
 create mode 100644 examples/button.nim
 create mode 100644 examples/buttonlambda.nim
 create mode 100644 examples/hellouniverse.nim
 create mode 100644 examples/helloworld.nim
 create mode 100644 examples/login.nim
 create mode 100644 examples/toychat.nim

diff --git a/examples/button.nim b/examples/button.nim
new file mode 100644
index 0000000..bd49dc3
--- /dev/null
+++ b/examples/button.nim
@@ -0,0 +1,16 @@
+
+include karax / prelude
+
+var lines: seq[kstring] = @[]
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    button:
+      text "Say hello!"
+      proc onclick(ev: Event; n: VNode) =
+        lines.add "Hello simulated universe"
+    for x in lines:
+      tdiv:
+        text x
+
+setRenderer createDom
diff --git a/examples/buttonlambda.nim b/examples/buttonlambda.nim
new file mode 100644
index 0000000..2ddadff
--- /dev/null
+++ b/examples/buttonlambda.nim
@@ -0,0 +1,14 @@
+include karax / prelude
+from future import `=>`
+
+var lines: seq[kstring] = @[]
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    button(onclick = () => lines.add "Hello simulated universe"):
+      text "Say hello!"
+    for x in lines:
+      tdiv:
+        text x
+
+setRenderer createDom
diff --git a/examples/hellouniverse.nim b/examples/hellouniverse.nim
new file mode 100644
index 0000000..9d6ebc6
--- /dev/null
+++ b/examples/hellouniverse.nim
@@ -0,0 +1,13 @@
+
+include karax / prelude
+import random
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    if random(100) <= 50:
+      text "Hello World!"
+    else:
+      text "Hello Universe"
+
+randomize()
+setRenderer createDom
diff --git a/examples/helloworld.nim b/examples/helloworld.nim
new file mode 100644
index 0000000..76c43db
--- /dev/null
+++ b/examples/helloworld.nim
@@ -0,0 +1,7 @@
+include karax / prelude
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    text "Hello World!"
+
+setRenderer createDom
diff --git a/examples/login.nim b/examples/login.nim
new file mode 100644
index 0000000..4980269
--- /dev/null
+++ b/examples/login.nim
@@ -0,0 +1,48 @@
+
+include karax / prelude
+from future import `=>`
+import karax / errors
+
+proc loginField(desc, field, class: kstring;
+                validator: proc (field: kstring): proc ()): VNode =
+  result = buildHtml(tdiv):
+    label(`for` = field):
+      text desc
+    input(class = class, id = field, onkeyuplater = validator(field))
+
+const
+  login = kstring"login" # a const to prevent typos
+
+proc validateNotEmpty(field: kstring): proc () =
+  result = proc () =
+    let x = getVNodeById(field)
+    if x.text.isNil or x.text == "":
+      errors.setError(login, field & " must not be empty")
+    else:
+      errors.setError(login, "")
+
+
+# some consts in order to prevent typos:
+const
+  username = kstring"username"
+  password = kstring"password"
+
+var loggedIn: bool
+
+proc loginDialog(): VNode =
+  result = buildHtml(tdiv):
+    if not loggedIn:
+      loginField("Name :", username, "input", validateNotEmpty)
+      loginField("Password: ", password, "password", validateNotEmpty)
+      button(onclick = () => (loggedIn = true), disabled = errors.disableOnError()):
+        text "Login"
+      p:
+        text errors.getError(login)
+    else:
+      p:
+        text "You are now logged in."
+
+setError login, username & " must not be empty"
+
+when not declared(toychat):
+  setRenderer loginDialog
diff --git a/examples/toychat.nim b/examples/toychat.nim
new file mode 100644
index 0000000..66c4cd0
--- /dev/null
+++ b/examples/toychat.nim
@@ -0,0 +1,36 @@
+
+include login
+
+const
+  message = "message"
+
+type
+  TextMessage = ref object
+    name, content: kstring
+
+var allMessages: seq[TextMessage] = @[]
+
+proc doSendMessage() =
+  let inputField = getVNodeById(message)
+  allMessages.add(TextMessage(name: "you", content: inputField.text))
+  inputField.setInputText ""
+
+proc main(): VNode =
+  result = buildHtml(tdiv):
+    loginDialog()
+    tdiv:
+      table:
+        for m in allMessages:
+          tr:
+            td:
+              bold:
+                text m.name
+            td:
+              text m.content
+    tdiv:
+      if loggedIn:
+        label(`for` = message):
+          text "Message: "
+        input(class = "input", id = message, onkeyupenter = doSendMessage)
+
+setRenderer main
diff --git a/karax/karax.nim b/karax/karax.nim
index 68b2048..9aea015 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -4,8 +4,9 @@ import kdom, vdom, jstrutils, compact, jdict, vstyles
 
 export kdom.Event
 
-proc kout*[T](x: T) {.importc: "console.log", varargs.}
-  ## the preferred way of debugging karax applications.
+proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
+  ## the preferred way of debugging karax applications. Now deprecated,
+  ## you can now use ``system.echo`` instead.
 
 type
   PatchKind = enum
diff --git a/karax/prelude.nim b/karax/prelude.nim
index ed9349c..3cd25e2 100644
--- a/karax/prelude.nim
+++ b/karax/prelude.nim
@@ -1,3 +1,3 @@
 ## Include file that contains the common imports for the Karax framework.
 
-import karax, karaxdsl, vdom, compact
+import kbase, karax, karaxdsl, vdom, compact, jstrutils
diff --git a/tests/tester.nim b/tests/tester.nim
index ea4022a..2ff9968 100644
--- a/tests/tester.nim
+++ b/tests/tester.nim
@@ -16,4 +16,7 @@ proc main =
   exec("nim js -d:nodejs -r tests/difftest.nim")
   exec("nim c tests/nativehtmlgen.nim")
 
+  for test in os.walkFiles("examples/*.nim"):
+    exec("nim js " & test)
+
 main()

From bf28a4443960f7808f293a5bc6fce719a0771d18 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 20 Nov 2017 14:04:34 +0100
Subject: [PATCH 151/264] fixes issues in the new examples

---
 examples/login.nim | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/examples/login.nim b/examples/login.nim
index 4980269..6cc38b1 100644
--- a/examples/login.nim
+++ b/examples/login.nim
@@ -8,25 +8,21 @@ proc loginField(desc, field, class: kstring;
   result = buildHtml(tdiv):
     label(`for` = field):
       text desc
-    input(class = class, id = field, onkeyuplater = validator(field))
-
-const
-  login = kstring"login" # a const to prevent typos
-
-proc validateNotEmpty(field: kstring): proc () =
-  result = proc () =
-    let x = getVNodeById(field)
-    if x.text.isNil or x.text == "":
-      errors.setError(login, field & " must not be empty")
-    else:
-      errors.setError(login, "")
-
+    input(class = class, id = field, onchange = validator(field))
 
 # some consts in order to prevent typos:
 const
   username = kstring"username"
   password = kstring"password"
 
+proc validateNotEmpty(field: kstring): proc () =
+  result = proc () =
+    let x = getVNodeById(field)
+    if x.text.isNil or x.text == "":
+      errors.setError(field, field & " must not be empty")
+    else:
+      errors.setError(field, "")
+
 var loggedIn: bool
 
 proc loginDialog(): VNode =
@@ -37,12 +33,15 @@ proc loginDialog(): VNode =
       button(onclick = () => (loggedIn = true), disabled = errors.disableOnError()):
         text "Login"
       p:
-        text errors.getError(login)
+        text errors.getError(username)
+      p:
+        text errors.getError(password)
     else:
       p:
         text "You are now logged in."
 
-setError login, username & " must not be empty"
+setError username, username & " must not be empty"
+setError password, password & " must not be empty"
 
 when not declared(toychat):
   setRenderer loginDialog

From 22a20b3246d49b51b3d6b72a239392e235878fab Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 20 Nov 2017 23:33:56 +0100
Subject: [PATCH 152/264] attempt to make travis green again

---
 .travis.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index 0c60bd2..e479ef1 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,7 +10,9 @@ install:
   - cd ../
   - bin/nim c koch
   - ./koch boot -d:release
+  - ./koch tools
   - cd ..
+  - nimble develop
 before_script:
   - set -e
   - export PATH=$(pwd)/nim/bin:$(pwd):$PATH

From 6c2513a48c254ac22fd68ce144fc521d254c0216 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 20 Nov 2017 23:40:35 +0100
Subject: [PATCH 153/264] attempt to make travis green again

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index e479ef1..d7818af 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,7 +12,7 @@ install:
   - ./koch boot -d:release
   - ./koch tools
   - cd ..
-  - nimble develop
+  - ../nim/bin/nimble develop
 before_script:
   - set -e
   - export PATH=$(pwd)/nim/bin:$(pwd):$PATH

From 84720812ea927f57d04d30b2d6f125b6b52197c1 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 20 Nov 2017 23:47:06 +0100
Subject: [PATCH 154/264] attempt to make travis green again

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index d7818af..d06486d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,7 +12,7 @@ install:
   - ./koch boot -d:release
   - ./koch tools
   - cd ..
-  - ../nim/bin/nimble develop
+  - ./nim/bin/nimble develop
 before_script:
   - set -e
   - export PATH=$(pwd)/nim/bin:$(pwd):$PATH

From 7425568122cfbd69e8b069d9f733cfe15daaeb2d Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 20 Nov 2017 23:55:13 +0100
Subject: [PATCH 155/264] attempt to make travis green again

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index d06486d..6e03ea9 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,9 +12,9 @@ install:
   - ./koch boot -d:release
   - ./koch tools
   - cd ..
-  - ./nim/bin/nimble develop
 before_script:
   - set -e
   - export PATH=$(pwd)/nim/bin:$(pwd):$PATH
 script:
+  - nimble develop
   - nim c -r tests/tester.nim

From 9ad41a6066602a6a811bf5f34f9f5dd647e9265b Mon Sep 17 00:00:00 2001
From: Thomas Johnson <tbjohnson123@gmail.com>
Date: Mon, 20 Nov 2017 17:12:33 -0800
Subject: [PATCH 156/264] kdom changes and tests for #42

---
 .gitignore                |   4 +-
 karax/karax.nim           |   2 +-
 karax/kdom.nim            | 553 ++++++++++++++++++++++++++++++---
 tests/domEventTests.css   |  33 ++
 tests/domEventTests.html  |  13 +
 tests/domEventTests.nim   | 629 ++++++++++++++++++++++++++++++++++++++
 tests/jquery-3.2.1.min.js |   4 +
 7 files changed, 1197 insertions(+), 41 deletions(-)
 create mode 100644 tests/domEventTests.css
 create mode 100644 tests/domEventTests.html
 create mode 100644 tests/domEventTests.nim
 create mode 100644 tests/jquery-3.2.1.min.js

diff --git a/.gitignore b/.gitignore
index 42b07a7..55419af 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 nimcache/
-/tests/tester
\ No newline at end of file
+/tests/tester
+/tools/karun
+*.code-workspace
\ No newline at end of file
diff --git a/karax/karax.nim b/karax/karax.nim
index 9aea015..0ff666b 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -85,7 +85,7 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind;
     let action = action
     let n = n
     result = proc (ev: Event) =
-      if ev.keyCode == 13: keyeventBody()
+      if ((KeyboardEvent)ev).keyCode == 13: keyeventBody()
 
   proc laterWrapper(): NativeEventHandler =
     let action = action
diff --git a/karax/kdom.nim b/karax/kdom.nim
index 2c015a9..17f2630 100644
--- a/karax/kdom.nim
+++ b/karax/kdom.nim
@@ -37,6 +37,38 @@ type
     onsubmit*: proc (event: Event) {.nimcall.}
     onunload*: proc (event: Event) {.nimcall.}
 
+  # https://developer.mozilla.org/en-US/docs/Web/Events
+  DomEvent* {.pure.} = enum
+    Abort = "abort",
+    BeforeInput = "beforeinput",
+    Blur = "blur",
+    Click = "click",
+    CompositionEnd = "compositionend",
+    CompositionStart = "compositionstart",
+    CompositionUpdate = "compositionupdate",
+    DblClick = "dblclick",
+    Error = "error",
+    Focus = "focus",
+    FocusIn = "focusin",
+    FocusOut = "focusout",
+    Input = "input",
+    KeyDown = "keydown",
+    KeyPress = "keypress",
+    KeyUp = "keyup",
+    Load = "load",
+    MouseDown = "mousedown",
+    MouseEnter = "mouseenter",
+    MouseLeave = "mouseleave",
+    MouseMove = "mousemove",
+    MouseOut = "mouseout",
+    MouseOver = "mouseover",
+    MouseUp = "mouseup",
+    Resize = "resize",
+    Scroll = "scroll",
+    Select = "select",
+    Unload = "unload",
+    Wheel = "wheel"
+
   Window* = ref WindowObj
   WindowObj {.importc.} = object of EventTargetObj
     document*: Document
@@ -57,6 +89,7 @@ type
     status*: cstring
     toolbar*: ref ToolBar
     frames*: seq[Frame]
+    screen*: Screen
 
   Frame* = ref FrameObj
   FrameObj {.importc.} = object of WindowObj
@@ -131,6 +164,7 @@ type
     name*: cstring
     readOnly*: bool
     options*: seq[OptionElement]
+    clientWidth*, clientHeight*: int
 
   # https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
   HtmlElement* = ref object of Element
@@ -284,52 +318,461 @@ type
     wordSpacing*: cstring
     zIndex*: int
 
-  # TODO: A lot of the fields in Event belong to a more specific type of event.
-  # TODO: Should we clean this up?
+  EventPhase* = enum
+    None = 0,
+    CapturingPhase,
+    AtTarget,
+    BubblingPhase
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/Event
   Event* = ref EventObj
   EventObj {.importc.} = object of RootObj
+    bubbles*: bool
+    cancelBubble*: bool
+    cancelable*: bool
+    composed*: bool
+    currentTarget*: Node
+    defaultPrevented*: bool
+    eventPhase*: int
     target*: Node
-    altKey*, ctrlKey*, shiftKey*: bool
-    button*: int
-    clientX*, clientY*: int
+    `type`*: cstring
+    isTrusted*: bool
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
+  UIEvent* {.importc.} = ref object of Event
+    detail*: int64
+    view*: Window
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
+  KeyboardEvent* {.importc.} = ref object of UIEvent
+    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
+    code*: cstring
+    isComposing*: bool
+    key*: cstring
     keyCode*: int
-    layerX*, layerY*: int
-    modifiers*: int
-    ALT_MASK*, CONTROL_MASK*, SHIFT_MASK*, META_MASK*: int
+    location*: int
+    
+  # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
+  KeyboardEventKey* {.pure.} = enum
+    # Modifier keys
+    Alt,
+    AltGraph,
+    CapsLock,
+    Control,
+    Fn,
+    FnLock,
+    Hyper,
+    Meta,
+    NumLock,
+    ScrollLock,
+    Shift,
+    Super,
+    Symbol,
+    SymbolLock,
+
+    # Whitespace keys
+    ArrowDown,
+    ArrowLeft,
+    ArrowRight,
+    ArrowUp,
+    End,
+    Home,
+    PageDown,
+    PageUp,
+
+    # Editing keys
+    Backspace,
+    Clear,
+    Copy,
+    CrSel,
+    Cut,
+    Delete,
+    EraseEof,
+    ExSel,
+    Insert,
+    Paste,
+    Redo,
+    Undo,
+
+    # UI keys
+    Accept,
+    Again,
+    Attn,
+    Cancel,
+    ContextMenu,
+    Escape,
+    Execute,
+    Find,
+    Finish,
+    Help,
+    Pause,
+    Play,
+    Props,
+    Select,
+    ZoomIn,
+    ZoomOut,
+
+    # Device keys
+    BrigtnessDown,
+    BrigtnessUp,
+    Eject,
+    LogOff,
+    Power,
+    PowerOff,
+    PrintScreen,
+    Hibernate,
+    Standby,
+    WakeUp,
+
+    # Common IME keys
+    AllCandidates,
+    Alphanumeric,
+    CodeInput,
+    Compose,
+    Convert,
+    Dead,
+    FinalMode,
+    GroupFirst,
+    GroupLast,
+    GroupNext,
+    GroupPrevious,
+    ModeChange,
+    NextCandidate,
+    NonConvert,
+    PreviousCandidate,
+    Process,
+    SingleCandidate,
+
+    # Korean keyboards only
+    HangulMode,
+    HanjaMode,
+    JunjaMode,
+
+    # Japanese keyboards only
+    Eisu,
+    Hankaku,
+    Hiragana,
+    HiraganaKatakana,
+    KanaMode,
+    KanjiMode,
+    Katakana,
+    Romaji,
+    Zenkaku,
+    ZenkakuHanaku,
+
+    # Function keys
+    F1,
+    F2,
+    F3,
+    F4,
+    F5,
+    F6,
+    F7,
+    F8,
+    F9,
+    F10,
+    F11,
+    F12,
+    F13,
+    F14,
+    F15,
+    F16,
+    F17,
+    F18,
+    F19,
+    F20,
+    Soft1,
+    Soft2,
+    Soft3,
+    Soft4,
+
+    # Phone keys
+    AppSwitch,
+    Call,
+    Camera,
+    CameraFocus,
+    EndCall,
+    GoBack,
+    GoHome,
+    HeadsetHook,
+    LastNumberRedial,
+    Notification,
+    MannerMode,
+    VoiceDial,
+
+    # Multimedia keys
+    ChannelDown,
+    ChannelUp,
+    MediaFastForward,
+    MediaPause,
+    MediaPlay,
+    MediaPlayPause,
+    MediaRecord,
+    MediaRewind,
+    MediaStop,
+    MediaTrackNext,
+    MediaTrackPrevious,
+
+    # Audio control keys
+    AudioBalanceLeft,
+    AudioBalanceRight,
+    AudioBassDown,
+    AudioBassBoostDown,
+    AudioBassBoostToggle,
+    AudioBassBoostUp,
+    AudioBassUp,
+    AudioFaderFront,
+    AudioFaderRear,
+    AudioSurroundModeNext,
+    AudioTrebleDown,
+    AudioTrebleUp,
+    AudioVolumeDown,
+    AUdioVolumeMute,
+    AudioVolumeUp,
+    MicrophoneToggle,
+    MicrophoneVolumeDown,
+    MicrophoneVolumeMute,
+    MicrophoneVolumeUp,
+
+    # TV control keys
+    TV,
+    TV3DMode,
+    TVAntennaCable,
+    TVAudioDescription,
+    TVAudioDescriptionMixDown,
+    TVAudioDescriptionMixUp,
+    TVContentsMenu,
+    TVDataService,
+    TVInput,
+    TVInputComponent1,
+    TVInputComponent2,
+    TVInputComposite1,
+    TVInputComposite2,
+    TVInputHDMI1,
+    TVInputHDMI2,
+    TVInputHDMI3,
+    TVInputHDMI4,
+    TVInputVGA1,
+    TVMediaContext,
+    TVNetwork,
+    TVNumberEntry,
+    TVPower,
+    TVRadioService,
+    TVSatellite,
+    TVSatelliteBS,
+    TVSatelliteCS,
+    TVSatelliteToggle,
+    TVTerrestrialAnalog,
+    TVTerrestrialDigital,
+    TVTimer,
+
+    # Media controller keys
+    AVRInput,
+    AVRPower,
+    ColorF0Red,
+    ColorF1Green,
+    ColorF2Yellow,
+    ColorF3Blue,
+    ColorF4Grey,
+    ColorF5Brown,
+    ClosedCaptionToggle,
+    Dimmer,
+    DisplaySwap,
+    DVR,
+    Exit,
+    FavoriteClear0,
+    FavoriteClear1,
+    FavoriteClear2,
+    FavoriteClear3,
+    FavoriteRecall0,
+    FavoriteRecall1,
+    FavoriteRecall2,
+    FavoriteRecall3,
+    FavoriteStore0,
+    FavoriteStore1,
+    FavoriteStore2,
+    FavoriteStore3,
+    Guide,
+    GuideNextDay,
+    GuidePreviousDay,
+    Info,
+    InstantReplay,
+    Link,
+    ListProgram,
+    LiveContent,
+    Lock,
+    MediaApps,
+    MediaAudioTrack,
+    MediaLast,
+    MediaSkipBackward,
+    MediaSkipForward,
+    MediaStepBackward,
+    MediaStepForward,
+    MediaTopMenu,
+    NavigateIn,
+    NavigateNext,
+    NavigateOut,
+    NavigatePrevious,
+    NextFavoriteChannel,
+    NextUserProfile,
+    OnDemand,
+    Pairing,
+    PinPDown,
+    PinPMove,
+    PinPUp,
+    PlaySpeedDown,
+    PlaySpeedReset,
+    PlaySpeedUp,
+    RandomToggle,
+    RcLowBattery,
+    RecordSpeedNext,
+    RfBypass,
+    ScanChannelsToggle,
+    ScreenModeNext,
+    Settings,
+    SplitScreenToggle,
+    STBInput,
+    STBPower,
+    Subtitle,
+    Teletext,
+    VideoModeNext,
+    Wink,
+    ZoomToggle,
+
+    # Speech recognition keys
+    SpeechCorrectionList,
+    SpeechInputToggle,
+
+    # Document keys
+    Close,
+    New,
+    Open,
+    Print,
+    Save,
+    SpellCheck,
+    MailForward,
+    MailReply,
+    MailSend,
+
+    # Application selector keys
+    LaunchCalculator,
+    LaunchCalendar,
+    LaunchContacts,
+    LaunchMail,
+    LaunchMediaPlayer,
+    LaunchMusicPlayer,
+    LaunchMyComputer,
+    LaunchPhone,
+    LaunchScreenSaver,
+    LaunchSpreadsheet,
+    LaunchWebBrowser,
+    LaunchWebCam,
+    LaunchWordProcessor,
+    LaunchApplication1,
+    LaunchApplication2,
+    LaunchApplication3,
+    LaunchApplication4,
+    LaunchApplication5,
+    LaunchApplication6,
+    LaunchApplication7,
+    LaunchApplication8,
+    LaunchApplication9,
+    LaunchApplication10,
+    LaunchApplication11,
+    LaunchApplication12,
+    LaunchApplication13,
+    LaunchApplication14,
+    LaunchApplication15,
+    LaunchApplication16,
+
+    # Browser control keys
+    BrowserBack,
+    BrowserFavorites,
+    BrowserForward,
+    BrowserHome,
+    BrowserRefresh,
+    BrowserSearch,
+    BrowserStop,
+
+    # Numeric keypad keys
+    Key11,
+    Key12,
+    Separator
+
+  MouseButtons* = enum
+    NoButton = 0,
+    PrimaryButton = 1,
+    SecondaryButton = 2,
+    AuxilaryButton = 4,
+    FourthButton = 8,
+    FifthButton = 16
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+  MouseEvent* {.importc.} = ref object of UIEvent
+    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
+    button*: int
+    buttons*: int
+    clientX*, clientY*: int
+    movementX*, movementY*: int
     offsetX*, offsetY*: int
     pageX*, pageY*: int
+    relatedTarget*: EventTarget
+    #region*: cstring
     screenX*, screenY*: int
-    which*: int
-    `type`*: cstring
     x*, y*: int
-    ABORT*: int
-    BLUR*: int
-    CHANGE*: int
-    CLICK*: int
-    DBLCLICK*: int
-    DRAGDROP*: int
-    ERROR*: int
-    FOCUS*: int
-    KEYDOWN*: int
-    KEYPRESS*: int
-    KEYUP*: int
-    LOAD*: int
-    MOUSEDOWN*: int
-    MOUSEMOVE*: int
-    MOUSEOUT*: int
-    MOUSEOVER*: int
-    MOUSEUP*: int
-    MOVE*: int
-    RESET*: int
-    RESIZE*: int
-    SELECT*: int
-    SUBMIT*: int
-    UNLOAD*: int
+  
+  DataTransferItemKind* {.pure.} = enum
+    File = "file",
+    String = "string"
 
+  # https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
+  DataTransferItem* {.importc.} = ref object of RootObj
+    kind*: cstring
+    `type`*: cstring
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
+  DataTransfer* {.importc.} = ref object of RootObj
+    dropEffect*: cstring
+    effectAllowed*: cstring
+    files*: seq[Element]
+    items*: seq[DataTransferItem]
+    types*: seq[cstring]
+
+  DataTransferDropEffect* {.pure.} = enum 
+    None = "none",
+    Copy = "copy",
+    Link = "link",
+    Move = "move"
+
+  DataTransferEffectAllowed* {.pure.} = enum
+    None = "none",
+    Copy = "copy",
+    CopyLink = "copyLink",
+    CopyMove = "copyMove",
+    Link = "link",
+    LinkMove = "linkMove",
+    Move = "move",
+    All = "all",
+    Uninitialized = "uninitialized"
+
+  DragEventTypes* = enum
+    Drag = "drag",
+    DragEnd = "dragend",
+    DragEnter = "dragenter",
+    DragExit = "dragexit",
+    DragLeave = "dragleave",
+    DragOver = "dragover",
+    DragStart = "dragstart",
+    Drop = "drop"
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
+  DragEvent* {.importc.} = ref object of MouseEvent
+    dataTransfer*: DataTransfer
+    
   TouchList* {.importc.} = ref object of RootObj
     length*: int
 
-  TouchEvent* {.importc.} = ref object of Event
+  TouchEvent* {.importc.} = ref object of UIEvent
     changedTouches*, targetTouches*, touches*: TouchList
 
   Touch* {.importc.} = ref object of RootObj
@@ -397,6 +840,17 @@ type
   TimeOut* {.importc.} = ref object of RootObj
   Interval* {.importc.} = object of RootObj
 
+  AddEventListenerOptions* = object
+    capture*: bool
+    once*: bool
+    passive*: bool
+
+  JFile* {.importc.} = ref object
+    lastModified*: int
+    name*: cstring
+    size*: int
+    `type`*: cstring
+
 when defined(nodejs):
   # we provide a dummy DOM for nodejs for testing purposes
   proc len*(x: Node): int = x.childNodes.len
@@ -483,6 +937,7 @@ proc clearTimeout*(t: Timeout) {.importc, nodecl.}
 
 # EventTarget "methods"
 proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), useCapture: bool = false)
+proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), options: AddEventListenerOptions)
 proc removeEventListener*(et: EventTarget; ev: cstring; cb: proc(ev: Event))
 
 # Window "methods"
@@ -491,7 +946,7 @@ proc back*(w: Window)
 proc blur*(w: Window)
 proc captureEvents*(w: Window, eventMask: int) {.deprecated.}
 proc clearInterval*(w: Window, interval: ref Interval)
-proc clearTimeout*(w: Window, timeout: TimeOut)
+proc clearTimeout*(w: Window, timeout: ref TimeOut)
 proc close*(w: Window)
 proc confirm*(w: Window, msg: cstring): bool
 proc disableExternalCapture*(w: Window)
@@ -500,6 +955,7 @@ proc find*(w: Window, text: cstring, caseSensitive = false,
            backwards = false)
 proc focus*(w: Window)
 proc forward*(w: Window)
+proc getComputedStyle*(w: Window, e: Node, pe:Node = nil): Style
 proc handleEvent*(w: Window, e: Event)
 proc home*(w: Window)
 proc moveBy*(w: Window, x, y: int)
@@ -516,7 +972,7 @@ proc scrollBy*(w: Window, x, y: int)
 proc scrollTo*(w: Window, x, y: int)
 proc setInterval*(w: Window, code: cstring, pause: int): ref Interval
 proc setInterval*(w: Window, function: proc (), pause: int): ref Interval
-proc setTimeout*(w: Window, code: cstring, pause: int): TimeOut
+proc setTimeout*(w: Window, code: cstring, pause: int): ref TimeOut
 proc setTimeout*(w: Window, function: proc (), pause: int): ref Interval
 proc stop*(w: Window)
 proc requestAnimationFrame*(w: Window, function: proc (time: float)): int
@@ -526,6 +982,7 @@ proc cancelAnimationFrame*(w: Window, id: int)
 proc appendData*(n: Node, data: cstring)
 proc cloneNode*(n: Node, copyContent: bool): Node
 proc deleteData*(n: Node, start, len: int)
+proc focus*(e: Node)
 proc getAttribute*(n: Node, attr: cstring): cstring
 proc getAttributeNode*(n: Node, attr: cstring): Node
 proc hasChildNodes*(n: Node): bool
@@ -550,11 +1007,13 @@ proc releaseEvents*(d: Document, eventMask: int) {.deprecated.}
 proc routeEvent*(d: Document, event: Event)
 proc write*(d: Document, text: cstring)
 proc writeln*(d: Document, text: cstring)
+proc querySelector*(d: Document, selectors: cstring): Element
+proc querySelectorAll*(d: Document, selectors: cstring): seq[Element]
 
 # Element "methods"
 proc blur*(e: Element)
 proc click*(e: Element)
-proc focus*(e: Node)
+proc focus*(e: Element)
 proc handleEvent*(e: Element, event: Event)
 proc select*(e: Element)
 proc getElementsByTagName*(e: Element, name: cstring): seq[Element]
@@ -593,12 +1052,28 @@ proc setAttribute*(s: Style, attr, value: cstring, caseSensitive=false)
 
 # Event "methods"
 proc preventDefault*(ev: Event)
+proc stopImmediatePropagation*(ev: Event)
 proc stopPropagation*(ev: Event)
+    
+# KeyboardEvent "methods"
+proc getModifierState*(ev: KeyboardEvent, keyArg: cstring): bool
+
+# MouseEvent "methods"
+proc getModifierState*(ev: MouseEvent, keyArg: cstring): bool
 
 # TouchEvent "methods"
 proc identifiedTouch*(list: TouchList): Touch
 proc item*(list: TouchList, i: int): Touch
 
+# DataTransfer "methods"
+proc clearData*(dt: DataTransfer, format: cstring)
+proc getData*(dt: DataTransfer, format: cstring): cstring
+proc setData*(dt: DataTransfer, format: cstring, data: cstring)
+proc setDragImage*(dt: DataTransfer, img: Element, xOffset: int64, yOffset: int64)
+
+# DataTransferItem "methods"
+proc getAsFile*(dti: DataTransferItem): JFile
+
 {.pop.}
 
 proc setAttr*(n: Node; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
@@ -651,8 +1126,8 @@ proc clientWidth*(): int {.
 proc inViewport*(el: Node): bool =
   let rect = el.getBoundingClientRect()
   result = rect.top >= 0 and rect.left >= 0 and
-           rect.bottom <= clientHeight().float and
-           rect.right <= clientWidth().float
+          rect.bottom <= clientHeight().float and
+          rect.right <= clientWidth().float
 
 proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
 proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
diff --git a/tests/domEventTests.css b/tests/domEventTests.css
new file mode 100644
index 0000000..882c277
--- /dev/null
+++ b/tests/domEventTests.css
@@ -0,0 +1,33 @@
+#dragDiv {
+  background-color: #0d1224;
+  width: 500px;
+  height: 100px;
+  position: absolute; 
+  top: 500px;
+  left: 200px;
+  text-align: center;
+  cursor: move;
+  color: rgb(60, 201, 163);
+}
+
+#results {
+    font-family: monospace;
+    font-size: 10pt;
+    width: 100%;
+    height: 400px;
+    overflow: auto;
+    background-color: #000000;
+    color: forestgreen;
+}
+
+#test10input1, #test10input2, #test11h3, #test12input {
+    visibility: hidden;
+}
+
+#test11h3 {
+    color: gold;
+}
+
+body {
+    background-color: dimgrey;
+}
\ No newline at end of file
diff --git a/tests/domEventTests.html b/tests/domEventTests.html
new file mode 100644
index 0000000..f3bf702
--- /dev/null
+++ b/tests/domEventTests.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DOM Event Tests</title>
+    <link href="domEventTests.css" rel="stylesheet" />
+    <meta charset="UTF-8" />
+    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
+  </head>
+  <body id="body">
+    <div id="ROOT"></div>
+    <script src="nimcache/domEventTests.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/tests/domEventTests.nim b/tests/domEventTests.nim
new file mode 100644
index 0000000..68259c0
--- /dev/null
+++ b/tests/domEventTests.nim
@@ -0,0 +1,629 @@
+import times, jstrutils, strutils, kdom, karax, karaxdsl, vdom, tables
+
+var
+    results : seq[cstring]
+    dragEventsCompleted = initTable[DragEventTypes, bool]()
+    testRunning : array[13, bool]
+    testCompleted : array[13, bool]
+    test2ImageDrop = false
+    dblClickCount = 0
+    test6ClickCount = 0
+    test8Failure = false
+    test10inputFocusCount = 0
+    test12Failure = false
+
+proc getLogText(text: string) : cstring =
+    result = "[$#]: $#" % [format(getLocalTime(getTime()), "HH:mm:ss"), $text]
+
+proc log(text: string, clear: bool = false) =
+    if clear:
+        results = @[]
+    results.add getLogText(text)
+    echo text
+    redrawSync()
+
+    # Scroll to top after adding text using JQuery
+    discard window.setTimeout("$('#results').animate({ scrollTop: 0 }, 100);", 100)
+    
+proc check(cond: bool, msg: string) =
+    if not cond:
+        log "FAIL: " & msg
+        doAssert(cond, msg)
+
+proc check(cond: bool, msg: string, warn: bool) : bool =
+    if not cond:
+        if warn:
+            log "WARNING: " & msg
+        else:
+            log "FAIL: " & msg
+            doAssert(cond, msg)
+    result = cond
+
+proc dragDivDragStart(ev: kdom.Event) =
+    dragEventsCompleted[DragStart] = true
+    var dgev = ((DragEvent)ev)
+    var dragDiv = document.getElementById("dragDiv")
+
+    if dragDiv != nil:
+        var style = window.getComputedStyle(dgev.target)
+        var dataX = $(parseInt(style.left) - dgev.clientX)
+        var dataY = $(parseInt(style.top) - dgev.clientY)
+        dgev.dataTransfer.setData("text/plain", dataX & "," & dataY)
+        var img = (ImageElement)document.createElement("img")
+        img.src ="https://nim-lang.org/assets/img/logo.svg"
+        dgev.dataTransfer.setDragImage(img, 0, 0)
+    
+proc dragDivDragOver(ev: kdom.Event) =
+    dragEventsCompleted[DragOver] = true
+    ev.preventDefault()
+
+proc checkAllTests() =
+    var allTestsPassed = true
+    for a in testCompleted:
+        if not a:
+            allTestsPassed = false
+            break
+    
+    if allTestsPassed:
+        log "All tests completed successfully!"
+    else:
+        log "Some tests failed. Check the log."
+    
+proc completeTest13() =
+    testRunning[12] = false
+    testCompleted[12] = true
+    log "Test 13 completed successfully."
+    checkAllTests()
+
+proc test13() =
+    testRunning[12] = true
+    log "Test 13 started."
+    log "This test verifies KeyboardEvent getModifierState functionality."
+    log "To continue, press the left CTRL key."
+    
+proc test12focus1(ev: kdom.Event) =
+    ev.stopImmediatePropagation()
+
+proc test12focus2(ev: kdom.Event) =
+    test12Failure = true
+    check false, "Unexpected listener invocation."
+
+proc test12focus3(ev: kdom.Event) =
+    test12Failure = true
+    check false, "Unexpected listener invocation."
+
+proc completeTest12() =
+    if not test12Failure:    
+        var elmt = document.getElementById("test12input")
+        elmt.style.visibility = "hidden"
+        testRunning[11] = false
+        testCompleted[11] = true
+        log "Test 12 completed successfully."
+        test13()
+
+proc test12() =
+    testRunning[11] = true
+    log "Test 12 started."
+    log "This test verifies stopImmediatePropagation functionality."
+
+    var elmt = document.getElementById("test12input")
+    elmt.style.visibility = "visible"
+    elmt.addEventListener($Focus, test12focus1)
+    elmt.addEventListener($Focus, test12focus2)
+    elmt.addEventListener($Focus, test12focus3)
+    elmt.focus()
+    discard setTimeout(completeTest12, 500)
+    
+proc completeTest11() =
+    document.querySelector("h3").style.visibility = "hidden"
+    
+    testRunning[10] = false
+    testCompleted[10] = true
+    log "Test 11 completed."
+    test12()
+
+proc test11() =
+    testRunning[10] = true
+    log "Test 11 started."
+    log "This test checks querySelector and querySelectorAll."
+    
+    document.getElementById("test11h3").style.visibility = "visible"
+
+    var elmt = document.querySelector("h3")
+    check elmt != nil, "querySelector returned nil."
+    log "text: " & $elmt.innerHTML
+    check $elmt.innerHTML == "test 11", "Unexpected h3 value."
+
+    var elmts = document.querySelectorAll("h3")
+    log "elmts len: " & $elmts.len
+    check elmts.len == 1, "Unexpected elmts len."
+
+    log "text: " & $elmts[0].innerHTML
+    check $elmts[0].innerHTML == "test 11", "Unexpected h3 value."
+
+    discard setTimeout(completeTest11, 500)
+
+proc completeTest10() =
+    testRunning[9] = false
+    testCompleted[9] = true
+    var test10input1 = document.getElementById("test10input1")
+    var test10input2 = document.getElementById("test10input2")
+    test10input1.style.visibility = "hidden"
+    test10input2.style.visibility = "hidden"
+    log "Test 10 completed."
+    test11()
+
+proc test10inputOnfocus(ev: kdom.Event) =
+    if testRunning[9]:
+        inc test10inputFocusCount
+        if test10inputFocusCount > 3:
+            discard setTimeout(completeTest10, 500)
+
+proc test10() =
+    log "Test 10 started."
+    log "This test checks element.focus()."
+    testRunning[9] = true
+    var test10input1 = document.getElementById("test10input1")
+    var test10input2 = document.getElementById("test10input2")
+    test10input1.style.visibility = "visible"
+    test10input2.style.visibility = "visible"
+    test10input1.addEventListener($DomEvent.Focus, test10inputOnfocus)
+    test10input2.addEventListener($DomEvent.Focus, test10inputOnfocus)
+    test10input1.focus()
+    test10input2.focus()
+    test10input1.focus()
+    test10input2.focus()
+
+proc completeTest9() =
+    var test9Value = $document.getElementById("test9value").value
+    doAssert(test9Value == "[test9]", "Unexpected test9 value.")
+    testRunning[8] = false
+    testCompleted[8] = true
+    test10()
+
+proc test9() =
+    log "Test 9 started."
+    log "This tests the setTimeout(w: Window, code: cstring, pause: int) proc."
+    testRunning[8] = true
+
+    discard window.setTimeout("document.getElementById('test9value').value = '[test9]';", 500)
+    discard window.setTimeout(completeTest9, 1000)
+    
+proc completeTest8() =
+    if not test8Failure:
+        log "Test 8 completed successfully."
+        testRunning[7] = false
+        testCompleted[7] = true
+        test9()
+    else:
+        log "Test 8 failed."
+
+proc failTest8() =
+    test8Failure = true
+    check(false, "ClearTimeout failed.")    
+
+proc test8() =
+    log "Test 8 started."
+    log "This test checks that clearTimeout() works correctly."
+    testRunning[7] = true
+    var timeout = setTimeout(failTest8, 1000)
+    clearTimeout(timeout)
+    discard setTimeout(completeTest8, 1200)
+    
+proc test7() =
+    log "Test 7 started."
+    log "This test ensures that mouse events correctly pass button and key modifier information."
+    log "To continue, right-click while holding SHIFT."
+    testRunning[6] = true
+
+# A mouseMove handler is needed (even if empty) so mouseDown will have a value for movementX and movementY
+proc mouseMove(ev: kdom.Event) =
+    discard
+
+proc mouseDown(ev: kdom.Event) =
+    var me = (MouseEvent)ev
+    if testRunning[5]:
+        log "[ME] button: " & $me.button
+        log "[ME] buttons: " & $me.buttons
+        log "[ME] altKey: " & $me.altKey
+        log "[ME] ctrlKey: " & $me.ctrlKey
+        log "[ME] metaKey: " & $me.metaKey
+        log "[ME] shiftKey: " & $me.shiftKey
+
+        log "[ME] clientX: " & $me.clientX
+        check me.clientX > 0, "Unexpected clientX value."
+
+        log "[ME] clientY: " & $me.clientY
+        check me.clientY > 0, "Unexpected clientY value."
+
+        log "[ME] movementX: " & $me.movementX
+        check me.movementX > 0, "Unexpected movementX value."
+
+        log "[ME] movementY: " & $me.movementY
+        check me.movementY > 0, "Unexpected movementY value."
+        
+        log "[ME] offsetX: " & $me.offsetX
+        check me.offsetX > 0, "Unexpected offsetX value."
+        
+        log "[ME] offsetY: " & $me.offsetY
+        check me.offsetY > 0, "Unexpected offsetY value."
+
+        log "[ME] pageX: " & $me.pageX
+        check me.pageX > 0, "Unexpected pageX value."
+
+        log "[ME] pageY: " & $me.pageY
+        check me.pageY > 0, "Unexpected pageY value."
+
+        log "[ME] relatedTarget == nil: " & $(me.relatedTarget == nil)
+
+        log "[ME] screenX: " & $me.screenX
+        check me.screenX > 0, "Unexpected screenX value."
+
+        log "[ME] screenY: " & $me.screenY
+        check me.screenY > 0, "Unexpected screenY value."
+
+        log "[ME] x: " & $me.x
+        check me.x > 0, "Unexpected x value."
+
+        log "[ME] y: " & $me.y
+        check me.y > 0, "Unexpected y value."
+
+        if dblClickCount == 1:
+            inc test6ClickCount
+
+            if test6ClickCount > 1:
+                testRunning[5] = false
+                testCompleted[5] = true
+                log "Test 6 completed successfully."
+                test7()
+    elif testRunning[6]:
+        log "[ME] buttons: " & $me.buttons
+        var passed = check(me.buttons == (int)SecondaryButton, "Unexpected buttons value.", true)
+        
+        log "[ME] shiftKey: " & $me.shiftKey
+        passed = passed and check(me.shiftKey, "Unexpected shiftKey value.", true)
+        
+        var isShiftPressed = me.getModifierState($KeyboardEventKey.Shift)
+        log "[ME] getModifierState shift result: " & $isShiftPressed
+        passed = passed and check(isShiftPressed, "Unexpected getModifierState shift result.", true)
+        
+        if passed:
+            log "Test 7 completed successfully."
+            testRunning[6] = false
+            testCompleted[6] = true
+
+        ev.preventDefault()
+
+        if testCompleted[6]:
+            test8()
+
+proc dblClick(ev: kdom.Event) =
+    inc dblClickCount
+    check dblClickCount == 1, "Unexpected double-click event invocation."
+    log "Try double-clicking again."
+
+proc test6() =
+    log "Test 6 started."
+    log "This test validates that addEventListener can be called by passing AddEventListenerOptions, and the options work correctly."
+    log "To continue, try double-clicking the mouse."
+    var options = AddEventListenerOptions(once:true)
+    document.addEventListener($DomEvent.DblClick, dblClick, options)
+    testRunning[5] = true
+
+proc test5() =
+    log "Test 5 started."
+    log "This test validates the newly added properties: window.screen.width, window.scren.height, element.clientWidth, and element.clientHeight."
+    log "window.screen.width: " & $window.screen.width
+    check(window.screen.width > 0, "Unexpected value for window.screen.width.")
+
+    log "window.screen.height: " & $window.screen.height
+    check(window.screen.height > 0, "Unexpected value for window.screen.height.")
+    
+    var elem = document.getElementById("results")
+    log "results div clientWidth: " & $elem.clientWidth
+    check(elem.clientWidth > 0, "Unexpected value for clientWidth.")
+
+    log "results div clientHeight: " & $elem.clientHeight
+    check(elem.clientHeight > 0, "Unexpected value for clientHeight.")
+    
+    testRunning[4] = false
+    testCompleted[4] = true
+
+    log "Test 5 completed successfully."
+    test6()
+    
+proc keyDown(ev: kdom.Event) =
+    var kbev = ((KeyboardEvent)ev)
+    if testRunning[2]:
+        log "[KB] altKey: " & $kbev.altKey
+        log "[KB] ctrlKey: " & $kbev.ctrlKey
+        log "[KB] metaKey: " & $kbev.metaKey
+        log "[KB] shiftKey: " & $kbev.shiftKey
+        log "[KB] code: " & $kbev.code
+        log "[KB] isComposing: " & $kbev.isComposing
+        log "[KB] key: " & $kbev.key
+        log "[KB] keyCode: " & $kbev.keyCode
+        log "[KB] location: " & $kbev.location
+
+        log "Test 3 completed successfully."
+        testRunning[2] = false
+        testCompleted[2] = true
+
+        testRunning[3] = true
+        log "Test 4 started."
+        log "This test ensures the child events have access to base event settings."
+
+        log "[KB] event.bubbles: " & $kbev.bubbles
+        check kbev.bubbles, "Unexpected event.bubbles value."
+
+        log "[KB] event.cancelBubble: " & $kbev.cancelBubble
+        check kbev.cancelBubble == false, "Unexpected event.cancelBubble value."
+
+        log "[KB] event.cancelable: " & $kbev.cancelable
+        check kbev.cancelable, "Unexpected event.cancelable value."
+
+        log "[KB] event.composed: " & $kbev.composed
+        check kbev.composed, "Unexpected event.composed value."
+
+        log "[KB] event.currentTarget.nodeName: " & $kbev.currentTarget.nodeName
+        check kbev.currentTarget.nodeName == "#document", "Unexpected event.currentTarget.nodeName value."
+
+        log "[KB] event.defaultPrevented: " & $kbev.defaultPrevented
+        check kbev.defaultPrevented == false, "Unexpected event.defaultPrevented value."
+
+        log "[KB] event.eventPhase: " & $kbev.eventPhase
+        check EventPhase(kbev.eventPhase) == BubblingPhase, "Unexpected event.eventPhase value."
+
+        log "[KB] event.isTrusted: " & $kbev.isTrusted
+        check kbev.isTrusted, "Unexpected event.isTrusted value."
+
+        log "[UI] kbev.detail: " & $kbev.detail
+
+        log "[UI] kbev.view.outerHeight: " & $kbev.view.outerHeight
+        check kbev.view.outerHeight > 0, "Unexpected view.outerHeight value."
+
+        log "[UI] kbev.view.outerWidth: " & $kbev.view.outerWidth
+        check kbev.view.outerWidth > 0, "Unexpected view.outerWidth value."
+
+        testRunning[3] = false
+        testCompleted[3] = true
+        log "Test 4 completed."
+        test5()
+    elif testRunning[12]:
+        if kbev.code == "ControlLeft":
+            log "[KB] altKey: " & $kbev.altKey
+            log "[KB] ctrlKey: " & $kbev.ctrlKey
+            log "[KB] metaKey: " & $kbev.metaKey
+            log "[KB] shiftKey: " & $kbev.shiftKey
+            log "[KB] code: " & $kbev.code
+            log "[KB] isComposing: " & $kbev.isComposing
+            log "[KB] key: " & $kbev.key
+            log "[KB] keyCode: " & $kbev.keyCode
+            log "[KB] location: " & $kbev.location
+            var isControl = kbev.getModifierState($KeyboardEventKey.Control)
+            log "[KB] getModifierState result: " & $isControl
+            check isControl, "Unexpected getModifierState return value."
+            completeTest13()
+        
+proc test3() =
+    log "Test 3 started."
+    log "This test validates KeyboardEvent handling."
+    log "Click on the browser to focus, and then press any key."
+    testRunning[2] = true
+    
+proc dragDivDrop(ev: kdom.Event) =
+    dragEventsCompleted[Drop] = true
+    var dgev = ((DragEvent)ev)
+    var dragDiv = document.getElementById("dragDiv")
+    var data = $dgev.dataTransfer.getData("text/plain")
+    var dt = dgev.dataTransfer
+    
+    if not test2ImageDrop:
+        var offset = data.split(",")
+        var newLeft = dgev.clientX + parseInt(offset[0])
+        var newTop = dgev.clientY + parseInt(offset[1])
+
+        if newLeft < 0: newLeft = 0
+        if newTop < 0: newTop = 0
+        if newLeft + dragDiv.clientWidth > window.outerWidth: newLeft = window.outerWidth - dragDiv.clientWidth
+        if newTop + dragDiv.clientHeight > window.outerHeight: newTop = window.outerHeight - dragDiv.clientHeight
+
+        dragDiv.style.left = $newLeft & "px"
+        dragDiv.style.top = $newTop & "px"
+
+        if testRunning[0]:
+            log "[drop] Drop coords: $#, $#" % [$newLeft, $newTop]
+
+    if testCompleted[0] and not testCompleted[1] and not testRunning[1]:
+        testRunning[1] = true
+        log "Test 2 started."
+        log "This test validates the DataTransfer and DataTransferItem objects passed as part of the drag events."
+        var isChrome = ($navigator.userAgent).contains("Chrome")
+
+        log "[DT] effectAllowed: " & $dt.effectAllowed
+        var expectedEffectAllowed = $Uninitialized
+        if isChrome: 
+            expectedEffectAllowed = if test2ImageDrop: $DataTransferEffectAllowed.Copy else: $DataTransferEffectAllowed.All
+        check(dt.effectAllowed == $expectedEffectAllowed, "Unexpected effectAllowed value.")
+
+        if not test2ImageDrop:
+            log "[DT] dropEffect: " & $dt.dropEffect
+            var expectedDropEffect = if isChrome: $DataTransferDropEffect.None else: $DataTransferDropEffect.Move
+            check(dt.dropEffect == $expectedDropEffect, "Unexpected dropEffect value.")
+
+        var expectedFilesLen = if test2ImageDrop: 1 else: 0
+        log "[DT] files len: " & $dt.files.len
+        check(dt.files.len == expectedFilesLen, "Unexpected files length.")
+        
+        var expectedItemsLen = 1
+        log "[DT] items len: " & $dt.items.len
+        check(dt.items.len == expectedItemsLen, "Unexpected items length.")
+
+        var expectedItemKind = if test2ImageDrop: $DataTransferItemKind.File else: $DataTransferItemKind.String
+        log "[DT] items[0].kind: " & $dt.items[0].kind
+        check(dt.items[0].kind == expectedItemKind, "Unexpected item kind.")
+
+        var expectedItemType = if test2ImageDrop: "image/png" else: "text/plain"
+        log "[DT] items[0].type: " & $dt.items[0].`type`
+        check(dt.items[0].`type` == expectedItemType, "Unexpected item type.")
+        
+        var expectedTypesLen = if not isChrome and test2ImageDrop: 2 else: 1
+        log "[DT] types len: " & $dt.types.len
+        check(dt.types.len == expectedTypesLen, "Unexpected types length.")
+
+        if test2ImageDrop:
+            log "[DT] types[0]: " & $dt.types[0]
+            if isChrome:
+                check(dt.types[0] == "Files", "Unexpected type value.")
+            else:
+                log "[DT] types[1]: " & $dt.types[1]
+                check(dt.types[0] == "application/x-moz-file", "Unexpected type value.")
+                check(dt.types[1] == "Files", "Unexpected type value.")
+                
+        if test2ImageDrop:
+            test2ImageDrop = false
+
+            # TODO: Determine why getAsString() does invoke callback
+            # proc getAsString*(dti: DataTransferItem, callback: proc(data: cstring))
+            
+            var jfile = dt.items[0].getAsFile()
+            log "[DT] file name: " & $jfile.name
+            check(jfile.name.len > 0, "Unexpected file name length.")
+                
+            testCompleted[1] = true
+            testRunning[1] = false
+            log "Test 2 completed successfully."
+            test3()
+        
+            dgev.preventDefault()
+            return
+
+        document.getElementById("dragDiv").style.visibility = "hidden"
+        log "To continue, drag a .PNG file (file type matters) anywhere on this page."
+        log "NOTE: If the browser redirects to the image, then consider this test as failed."
+        test2ImageDrop = true
+        testRunning[1] = false
+
+    dgev.preventDefault()
+
+proc dragDivDrag(ev: kdom.Event) =
+    dragEventsCompleted[Drag] = true
+    var dgev = ((DragEvent)ev)
+    dgev.preventDefault()
+
+proc dragDivDragLeave(ev: kdom.Event) =
+    dragEventsCompleted[DragLeave] = true
+    var dgev = ((DragEvent)ev)
+    if testRunning[0]:
+        log "[dragLeave]"
+    dgev.preventDefault()
+  
+proc dragDivDragExit(ev: kdom.Event) =
+    dragEventsCompleted[DragExit] = true
+    var dgev = ((DragEvent)ev)
+    if testRunning[0]:
+        log "[dragExit]"
+    dgev.preventDefault()
+    
+proc dragDivDragEnd(ev: kdom.Event) =
+    dragEventsCompleted[DragEnd] = true
+    var dgev = ((DragEvent)ev)
+    if testRunning[0]:
+        log "[dragEnd]"
+    dgev.preventDefault()
+        
+proc dragDivDragEnter(ev: kdom.Event) =
+    dragEventsCompleted[DragEnter] = true
+    if testRunning[0]:
+        log "[dragEnter]"
+    var dgev = ((DragEvent)ev)
+    dgev.preventDefault()
+
+proc initDragEvents() =
+    log "Drag event initialization started."
+    var dragDiv = document.getElementById("dragDiv")
+    document.addEventListener($DragEventTypes.DragOver, dragDivDragOver, false)
+    document.addEventListener($DragEventTypes.Drop, dragDivDrop, false)
+    document.addEventListener($DragEventTypes.Drag, dragDivDrag, false)
+    dragDiv.addEventListener($DragEventTypes.DragStart, dragDivDragStart, false)
+    dragDiv.addEventListener($DragEventTypes.DragExit, dragDivDragExit, false)
+    dragDiv.addEventListener($DragEventTypes.DragLeave, dragDivDragLeave, false)
+    dragDiv.addEventListener($DragEventTypes.DragEnd, dragDivDragEnd, false)
+    dragDiv.addEventListener($DragEventTypes.DragEnter, dragDivDragEnter, false)
+    log "Drag event initialization complete."
+    log "Drag the div to continue the test. Make sure you drag the div over another element."
+    log "Then click the \"Check test 1 status\" button."
+
+proc initMouseEvents() =
+    log "Mouse event initialization started."
+    document.addEventListener($DomEvent.MouseDown, mouseDown, false)
+    document.addEventListener($DomEvent.MouseMove, mouseMove, false)
+    log "Mouse event initialization complete."
+    
+proc initKbEvents() =
+    log "KB event initialization started."
+    document.addEventListener($DomEvent.KeyDown, keyDown, false)
+    log "KB event initialization complete."
+    
+proc startTests() =
+    log "[Disclaimer: these tests have been tested successfully on Linux with Firefox and Chromium. Your results may vary.]"
+    log "Note: these tests require some manual steps, which will be shown here."
+    log "Note: new entries appear in this text area at the top, so read in this direction."
+    log "  | |    | |    | |    | |    | |    | |    | |    | |    | |    | |    | |"
+    log " /  \\  /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\"
+    log "Test 1 started."
+    log "This test checks that drag events are fired."
+    testRunning[0] = true
+    for evt in [Drag, DragEnd, DragEnter, DragExit, DragLeave, DragOver, DragStart, Drop]:
+        dragEventsCompleted.add(evt, false)
+    initKbEvents()
+    initMouseEvents()
+    initDragEvents()
+    
+proc checkTest1Status() =
+    var evtsCompleted = true
+
+    # Chrome doesn't seem to send DragExit, so ignore this
+    if (($navigator.userAgent).contains("Chrome")):
+        dragEventsCompleted[DragExit] = true
+    
+    for evt, completed in dragEventsCompleted:
+        if not completed:
+            evtsCompleted = false
+            break
+
+    if evtsCompleted:
+        testRunning[0] = false
+        log "Test 1 completed successfully. Drag the div anywhere to start the next test."
+        testCompleted[0] = true
+        document.getElementById("checkTest1").style.visibility = "hidden"
+    else:
+        log "Test 1 has not completed yet. Make sure you drag the div over another element."
+        log "Status:"
+        for evt, completed in dragEventsCompleted:
+            log $evt & ": " & $completed
+
+proc createDom(): VNode =
+    result = buildHtml(tdiv()):
+        tdiv(id="dragDiv", draggable="true"):
+            tdiv(class="divcontent"):
+                text "draggable div"
+        tdiv(id="results"):
+            for i in countdown(results.len - 1, 0):
+                tdiv:
+                    text $results[i]
+        tdiv(id="checkTest1"):
+            button(onclick=checkTest1Status):
+                text "Check test 1 status"
+        input(`type`="hidden", id="test9value")
+        input(`type`="text", id="test10input1")
+        input(`type`="text", id="test10input2")
+        h3(id="test11h3"):
+            text "test 11"
+        input(`type`="text", id="test12input")
+        
+proc onload() =
+    startTests()
+    
+setRenderer createDom
+onload()
diff --git a/tests/jquery-3.2.1.min.js b/tests/jquery-3.2.1.min.js
new file mode 100644
index 0000000..644d35e
--- /dev/null
+++ b/tests/jquery-3.2.1.min.js
@@ -0,0 +1,4 @@
+/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */
+!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.2.1",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=Array.isArray(d)))?(e?(e=!1,f=c&&Array.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;d<c;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:i.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;d<c;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;f<g;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,f=0,h=[];if(w(a))for(d=a.length;f<d;f++)e=b(a[f],f,c),null!=e&&h.push(e);else for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);return g.apply([],h)},guid:1,proxy:function(a,b){var c,d,e;if("string"==typeof b&&(c=a[b],b=a,a=c),r.isFunction(a))return d=f.call(arguments,2),e=function(){return a.apply(b||this,d.concat(f.call(arguments)))},e.guid=a.guid=a.guid||r.guid++,e},now:Date.now,support:o}),"function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){j["[object "+b+"]"]=b.toLowerCase()});function w(a){var b=!!a&&"length"in a&&a.length,c=r.type(a);return"function"!==c&&!r.isWindow(a)&&("array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a)}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=function(a,b){for(var c=0,d=a.length;c<d;c++)if(a[c]===b)return c;return-1},J="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",K="[\\x20\\t\\r\\n\\f]",L="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",M="\\["+K+"*("+L+")(?:"+K+"*([*^$|!~]?=)"+K+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+L+"))|)"+K+"*\\]",N=":("+L+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",O=new RegExp(K+"+","g"),P=new RegExp("^"+K+"+|((?:^|[^\\\\])(?:\\\\.)*)"+K+"+$","g"),Q=new RegExp("^"+K+"*,"+K+"*"),R=new RegExp("^"+K+"*([>+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(N),U=new RegExp("^"+L+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+N),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),aa=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:d<0?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ba=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ca=function(a,b){return b?"\0"===a?"\ufffd":a.slice(0,-1)+"\\"+a.charCodeAt(a.length-1).toString(16)+" ":"\\"+a},da=function(){m()},ea=ta(function(a){return a.disabled===!0&&("form"in a||"label"in a)},{dir:"parentNode",next:"legend"});try{G.apply(D=H.call(v.childNodes),v.childNodes),D[v.childNodes.length].nodeType}catch(fa){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s=b&&b.ownerDocument,w=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==w&&9!==w&&11!==w)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==w&&(l=Z.exec(a)))if(f=l[1]){if(9===w){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(s&&(j=s.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(l[2])return G.apply(d,b.getElementsByTagName(a)),d;if((f=l[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==w)s=b,r=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(ba,ca):b.setAttribute("id",k=u),o=g(a),h=o.length;while(h--)o[h]="#"+k+" "+sa(o[h]);r=o.join(","),s=$.test(a)&&qa(b.parentNode)||b}if(r)try{return G.apply(d,s.querySelectorAll(r)),d}catch(x){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(P,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("fieldset");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&a.sourceIndex-b.sourceIndex;if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return function(b){return"form"in b?b.parentNode&&b.disabled===!1?"label"in b?"label"in b.parentNode?b.parentNode.disabled===a:b.disabled===a:b.isDisabled===a||b.isDisabled!==!a&&ea(b)===a:b.disabled===a:"label"in b&&b.disabled===a}}function pa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function qa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return!!b&&"HTML"!==b.nodeName},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),v!==n&&(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(n.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){return a.getAttribute("id")===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}}):(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c,d,e,f=b.getElementById(a);if(f){if(c=f.getAttributeNode("id"),c&&c.value===a)return[f];e=b.getElementsByName(a),d=0;while(f=e[d++])if(c=f.getAttributeNode("id"),c&&c.value===a)return[f]}return[]}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){if("undefined"!=typeof b.getElementsByClassName&&p)return b.getElementsByClassName(a)},r=[],q=[],(c.qsa=Y.test(n.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){a.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+K+"*[*^$|!~]?="),2!==a.querySelectorAll(":enabled").length&&q.push(":enabled",":disabled"),o.appendChild(a).disabled=!0,2!==a.querySelectorAll(":disabled").length&&q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Y.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"*"),s.call(a,"[s!='']:x"),r.push("!=",N)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Y.test(o.compareDocumentPosition),t=b||Y.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?I(k,a)-I(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?I(k,a)-I(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?la(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(S,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.escape=function(a){return(a+"").replace(ba,ca)},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(_,aa),a[3]=(a[3]||a[4]||a[5]||"").replace(_,aa),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return V.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&T.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(_,aa).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:!b||(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(O," ")+" ").indexOf(c)>-1:"|="===b&&(e===c||e.slice(0,c.length+1)===c+"-"))}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(P,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(_,aa),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return U.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(_,aa).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:oa(!1),disabled:oa(!0),checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:pa(function(){return[0]}),last:pa(function(a,b){return[b-1]}),eq:pa(function(a,b,c){return[c<0?c+b:c]}),even:pa(function(a,b){for(var c=0;c<b;c+=2)a.push(c);return a}),odd:pa(function(a,b){for(var c=1;c<b;c+=2)a.push(c);return a}),lt:pa(function(a,b,c){for(var d=c<0?c+b:c;--d>=0;)a.push(d);return a}),gt:pa(function(a,b,c){for(var d=c<0?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=ma(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=na(b);function ra(){}ra.prototype=d.filters=d.pseudos,d.setFilters=new ra,g=ga.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){c&&!(e=Q.exec(h))||(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=R.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(P," ")}),h=h.slice(c.length));for(g in d.filter)!(e=V[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?ga.error(a):z(a,i).slice(0)};function sa(a){for(var b=0,c=a.length,d="";b<c;b++)d+=a[b].value;return d}function ta(a,b,c){var d=b.dir,e=b.next,f=e||d,g=c&&"parentNode"===f,h=x++;return b.first?function(b,c,e){while(b=b[d])if(1===b.nodeType||g)return a(b,c,e);return!1}:function(b,c,i){var j,k,l,m=[w,h];if(i){while(b=b[d])if((1===b.nodeType||g)&&a(b,c,i))return!0}else while(b=b[d])if(1===b.nodeType||g)if(l=b[u]||(b[u]={}),k=l[b.uniqueID]||(l[b.uniqueID]={}),e&&e===b.nodeName.toLowerCase())b=b[d]||b;else{if((j=k[f])&&j[0]===w&&j[1]===h)return m[2]=j[2];if(k[f]=m,m[2]=a(b,c,i))return!0}return!1}}function ua(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function va(a,b,c){for(var d=0,e=b.length;d<e;d++)ga(a,b[d],c);return c}function wa(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;h<i;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function xa(a,b,c,d,e,f){return d&&!d[u]&&(d=xa(d)),e&&!e[u]&&(e=xa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||va(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:wa(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=wa(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?I(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=wa(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ya(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ta(function(a){return a===b},h,!0),l=ta(function(a){return I(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];i<f;i++)if(c=d.relative[a[i].type])m=[ta(ua(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;e<f;e++)if(d.relative[a[e].type])break;return xa(i>1&&ua(m),i>1&&sa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(P,"$1"),c,i<e&&ya(a.slice(i,e)),e<f&&ya(a=a.slice(e)),e<f&&sa(a))}m.push(c)}return ua(m)}function za(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=E.call(i));u=wa(u)}G.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&ga.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=ya(b[c]),f[u]?d.push(f):e.push(f);f=A(a,za(e,d)),f.selector=a}return f},i=ga.select=function(a,b,c,e){var f,i,j,k,l,m="function"==typeof a&&a,n=!e&&g(a=m.selector||a);if(c=c||[],1===n.length){if(i=n[0]=n[0].slice(0),i.length>2&&"ID"===(j=i[0]).type&&9===b.nodeType&&p&&d.relative[i[1].type]){if(b=(d.find.ID(j.matches[0].replace(_,aa),b)||[])[0],!b)return c;m&&(b=b.parentNode),a=a.slice(i.shift().value.length)}f=V.needsContext.test(a)?0:i.length;while(f--){if(j=i[f],d.relative[k=j.type])break;if((l=d.find[k])&&(e=l(j.matches[0].replace(_,aa),$.test(i[0].type)&&qa(b.parentNode)||b))){if(i.splice(f,1),a=e.length&&sa(i),!a)return G.apply(c,e),c;break}}}return(m||h(a,n))(e,b,!p,c,!b||$.test(a)&&qa(b.parentNode)||b),c},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("fieldset"))}),ja(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){if(!c)return a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){if(!c&&"input"===a.nodeName.toLowerCase())return a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(J,function(a,b,c){var d;if(!c)return a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);r.find=x,r.expr=x.selectors,r.expr[":"]=r.expr.pseudos,r.uniqueSort=r.unique=x.uniqueSort,r.text=x.getText,r.isXMLDoc=x.isXML,r.contains=x.contains,r.escapeSelector=x.escape;var y=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&r(a).is(c))break;d.push(a)}return d},z=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},A=r.expr.match.needsContext;function B(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()}var C=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,D=/^.[^:#\[\.,]*$/;function E(a,b,c){return r.isFunction(b)?r.grep(a,function(a,d){return!!b.call(a,d,a)!==c}):b.nodeType?r.grep(a,function(a){return a===b!==c}):"string"!=typeof b?r.grep(a,function(a){return i.call(b,a)>-1!==c}):D.test(b)?r.filter(b,a,c):(b=r.filter(b,a),r.grep(a,function(a){return i.call(b,a)>-1!==c&&1===a.nodeType}))}r.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?r.find.matchesSelector(d,a)?[d]:[]:r.find.matches(a,r.grep(b,function(a){return 1===a.nodeType}))},r.fn.extend({find:function(a){var b,c,d=this.length,e=this;if("string"!=typeof a)return this.pushStack(r(a).filter(function(){for(b=0;b<d;b++)if(r.contains(e[b],this))return!0}));for(c=this.pushStack([]),b=0;b<d;b++)r.find(a,e[b],c);return d>1?r.uniqueSort(c):c},filter:function(a){return this.pushStack(E(this,a||[],!1))},not:function(a){return this.pushStack(E(this,a||[],!0))},is:function(a){return!!E(this,"string"==typeof a&&A.test(a)?r(a):a||[],!1).length}});var F,G=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,H=r.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||F,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:G.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof r?b[0]:b,r.merge(this,r.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),C.test(e[1])&&r.isPlainObject(b))for(e in b)r.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&(this[0]=f,this.length=1),this}return a.nodeType?(this[0]=a,this.length=1,this):r.isFunction(a)?void 0!==c.ready?c.ready(a):a(r):r.makeArray(a,this)};H.prototype=r.fn,F=r(d);var I=/^(?:parents|prev(?:Until|All))/,J={children:!0,contents:!0,next:!0,prev:!0};r.fn.extend({has:function(a){var b=r(a,this),c=b.length;return this.filter(function(){for(var a=0;a<c;a++)if(r.contains(this,b[a]))return!0})},closest:function(a,b){var c,d=0,e=this.length,f=[],g="string"!=typeof a&&r(a);if(!A.test(a))for(;d<e;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&r.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?r.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?i.call(r(a),this[0]):i.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(r.uniqueSort(r.merge(this.get(),r(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function K(a,b){while((a=a[b])&&1!==a.nodeType);return a}r.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return y(a,"parentNode")},parentsUntil:function(a,b,c){return y(a,"parentNode",c)},next:function(a){return K(a,"nextSibling")},prev:function(a){return K(a,"previousSibling")},nextAll:function(a){return y(a,"nextSibling")},prevAll:function(a){return y(a,"previousSibling")},nextUntil:function(a,b,c){return y(a,"nextSibling",c)},prevUntil:function(a,b,c){return y(a,"previousSibling",c)},siblings:function(a){return z((a.parentNode||{}).firstChild,a)},children:function(a){return z(a.firstChild)},contents:function(a){return B(a,"iframe")?a.contentDocument:(B(a,"template")&&(a=a.content||a),r.merge([],a.childNodes))}},function(a,b){r.fn[a]=function(c,d){var e=r.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=r.filter(d,e)),this.length>1&&(J[a]||r.uniqueSort(e),I.test(a)&&e.reverse()),this.pushStack(e)}});var L=/[^\x20\t\r\n\f]+/g;function M(a){var b={};return r.each(a.match(L)||[],function(a,c){b[c]=!0}),b}r.Callbacks=function(a){a="string"==typeof a?M(a):r.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=e||a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){r.each(b,function(b,c){r.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==r.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return r.each(arguments,function(a,b){var c;while((c=r.inArray(b,f,c))>-1)f.splice(c,1),c<=h&&h--}),this},has:function(a){return a?r.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||b||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j};function N(a){return a}function O(a){throw a}function P(a,b,c,d){var e;try{a&&r.isFunction(e=a.promise)?e.call(a).done(b).fail(c):a&&r.isFunction(e=a.then)?e.call(a,b,c):b.apply(void 0,[a].slice(d))}catch(a){c.apply(void 0,[a])}}r.extend({Deferred:function(b){var c=[["notify","progress",r.Callbacks("memory"),r.Callbacks("memory"),2],["resolve","done",r.Callbacks("once memory"),r.Callbacks("once memory"),0,"resolved"],["reject","fail",r.Callbacks("once memory"),r.Callbacks("once memory"),1,"rejected"]],d="pending",e={state:function(){return d},always:function(){return f.done(arguments).fail(arguments),this},"catch":function(a){return e.then(null,a)},pipe:function(){var a=arguments;return r.Deferred(function(b){r.each(c,function(c,d){var e=r.isFunction(a[d[4]])&&a[d[4]];f[d[1]](function(){var a=e&&e.apply(this,arguments);a&&r.isFunction(a.promise)?a.promise().progress(b.notify).done(b.resolve).fail(b.reject):b[d[0]+"With"](this,e?[a]:arguments)})}),a=null}).promise()},then:function(b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(b<f)){if(a=d.apply(h,i),a===c.promise())throw new TypeError("Thenable self-resolution");j=a&&("object"==typeof a||"function"==typeof a)&&a.then,r.isFunction(j)?e?j.call(a,g(f,c,N,e),g(f,c,O,e)):(f++,j.call(a,g(f,c,N,e),g(f,c,O,e),g(f,c,N,c.notifyWith))):(d!==N&&(h=void 0,i=[a]),(e||c.resolveWith)(h,i))}},k=e?j:function(){try{j()}catch(a){r.Deferred.exceptionHook&&r.Deferred.exceptionHook(a,k.stackTrace),b+1>=f&&(d!==O&&(h=void 0,i=[a]),c.rejectWith(h,i))}};b?k():(r.Deferred.getStackHook&&(k.stackTrace=r.Deferred.getStackHook()),a.setTimeout(k))}}return r.Deferred(function(a){c[0][3].add(g(0,a,r.isFunction(e)?e:N,a.notifyWith)),c[1][3].add(g(0,a,r.isFunction(b)?b:N)),c[2][3].add(g(0,a,r.isFunction(d)?d:O))}).promise()},promise:function(a){return null!=a?r.extend(a,e):e}},f={};return r.each(c,function(a,b){var g=b[2],h=b[5];e[b[1]]=g.add,h&&g.add(function(){d=h},c[3-a][2].disable,c[0][2].lock),g.add(b[3].fire),f[b[0]]=function(){return f[b[0]+"With"](this===f?void 0:this,arguments),this},f[b[0]+"With"]=g.fireWith}),e.promise(f),b&&b.call(f,f),f},when:function(a){var b=arguments.length,c=b,d=Array(c),e=f.call(arguments),g=r.Deferred(),h=function(a){return function(c){d[a]=this,e[a]=arguments.length>1?f.call(arguments):c,--b||g.resolveWith(d,e)}};if(b<=1&&(P(a,g.done(h(c)).resolve,g.reject,!b),"pending"===g.state()||r.isFunction(e[c]&&e[c].then)))return g.then();while(c--)P(e[c],h(c),g.reject);return g.promise()}});var Q=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;r.Deferred.exceptionHook=function(b,c){a.console&&a.console.warn&&b&&Q.test(b.name)&&a.console.warn("jQuery.Deferred exception: "+b.message,b.stack,c)},r.readyException=function(b){a.setTimeout(function(){throw b})};var R=r.Deferred();r.fn.ready=function(a){return R.then(a)["catch"](function(a){r.readyException(a)}),this},r.extend({isReady:!1,readyWait:1,ready:function(a){(a===!0?--r.readyWait:r.isReady)||(r.isReady=!0,a!==!0&&--r.readyWait>0||R.resolveWith(d,[r]))}}),r.ready.then=R.then;function S(){d.removeEventListener("DOMContentLoaded",S),
+a.removeEventListener("load",S),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",S),a.addEventListener("load",S));var T=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)T(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(r(a),c)})),b))for(;h<i;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},U=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function V(){this.expando=r.expando+V.uid++}V.uid=1,V.prototype={cache:function(a){var b=a[this.expando];return b||(b={},U(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[r.camelCase(b)]=c;else for(d in b)e[r.camelCase(d)]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][r.camelCase(b)]},access:function(a,b,c){return void 0===b||b&&"string"==typeof b&&void 0===c?this.get(a,b):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d=a[this.expando];if(void 0!==d){if(void 0!==b){Array.isArray(b)?b=b.map(r.camelCase):(b=r.camelCase(b),b=b in d?[b]:b.match(L)||[]),c=b.length;while(c--)delete d[b[c]]}(void 0===b||r.isEmptyObject(d))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!r.isEmptyObject(b)}};var W=new V,X=new V,Y=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Z=/[A-Z]/g;function $(a){return"true"===a||"false"!==a&&("null"===a?null:a===+a+""?+a:Y.test(a)?JSON.parse(a):a)}function _(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Z,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c=$(c)}catch(e){}X.set(a,b,c)}else c=void 0;return c}r.extend({hasData:function(a){return X.hasData(a)||W.hasData(a)},data:function(a,b,c){return X.access(a,b,c)},removeData:function(a,b){X.remove(a,b)},_data:function(a,b,c){return W.access(a,b,c)},_removeData:function(a,b){W.remove(a,b)}}),r.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=X.get(f),1===f.nodeType&&!W.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=r.camelCase(d.slice(5)),_(f,d,e[d])));W.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){X.set(this,a)}):T(this,function(b){var c;if(f&&void 0===b){if(c=X.get(f,a),void 0!==c)return c;if(c=_(f,a),void 0!==c)return c}else this.each(function(){X.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){X.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=W.get(a,b),c&&(!d||Array.isArray(c)?d=W.access(a,b,r.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return W.get(a,c)||W.access(a,c,{empty:r.Callbacks("once memory").add(function(){W.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?r.queue(this[0],a):void 0===b?this:this.each(function(){var c=r.queue(this,a,b);r._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&r.dequeue(this,a)})},dequeue:function(a){return this.each(function(){r.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=r.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=W.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var aa=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,ba=new RegExp("^(?:([+-])=|)("+aa+")([a-z%]*)$","i"),ca=["Top","Right","Bottom","Left"],da=function(a,b){return a=b||a,"none"===a.style.display||""===a.style.display&&r.contains(a.ownerDocument,a)&&"none"===r.css(a,"display")},ea=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};function fa(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return r.css(a,b,"")},i=h(),j=c&&c[3]||(r.cssNumber[b]?"":"px"),k=(r.cssNumber[b]||"px"!==j&&+i)&&ba.exec(r.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,r.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var ga={};function ha(a){var b,c=a.ownerDocument,d=a.nodeName,e=ga[d];return e?e:(b=c.body.appendChild(c.createElement(d)),e=r.css(b,"display"),b.parentNode.removeChild(b),"none"===e&&(e="block"),ga[d]=e,e)}function ia(a,b){for(var c,d,e=[],f=0,g=a.length;f<g;f++)d=a[f],d.style&&(c=d.style.display,b?("none"===c&&(e[f]=W.get(d,"display")||null,e[f]||(d.style.display="")),""===d.style.display&&da(d)&&(e[f]=ha(d))):"none"!==c&&(e[f]="none",W.set(d,"display",c)));for(f=0;f<g;f++)null!=e[f]&&(a[f].style.display=e[f]);return a}r.fn.extend({show:function(){return ia(this,!0)},hide:function(){return ia(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){da(this)?r(this).show():r(this).hide()})}});var ja=/^(?:checkbox|radio)$/i,ka=/<([a-z][^\/\0>\x20\t\r\n\f]+)/i,la=/^$|\/(?:java|ecma)script/i,ma={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};ma.optgroup=ma.option,ma.tbody=ma.tfoot=ma.colgroup=ma.caption=ma.thead,ma.th=ma.td;function na(a,b){var c;return c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[],void 0===b||b&&B(a,b)?r.merge([a],c):c}function oa(a,b){for(var c=0,d=a.length;c<d;c++)W.set(a[c],"globalEval",!b||W.get(b[c],"globalEval"))}var pa=/<|&#?\w+;/;function qa(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],n=0,o=a.length;n<o;n++)if(f=a[n],f||0===f)if("object"===r.type(f))r.merge(m,f.nodeType?[f]:f);else if(pa.test(f)){g=g||l.appendChild(b.createElement("div")),h=(ka.exec(f)||["",""])[1].toLowerCase(),i=ma[h]||ma._default,g.innerHTML=i[1]+r.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;r.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",n=0;while(f=m[n++])if(d&&r.inArray(f,d)>-1)e&&e.push(f);else if(j=r.contains(f.ownerDocument,f),g=na(l.appendChild(f),"script"),j&&oa(g),c){k=0;while(f=g[k++])la.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),o.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",o.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var ra=d.documentElement,sa=/^key/,ta=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,ua=/^([^.]*)(?:\.(.+)|)/;function va(){return!0}function wa(){return!1}function xa(){try{return d.activeElement}catch(a){}}function ya(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ya(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=wa;else if(!e)return a;return 1===f&&(g=e,e=function(a){return r().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=r.guid++)),a.each(function(){r.event.add(this,b,e,d,c)})}r.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.get(a);if(q){c.handler&&(f=c,c=f.handler,e=f.selector),e&&r.find.matchesSelector(ra,e),c.guid||(c.guid=r.guid++),(i=q.events)||(i=q.events={}),(g=q.handle)||(g=q.handle=function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(L)||[""],j=b.length;while(j--)h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n&&(l=r.event.special[n]||{},n=(e?l.delegateType:l.bindType)||n,l=r.event.special[n]||{},k=r.extend({type:n,origType:p,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&r.expr.match.needsContext.test(e),namespace:o.join(".")},f),(m=i[n])||(m=i[n]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,o,g)!==!1||a.addEventListener&&a.addEventListener(n,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),r.event.global[n]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.hasData(a)&&W.get(a);if(q&&(i=q.events)){b=(b||"").match(L)||[""],j=b.length;while(j--)if(h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n){l=r.event.special[n]||{},n=(d?l.delegateType:l.bindType)||n,m=i[n]||[],h=h[2]&&new RegExp("(^|\\.)"+o.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&p!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,o,q.handle)!==!1||r.removeEvent(a,n,q.handle),delete i[n])}else for(n in i)r.event.remove(a,n+b[j],c,d,!0);r.isEmptyObject(i)&&W.remove(a,"handle events")}},dispatch:function(a){var b=r.event.fix(a),c,d,e,f,g,h,i=new Array(arguments.length),j=(W.get(this,"events")||{})[b.type]||[],k=r.event.special[b.type]||{};for(i[0]=b,c=1;c<arguments.length;c++)i[c]=arguments[c];if(b.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,b)!==!1){h=r.event.handlers.call(this,b,j),c=0;while((f=h[c++])&&!b.isPropagationStopped()){b.currentTarget=f.elem,d=0;while((g=f.handlers[d++])&&!b.isImmediatePropagationStopped())b.rnamespace&&!b.rnamespace.test(g.namespace)||(b.handleObj=g,b.data=g.data,e=((r.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(b.result=e)===!1&&(b.preventDefault(),b.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,b),b.result}},handlers:function(a,b){var c,d,e,f,g,h=[],i=b.delegateCount,j=a.target;if(i&&j.nodeType&&!("click"===a.type&&a.button>=1))for(;j!==this;j=j.parentNode||this)if(1===j.nodeType&&("click"!==a.type||j.disabled!==!0)){for(f=[],g={},c=0;c<i;c++)d=b[c],e=d.selector+" ",void 0===g[e]&&(g[e]=d.needsContext?r(e,this).index(j)>-1:r.find(e,this,null,[j]).length),g[e]&&f.push(d);f.length&&h.push({elem:j,handlers:f})}return j=this,i<b.length&&h.push({elem:j,handlers:b.slice(i)}),h},addProp:function(a,b){Object.defineProperty(r.Event.prototype,a,{enumerable:!0,configurable:!0,get:r.isFunction(b)?function(){if(this.originalEvent)return b(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[a]},set:function(b){Object.defineProperty(this,a,{enumerable:!0,configurable:!0,writable:!0,value:b})}})},fix:function(a){return a[r.expando]?a:new r.Event(a)},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==xa()&&this.focus)return this.focus(),!1},delegateType:"focusin"},blur:{trigger:function(){if(this===xa()&&this.blur)return this.blur(),!1},delegateType:"focusout"},click:{trigger:function(){if("checkbox"===this.type&&this.click&&B(this,"input"))return this.click(),!1},_default:function(a){return B(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},r.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},r.Event=function(a,b){return this instanceof r.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?va:wa,this.target=a.target&&3===a.target.nodeType?a.target.parentNode:a.target,this.currentTarget=a.currentTarget,this.relatedTarget=a.relatedTarget):this.type=a,b&&r.extend(this,b),this.timeStamp=a&&a.timeStamp||r.now(),void(this[r.expando]=!0)):new r.Event(a,b)},r.Event.prototype={constructor:r.Event,isDefaultPrevented:wa,isPropagationStopped:wa,isImmediatePropagationStopped:wa,isSimulated:!1,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=va,a&&!this.isSimulated&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=va,a&&!this.isSimulated&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=va,a&&!this.isSimulated&&a.stopImmediatePropagation(),this.stopPropagation()}},r.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(a){var b=a.button;return null==a.which&&sa.test(a.type)?null!=a.charCode?a.charCode:a.keyCode:!a.which&&void 0!==b&&ta.test(a.type)?1&b?1:2&b?3:4&b?2:0:a.which}},r.event.addProp),r.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){r.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return e&&(e===d||r.contains(d,e))||(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),r.fn.extend({on:function(a,b,c,d){return ya(this,a,b,c,d)},one:function(a,b,c,d){return ya(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,r(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return b!==!1&&"function"!=typeof b||(c=b,b=void 0),c===!1&&(c=wa),this.each(function(){r.event.remove(this,a,c,b)})}});var za=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,Aa=/<script|<style|<link/i,Ba=/checked\s*(?:[^=]|=\s*.checked.)/i,Ca=/^true\/(.*)/,Da=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Ea(a,b){return B(a,"table")&&B(11!==b.nodeType?b:b.firstChild,"tr")?r(">tbody",a)[0]||a:a}function Fa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function Ga(a){var b=Ca.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Ha(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(W.hasData(a)&&(f=W.access(a),g=W.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;c<d;c++)r.event.add(b,e,j[e][c])}X.hasData(a)&&(h=X.access(a),i=r.extend({},h),X.set(b,i))}}function Ia(a,b){var c=b.nodeName.toLowerCase();"input"===c&&ja.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function Ja(a,b,c,d){b=g.apply([],b);var e,f,h,i,j,k,l=0,m=a.length,n=m-1,q=b[0],s=r.isFunction(q);if(s||m>1&&"string"==typeof q&&!o.checkClone&&Ba.test(q))return a.each(function(e){var f=a.eq(e);s&&(b[0]=q.call(this,e,f.html())),Ja(f,b,c,d)});if(m&&(e=qa(b,a[0].ownerDocument,!1,a,d),f=e.firstChild,1===e.childNodes.length&&(e=f),f||d)){for(h=r.map(na(e,"script"),Fa),i=h.length;l<m;l++)j=e,l!==n&&(j=r.clone(j,!0,!0),i&&r.merge(h,na(j,"script"))),c.call(a[l],j,l);if(i)for(k=h[h.length-1].ownerDocument,r.map(h,Ga),l=0;l<i;l++)j=h[l],la.test(j.type||"")&&!W.access(j,"globalEval")&&r.contains(k,j)&&(j.src?r._evalUrl&&r._evalUrl(j.src):p(j.textContent.replace(Da,""),k))}return a}function Ka(a,b,c){for(var d,e=b?r.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||r.cleanData(na(d)),d.parentNode&&(c&&r.contains(d.ownerDocument,d)&&oa(na(d,"script")),d.parentNode.removeChild(d));return a}r.extend({htmlPrefilter:function(a){return a.replace(za,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=r.contains(a.ownerDocument,a);if(!(o.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||r.isXMLDoc(a)))for(g=na(h),f=na(a),d=0,e=f.length;d<e;d++)Ia(f[d],g[d]);if(b)if(c)for(f=f||na(a),g=g||na(h),d=0,e=f.length;d<e;d++)Ha(f[d],g[d]);else Ha(a,h);return g=na(h,"script"),g.length>0&&oa(g,!i&&na(a,"script")),h},cleanData:function(a){for(var b,c,d,e=r.event.special,f=0;void 0!==(c=a[f]);f++)if(U(c)){if(b=c[W.expando]){if(b.events)for(d in b.events)e[d]?r.event.remove(c,d):r.removeEvent(c,d,b.handle);c[W.expando]=void 0}c[X.expando]&&(c[X.expando]=void 0)}}}),r.fn.extend({detach:function(a){return Ka(this,a,!0)},remove:function(a){return Ka(this,a)},text:function(a){return T(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.appendChild(a)}})},prepend:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(r.cleanData(na(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null!=a&&a,b=null==b?a:b,this.map(function(){return r.clone(this,a,b)})},html:function(a){return T(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!Aa.test(a)&&!ma[(ka.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;c<d;c++)b=this[c]||{},1===b.nodeType&&(r.cleanData(na(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ja(this,arguments,function(b){var c=this.parentNode;r.inArray(this,a)<0&&(r.cleanData(na(this)),c&&c.replaceChild(b,this))},a)}}),r.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){r.fn[a]=function(a){for(var c,d=[],e=r(a),f=e.length-1,g=0;g<=f;g++)c=g===f?this:this.clone(!0),r(e[g])[b](c),h.apply(d,c.get());return this.pushStack(d)}});var La=/^margin/,Ma=new RegExp("^("+aa+")(?!px)[a-z%]+$","i"),Na=function(b){var c=b.ownerDocument.defaultView;return c&&c.opener||(c=a),c.getComputedStyle(b)};!function(){function b(){if(i){i.style.cssText="box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",i.innerHTML="",ra.appendChild(h);var b=a.getComputedStyle(i);c="1%"!==b.top,g="2px"===b.marginLeft,e="4px"===b.width,i.style.marginRight="50%",f="4px"===b.marginRight,ra.removeChild(h),i=null}}var c,e,f,g,h=d.createElement("div"),i=d.createElement("div");i.style&&(i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",o.clearCloneStyle="content-box"===i.style.backgroundClip,h.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",h.appendChild(i),r.extend(o,{pixelPosition:function(){return b(),c},boxSizingReliable:function(){return b(),e},pixelMarginRight:function(){return b(),f},reliableMarginLeft:function(){return b(),g}}))}();function Oa(a,b,c){var d,e,f,g,h=a.style;return c=c||Na(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||r.contains(a.ownerDocument,a)||(g=r.style(a,b)),!o.pixelMarginRight()&&Ma.test(g)&&La.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Pa(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Qa=/^(none|table(?!-c[ea]).+)/,Ra=/^--/,Sa={position:"absolute",visibility:"hidden",display:"block"},Ta={letterSpacing:"0",fontWeight:"400"},Ua=["Webkit","Moz","ms"],Va=d.createElement("div").style;function Wa(a){if(a in Va)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ua.length;while(c--)if(a=Ua[c]+b,a in Va)return a}function Xa(a){var b=r.cssProps[a];return b||(b=r.cssProps[a]=Wa(a)||a),b}function Ya(a,b,c){var d=ba.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Za(a,b,c,d,e){var f,g=0;for(f=c===(d?"border":"content")?4:"width"===b?1:0;f<4;f+=2)"margin"===c&&(g+=r.css(a,c+ca[f],!0,e)),d?("content"===c&&(g-=r.css(a,"padding"+ca[f],!0,e)),"margin"!==c&&(g-=r.css(a,"border"+ca[f]+"Width",!0,e))):(g+=r.css(a,"padding"+ca[f],!0,e),"padding"!==c&&(g+=r.css(a,"border"+ca[f]+"Width",!0,e)));return g}function $a(a,b,c){var d,e=Na(a),f=Oa(a,b,e),g="border-box"===r.css(a,"boxSizing",!1,e);return Ma.test(f)?f:(d=g&&(o.boxSizingReliable()||f===a.style[b]),"auto"===f&&(f=a["offset"+b[0].toUpperCase()+b.slice(1)]),f=parseFloat(f)||0,f+Za(a,b,c||(g?"border":"content"),d,e)+"px")}r.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Oa(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=r.camelCase(b),i=Ra.test(b),j=a.style;return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:j[b]:(f=typeof c,"string"===f&&(e=ba.exec(c))&&e[1]&&(c=fa(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(r.cssNumber[h]?"":"px")),o.clearCloneStyle||""!==c||0!==b.indexOf("background")||(j[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i?j.setProperty(b,c):j[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=r.camelCase(b),i=Ra.test(b);return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Oa(a,b,d)),"normal"===e&&b in Ta&&(e=Ta[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),r.each(["height","width"],function(a,b){r.cssHooks[b]={get:function(a,c,d){if(c)return!Qa.test(r.css(a,"display"))||a.getClientRects().length&&a.getBoundingClientRect().width?$a(a,b,d):ea(a,Sa,function(){return $a(a,b,d)})},set:function(a,c,d){var e,f=d&&Na(a),g=d&&Za(a,b,d,"border-box"===r.css(a,"boxSizing",!1,f),f);return g&&(e=ba.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=r.css(a,b)),Ya(a,c,g)}}}),r.cssHooks.marginLeft=Pa(o.reliableMarginLeft,function(a,b){if(b)return(parseFloat(Oa(a,"marginLeft"))||a.getBoundingClientRect().left-ea(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px"}),r.each({margin:"",padding:"",border:"Width"},function(a,b){r.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];d<4;d++)e[a+ca[d]+b]=f[d]||f[d-2]||f[0];return e}},La.test(a)||(r.cssHooks[a+b].set=Ya)}),r.fn.extend({css:function(a,b){return T(this,function(a,b,c){var d,e,f={},g=0;if(Array.isArray(b)){for(d=Na(a),e=b.length;g<e;g++)f[b[g]]=r.css(a,b[g],!1,d);return f}return void 0!==c?r.style(a,b,c):r.css(a,b)},a,b,arguments.length>1)}});function _a(a,b,c,d,e){return new _a.prototype.init(a,b,c,d,e)}r.Tween=_a,_a.prototype={constructor:_a,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||r.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(r.cssNumber[c]?"":"px")},cur:function(){var a=_a.propHooks[this.prop];return a&&a.get?a.get(this):_a.propHooks._default.get(this)},run:function(a){var b,c=_a.propHooks[this.prop];return this.options.duration?this.pos=b=r.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):_a.propHooks._default.set(this),this}},_a.prototype.init.prototype=_a.prototype,_a.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=r.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){r.fx.step[a.prop]?r.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[r.cssProps[a.prop]]&&!r.cssHooks[a.prop]?a.elem[a.prop]=a.now:r.style(a.elem,a.prop,a.now+a.unit)}}},_a.propHooks.scrollTop=_a.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},r.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},r.fx=_a.prototype.init,r.fx.step={};var ab,bb,cb=/^(?:toggle|show|hide)$/,db=/queueHooks$/;function eb(){bb&&(d.hidden===!1&&a.requestAnimationFrame?a.requestAnimationFrame(eb):a.setTimeout(eb,r.fx.interval),r.fx.tick())}function fb(){return a.setTimeout(function(){ab=void 0}),ab=r.now()}function gb(a,b){var c,d=0,e={height:a};for(b=b?1:0;d<4;d+=2-b)c=ca[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function hb(a,b,c){for(var d,e=(kb.tweeners[b]||[]).concat(kb.tweeners["*"]),f=0,g=e.length;f<g;f++)if(d=e[f].call(c,b,a))return d}function ib(a,b,c){var d,e,f,g,h,i,j,k,l="width"in b||"height"in b,m=this,n={},o=a.style,p=a.nodeType&&da(a),q=W.get(a,"fxshow");c.queue||(g=r._queueHooks(a,"fx"),null==g.unqueued&&(g.unqueued=0,h=g.empty.fire,g.empty.fire=function(){g.unqueued||h()}),g.unqueued++,m.always(function(){m.always(function(){g.unqueued--,r.queue(a,"fx").length||g.empty.fire()})}));for(d in b)if(e=b[d],cb.test(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}n[d]=q&&q[d]||r.style(a,d)}if(i=!r.isEmptyObject(b),i||!r.isEmptyObject(n)){l&&1===a.nodeType&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=q&&q.display,null==j&&(j=W.get(a,"display")),k=r.css(a,"display"),"none"===k&&(j?k=j:(ia([a],!0),j=a.style.display||j,k=r.css(a,"display"),ia([a]))),("inline"===k||"inline-block"===k&&null!=j)&&"none"===r.css(a,"float")&&(i||(m.done(function(){o.display=j}),null==j&&(k=o.display,j="none"===k?"":k)),o.display="inline-block")),c.overflow&&(o.overflow="hidden",m.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]})),i=!1;for(d in n)i||(q?"hidden"in q&&(p=q.hidden):q=W.access(a,"fxshow",{display:j}),f&&(q.hidden=!p),p&&ia([a],!0),m.done(function(){p||ia([a]),W.remove(a,"fxshow");for(d in n)r.style(a,d,n[d])})),i=hb(p?q[d]:0,d,m),d in q||(q[d]=i.start,p&&(i.end=i.start,i.start=0))}}function jb(a,b){var c,d,e,f,g;for(c in a)if(d=r.camelCase(c),e=b[d],f=a[c],Array.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=r.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function kb(a,b,c){var d,e,f=0,g=kb.prefilters.length,h=r.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=ab||fb(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;g<i;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),f<1&&i?c:(i||h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:r.extend({},b),opts:r.extend(!0,{specialEasing:{},easing:r.easing._default},c),originalProperties:b,originalOptions:c,startTime:ab||fb(),duration:c.duration,tweens:[],createTween:function(b,c){var d=r.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;c<d;c++)j.tweens[c].run(1);return b?(h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j,b])):h.rejectWith(a,[j,b]),this}}),k=j.props;for(jb(k,j.opts.specialEasing);f<g;f++)if(d=kb.prefilters[f].call(j,a,k,j.opts))return r.isFunction(d.stop)&&(r._queueHooks(j.elem,j.opts.queue).stop=r.proxy(d.stop,d)),d;return r.map(k,hb,j),r.isFunction(j.opts.start)&&j.opts.start.call(a,j),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always),r.fx.timer(r.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j}r.Animation=r.extend(kb,{tweeners:{"*":[function(a,b){var c=this.createTween(a,b);return fa(c.elem,a,ba.exec(b),c),c}]},tweener:function(a,b){r.isFunction(a)?(b=a,a=["*"]):a=a.match(L);for(var c,d=0,e=a.length;d<e;d++)c=a[d],kb.tweeners[c]=kb.tweeners[c]||[],kb.tweeners[c].unshift(b)},prefilters:[ib],prefilter:function(a,b){b?kb.prefilters.unshift(a):kb.prefilters.push(a)}}),r.speed=function(a,b,c){var d=a&&"object"==typeof a?r.extend({},a):{complete:c||!c&&b||r.isFunction(a)&&a,duration:a,easing:c&&b||b&&!r.isFunction(b)&&b};return r.fx.off?d.duration=0:"number"!=typeof d.duration&&(d.duration in r.fx.speeds?d.duration=r.fx.speeds[d.duration]:d.duration=r.fx.speeds._default),null!=d.queue&&d.queue!==!0||(d.queue="fx"),d.old=d.complete,d.complete=function(){r.isFunction(d.old)&&d.old.call(this),d.queue&&r.dequeue(this,d.queue)},d},r.fn.extend({fadeTo:function(a,b,c,d){return this.filter(da).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=r.isEmptyObject(a),f=r.speed(b,c,d),g=function(){var b=kb(this,r.extend({},a),f);(e||W.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=r.timers,g=W.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&db.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));!b&&c||r.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=W.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=r.timers,g=d?d.length:0;for(c.finish=!0,r.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;b<g;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),r.each(["toggle","show","hide"],function(a,b){var c=r.fn[b];r.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(gb(b,!0),a,d,e)}}),r.each({slideDown:gb("show"),slideUp:gb("hide"),slideToggle:gb("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){r.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),r.timers=[],r.fx.tick=function(){var a,b=0,c=r.timers;for(ab=r.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||r.fx.stop(),ab=void 0},r.fx.timer=function(a){r.timers.push(a),r.fx.start()},r.fx.interval=13,r.fx.start=function(){bb||(bb=!0,eb())},r.fx.stop=function(){bb=null},r.fx.speeds={slow:600,fast:200,_default:400},r.fn.delay=function(b,c){return b=r.fx?r.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",o.checkOn=""!==a.value,o.optSelected=c.selected,a=d.createElement("input"),a.value="t",a.type="radio",o.radioValue="t"===a.value}();var lb,mb=r.expr.attrHandle;r.fn.extend({attr:function(a,b){return T(this,r.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){r.removeAttr(this,a)})}}),r.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?r.prop(a,b,c):(1===f&&r.isXMLDoc(a)||(e=r.attrHooks[b.toLowerCase()]||(r.expr.match.bool.test(b)?lb:void 0)),void 0!==c?null===c?void r.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=r.find.attr(a,b),
+null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&B(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(L);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c)}}),lb={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=mb[b]||r.find.attr;mb[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=mb[g],mb[g]=e,e=null!=c(a,b,d)?g:null,mb[g]=f),e}});var nb=/^(?:input|select|textarea|button)$/i,ob=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return T(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):nb.test(a.nodeName)||ob.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});function pb(a){var b=a.match(L)||[];return b.join(" ")}function qb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,qb(this)))});if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=qb(c),d=1===c.nodeType&&" "+pb(e)+" "){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=pb(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,qb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=qb(c),d=1===c.nodeType&&" "+pb(e)+" "){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=pb(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,qb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(L)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=qb(this),b&&W.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":W.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+pb(qb(c))+" ").indexOf(b)>-1)return!0;return!1}});var rb=/\r/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":Array.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(rb,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:pb(r.text(a))}},select:{get:function(a){var b,c,d,e=a.options,f=a.selectedIndex,g="select-one"===a.type,h=g?null:[],i=g?f+1:e.length;for(d=f<0?i:g?f:0;d<i;d++)if(c=e[d],(c.selected||d===f)&&!c.disabled&&(!c.parentNode.disabled||!B(c.parentNode,"optgroup"))){if(b=r(c).val(),g)return b;h.push(b)}return h},set:function(a,b){var c,d,e=a.options,f=r.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=r.inArray(r.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),r.each(["radio","checkbox"],function(){r.valHooks[this]={set:function(a,b){if(Array.isArray(b))return a.checked=r.inArray(r(a).val(),b)>-1}},o.checkOn||(r.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var sb=/^(?:focusinfocus|focusoutblur)$/;r.extend(r.event,{trigger:function(b,c,e,f){var g,h,i,j,k,m,n,o=[e||d],p=l.call(b,"type")?b.type:b,q=l.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!sb.test(p+r.event.triggered)&&(p.indexOf(".")>-1&&(q=p.split("."),p=q.shift(),q.sort()),k=p.indexOf(":")<0&&"on"+p,b=b[r.expando]?b:new r.Event(p,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=q.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:r.makeArray(c,[b]),n=r.event.special[p]||{},f||!n.trigger||n.trigger.apply(e,c)!==!1)){if(!f&&!n.noBubble&&!r.isWindow(e)){for(j=n.delegateType||p,sb.test(j+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),i=h;i===(e.ownerDocument||d)&&o.push(i.defaultView||i.parentWindow||a)}g=0;while((h=o[g++])&&!b.isPropagationStopped())b.type=g>1?j:n.bindType||p,m=(W.get(h,"events")||{})[b.type]&&W.get(h,"handle"),m&&m.apply(h,c),m=k&&h[k],m&&m.apply&&U(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=p,f||b.isDefaultPrevented()||n._default&&n._default.apply(o.pop(),c)!==!1||!U(e)||k&&r.isFunction(e[p])&&!r.isWindow(e)&&(i=e[k],i&&(e[k]=null),r.event.triggered=p,e[p](),r.event.triggered=void 0,i&&(e[k]=i)),b.result}},simulate:function(a,b,c){var d=r.extend(new r.Event,c,{type:a,isSimulated:!0});r.event.trigger(d,null,b)}}),r.fn.extend({trigger:function(a,b){return this.each(function(){r.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];if(c)return r.event.trigger(a,b,c,!0)}}),r.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(a,b){r.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),r.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),o.focusin="onfocusin"in a,o.focusin||r.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){r.event.simulate(b,a.target,r.event.fix(a))};r.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=W.access(d,b);e||d.addEventListener(a,c,!0),W.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=W.access(d,b)-1;e?W.access(d,b,e):(d.removeEventListener(a,c,!0),W.remove(d,b))}}});var tb=a.location,ub=r.now(),vb=/\?/;r.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return c&&!c.getElementsByTagName("parsererror").length||r.error("Invalid XML: "+b),c};var wb=/\[\]$/,xb=/\r?\n/g,yb=/^(?:submit|button|image|reset|file)$/i,zb=/^(?:input|select|textarea|keygen)/i;function Ab(a,b,c,d){var e;if(Array.isArray(b))r.each(b,function(b,e){c||wb.test(a)?d(a,e):Ab(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==r.type(b))d(a,b);else for(e in b)Ab(a+"["+e+"]",b[e],c,d)}r.param=function(a,b){var c,d=[],e=function(a,b){var c=r.isFunction(b)?b():b;d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(null==c?"":c)};if(Array.isArray(a)||a.jquery&&!r.isPlainObject(a))r.each(a,function(){e(this.name,this.value)});else for(c in a)Ab(c,a[c],b,e);return d.join("&")},r.fn.extend({serialize:function(){return r.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=r.prop(this,"elements");return a?r.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!r(this).is(":disabled")&&zb.test(this.nodeName)&&!yb.test(a)&&(this.checked||!ja.test(a))}).map(function(a,b){var c=r(this).val();return null==c?null:Array.isArray(c)?r.map(c,function(a){return{name:b.name,value:a.replace(xb,"\r\n")}}):{name:b.name,value:c.replace(xb,"\r\n")}}).get()}});var Bb=/%20/g,Cb=/#.*$/,Db=/([?&])_=[^&]*/,Eb=/^(.*?):[ \t]*([^\r\n]*)$/gm,Fb=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Gb=/^(?:GET|HEAD)$/,Hb=/^\/\//,Ib={},Jb={},Kb="*/".concat("*"),Lb=d.createElement("a");Lb.href=tb.href;function Mb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(L)||[];if(r.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function Nb(a,b,c,d){var e={},f=a===Jb;function g(h){var i;return e[h]=!0,r.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function Ob(a,b){var c,d,e=r.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&r.extend(!0,a,d),a}function Pb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}if(f)return f!==i[0]&&i.unshift(f),c[f]}function Qb(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}r.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:tb.href,type:"GET",isLocal:Fb.test(tb.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Kb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":r.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?Ob(Ob(a,r.ajaxSettings),b):Ob(r.ajaxSettings,a)},ajaxPrefilter:Mb(Ib),ajaxTransport:Mb(Jb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m,n,o=r.ajaxSetup({},c),p=o.context||o,q=o.context&&(p.nodeType||p.jquery)?r(p):r.event,s=r.Deferred(),t=r.Callbacks("once memory"),u=o.statusCode||{},v={},w={},x="canceled",y={readyState:0,getResponseHeader:function(a){var b;if(k){if(!h){h={};while(b=Eb.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return k?g:null},setRequestHeader:function(a,b){return null==k&&(a=w[a.toLowerCase()]=w[a.toLowerCase()]||a,v[a]=b),this},overrideMimeType:function(a){return null==k&&(o.mimeType=a),this},statusCode:function(a){var b;if(a)if(k)y.always(a[y.status]);else for(b in a)u[b]=[u[b],a[b]];return this},abort:function(a){var b=a||x;return e&&e.abort(b),A(0,b),this}};if(s.promise(y),o.url=((b||o.url||tb.href)+"").replace(Hb,tb.protocol+"//"),o.type=c.method||c.type||o.method||o.type,o.dataTypes=(o.dataType||"*").toLowerCase().match(L)||[""],null==o.crossDomain){j=d.createElement("a");try{j.href=o.url,j.href=j.href,o.crossDomain=Lb.protocol+"//"+Lb.host!=j.protocol+"//"+j.host}catch(z){o.crossDomain=!0}}if(o.data&&o.processData&&"string"!=typeof o.data&&(o.data=r.param(o.data,o.traditional)),Nb(Ib,o,c,y),k)return y;l=r.event&&o.global,l&&0===r.active++&&r.event.trigger("ajaxStart"),o.type=o.type.toUpperCase(),o.hasContent=!Gb.test(o.type),f=o.url.replace(Cb,""),o.hasContent?o.data&&o.processData&&0===(o.contentType||"").indexOf("application/x-www-form-urlencoded")&&(o.data=o.data.replace(Bb,"+")):(n=o.url.slice(f.length),o.data&&(f+=(vb.test(f)?"&":"?")+o.data,delete o.data),o.cache===!1&&(f=f.replace(Db,"$1"),n=(vb.test(f)?"&":"?")+"_="+ub++ +n),o.url=f+n),o.ifModified&&(r.lastModified[f]&&y.setRequestHeader("If-Modified-Since",r.lastModified[f]),r.etag[f]&&y.setRequestHeader("If-None-Match",r.etag[f])),(o.data&&o.hasContent&&o.contentType!==!1||c.contentType)&&y.setRequestHeader("Content-Type",o.contentType),y.setRequestHeader("Accept",o.dataTypes[0]&&o.accepts[o.dataTypes[0]]?o.accepts[o.dataTypes[0]]+("*"!==o.dataTypes[0]?", "+Kb+"; q=0.01":""):o.accepts["*"]);for(m in o.headers)y.setRequestHeader(m,o.headers[m]);if(o.beforeSend&&(o.beforeSend.call(p,y,o)===!1||k))return y.abort();if(x="abort",t.add(o.complete),y.done(o.success),y.fail(o.error),e=Nb(Jb,o,c,y)){if(y.readyState=1,l&&q.trigger("ajaxSend",[y,o]),k)return y;o.async&&o.timeout>0&&(i=a.setTimeout(function(){y.abort("timeout")},o.timeout));try{k=!1,e.send(v,A)}catch(z){if(k)throw z;A(-1,z)}}else A(-1,"No Transport");function A(b,c,d,h){var j,m,n,v,w,x=c;k||(k=!0,i&&a.clearTimeout(i),e=void 0,g=h||"",y.readyState=b>0?4:0,j=b>=200&&b<300||304===b,d&&(v=Pb(o,y,d)),v=Qb(o,v,y,j),j?(o.ifModified&&(w=y.getResponseHeader("Last-Modified"),w&&(r.lastModified[f]=w),w=y.getResponseHeader("etag"),w&&(r.etag[f]=w)),204===b||"HEAD"===o.type?x="nocontent":304===b?x="notmodified":(x=v.state,m=v.data,n=v.error,j=!n)):(n=x,!b&&x||(x="error",b<0&&(b=0))),y.status=b,y.statusText=(c||x)+"",j?s.resolveWith(p,[m,x,y]):s.rejectWith(p,[y,x,n]),y.statusCode(u),u=void 0,l&&q.trigger(j?"ajaxSuccess":"ajaxError",[y,o,j?m:n]),t.fireWith(p,[y,x]),l&&(q.trigger("ajaxComplete",[y,o]),--r.active||r.event.trigger("ajaxStop")))}return y},getJSON:function(a,b,c){return r.get(a,b,c,"json")},getScript:function(a,b){return r.get(a,void 0,b,"script")}}),r.each(["get","post"],function(a,b){r[b]=function(a,c,d,e){return r.isFunction(c)&&(e=e||d,d=c,c=void 0),r.ajax(r.extend({url:a,type:b,dataType:e,data:c,success:d},r.isPlainObject(a)&&a))}}),r._evalUrl=function(a){return r.ajax({url:a,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,"throws":!0})},r.fn.extend({wrapAll:function(a){var b;return this[0]&&(r.isFunction(a)&&(a=a.call(this[0])),b=r(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this},wrapInner:function(a){return r.isFunction(a)?this.each(function(b){r(this).wrapInner(a.call(this,b))}):this.each(function(){var b=r(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=r.isFunction(a);return this.each(function(c){r(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(a){return this.parent(a).not("body").each(function(){r(this).replaceWith(this.childNodes)}),this}}),r.expr.pseudos.hidden=function(a){return!r.expr.pseudos.visible(a)},r.expr.pseudos.visible=function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)},r.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Rb={0:200,1223:204},Sb=r.ajaxSettings.xhr();o.cors=!!Sb&&"withCredentials"in Sb,o.ajax=Sb=!!Sb,r.ajaxTransport(function(b){var c,d;if(o.cors||Sb&&!b.crossDomain)return{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Rb[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}}),r.ajaxPrefilter(function(a){a.crossDomain&&(a.contents.script=!1)}),r.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return r.globalEval(a),a}}}),r.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),r.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=r("<script>").prop({charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&f("error"===a.type?404:200,a.type)}),d.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Tb=[],Ub=/(=)\?(?=&|$)|\?\?/;r.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Tb.pop()||r.expando+"_"+ub++;return this[a]=!0,a}}),r.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Ub.test(b.url)?"url":"string"==typeof b.data&&0===(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ub.test(b.data)&&"data");if(h||"jsonp"===b.dataTypes[0])return e=b.jsonpCallback=r.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Ub,"$1"+e):b.jsonp!==!1&&(b.url+=(vb.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||r.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){void 0===f?r(a).removeProp(e):a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Tb.push(e)),g&&r.isFunction(f)&&f(g[0]),g=f=void 0}),"script"}),o.createHTMLDocument=function(){var a=d.implementation.createHTMLDocument("").body;return a.innerHTML="<form></form><form></form>",2===a.childNodes.length}(),r.parseHTML=function(a,b,c){if("string"!=typeof a)return[];"boolean"==typeof b&&(c=b,b=!1);var e,f,g;return b||(o.createHTMLDocument?(b=d.implementation.createHTMLDocument(""),e=b.createElement("base"),e.href=d.location.href,b.head.appendChild(e)):b=d),f=C.exec(a),g=!c&&[],f?[b.createElement(f[1])]:(f=qa([a],b,g),g&&g.length&&r(g).remove(),r.merge([],f.childNodes))},r.fn.load=function(a,b,c){var d,e,f,g=this,h=a.indexOf(" ");return h>-1&&(d=pb(a.slice(h)),a=a.slice(0,h)),r.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&r.ajax({url:a,type:e||"GET",dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?r("<div>").append(r.parseHTML(a)).find(d):a)}).always(c&&function(a,b){g.each(function(){c.apply(this,f||[a.responseText,b,a])})}),this},r.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){r.fn[b]=function(a){return this.on(b,a)}}),r.expr.pseudos.animated=function(a){return r.grep(r.timers,function(b){return a===b.elem}).length},r.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=r.css(a,"position"),l=r(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=r.css(a,"top"),i=r.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),r.isFunction(b)&&(b=b.call(a,c,r.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},r.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){r.offset.setOffset(this,a,b)});var b,c,d,e,f=this[0];if(f)return f.getClientRects().length?(d=f.getBoundingClientRect(),b=f.ownerDocument,c=b.documentElement,e=b.defaultView,{top:d.top+e.pageYOffset-c.clientTop,left:d.left+e.pageXOffset-c.clientLeft}):{top:0,left:0}},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===r.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),B(a[0],"html")||(d=a.offset()),d={top:d.top+r.css(a[0],"borderTopWidth",!0),left:d.left+r.css(a[0],"borderLeftWidth",!0)}),{top:b.top-d.top-r.css(c,"marginTop",!0),left:b.left-d.left-r.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===r.css(a,"position"))a=a.offsetParent;return a||ra})}}),r.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;r.fn[a]=function(d){return T(this,function(a,d,e){var f;return r.isWindow(a)?f=a:9===a.nodeType&&(f=a.defaultView),void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),r.each(["top","left"],function(a,b){r.cssHooks[b]=Pa(o.pixelPosition,function(a,c){if(c)return c=Oa(a,b),Ma.test(c)?r(a).position()[b]+"px":c})}),r.each({Height:"height",Width:"width"},function(a,b){r.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){r.fn[d]=function(e,f){var g=arguments.length&&(c||"boolean"!=typeof e),h=c||(e===!0||f===!0?"margin":"border");return T(this,function(b,c,e){var f;return r.isWindow(b)?0===d.indexOf("outer")?b["inner"+a]:b.document.documentElement["client"+a]:9===b.nodeType?(f=b.documentElement,Math.max(b.body["scroll"+a],f["scroll"+a],b.body["offset"+a],f["offset"+a],f["client"+a])):void 0===e?r.css(b,c,h):r.style(b,c,e,h)},b,g?e:void 0,g)}})}),r.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}}),r.holdReady=function(a){a?r.readyWait++:r.ready(!0)},r.isArray=Array.isArray,r.parseJSON=JSON.parse,r.nodeName=B,"function"==typeof define&&define.amd&&define("jquery",[],function(){return r});var Vb=a.jQuery,Wb=a.$;return r.noConflict=function(b){return a.$===r&&(a.$=Wb),b&&a.jQuery===r&&(a.jQuery=Vb),r},b||(a.jQuery=a.$=r),r});

From b8c9ff45fe678ecbab6356dab2392340134ff067 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 21 Nov 2017 17:24:25 +0100
Subject: [PATCH 157/264] added websockets' onopen event handler

---
 karax/jwebsockets.nim | 1 +
 1 file changed, 1 insertion(+)

diff --git a/karax/jwebsockets.nim b/karax/jwebsockets.nim
index c662ad1..2b1412e 100644
--- a/karax/jwebsockets.nim
+++ b/karax/jwebsockets.nim
@@ -6,6 +6,7 @@ type
 
   WebSocket* {.importc.} = ref object
     onmessage*: proc (e: MessageEvent)
+    onopen*: proc (e: MessageEvent)
 
 proc newWebSocket*(url, key: cstring): WebSocket
   {.importcpp: "new WebSocket(@)".}

From 4571ad0dd546f23a98e23b414c0602e96a33c09c Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Tue, 21 Nov 2017 23:44:23 +0100
Subject: [PATCH 158/264] merged PR #38 manually; refs #38

---
 karax/kajax.nim | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/karax/kajax.nim b/karax/kajax.nim
index c226c50..c58d3b5 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -5,7 +5,7 @@
 
 import karax
 
-proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
+proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int; response: cstring);
           kxi: KaraxInstance = kxi) =
@@ -49,5 +49,17 @@ proc ajaxGet*(url: cstring; headers: openarray[(cstring, cstring)];
           kxi: KaraxInstance = kxi) =
   ajax("GET", url, headers, nil, cont, kxi)
 
+proc ajaxPut*(url: cstring; headers: openarray[(cstring, cstring)];
+          data: cstring;
+          cont: proc (httpStatus: int, response: cstring);
+          kxi: KaraxInstance = kxi) =
+  ajax("PUT", url, headers, data, cont, kxi)
+
+proc ajaxDelete*(url: cstring; headers: openarray[(cstring, cstring)];
+          cont: proc (httpStatus: int, response: cstring);
+          kxi: KaraxInstance = kxi) =
+  ajax("DELETE", url, headers, nil, cont, kxi)
+
+
 proc toJson*[T](data: T): cstring {.importc: "JSON.stringify".}
 proc fromJson*[T](blob: cstring): T {.importc: "JSON.parse".}

From d07fc9a8afd8e65695669e7afbdf8f2ce0953ddf Mon Sep 17 00:00:00 2001
From: Thomas Johnson <tbjohnson123@gmail.com>
Date: Tue, 21 Nov 2017 16:52:38 -0800
Subject: [PATCH 159/264] Switched to non-minimized JQuery library for tests;
 code style updates to domEventTests for #43.

---
 tests/domEventTests.html  |     2 +-
 tests/domEventTests.nim   |    10 +-
 tests/jquery-3.2.1.js     | 10253 ++++++++++++++++++++++++++++++++++++
 tests/jquery-3.2.1.min.js |     4 -
 4 files changed, 10259 insertions(+), 10 deletions(-)
 create mode 100644 tests/jquery-3.2.1.js
 delete mode 100644 tests/jquery-3.2.1.min.js

diff --git a/tests/domEventTests.html b/tests/domEventTests.html
index f3bf702..2039ac6 100644
--- a/tests/domEventTests.html
+++ b/tests/domEventTests.html
@@ -4,7 +4,7 @@
     <title>DOM Event Tests</title>
     <link href="domEventTests.css" rel="stylesheet" />
     <meta charset="UTF-8" />
-    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
+    <script src="jquery-3.2.1.js" type="text/javascript"></script>
   </head>
   <body id="body">
     <div id="ROOT"></div>
diff --git a/tests/domEventTests.nim b/tests/domEventTests.nim
index 68259c0..94ea02a 100644
--- a/tests/domEventTests.nim
+++ b/tests/domEventTests.nim
@@ -1,10 +1,10 @@
 import times, jstrutils, strutils, kdom, karax, karaxdsl, vdom, tables
 
 var
-    results : seq[cstring]
+    results: seq[cstring]
     dragEventsCompleted = initTable[DragEventTypes, bool]()
-    testRunning : array[13, bool]
-    testCompleted : array[13, bool]
+    testRunning: array[13, bool]
+    testCompleted: array[13, bool]
     test2ImageDrop = false
     dblClickCount = 0
     test6ClickCount = 0
@@ -12,7 +12,7 @@ var
     test10inputFocusCount = 0
     test12Failure = false
 
-proc getLogText(text: string) : cstring =
+proc getLogText(text: string): cstring =
     result = "[$#]: $#" % [format(getLocalTime(getTime()), "HH:mm:ss"), $text]
 
 proc log(text: string, clear: bool = false) =
@@ -30,7 +30,7 @@ proc check(cond: bool, msg: string) =
         log "FAIL: " & msg
         doAssert(cond, msg)
 
-proc check(cond: bool, msg: string, warn: bool) : bool =
+proc check(cond: bool, msg: string, warn: bool): bool =
     if not cond:
         if warn:
             log "WARNING: " & msg
diff --git a/tests/jquery-3.2.1.js b/tests/jquery-3.2.1.js
new file mode 100644
index 0000000..d2d8ca4
--- /dev/null
+++ b/tests/jquery-3.2.1.js
@@ -0,0 +1,10253 @@
+/*!
+ * jQuery JavaScript Library v3.2.1
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2017-03-20T18:59Z
+ */
+( function( global, factory ) {
+
+	"use strict";
+
+	if ( typeof module === "object" && typeof module.exports === "object" ) {
+
+		// For CommonJS and CommonJS-like environments where a proper `window`
+		// is present, execute the factory and get jQuery.
+		// For environments that do not have a `window` with a `document`
+		// (such as Node.js), expose a factory as module.exports.
+		// This accentuates the need for the creation of a real `window`.
+		// e.g. var jQuery = require("jquery")(window);
+		// See ticket #14549 for more info.
+		module.exports = global.document ?
+			factory( global, true ) :
+			function( w ) {
+				if ( !w.document ) {
+					throw new Error( "jQuery requires a window with a document" );
+				}
+				return factory( w );
+			};
+	} else {
+		factory( global );
+	}
+
+// Pass this if window is not defined yet
+} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
+
+// Edge <= 12 - 13+, Firefox <=18 - 45+, IE 10 - 11, Safari 5.1 - 9+, iOS 6 - 9.1
+// throw exceptions when non-strict code (e.g., ASP.NET 4.5) accesses strict mode
+// arguments.callee.caller (trac-13335). But as of jQuery 3.0 (2016), strict mode should be common
+// enough that all such attempts are guarded in a try block.
+"use strict";
+
+var arr = [];
+
+var document = window.document;
+
+var getProto = Object.getPrototypeOf;
+
+var slice = arr.slice;
+
+var concat = arr.concat;
+
+var push = arr.push;
+
+var indexOf = arr.indexOf;
+
+var class2type = {};
+
+var toString = class2type.toString;
+
+var hasOwn = class2type.hasOwnProperty;
+
+var fnToString = hasOwn.toString;
+
+var ObjectFunctionString = fnToString.call( Object );
+
+var support = {};
+
+
+
+	function DOMEval( code, doc ) {
+		doc = doc || document;
+
+		var script = doc.createElement( "script" );
+
+		script.text = code;
+		doc.head.appendChild( script ).parentNode.removeChild( script );
+	}
+/* global Symbol */
+// Defining this global in .eslintrc.json would create a danger of using the global
+// unguarded in another place, it seems safer to define global only for this module
+
+
+
+var
+	version = "3.2.1",
+
+	// Define a local copy of jQuery
+	jQuery = function( selector, context ) {
+
+		// The jQuery object is actually just the init constructor 'enhanced'
+		// Need init if jQuery is called (just allow error to be thrown if not included)
+		return new jQuery.fn.init( selector, context );
+	},
+
+	// Support: Android <=4.0 only
+	// Make sure we trim BOM and NBSP
+	rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
+
+	// Matches dashed string for camelizing
+	rmsPrefix = /^-ms-/,
+	rdashAlpha = /-([a-z])/g,
+
+	// Used by jQuery.camelCase as callback to replace()
+	fcamelCase = function( all, letter ) {
+		return letter.toUpperCase();
+	};
+
+jQuery.fn = jQuery.prototype = {
+
+	// The current version of jQuery being used
+	jquery: version,
+
+	constructor: jQuery,
+
+	// The default length of a jQuery object is 0
+	length: 0,
+
+	toArray: function() {
+		return slice.call( this );
+	},
+
+	// Get the Nth element in the matched element set OR
+	// Get the whole matched element set as a clean array
+	get: function( num ) {
+
+		// Return all the elements in a clean array
+		if ( num == null ) {
+			return slice.call( this );
+		}
+
+		// Return just the one element from the set
+		return num < 0 ? this[ num + this.length ] : this[ num ];
+	},
+
+	// Take an array of elements and push it onto the stack
+	// (returning the new matched element set)
+	pushStack: function( elems ) {
+
+		// Build a new jQuery matched element set
+		var ret = jQuery.merge( this.constructor(), elems );
+
+		// Add the old object onto the stack (as a reference)
+		ret.prevObject = this;
+
+		// Return the newly-formed element set
+		return ret;
+	},
+
+	// Execute a callback for every element in the matched set.
+	each: function( callback ) {
+		return jQuery.each( this, callback );
+	},
+
+	map: function( callback ) {
+		return this.pushStack( jQuery.map( this, function( elem, i ) {
+			return callback.call( elem, i, elem );
+		} ) );
+	},
+
+	slice: function() {
+		return this.pushStack( slice.apply( this, arguments ) );
+	},
+
+	first: function() {
+		return this.eq( 0 );
+	},
+
+	last: function() {
+		return this.eq( -1 );
+	},
+
+	eq: function( i ) {
+		var len = this.length,
+			j = +i + ( i < 0 ? len : 0 );
+		return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
+	},
+
+	end: function() {
+		return this.prevObject || this.constructor();
+	},
+
+	// For internal use only.
+	// Behaves like an Array's method, not like a jQuery method.
+	push: push,
+	sort: arr.sort,
+	splice: arr.splice
+};
+
+jQuery.extend = jQuery.fn.extend = function() {
+	var options, name, src, copy, copyIsArray, clone,
+		target = arguments[ 0 ] || {},
+		i = 1,
+		length = arguments.length,
+		deep = false;
+
+	// Handle a deep copy situation
+	if ( typeof target === "boolean" ) {
+		deep = target;
+
+		// Skip the boolean and the target
+		target = arguments[ i ] || {};
+		i++;
+	}
+
+	// Handle case when target is a string or something (possible in deep copy)
+	if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
+		target = {};
+	}
+
+	// Extend jQuery itself if only one argument is passed
+	if ( i === length ) {
+		target = this;
+		i--;
+	}
+
+	for ( ; i < length; i++ ) {
+
+		// Only deal with non-null/undefined values
+		if ( ( options = arguments[ i ] ) != null ) {
+
+			// Extend the base object
+			for ( name in options ) {
+				src = target[ name ];
+				copy = options[ name ];
+
+				// Prevent never-ending loop
+				if ( target === copy ) {
+					continue;
+				}
+
+				// Recurse if we're merging plain objects or arrays
+				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
+					( copyIsArray = Array.isArray( copy ) ) ) ) {
+
+					if ( copyIsArray ) {
+						copyIsArray = false;
+						clone = src && Array.isArray( src ) ? src : [];
+
+					} else {
+						clone = src && jQuery.isPlainObject( src ) ? src : {};
+					}
+
+					// Never move original objects, clone them
+					target[ name ] = jQuery.extend( deep, clone, copy );
+
+				// Don't bring in undefined values
+				} else if ( copy !== undefined ) {
+					target[ name ] = copy;
+				}
+			}
+		}
+	}
+
+	// Return the modified object
+	return target;
+};
+
+jQuery.extend( {
+
+	// Unique for each copy of jQuery on the page
+	expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
+
+	// Assume jQuery is ready without the ready module
+	isReady: true,
+
+	error: function( msg ) {
+		throw new Error( msg );
+	},
+
+	noop: function() {},
+
+	isFunction: function( obj ) {
+		return jQuery.type( obj ) === "function";
+	},
+
+	isWindow: function( obj ) {
+		return obj != null && obj === obj.window;
+	},
+
+	isNumeric: function( obj ) {
+
+		// As of jQuery 3.0, isNumeric is limited to
+		// strings and numbers (primitives or objects)
+		// that can be coerced to finite numbers (gh-2662)
+		var type = jQuery.type( obj );
+		return ( type === "number" || type === "string" ) &&
+
+			// parseFloat NaNs numeric-cast false positives ("")
+			// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
+			// subtraction forces infinities to NaN
+			!isNaN( obj - parseFloat( obj ) );
+	},
+
+	isPlainObject: function( obj ) {
+		var proto, Ctor;
+
+		// Detect obvious negatives
+		// Use toString instead of jQuery.type to catch host objects
+		if ( !obj || toString.call( obj ) !== "[object Object]" ) {
+			return false;
+		}
+
+		proto = getProto( obj );
+
+		// Objects with no prototype (e.g., `Object.create( null )`) are plain
+		if ( !proto ) {
+			return true;
+		}
+
+		// Objects with prototype are plain iff they were constructed by a global Object function
+		Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
+		return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
+	},
+
+	isEmptyObject: function( obj ) {
+
+		/* eslint-disable no-unused-vars */
+		// See https://github.com/eslint/eslint/issues/6125
+		var name;
+
+		for ( name in obj ) {
+			return false;
+		}
+		return true;
+	},
+
+	type: function( obj ) {
+		if ( obj == null ) {
+			return obj + "";
+		}
+
+		// Support: Android <=2.3 only (functionish RegExp)
+		return typeof obj === "object" || typeof obj === "function" ?
+			class2type[ toString.call( obj ) ] || "object" :
+			typeof obj;
+	},
+
+	// Evaluates a script in a global context
+	globalEval: function( code ) {
+		DOMEval( code );
+	},
+
+	// Convert dashed to camelCase; used by the css and data modules
+	// Support: IE <=9 - 11, Edge 12 - 13
+	// Microsoft forgot to hump their vendor prefix (#9572)
+	camelCase: function( string ) {
+		return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+	},
+
+	each: function( obj, callback ) {
+		var length, i = 0;
+
+		if ( isArrayLike( obj ) ) {
+			length = obj.length;
+			for ( ; i < length; i++ ) {
+				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
+					break;
+				}
+			}
+		} else {
+			for ( i in obj ) {
+				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
+					break;
+				}
+			}
+		}
+
+		return obj;
+	},
+
+	// Support: Android <=4.0 only
+	trim: function( text ) {
+		return text == null ?
+			"" :
+			( text + "" ).replace( rtrim, "" );
+	},
+
+	// results is for internal usage only
+	makeArray: function( arr, results ) {
+		var ret = results || [];
+
+		if ( arr != null ) {
+			if ( isArrayLike( Object( arr ) ) ) {
+				jQuery.merge( ret,
+					typeof arr === "string" ?
+					[ arr ] : arr
+				);
+			} else {
+				push.call( ret, arr );
+			}
+		}
+
+		return ret;
+	},
+
+	inArray: function( elem, arr, i ) {
+		return arr == null ? -1 : indexOf.call( arr, elem, i );
+	},
+
+	// Support: Android <=4.0 only, PhantomJS 1 only
+	// push.apply(_, arraylike) throws on ancient WebKit
+	merge: function( first, second ) {
+		var len = +second.length,
+			j = 0,
+			i = first.length;
+
+		for ( ; j < len; j++ ) {
+			first[ i++ ] = second[ j ];
+		}
+
+		first.length = i;
+
+		return first;
+	},
+
+	grep: function( elems, callback, invert ) {
+		var callbackInverse,
+			matches = [],
+			i = 0,
+			length = elems.length,
+			callbackExpect = !invert;
+
+		// Go through the array, only saving the items
+		// that pass the validator function
+		for ( ; i < length; i++ ) {
+			callbackInverse = !callback( elems[ i ], i );
+			if ( callbackInverse !== callbackExpect ) {
+				matches.push( elems[ i ] );
+			}
+		}
+
+		return matches;
+	},
+
+	// arg is for internal usage only
+	map: function( elems, callback, arg ) {
+		var length, value,
+			i = 0,
+			ret = [];
+
+		// Go through the array, translating each of the items to their new values
+		if ( isArrayLike( elems ) ) {
+			length = elems.length;
+			for ( ; i < length; i++ ) {
+				value = callback( elems[ i ], i, arg );
+
+				if ( value != null ) {
+					ret.push( value );
+				}
+			}
+
+		// Go through every key on the object,
+		} else {
+			for ( i in elems ) {
+				value = callback( elems[ i ], i, arg );
+
+				if ( value != null ) {
+					ret.push( value );
+				}
+			}
+		}
+
+		// Flatten any nested arrays
+		return concat.apply( [], ret );
+	},
+
+	// A global GUID counter for objects
+	guid: 1,
+
+	// Bind a function to a context, optionally partially applying any
+	// arguments.
+	proxy: function( fn, context ) {
+		var tmp, args, proxy;
+
+		if ( typeof context === "string" ) {
+			tmp = fn[ context ];
+			context = fn;
+			fn = tmp;
+		}
+
+		// Quick check to determine if target is callable, in the spec
+		// this throws a TypeError, but we will just return undefined.
+		if ( !jQuery.isFunction( fn ) ) {
+			return undefined;
+		}
+
+		// Simulated bind
+		args = slice.call( arguments, 2 );
+		proxy = function() {
+			return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
+		};
+
+		// Set the guid of unique handler to the same of original handler, so it can be removed
+		proxy.guid = fn.guid = fn.guid || jQuery.guid++;
+
+		return proxy;
+	},
+
+	now: Date.now,
+
+	// jQuery.support is not used in Core but other projects attach their
+	// properties to it so it needs to exist.
+	support: support
+} );
+
+if ( typeof Symbol === "function" ) {
+	jQuery.fn[ Symbol.iterator ] = arr[ Symbol.iterator ];
+}
+
+// Populate the class2type map
+jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
+function( i, name ) {
+	class2type[ "[object " + name + "]" ] = name.toLowerCase();
+} );
+
+function isArrayLike( obj ) {
+
+	// Support: real iOS 8.2 only (not reproducible in simulator)
+	// `in` check used to prevent JIT error (gh-2145)
+	// hasOwn isn't used here due to false negatives
+	// regarding Nodelist length in IE
+	var length = !!obj && "length" in obj && obj.length,
+		type = jQuery.type( obj );
+
+	if ( type === "function" || jQuery.isWindow( obj ) ) {
+		return false;
+	}
+
+	return type === "array" || length === 0 ||
+		typeof length === "number" && length > 0 && ( length - 1 ) in obj;
+}
+var Sizzle =
+/*!
+ * Sizzle CSS Selector Engine v2.3.3
+ * https://sizzlejs.com/
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license
+ * http://jquery.org/license
+ *
+ * Date: 2016-08-08
+ */
+(function( window ) {
+
+var i,
+	support,
+	Expr,
+	getText,
+	isXML,
+	tokenize,
+	compile,
+	select,
+	outermostContext,
+	sortInput,
+	hasDuplicate,
+
+	// Local document vars
+	setDocument,
+	document,
+	docElem,
+	documentIsHTML,
+	rbuggyQSA,
+	rbuggyMatches,
+	matches,
+	contains,
+
+	// Instance-specific data
+	expando = "sizzle" + 1 * new Date(),
+	preferredDoc = window.document,
+	dirruns = 0,
+	done = 0,
+	classCache = createCache(),
+	tokenCache = createCache(),
+	compilerCache = createCache(),
+	sortOrder = function( a, b ) {
+		if ( a === b ) {
+			hasDuplicate = true;
+		}
+		return 0;
+	},
+
+	// Instance methods
+	hasOwn = ({}).hasOwnProperty,
+	arr = [],
+	pop = arr.pop,
+	push_native = arr.push,
+	push = arr.push,
+	slice = arr.slice,
+	// Use a stripped-down indexOf as it's faster than native
+	// https://jsperf.com/thor-indexof-vs-for/5
+	indexOf = function( list, elem ) {
+		var i = 0,
+			len = list.length;
+		for ( ; i < len; i++ ) {
+			if ( list[i] === elem ) {
+				return i;
+			}
+		}
+		return -1;
+	},
+
+	booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",
+
+	// Regular expressions
+
+	// http://www.w3.org/TR/css3-selectors/#whitespace
+	whitespace = "[\\x20\\t\\r\\n\\f]",
+
+	// http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
+	identifier = "(?:\\\\.|[\\w-]|[^\0-\\xa0])+",
+
+	// Attribute selectors: http://www.w3.org/TR/selectors/#attribute-selectors
+	attributes = "\\[" + whitespace + "*(" + identifier + ")(?:" + whitespace +
+		// Operator (capture 2)
+		"*([*^$|!~]?=)" + whitespace +
+		// "Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]"
+		"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|(" + identifier + "))|)" + whitespace +
+		"*\\]",
+
+	pseudos = ":(" + identifier + ")(?:\\((" +
+		// To reduce the number of selectors needing tokenize in the preFilter, prefer arguments:
+		// 1. quoted (capture 3; capture 4 or capture 5)
+		"('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|" +
+		// 2. simple (capture 6)
+		"((?:\\\\.|[^\\\\()[\\]]|" + attributes + ")*)|" +
+		// 3. anything else (capture 2)
+		".*" +
+		")\\)|)",
+
+	// Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter
+	rwhitespace = new RegExp( whitespace + "+", "g" ),
+	rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" ),
+
+	rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),
+	rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ),
+
+	rattributeQuotes = new RegExp( "=" + whitespace + "*([^\\]'\"]*?)" + whitespace + "*\\]", "g" ),
+
+	rpseudo = new RegExp( pseudos ),
+	ridentifier = new RegExp( "^" + identifier + "$" ),
+
+	matchExpr = {
+		"ID": new RegExp( "^#(" + identifier + ")" ),
+		"CLASS": new RegExp( "^\\.(" + identifier + ")" ),
+		"TAG": new RegExp( "^(" + identifier + "|[*])" ),
+		"ATTR": new RegExp( "^" + attributes ),
+		"PSEUDO": new RegExp( "^" + pseudos ),
+		"CHILD": new RegExp( "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\(" + whitespace +
+			"*(even|odd|(([+-]|)(\\d*)n|)" + whitespace + "*(?:([+-]|)" + whitespace +
+			"*(\\d+)|))" + whitespace + "*\\)|)", "i" ),
+		"bool": new RegExp( "^(?:" + booleans + ")$", "i" ),
+		// For use in libraries implementing .is()
+		// We use this for POS matching in `select`
+		"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +
+			whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )
+	},
+
+	rinputs = /^(?:input|select|textarea|button)$/i,
+	rheader = /^h\d$/i,
+
+	rnative = /^[^{]+\{\s*\[native \w/,
+
+	// Easily-parseable/retrievable ID or TAG or CLASS selectors
+	rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,
+
+	rsibling = /[+~]/,
+
+	// CSS escapes
+	// http://www.w3.org/TR/CSS21/syndata.html#escaped-characters
+	runescape = new RegExp( "\\\\([\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)", "ig" ),
+	funescape = function( _, escaped, escapedWhitespace ) {
+		var high = "0x" + escaped - 0x10000;
+		// NaN means non-codepoint
+		// Support: Firefox<24
+		// Workaround erroneous numeric interpretation of +"0x"
+		return high !== high || escapedWhitespace ?
+			escaped :
+			high < 0 ?
+				// BMP codepoint
+				String.fromCharCode( high + 0x10000 ) :
+				// Supplemental Plane codepoint (surrogate pair)
+				String.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );
+	},
+
+	// CSS string/identifier serialization
+	// https://drafts.csswg.org/cssom/#common-serializing-idioms
+	rcssescape = /([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,
+	fcssescape = function( ch, asCodePoint ) {
+		if ( asCodePoint ) {
+
+			// U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
+			if ( ch === "\0" ) {
+				return "\uFFFD";
+			}
+
+			// Control characters and (dependent upon position) numbers get escaped as code points
+			return ch.slice( 0, -1 ) + "\\" + ch.charCodeAt( ch.length - 1 ).toString( 16 ) + " ";
+		}
+
+		// Other potentially-special ASCII characters get backslash-escaped
+		return "\\" + ch;
+	},
+
+	// Used for iframes
+	// See setDocument()
+	// Removing the function wrapper causes a "Permission Denied"
+	// error in IE
+	unloadHandler = function() {
+		setDocument();
+	},
+
+	disabledAncestor = addCombinator(
+		function( elem ) {
+			return elem.disabled === true && ("form" in elem || "label" in elem);
+		},
+		{ dir: "parentNode", next: "legend" }
+	);
+
+// Optimize for push.apply( _, NodeList )
+try {
+	push.apply(
+		(arr = slice.call( preferredDoc.childNodes )),
+		preferredDoc.childNodes
+	);
+	// Support: Android<4.0
+	// Detect silently failing push.apply
+	arr[ preferredDoc.childNodes.length ].nodeType;
+} catch ( e ) {
+	push = { apply: arr.length ?
+
+		// Leverage slice if possible
+		function( target, els ) {
+			push_native.apply( target, slice.call(els) );
+		} :
+
+		// Support: IE<9
+		// Otherwise append directly
+		function( target, els ) {
+			var j = target.length,
+				i = 0;
+			// Can't trust NodeList.length
+			while ( (target[j++] = els[i++]) ) {}
+			target.length = j - 1;
+		}
+	};
+}
+
+function Sizzle( selector, context, results, seed ) {
+	var m, i, elem, nid, match, groups, newSelector,
+		newContext = context && context.ownerDocument,
+
+		// nodeType defaults to 9, since context defaults to document
+		nodeType = context ? context.nodeType : 9;
+
+	results = results || [];
+
+	// Return early from calls with invalid selector or context
+	if ( typeof selector !== "string" || !selector ||
+		nodeType !== 1 && nodeType !== 9 && nodeType !== 11 ) {
+
+		return results;
+	}
+
+	// Try to shortcut find operations (as opposed to filters) in HTML documents
+	if ( !seed ) {
+
+		if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
+			setDocument( context );
+		}
+		context = context || document;
+
+		if ( documentIsHTML ) {
+
+			// If the selector is sufficiently simple, try using a "get*By*" DOM method
+			// (excepting DocumentFragment context, where the methods don't exist)
+			if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) {
+
+				// ID selector
+				if ( (m = match[1]) ) {
+
+					// Document context
+					if ( nodeType === 9 ) {
+						if ( (elem = context.getElementById( m )) ) {
+
+							// Support: IE, Opera, Webkit
+							// TODO: identify versions
+							// getElementById can match elements by name instead of ID
+							if ( elem.id === m ) {
+								results.push( elem );
+								return results;
+							}
+						} else {
+							return results;
+						}
+
+					// Element context
+					} else {
+
+						// Support: IE, Opera, Webkit
+						// TODO: identify versions
+						// getElementById can match elements by name instead of ID
+						if ( newContext && (elem = newContext.getElementById( m )) &&
+							contains( context, elem ) &&
+							elem.id === m ) {
+
+							results.push( elem );
+							return results;
+						}
+					}
+
+				// Type selector
+				} else if ( match[2] ) {
+					push.apply( results, context.getElementsByTagName( selector ) );
+					return results;
+
+				// Class selector
+				} else if ( (m = match[3]) && support.getElementsByClassName &&
+					context.getElementsByClassName ) {
+
+					push.apply( results, context.getElementsByClassName( m ) );
+					return results;
+				}
+			}
+
+			// Take advantage of querySelectorAll
+			if ( support.qsa &&
+				!compilerCache[ selector + " " ] &&
+				(!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
+
+				if ( nodeType !== 1 ) {
+					newContext = context;
+					newSelector = selector;
+
+				// qSA looks outside Element context, which is not what we want
+				// Thanks to Andrew Dupont for this workaround technique
+				// Support: IE <=8
+				// Exclude object elements
+				} else if ( context.nodeName.toLowerCase() !== "object" ) {
+
+					// Capture the context ID, setting it first if necessary
+					if ( (nid = context.getAttribute( "id" )) ) {
+						nid = nid.replace( rcssescape, fcssescape );
+					} else {
+						context.setAttribute( "id", (nid = expando) );
+					}
+
+					// Prefix every selector in the list
+					groups = tokenize( selector );
+					i = groups.length;
+					while ( i-- ) {
+						groups[i] = "#" + nid + " " + toSelector( groups[i] );
+					}
+					newSelector = groups.join( "," );
+
+					// Expand context for sibling selectors
+					newContext = rsibling.test( selector ) && testContext( context.parentNode ) ||
+						context;
+				}
+
+				if ( newSelector ) {
+					try {
+						push.apply( results,
+							newContext.querySelectorAll( newSelector )
+						);
+						return results;
+					} catch ( qsaError ) {
+					} finally {
+						if ( nid === expando ) {
+							context.removeAttribute( "id" );
+						}
+					}
+				}
+			}
+		}
+	}
+
+	// All others
+	return select( selector.replace( rtrim, "$1" ), context, results, seed );
+}
+
+/**
+ * Create key-value caches of limited size
+ * @returns {function(string, object)} Returns the Object data after storing it on itself with
+ *	property name the (space-suffixed) string and (if the cache is larger than Expr.cacheLength)
+ *	deleting the oldest entry
+ */
+function createCache() {
+	var keys = [];
+
+	function cache( key, value ) {
+		// Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
+		if ( keys.push( key + " " ) > Expr.cacheLength ) {
+			// Only keep the most recent entries
+			delete cache[ keys.shift() ];
+		}
+		return (cache[ key + " " ] = value);
+	}
+	return cache;
+}
+
+/**
+ * Mark a function for special use by Sizzle
+ * @param {Function} fn The function to mark
+ */
+function markFunction( fn ) {
+	fn[ expando ] = true;
+	return fn;
+}
+
+/**
+ * Support testing using an element
+ * @param {Function} fn Passed the created element and returns a boolean result
+ */
+function assert( fn ) {
+	var el = document.createElement("fieldset");
+
+	try {
+		return !!fn( el );
+	} catch (e) {
+		return false;
+	} finally {
+		// Remove from its parent by default
+		if ( el.parentNode ) {
+			el.parentNode.removeChild( el );
+		}
+		// release memory in IE
+		el = null;
+	}
+}
+
+/**
+ * Adds the same handler for all of the specified attrs
+ * @param {String} attrs Pipe-separated list of attributes
+ * @param {Function} handler The method that will be applied
+ */
+function addHandle( attrs, handler ) {
+	var arr = attrs.split("|"),
+		i = arr.length;
+
+	while ( i-- ) {
+		Expr.attrHandle[ arr[i] ] = handler;
+	}
+}
+
+/**
+ * Checks document order of two siblings
+ * @param {Element} a
+ * @param {Element} b
+ * @returns {Number} Returns less than 0 if a precedes b, greater than 0 if a follows b
+ */
+function siblingCheck( a, b ) {
+	var cur = b && a,
+		diff = cur && a.nodeType === 1 && b.nodeType === 1 &&
+			a.sourceIndex - b.sourceIndex;
+
+	// Use IE sourceIndex if available on both nodes
+	if ( diff ) {
+		return diff;
+	}
+
+	// Check if b follows a
+	if ( cur ) {
+		while ( (cur = cur.nextSibling) ) {
+			if ( cur === b ) {
+				return -1;
+			}
+		}
+	}
+
+	return a ? 1 : -1;
+}
+
+/**
+ * Returns a function to use in pseudos for input types
+ * @param {String} type
+ */
+function createInputPseudo( type ) {
+	return function( elem ) {
+		var name = elem.nodeName.toLowerCase();
+		return name === "input" && elem.type === type;
+	};
+}
+
+/**
+ * Returns a function to use in pseudos for buttons
+ * @param {String} type
+ */
+function createButtonPseudo( type ) {
+	return function( elem ) {
+		var name = elem.nodeName.toLowerCase();
+		return (name === "input" || name === "button") && elem.type === type;
+	};
+}
+
+/**
+ * Returns a function to use in pseudos for :enabled/:disabled
+ * @param {Boolean} disabled true for :disabled; false for :enabled
+ */
+function createDisabledPseudo( disabled ) {
+
+	// Known :disabled false positives: fieldset[disabled] > legend:nth-of-type(n+2) :can-disable
+	return function( elem ) {
+
+		// Only certain elements can match :enabled or :disabled
+		// https://html.spec.whatwg.org/multipage/scripting.html#selector-enabled
+		// https://html.spec.whatwg.org/multipage/scripting.html#selector-disabled
+		if ( "form" in elem ) {
+
+			// Check for inherited disabledness on relevant non-disabled elements:
+			// * listed form-associated elements in a disabled fieldset
+			//   https://html.spec.whatwg.org/multipage/forms.html#category-listed
+			//   https://html.spec.whatwg.org/multipage/forms.html#concept-fe-disabled
+			// * option elements in a disabled optgroup
+			//   https://html.spec.whatwg.org/multipage/forms.html#concept-option-disabled
+			// All such elements have a "form" property.
+			if ( elem.parentNode && elem.disabled === false ) {
+
+				// Option elements defer to a parent optgroup if present
+				if ( "label" in elem ) {
+					if ( "label" in elem.parentNode ) {
+						return elem.parentNode.disabled === disabled;
+					} else {
+						return elem.disabled === disabled;
+					}
+				}
+
+				// Support: IE 6 - 11
+				// Use the isDisabled shortcut property to check for disabled fieldset ancestors
+				return elem.isDisabled === disabled ||
+
+					// Where there is no isDisabled, check manually
+					/* jshint -W018 */
+					elem.isDisabled !== !disabled &&
+						disabledAncestor( elem ) === disabled;
+			}
+
+			return elem.disabled === disabled;
+
+		// Try to winnow out elements that can't be disabled before trusting the disabled property.
+		// Some victims get caught in our net (label, legend, menu, track), but it shouldn't
+		// even exist on them, let alone have a boolean value.
+		} else if ( "label" in elem ) {
+			return elem.disabled === disabled;
+		}
+
+		// Remaining elements are neither :enabled nor :disabled
+		return false;
+	};
+}
+
+/**
+ * Returns a function to use in pseudos for positionals
+ * @param {Function} fn
+ */
+function createPositionalPseudo( fn ) {
+	return markFunction(function( argument ) {
+		argument = +argument;
+		return markFunction(function( seed, matches ) {
+			var j,
+				matchIndexes = fn( [], seed.length, argument ),
+				i = matchIndexes.length;
+
+			// Match elements found at the specified indexes
+			while ( i-- ) {
+				if ( seed[ (j = matchIndexes[i]) ] ) {
+					seed[j] = !(matches[j] = seed[j]);
+				}
+			}
+		});
+	});
+}
+
+/**
+ * Checks a node for validity as a Sizzle context
+ * @param {Element|Object=} context
+ * @returns {Element|Object|Boolean} The input node if acceptable, otherwise a falsy value
+ */
+function testContext( context ) {
+	return context && typeof context.getElementsByTagName !== "undefined" && context;
+}
+
+// Expose support vars for convenience
+support = Sizzle.support = {};
+
+/**
+ * Detects XML nodes
+ * @param {Element|Object} elem An element or a document
+ * @returns {Boolean} True iff elem is a non-HTML XML node
+ */
+isXML = Sizzle.isXML = function( elem ) {
+	// documentElement is verified for cases where it doesn't yet exist
+	// (such as loading iframes in IE - #4833)
+	var documentElement = elem && (elem.ownerDocument || elem).documentElement;
+	return documentElement ? documentElement.nodeName !== "HTML" : false;
+};
+
+/**
+ * Sets document-related variables once based on the current document
+ * @param {Element|Object} [doc] An element or document object to use to set the document
+ * @returns {Object} Returns the current document
+ */
+setDocument = Sizzle.setDocument = function( node ) {
+	var hasCompare, subWindow,
+		doc = node ? node.ownerDocument || node : preferredDoc;
+
+	// Return early if doc is invalid or already selected
+	if ( doc === document || doc.nodeType !== 9 || !doc.documentElement ) {
+		return document;
+	}
+
+	// Update global variables
+	document = doc;
+	docElem = document.documentElement;
+	documentIsHTML = !isXML( document );
+
+	// Support: IE 9-11, Edge
+	// Accessing iframe documents after unload throws "permission denied" errors (jQuery #13936)
+	if ( preferredDoc !== document &&
+		(subWindow = document.defaultView) && subWindow.top !== subWindow ) {
+
+		// Support: IE 11, Edge
+		if ( subWindow.addEventListener ) {
+			subWindow.addEventListener( "unload", unloadHandler, false );
+
+		// Support: IE 9 - 10 only
+		} else if ( subWindow.attachEvent ) {
+			subWindow.attachEvent( "onunload", unloadHandler );
+		}
+	}
+
+	/* Attributes
+	---------------------------------------------------------------------- */
+
+	// Support: IE<8
+	// Verify that getAttribute really returns attributes and not properties
+	// (excepting IE8 booleans)
+	support.attributes = assert(function( el ) {
+		el.className = "i";
+		return !el.getAttribute("className");
+	});
+
+	/* getElement(s)By*
+	---------------------------------------------------------------------- */
+
+	// Check if getElementsByTagName("*") returns only elements
+	support.getElementsByTagName = assert(function( el ) {
+		el.appendChild( document.createComment("") );
+		return !el.getElementsByTagName("*").length;
+	});
+
+	// Support: IE<9
+	support.getElementsByClassName = rnative.test( document.getElementsByClassName );
+
+	// Support: IE<10
+	// Check if getElementById returns elements by name
+	// The broken getElementById methods don't pick up programmatically-set names,
+	// so use a roundabout getElementsByName test
+	support.getById = assert(function( el ) {
+		docElem.appendChild( el ).id = expando;
+		return !document.getElementsByName || !document.getElementsByName( expando ).length;
+	});
+
+	// ID filter and find
+	if ( support.getById ) {
+		Expr.filter["ID"] = function( id ) {
+			var attrId = id.replace( runescape, funescape );
+			return function( elem ) {
+				return elem.getAttribute("id") === attrId;
+			};
+		};
+		Expr.find["ID"] = function( id, context ) {
+			if ( typeof context.getElementById !== "undefined" && documentIsHTML ) {
+				var elem = context.getElementById( id );
+				return elem ? [ elem ] : [];
+			}
+		};
+	} else {
+		Expr.filter["ID"] =  function( id ) {
+			var attrId = id.replace( runescape, funescape );
+			return function( elem ) {
+				var node = typeof elem.getAttributeNode !== "undefined" &&
+					elem.getAttributeNode("id");
+				return node && node.value === attrId;
+			};
+		};
+
+		// Support: IE 6 - 7 only
+		// getElementById is not reliable as a find shortcut
+		Expr.find["ID"] = function( id, context ) {
+			if ( typeof context.getElementById !== "undefined" && documentIsHTML ) {
+				var node, i, elems,
+					elem = context.getElementById( id );
+
+				if ( elem ) {
+
+					// Verify the id attribute
+					node = elem.getAttributeNode("id");
+					if ( node && node.value === id ) {
+						return [ elem ];
+					}
+
+					// Fall back on getElementsByName
+					elems = context.getElementsByName( id );
+					i = 0;
+					while ( (elem = elems[i++]) ) {
+						node = elem.getAttributeNode("id");
+						if ( node && node.value === id ) {
+							return [ elem ];
+						}
+					}
+				}
+
+				return [];
+			}
+		};
+	}
+
+	// Tag
+	Expr.find["TAG"] = support.getElementsByTagName ?
+		function( tag, context ) {
+			if ( typeof context.getElementsByTagName !== "undefined" ) {
+				return context.getElementsByTagName( tag );
+
+			// DocumentFragment nodes don't have gEBTN
+			} else if ( support.qsa ) {
+				return context.querySelectorAll( tag );
+			}
+		} :
+
+		function( tag, context ) {
+			var elem,
+				tmp = [],
+				i = 0,
+				// By happy coincidence, a (broken) gEBTN appears on DocumentFragment nodes too
+				results = context.getElementsByTagName( tag );
+
+			// Filter out possible comments
+			if ( tag === "*" ) {
+				while ( (elem = results[i++]) ) {
+					if ( elem.nodeType === 1 ) {
+						tmp.push( elem );
+					}
+				}
+
+				return tmp;
+			}
+			return results;
+		};
+
+	// Class
+	Expr.find["CLASS"] = support.getElementsByClassName && function( className, context ) {
+		if ( typeof context.getElementsByClassName !== "undefined" && documentIsHTML ) {
+			return context.getElementsByClassName( className );
+		}
+	};
+
+	/* QSA/matchesSelector
+	---------------------------------------------------------------------- */
+
+	// QSA and matchesSelector support
+
+	// matchesSelector(:active) reports false when true (IE9/Opera 11.5)
+	rbuggyMatches = [];
+
+	// qSa(:focus) reports false when true (Chrome 21)
+	// We allow this because of a bug in IE8/9 that throws an error
+	// whenever `document.activeElement` is accessed on an iframe
+	// So, we allow :focus to pass through QSA all the time to avoid the IE error
+	// See https://bugs.jquery.com/ticket/13378
+	rbuggyQSA = [];
+
+	if ( (support.qsa = rnative.test( document.querySelectorAll )) ) {
+		// Build QSA regex
+		// Regex strategy adopted from Diego Perini
+		assert(function( el ) {
+			// Select is set to empty string on purpose
+			// This is to test IE's treatment of not explicitly
+			// setting a boolean content attribute,
+			// since its presence should be enough
+			// https://bugs.jquery.com/ticket/12359
+			docElem.appendChild( el ).innerHTML = "<a id='" + expando + "'></a>" +
+				"<select id='" + expando + "-\r\\' msallowcapture=''>" +
+				"<option selected=''></option></select>";
+
+			// Support: IE8, Opera 11-12.16
+			// Nothing should be selected when empty strings follow ^= or $= or *=
+			// The test attribute must be unknown in Opera but "safe" for WinRT
+			// https://msdn.microsoft.com/en-us/library/ie/hh465388.aspx#attribute_section
+			if ( el.querySelectorAll("[msallowcapture^='']").length ) {
+				rbuggyQSA.push( "[*^$]=" + whitespace + "*(?:''|\"\")" );
+			}
+
+			// Support: IE8
+			// Boolean attributes and "value" are not treated correctly
+			if ( !el.querySelectorAll("[selected]").length ) {
+				rbuggyQSA.push( "\\[" + whitespace + "*(?:value|" + booleans + ")" );
+			}
+
+			// Support: Chrome<29, Android<4.4, Safari<7.0+, iOS<7.0+, PhantomJS<1.9.8+
+			if ( !el.querySelectorAll( "[id~=" + expando + "-]" ).length ) {
+				rbuggyQSA.push("~=");
+			}
+
+			// Webkit/Opera - :checked should return selected option elements
+			// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
+			// IE8 throws error here and will not see later tests
+			if ( !el.querySelectorAll(":checked").length ) {
+				rbuggyQSA.push(":checked");
+			}
+
+			// Support: Safari 8+, iOS 8+
+			// https://bugs.webkit.org/show_bug.cgi?id=136851
+			// In-page `selector#id sibling-combinator selector` fails
+			if ( !el.querySelectorAll( "a#" + expando + "+*" ).length ) {
+				rbuggyQSA.push(".#.+[+~]");
+			}
+		});
+
+		assert(function( el ) {
+			el.innerHTML = "<a href='' disabled='disabled'></a>" +
+				"<select disabled='disabled'><option/></select>";
+
+			// Support: Windows 8 Native Apps
+			// The type and name attributes are restricted during .innerHTML assignment
+			var input = document.createElement("input");
+			input.setAttribute( "type", "hidden" );
+			el.appendChild( input ).setAttribute( "name", "D" );
+
+			// Support: IE8
+			// Enforce case-sensitivity of name attribute
+			if ( el.querySelectorAll("[name=d]").length ) {
+				rbuggyQSA.push( "name" + whitespace + "*[*^$|!~]?=" );
+			}
+
+			// FF 3.5 - :enabled/:disabled and hidden elements (hidden elements are still enabled)
+			// IE8 throws error here and will not see later tests
+			if ( el.querySelectorAll(":enabled").length !== 2 ) {
+				rbuggyQSA.push( ":enabled", ":disabled" );
+			}
+
+			// Support: IE9-11+
+			// IE's :disabled selector does not pick up the children of disabled fieldsets
+			docElem.appendChild( el ).disabled = true;
+			if ( el.querySelectorAll(":disabled").length !== 2 ) {
+				rbuggyQSA.push( ":enabled", ":disabled" );
+			}
+
+			// Opera 10-11 does not throw on post-comma invalid pseudos
+			el.querySelectorAll("*,:x");
+			rbuggyQSA.push(",.*:");
+		});
+	}
+
+	if ( (support.matchesSelector = rnative.test( (matches = docElem.matches ||
+		docElem.webkitMatchesSelector ||
+		docElem.mozMatchesSelector ||
+		docElem.oMatchesSelector ||
+		docElem.msMatchesSelector) )) ) {
+
+		assert(function( el ) {
+			// Check to see if it's possible to do matchesSelector
+			// on a disconnected node (IE 9)
+			support.disconnectedMatch = matches.call( el, "*" );
+
+			// This should fail with an exception
+			// Gecko does not error, returns false instead
+			matches.call( el, "[s!='']:x" );
+			rbuggyMatches.push( "!=", pseudos );
+		});
+	}
+
+	rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join("|") );
+	rbuggyMatches = rbuggyMatches.length && new RegExp( rbuggyMatches.join("|") );
+
+	/* Contains
+	---------------------------------------------------------------------- */
+	hasCompare = rnative.test( docElem.compareDocumentPosition );
+
+	// Element contains another
+	// Purposefully self-exclusive
+	// As in, an element does not contain itself
+	contains = hasCompare || rnative.test( docElem.contains ) ?
+		function( a, b ) {
+			var adown = a.nodeType === 9 ? a.documentElement : a,
+				bup = b && b.parentNode;
+			return a === bup || !!( bup && bup.nodeType === 1 && (
+				adown.contains ?
+					adown.contains( bup ) :
+					a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16
+			));
+		} :
+		function( a, b ) {
+			if ( b ) {
+				while ( (b = b.parentNode) ) {
+					if ( b === a ) {
+						return true;
+					}
+				}
+			}
+			return false;
+		};
+
+	/* Sorting
+	---------------------------------------------------------------------- */
+
+	// Document order sorting
+	sortOrder = hasCompare ?
+	function( a, b ) {
+
+		// Flag for duplicate removal
+		if ( a === b ) {
+			hasDuplicate = true;
+			return 0;
+		}
+
+		// Sort on method existence if only one input has compareDocumentPosition
+		var compare = !a.compareDocumentPosition - !b.compareDocumentPosition;
+		if ( compare ) {
+			return compare;
+		}
+
+		// Calculate position if both inputs belong to the same document
+		compare = ( a.ownerDocument || a ) === ( b.ownerDocument || b ) ?
+			a.compareDocumentPosition( b ) :
+
+			// Otherwise we know they are disconnected
+			1;
+
+		// Disconnected nodes
+		if ( compare & 1 ||
+			(!support.sortDetached && b.compareDocumentPosition( a ) === compare) ) {
+
+			// Choose the first element that is related to our preferred document
+			if ( a === document || a.ownerDocument === preferredDoc && contains(preferredDoc, a) ) {
+				return -1;
+			}
+			if ( b === document || b.ownerDocument === preferredDoc && contains(preferredDoc, b) ) {
+				return 1;
+			}
+
+			// Maintain original order
+			return sortInput ?
+				( indexOf( sortInput, a ) - indexOf( sortInput, b ) ) :
+				0;
+		}
+
+		return compare & 4 ? -1 : 1;
+	} :
+	function( a, b ) {
+		// Exit early if the nodes are identical
+		if ( a === b ) {
+			hasDuplicate = true;
+			return 0;
+		}
+
+		var cur,
+			i = 0,
+			aup = a.parentNode,
+			bup = b.parentNode,
+			ap = [ a ],
+			bp = [ b ];
+
+		// Parentless nodes are either documents or disconnected
+		if ( !aup || !bup ) {
+			return a === document ? -1 :
+				b === document ? 1 :
+				aup ? -1 :
+				bup ? 1 :
+				sortInput ?
+				( indexOf( sortInput, a ) - indexOf( sortInput, b ) ) :
+				0;
+
+		// If the nodes are siblings, we can do a quick check
+		} else if ( aup === bup ) {
+			return siblingCheck( a, b );
+		}
+
+		// Otherwise we need full lists of their ancestors for comparison
+		cur = a;
+		while ( (cur = cur.parentNode) ) {
+			ap.unshift( cur );
+		}
+		cur = b;
+		while ( (cur = cur.parentNode) ) {
+			bp.unshift( cur );
+		}
+
+		// Walk down the tree looking for a discrepancy
+		while ( ap[i] === bp[i] ) {
+			i++;
+		}
+
+		return i ?
+			// Do a sibling check if the nodes have a common ancestor
+			siblingCheck( ap[i], bp[i] ) :
+
+			// Otherwise nodes in our document sort first
+			ap[i] === preferredDoc ? -1 :
+			bp[i] === preferredDoc ? 1 :
+			0;
+	};
+
+	return document;
+};
+
+Sizzle.matches = function( expr, elements ) {
+	return Sizzle( expr, null, null, elements );
+};
+
+Sizzle.matchesSelector = function( elem, expr ) {
+	// Set document vars if needed
+	if ( ( elem.ownerDocument || elem ) !== document ) {
+		setDocument( elem );
+	}
+
+	// Make sure that attribute selectors are quoted
+	expr = expr.replace( rattributeQuotes, "='$1']" );
+
+	if ( support.matchesSelector && documentIsHTML &&
+		!compilerCache[ expr + " " ] &&
+		( !rbuggyMatches || !rbuggyMatches.test( expr ) ) &&
+		( !rbuggyQSA     || !rbuggyQSA.test( expr ) ) ) {
+
+		try {
+			var ret = matches.call( elem, expr );
+
+			// IE 9's matchesSelector returns false on disconnected nodes
+			if ( ret || support.disconnectedMatch ||
+					// As well, disconnected nodes are said to be in a document
+					// fragment in IE 9
+					elem.document && elem.document.nodeType !== 11 ) {
+				return ret;
+			}
+		} catch (e) {}
+	}
+
+	return Sizzle( expr, document, null, [ elem ] ).length > 0;
+};
+
+Sizzle.contains = function( context, elem ) {
+	// Set document vars if needed
+	if ( ( context.ownerDocument || context ) !== document ) {
+		setDocument( context );
+	}
+	return contains( context, elem );
+};
+
+Sizzle.attr = function( elem, name ) {
+	// Set document vars if needed
+	if ( ( elem.ownerDocument || elem ) !== document ) {
+		setDocument( elem );
+	}
+
+	var fn = Expr.attrHandle[ name.toLowerCase() ],
+		// Don't get fooled by Object.prototype properties (jQuery #13807)
+		val = fn && hasOwn.call( Expr.attrHandle, name.toLowerCase() ) ?
+			fn( elem, name, !documentIsHTML ) :
+			undefined;
+
+	return val !== undefined ?
+		val :
+		support.attributes || !documentIsHTML ?
+			elem.getAttribute( name ) :
+			(val = elem.getAttributeNode(name)) && val.specified ?
+				val.value :
+				null;
+};
+
+Sizzle.escape = function( sel ) {
+	return (sel + "").replace( rcssescape, fcssescape );
+};
+
+Sizzle.error = function( msg ) {
+	throw new Error( "Syntax error, unrecognized expression: " + msg );
+};
+
+/**
+ * Document sorting and removing duplicates
+ * @param {ArrayLike} results
+ */
+Sizzle.uniqueSort = function( results ) {
+	var elem,
+		duplicates = [],
+		j = 0,
+		i = 0;
+
+	// Unless we *know* we can detect duplicates, assume their presence
+	hasDuplicate = !support.detectDuplicates;
+	sortInput = !support.sortStable && results.slice( 0 );
+	results.sort( sortOrder );
+
+	if ( hasDuplicate ) {
+		while ( (elem = results[i++]) ) {
+			if ( elem === results[ i ] ) {
+				j = duplicates.push( i );
+			}
+		}
+		while ( j-- ) {
+			results.splice( duplicates[ j ], 1 );
+		}
+	}
+
+	// Clear input after sorting to release objects
+	// See https://github.com/jquery/sizzle/pull/225
+	sortInput = null;
+
+	return results;
+};
+
+/**
+ * Utility function for retrieving the text value of an array of DOM nodes
+ * @param {Array|Element} elem
+ */
+getText = Sizzle.getText = function( elem ) {
+	var node,
+		ret = "",
+		i = 0,
+		nodeType = elem.nodeType;
+
+	if ( !nodeType ) {
+		// If no nodeType, this is expected to be an array
+		while ( (node = elem[i++]) ) {
+			// Do not traverse comment nodes
+			ret += getText( node );
+		}
+	} else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
+		// Use textContent for elements
+		// innerText usage removed for consistency of new lines (jQuery #11153)
+		if ( typeof elem.textContent === "string" ) {
+			return elem.textContent;
+		} else {
+			// Traverse its children
+			for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
+				ret += getText( elem );
+			}
+		}
+	} else if ( nodeType === 3 || nodeType === 4 ) {
+		return elem.nodeValue;
+	}
+	// Do not include comment or processing instruction nodes
+
+	return ret;
+};
+
+Expr = Sizzle.selectors = {
+
+	// Can be adjusted by the user
+	cacheLength: 50,
+
+	createPseudo: markFunction,
+
+	match: matchExpr,
+
+	attrHandle: {},
+
+	find: {},
+
+	relative: {
+		">": { dir: "parentNode", first: true },
+		" ": { dir: "parentNode" },
+		"+": { dir: "previousSibling", first: true },
+		"~": { dir: "previousSibling" }
+	},
+
+	preFilter: {
+		"ATTR": function( match ) {
+			match[1] = match[1].replace( runescape, funescape );
+
+			// Move the given value to match[3] whether quoted or unquoted
+			match[3] = ( match[3] || match[4] || match[5] || "" ).replace( runescape, funescape );
+
+			if ( match[2] === "~=" ) {
+				match[3] = " " + match[3] + " ";
+			}
+
+			return match.slice( 0, 4 );
+		},
+
+		"CHILD": function( match ) {
+			/* matches from matchExpr["CHILD"]
+				1 type (only|nth|...)
+				2 what (child|of-type)
+				3 argument (even|odd|\d*|\d*n([+-]\d+)?|...)
+				4 xn-component of xn+y argument ([+-]?\d*n|)
+				5 sign of xn-component
+				6 x of xn-component
+				7 sign of y-component
+				8 y of y-component
+			*/
+			match[1] = match[1].toLowerCase();
+
+			if ( match[1].slice( 0, 3 ) === "nth" ) {
+				// nth-* requires argument
+				if ( !match[3] ) {
+					Sizzle.error( match[0] );
+				}
+
+				// numeric x and y parameters for Expr.filter.CHILD
+				// remember that false/true cast respectively to 0/1
+				match[4] = +( match[4] ? match[5] + (match[6] || 1) : 2 * ( match[3] === "even" || match[3] === "odd" ) );
+				match[5] = +( ( match[7] + match[8] ) || match[3] === "odd" );
+
+			// other types prohibit arguments
+			} else if ( match[3] ) {
+				Sizzle.error( match[0] );
+			}
+
+			return match;
+		},
+
+		"PSEUDO": function( match ) {
+			var excess,
+				unquoted = !match[6] && match[2];
+
+			if ( matchExpr["CHILD"].test( match[0] ) ) {
+				return null;
+			}
+
+			// Accept quoted arguments as-is
+			if ( match[3] ) {
+				match[2] = match[4] || match[5] || "";
+
+			// Strip excess characters from unquoted arguments
+			} else if ( unquoted && rpseudo.test( unquoted ) &&
+				// Get excess from tokenize (recursively)
+				(excess = tokenize( unquoted, true )) &&
+				// advance to the next closing parenthesis
+				(excess = unquoted.indexOf( ")", unquoted.length - excess ) - unquoted.length) ) {
+
+				// excess is a negative index
+				match[0] = match[0].slice( 0, excess );
+				match[2] = unquoted.slice( 0, excess );
+			}
+
+			// Return only captures needed by the pseudo filter method (type and argument)
+			return match.slice( 0, 3 );
+		}
+	},
+
+	filter: {
+
+		"TAG": function( nodeNameSelector ) {
+			var nodeName = nodeNameSelector.replace( runescape, funescape ).toLowerCase();
+			return nodeNameSelector === "*" ?
+				function() { return true; } :
+				function( elem ) {
+					return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
+				};
+		},
+
+		"CLASS": function( className ) {
+			var pattern = classCache[ className + " " ];
+
+			return pattern ||
+				(pattern = new RegExp( "(^|" + whitespace + ")" + className + "(" + whitespace + "|$)" )) &&
+				classCache( className, function( elem ) {
+					return pattern.test( typeof elem.className === "string" && elem.className || typeof elem.getAttribute !== "undefined" && elem.getAttribute("class") || "" );
+				});
+		},
+
+		"ATTR": function( name, operator, check ) {
+			return function( elem ) {
+				var result = Sizzle.attr( elem, name );
+
+				if ( result == null ) {
+					return operator === "!=";
+				}
+				if ( !operator ) {
+					return true;
+				}
+
+				result += "";
+
+				return operator === "=" ? result === check :
+					operator === "!=" ? result !== check :
+					operator === "^=" ? check && result.indexOf( check ) === 0 :
+					operator === "*=" ? check && result.indexOf( check ) > -1 :
+					operator === "$=" ? check && result.slice( -check.length ) === check :
+					operator === "~=" ? ( " " + result.replace( rwhitespace, " " ) + " " ).indexOf( check ) > -1 :
+					operator === "|=" ? result === check || result.slice( 0, check.length + 1 ) === check + "-" :
+					false;
+			};
+		},
+
+		"CHILD": function( type, what, argument, first, last ) {
+			var simple = type.slice( 0, 3 ) !== "nth",
+				forward = type.slice( -4 ) !== "last",
+				ofType = what === "of-type";
+
+			return first === 1 && last === 0 ?
+
+				// Shortcut for :nth-*(n)
+				function( elem ) {
+					return !!elem.parentNode;
+				} :
+
+				function( elem, context, xml ) {
+					var cache, uniqueCache, outerCache, node, nodeIndex, start,
+						dir = simple !== forward ? "nextSibling" : "previousSibling",
+						parent = elem.parentNode,
+						name = ofType && elem.nodeName.toLowerCase(),
+						useCache = !xml && !ofType,
+						diff = false;
+
+					if ( parent ) {
+
+						// :(first|last|only)-(child|of-type)
+						if ( simple ) {
+							while ( dir ) {
+								node = elem;
+								while ( (node = node[ dir ]) ) {
+									if ( ofType ?
+										node.nodeName.toLowerCase() === name :
+										node.nodeType === 1 ) {
+
+										return false;
+									}
+								}
+								// Reverse direction for :only-* (if we haven't yet done so)
+								start = dir = type === "only" && !start && "nextSibling";
+							}
+							return true;
+						}
+
+						start = [ forward ? parent.firstChild : parent.lastChild ];
+
+						// non-xml :nth-child(...) stores cache data on `parent`
+						if ( forward && useCache ) {
+
+							// Seek `elem` from a previously-cached index
+
+							// ...in a gzip-friendly way
+							node = parent;
+							outerCache = node[ expando ] || (node[ expando ] = {});
+
+							// Support: IE <9 only
+							// Defend against cloned attroperties (jQuery gh-1709)
+							uniqueCache = outerCache[ node.uniqueID ] ||
+								(outerCache[ node.uniqueID ] = {});
+
+							cache = uniqueCache[ type ] || [];
+							nodeIndex = cache[ 0 ] === dirruns && cache[ 1 ];
+							diff = nodeIndex && cache[ 2 ];
+							node = nodeIndex && parent.childNodes[ nodeIndex ];
+
+							while ( (node = ++nodeIndex && node && node[ dir ] ||
+
+								// Fallback to seeking `elem` from the start
+								(diff = nodeIndex = 0) || start.pop()) ) {
+
+								// When found, cache indexes on `parent` and break
+								if ( node.nodeType === 1 && ++diff && node === elem ) {
+									uniqueCache[ type ] = [ dirruns, nodeIndex, diff ];
+									break;
+								}
+							}
+
+						} else {
+							// Use previously-cached element index if available
+							if ( useCache ) {
+								// ...in a gzip-friendly way
+								node = elem;
+								outerCache = node[ expando ] || (node[ expando ] = {});
+
+								// Support: IE <9 only
+								// Defend against cloned attroperties (jQuery gh-1709)
+								uniqueCache = outerCache[ node.uniqueID ] ||
+									(outerCache[ node.uniqueID ] = {});
+
+								cache = uniqueCache[ type ] || [];
+								nodeIndex = cache[ 0 ] === dirruns && cache[ 1 ];
+								diff = nodeIndex;
+							}
+
+							// xml :nth-child(...)
+							// or :nth-last-child(...) or :nth(-last)?-of-type(...)
+							if ( diff === false ) {
+								// Use the same loop as above to seek `elem` from the start
+								while ( (node = ++nodeIndex && node && node[ dir ] ||
+									(diff = nodeIndex = 0) || start.pop()) ) {
+
+									if ( ( ofType ?
+										node.nodeName.toLowerCase() === name :
+										node.nodeType === 1 ) &&
+										++diff ) {
+
+										// Cache the index of each encountered element
+										if ( useCache ) {
+											outerCache = node[ expando ] || (node[ expando ] = {});
+
+											// Support: IE <9 only
+											// Defend against cloned attroperties (jQuery gh-1709)
+											uniqueCache = outerCache[ node.uniqueID ] ||
+												(outerCache[ node.uniqueID ] = {});
+
+											uniqueCache[ type ] = [ dirruns, diff ];
+										}
+
+										if ( node === elem ) {
+											break;
+										}
+									}
+								}
+							}
+						}
+
+						// Incorporate the offset, then check against cycle size
+						diff -= last;
+						return diff === first || ( diff % first === 0 && diff / first >= 0 );
+					}
+				};
+		},
+
+		"PSEUDO": function( pseudo, argument ) {
+			// pseudo-class names are case-insensitive
+			// http://www.w3.org/TR/selectors/#pseudo-classes
+			// Prioritize by case sensitivity in case custom pseudos are added with uppercase letters
+			// Remember that setFilters inherits from pseudos
+			var args,
+				fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||
+					Sizzle.error( "unsupported pseudo: " + pseudo );
+
+			// The user may use createPseudo to indicate that
+			// arguments are needed to create the filter function
+			// just as Sizzle does
+			if ( fn[ expando ] ) {
+				return fn( argument );
+			}
+
+			// But maintain support for old signatures
+			if ( fn.length > 1 ) {
+				args = [ pseudo, pseudo, "", argument ];
+				return Expr.setFilters.hasOwnProperty( pseudo.toLowerCase() ) ?
+					markFunction(function( seed, matches ) {
+						var idx,
+							matched = fn( seed, argument ),
+							i = matched.length;
+						while ( i-- ) {
+							idx = indexOf( seed, matched[i] );
+							seed[ idx ] = !( matches[ idx ] = matched[i] );
+						}
+					}) :
+					function( elem ) {
+						return fn( elem, 0, args );
+					};
+			}
+
+			return fn;
+		}
+	},
+
+	pseudos: {
+		// Potentially complex pseudos
+		"not": markFunction(function( selector ) {
+			// Trim the selector passed to compile
+			// to avoid treating leading and trailing
+			// spaces as combinators
+			var input = [],
+				results = [],
+				matcher = compile( selector.replace( rtrim, "$1" ) );
+
+			return matcher[ expando ] ?
+				markFunction(function( seed, matches, context, xml ) {
+					var elem,
+						unmatched = matcher( seed, null, xml, [] ),
+						i = seed.length;
+
+					// Match elements unmatched by `matcher`
+					while ( i-- ) {
+						if ( (elem = unmatched[i]) ) {
+							seed[i] = !(matches[i] = elem);
+						}
+					}
+				}) :
+				function( elem, context, xml ) {
+					input[0] = elem;
+					matcher( input, null, xml, results );
+					// Don't keep the element (issue #299)
+					input[0] = null;
+					return !results.pop();
+				};
+		}),
+
+		"has": markFunction(function( selector ) {
+			return function( elem ) {
+				return Sizzle( selector, elem ).length > 0;
+			};
+		}),
+
+		"contains": markFunction(function( text ) {
+			text = text.replace( runescape, funescape );
+			return function( elem ) {
+				return ( elem.textContent || elem.innerText || getText( elem ) ).indexOf( text ) > -1;
+			};
+		}),
+
+		// "Whether an element is represented by a :lang() selector
+		// is based solely on the element's language value
+		// being equal to the identifier C,
+		// or beginning with the identifier C immediately followed by "-".
+		// The matching of C against the element's language value is performed case-insensitively.
+		// The identifier C does not have to be a valid language name."
+		// http://www.w3.org/TR/selectors/#lang-pseudo
+		"lang": markFunction( function( lang ) {
+			// lang value must be a valid identifier
+			if ( !ridentifier.test(lang || "") ) {
+				Sizzle.error( "unsupported lang: " + lang );
+			}
+			lang = lang.replace( runescape, funescape ).toLowerCase();
+			return function( elem ) {
+				var elemLang;
+				do {
+					if ( (elemLang = documentIsHTML ?
+						elem.lang :
+						elem.getAttribute("xml:lang") || elem.getAttribute("lang")) ) {
+
+						elemLang = elemLang.toLowerCase();
+						return elemLang === lang || elemLang.indexOf( lang + "-" ) === 0;
+					}
+				} while ( (elem = elem.parentNode) && elem.nodeType === 1 );
+				return false;
+			};
+		}),
+
+		// Miscellaneous
+		"target": function( elem ) {
+			var hash = window.location && window.location.hash;
+			return hash && hash.slice( 1 ) === elem.id;
+		},
+
+		"root": function( elem ) {
+			return elem === docElem;
+		},
+
+		"focus": function( elem ) {
+			return elem === document.activeElement && (!document.hasFocus || document.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);
+		},
+
+		// Boolean properties
+		"enabled": createDisabledPseudo( false ),
+		"disabled": createDisabledPseudo( true ),
+
+		"checked": function( elem ) {
+			// In CSS3, :checked should return both checked and selected elements
+			// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
+			var nodeName = elem.nodeName.toLowerCase();
+			return (nodeName === "input" && !!elem.checked) || (nodeName === "option" && !!elem.selected);
+		},
+
+		"selected": function( elem ) {
+			// Accessing this property makes selected-by-default
+			// options in Safari work properly
+			if ( elem.parentNode ) {
+				elem.parentNode.selectedIndex;
+			}
+
+			return elem.selected === true;
+		},
+
+		// Contents
+		"empty": function( elem ) {
+			// http://www.w3.org/TR/selectors/#empty-pseudo
+			// :empty is negated by element (1) or content nodes (text: 3; cdata: 4; entity ref: 5),
+			//   but not by others (comment: 8; processing instruction: 7; etc.)
+			// nodeType < 6 works because attributes (2) do not appear as children
+			for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
+				if ( elem.nodeType < 6 ) {
+					return false;
+				}
+			}
+			return true;
+		},
+
+		"parent": function( elem ) {
+			return !Expr.pseudos["empty"]( elem );
+		},
+
+		// Element/input types
+		"header": function( elem ) {
+			return rheader.test( elem.nodeName );
+		},
+
+		"input": function( elem ) {
+			return rinputs.test( elem.nodeName );
+		},
+
+		"button": function( elem ) {
+			var name = elem.nodeName.toLowerCase();
+			return name === "input" && elem.type === "button" || name === "button";
+		},
+
+		"text": function( elem ) {
+			var attr;
+			return elem.nodeName.toLowerCase() === "input" &&
+				elem.type === "text" &&
+
+				// Support: IE<8
+				// New HTML5 attribute values (e.g., "search") appear with elem.type === "text"
+				( (attr = elem.getAttribute("type")) == null || attr.toLowerCase() === "text" );
+		},
+
+		// Position-in-collection
+		"first": createPositionalPseudo(function() {
+			return [ 0 ];
+		}),
+
+		"last": createPositionalPseudo(function( matchIndexes, length ) {
+			return [ length - 1 ];
+		}),
+
+		"eq": createPositionalPseudo(function( matchIndexes, length, argument ) {
+			return [ argument < 0 ? argument + length : argument ];
+		}),
+
+		"even": createPositionalPseudo(function( matchIndexes, length ) {
+			var i = 0;
+			for ( ; i < length; i += 2 ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		}),
+
+		"odd": createPositionalPseudo(function( matchIndexes, length ) {
+			var i = 1;
+			for ( ; i < length; i += 2 ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		}),
+
+		"lt": createPositionalPseudo(function( matchIndexes, length, argument ) {
+			var i = argument < 0 ? argument + length : argument;
+			for ( ; --i >= 0; ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		}),
+
+		"gt": createPositionalPseudo(function( matchIndexes, length, argument ) {
+			var i = argument < 0 ? argument + length : argument;
+			for ( ; ++i < length; ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		})
+	}
+};
+
+Expr.pseudos["nth"] = Expr.pseudos["eq"];
+
+// Add button/input type pseudos
+for ( i in { radio: true, checkbox: true, file: true, password: true, image: true } ) {
+	Expr.pseudos[ i ] = createInputPseudo( i );
+}
+for ( i in { submit: true, reset: true } ) {
+	Expr.pseudos[ i ] = createButtonPseudo( i );
+}
+
+// Easy API for creating new setFilters
+function setFilters() {}
+setFilters.prototype = Expr.filters = Expr.pseudos;
+Expr.setFilters = new setFilters();
+
+tokenize = Sizzle.tokenize = function( selector, parseOnly ) {
+	var matched, match, tokens, type,
+		soFar, groups, preFilters,
+		cached = tokenCache[ selector + " " ];
+
+	if ( cached ) {
+		return parseOnly ? 0 : cached.slice( 0 );
+	}
+
+	soFar = selector;
+	groups = [];
+	preFilters = Expr.preFilter;
+
+	while ( soFar ) {
+
+		// Comma and first run
+		if ( !matched || (match = rcomma.exec( soFar )) ) {
+			if ( match ) {
+				// Don't consume trailing commas as valid
+				soFar = soFar.slice( match[0].length ) || soFar;
+			}
+			groups.push( (tokens = []) );
+		}
+
+		matched = false;
+
+		// Combinators
+		if ( (match = rcombinators.exec( soFar )) ) {
+			matched = match.shift();
+			tokens.push({
+				value: matched,
+				// Cast descendant combinators to space
+				type: match[0].replace( rtrim, " " )
+			});
+			soFar = soFar.slice( matched.length );
+		}
+
+		// Filters
+		for ( type in Expr.filter ) {
+			if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] ||
+				(match = preFilters[ type ]( match ))) ) {
+				matched = match.shift();
+				tokens.push({
+					value: matched,
+					type: type,
+					matches: match
+				});
+				soFar = soFar.slice( matched.length );
+			}
+		}
+
+		if ( !matched ) {
+			break;
+		}
+	}
+
+	// Return the length of the invalid excess
+	// if we're just parsing
+	// Otherwise, throw an error or return tokens
+	return parseOnly ?
+		soFar.length :
+		soFar ?
+			Sizzle.error( selector ) :
+			// Cache the tokens
+			tokenCache( selector, groups ).slice( 0 );
+};
+
+function toSelector( tokens ) {
+	var i = 0,
+		len = tokens.length,
+		selector = "";
+	for ( ; i < len; i++ ) {
+		selector += tokens[i].value;
+	}
+	return selector;
+}
+
+function addCombinator( matcher, combinator, base ) {
+	var dir = combinator.dir,
+		skip = combinator.next,
+		key = skip || dir,
+		checkNonElements = base && key === "parentNode",
+		doneName = done++;
+
+	return combinator.first ?
+		// Check against closest ancestor/preceding element
+		function( elem, context, xml ) {
+			while ( (elem = elem[ dir ]) ) {
+				if ( elem.nodeType === 1 || checkNonElements ) {
+					return matcher( elem, context, xml );
+				}
+			}
+			return false;
+		} :
+
+		// Check against all ancestor/preceding elements
+		function( elem, context, xml ) {
+			var oldCache, uniqueCache, outerCache,
+				newCache = [ dirruns, doneName ];
+
+			// We can't set arbitrary data on XML nodes, so they don't benefit from combinator caching
+			if ( xml ) {
+				while ( (elem = elem[ dir ]) ) {
+					if ( elem.nodeType === 1 || checkNonElements ) {
+						if ( matcher( elem, context, xml ) ) {
+							return true;
+						}
+					}
+				}
+			} else {
+				while ( (elem = elem[ dir ]) ) {
+					if ( elem.nodeType === 1 || checkNonElements ) {
+						outerCache = elem[ expando ] || (elem[ expando ] = {});
+
+						// Support: IE <9 only
+						// Defend against cloned attroperties (jQuery gh-1709)
+						uniqueCache = outerCache[ elem.uniqueID ] || (outerCache[ elem.uniqueID ] = {});
+
+						if ( skip && skip === elem.nodeName.toLowerCase() ) {
+							elem = elem[ dir ] || elem;
+						} else if ( (oldCache = uniqueCache[ key ]) &&
+							oldCache[ 0 ] === dirruns && oldCache[ 1 ] === doneName ) {
+
+							// Assign to newCache so results back-propagate to previous elements
+							return (newCache[ 2 ] = oldCache[ 2 ]);
+						} else {
+							// Reuse newcache so results back-propagate to previous elements
+							uniqueCache[ key ] = newCache;
+
+							// A match means we're done; a fail means we have to keep checking
+							if ( (newCache[ 2 ] = matcher( elem, context, xml )) ) {
+								return true;
+							}
+						}
+					}
+				}
+			}
+			return false;
+		};
+}
+
+function elementMatcher( matchers ) {
+	return matchers.length > 1 ?
+		function( elem, context, xml ) {
+			var i = matchers.length;
+			while ( i-- ) {
+				if ( !matchers[i]( elem, context, xml ) ) {
+					return false;
+				}
+			}
+			return true;
+		} :
+		matchers[0];
+}
+
+function multipleContexts( selector, contexts, results ) {
+	var i = 0,
+		len = contexts.length;
+	for ( ; i < len; i++ ) {
+		Sizzle( selector, contexts[i], results );
+	}
+	return results;
+}
+
+function condense( unmatched, map, filter, context, xml ) {
+	var elem,
+		newUnmatched = [],
+		i = 0,
+		len = unmatched.length,
+		mapped = map != null;
+
+	for ( ; i < len; i++ ) {
+		if ( (elem = unmatched[i]) ) {
+			if ( !filter || filter( elem, context, xml ) ) {
+				newUnmatched.push( elem );
+				if ( mapped ) {
+					map.push( i );
+				}
+			}
+		}
+	}
+
+	return newUnmatched;
+}
+
+function setMatcher( preFilter, selector, matcher, postFilter, postFinder, postSelector ) {
+	if ( postFilter && !postFilter[ expando ] ) {
+		postFilter = setMatcher( postFilter );
+	}
+	if ( postFinder && !postFinder[ expando ] ) {
+		postFinder = setMatcher( postFinder, postSelector );
+	}
+	return markFunction(function( seed, results, context, xml ) {
+		var temp, i, elem,
+			preMap = [],
+			postMap = [],
+			preexisting = results.length,
+
+			// Get initial elements from seed or context
+			elems = seed || multipleContexts( selector || "*", context.nodeType ? [ context ] : context, [] ),
+
+			// Prefilter to get matcher input, preserving a map for seed-results synchronization
+			matcherIn = preFilter && ( seed || !selector ) ?
+				condense( elems, preMap, preFilter, context, xml ) :
+				elems,
+
+			matcherOut = matcher ?
+				// If we have a postFinder, or filtered seed, or non-seed postFilter or preexisting results,
+				postFinder || ( seed ? preFilter : preexisting || postFilter ) ?
+
+					// ...intermediate processing is necessary
+					[] :
+
+					// ...otherwise use results directly
+					results :
+				matcherIn;
+
+		// Find primary matches
+		if ( matcher ) {
+			matcher( matcherIn, matcherOut, context, xml );
+		}
+
+		// Apply postFilter
+		if ( postFilter ) {
+			temp = condense( matcherOut, postMap );
+			postFilter( temp, [], context, xml );
+
+			// Un-match failing elements by moving them back to matcherIn
+			i = temp.length;
+			while ( i-- ) {
+				if ( (elem = temp[i]) ) {
+					matcherOut[ postMap[i] ] = !(matcherIn[ postMap[i] ] = elem);
+				}
+			}
+		}
+
+		if ( seed ) {
+			if ( postFinder || preFilter ) {
+				if ( postFinder ) {
+					// Get the final matcherOut by condensing this intermediate into postFinder contexts
+					temp = [];
+					i = matcherOut.length;
+					while ( i-- ) {
+						if ( (elem = matcherOut[i]) ) {
+							// Restore matcherIn since elem is not yet a final match
+							temp.push( (matcherIn[i] = elem) );
+						}
+					}
+					postFinder( null, (matcherOut = []), temp, xml );
+				}
+
+				// Move matched elements from seed to results to keep them synchronized
+				i = matcherOut.length;
+				while ( i-- ) {
+					if ( (elem = matcherOut[i]) &&
+						(temp = postFinder ? indexOf( seed, elem ) : preMap[i]) > -1 ) {
+
+						seed[temp] = !(results[temp] = elem);
+					}
+				}
+			}
+
+		// Add elements to results, through postFinder if defined
+		} else {
+			matcherOut = condense(
+				matcherOut === results ?
+					matcherOut.splice( preexisting, matcherOut.length ) :
+					matcherOut
+			);
+			if ( postFinder ) {
+				postFinder( null, results, matcherOut, xml );
+			} else {
+				push.apply( results, matcherOut );
+			}
+		}
+	});
+}
+
+function matcherFromTokens( tokens ) {
+	var checkContext, matcher, j,
+		len = tokens.length,
+		leadingRelative = Expr.relative[ tokens[0].type ],
+		implicitRelative = leadingRelative || Expr.relative[" "],
+		i = leadingRelative ? 1 : 0,
+
+		// The foundational matcher ensures that elements are reachable from top-level context(s)
+		matchContext = addCombinator( function( elem ) {
+			return elem === checkContext;
+		}, implicitRelative, true ),
+		matchAnyContext = addCombinator( function( elem ) {
+			return indexOf( checkContext, elem ) > -1;
+		}, implicitRelative, true ),
+		matchers = [ function( elem, context, xml ) {
+			var ret = ( !leadingRelative && ( xml || context !== outermostContext ) ) || (
+				(checkContext = context).nodeType ?
+					matchContext( elem, context, xml ) :
+					matchAnyContext( elem, context, xml ) );
+			// Avoid hanging onto element (issue #299)
+			checkContext = null;
+			return ret;
+		} ];
+
+	for ( ; i < len; i++ ) {
+		if ( (matcher = Expr.relative[ tokens[i].type ]) ) {
+			matchers = [ addCombinator(elementMatcher( matchers ), matcher) ];
+		} else {
+			matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );
+
+			// Return special upon seeing a positional matcher
+			if ( matcher[ expando ] ) {
+				// Find the next relative operator (if any) for proper handling
+				j = ++i;
+				for ( ; j < len; j++ ) {
+					if ( Expr.relative[ tokens[j].type ] ) {
+						break;
+					}
+				}
+				return setMatcher(
+					i > 1 && elementMatcher( matchers ),
+					i > 1 && toSelector(
+						// If the preceding token was a descendant combinator, insert an implicit any-element `*`
+						tokens.slice( 0, i - 1 ).concat({ value: tokens[ i - 2 ].type === " " ? "*" : "" })
+					).replace( rtrim, "$1" ),
+					matcher,
+					i < j && matcherFromTokens( tokens.slice( i, j ) ),
+					j < len && matcherFromTokens( (tokens = tokens.slice( j )) ),
+					j < len && toSelector( tokens )
+				);
+			}
+			matchers.push( matcher );
+		}
+	}
+
+	return elementMatcher( matchers );
+}
+
+function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
+	var bySet = setMatchers.length > 0,
+		byElement = elementMatchers.length > 0,
+		superMatcher = function( seed, context, xml, results, outermost ) {
+			var elem, j, matcher,
+				matchedCount = 0,
+				i = "0",
+				unmatched = seed && [],
+				setMatched = [],
+				contextBackup = outermostContext,
+				// We must always have either seed elements or outermost context
+				elems = seed || byElement && Expr.find["TAG"]( "*", outermost ),
+				// Use integer dirruns iff this is the outermost matcher
+				dirrunsUnique = (dirruns += contextBackup == null ? 1 : Math.random() || 0.1),
+				len = elems.length;
+
+			if ( outermost ) {
+				outermostContext = context === document || context || outermost;
+			}
+
+			// Add elements passing elementMatchers directly to results
+			// Support: IE<9, Safari
+			// Tolerate NodeList properties (IE: "length"; Safari: <number>) matching elements by id
+			for ( ; i !== len && (elem = elems[i]) != null; i++ ) {
+				if ( byElement && elem ) {
+					j = 0;
+					if ( !context && elem.ownerDocument !== document ) {
+						setDocument( elem );
+						xml = !documentIsHTML;
+					}
+					while ( (matcher = elementMatchers[j++]) ) {
+						if ( matcher( elem, context || document, xml) ) {
+							results.push( elem );
+							break;
+						}
+					}
+					if ( outermost ) {
+						dirruns = dirrunsUnique;
+					}
+				}
+
+				// Track unmatched elements for set filters
+				if ( bySet ) {
+					// They will have gone through all possible matchers
+					if ( (elem = !matcher && elem) ) {
+						matchedCount--;
+					}
+
+					// Lengthen the array for every element, matched or not
+					if ( seed ) {
+						unmatched.push( elem );
+					}
+				}
+			}
+
+			// `i` is now the count of elements visited above, and adding it to `matchedCount`
+			// makes the latter nonnegative.
+			matchedCount += i;
+
+			// Apply set filters to unmatched elements
+			// NOTE: This can be skipped if there are no unmatched elements (i.e., `matchedCount`
+			// equals `i`), unless we didn't visit _any_ elements in the above loop because we have
+			// no element matchers and no seed.
+			// Incrementing an initially-string "0" `i` allows `i` to remain a string only in that
+			// case, which will result in a "00" `matchedCount` that differs from `i` but is also
+			// numerically zero.
+			if ( bySet && i !== matchedCount ) {
+				j = 0;
+				while ( (matcher = setMatchers[j++]) ) {
+					matcher( unmatched, setMatched, context, xml );
+				}
+
+				if ( seed ) {
+					// Reintegrate element matches to eliminate the need for sorting
+					if ( matchedCount > 0 ) {
+						while ( i-- ) {
+							if ( !(unmatched[i] || setMatched[i]) ) {
+								setMatched[i] = pop.call( results );
+							}
+						}
+					}
+
+					// Discard index placeholder values to get only actual matches
+					setMatched = condense( setMatched );
+				}
+
+				// Add matches to results
+				push.apply( results, setMatched );
+
+				// Seedless set matches succeeding multiple successful matchers stipulate sorting
+				if ( outermost && !seed && setMatched.length > 0 &&
+					( matchedCount + setMatchers.length ) > 1 ) {
+
+					Sizzle.uniqueSort( results );
+				}
+			}
+
+			// Override manipulation of globals by nested matchers
+			if ( outermost ) {
+				dirruns = dirrunsUnique;
+				outermostContext = contextBackup;
+			}
+
+			return unmatched;
+		};
+
+	return bySet ?
+		markFunction( superMatcher ) :
+		superMatcher;
+}
+
+compile = Sizzle.compile = function( selector, match /* Internal Use Only */ ) {
+	var i,
+		setMatchers = [],
+		elementMatchers = [],
+		cached = compilerCache[ selector + " " ];
+
+	if ( !cached ) {
+		// Generate a function of recursive functions that can be used to check each element
+		if ( !match ) {
+			match = tokenize( selector );
+		}
+		i = match.length;
+		while ( i-- ) {
+			cached = matcherFromTokens( match[i] );
+			if ( cached[ expando ] ) {
+				setMatchers.push( cached );
+			} else {
+				elementMatchers.push( cached );
+			}
+		}
+
+		// Cache the compiled function
+		cached = compilerCache( selector, matcherFromGroupMatchers( elementMatchers, setMatchers ) );
+
+		// Save selector and tokenization
+		cached.selector = selector;
+	}
+	return cached;
+};
+
+/**
+ * A low-level selection function that works with Sizzle's compiled
+ *  selector functions
+ * @param {String|Function} selector A selector or a pre-compiled
+ *  selector function built with Sizzle.compile
+ * @param {Element} context
+ * @param {Array} [results]
+ * @param {Array} [seed] A set of elements to match against
+ */
+select = Sizzle.select = function( selector, context, results, seed ) {
+	var i, tokens, token, type, find,
+		compiled = typeof selector === "function" && selector,
+		match = !seed && tokenize( (selector = compiled.selector || selector) );
+
+	results = results || [];
+
+	// Try to minimize operations if there is only one selector in the list and no seed
+	// (the latter of which guarantees us context)
+	if ( match.length === 1 ) {
+
+		// Reduce context if the leading compound selector is an ID
+		tokens = match[0] = match[0].slice( 0 );
+		if ( tokens.length > 2 && (token = tokens[0]).type === "ID" &&
+				context.nodeType === 9 && documentIsHTML && Expr.relative[ tokens[1].type ] ) {
+
+			context = ( Expr.find["ID"]( token.matches[0].replace(runescape, funescape), context ) || [] )[0];
+			if ( !context ) {
+				return results;
+
+			// Precompiled matchers will still verify ancestry, so step up a level
+			} else if ( compiled ) {
+				context = context.parentNode;
+			}
+
+			selector = selector.slice( tokens.shift().value.length );
+		}
+
+		// Fetch a seed set for right-to-left matching
+		i = matchExpr["needsContext"].test( selector ) ? 0 : tokens.length;
+		while ( i-- ) {
+			token = tokens[i];
+
+			// Abort if we hit a combinator
+			if ( Expr.relative[ (type = token.type) ] ) {
+				break;
+			}
+			if ( (find = Expr.find[ type ]) ) {
+				// Search, expanding context for leading sibling combinators
+				if ( (seed = find(
+					token.matches[0].replace( runescape, funescape ),
+					rsibling.test( tokens[0].type ) && testContext( context.parentNode ) || context
+				)) ) {
+
+					// If seed is empty or no tokens remain, we can return early
+					tokens.splice( i, 1 );
+					selector = seed.length && toSelector( tokens );
+					if ( !selector ) {
+						push.apply( results, seed );
+						return results;
+					}
+
+					break;
+				}
+			}
+		}
+	}
+
+	// Compile and execute a filtering function if one is not provided
+	// Provide `match` to avoid retokenization if we modified the selector above
+	( compiled || compile( selector, match ) )(
+		seed,
+		context,
+		!documentIsHTML,
+		results,
+		!context || rsibling.test( selector ) && testContext( context.parentNode ) || context
+	);
+	return results;
+};
+
+// One-time assignments
+
+// Sort stability
+support.sortStable = expando.split("").sort( sortOrder ).join("") === expando;
+
+// Support: Chrome 14-35+
+// Always assume duplicates if they aren't passed to the comparison function
+support.detectDuplicates = !!hasDuplicate;
+
+// Initialize against the default document
+setDocument();
+
+// Support: Webkit<537.32 - Safari 6.0.3/Chrome 25 (fixed in Chrome 27)
+// Detached nodes confoundingly follow *each other*
+support.sortDetached = assert(function( el ) {
+	// Should return 1, but returns 4 (following)
+	return el.compareDocumentPosition( document.createElement("fieldset") ) & 1;
+});
+
+// Support: IE<8
+// Prevent attribute/property "interpolation"
+// https://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
+if ( !assert(function( el ) {
+	el.innerHTML = "<a href='#'></a>";
+	return el.firstChild.getAttribute("href") === "#" ;
+}) ) {
+	addHandle( "type|href|height|width", function( elem, name, isXML ) {
+		if ( !isXML ) {
+			return elem.getAttribute( name, name.toLowerCase() === "type" ? 1 : 2 );
+		}
+	});
+}
+
+// Support: IE<9
+// Use defaultValue in place of getAttribute("value")
+if ( !support.attributes || !assert(function( el ) {
+	el.innerHTML = "<input/>";
+	el.firstChild.setAttribute( "value", "" );
+	return el.firstChild.getAttribute( "value" ) === "";
+}) ) {
+	addHandle( "value", function( elem, name, isXML ) {
+		if ( !isXML && elem.nodeName.toLowerCase() === "input" ) {
+			return elem.defaultValue;
+		}
+	});
+}
+
+// Support: IE<9
+// Use getAttributeNode to fetch booleans when getAttribute lies
+if ( !assert(function( el ) {
+	return el.getAttribute("disabled") == null;
+}) ) {
+	addHandle( booleans, function( elem, name, isXML ) {
+		var val;
+		if ( !isXML ) {
+			return elem[ name ] === true ? name.toLowerCase() :
+					(val = elem.getAttributeNode( name )) && val.specified ?
+					val.value :
+				null;
+		}
+	});
+}
+
+return Sizzle;
+
+})( window );
+
+
+
+jQuery.find = Sizzle;
+jQuery.expr = Sizzle.selectors;
+
+// Deprecated
+jQuery.expr[ ":" ] = jQuery.expr.pseudos;
+jQuery.uniqueSort = jQuery.unique = Sizzle.uniqueSort;
+jQuery.text = Sizzle.getText;
+jQuery.isXMLDoc = Sizzle.isXML;
+jQuery.contains = Sizzle.contains;
+jQuery.escapeSelector = Sizzle.escape;
+
+
+
+
+var dir = function( elem, dir, until ) {
+	var matched = [],
+		truncate = until !== undefined;
+
+	while ( ( elem = elem[ dir ] ) && elem.nodeType !== 9 ) {
+		if ( elem.nodeType === 1 ) {
+			if ( truncate && jQuery( elem ).is( until ) ) {
+				break;
+			}
+			matched.push( elem );
+		}
+	}
+	return matched;
+};
+
+
+var siblings = function( n, elem ) {
+	var matched = [];
+
+	for ( ; n; n = n.nextSibling ) {
+		if ( n.nodeType === 1 && n !== elem ) {
+			matched.push( n );
+		}
+	}
+
+	return matched;
+};
+
+
+var rneedsContext = jQuery.expr.match.needsContext;
+
+
+
+function nodeName( elem, name ) {
+
+  return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
+
+};
+var rsingleTag = ( /^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i );
+
+
+
+var risSimple = /^.[^:#\[\.,]*$/;
+
+// Implement the identical functionality for filter and not
+function winnow( elements, qualifier, not ) {
+	if ( jQuery.isFunction( qualifier ) ) {
+		return jQuery.grep( elements, function( elem, i ) {
+			return !!qualifier.call( elem, i, elem ) !== not;
+		} );
+	}
+
+	// Single element
+	if ( qualifier.nodeType ) {
+		return jQuery.grep( elements, function( elem ) {
+			return ( elem === qualifier ) !== not;
+		} );
+	}
+
+	// Arraylike of elements (jQuery, arguments, Array)
+	if ( typeof qualifier !== "string" ) {
+		return jQuery.grep( elements, function( elem ) {
+			return ( indexOf.call( qualifier, elem ) > -1 ) !== not;
+		} );
+	}
+
+	// Simple selector that can be filtered directly, removing non-Elements
+	if ( risSimple.test( qualifier ) ) {
+		return jQuery.filter( qualifier, elements, not );
+	}
+
+	// Complex selector, compare the two sets, removing non-Elements
+	qualifier = jQuery.filter( qualifier, elements );
+	return jQuery.grep( elements, function( elem ) {
+		return ( indexOf.call( qualifier, elem ) > -1 ) !== not && elem.nodeType === 1;
+	} );
+}
+
+jQuery.filter = function( expr, elems, not ) {
+	var elem = elems[ 0 ];
+
+	if ( not ) {
+		expr = ":not(" + expr + ")";
+	}
+
+	if ( elems.length === 1 && elem.nodeType === 1 ) {
+		return jQuery.find.matchesSelector( elem, expr ) ? [ elem ] : [];
+	}
+
+	return jQuery.find.matches( expr, jQuery.grep( elems, function( elem ) {
+		return elem.nodeType === 1;
+	} ) );
+};
+
+jQuery.fn.extend( {
+	find: function( selector ) {
+		var i, ret,
+			len = this.length,
+			self = this;
+
+		if ( typeof selector !== "string" ) {
+			return this.pushStack( jQuery( selector ).filter( function() {
+				for ( i = 0; i < len; i++ ) {
+					if ( jQuery.contains( self[ i ], this ) ) {
+						return true;
+					}
+				}
+			} ) );
+		}
+
+		ret = this.pushStack( [] );
+
+		for ( i = 0; i < len; i++ ) {
+			jQuery.find( selector, self[ i ], ret );
+		}
+
+		return len > 1 ? jQuery.uniqueSort( ret ) : ret;
+	},
+	filter: function( selector ) {
+		return this.pushStack( winnow( this, selector || [], false ) );
+	},
+	not: function( selector ) {
+		return this.pushStack( winnow( this, selector || [], true ) );
+	},
+	is: function( selector ) {
+		return !!winnow(
+			this,
+
+			// If this is a positional/relative selector, check membership in the returned set
+			// so $("p:first").is("p:last") won't return true for a doc with two "p".
+			typeof selector === "string" && rneedsContext.test( selector ) ?
+				jQuery( selector ) :
+				selector || [],
+			false
+		).length;
+	}
+} );
+
+
+// Initialize a jQuery object
+
+
+// A central reference to the root jQuery(document)
+var rootjQuery,
+
+	// A simple way to check for HTML strings
+	// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
+	// Strict HTML recognition (#11290: must start with <)
+	// Shortcut simple #id case for speed
+	rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,
+
+	init = jQuery.fn.init = function( selector, context, root ) {
+		var match, elem;
+
+		// HANDLE: $(""), $(null), $(undefined), $(false)
+		if ( !selector ) {
+			return this;
+		}
+
+		// Method init() accepts an alternate rootjQuery
+		// so migrate can support jQuery.sub (gh-2101)
+		root = root || rootjQuery;
+
+		// Handle HTML strings
+		if ( typeof selector === "string" ) {
+			if ( selector[ 0 ] === "<" &&
+				selector[ selector.length - 1 ] === ">" &&
+				selector.length >= 3 ) {
+
+				// Assume that strings that start and end with <> are HTML and skip the regex check
+				match = [ null, selector, null ];
+
+			} else {
+				match = rquickExpr.exec( selector );
+			}
+
+			// Match html or make sure no context is specified for #id
+			if ( match && ( match[ 1 ] || !context ) ) {
+
+				// HANDLE: $(html) -> $(array)
+				if ( match[ 1 ] ) {
+					context = context instanceof jQuery ? context[ 0 ] : context;
+
+					// Option to run scripts is true for back-compat
+					// Intentionally let the error be thrown if parseHTML is not present
+					jQuery.merge( this, jQuery.parseHTML(
+						match[ 1 ],
+						context && context.nodeType ? context.ownerDocument || context : document,
+						true
+					) );
+
+					// HANDLE: $(html, props)
+					if ( rsingleTag.test( match[ 1 ] ) && jQuery.isPlainObject( context ) ) {
+						for ( match in context ) {
+
+							// Properties of context are called as methods if possible
+							if ( jQuery.isFunction( this[ match ] ) ) {
+								this[ match ]( context[ match ] );
+
+							// ...and otherwise set as attributes
+							} else {
+								this.attr( match, context[ match ] );
+							}
+						}
+					}
+
+					return this;
+
+				// HANDLE: $(#id)
+				} else {
+					elem = document.getElementById( match[ 2 ] );
+
+					if ( elem ) {
+
+						// Inject the element directly into the jQuery object
+						this[ 0 ] = elem;
+						this.length = 1;
+					}
+					return this;
+				}
+
+			// HANDLE: $(expr, $(...))
+			} else if ( !context || context.jquery ) {
+				return ( context || root ).find( selector );
+
+			// HANDLE: $(expr, context)
+			// (which is just equivalent to: $(context).find(expr)
+			} else {
+				return this.constructor( context ).find( selector );
+			}
+
+		// HANDLE: $(DOMElement)
+		} else if ( selector.nodeType ) {
+			this[ 0 ] = selector;
+			this.length = 1;
+			return this;
+
+		// HANDLE: $(function)
+		// Shortcut for document ready
+		} else if ( jQuery.isFunction( selector ) ) {
+			return root.ready !== undefined ?
+				root.ready( selector ) :
+
+				// Execute immediately if ready is not present
+				selector( jQuery );
+		}
+
+		return jQuery.makeArray( selector, this );
+	};
+
+// Give the init function the jQuery prototype for later instantiation
+init.prototype = jQuery.fn;
+
+// Initialize central reference
+rootjQuery = jQuery( document );
+
+
+var rparentsprev = /^(?:parents|prev(?:Until|All))/,
+
+	// Methods guaranteed to produce a unique set when starting from a unique set
+	guaranteedUnique = {
+		children: true,
+		contents: true,
+		next: true,
+		prev: true
+	};
+
+jQuery.fn.extend( {
+	has: function( target ) {
+		var targets = jQuery( target, this ),
+			l = targets.length;
+
+		return this.filter( function() {
+			var i = 0;
+			for ( ; i < l; i++ ) {
+				if ( jQuery.contains( this, targets[ i ] ) ) {
+					return true;
+				}
+			}
+		} );
+	},
+
+	closest: function( selectors, context ) {
+		var cur,
+			i = 0,
+			l = this.length,
+			matched = [],
+			targets = typeof selectors !== "string" && jQuery( selectors );
+
+		// Positional selectors never match, since there's no _selection_ context
+		if ( !rneedsContext.test( selectors ) ) {
+			for ( ; i < l; i++ ) {
+				for ( cur = this[ i ]; cur && cur !== context; cur = cur.parentNode ) {
+
+					// Always skip document fragments
+					if ( cur.nodeType < 11 && ( targets ?
+						targets.index( cur ) > -1 :
+
+						// Don't pass non-elements to Sizzle
+						cur.nodeType === 1 &&
+							jQuery.find.matchesSelector( cur, selectors ) ) ) {
+
+						matched.push( cur );
+						break;
+					}
+				}
+			}
+		}
+
+		return this.pushStack( matched.length > 1 ? jQuery.uniqueSort( matched ) : matched );
+	},
+
+	// Determine the position of an element within the set
+	index: function( elem ) {
+
+		// No argument, return index in parent
+		if ( !elem ) {
+			return ( this[ 0 ] && this[ 0 ].parentNode ) ? this.first().prevAll().length : -1;
+		}
+
+		// Index in selector
+		if ( typeof elem === "string" ) {
+			return indexOf.call( jQuery( elem ), this[ 0 ] );
+		}
+
+		// Locate the position of the desired element
+		return indexOf.call( this,
+
+			// If it receives a jQuery object, the first element is used
+			elem.jquery ? elem[ 0 ] : elem
+		);
+	},
+
+	add: function( selector, context ) {
+		return this.pushStack(
+			jQuery.uniqueSort(
+				jQuery.merge( this.get(), jQuery( selector, context ) )
+			)
+		);
+	},
+
+	addBack: function( selector ) {
+		return this.add( selector == null ?
+			this.prevObject : this.prevObject.filter( selector )
+		);
+	}
+} );
+
+function sibling( cur, dir ) {
+	while ( ( cur = cur[ dir ] ) && cur.nodeType !== 1 ) {}
+	return cur;
+}
+
+jQuery.each( {
+	parent: function( elem ) {
+		var parent = elem.parentNode;
+		return parent && parent.nodeType !== 11 ? parent : null;
+	},
+	parents: function( elem ) {
+		return dir( elem, "parentNode" );
+	},
+	parentsUntil: function( elem, i, until ) {
+		return dir( elem, "parentNode", until );
+	},
+	next: function( elem ) {
+		return sibling( elem, "nextSibling" );
+	},
+	prev: function( elem ) {
+		return sibling( elem, "previousSibling" );
+	},
+	nextAll: function( elem ) {
+		return dir( elem, "nextSibling" );
+	},
+	prevAll: function( elem ) {
+		return dir( elem, "previousSibling" );
+	},
+	nextUntil: function( elem, i, until ) {
+		return dir( elem, "nextSibling", until );
+	},
+	prevUntil: function( elem, i, until ) {
+		return dir( elem, "previousSibling", until );
+	},
+	siblings: function( elem ) {
+		return siblings( ( elem.parentNode || {} ).firstChild, elem );
+	},
+	children: function( elem ) {
+		return siblings( elem.firstChild );
+	},
+	contents: function( elem ) {
+        if ( nodeName( elem, "iframe" ) ) {
+            return elem.contentDocument;
+        }
+
+        // Support: IE 9 - 11 only, iOS 7 only, Android Browser <=4.3 only
+        // Treat the template element as a regular one in browsers that
+        // don't support it.
+        if ( nodeName( elem, "template" ) ) {
+            elem = elem.content || elem;
+        }
+
+        return jQuery.merge( [], elem.childNodes );
+	}
+}, function( name, fn ) {
+	jQuery.fn[ name ] = function( until, selector ) {
+		var matched = jQuery.map( this, fn, until );
+
+		if ( name.slice( -5 ) !== "Until" ) {
+			selector = until;
+		}
+
+		if ( selector && typeof selector === "string" ) {
+			matched = jQuery.filter( selector, matched );
+		}
+
+		if ( this.length > 1 ) {
+
+			// Remove duplicates
+			if ( !guaranteedUnique[ name ] ) {
+				jQuery.uniqueSort( matched );
+			}
+
+			// Reverse order for parents* and prev-derivatives
+			if ( rparentsprev.test( name ) ) {
+				matched.reverse();
+			}
+		}
+
+		return this.pushStack( matched );
+	};
+} );
+var rnothtmlwhite = ( /[^\x20\t\r\n\f]+/g );
+
+
+
+// Convert String-formatted options into Object-formatted ones
+function createOptions( options ) {
+	var object = {};
+	jQuery.each( options.match( rnothtmlwhite ) || [], function( _, flag ) {
+		object[ flag ] = true;
+	} );
+	return object;
+}
+
+/*
+ * Create a callback list using the following parameters:
+ *
+ *	options: an optional list of space-separated options that will change how
+ *			the callback list behaves or a more traditional option object
+ *
+ * By default a callback list will act like an event callback list and can be
+ * "fired" multiple times.
+ *
+ * Possible options:
+ *
+ *	once:			will ensure the callback list can only be fired once (like a Deferred)
+ *
+ *	memory:			will keep track of previous values and will call any callback added
+ *					after the list has been fired right away with the latest "memorized"
+ *					values (like a Deferred)
+ *
+ *	unique:			will ensure a callback can only be added once (no duplicate in the list)
+ *
+ *	stopOnFalse:	interrupt callings when a callback returns false
+ *
+ */
+jQuery.Callbacks = function( options ) {
+
+	// Convert options from String-formatted to Object-formatted if needed
+	// (we check in cache first)
+	options = typeof options === "string" ?
+		createOptions( options ) :
+		jQuery.extend( {}, options );
+
+	var // Flag to know if list is currently firing
+		firing,
+
+		// Last fire value for non-forgettable lists
+		memory,
+
+		// Flag to know if list was already fired
+		fired,
+
+		// Flag to prevent firing
+		locked,
+
+		// Actual callback list
+		list = [],
+
+		// Queue of execution data for repeatable lists
+		queue = [],
+
+		// Index of currently firing callback (modified by add/remove as needed)
+		firingIndex = -1,
+
+		// Fire callbacks
+		fire = function() {
+
+			// Enforce single-firing
+			locked = locked || options.once;
+
+			// Execute callbacks for all pending executions,
+			// respecting firingIndex overrides and runtime changes
+			fired = firing = true;
+			for ( ; queue.length; firingIndex = -1 ) {
+				memory = queue.shift();
+				while ( ++firingIndex < list.length ) {
+
+					// Run callback and check for early termination
+					if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false &&
+						options.stopOnFalse ) {
+
+						// Jump to end and forget the data so .add doesn't re-fire
+						firingIndex = list.length;
+						memory = false;
+					}
+				}
+			}
+
+			// Forget the data if we're done with it
+			if ( !options.memory ) {
+				memory = false;
+			}
+
+			firing = false;
+
+			// Clean up if we're done firing for good
+			if ( locked ) {
+
+				// Keep an empty list if we have data for future add calls
+				if ( memory ) {
+					list = [];
+
+				// Otherwise, this object is spent
+				} else {
+					list = "";
+				}
+			}
+		},
+
+		// Actual Callbacks object
+		self = {
+
+			// Add a callback or a collection of callbacks to the list
+			add: function() {
+				if ( list ) {
+
+					// If we have memory from a past run, we should fire after adding
+					if ( memory && !firing ) {
+						firingIndex = list.length - 1;
+						queue.push( memory );
+					}
+
+					( function add( args ) {
+						jQuery.each( args, function( _, arg ) {
+							if ( jQuery.isFunction( arg ) ) {
+								if ( !options.unique || !self.has( arg ) ) {
+									list.push( arg );
+								}
+							} else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) {
+
+								// Inspect recursively
+								add( arg );
+							}
+						} );
+					} )( arguments );
+
+					if ( memory && !firing ) {
+						fire();
+					}
+				}
+				return this;
+			},
+
+			// Remove a callback from the list
+			remove: function() {
+				jQuery.each( arguments, function( _, arg ) {
+					var index;
+					while ( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
+						list.splice( index, 1 );
+
+						// Handle firing indexes
+						if ( index <= firingIndex ) {
+							firingIndex--;
+						}
+					}
+				} );
+				return this;
+			},
+
+			// Check if a given callback is in the list.
+			// If no argument is given, return whether or not list has callbacks attached.
+			has: function( fn ) {
+				return fn ?
+					jQuery.inArray( fn, list ) > -1 :
+					list.length > 0;
+			},
+
+			// Remove all callbacks from the list
+			empty: function() {
+				if ( list ) {
+					list = [];
+				}
+				return this;
+			},
+
+			// Disable .fire and .add
+			// Abort any current/pending executions
+			// Clear all callbacks and values
+			disable: function() {
+				locked = queue = [];
+				list = memory = "";
+				return this;
+			},
+			disabled: function() {
+				return !list;
+			},
+
+			// Disable .fire
+			// Also disable .add unless we have memory (since it would have no effect)
+			// Abort any pending executions
+			lock: function() {
+				locked = queue = [];
+				if ( !memory && !firing ) {
+					list = memory = "";
+				}
+				return this;
+			},
+			locked: function() {
+				return !!locked;
+			},
+
+			// Call all callbacks with the given context and arguments
+			fireWith: function( context, args ) {
+				if ( !locked ) {
+					args = args || [];
+					args = [ context, args.slice ? args.slice() : args ];
+					queue.push( args );
+					if ( !firing ) {
+						fire();
+					}
+				}
+				return this;
+			},
+
+			// Call all the callbacks with the given arguments
+			fire: function() {
+				self.fireWith( this, arguments );
+				return this;
+			},
+
+			// To know if the callbacks have already been called at least once
+			fired: function() {
+				return !!fired;
+			}
+		};
+
+	return self;
+};
+
+
+function Identity( v ) {
+	return v;
+}
+function Thrower( ex ) {
+	throw ex;
+}
+
+function adoptValue( value, resolve, reject, noValue ) {
+	var method;
+
+	try {
+
+		// Check for promise aspect first to privilege synchronous behavior
+		if ( value && jQuery.isFunction( ( method = value.promise ) ) ) {
+			method.call( value ).done( resolve ).fail( reject );
+
+		// Other thenables
+		} else if ( value && jQuery.isFunction( ( method = value.then ) ) ) {
+			method.call( value, resolve, reject );
+
+		// Other non-thenables
+		} else {
+
+			// Control `resolve` arguments by letting Array#slice cast boolean `noValue` to integer:
+			// * false: [ value ].slice( 0 ) => resolve( value )
+			// * true: [ value ].slice( 1 ) => resolve()
+			resolve.apply( undefined, [ value ].slice( noValue ) );
+		}
+
+	// For Promises/A+, convert exceptions into rejections
+	// Since jQuery.when doesn't unwrap thenables, we can skip the extra checks appearing in
+	// Deferred#then to conditionally suppress rejection.
+	} catch ( value ) {
+
+		// Support: Android 4.0 only
+		// Strict mode functions invoked without .call/.apply get global-object context
+		reject.apply( undefined, [ value ] );
+	}
+}
+
+jQuery.extend( {
+
+	Deferred: function( func ) {
+		var tuples = [
+
+				// action, add listener, callbacks,
+				// ... .then handlers, argument index, [final state]
+				[ "notify", "progress", jQuery.Callbacks( "memory" ),
+					jQuery.Callbacks( "memory" ), 2 ],
+				[ "resolve", "done", jQuery.Callbacks( "once memory" ),
+					jQuery.Callbacks( "once memory" ), 0, "resolved" ],
+				[ "reject", "fail", jQuery.Callbacks( "once memory" ),
+					jQuery.Callbacks( "once memory" ), 1, "rejected" ]
+			],
+			state = "pending",
+			promise = {
+				state: function() {
+					return state;
+				},
+				always: function() {
+					deferred.done( arguments ).fail( arguments );
+					return this;
+				},
+				"catch": function( fn ) {
+					return promise.then( null, fn );
+				},
+
+				// Keep pipe for back-compat
+				pipe: function( /* fnDone, fnFail, fnProgress */ ) {
+					var fns = arguments;
+
+					return jQuery.Deferred( function( newDefer ) {
+						jQuery.each( tuples, function( i, tuple ) {
+
+							// Map tuples (progress, done, fail) to arguments (done, fail, progress)
+							var fn = jQuery.isFunction( fns[ tuple[ 4 ] ] ) && fns[ tuple[ 4 ] ];
+
+							// deferred.progress(function() { bind to newDefer or newDefer.notify })
+							// deferred.done(function() { bind to newDefer or newDefer.resolve })
+							// deferred.fail(function() { bind to newDefer or newDefer.reject })
+							deferred[ tuple[ 1 ] ]( function() {
+								var returned = fn && fn.apply( this, arguments );
+								if ( returned && jQuery.isFunction( returned.promise ) ) {
+									returned.promise()
+										.progress( newDefer.notify )
+										.done( newDefer.resolve )
+										.fail( newDefer.reject );
+								} else {
+									newDefer[ tuple[ 0 ] + "With" ](
+										this,
+										fn ? [ returned ] : arguments
+									);
+								}
+							} );
+						} );
+						fns = null;
+					} ).promise();
+				},
+				then: function( onFulfilled, onRejected, onProgress ) {
+					var maxDepth = 0;
+					function resolve( depth, deferred, handler, special ) {
+						return function() {
+							var that = this,
+								args = arguments,
+								mightThrow = function() {
+									var returned, then;
+
+									// Support: Promises/A+ section 2.3.3.3.3
+									// https://promisesaplus.com/#point-59
+									// Ignore double-resolution attempts
+									if ( depth < maxDepth ) {
+										return;
+									}
+
+									returned = handler.apply( that, args );
+
+									// Support: Promises/A+ section 2.3.1
+									// https://promisesaplus.com/#point-48
+									if ( returned === deferred.promise() ) {
+										throw new TypeError( "Thenable self-resolution" );
+									}
+
+									// Support: Promises/A+ sections 2.3.3.1, 3.5
+									// https://promisesaplus.com/#point-54
+									// https://promisesaplus.com/#point-75
+									// Retrieve `then` only once
+									then = returned &&
+
+										// Support: Promises/A+ section 2.3.4
+										// https://promisesaplus.com/#point-64
+										// Only check objects and functions for thenability
+										( typeof returned === "object" ||
+											typeof returned === "function" ) &&
+										returned.then;
+
+									// Handle a returned thenable
+									if ( jQuery.isFunction( then ) ) {
+
+										// Special processors (notify) just wait for resolution
+										if ( special ) {
+											then.call(
+												returned,
+												resolve( maxDepth, deferred, Identity, special ),
+												resolve( maxDepth, deferred, Thrower, special )
+											);
+
+										// Normal processors (resolve) also hook into progress
+										} else {
+
+											// ...and disregard older resolution values
+											maxDepth++;
+
+											then.call(
+												returned,
+												resolve( maxDepth, deferred, Identity, special ),
+												resolve( maxDepth, deferred, Thrower, special ),
+												resolve( maxDepth, deferred, Identity,
+													deferred.notifyWith )
+											);
+										}
+
+									// Handle all other returned values
+									} else {
+
+										// Only substitute handlers pass on context
+										// and multiple values (non-spec behavior)
+										if ( handler !== Identity ) {
+											that = undefined;
+											args = [ returned ];
+										}
+
+										// Process the value(s)
+										// Default process is resolve
+										( special || deferred.resolveWith )( that, args );
+									}
+								},
+
+								// Only normal processors (resolve) catch and reject exceptions
+								process = special ?
+									mightThrow :
+									function() {
+										try {
+											mightThrow();
+										} catch ( e ) {
+
+											if ( jQuery.Deferred.exceptionHook ) {
+												jQuery.Deferred.exceptionHook( e,
+													process.stackTrace );
+											}
+
+											// Support: Promises/A+ section 2.3.3.3.4.1
+											// https://promisesaplus.com/#point-61
+											// Ignore post-resolution exceptions
+											if ( depth + 1 >= maxDepth ) {
+
+												// Only substitute handlers pass on context
+												// and multiple values (non-spec behavior)
+												if ( handler !== Thrower ) {
+													that = undefined;
+													args = [ e ];
+												}
+
+												deferred.rejectWith( that, args );
+											}
+										}
+									};
+
+							// Support: Promises/A+ section 2.3.3.3.1
+							// https://promisesaplus.com/#point-57
+							// Re-resolve promises immediately to dodge false rejection from
+							// subsequent errors
+							if ( depth ) {
+								process();
+							} else {
+
+								// Call an optional hook to record the stack, in case of exception
+								// since it's otherwise lost when execution goes async
+								if ( jQuery.Deferred.getStackHook ) {
+									process.stackTrace = jQuery.Deferred.getStackHook();
+								}
+								window.setTimeout( process );
+							}
+						};
+					}
+
+					return jQuery.Deferred( function( newDefer ) {
+
+						// progress_handlers.add( ... )
+						tuples[ 0 ][ 3 ].add(
+							resolve(
+								0,
+								newDefer,
+								jQuery.isFunction( onProgress ) ?
+									onProgress :
+									Identity,
+								newDefer.notifyWith
+							)
+						);
+
+						// fulfilled_handlers.add( ... )
+						tuples[ 1 ][ 3 ].add(
+							resolve(
+								0,
+								newDefer,
+								jQuery.isFunction( onFulfilled ) ?
+									onFulfilled :
+									Identity
+							)
+						);
+
+						// rejected_handlers.add( ... )
+						tuples[ 2 ][ 3 ].add(
+							resolve(
+								0,
+								newDefer,
+								jQuery.isFunction( onRejected ) ?
+									onRejected :
+									Thrower
+							)
+						);
+					} ).promise();
+				},
+
+				// Get a promise for this deferred
+				// If obj is provided, the promise aspect is added to the object
+				promise: function( obj ) {
+					return obj != null ? jQuery.extend( obj, promise ) : promise;
+				}
+			},
+			deferred = {};
+
+		// Add list-specific methods
+		jQuery.each( tuples, function( i, tuple ) {
+			var list = tuple[ 2 ],
+				stateString = tuple[ 5 ];
+
+			// promise.progress = list.add
+			// promise.done = list.add
+			// promise.fail = list.add
+			promise[ tuple[ 1 ] ] = list.add;
+
+			// Handle state
+			if ( stateString ) {
+				list.add(
+					function() {
+
+						// state = "resolved" (i.e., fulfilled)
+						// state = "rejected"
+						state = stateString;
+					},
+
+					// rejected_callbacks.disable
+					// fulfilled_callbacks.disable
+					tuples[ 3 - i ][ 2 ].disable,
+
+					// progress_callbacks.lock
+					tuples[ 0 ][ 2 ].lock
+				);
+			}
+
+			// progress_handlers.fire
+			// fulfilled_handlers.fire
+			// rejected_handlers.fire
+			list.add( tuple[ 3 ].fire );
+
+			// deferred.notify = function() { deferred.notifyWith(...) }
+			// deferred.resolve = function() { deferred.resolveWith(...) }
+			// deferred.reject = function() { deferred.rejectWith(...) }
+			deferred[ tuple[ 0 ] ] = function() {
+				deferred[ tuple[ 0 ] + "With" ]( this === deferred ? undefined : this, arguments );
+				return this;
+			};
+
+			// deferred.notifyWith = list.fireWith
+			// deferred.resolveWith = list.fireWith
+			// deferred.rejectWith = list.fireWith
+			deferred[ tuple[ 0 ] + "With" ] = list.fireWith;
+		} );
+
+		// Make the deferred a promise
+		promise.promise( deferred );
+
+		// Call given func if any
+		if ( func ) {
+			func.call( deferred, deferred );
+		}
+
+		// All done!
+		return deferred;
+	},
+
+	// Deferred helper
+	when: function( singleValue ) {
+		var
+
+			// count of uncompleted subordinates
+			remaining = arguments.length,
+
+			// count of unprocessed arguments
+			i = remaining,
+
+			// subordinate fulfillment data
+			resolveContexts = Array( i ),
+			resolveValues = slice.call( arguments ),
+
+			// the master Deferred
+			master = jQuery.Deferred(),
+
+			// subordinate callback factory
+			updateFunc = function( i ) {
+				return function( value ) {
+					resolveContexts[ i ] = this;
+					resolveValues[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
+					if ( !( --remaining ) ) {
+						master.resolveWith( resolveContexts, resolveValues );
+					}
+				};
+			};
+
+		// Single- and empty arguments are adopted like Promise.resolve
+		if ( remaining <= 1 ) {
+			adoptValue( singleValue, master.done( updateFunc( i ) ).resolve, master.reject,
+				!remaining );
+
+			// Use .then() to unwrap secondary thenables (cf. gh-3000)
+			if ( master.state() === "pending" ||
+				jQuery.isFunction( resolveValues[ i ] && resolveValues[ i ].then ) ) {
+
+				return master.then();
+			}
+		}
+
+		// Multiple arguments are aggregated like Promise.all array elements
+		while ( i-- ) {
+			adoptValue( resolveValues[ i ], updateFunc( i ), master.reject );
+		}
+
+		return master.promise();
+	}
+} );
+
+
+// These usually indicate a programmer mistake during development,
+// warn about them ASAP rather than swallowing them by default.
+var rerrorNames = /^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;
+
+jQuery.Deferred.exceptionHook = function( error, stack ) {
+
+	// Support: IE 8 - 9 only
+	// Console exists when dev tools are open, which can happen at any time
+	if ( window.console && window.console.warn && error && rerrorNames.test( error.name ) ) {
+		window.console.warn( "jQuery.Deferred exception: " + error.message, error.stack, stack );
+	}
+};
+
+
+
+
+jQuery.readyException = function( error ) {
+	window.setTimeout( function() {
+		throw error;
+	} );
+};
+
+
+
+
+// The deferred used on DOM ready
+var readyList = jQuery.Deferred();
+
+jQuery.fn.ready = function( fn ) {
+
+	readyList
+		.then( fn )
+
+		// Wrap jQuery.readyException in a function so that the lookup
+		// happens at the time of error handling instead of callback
+		// registration.
+		.catch( function( error ) {
+			jQuery.readyException( error );
+		} );
+
+	return this;
+};
+
+jQuery.extend( {
+
+	// Is the DOM ready to be used? Set to true once it occurs.
+	isReady: false,
+
+	// A counter to track how many items to wait for before
+	// the ready event fires. See #6781
+	readyWait: 1,
+
+	// Handle when the DOM is ready
+	ready: function( wait ) {
+
+		// Abort if there are pending holds or we're already ready
+		if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
+			return;
+		}
+
+		// Remember that the DOM is ready
+		jQuery.isReady = true;
+
+		// If a normal DOM Ready event fired, decrement, and wait if need be
+		if ( wait !== true && --jQuery.readyWait > 0 ) {
+			return;
+		}
+
+		// If there are functions bound, to execute
+		readyList.resolveWith( document, [ jQuery ] );
+	}
+} );
+
+jQuery.ready.then = readyList.then;
+
+// The ready event handler and self cleanup method
+function completed() {
+	document.removeEventListener( "DOMContentLoaded", completed );
+	window.removeEventListener( "load", completed );
+	jQuery.ready();
+}
+
+// Catch cases where $(document).ready() is called
+// after the browser event has already occurred.
+// Support: IE <=9 - 10 only
+// Older IE sometimes signals "interactive" too soon
+if ( document.readyState === "complete" ||
+	( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
+
+	// Handle it asynchronously to allow scripts the opportunity to delay ready
+	window.setTimeout( jQuery.ready );
+
+} else {
+
+	// Use the handy event callback
+	document.addEventListener( "DOMContentLoaded", completed );
+
+	// A fallback to window.onload, that will always work
+	window.addEventListener( "load", completed );
+}
+
+
+
+
+// Multifunctional method to get and set values of a collection
+// The value/s can optionally be executed if it's a function
+var access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
+	var i = 0,
+		len = elems.length,
+		bulk = key == null;
+
+	// Sets many values
+	if ( jQuery.type( key ) === "object" ) {
+		chainable = true;
+		for ( i in key ) {
+			access( elems, fn, i, key[ i ], true, emptyGet, raw );
+		}
+
+	// Sets one value
+	} else if ( value !== undefined ) {
+		chainable = true;
+
+		if ( !jQuery.isFunction( value ) ) {
+			raw = true;
+		}
+
+		if ( bulk ) {
+
+			// Bulk operations run against the entire set
+			if ( raw ) {
+				fn.call( elems, value );
+				fn = null;
+
+			// ...except when executing function values
+			} else {
+				bulk = fn;
+				fn = function( elem, key, value ) {
+					return bulk.call( jQuery( elem ), value );
+				};
+			}
+		}
+
+		if ( fn ) {
+			for ( ; i < len; i++ ) {
+				fn(
+					elems[ i ], key, raw ?
+					value :
+					value.call( elems[ i ], i, fn( elems[ i ], key ) )
+				);
+			}
+		}
+	}
+
+	if ( chainable ) {
+		return elems;
+	}
+
+	// Gets
+	if ( bulk ) {
+		return fn.call( elems );
+	}
+
+	return len ? fn( elems[ 0 ], key ) : emptyGet;
+};
+var acceptData = function( owner ) {
+
+	// Accepts only:
+	//  - Node
+	//    - Node.ELEMENT_NODE
+	//    - Node.DOCUMENT_NODE
+	//  - Object
+	//    - Any
+	return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );
+};
+
+
+
+
+function Data() {
+	this.expando = jQuery.expando + Data.uid++;
+}
+
+Data.uid = 1;
+
+Data.prototype = {
+
+	cache: function( owner ) {
+
+		// Check if the owner object already has a cache
+		var value = owner[ this.expando ];
+
+		// If not, create one
+		if ( !value ) {
+			value = {};
+
+			// We can accept data for non-element nodes in modern browsers,
+			// but we should not, see #8335.
+			// Always return an empty object.
+			if ( acceptData( owner ) ) {
+
+				// If it is a node unlikely to be stringify-ed or looped over
+				// use plain assignment
+				if ( owner.nodeType ) {
+					owner[ this.expando ] = value;
+
+				// Otherwise secure it in a non-enumerable property
+				// configurable must be true to allow the property to be
+				// deleted when data is removed
+				} else {
+					Object.defineProperty( owner, this.expando, {
+						value: value,
+						configurable: true
+					} );
+				}
+			}
+		}
+
+		return value;
+	},
+	set: function( owner, data, value ) {
+		var prop,
+			cache = this.cache( owner );
+
+		// Handle: [ owner, key, value ] args
+		// Always use camelCase key (gh-2257)
+		if ( typeof data === "string" ) {
+			cache[ jQuery.camelCase( data ) ] = value;
+
+		// Handle: [ owner, { properties } ] args
+		} else {
+
+			// Copy the properties one-by-one to the cache object
+			for ( prop in data ) {
+				cache[ jQuery.camelCase( prop ) ] = data[ prop ];
+			}
+		}
+		return cache;
+	},
+	get: function( owner, key ) {
+		return key === undefined ?
+			this.cache( owner ) :
+
+			// Always use camelCase key (gh-2257)
+			owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];
+	},
+	access: function( owner, key, value ) {
+
+		// In cases where either:
+		//
+		//   1. No key was specified
+		//   2. A string key was specified, but no value provided
+		//
+		// Take the "read" path and allow the get method to determine
+		// which value to return, respectively either:
+		//
+		//   1. The entire cache object
+		//   2. The data stored at the key
+		//
+		if ( key === undefined ||
+				( ( key && typeof key === "string" ) && value === undefined ) ) {
+
+			return this.get( owner, key );
+		}
+
+		// When the key is not a string, or both a key and value
+		// are specified, set or extend (existing objects) with either:
+		//
+		//   1. An object of properties
+		//   2. A key and value
+		//
+		this.set( owner, key, value );
+
+		// Since the "set" path can have two possible entry points
+		// return the expected data based on which path was taken[*]
+		return value !== undefined ? value : key;
+	},
+	remove: function( owner, key ) {
+		var i,
+			cache = owner[ this.expando ];
+
+		if ( cache === undefined ) {
+			return;
+		}
+
+		if ( key !== undefined ) {
+
+			// Support array or space separated string of keys
+			if ( Array.isArray( key ) ) {
+
+				// If key is an array of keys...
+				// We always set camelCase keys, so remove that.
+				key = key.map( jQuery.camelCase );
+			} else {
+				key = jQuery.camelCase( key );
+
+				// If a key with the spaces exists, use it.
+				// Otherwise, create an array by matching non-whitespace
+				key = key in cache ?
+					[ key ] :
+					( key.match( rnothtmlwhite ) || [] );
+			}
+
+			i = key.length;
+
+			while ( i-- ) {
+				delete cache[ key[ i ] ];
+			}
+		}
+
+		// Remove the expando if there's no more data
+		if ( key === undefined || jQuery.isEmptyObject( cache ) ) {
+
+			// Support: Chrome <=35 - 45
+			// Webkit & Blink performance suffers when deleting properties
+			// from DOM nodes, so set to undefined instead
+			// https://bugs.chromium.org/p/chromium/issues/detail?id=378607 (bug restricted)
+			if ( owner.nodeType ) {
+				owner[ this.expando ] = undefined;
+			} else {
+				delete owner[ this.expando ];
+			}
+		}
+	},
+	hasData: function( owner ) {
+		var cache = owner[ this.expando ];
+		return cache !== undefined && !jQuery.isEmptyObject( cache );
+	}
+};
+var dataPriv = new Data();
+
+var dataUser = new Data();
+
+
+
+//	Implementation Summary
+//
+//	1. Enforce API surface and semantic compatibility with 1.9.x branch
+//	2. Improve the module's maintainability by reducing the storage
+//		paths to a single mechanism.
+//	3. Use the same single mechanism to support "private" and "user" data.
+//	4. _Never_ expose "private" data to user code (TODO: Drop _data, _removeData)
+//	5. Avoid exposing implementation details on user objects (eg. expando properties)
+//	6. Provide a clear path for implementation upgrade to WeakMap in 2014
+
+var rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,
+	rmultiDash = /[A-Z]/g;
+
+function getData( data ) {
+	if ( data === "true" ) {
+		return true;
+	}
+
+	if ( data === "false" ) {
+		return false;
+	}
+
+	if ( data === "null" ) {
+		return null;
+	}
+
+	// Only convert to a number if it doesn't change the string
+	if ( data === +data + "" ) {
+		return +data;
+	}
+
+	if ( rbrace.test( data ) ) {
+		return JSON.parse( data );
+	}
+
+	return data;
+}
+
+function dataAttr( elem, key, data ) {
+	var name;
+
+	// If nothing was found internally, try to fetch any
+	// data from the HTML5 data-* attribute
+	if ( data === undefined && elem.nodeType === 1 ) {
+		name = "data-" + key.replace( rmultiDash, "-$&" ).toLowerCase();
+		data = elem.getAttribute( name );
+
+		if ( typeof data === "string" ) {
+			try {
+				data = getData( data );
+			} catch ( e ) {}
+
+			// Make sure we set the data so it isn't changed later
+			dataUser.set( elem, key, data );
+		} else {
+			data = undefined;
+		}
+	}
+	return data;
+}
+
+jQuery.extend( {
+	hasData: function( elem ) {
+		return dataUser.hasData( elem ) || dataPriv.hasData( elem );
+	},
+
+	data: function( elem, name, data ) {
+		return dataUser.access( elem, name, data );
+	},
+
+	removeData: function( elem, name ) {
+		dataUser.remove( elem, name );
+	},
+
+	// TODO: Now that all calls to _data and _removeData have been replaced
+	// with direct calls to dataPriv methods, these can be deprecated.
+	_data: function( elem, name, data ) {
+		return dataPriv.access( elem, name, data );
+	},
+
+	_removeData: function( elem, name ) {
+		dataPriv.remove( elem, name );
+	}
+} );
+
+jQuery.fn.extend( {
+	data: function( key, value ) {
+		var i, name, data,
+			elem = this[ 0 ],
+			attrs = elem && elem.attributes;
+
+		// Gets all values
+		if ( key === undefined ) {
+			if ( this.length ) {
+				data = dataUser.get( elem );
+
+				if ( elem.nodeType === 1 && !dataPriv.get( elem, "hasDataAttrs" ) ) {
+					i = attrs.length;
+					while ( i-- ) {
+
+						// Support: IE 11 only
+						// The attrs elements can be null (#14894)
+						if ( attrs[ i ] ) {
+							name = attrs[ i ].name;
+							if ( name.indexOf( "data-" ) === 0 ) {
+								name = jQuery.camelCase( name.slice( 5 ) );
+								dataAttr( elem, name, data[ name ] );
+							}
+						}
+					}
+					dataPriv.set( elem, "hasDataAttrs", true );
+				}
+			}
+
+			return data;
+		}
+
+		// Sets multiple values
+		if ( typeof key === "object" ) {
+			return this.each( function() {
+				dataUser.set( this, key );
+			} );
+		}
+
+		return access( this, function( value ) {
+			var data;
+
+			// The calling jQuery object (element matches) is not empty
+			// (and therefore has an element appears at this[ 0 ]) and the
+			// `value` parameter was not undefined. An empty jQuery object
+			// will result in `undefined` for elem = this[ 0 ] which will
+			// throw an exception if an attempt to read a data cache is made.
+			if ( elem && value === undefined ) {
+
+				// Attempt to get data from the cache
+				// The key will always be camelCased in Data
+				data = dataUser.get( elem, key );
+				if ( data !== undefined ) {
+					return data;
+				}
+
+				// Attempt to "discover" the data in
+				// HTML5 custom data-* attrs
+				data = dataAttr( elem, key );
+				if ( data !== undefined ) {
+					return data;
+				}
+
+				// We tried really hard, but the data doesn't exist.
+				return;
+			}
+
+			// Set the data...
+			this.each( function() {
+
+				// We always store the camelCased key
+				dataUser.set( this, key, value );
+			} );
+		}, null, value, arguments.length > 1, null, true );
+	},
+
+	removeData: function( key ) {
+		return this.each( function() {
+			dataUser.remove( this, key );
+		} );
+	}
+} );
+
+
+jQuery.extend( {
+	queue: function( elem, type, data ) {
+		var queue;
+
+		if ( elem ) {
+			type = ( type || "fx" ) + "queue";
+			queue = dataPriv.get( elem, type );
+
+			// Speed up dequeue by getting out quickly if this is just a lookup
+			if ( data ) {
+				if ( !queue || Array.isArray( data ) ) {
+					queue = dataPriv.access( elem, type, jQuery.makeArray( data ) );
+				} else {
+					queue.push( data );
+				}
+			}
+			return queue || [];
+		}
+	},
+
+	dequeue: function( elem, type ) {
+		type = type || "fx";
+
+		var queue = jQuery.queue( elem, type ),
+			startLength = queue.length,
+			fn = queue.shift(),
+			hooks = jQuery._queueHooks( elem, type ),
+			next = function() {
+				jQuery.dequeue( elem, type );
+			};
+
+		// If the fx queue is dequeued, always remove the progress sentinel
+		if ( fn === "inprogress" ) {
+			fn = queue.shift();
+			startLength--;
+		}
+
+		if ( fn ) {
+
+			// Add a progress sentinel to prevent the fx queue from being
+			// automatically dequeued
+			if ( type === "fx" ) {
+				queue.unshift( "inprogress" );
+			}
+
+			// Clear up the last queue stop function
+			delete hooks.stop;
+			fn.call( elem, next, hooks );
+		}
+
+		if ( !startLength && hooks ) {
+			hooks.empty.fire();
+		}
+	},
+
+	// Not public - generate a queueHooks object, or return the current one
+	_queueHooks: function( elem, type ) {
+		var key = type + "queueHooks";
+		return dataPriv.get( elem, key ) || dataPriv.access( elem, key, {
+			empty: jQuery.Callbacks( "once memory" ).add( function() {
+				dataPriv.remove( elem, [ type + "queue", key ] );
+			} )
+		} );
+	}
+} );
+
+jQuery.fn.extend( {
+	queue: function( type, data ) {
+		var setter = 2;
+
+		if ( typeof type !== "string" ) {
+			data = type;
+			type = "fx";
+			setter--;
+		}
+
+		if ( arguments.length < setter ) {
+			return jQuery.queue( this[ 0 ], type );
+		}
+
+		return data === undefined ?
+			this :
+			this.each( function() {
+				var queue = jQuery.queue( this, type, data );
+
+				// Ensure a hooks for this queue
+				jQuery._queueHooks( this, type );
+
+				if ( type === "fx" && queue[ 0 ] !== "inprogress" ) {
+					jQuery.dequeue( this, type );
+				}
+			} );
+	},
+	dequeue: function( type ) {
+		return this.each( function() {
+			jQuery.dequeue( this, type );
+		} );
+	},
+	clearQueue: function( type ) {
+		return this.queue( type || "fx", [] );
+	},
+
+	// Get a promise resolved when queues of a certain type
+	// are emptied (fx is the type by default)
+	promise: function( type, obj ) {
+		var tmp,
+			count = 1,
+			defer = jQuery.Deferred(),
+			elements = this,
+			i = this.length,
+			resolve = function() {
+				if ( !( --count ) ) {
+					defer.resolveWith( elements, [ elements ] );
+				}
+			};
+
+		if ( typeof type !== "string" ) {
+			obj = type;
+			type = undefined;
+		}
+		type = type || "fx";
+
+		while ( i-- ) {
+			tmp = dataPriv.get( elements[ i ], type + "queueHooks" );
+			if ( tmp && tmp.empty ) {
+				count++;
+				tmp.empty.add( resolve );
+			}
+		}
+		resolve();
+		return defer.promise( obj );
+	}
+} );
+var pnum = ( /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/ ).source;
+
+var rcssNum = new RegExp( "^(?:([+-])=|)(" + pnum + ")([a-z%]*)$", "i" );
+
+
+var cssExpand = [ "Top", "Right", "Bottom", "Left" ];
+
+var isHiddenWithinTree = function( elem, el ) {
+
+		// isHiddenWithinTree might be called from jQuery#filter function;
+		// in that case, element will be second argument
+		elem = el || elem;
+
+		// Inline style trumps all
+		return elem.style.display === "none" ||
+			elem.style.display === "" &&
+
+			// Otherwise, check computed style
+			// Support: Firefox <=43 - 45
+			// Disconnected elements can have computed display: none, so first confirm that elem is
+			// in the document.
+			jQuery.contains( elem.ownerDocument, elem ) &&
+
+			jQuery.css( elem, "display" ) === "none";
+	};
+
+var swap = function( elem, options, callback, args ) {
+	var ret, name,
+		old = {};
+
+	// Remember the old values, and insert the new ones
+	for ( name in options ) {
+		old[ name ] = elem.style[ name ];
+		elem.style[ name ] = options[ name ];
+	}
+
+	ret = callback.apply( elem, args || [] );
+
+	// Revert the old values
+	for ( name in options ) {
+		elem.style[ name ] = old[ name ];
+	}
+
+	return ret;
+};
+
+
+
+
+function adjustCSS( elem, prop, valueParts, tween ) {
+	var adjusted,
+		scale = 1,
+		maxIterations = 20,
+		currentValue = tween ?
+			function() {
+				return tween.cur();
+			} :
+			function() {
+				return jQuery.css( elem, prop, "" );
+			},
+		initial = currentValue(),
+		unit = valueParts && valueParts[ 3 ] || ( jQuery.cssNumber[ prop ] ? "" : "px" ),
+
+		// Starting value computation is required for potential unit mismatches
+		initialInUnit = ( jQuery.cssNumber[ prop ] || unit !== "px" && +initial ) &&
+			rcssNum.exec( jQuery.css( elem, prop ) );
+
+	if ( initialInUnit && initialInUnit[ 3 ] !== unit ) {
+
+		// Trust units reported by jQuery.css
+		unit = unit || initialInUnit[ 3 ];
+
+		// Make sure we update the tween properties later on
+		valueParts = valueParts || [];
+
+		// Iteratively approximate from a nonzero starting point
+		initialInUnit = +initial || 1;
+
+		do {
+
+			// If previous iteration zeroed out, double until we get *something*.
+			// Use string for doubling so we don't accidentally see scale as unchanged below
+			scale = scale || ".5";
+
+			// Adjust and apply
+			initialInUnit = initialInUnit / scale;
+			jQuery.style( elem, prop, initialInUnit + unit );
+
+		// Update scale, tolerating zero or NaN from tween.cur()
+		// Break the loop if scale is unchanged or perfect, or if we've just had enough.
+		} while (
+			scale !== ( scale = currentValue() / initial ) && scale !== 1 && --maxIterations
+		);
+	}
+
+	if ( valueParts ) {
+		initialInUnit = +initialInUnit || +initial || 0;
+
+		// Apply relative offset (+=/-=) if specified
+		adjusted = valueParts[ 1 ] ?
+			initialInUnit + ( valueParts[ 1 ] + 1 ) * valueParts[ 2 ] :
+			+valueParts[ 2 ];
+		if ( tween ) {
+			tween.unit = unit;
+			tween.start = initialInUnit;
+			tween.end = adjusted;
+		}
+	}
+	return adjusted;
+}
+
+
+var defaultDisplayMap = {};
+
+function getDefaultDisplay( elem ) {
+	var temp,
+		doc = elem.ownerDocument,
+		nodeName = elem.nodeName,
+		display = defaultDisplayMap[ nodeName ];
+
+	if ( display ) {
+		return display;
+	}
+
+	temp = doc.body.appendChild( doc.createElement( nodeName ) );
+	display = jQuery.css( temp, "display" );
+
+	temp.parentNode.removeChild( temp );
+
+	if ( display === "none" ) {
+		display = "block";
+	}
+	defaultDisplayMap[ nodeName ] = display;
+
+	return display;
+}
+
+function showHide( elements, show ) {
+	var display, elem,
+		values = [],
+		index = 0,
+		length = elements.length;
+
+	// Determine new display value for elements that need to change
+	for ( ; index < length; index++ ) {
+		elem = elements[ index ];
+		if ( !elem.style ) {
+			continue;
+		}
+
+		display = elem.style.display;
+		if ( show ) {
+
+			// Since we force visibility upon cascade-hidden elements, an immediate (and slow)
+			// check is required in this first loop unless we have a nonempty display value (either
+			// inline or about-to-be-restored)
+			if ( display === "none" ) {
+				values[ index ] = dataPriv.get( elem, "display" ) || null;
+				if ( !values[ index ] ) {
+					elem.style.display = "";
+				}
+			}
+			if ( elem.style.display === "" && isHiddenWithinTree( elem ) ) {
+				values[ index ] = getDefaultDisplay( elem );
+			}
+		} else {
+			if ( display !== "none" ) {
+				values[ index ] = "none";
+
+				// Remember what we're overwriting
+				dataPriv.set( elem, "display", display );
+			}
+		}
+	}
+
+	// Set the display of the elements in a second loop to avoid constant reflow
+	for ( index = 0; index < length; index++ ) {
+		if ( values[ index ] != null ) {
+			elements[ index ].style.display = values[ index ];
+		}
+	}
+
+	return elements;
+}
+
+jQuery.fn.extend( {
+	show: function() {
+		return showHide( this, true );
+	},
+	hide: function() {
+		return showHide( this );
+	},
+	toggle: function( state ) {
+		if ( typeof state === "boolean" ) {
+			return state ? this.show() : this.hide();
+		}
+
+		return this.each( function() {
+			if ( isHiddenWithinTree( this ) ) {
+				jQuery( this ).show();
+			} else {
+				jQuery( this ).hide();
+			}
+		} );
+	}
+} );
+var rcheckableType = ( /^(?:checkbox|radio)$/i );
+
+var rtagName = ( /<([a-z][^\/\0>\x20\t\r\n\f]+)/i );
+
+var rscriptType = ( /^$|\/(?:java|ecma)script/i );
+
+
+
+// We have to close these tags to support XHTML (#13200)
+var wrapMap = {
+
+	// Support: IE <=9 only
+	option: [ 1, "<select multiple='multiple'>", "</select>" ],
+
+	// XHTML parsers do not magically insert elements in the
+	// same way that tag soup parsers do. So we cannot shorten
+	// this by omitting <tbody> or other required elements.
+	thead: [ 1, "<table>", "</table>" ],
+	col: [ 2, "<table><colgroup>", "</colgroup></table>" ],
+	tr: [ 2, "<table><tbody>", "</tbody></table>" ],
+	td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
+
+	_default: [ 0, "", "" ]
+};
+
+// Support: IE <=9 only
+wrapMap.optgroup = wrapMap.option;
+
+wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
+wrapMap.th = wrapMap.td;
+
+
+function getAll( context, tag ) {
+
+	// Support: IE <=9 - 11 only
+	// Use typeof to avoid zero-argument method invocation on host objects (#15151)
+	var ret;
+
+	if ( typeof context.getElementsByTagName !== "undefined" ) {
+		ret = context.getElementsByTagName( tag || "*" );
+
+	} else if ( typeof context.querySelectorAll !== "undefined" ) {
+		ret = context.querySelectorAll( tag || "*" );
+
+	} else {
+		ret = [];
+	}
+
+	if ( tag === undefined || tag && nodeName( context, tag ) ) {
+		return jQuery.merge( [ context ], ret );
+	}
+
+	return ret;
+}
+
+
+// Mark scripts as having already been evaluated
+function setGlobalEval( elems, refElements ) {
+	var i = 0,
+		l = elems.length;
+
+	for ( ; i < l; i++ ) {
+		dataPriv.set(
+			elems[ i ],
+			"globalEval",
+			!refElements || dataPriv.get( refElements[ i ], "globalEval" )
+		);
+	}
+}
+
+
+var rhtml = /<|&#?\w+;/;
+
+function buildFragment( elems, context, scripts, selection, ignored ) {
+	var elem, tmp, tag, wrap, contains, j,
+		fragment = context.createDocumentFragment(),
+		nodes = [],
+		i = 0,
+		l = elems.length;
+
+	for ( ; i < l; i++ ) {
+		elem = elems[ i ];
+
+		if ( elem || elem === 0 ) {
+
+			// Add nodes directly
+			if ( jQuery.type( elem ) === "object" ) {
+
+				// Support: Android <=4.0 only, PhantomJS 1 only
+				// push.apply(_, arraylike) throws on ancient WebKit
+				jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );
+
+			// Convert non-html into a text node
+			} else if ( !rhtml.test( elem ) ) {
+				nodes.push( context.createTextNode( elem ) );
+
+			// Convert html into DOM nodes
+			} else {
+				tmp = tmp || fragment.appendChild( context.createElement( "div" ) );
+
+				// Deserialize a standard representation
+				tag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase();
+				wrap = wrapMap[ tag ] || wrapMap._default;
+				tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];
+
+				// Descend through wrappers to the right content
+				j = wrap[ 0 ];
+				while ( j-- ) {
+					tmp = tmp.lastChild;
+				}
+
+				// Support: Android <=4.0 only, PhantomJS 1 only
+				// push.apply(_, arraylike) throws on ancient WebKit
+				jQuery.merge( nodes, tmp.childNodes );
+
+				// Remember the top-level container
+				tmp = fragment.firstChild;
+
+				// Ensure the created nodes are orphaned (#12392)
+				tmp.textContent = "";
+			}
+		}
+	}
+
+	// Remove wrapper from fragment
+	fragment.textContent = "";
+
+	i = 0;
+	while ( ( elem = nodes[ i++ ] ) ) {
+
+		// Skip elements already in the context collection (trac-4087)
+		if ( selection && jQuery.inArray( elem, selection ) > -1 ) {
+			if ( ignored ) {
+				ignored.push( elem );
+			}
+			continue;
+		}
+
+		contains = jQuery.contains( elem.ownerDocument, elem );
+
+		// Append to fragment
+		tmp = getAll( fragment.appendChild( elem ), "script" );
+
+		// Preserve script evaluation history
+		if ( contains ) {
+			setGlobalEval( tmp );
+		}
+
+		// Capture executables
+		if ( scripts ) {
+			j = 0;
+			while ( ( elem = tmp[ j++ ] ) ) {
+				if ( rscriptType.test( elem.type || "" ) ) {
+					scripts.push( elem );
+				}
+			}
+		}
+	}
+
+	return fragment;
+}
+
+
+( function() {
+	var fragment = document.createDocumentFragment(),
+		div = fragment.appendChild( document.createElement( "div" ) ),
+		input = document.createElement( "input" );
+
+	// Support: Android 4.0 - 4.3 only
+	// Check state lost if the name is set (#11217)
+	// Support: Windows Web Apps (WWA)
+	// `name` and `type` must use .setAttribute for WWA (#14901)
+	input.setAttribute( "type", "radio" );
+	input.setAttribute( "checked", "checked" );
+	input.setAttribute( "name", "t" );
+
+	div.appendChild( input );
+
+	// Support: Android <=4.1 only
+	// Older WebKit doesn't clone checked state correctly in fragments
+	support.checkClone = div.cloneNode( true ).cloneNode( true ).lastChild.checked;
+
+	// Support: IE <=11 only
+	// Make sure textarea (and checkbox) defaultValue is properly cloned
+	div.innerHTML = "<textarea>x</textarea>";
+	support.noCloneChecked = !!div.cloneNode( true ).lastChild.defaultValue;
+} )();
+var documentElement = document.documentElement;
+
+
+
+var
+	rkeyEvent = /^key/,
+	rmouseEvent = /^(?:mouse|pointer|contextmenu|drag|drop)|click/,
+	rtypenamespace = /^([^.]*)(?:\.(.+)|)/;
+
+function returnTrue() {
+	return true;
+}
+
+function returnFalse() {
+	return false;
+}
+
+// Support: IE <=9 only
+// See #13393 for more info
+function safeActiveElement() {
+	try {
+		return document.activeElement;
+	} catch ( err ) { }
+}
+
+function on( elem, types, selector, data, fn, one ) {
+	var origFn, type;
+
+	// Types can be a map of types/handlers
+	if ( typeof types === "object" ) {
+
+		// ( types-Object, selector, data )
+		if ( typeof selector !== "string" ) {
+
+			// ( types-Object, data )
+			data = data || selector;
+			selector = undefined;
+		}
+		for ( type in types ) {
+			on( elem, type, selector, data, types[ type ], one );
+		}
+		return elem;
+	}
+
+	if ( data == null && fn == null ) {
+
+		// ( types, fn )
+		fn = selector;
+		data = selector = undefined;
+	} else if ( fn == null ) {
+		if ( typeof selector === "string" ) {
+
+			// ( types, selector, fn )
+			fn = data;
+			data = undefined;
+		} else {
+
+			// ( types, data, fn )
+			fn = data;
+			data = selector;
+			selector = undefined;
+		}
+	}
+	if ( fn === false ) {
+		fn = returnFalse;
+	} else if ( !fn ) {
+		return elem;
+	}
+
+	if ( one === 1 ) {
+		origFn = fn;
+		fn = function( event ) {
+
+			// Can use an empty set, since event contains the info
+			jQuery().off( event );
+			return origFn.apply( this, arguments );
+		};
+
+		// Use same guid so caller can remove using origFn
+		fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
+	}
+	return elem.each( function() {
+		jQuery.event.add( this, types, fn, data, selector );
+	} );
+}
+
+/*
+ * Helper functions for managing events -- not part of the public interface.
+ * Props to Dean Edwards' addEvent library for many of the ideas.
+ */
+jQuery.event = {
+
+	global: {},
+
+	add: function( elem, types, handler, data, selector ) {
+
+		var handleObjIn, eventHandle, tmp,
+			events, t, handleObj,
+			special, handlers, type, namespaces, origType,
+			elemData = dataPriv.get( elem );
+
+		// Don't attach events to noData or text/comment nodes (but allow plain objects)
+		if ( !elemData ) {
+			return;
+		}
+
+		// Caller can pass in an object of custom data in lieu of the handler
+		if ( handler.handler ) {
+			handleObjIn = handler;
+			handler = handleObjIn.handler;
+			selector = handleObjIn.selector;
+		}
+
+		// Ensure that invalid selectors throw exceptions at attach time
+		// Evaluate against documentElement in case elem is a non-element node (e.g., document)
+		if ( selector ) {
+			jQuery.find.matchesSelector( documentElement, selector );
+		}
+
+		// Make sure that the handler has a unique ID, used to find/remove it later
+		if ( !handler.guid ) {
+			handler.guid = jQuery.guid++;
+		}
+
+		// Init the element's event structure and main handler, if this is the first
+		if ( !( events = elemData.events ) ) {
+			events = elemData.events = {};
+		}
+		if ( !( eventHandle = elemData.handle ) ) {
+			eventHandle = elemData.handle = function( e ) {
+
+				// Discard the second event of a jQuery.event.trigger() and
+				// when an event is called after a page has unloaded
+				return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
+					jQuery.event.dispatch.apply( elem, arguments ) : undefined;
+			};
+		}
+
+		// Handle multiple events separated by a space
+		types = ( types || "" ).match( rnothtmlwhite ) || [ "" ];
+		t = types.length;
+		while ( t-- ) {
+			tmp = rtypenamespace.exec( types[ t ] ) || [];
+			type = origType = tmp[ 1 ];
+			namespaces = ( tmp[ 2 ] || "" ).split( "." ).sort();
+
+			// There *must* be a type, no attaching namespace-only handlers
+			if ( !type ) {
+				continue;
+			}
+
+			// If event changes its type, use the special event handlers for the changed type
+			special = jQuery.event.special[ type ] || {};
+
+			// If selector defined, determine special event api type, otherwise given type
+			type = ( selector ? special.delegateType : special.bindType ) || type;
+
+			// Update special based on newly reset type
+			special = jQuery.event.special[ type ] || {};
+
+			// handleObj is passed to all event handlers
+			handleObj = jQuery.extend( {
+				type: type,
+				origType: origType,
+				data: data,
+				handler: handler,
+				guid: handler.guid,
+				selector: selector,
+				needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
+				namespace: namespaces.join( "." )
+			}, handleObjIn );
+
+			// Init the event handler queue if we're the first
+			if ( !( handlers = events[ type ] ) ) {
+				handlers = events[ type ] = [];
+				handlers.delegateCount = 0;
+
+				// Only use addEventListener if the special events handler returns false
+				if ( !special.setup ||
+					special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
+
+					if ( elem.addEventListener ) {
+						elem.addEventListener( type, eventHandle );
+					}
+				}
+			}
+
+			if ( special.add ) {
+				special.add.call( elem, handleObj );
+
+				if ( !handleObj.handler.guid ) {
+					handleObj.handler.guid = handler.guid;
+				}
+			}
+
+			// Add to the element's handler list, delegates in front
+			if ( selector ) {
+				handlers.splice( handlers.delegateCount++, 0, handleObj );
+			} else {
+				handlers.push( handleObj );
+			}
+
+			// Keep track of which events have ever been used, for event optimization
+			jQuery.event.global[ type ] = true;
+		}
+
+	},
+
+	// Detach an event or set of events from an element
+	remove: function( elem, types, handler, selector, mappedTypes ) {
+
+		var j, origCount, tmp,
+			events, t, handleObj,
+			special, handlers, type, namespaces, origType,
+			elemData = dataPriv.hasData( elem ) && dataPriv.get( elem );
+
+		if ( !elemData || !( events = elemData.events ) ) {
+			return;
+		}
+
+		// Once for each type.namespace in types; type may be omitted
+		types = ( types || "" ).match( rnothtmlwhite ) || [ "" ];
+		t = types.length;
+		while ( t-- ) {
+			tmp = rtypenamespace.exec( types[ t ] ) || [];
+			type = origType = tmp[ 1 ];
+			namespaces = ( tmp[ 2 ] || "" ).split( "." ).sort();
+
+			// Unbind all events (on this namespace, if provided) for the element
+			if ( !type ) {
+				for ( type in events ) {
+					jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
+				}
+				continue;
+			}
+
+			special = jQuery.event.special[ type ] || {};
+			type = ( selector ? special.delegateType : special.bindType ) || type;
+			handlers = events[ type ] || [];
+			tmp = tmp[ 2 ] &&
+				new RegExp( "(^|\\.)" + namespaces.join( "\\.(?:.*\\.|)" ) + "(\\.|$)" );
+
+			// Remove matching events
+			origCount = j = handlers.length;
+			while ( j-- ) {
+				handleObj = handlers[ j ];
+
+				if ( ( mappedTypes || origType === handleObj.origType ) &&
+					( !handler || handler.guid === handleObj.guid ) &&
+					( !tmp || tmp.test( handleObj.namespace ) ) &&
+					( !selector || selector === handleObj.selector ||
+						selector === "**" && handleObj.selector ) ) {
+					handlers.splice( j, 1 );
+
+					if ( handleObj.selector ) {
+						handlers.delegateCount--;
+					}
+					if ( special.remove ) {
+						special.remove.call( elem, handleObj );
+					}
+				}
+			}
+
+			// Remove generic event handler if we removed something and no more handlers exist
+			// (avoids potential for endless recursion during removal of special event handlers)
+			if ( origCount && !handlers.length ) {
+				if ( !special.teardown ||
+					special.teardown.call( elem, namespaces, elemData.handle ) === false ) {
+
+					jQuery.removeEvent( elem, type, elemData.handle );
+				}
+
+				delete events[ type ];
+			}
+		}
+
+		// Remove data and the expando if it's no longer used
+		if ( jQuery.isEmptyObject( events ) ) {
+			dataPriv.remove( elem, "handle events" );
+		}
+	},
+
+	dispatch: function( nativeEvent ) {
+
+		// Make a writable jQuery.Event from the native event object
+		var event = jQuery.event.fix( nativeEvent );
+
+		var i, j, ret, matched, handleObj, handlerQueue,
+			args = new Array( arguments.length ),
+			handlers = ( dataPriv.get( this, "events" ) || {} )[ event.type ] || [],
+			special = jQuery.event.special[ event.type ] || {};
+
+		// Use the fix-ed jQuery.Event rather than the (read-only) native event
+		args[ 0 ] = event;
+
+		for ( i = 1; i < arguments.length; i++ ) {
+			args[ i ] = arguments[ i ];
+		}
+
+		event.delegateTarget = this;
+
+		// Call the preDispatch hook for the mapped type, and let it bail if desired
+		if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
+			return;
+		}
+
+		// Determine handlers
+		handlerQueue = jQuery.event.handlers.call( this, event, handlers );
+
+		// Run delegates first; they may want to stop propagation beneath us
+		i = 0;
+		while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
+			event.currentTarget = matched.elem;
+
+			j = 0;
+			while ( ( handleObj = matched.handlers[ j++ ] ) &&
+				!event.isImmediatePropagationStopped() ) {
+
+				// Triggered event must either 1) have no namespace, or 2) have namespace(s)
+				// a subset or equal to those in the bound event (both can have no namespace).
+				if ( !event.rnamespace || event.rnamespace.test( handleObj.namespace ) ) {
+
+					event.handleObj = handleObj;
+					event.data = handleObj.data;
+
+					ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
+						handleObj.handler ).apply( matched.elem, args );
+
+					if ( ret !== undefined ) {
+						if ( ( event.result = ret ) === false ) {
+							event.preventDefault();
+							event.stopPropagation();
+						}
+					}
+				}
+			}
+		}
+
+		// Call the postDispatch hook for the mapped type
+		if ( special.postDispatch ) {
+			special.postDispatch.call( this, event );
+		}
+
+		return event.result;
+	},
+
+	handlers: function( event, handlers ) {
+		var i, handleObj, sel, matchedHandlers, matchedSelectors,
+			handlerQueue = [],
+			delegateCount = handlers.delegateCount,
+			cur = event.target;
+
+		// Find delegate handlers
+		if ( delegateCount &&
+
+			// Support: IE <=9
+			// Black-hole SVG <use> instance trees (trac-13180)
+			cur.nodeType &&
+
+			// Support: Firefox <=42
+			// Suppress spec-violating clicks indicating a non-primary pointer button (trac-3861)
+			// https://www.w3.org/TR/DOM-Level-3-Events/#event-type-click
+			// Support: IE 11 only
+			// ...but not arrow key "clicks" of radio inputs, which can have `button` -1 (gh-2343)
+			!( event.type === "click" && event.button >= 1 ) ) {
+
+			for ( ; cur !== this; cur = cur.parentNode || this ) {
+
+				// Don't check non-elements (#13208)
+				// Don't process clicks on disabled elements (#6911, #8165, #11382, #11764)
+				if ( cur.nodeType === 1 && !( event.type === "click" && cur.disabled === true ) ) {
+					matchedHandlers = [];
+					matchedSelectors = {};
+					for ( i = 0; i < delegateCount; i++ ) {
+						handleObj = handlers[ i ];
+
+						// Don't conflict with Object.prototype properties (#13203)
+						sel = handleObj.selector + " ";
+
+						if ( matchedSelectors[ sel ] === undefined ) {
+							matchedSelectors[ sel ] = handleObj.needsContext ?
+								jQuery( sel, this ).index( cur ) > -1 :
+								jQuery.find( sel, this, null, [ cur ] ).length;
+						}
+						if ( matchedSelectors[ sel ] ) {
+							matchedHandlers.push( handleObj );
+						}
+					}
+					if ( matchedHandlers.length ) {
+						handlerQueue.push( { elem: cur, handlers: matchedHandlers } );
+					}
+				}
+			}
+		}
+
+		// Add the remaining (directly-bound) handlers
+		cur = this;
+		if ( delegateCount < handlers.length ) {
+			handlerQueue.push( { elem: cur, handlers: handlers.slice( delegateCount ) } );
+		}
+
+		return handlerQueue;
+	},
+
+	addProp: function( name, hook ) {
+		Object.defineProperty( jQuery.Event.prototype, name, {
+			enumerable: true,
+			configurable: true,
+
+			get: jQuery.isFunction( hook ) ?
+				function() {
+					if ( this.originalEvent ) {
+							return hook( this.originalEvent );
+					}
+				} :
+				function() {
+					if ( this.originalEvent ) {
+							return this.originalEvent[ name ];
+					}
+				},
+
+			set: function( value ) {
+				Object.defineProperty( this, name, {
+					enumerable: true,
+					configurable: true,
+					writable: true,
+					value: value
+				} );
+			}
+		} );
+	},
+
+	fix: function( originalEvent ) {
+		return originalEvent[ jQuery.expando ] ?
+			originalEvent :
+			new jQuery.Event( originalEvent );
+	},
+
+	special: {
+		load: {
+
+			// Prevent triggered image.load events from bubbling to window.load
+			noBubble: true
+		},
+		focus: {
+
+			// Fire native event if possible so blur/focus sequence is correct
+			trigger: function() {
+				if ( this !== safeActiveElement() && this.focus ) {
+					this.focus();
+					return false;
+				}
+			},
+			delegateType: "focusin"
+		},
+		blur: {
+			trigger: function() {
+				if ( this === safeActiveElement() && this.blur ) {
+					this.blur();
+					return false;
+				}
+			},
+			delegateType: "focusout"
+		},
+		click: {
+
+			// For checkbox, fire native event so checked state will be right
+			trigger: function() {
+				if ( this.type === "checkbox" && this.click && nodeName( this, "input" ) ) {
+					this.click();
+					return false;
+				}
+			},
+
+			// For cross-browser consistency, don't fire native .click() on links
+			_default: function( event ) {
+				return nodeName( event.target, "a" );
+			}
+		},
+
+		beforeunload: {
+			postDispatch: function( event ) {
+
+				// Support: Firefox 20+
+				// Firefox doesn't alert if the returnValue field is not set.
+				if ( event.result !== undefined && event.originalEvent ) {
+					event.originalEvent.returnValue = event.result;
+				}
+			}
+		}
+	}
+};
+
+jQuery.removeEvent = function( elem, type, handle ) {
+
+	// This "if" is needed for plain objects
+	if ( elem.removeEventListener ) {
+		elem.removeEventListener( type, handle );
+	}
+};
+
+jQuery.Event = function( src, props ) {
+
+	// Allow instantiation without the 'new' keyword
+	if ( !( this instanceof jQuery.Event ) ) {
+		return new jQuery.Event( src, props );
+	}
+
+	// Event object
+	if ( src && src.type ) {
+		this.originalEvent = src;
+		this.type = src.type;
+
+		// Events bubbling up the document may have been marked as prevented
+		// by a handler lower down the tree; reflect the correct value.
+		this.isDefaultPrevented = src.defaultPrevented ||
+				src.defaultPrevented === undefined &&
+
+				// Support: Android <=2.3 only
+				src.returnValue === false ?
+			returnTrue :
+			returnFalse;
+
+		// Create target properties
+		// Support: Safari <=6 - 7 only
+		// Target should not be a text node (#504, #13143)
+		this.target = ( src.target && src.target.nodeType === 3 ) ?
+			src.target.parentNode :
+			src.target;
+
+		this.currentTarget = src.currentTarget;
+		this.relatedTarget = src.relatedTarget;
+
+	// Event type
+	} else {
+		this.type = src;
+	}
+
+	// Put explicitly provided properties onto the event object
+	if ( props ) {
+		jQuery.extend( this, props );
+	}
+
+	// Create a timestamp if incoming event doesn't have one
+	this.timeStamp = src && src.timeStamp || jQuery.now();
+
+	// Mark it as fixed
+	this[ jQuery.expando ] = true;
+};
+
+// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
+// https://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+jQuery.Event.prototype = {
+	constructor: jQuery.Event,
+	isDefaultPrevented: returnFalse,
+	isPropagationStopped: returnFalse,
+	isImmediatePropagationStopped: returnFalse,
+	isSimulated: false,
+
+	preventDefault: function() {
+		var e = this.originalEvent;
+
+		this.isDefaultPrevented = returnTrue;
+
+		if ( e && !this.isSimulated ) {
+			e.preventDefault();
+		}
+	},
+	stopPropagation: function() {
+		var e = this.originalEvent;
+
+		this.isPropagationStopped = returnTrue;
+
+		if ( e && !this.isSimulated ) {
+			e.stopPropagation();
+		}
+	},
+	stopImmediatePropagation: function() {
+		var e = this.originalEvent;
+
+		this.isImmediatePropagationStopped = returnTrue;
+
+		if ( e && !this.isSimulated ) {
+			e.stopImmediatePropagation();
+		}
+
+		this.stopPropagation();
+	}
+};
+
+// Includes all common event props including KeyEvent and MouseEvent specific props
+jQuery.each( {
+	altKey: true,
+	bubbles: true,
+	cancelable: true,
+	changedTouches: true,
+	ctrlKey: true,
+	detail: true,
+	eventPhase: true,
+	metaKey: true,
+	pageX: true,
+	pageY: true,
+	shiftKey: true,
+	view: true,
+	"char": true,
+	charCode: true,
+	key: true,
+	keyCode: true,
+	button: true,
+	buttons: true,
+	clientX: true,
+	clientY: true,
+	offsetX: true,
+	offsetY: true,
+	pointerId: true,
+	pointerType: true,
+	screenX: true,
+	screenY: true,
+	targetTouches: true,
+	toElement: true,
+	touches: true,
+
+	which: function( event ) {
+		var button = event.button;
+
+		// Add which for key events
+		if ( event.which == null && rkeyEvent.test( event.type ) ) {
+			return event.charCode != null ? event.charCode : event.keyCode;
+		}
+
+		// Add which for click: 1 === left; 2 === middle; 3 === right
+		if ( !event.which && button !== undefined && rmouseEvent.test( event.type ) ) {
+			if ( button & 1 ) {
+				return 1;
+			}
+
+			if ( button & 2 ) {
+				return 3;
+			}
+
+			if ( button & 4 ) {
+				return 2;
+			}
+
+			return 0;
+		}
+
+		return event.which;
+	}
+}, jQuery.event.addProp );
+
+// Create mouseenter/leave events using mouseover/out and event-time checks
+// so that event delegation works in jQuery.
+// Do the same for pointerenter/pointerleave and pointerover/pointerout
+//
+// Support: Safari 7 only
+// Safari sends mouseenter too often; see:
+// https://bugs.chromium.org/p/chromium/issues/detail?id=470258
+// for the description of the bug (it existed in older Chrome versions as well).
+jQuery.each( {
+	mouseenter: "mouseover",
+	mouseleave: "mouseout",
+	pointerenter: "pointerover",
+	pointerleave: "pointerout"
+}, function( orig, fix ) {
+	jQuery.event.special[ orig ] = {
+		delegateType: fix,
+		bindType: fix,
+
+		handle: function( event ) {
+			var ret,
+				target = this,
+				related = event.relatedTarget,
+				handleObj = event.handleObj;
+
+			// For mouseenter/leave call the handler if related is outside the target.
+			// NB: No relatedTarget if the mouse left/entered the browser window
+			if ( !related || ( related !== target && !jQuery.contains( target, related ) ) ) {
+				event.type = handleObj.origType;
+				ret = handleObj.handler.apply( this, arguments );
+				event.type = fix;
+			}
+			return ret;
+		}
+	};
+} );
+
+jQuery.fn.extend( {
+
+	on: function( types, selector, data, fn ) {
+		return on( this, types, selector, data, fn );
+	},
+	one: function( types, selector, data, fn ) {
+		return on( this, types, selector, data, fn, 1 );
+	},
+	off: function( types, selector, fn ) {
+		var handleObj, type;
+		if ( types && types.preventDefault && types.handleObj ) {
+
+			// ( event )  dispatched jQuery.Event
+			handleObj = types.handleObj;
+			jQuery( types.delegateTarget ).off(
+				handleObj.namespace ?
+					handleObj.origType + "." + handleObj.namespace :
+					handleObj.origType,
+				handleObj.selector,
+				handleObj.handler
+			);
+			return this;
+		}
+		if ( typeof types === "object" ) {
+
+			// ( types-object [, selector] )
+			for ( type in types ) {
+				this.off( type, selector, types[ type ] );
+			}
+			return this;
+		}
+		if ( selector === false || typeof selector === "function" ) {
+
+			// ( types [, fn] )
+			fn = selector;
+			selector = undefined;
+		}
+		if ( fn === false ) {
+			fn = returnFalse;
+		}
+		return this.each( function() {
+			jQuery.event.remove( this, types, fn, selector );
+		} );
+	}
+} );
+
+
+var
+
+	/* eslint-disable max-len */
+
+	// See https://github.com/eslint/eslint/issues/3229
+	rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,
+
+	/* eslint-enable */
+
+	// Support: IE <=10 - 11, Edge 12 - 13
+	// In IE/Edge using regex groups here causes severe slowdowns.
+	// See https://connect.microsoft.com/IE/feedback/details/1736512/
+	rnoInnerhtml = /<script|<style|<link/i,
+
+	// checked="checked" or checked
+	rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
+	rscriptTypeMasked = /^true\/(.*)/,
+	rcleanScript = /^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;
+
+// Prefer a tbody over its parent table for containing new rows
+function manipulationTarget( elem, content ) {
+	if ( nodeName( elem, "table" ) &&
+		nodeName( content.nodeType !== 11 ? content : content.firstChild, "tr" ) ) {
+
+		return jQuery( ">tbody", elem )[ 0 ] || elem;
+	}
+
+	return elem;
+}
+
+// Replace/restore the type attribute of script elements for safe DOM manipulation
+function disableScript( elem ) {
+	elem.type = ( elem.getAttribute( "type" ) !== null ) + "/" + elem.type;
+	return elem;
+}
+function restoreScript( elem ) {
+	var match = rscriptTypeMasked.exec( elem.type );
+
+	if ( match ) {
+		elem.type = match[ 1 ];
+	} else {
+		elem.removeAttribute( "type" );
+	}
+
+	return elem;
+}
+
+function cloneCopyEvent( src, dest ) {
+	var i, l, type, pdataOld, pdataCur, udataOld, udataCur, events;
+
+	if ( dest.nodeType !== 1 ) {
+		return;
+	}
+
+	// 1. Copy private data: events, handlers, etc.
+	if ( dataPriv.hasData( src ) ) {
+		pdataOld = dataPriv.access( src );
+		pdataCur = dataPriv.set( dest, pdataOld );
+		events = pdataOld.events;
+
+		if ( events ) {
+			delete pdataCur.handle;
+			pdataCur.events = {};
+
+			for ( type in events ) {
+				for ( i = 0, l = events[ type ].length; i < l; i++ ) {
+					jQuery.event.add( dest, type, events[ type ][ i ] );
+				}
+			}
+		}
+	}
+
+	// 2. Copy user data
+	if ( dataUser.hasData( src ) ) {
+		udataOld = dataUser.access( src );
+		udataCur = jQuery.extend( {}, udataOld );
+
+		dataUser.set( dest, udataCur );
+	}
+}
+
+// Fix IE bugs, see support tests
+function fixInput( src, dest ) {
+	var nodeName = dest.nodeName.toLowerCase();
+
+	// Fails to persist the checked state of a cloned checkbox or radio button.
+	if ( nodeName === "input" && rcheckableType.test( src.type ) ) {
+		dest.checked = src.checked;
+
+	// Fails to return the selected option to the default selected state when cloning options
+	} else if ( nodeName === "input" || nodeName === "textarea" ) {
+		dest.defaultValue = src.defaultValue;
+	}
+}
+
+function domManip( collection, args, callback, ignored ) {
+
+	// Flatten any nested arrays
+	args = concat.apply( [], args );
+
+	var fragment, first, scripts, hasScripts, node, doc,
+		i = 0,
+		l = collection.length,
+		iNoClone = l - 1,
+		value = args[ 0 ],
+		isFunction = jQuery.isFunction( value );
+
+	// We can't cloneNode fragments that contain checked, in WebKit
+	if ( isFunction ||
+			( l > 1 && typeof value === "string" &&
+				!support.checkClone && rchecked.test( value ) ) ) {
+		return collection.each( function( index ) {
+			var self = collection.eq( index );
+			if ( isFunction ) {
+				args[ 0 ] = value.call( this, index, self.html() );
+			}
+			domManip( self, args, callback, ignored );
+		} );
+	}
+
+	if ( l ) {
+		fragment = buildFragment( args, collection[ 0 ].ownerDocument, false, collection, ignored );
+		first = fragment.firstChild;
+
+		if ( fragment.childNodes.length === 1 ) {
+			fragment = first;
+		}
+
+		// Require either new content or an interest in ignored elements to invoke the callback
+		if ( first || ignored ) {
+			scripts = jQuery.map( getAll( fragment, "script" ), disableScript );
+			hasScripts = scripts.length;
+
+			// Use the original fragment for the last item
+			// instead of the first because it can end up
+			// being emptied incorrectly in certain situations (#8070).
+			for ( ; i < l; i++ ) {
+				node = fragment;
+
+				if ( i !== iNoClone ) {
+					node = jQuery.clone( node, true, true );
+
+					// Keep references to cloned scripts for later restoration
+					if ( hasScripts ) {
+
+						// Support: Android <=4.0 only, PhantomJS 1 only
+						// push.apply(_, arraylike) throws on ancient WebKit
+						jQuery.merge( scripts, getAll( node, "script" ) );
+					}
+				}
+
+				callback.call( collection[ i ], node, i );
+			}
+
+			if ( hasScripts ) {
+				doc = scripts[ scripts.length - 1 ].ownerDocument;
+
+				// Reenable scripts
+				jQuery.map( scripts, restoreScript );
+
+				// Evaluate executable scripts on first document insertion
+				for ( i = 0; i < hasScripts; i++ ) {
+					node = scripts[ i ];
+					if ( rscriptType.test( node.type || "" ) &&
+						!dataPriv.access( node, "globalEval" ) &&
+						jQuery.contains( doc, node ) ) {
+
+						if ( node.src ) {
+
+							// Optional AJAX dependency, but won't run scripts if not present
+							if ( jQuery._evalUrl ) {
+								jQuery._evalUrl( node.src );
+							}
+						} else {
+							DOMEval( node.textContent.replace( rcleanScript, "" ), doc );
+						}
+					}
+				}
+			}
+		}
+	}
+
+	return collection;
+}
+
+function remove( elem, selector, keepData ) {
+	var node,
+		nodes = selector ? jQuery.filter( selector, elem ) : elem,
+		i = 0;
+
+	for ( ; ( node = nodes[ i ] ) != null; i++ ) {
+		if ( !keepData && node.nodeType === 1 ) {
+			jQuery.cleanData( getAll( node ) );
+		}
+
+		if ( node.parentNode ) {
+			if ( keepData && jQuery.contains( node.ownerDocument, node ) ) {
+				setGlobalEval( getAll( node, "script" ) );
+			}
+			node.parentNode.removeChild( node );
+		}
+	}
+
+	return elem;
+}
+
+jQuery.extend( {
+	htmlPrefilter: function( html ) {
+		return html.replace( rxhtmlTag, "<$1></$2>" );
+	},
+
+	clone: function( elem, dataAndEvents, deepDataAndEvents ) {
+		var i, l, srcElements, destElements,
+			clone = elem.cloneNode( true ),
+			inPage = jQuery.contains( elem.ownerDocument, elem );
+
+		// Fix IE cloning issues
+		if ( !support.noCloneChecked && ( elem.nodeType === 1 || elem.nodeType === 11 ) &&
+				!jQuery.isXMLDoc( elem ) ) {
+
+			// We eschew Sizzle here for performance reasons: https://jsperf.com/getall-vs-sizzle/2
+			destElements = getAll( clone );
+			srcElements = getAll( elem );
+
+			for ( i = 0, l = srcElements.length; i < l; i++ ) {
+				fixInput( srcElements[ i ], destElements[ i ] );
+			}
+		}
+
+		// Copy the events from the original to the clone
+		if ( dataAndEvents ) {
+			if ( deepDataAndEvents ) {
+				srcElements = srcElements || getAll( elem );
+				destElements = destElements || getAll( clone );
+
+				for ( i = 0, l = srcElements.length; i < l; i++ ) {
+					cloneCopyEvent( srcElements[ i ], destElements[ i ] );
+				}
+			} else {
+				cloneCopyEvent( elem, clone );
+			}
+		}
+
+		// Preserve script evaluation history
+		destElements = getAll( clone, "script" );
+		if ( destElements.length > 0 ) {
+			setGlobalEval( destElements, !inPage && getAll( elem, "script" ) );
+		}
+
+		// Return the cloned set
+		return clone;
+	},
+
+	cleanData: function( elems ) {
+		var data, elem, type,
+			special = jQuery.event.special,
+			i = 0;
+
+		for ( ; ( elem = elems[ i ] ) !== undefined; i++ ) {
+			if ( acceptData( elem ) ) {
+				if ( ( data = elem[ dataPriv.expando ] ) ) {
+					if ( data.events ) {
+						for ( type in data.events ) {
+							if ( special[ type ] ) {
+								jQuery.event.remove( elem, type );
+
+							// This is a shortcut to avoid jQuery.event.remove's overhead
+							} else {
+								jQuery.removeEvent( elem, type, data.handle );
+							}
+						}
+					}
+
+					// Support: Chrome <=35 - 45+
+					// Assign undefined instead of using delete, see Data#remove
+					elem[ dataPriv.expando ] = undefined;
+				}
+				if ( elem[ dataUser.expando ] ) {
+
+					// Support: Chrome <=35 - 45+
+					// Assign undefined instead of using delete, see Data#remove
+					elem[ dataUser.expando ] = undefined;
+				}
+			}
+		}
+	}
+} );
+
+jQuery.fn.extend( {
+	detach: function( selector ) {
+		return remove( this, selector, true );
+	},
+
+	remove: function( selector ) {
+		return remove( this, selector );
+	},
+
+	text: function( value ) {
+		return access( this, function( value ) {
+			return value === undefined ?
+				jQuery.text( this ) :
+				this.empty().each( function() {
+					if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+						this.textContent = value;
+					}
+				} );
+		}, null, value, arguments.length );
+	},
+
+	append: function() {
+		return domManip( this, arguments, function( elem ) {
+			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+				var target = manipulationTarget( this, elem );
+				target.appendChild( elem );
+			}
+		} );
+	},
+
+	prepend: function() {
+		return domManip( this, arguments, function( elem ) {
+			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+				var target = manipulationTarget( this, elem );
+				target.insertBefore( elem, target.firstChild );
+			}
+		} );
+	},
+
+	before: function() {
+		return domManip( this, arguments, function( elem ) {
+			if ( this.parentNode ) {
+				this.parentNode.insertBefore( elem, this );
+			}
+		} );
+	},
+
+	after: function() {
+		return domManip( this, arguments, function( elem ) {
+			if ( this.parentNode ) {
+				this.parentNode.insertBefore( elem, this.nextSibling );
+			}
+		} );
+	},
+
+	empty: function() {
+		var elem,
+			i = 0;
+
+		for ( ; ( elem = this[ i ] ) != null; i++ ) {
+			if ( elem.nodeType === 1 ) {
+
+				// Prevent memory leaks
+				jQuery.cleanData( getAll( elem, false ) );
+
+				// Remove any remaining nodes
+				elem.textContent = "";
+			}
+		}
+
+		return this;
+	},
+
+	clone: function( dataAndEvents, deepDataAndEvents ) {
+		dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
+		deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
+
+		return this.map( function() {
+			return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
+		} );
+	},
+
+	html: function( value ) {
+		return access( this, function( value ) {
+			var elem = this[ 0 ] || {},
+				i = 0,
+				l = this.length;
+
+			if ( value === undefined && elem.nodeType === 1 ) {
+				return elem.innerHTML;
+			}
+
+			// See if we can take a shortcut and just use innerHTML
+			if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
+				!wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) {
+
+				value = jQuery.htmlPrefilter( value );
+
+				try {
+					for ( ; i < l; i++ ) {
+						elem = this[ i ] || {};
+
+						// Remove element nodes and prevent memory leaks
+						if ( elem.nodeType === 1 ) {
+							jQuery.cleanData( getAll( elem, false ) );
+							elem.innerHTML = value;
+						}
+					}
+
+					elem = 0;
+
+				// If using innerHTML throws an exception, use the fallback method
+				} catch ( e ) {}
+			}
+
+			if ( elem ) {
+				this.empty().append( value );
+			}
+		}, null, value, arguments.length );
+	},
+
+	replaceWith: function() {
+		var ignored = [];
+
+		// Make the changes, replacing each non-ignored context element with the new content
+		return domManip( this, arguments, function( elem ) {
+			var parent = this.parentNode;
+
+			if ( jQuery.inArray( this, ignored ) < 0 ) {
+				jQuery.cleanData( getAll( this ) );
+				if ( parent ) {
+					parent.replaceChild( elem, this );
+				}
+			}
+
+		// Force callback invocation
+		}, ignored );
+	}
+} );
+
+jQuery.each( {
+	appendTo: "append",
+	prependTo: "prepend",
+	insertBefore: "before",
+	insertAfter: "after",
+	replaceAll: "replaceWith"
+}, function( name, original ) {
+	jQuery.fn[ name ] = function( selector ) {
+		var elems,
+			ret = [],
+			insert = jQuery( selector ),
+			last = insert.length - 1,
+			i = 0;
+
+		for ( ; i <= last; i++ ) {
+			elems = i === last ? this : this.clone( true );
+			jQuery( insert[ i ] )[ original ]( elems );
+
+			// Support: Android <=4.0 only, PhantomJS 1 only
+			// .get() because push.apply(_, arraylike) throws on ancient WebKit
+			push.apply( ret, elems.get() );
+		}
+
+		return this.pushStack( ret );
+	};
+} );
+var rmargin = ( /^margin/ );
+
+var rnumnonpx = new RegExp( "^(" + pnum + ")(?!px)[a-z%]+$", "i" );
+
+var getStyles = function( elem ) {
+
+		// Support: IE <=11 only, Firefox <=30 (#15098, #14150)
+		// IE throws on elements created in popups
+		// FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
+		var view = elem.ownerDocument.defaultView;
+
+		if ( !view || !view.opener ) {
+			view = window;
+		}
+
+		return view.getComputedStyle( elem );
+	};
+
+
+
+( function() {
+
+	// Executing both pixelPosition & boxSizingReliable tests require only one layout
+	// so they're executed at the same time to save the second computation.
+	function computeStyleTests() {
+
+		// This is a singleton, we need to execute it only once
+		if ( !div ) {
+			return;
+		}
+
+		div.style.cssText =
+			"box-sizing:border-box;" +
+			"position:relative;display:block;" +
+			"margin:auto;border:1px;padding:1px;" +
+			"top:1%;width:50%";
+		div.innerHTML = "";
+		documentElement.appendChild( container );
+
+		var divStyle = window.getComputedStyle( div );
+		pixelPositionVal = divStyle.top !== "1%";
+
+		// Support: Android 4.0 - 4.3 only, Firefox <=3 - 44
+		reliableMarginLeftVal = divStyle.marginLeft === "2px";
+		boxSizingReliableVal = divStyle.width === "4px";
+
+		// Support: Android 4.0 - 4.3 only
+		// Some styles come back with percentage values, even though they shouldn't
+		div.style.marginRight = "50%";
+		pixelMarginRightVal = divStyle.marginRight === "4px";
+
+		documentElement.removeChild( container );
+
+		// Nullify the div so it wouldn't be stored in the memory and
+		// it will also be a sign that checks already performed
+		div = null;
+	}
+
+	var pixelPositionVal, boxSizingReliableVal, pixelMarginRightVal, reliableMarginLeftVal,
+		container = document.createElement( "div" ),
+		div = document.createElement( "div" );
+
+	// Finish early in limited (non-browser) environments
+	if ( !div.style ) {
+		return;
+	}
+
+	// Support: IE <=9 - 11 only
+	// Style of cloned element affects source element cloned (#8908)
+	div.style.backgroundClip = "content-box";
+	div.cloneNode( true ).style.backgroundClip = "";
+	support.clearCloneStyle = div.style.backgroundClip === "content-box";
+
+	container.style.cssText = "border:0;width:8px;height:0;top:0;left:-9999px;" +
+		"padding:0;margin-top:1px;position:absolute";
+	container.appendChild( div );
+
+	jQuery.extend( support, {
+		pixelPosition: function() {
+			computeStyleTests();
+			return pixelPositionVal;
+		},
+		boxSizingReliable: function() {
+			computeStyleTests();
+			return boxSizingReliableVal;
+		},
+		pixelMarginRight: function() {
+			computeStyleTests();
+			return pixelMarginRightVal;
+		},
+		reliableMarginLeft: function() {
+			computeStyleTests();
+			return reliableMarginLeftVal;
+		}
+	} );
+} )();
+
+
+function curCSS( elem, name, computed ) {
+	var width, minWidth, maxWidth, ret,
+
+		// Support: Firefox 51+
+		// Retrieving style before computed somehow
+		// fixes an issue with getting wrong values
+		// on detached elements
+		style = elem.style;
+
+	computed = computed || getStyles( elem );
+
+	// getPropertyValue is needed for:
+	//   .css('filter') (IE 9 only, #12537)
+	//   .css('--customProperty) (#3144)
+	if ( computed ) {
+		ret = computed.getPropertyValue( name ) || computed[ name ];
+
+		if ( ret === "" && !jQuery.contains( elem.ownerDocument, elem ) ) {
+			ret = jQuery.style( elem, name );
+		}
+
+		// A tribute to the "awesome hack by Dean Edwards"
+		// Android Browser returns percentage for some values,
+		// but width seems to be reliably pixels.
+		// This is against the CSSOM draft spec:
+		// https://drafts.csswg.org/cssom/#resolved-values
+		if ( !support.pixelMarginRight() && rnumnonpx.test( ret ) && rmargin.test( name ) ) {
+
+			// Remember the original values
+			width = style.width;
+			minWidth = style.minWidth;
+			maxWidth = style.maxWidth;
+
+			// Put in the new values to get a computed value out
+			style.minWidth = style.maxWidth = style.width = ret;
+			ret = computed.width;
+
+			// Revert the changed values
+			style.width = width;
+			style.minWidth = minWidth;
+			style.maxWidth = maxWidth;
+		}
+	}
+
+	return ret !== undefined ?
+
+		// Support: IE <=9 - 11 only
+		// IE returns zIndex value as an integer.
+		ret + "" :
+		ret;
+}
+
+
+function addGetHookIf( conditionFn, hookFn ) {
+
+	// Define the hook, we'll check on the first run if it's really needed.
+	return {
+		get: function() {
+			if ( conditionFn() ) {
+
+				// Hook not needed (or it's not possible to use it due
+				// to missing dependency), remove it.
+				delete this.get;
+				return;
+			}
+
+			// Hook needed; redefine it so that the support test is not executed again.
+			return ( this.get = hookFn ).apply( this, arguments );
+		}
+	};
+}
+
+
+var
+
+	// Swappable if display is none or starts with table
+	// except "table", "table-cell", or "table-caption"
+	// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
+	rdisplayswap = /^(none|table(?!-c[ea]).+)/,
+	rcustomProp = /^--/,
+	cssShow = { position: "absolute", visibility: "hidden", display: "block" },
+	cssNormalTransform = {
+		letterSpacing: "0",
+		fontWeight: "400"
+	},
+
+	cssPrefixes = [ "Webkit", "Moz", "ms" ],
+	emptyStyle = document.createElement( "div" ).style;
+
+// Return a css property mapped to a potentially vendor prefixed property
+function vendorPropName( name ) {
+
+	// Shortcut for names that are not vendor prefixed
+	if ( name in emptyStyle ) {
+		return name;
+	}
+
+	// Check for vendor prefixed names
+	var capName = name[ 0 ].toUpperCase() + name.slice( 1 ),
+		i = cssPrefixes.length;
+
+	while ( i-- ) {
+		name = cssPrefixes[ i ] + capName;
+		if ( name in emptyStyle ) {
+			return name;
+		}
+	}
+}
+
+// Return a property mapped along what jQuery.cssProps suggests or to
+// a vendor prefixed property.
+function finalPropName( name ) {
+	var ret = jQuery.cssProps[ name ];
+	if ( !ret ) {
+		ret = jQuery.cssProps[ name ] = vendorPropName( name ) || name;
+	}
+	return ret;
+}
+
+function setPositiveNumber( elem, value, subtract ) {
+
+	// Any relative (+/-) values have already been
+	// normalized at this point
+	var matches = rcssNum.exec( value );
+	return matches ?
+
+		// Guard against undefined "subtract", e.g., when used as in cssHooks
+		Math.max( 0, matches[ 2 ] - ( subtract || 0 ) ) + ( matches[ 3 ] || "px" ) :
+		value;
+}
+
+function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
+	var i,
+		val = 0;
+
+	// If we already have the right measurement, avoid augmentation
+	if ( extra === ( isBorderBox ? "border" : "content" ) ) {
+		i = 4;
+
+	// Otherwise initialize for horizontal or vertical properties
+	} else {
+		i = name === "width" ? 1 : 0;
+	}
+
+	for ( ; i < 4; i += 2 ) {
+
+		// Both box models exclude margin, so add it if we want it
+		if ( extra === "margin" ) {
+			val += jQuery.css( elem, extra + cssExpand[ i ], true, styles );
+		}
+
+		if ( isBorderBox ) {
+
+			// border-box includes padding, so remove it if we want content
+			if ( extra === "content" ) {
+				val -= jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
+			}
+
+			// At this point, extra isn't border nor margin, so remove border
+			if ( extra !== "margin" ) {
+				val -= jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
+			}
+		} else {
+
+			// At this point, extra isn't content, so add padding
+			val += jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
+
+			// At this point, extra isn't content nor padding, so add border
+			if ( extra !== "padding" ) {
+				val += jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
+			}
+		}
+	}
+
+	return val;
+}
+
+function getWidthOrHeight( elem, name, extra ) {
+
+	// Start with computed style
+	var valueIsBorderBox,
+		styles = getStyles( elem ),
+		val = curCSS( elem, name, styles ),
+		isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
+
+	// Computed unit is not pixels. Stop here and return.
+	if ( rnumnonpx.test( val ) ) {
+		return val;
+	}
+
+	// Check for style in case a browser which returns unreliable values
+	// for getComputedStyle silently falls back to the reliable elem.style
+	valueIsBorderBox = isBorderBox &&
+		( support.boxSizingReliable() || val === elem.style[ name ] );
+
+	// Fall back to offsetWidth/Height when value is "auto"
+	// This happens for inline elements with no explicit setting (gh-3571)
+	if ( val === "auto" ) {
+		val = elem[ "offset" + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
+	}
+
+	// Normalize "", auto, and prepare for extra
+	val = parseFloat( val ) || 0;
+
+	// Use the active box-sizing model to add/subtract irrelevant styles
+	return ( val +
+		augmentWidthOrHeight(
+			elem,
+			name,
+			extra || ( isBorderBox ? "border" : "content" ),
+			valueIsBorderBox,
+			styles
+		)
+	) + "px";
+}
+
+jQuery.extend( {
+
+	// Add in style property hooks for overriding the default
+	// behavior of getting and setting a style property
+	cssHooks: {
+		opacity: {
+			get: function( elem, computed ) {
+				if ( computed ) {
+
+					// We should always get a number back from opacity
+					var ret = curCSS( elem, "opacity" );
+					return ret === "" ? "1" : ret;
+				}
+			}
+		}
+	},
+
+	// Don't automatically add "px" to these possibly-unitless properties
+	cssNumber: {
+		"animationIterationCount": true,
+		"columnCount": true,
+		"fillOpacity": true,
+		"flexGrow": true,
+		"flexShrink": true,
+		"fontWeight": true,
+		"lineHeight": true,
+		"opacity": true,
+		"order": true,
+		"orphans": true,
+		"widows": true,
+		"zIndex": true,
+		"zoom": true
+	},
+
+	// Add in properties whose names you wish to fix before
+	// setting or getting the value
+	cssProps: {
+		"float": "cssFloat"
+	},
+
+	// Get and set the style property on a DOM Node
+	style: function( elem, name, value, extra ) {
+
+		// Don't set styles on text and comment nodes
+		if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
+			return;
+		}
+
+		// Make sure that we're working with the right name
+		var ret, type, hooks,
+			origName = jQuery.camelCase( name ),
+			isCustomProp = rcustomProp.test( name ),
+			style = elem.style;
+
+		// Make sure that we're working with the right name. We don't
+		// want to query the value if it is a CSS custom property
+		// since they are user-defined.
+		if ( !isCustomProp ) {
+			name = finalPropName( origName );
+		}
+
+		// Gets hook for the prefixed version, then unprefixed version
+		hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
+
+		// Check if we're setting a value
+		if ( value !== undefined ) {
+			type = typeof value;
+
+			// Convert "+=" or "-=" to relative numbers (#7345)
+			if ( type === "string" && ( ret = rcssNum.exec( value ) ) && ret[ 1 ] ) {
+				value = adjustCSS( elem, name, ret );
+
+				// Fixes bug #9237
+				type = "number";
+			}
+
+			// Make sure that null and NaN values aren't set (#7116)
+			if ( value == null || value !== value ) {
+				return;
+			}
+
+			// If a number was passed in, add the unit (except for certain CSS properties)
+			if ( type === "number" ) {
+				value += ret && ret[ 3 ] || ( jQuery.cssNumber[ origName ] ? "" : "px" );
+			}
+
+			// background-* props affect original clone's values
+			if ( !support.clearCloneStyle && value === "" && name.indexOf( "background" ) === 0 ) {
+				style[ name ] = "inherit";
+			}
+
+			// If a hook was provided, use that value, otherwise just set the specified value
+			if ( !hooks || !( "set" in hooks ) ||
+				( value = hooks.set( elem, value, extra ) ) !== undefined ) {
+
+				if ( isCustomProp ) {
+					style.setProperty( name, value );
+				} else {
+					style[ name ] = value;
+				}
+			}
+
+		} else {
+
+			// If a hook was provided get the non-computed value from there
+			if ( hooks && "get" in hooks &&
+				( ret = hooks.get( elem, false, extra ) ) !== undefined ) {
+
+				return ret;
+			}
+
+			// Otherwise just get the value from the style object
+			return style[ name ];
+		}
+	},
+
+	css: function( elem, name, extra, styles ) {
+		var val, num, hooks,
+			origName = jQuery.camelCase( name ),
+			isCustomProp = rcustomProp.test( name );
+
+		// Make sure that we're working with the right name. We don't
+		// want to modify the value if it is a CSS custom property
+		// since they are user-defined.
+		if ( !isCustomProp ) {
+			name = finalPropName( origName );
+		}
+
+		// Try prefixed name followed by the unprefixed name
+		hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
+
+		// If a hook was provided get the computed value from there
+		if ( hooks && "get" in hooks ) {
+			val = hooks.get( elem, true, extra );
+		}
+
+		// Otherwise, if a way to get the computed value exists, use that
+		if ( val === undefined ) {
+			val = curCSS( elem, name, styles );
+		}
+
+		// Convert "normal" to computed value
+		if ( val === "normal" && name in cssNormalTransform ) {
+			val = cssNormalTransform[ name ];
+		}
+
+		// Make numeric if forced or a qualifier was provided and val looks numeric
+		if ( extra === "" || extra ) {
+			num = parseFloat( val );
+			return extra === true || isFinite( num ) ? num || 0 : val;
+		}
+
+		return val;
+	}
+} );
+
+jQuery.each( [ "height", "width" ], function( i, name ) {
+	jQuery.cssHooks[ name ] = {
+		get: function( elem, computed, extra ) {
+			if ( computed ) {
+
+				// Certain elements can have dimension info if we invisibly show them
+				// but it must have a current display style that would benefit
+				return rdisplayswap.test( jQuery.css( elem, "display" ) ) &&
+
+					// Support: Safari 8+
+					// Table columns in Safari have non-zero offsetWidth & zero
+					// getBoundingClientRect().width unless display is changed.
+					// Support: IE <=11 only
+					// Running getBoundingClientRect on a disconnected node
+					// in IE throws an error.
+					( !elem.getClientRects().length || !elem.getBoundingClientRect().width ) ?
+						swap( elem, cssShow, function() {
+							return getWidthOrHeight( elem, name, extra );
+						} ) :
+						getWidthOrHeight( elem, name, extra );
+			}
+		},
+
+		set: function( elem, value, extra ) {
+			var matches,
+				styles = extra && getStyles( elem ),
+				subtract = extra && augmentWidthOrHeight(
+					elem,
+					name,
+					extra,
+					jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
+					styles
+				);
+
+			// Convert to pixels if value adjustment is needed
+			if ( subtract && ( matches = rcssNum.exec( value ) ) &&
+				( matches[ 3 ] || "px" ) !== "px" ) {
+
+				elem.style[ name ] = value;
+				value = jQuery.css( elem, name );
+			}
+
+			return setPositiveNumber( elem, value, subtract );
+		}
+	};
+} );
+
+jQuery.cssHooks.marginLeft = addGetHookIf( support.reliableMarginLeft,
+	function( elem, computed ) {
+		if ( computed ) {
+			return ( parseFloat( curCSS( elem, "marginLeft" ) ) ||
+				elem.getBoundingClientRect().left -
+					swap( elem, { marginLeft: 0 }, function() {
+						return elem.getBoundingClientRect().left;
+					} )
+				) + "px";
+		}
+	}
+);
+
+// These hooks are used by animate to expand properties
+jQuery.each( {
+	margin: "",
+	padding: "",
+	border: "Width"
+}, function( prefix, suffix ) {
+	jQuery.cssHooks[ prefix + suffix ] = {
+		expand: function( value ) {
+			var i = 0,
+				expanded = {},
+
+				// Assumes a single number if not a string
+				parts = typeof value === "string" ? value.split( " " ) : [ value ];
+
+			for ( ; i < 4; i++ ) {
+				expanded[ prefix + cssExpand[ i ] + suffix ] =
+					parts[ i ] || parts[ i - 2 ] || parts[ 0 ];
+			}
+
+			return expanded;
+		}
+	};
+
+	if ( !rmargin.test( prefix ) ) {
+		jQuery.cssHooks[ prefix + suffix ].set = setPositiveNumber;
+	}
+} );
+
+jQuery.fn.extend( {
+	css: function( name, value ) {
+		return access( this, function( elem, name, value ) {
+			var styles, len,
+				map = {},
+				i = 0;
+
+			if ( Array.isArray( name ) ) {
+				styles = getStyles( elem );
+				len = name.length;
+
+				for ( ; i < len; i++ ) {
+					map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
+				}
+
+				return map;
+			}
+
+			return value !== undefined ?
+				jQuery.style( elem, name, value ) :
+				jQuery.css( elem, name );
+		}, name, value, arguments.length > 1 );
+	}
+} );
+
+
+function Tween( elem, options, prop, end, easing ) {
+	return new Tween.prototype.init( elem, options, prop, end, easing );
+}
+jQuery.Tween = Tween;
+
+Tween.prototype = {
+	constructor: Tween,
+	init: function( elem, options, prop, end, easing, unit ) {
+		this.elem = elem;
+		this.prop = prop;
+		this.easing = easing || jQuery.easing._default;
+		this.options = options;
+		this.start = this.now = this.cur();
+		this.end = end;
+		this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
+	},
+	cur: function() {
+		var hooks = Tween.propHooks[ this.prop ];
+
+		return hooks && hooks.get ?
+			hooks.get( this ) :
+			Tween.propHooks._default.get( this );
+	},
+	run: function( percent ) {
+		var eased,
+			hooks = Tween.propHooks[ this.prop ];
+
+		if ( this.options.duration ) {
+			this.pos = eased = jQuery.easing[ this.easing ](
+				percent, this.options.duration * percent, 0, 1, this.options.duration
+			);
+		} else {
+			this.pos = eased = percent;
+		}
+		this.now = ( this.end - this.start ) * eased + this.start;
+
+		if ( this.options.step ) {
+			this.options.step.call( this.elem, this.now, this );
+		}
+
+		if ( hooks && hooks.set ) {
+			hooks.set( this );
+		} else {
+			Tween.propHooks._default.set( this );
+		}
+		return this;
+	}
+};
+
+Tween.prototype.init.prototype = Tween.prototype;
+
+Tween.propHooks = {
+	_default: {
+		get: function( tween ) {
+			var result;
+
+			// Use a property on the element directly when it is not a DOM element,
+			// or when there is no matching style property that exists.
+			if ( tween.elem.nodeType !== 1 ||
+				tween.elem[ tween.prop ] != null && tween.elem.style[ tween.prop ] == null ) {
+				return tween.elem[ tween.prop ];
+			}
+
+			// Passing an empty string as a 3rd parameter to .css will automatically
+			// attempt a parseFloat and fallback to a string if the parse fails.
+			// Simple values such as "10px" are parsed to Float;
+			// complex values such as "rotate(1rad)" are returned as-is.
+			result = jQuery.css( tween.elem, tween.prop, "" );
+
+			// Empty strings, null, undefined and "auto" are converted to 0.
+			return !result || result === "auto" ? 0 : result;
+		},
+		set: function( tween ) {
+
+			// Use step hook for back compat.
+			// Use cssHook if its there.
+			// Use .style if available and use plain properties where available.
+			if ( jQuery.fx.step[ tween.prop ] ) {
+				jQuery.fx.step[ tween.prop ]( tween );
+			} else if ( tween.elem.nodeType === 1 &&
+				( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null ||
+					jQuery.cssHooks[ tween.prop ] ) ) {
+				jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );
+			} else {
+				tween.elem[ tween.prop ] = tween.now;
+			}
+		}
+	}
+};
+
+// Support: IE <=9 only
+// Panic based approach to setting things on disconnected nodes
+Tween.propHooks.scrollTop = Tween.propHooks.scrollLeft = {
+	set: function( tween ) {
+		if ( tween.elem.nodeType && tween.elem.parentNode ) {
+			tween.elem[ tween.prop ] = tween.now;
+		}
+	}
+};
+
+jQuery.easing = {
+	linear: function( p ) {
+		return p;
+	},
+	swing: function( p ) {
+		return 0.5 - Math.cos( p * Math.PI ) / 2;
+	},
+	_default: "swing"
+};
+
+jQuery.fx = Tween.prototype.init;
+
+// Back compat <1.8 extension point
+jQuery.fx.step = {};
+
+
+
+
+var
+	fxNow, inProgress,
+	rfxtypes = /^(?:toggle|show|hide)$/,
+	rrun = /queueHooks$/;
+
+function schedule() {
+	if ( inProgress ) {
+		if ( document.hidden === false && window.requestAnimationFrame ) {
+			window.requestAnimationFrame( schedule );
+		} else {
+			window.setTimeout( schedule, jQuery.fx.interval );
+		}
+
+		jQuery.fx.tick();
+	}
+}
+
+// Animations created synchronously will run synchronously
+function createFxNow() {
+	window.setTimeout( function() {
+		fxNow = undefined;
+	} );
+	return ( fxNow = jQuery.now() );
+}
+
+// Generate parameters to create a standard animation
+function genFx( type, includeWidth ) {
+	var which,
+		i = 0,
+		attrs = { height: type };
+
+	// If we include width, step value is 1 to do all cssExpand values,
+	// otherwise step value is 2 to skip over Left and Right
+	includeWidth = includeWidth ? 1 : 0;
+	for ( ; i < 4; i += 2 - includeWidth ) {
+		which = cssExpand[ i ];
+		attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
+	}
+
+	if ( includeWidth ) {
+		attrs.opacity = attrs.width = type;
+	}
+
+	return attrs;
+}
+
+function createTween( value, prop, animation ) {
+	var tween,
+		collection = ( Animation.tweeners[ prop ] || [] ).concat( Animation.tweeners[ "*" ] ),
+		index = 0,
+		length = collection.length;
+	for ( ; index < length; index++ ) {
+		if ( ( tween = collection[ index ].call( animation, prop, value ) ) ) {
+
+			// We're done with this property
+			return tween;
+		}
+	}
+}
+
+function defaultPrefilter( elem, props, opts ) {
+	var prop, value, toggle, hooks, oldfire, propTween, restoreDisplay, display,
+		isBox = "width" in props || "height" in props,
+		anim = this,
+		orig = {},
+		style = elem.style,
+		hidden = elem.nodeType && isHiddenWithinTree( elem ),
+		dataShow = dataPriv.get( elem, "fxshow" );
+
+	// Queue-skipping animations hijack the fx hooks
+	if ( !opts.queue ) {
+		hooks = jQuery._queueHooks( elem, "fx" );
+		if ( hooks.unqueued == null ) {
+			hooks.unqueued = 0;
+			oldfire = hooks.empty.fire;
+			hooks.empty.fire = function() {
+				if ( !hooks.unqueued ) {
+					oldfire();
+				}
+			};
+		}
+		hooks.unqueued++;
+
+		anim.always( function() {
+
+			// Ensure the complete handler is called before this completes
+			anim.always( function() {
+				hooks.unqueued--;
+				if ( !jQuery.queue( elem, "fx" ).length ) {
+					hooks.empty.fire();
+				}
+			} );
+		} );
+	}
+
+	// Detect show/hide animations
+	for ( prop in props ) {
+		value = props[ prop ];
+		if ( rfxtypes.test( value ) ) {
+			delete props[ prop ];
+			toggle = toggle || value === "toggle";
+			if ( value === ( hidden ? "hide" : "show" ) ) {
+
+				// Pretend to be hidden if this is a "show" and
+				// there is still data from a stopped show/hide
+				if ( value === "show" && dataShow && dataShow[ prop ] !== undefined ) {
+					hidden = true;
+
+				// Ignore all other no-op show/hide data
+				} else {
+					continue;
+				}
+			}
+			orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );
+		}
+	}
+
+	// Bail out if this is a no-op like .hide().hide()
+	propTween = !jQuery.isEmptyObject( props );
+	if ( !propTween && jQuery.isEmptyObject( orig ) ) {
+		return;
+	}
+
+	// Restrict "overflow" and "display" styles during box animations
+	if ( isBox && elem.nodeType === 1 ) {
+
+		// Support: IE <=9 - 11, Edge 12 - 13
+		// Record all 3 overflow attributes because IE does not infer the shorthand
+		// from identically-valued overflowX and overflowY
+		opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
+
+		// Identify a display type, preferring old show/hide data over the CSS cascade
+		restoreDisplay = dataShow && dataShow.display;
+		if ( restoreDisplay == null ) {
+			restoreDisplay = dataPriv.get( elem, "display" );
+		}
+		display = jQuery.css( elem, "display" );
+		if ( display === "none" ) {
+			if ( restoreDisplay ) {
+				display = restoreDisplay;
+			} else {
+
+				// Get nonempty value(s) by temporarily forcing visibility
+				showHide( [ elem ], true );
+				restoreDisplay = elem.style.display || restoreDisplay;
+				display = jQuery.css( elem, "display" );
+				showHide( [ elem ] );
+			}
+		}
+
+		// Animate inline elements as inline-block
+		if ( display === "inline" || display === "inline-block" && restoreDisplay != null ) {
+			if ( jQuery.css( elem, "float" ) === "none" ) {
+
+				// Restore the original display value at the end of pure show/hide animations
+				if ( !propTween ) {
+					anim.done( function() {
+						style.display = restoreDisplay;
+					} );
+					if ( restoreDisplay == null ) {
+						display = style.display;
+						restoreDisplay = display === "none" ? "" : display;
+					}
+				}
+				style.display = "inline-block";
+			}
+		}
+	}
+
+	if ( opts.overflow ) {
+		style.overflow = "hidden";
+		anim.always( function() {
+			style.overflow = opts.overflow[ 0 ];
+			style.overflowX = opts.overflow[ 1 ];
+			style.overflowY = opts.overflow[ 2 ];
+		} );
+	}
+
+	// Implement show/hide animations
+	propTween = false;
+	for ( prop in orig ) {
+
+		// General show/hide setup for this element animation
+		if ( !propTween ) {
+			if ( dataShow ) {
+				if ( "hidden" in dataShow ) {
+					hidden = dataShow.hidden;
+				}
+			} else {
+				dataShow = dataPriv.access( elem, "fxshow", { display: restoreDisplay } );
+			}
+
+			// Store hidden/visible for toggle so `.stop().toggle()` "reverses"
+			if ( toggle ) {
+				dataShow.hidden = !hidden;
+			}
+
+			// Show elements before animating them
+			if ( hidden ) {
+				showHide( [ elem ], true );
+			}
+
+			/* eslint-disable no-loop-func */
+
+			anim.done( function() {
+
+			/* eslint-enable no-loop-func */
+
+				// The final step of a "hide" animation is actually hiding the element
+				if ( !hidden ) {
+					showHide( [ elem ] );
+				}
+				dataPriv.remove( elem, "fxshow" );
+				for ( prop in orig ) {
+					jQuery.style( elem, prop, orig[ prop ] );
+				}
+			} );
+		}
+
+		// Per-property setup
+		propTween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim );
+		if ( !( prop in dataShow ) ) {
+			dataShow[ prop ] = propTween.start;
+			if ( hidden ) {
+				propTween.end = propTween.start;
+				propTween.start = 0;
+			}
+		}
+	}
+}
+
+function propFilter( props, specialEasing ) {
+	var index, name, easing, value, hooks;
+
+	// camelCase, specialEasing and expand cssHook pass
+	for ( index in props ) {
+		name = jQuery.camelCase( index );
+		easing = specialEasing[ name ];
+		value = props[ index ];
+		if ( Array.isArray( value ) ) {
+			easing = value[ 1 ];
+			value = props[ index ] = value[ 0 ];
+		}
+
+		if ( index !== name ) {
+			props[ name ] = value;
+			delete props[ index ];
+		}
+
+		hooks = jQuery.cssHooks[ name ];
+		if ( hooks && "expand" in hooks ) {
+			value = hooks.expand( value );
+			delete props[ name ];
+
+			// Not quite $.extend, this won't overwrite existing keys.
+			// Reusing 'index' because we have the correct "name"
+			for ( index in value ) {
+				if ( !( index in props ) ) {
+					props[ index ] = value[ index ];
+					specialEasing[ index ] = easing;
+				}
+			}
+		} else {
+			specialEasing[ name ] = easing;
+		}
+	}
+}
+
+function Animation( elem, properties, options ) {
+	var result,
+		stopped,
+		index = 0,
+		length = Animation.prefilters.length,
+		deferred = jQuery.Deferred().always( function() {
+
+			// Don't match elem in the :animated selector
+			delete tick.elem;
+		} ),
+		tick = function() {
+			if ( stopped ) {
+				return false;
+			}
+			var currentTime = fxNow || createFxNow(),
+				remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),
+
+				// Support: Android 2.3 only
+				// Archaic crash bug won't allow us to use `1 - ( 0.5 || 0 )` (#12497)
+				temp = remaining / animation.duration || 0,
+				percent = 1 - temp,
+				index = 0,
+				length = animation.tweens.length;
+
+			for ( ; index < length; index++ ) {
+				animation.tweens[ index ].run( percent );
+			}
+
+			deferred.notifyWith( elem, [ animation, percent, remaining ] );
+
+			// If there's more to do, yield
+			if ( percent < 1 && length ) {
+				return remaining;
+			}
+
+			// If this was an empty animation, synthesize a final progress notification
+			if ( !length ) {
+				deferred.notifyWith( elem, [ animation, 1, 0 ] );
+			}
+
+			// Resolve the animation and report its conclusion
+			deferred.resolveWith( elem, [ animation ] );
+			return false;
+		},
+		animation = deferred.promise( {
+			elem: elem,
+			props: jQuery.extend( {}, properties ),
+			opts: jQuery.extend( true, {
+				specialEasing: {},
+				easing: jQuery.easing._default
+			}, options ),
+			originalProperties: properties,
+			originalOptions: options,
+			startTime: fxNow || createFxNow(),
+			duration: options.duration,
+			tweens: [],
+			createTween: function( prop, end ) {
+				var tween = jQuery.Tween( elem, animation.opts, prop, end,
+						animation.opts.specialEasing[ prop ] || animation.opts.easing );
+				animation.tweens.push( tween );
+				return tween;
+			},
+			stop: function( gotoEnd ) {
+				var index = 0,
+
+					// If we are going to the end, we want to run all the tweens
+					// otherwise we skip this part
+					length = gotoEnd ? animation.tweens.length : 0;
+				if ( stopped ) {
+					return this;
+				}
+				stopped = true;
+				for ( ; index < length; index++ ) {
+					animation.tweens[ index ].run( 1 );
+				}
+
+				// Resolve when we played the last frame; otherwise, reject
+				if ( gotoEnd ) {
+					deferred.notifyWith( elem, [ animation, 1, 0 ] );
+					deferred.resolveWith( elem, [ animation, gotoEnd ] );
+				} else {
+					deferred.rejectWith( elem, [ animation, gotoEnd ] );
+				}
+				return this;
+			}
+		} ),
+		props = animation.props;
+
+	propFilter( props, animation.opts.specialEasing );
+
+	for ( ; index < length; index++ ) {
+		result = Animation.prefilters[ index ].call( animation, elem, props, animation.opts );
+		if ( result ) {
+			if ( jQuery.isFunction( result.stop ) ) {
+				jQuery._queueHooks( animation.elem, animation.opts.queue ).stop =
+					jQuery.proxy( result.stop, result );
+			}
+			return result;
+		}
+	}
+
+	jQuery.map( props, createTween, animation );
+
+	if ( jQuery.isFunction( animation.opts.start ) ) {
+		animation.opts.start.call( elem, animation );
+	}
+
+	// Attach callbacks from options
+	animation
+		.progress( animation.opts.progress )
+		.done( animation.opts.done, animation.opts.complete )
+		.fail( animation.opts.fail )
+		.always( animation.opts.always );
+
+	jQuery.fx.timer(
+		jQuery.extend( tick, {
+			elem: elem,
+			anim: animation,
+			queue: animation.opts.queue
+		} )
+	);
+
+	return animation;
+}
+
+jQuery.Animation = jQuery.extend( Animation, {
+
+	tweeners: {
+		"*": [ function( prop, value ) {
+			var tween = this.createTween( prop, value );
+			adjustCSS( tween.elem, prop, rcssNum.exec( value ), tween );
+			return tween;
+		} ]
+	},
+
+	tweener: function( props, callback ) {
+		if ( jQuery.isFunction( props ) ) {
+			callback = props;
+			props = [ "*" ];
+		} else {
+			props = props.match( rnothtmlwhite );
+		}
+
+		var prop,
+			index = 0,
+			length = props.length;
+
+		for ( ; index < length; index++ ) {
+			prop = props[ index ];
+			Animation.tweeners[ prop ] = Animation.tweeners[ prop ] || [];
+			Animation.tweeners[ prop ].unshift( callback );
+		}
+	},
+
+	prefilters: [ defaultPrefilter ],
+
+	prefilter: function( callback, prepend ) {
+		if ( prepend ) {
+			Animation.prefilters.unshift( callback );
+		} else {
+			Animation.prefilters.push( callback );
+		}
+	}
+} );
+
+jQuery.speed = function( speed, easing, fn ) {
+	var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
+		complete: fn || !fn && easing ||
+			jQuery.isFunction( speed ) && speed,
+		duration: speed,
+		easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
+	};
+
+	// Go to the end state if fx are off
+	if ( jQuery.fx.off ) {
+		opt.duration = 0;
+
+	} else {
+		if ( typeof opt.duration !== "number" ) {
+			if ( opt.duration in jQuery.fx.speeds ) {
+				opt.duration = jQuery.fx.speeds[ opt.duration ];
+
+			} else {
+				opt.duration = jQuery.fx.speeds._default;
+			}
+		}
+	}
+
+	// Normalize opt.queue - true/undefined/null -> "fx"
+	if ( opt.queue == null || opt.queue === true ) {
+		opt.queue = "fx";
+	}
+
+	// Queueing
+	opt.old = opt.complete;
+
+	opt.complete = function() {
+		if ( jQuery.isFunction( opt.old ) ) {
+			opt.old.call( this );
+		}
+
+		if ( opt.queue ) {
+			jQuery.dequeue( this, opt.queue );
+		}
+	};
+
+	return opt;
+};
+
+jQuery.fn.extend( {
+	fadeTo: function( speed, to, easing, callback ) {
+
+		// Show any hidden elements after setting opacity to 0
+		return this.filter( isHiddenWithinTree ).css( "opacity", 0 ).show()
+
+			// Animate to the value specified
+			.end().animate( { opacity: to }, speed, easing, callback );
+	},
+	animate: function( prop, speed, easing, callback ) {
+		var empty = jQuery.isEmptyObject( prop ),
+			optall = jQuery.speed( speed, easing, callback ),
+			doAnimation = function() {
+
+				// Operate on a copy of prop so per-property easing won't be lost
+				var anim = Animation( this, jQuery.extend( {}, prop ), optall );
+
+				// Empty animations, or finishing resolves immediately
+				if ( empty || dataPriv.get( this, "finish" ) ) {
+					anim.stop( true );
+				}
+			};
+			doAnimation.finish = doAnimation;
+
+		return empty || optall.queue === false ?
+			this.each( doAnimation ) :
+			this.queue( optall.queue, doAnimation );
+	},
+	stop: function( type, clearQueue, gotoEnd ) {
+		var stopQueue = function( hooks ) {
+			var stop = hooks.stop;
+			delete hooks.stop;
+			stop( gotoEnd );
+		};
+
+		if ( typeof type !== "string" ) {
+			gotoEnd = clearQueue;
+			clearQueue = type;
+			type = undefined;
+		}
+		if ( clearQueue && type !== false ) {
+			this.queue( type || "fx", [] );
+		}
+
+		return this.each( function() {
+			var dequeue = true,
+				index = type != null && type + "queueHooks",
+				timers = jQuery.timers,
+				data = dataPriv.get( this );
+
+			if ( index ) {
+				if ( data[ index ] && data[ index ].stop ) {
+					stopQueue( data[ index ] );
+				}
+			} else {
+				for ( index in data ) {
+					if ( data[ index ] && data[ index ].stop && rrun.test( index ) ) {
+						stopQueue( data[ index ] );
+					}
+				}
+			}
+
+			for ( index = timers.length; index--; ) {
+				if ( timers[ index ].elem === this &&
+					( type == null || timers[ index ].queue === type ) ) {
+
+					timers[ index ].anim.stop( gotoEnd );
+					dequeue = false;
+					timers.splice( index, 1 );
+				}
+			}
+
+			// Start the next in the queue if the last step wasn't forced.
+			// Timers currently will call their complete callbacks, which
+			// will dequeue but only if they were gotoEnd.
+			if ( dequeue || !gotoEnd ) {
+				jQuery.dequeue( this, type );
+			}
+		} );
+	},
+	finish: function( type ) {
+		if ( type !== false ) {
+			type = type || "fx";
+		}
+		return this.each( function() {
+			var index,
+				data = dataPriv.get( this ),
+				queue = data[ type + "queue" ],
+				hooks = data[ type + "queueHooks" ],
+				timers = jQuery.timers,
+				length = queue ? queue.length : 0;
+
+			// Enable finishing flag on private data
+			data.finish = true;
+
+			// Empty the queue first
+			jQuery.queue( this, type, [] );
+
+			if ( hooks && hooks.stop ) {
+				hooks.stop.call( this, true );
+			}
+
+			// Look for any active animations, and finish them
+			for ( index = timers.length; index--; ) {
+				if ( timers[ index ].elem === this && timers[ index ].queue === type ) {
+					timers[ index ].anim.stop( true );
+					timers.splice( index, 1 );
+				}
+			}
+
+			// Look for any animations in the old queue and finish them
+			for ( index = 0; index < length; index++ ) {
+				if ( queue[ index ] && queue[ index ].finish ) {
+					queue[ index ].finish.call( this );
+				}
+			}
+
+			// Turn off finishing flag
+			delete data.finish;
+		} );
+	}
+} );
+
+jQuery.each( [ "toggle", "show", "hide" ], function( i, name ) {
+	var cssFn = jQuery.fn[ name ];
+	jQuery.fn[ name ] = function( speed, easing, callback ) {
+		return speed == null || typeof speed === "boolean" ?
+			cssFn.apply( this, arguments ) :
+			this.animate( genFx( name, true ), speed, easing, callback );
+	};
+} );
+
+// Generate shortcuts for custom animations
+jQuery.each( {
+	slideDown: genFx( "show" ),
+	slideUp: genFx( "hide" ),
+	slideToggle: genFx( "toggle" ),
+	fadeIn: { opacity: "show" },
+	fadeOut: { opacity: "hide" },
+	fadeToggle: { opacity: "toggle" }
+}, function( name, props ) {
+	jQuery.fn[ name ] = function( speed, easing, callback ) {
+		return this.animate( props, speed, easing, callback );
+	};
+} );
+
+jQuery.timers = [];
+jQuery.fx.tick = function() {
+	var timer,
+		i = 0,
+		timers = jQuery.timers;
+
+	fxNow = jQuery.now();
+
+	for ( ; i < timers.length; i++ ) {
+		timer = timers[ i ];
+
+		// Run the timer and safely remove it when done (allowing for external removal)
+		if ( !timer() && timers[ i ] === timer ) {
+			timers.splice( i--, 1 );
+		}
+	}
+
+	if ( !timers.length ) {
+		jQuery.fx.stop();
+	}
+	fxNow = undefined;
+};
+
+jQuery.fx.timer = function( timer ) {
+	jQuery.timers.push( timer );
+	jQuery.fx.start();
+};
+
+jQuery.fx.interval = 13;
+jQuery.fx.start = function() {
+	if ( inProgress ) {
+		return;
+	}
+
+	inProgress = true;
+	schedule();
+};
+
+jQuery.fx.stop = function() {
+	inProgress = null;
+};
+
+jQuery.fx.speeds = {
+	slow: 600,
+	fast: 200,
+
+	// Default speed
+	_default: 400
+};
+
+
+// Based off of the plugin by Clint Helfers, with permission.
+// https://web.archive.org/web/20100324014747/http://blindsignals.com/index.php/2009/07/jquery-delay/
+jQuery.fn.delay = function( time, type ) {
+	time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
+	type = type || "fx";
+
+	return this.queue( type, function( next, hooks ) {
+		var timeout = window.setTimeout( next, time );
+		hooks.stop = function() {
+			window.clearTimeout( timeout );
+		};
+	} );
+};
+
+
+( function() {
+	var input = document.createElement( "input" ),
+		select = document.createElement( "select" ),
+		opt = select.appendChild( document.createElement( "option" ) );
+
+	input.type = "checkbox";
+
+	// Support: Android <=4.3 only
+	// Default value for a checkbox should be "on"
+	support.checkOn = input.value !== "";
+
+	// Support: IE <=11 only
+	// Must access selectedIndex to make default options select
+	support.optSelected = opt.selected;
+
+	// Support: IE <=11 only
+	// An input loses its value after becoming a radio
+	input = document.createElement( "input" );
+	input.value = "t";
+	input.type = "radio";
+	support.radioValue = input.value === "t";
+} )();
+
+
+var boolHook,
+	attrHandle = jQuery.expr.attrHandle;
+
+jQuery.fn.extend( {
+	attr: function( name, value ) {
+		return access( this, jQuery.attr, name, value, arguments.length > 1 );
+	},
+
+	removeAttr: function( name ) {
+		return this.each( function() {
+			jQuery.removeAttr( this, name );
+		} );
+	}
+} );
+
+jQuery.extend( {
+	attr: function( elem, name, value ) {
+		var ret, hooks,
+			nType = elem.nodeType;
+
+		// Don't get/set attributes on text, comment and attribute nodes
+		if ( nType === 3 || nType === 8 || nType === 2 ) {
+			return;
+		}
+
+		// Fallback to prop when attributes are not supported
+		if ( typeof elem.getAttribute === "undefined" ) {
+			return jQuery.prop( elem, name, value );
+		}
+
+		// Attribute hooks are determined by the lowercase version
+		// Grab necessary hook if one is defined
+		if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
+			hooks = jQuery.attrHooks[ name.toLowerCase() ] ||
+				( jQuery.expr.match.bool.test( name ) ? boolHook : undefined );
+		}
+
+		if ( value !== undefined ) {
+			if ( value === null ) {
+				jQuery.removeAttr( elem, name );
+				return;
+			}
+
+			if ( hooks && "set" in hooks &&
+				( ret = hooks.set( elem, value, name ) ) !== undefined ) {
+				return ret;
+			}
+
+			elem.setAttribute( name, value + "" );
+			return value;
+		}
+
+		if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
+			return ret;
+		}
+
+		ret = jQuery.find.attr( elem, name );
+
+		// Non-existent attributes return null, we normalize to undefined
+		return ret == null ? undefined : ret;
+	},
+
+	attrHooks: {
+		type: {
+			set: function( elem, value ) {
+				if ( !support.radioValue && value === "radio" &&
+					nodeName( elem, "input" ) ) {
+					var val = elem.value;
+					elem.setAttribute( "type", value );
+					if ( val ) {
+						elem.value = val;
+					}
+					return value;
+				}
+			}
+		}
+	},
+
+	removeAttr: function( elem, value ) {
+		var name,
+			i = 0,
+
+			// Attribute names can contain non-HTML whitespace characters
+			// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
+			attrNames = value && value.match( rnothtmlwhite );
+
+		if ( attrNames && elem.nodeType === 1 ) {
+			while ( ( name = attrNames[ i++ ] ) ) {
+				elem.removeAttribute( name );
+			}
+		}
+	}
+} );
+
+// Hooks for boolean attributes
+boolHook = {
+	set: function( elem, value, name ) {
+		if ( value === false ) {
+
+			// Remove boolean attributes when set to false
+			jQuery.removeAttr( elem, name );
+		} else {
+			elem.setAttribute( name, name );
+		}
+		return name;
+	}
+};
+
+jQuery.each( jQuery.expr.match.bool.source.match( /\w+/g ), function( i, name ) {
+	var getter = attrHandle[ name ] || jQuery.find.attr;
+
+	attrHandle[ name ] = function( elem, name, isXML ) {
+		var ret, handle,
+			lowercaseName = name.toLowerCase();
+
+		if ( !isXML ) {
+
+			// Avoid an infinite loop by temporarily removing this function from the getter
+			handle = attrHandle[ lowercaseName ];
+			attrHandle[ lowercaseName ] = ret;
+			ret = getter( elem, name, isXML ) != null ?
+				lowercaseName :
+				null;
+			attrHandle[ lowercaseName ] = handle;
+		}
+		return ret;
+	};
+} );
+
+
+
+
+var rfocusable = /^(?:input|select|textarea|button)$/i,
+	rclickable = /^(?:a|area)$/i;
+
+jQuery.fn.extend( {
+	prop: function( name, value ) {
+		return access( this, jQuery.prop, name, value, arguments.length > 1 );
+	},
+
+	removeProp: function( name ) {
+		return this.each( function() {
+			delete this[ jQuery.propFix[ name ] || name ];
+		} );
+	}
+} );
+
+jQuery.extend( {
+	prop: function( elem, name, value ) {
+		var ret, hooks,
+			nType = elem.nodeType;
+
+		// Don't get/set properties on text, comment and attribute nodes
+		if ( nType === 3 || nType === 8 || nType === 2 ) {
+			return;
+		}
+
+		if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
+
+			// Fix name and attach hooks
+			name = jQuery.propFix[ name ] || name;
+			hooks = jQuery.propHooks[ name ];
+		}
+
+		if ( value !== undefined ) {
+			if ( hooks && "set" in hooks &&
+				( ret = hooks.set( elem, value, name ) ) !== undefined ) {
+				return ret;
+			}
+
+			return ( elem[ name ] = value );
+		}
+
+		if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
+			return ret;
+		}
+
+		return elem[ name ];
+	},
+
+	propHooks: {
+		tabIndex: {
+			get: function( elem ) {
+
+				// Support: IE <=9 - 11 only
+				// elem.tabIndex doesn't always return the
+				// correct value when it hasn't been explicitly set
+				// https://web.archive.org/web/20141116233347/http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
+				// Use proper attribute retrieval(#12072)
+				var tabindex = jQuery.find.attr( elem, "tabindex" );
+
+				if ( tabindex ) {
+					return parseInt( tabindex, 10 );
+				}
+
+				if (
+					rfocusable.test( elem.nodeName ) ||
+					rclickable.test( elem.nodeName ) &&
+					elem.href
+				) {
+					return 0;
+				}
+
+				return -1;
+			}
+		}
+	},
+
+	propFix: {
+		"for": "htmlFor",
+		"class": "className"
+	}
+} );
+
+// Support: IE <=11 only
+// Accessing the selectedIndex property
+// forces the browser to respect setting selected
+// on the option
+// The getter ensures a default option is selected
+// when in an optgroup
+// eslint rule "no-unused-expressions" is disabled for this code
+// since it considers such accessions noop
+if ( !support.optSelected ) {
+	jQuery.propHooks.selected = {
+		get: function( elem ) {
+
+			/* eslint no-unused-expressions: "off" */
+
+			var parent = elem.parentNode;
+			if ( parent && parent.parentNode ) {
+				parent.parentNode.selectedIndex;
+			}
+			return null;
+		},
+		set: function( elem ) {
+
+			/* eslint no-unused-expressions: "off" */
+
+			var parent = elem.parentNode;
+			if ( parent ) {
+				parent.selectedIndex;
+
+				if ( parent.parentNode ) {
+					parent.parentNode.selectedIndex;
+				}
+			}
+		}
+	};
+}
+
+jQuery.each( [
+	"tabIndex",
+	"readOnly",
+	"maxLength",
+	"cellSpacing",
+	"cellPadding",
+	"rowSpan",
+	"colSpan",
+	"useMap",
+	"frameBorder",
+	"contentEditable"
+], function() {
+	jQuery.propFix[ this.toLowerCase() ] = this;
+} );
+
+
+
+
+	// Strip and collapse whitespace according to HTML spec
+	// https://html.spec.whatwg.org/multipage/infrastructure.html#strip-and-collapse-whitespace
+	function stripAndCollapse( value ) {
+		var tokens = value.match( rnothtmlwhite ) || [];
+		return tokens.join( " " );
+	}
+
+
+function getClass( elem ) {
+	return elem.getAttribute && elem.getAttribute( "class" ) || "";
+}
+
+jQuery.fn.extend( {
+	addClass: function( value ) {
+		var classes, elem, cur, curValue, clazz, j, finalValue,
+			i = 0;
+
+		if ( jQuery.isFunction( value ) ) {
+			return this.each( function( j ) {
+				jQuery( this ).addClass( value.call( this, j, getClass( this ) ) );
+			} );
+		}
+
+		if ( typeof value === "string" && value ) {
+			classes = value.match( rnothtmlwhite ) || [];
+
+			while ( ( elem = this[ i++ ] ) ) {
+				curValue = getClass( elem );
+				cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );
+
+				if ( cur ) {
+					j = 0;
+					while ( ( clazz = classes[ j++ ] ) ) {
+						if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
+							cur += clazz + " ";
+						}
+					}
+
+					// Only assign if different to avoid unneeded rendering.
+					finalValue = stripAndCollapse( cur );
+					if ( curValue !== finalValue ) {
+						elem.setAttribute( "class", finalValue );
+					}
+				}
+			}
+		}
+
+		return this;
+	},
+
+	removeClass: function( value ) {
+		var classes, elem, cur, curValue, clazz, j, finalValue,
+			i = 0;
+
+		if ( jQuery.isFunction( value ) ) {
+			return this.each( function( j ) {
+				jQuery( this ).removeClass( value.call( this, j, getClass( this ) ) );
+			} );
+		}
+
+		if ( !arguments.length ) {
+			return this.attr( "class", "" );
+		}
+
+		if ( typeof value === "string" && value ) {
+			classes = value.match( rnothtmlwhite ) || [];
+
+			while ( ( elem = this[ i++ ] ) ) {
+				curValue = getClass( elem );
+
+				// This expression is here for better compressibility (see addClass)
+				cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );
+
+				if ( cur ) {
+					j = 0;
+					while ( ( clazz = classes[ j++ ] ) ) {
+
+						// Remove *all* instances
+						while ( cur.indexOf( " " + clazz + " " ) > -1 ) {
+							cur = cur.replace( " " + clazz + " ", " " );
+						}
+					}
+
+					// Only assign if different to avoid unneeded rendering.
+					finalValue = stripAndCollapse( cur );
+					if ( curValue !== finalValue ) {
+						elem.setAttribute( "class", finalValue );
+					}
+				}
+			}
+		}
+
+		return this;
+	},
+
+	toggleClass: function( value, stateVal ) {
+		var type = typeof value;
+
+		if ( typeof stateVal === "boolean" && type === "string" ) {
+			return stateVal ? this.addClass( value ) : this.removeClass( value );
+		}
+
+		if ( jQuery.isFunction( value ) ) {
+			return this.each( function( i ) {
+				jQuery( this ).toggleClass(
+					value.call( this, i, getClass( this ), stateVal ),
+					stateVal
+				);
+			} );
+		}
+
+		return this.each( function() {
+			var className, i, self, classNames;
+
+			if ( type === "string" ) {
+
+				// Toggle individual class names
+				i = 0;
+				self = jQuery( this );
+				classNames = value.match( rnothtmlwhite ) || [];
+
+				while ( ( className = classNames[ i++ ] ) ) {
+
+					// Check each className given, space separated list
+					if ( self.hasClass( className ) ) {
+						self.removeClass( className );
+					} else {
+						self.addClass( className );
+					}
+				}
+
+			// Toggle whole class name
+			} else if ( value === undefined || type === "boolean" ) {
+				className = getClass( this );
+				if ( className ) {
+
+					// Store className if set
+					dataPriv.set( this, "__className__", className );
+				}
+
+				// If the element has a class name or if we're passed `false`,
+				// then remove the whole classname (if there was one, the above saved it).
+				// Otherwise bring back whatever was previously saved (if anything),
+				// falling back to the empty string if nothing was stored.
+				if ( this.setAttribute ) {
+					this.setAttribute( "class",
+						className || value === false ?
+						"" :
+						dataPriv.get( this, "__className__" ) || ""
+					);
+				}
+			}
+		} );
+	},
+
+	hasClass: function( selector ) {
+		var className, elem,
+			i = 0;
+
+		className = " " + selector + " ";
+		while ( ( elem = this[ i++ ] ) ) {
+			if ( elem.nodeType === 1 &&
+				( " " + stripAndCollapse( getClass( elem ) ) + " " ).indexOf( className ) > -1 ) {
+					return true;
+			}
+		}
+
+		return false;
+	}
+} );
+
+
+
+
+var rreturn = /\r/g;
+
+jQuery.fn.extend( {
+	val: function( value ) {
+		var hooks, ret, isFunction,
+			elem = this[ 0 ];
+
+		if ( !arguments.length ) {
+			if ( elem ) {
+				hooks = jQuery.valHooks[ elem.type ] ||
+					jQuery.valHooks[ elem.nodeName.toLowerCase() ];
+
+				if ( hooks &&
+					"get" in hooks &&
+					( ret = hooks.get( elem, "value" ) ) !== undefined
+				) {
+					return ret;
+				}
+
+				ret = elem.value;
+
+				// Handle most common string cases
+				if ( typeof ret === "string" ) {
+					return ret.replace( rreturn, "" );
+				}
+
+				// Handle cases where value is null/undef or number
+				return ret == null ? "" : ret;
+			}
+
+			return;
+		}
+
+		isFunction = jQuery.isFunction( value );
+
+		return this.each( function( i ) {
+			var val;
+
+			if ( this.nodeType !== 1 ) {
+				return;
+			}
+
+			if ( isFunction ) {
+				val = value.call( this, i, jQuery( this ).val() );
+			} else {
+				val = value;
+			}
+
+			// Treat null/undefined as ""; convert numbers to string
+			if ( val == null ) {
+				val = "";
+
+			} else if ( typeof val === "number" ) {
+				val += "";
+
+			} else if ( Array.isArray( val ) ) {
+				val = jQuery.map( val, function( value ) {
+					return value == null ? "" : value + "";
+				} );
+			}
+
+			hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
+
+			// If set returns undefined, fall back to normal setting
+			if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
+				this.value = val;
+			}
+		} );
+	}
+} );
+
+jQuery.extend( {
+	valHooks: {
+		option: {
+			get: function( elem ) {
+
+				var val = jQuery.find.attr( elem, "value" );
+				return val != null ?
+					val :
+
+					// Support: IE <=10 - 11 only
+					// option.text throws exceptions (#14686, #14858)
+					// Strip and collapse whitespace
+					// https://html.spec.whatwg.org/#strip-and-collapse-whitespace
+					stripAndCollapse( jQuery.text( elem ) );
+			}
+		},
+		select: {
+			get: function( elem ) {
+				var value, option, i,
+					options = elem.options,
+					index = elem.selectedIndex,
+					one = elem.type === "select-one",
+					values = one ? null : [],
+					max = one ? index + 1 : options.length;
+
+				if ( index < 0 ) {
+					i = max;
+
+				} else {
+					i = one ? index : 0;
+				}
+
+				// Loop through all the selected options
+				for ( ; i < max; i++ ) {
+					option = options[ i ];
+
+					// Support: IE <=9 only
+					// IE8-9 doesn't update selected after form reset (#2551)
+					if ( ( option.selected || i === index ) &&
+
+							// Don't return options that are disabled or in a disabled optgroup
+							!option.disabled &&
+							( !option.parentNode.disabled ||
+								!nodeName( option.parentNode, "optgroup" ) ) ) {
+
+						// Get the specific value for the option
+						value = jQuery( option ).val();
+
+						// We don't need an array for one selects
+						if ( one ) {
+							return value;
+						}
+
+						// Multi-Selects return an array
+						values.push( value );
+					}
+				}
+
+				return values;
+			},
+
+			set: function( elem, value ) {
+				var optionSet, option,
+					options = elem.options,
+					values = jQuery.makeArray( value ),
+					i = options.length;
+
+				while ( i-- ) {
+					option = options[ i ];
+
+					/* eslint-disable no-cond-assign */
+
+					if ( option.selected =
+						jQuery.inArray( jQuery.valHooks.option.get( option ), values ) > -1
+					) {
+						optionSet = true;
+					}
+
+					/* eslint-enable no-cond-assign */
+				}
+
+				// Force browsers to behave consistently when non-matching value is set
+				if ( !optionSet ) {
+					elem.selectedIndex = -1;
+				}
+				return values;
+			}
+		}
+	}
+} );
+
+// Radios and checkboxes getter/setter
+jQuery.each( [ "radio", "checkbox" ], function() {
+	jQuery.valHooks[ this ] = {
+		set: function( elem, value ) {
+			if ( Array.isArray( value ) ) {
+				return ( elem.checked = jQuery.inArray( jQuery( elem ).val(), value ) > -1 );
+			}
+		}
+	};
+	if ( !support.checkOn ) {
+		jQuery.valHooks[ this ].get = function( elem ) {
+			return elem.getAttribute( "value" ) === null ? "on" : elem.value;
+		};
+	}
+} );
+
+
+
+
+// Return jQuery for attributes-only inclusion
+
+
+var rfocusMorph = /^(?:focusinfocus|focusoutblur)$/;
+
+jQuery.extend( jQuery.event, {
+
+	trigger: function( event, data, elem, onlyHandlers ) {
+
+		var i, cur, tmp, bubbleType, ontype, handle, special,
+			eventPath = [ elem || document ],
+			type = hasOwn.call( event, "type" ) ? event.type : event,
+			namespaces = hasOwn.call( event, "namespace" ) ? event.namespace.split( "." ) : [];
+
+		cur = tmp = elem = elem || document;
+
+		// Don't do events on text and comment nodes
+		if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
+			return;
+		}
+
+		// focus/blur morphs to focusin/out; ensure we're not firing them right now
+		if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
+			return;
+		}
+
+		if ( type.indexOf( "." ) > -1 ) {
+
+			// Namespaced trigger; create a regexp to match event type in handle()
+			namespaces = type.split( "." );
+			type = namespaces.shift();
+			namespaces.sort();
+		}
+		ontype = type.indexOf( ":" ) < 0 && "on" + type;
+
+		// Caller can pass in a jQuery.Event object, Object, or just an event type string
+		event = event[ jQuery.expando ] ?
+			event :
+			new jQuery.Event( type, typeof event === "object" && event );
+
+		// Trigger bitmask: & 1 for native handlers; & 2 for jQuery (always true)
+		event.isTrigger = onlyHandlers ? 2 : 3;
+		event.namespace = namespaces.join( "." );
+		event.rnamespace = event.namespace ?
+			new RegExp( "(^|\\.)" + namespaces.join( "\\.(?:.*\\.|)" ) + "(\\.|$)" ) :
+			null;
+
+		// Clean up the event in case it is being reused
+		event.result = undefined;
+		if ( !event.target ) {
+			event.target = elem;
+		}
+
+		// Clone any incoming data and prepend the event, creating the handler arg list
+		data = data == null ?
+			[ event ] :
+			jQuery.makeArray( data, [ event ] );
+
+		// Allow special events to draw outside the lines
+		special = jQuery.event.special[ type ] || {};
+		if ( !onlyHandlers && special.trigger && special.trigger.apply( elem, data ) === false ) {
+			return;
+		}
+
+		// Determine event propagation path in advance, per W3C events spec (#9951)
+		// Bubble up to document, then to window; watch for a global ownerDocument var (#9724)
+		if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {
+
+			bubbleType = special.delegateType || type;
+			if ( !rfocusMorph.test( bubbleType + type ) ) {
+				cur = cur.parentNode;
+			}
+			for ( ; cur; cur = cur.parentNode ) {
+				eventPath.push( cur );
+				tmp = cur;
+			}
+
+			// Only add window if we got to document (e.g., not plain obj or detached DOM)
+			if ( tmp === ( elem.ownerDocument || document ) ) {
+				eventPath.push( tmp.defaultView || tmp.parentWindow || window );
+			}
+		}
+
+		// Fire handlers on the event path
+		i = 0;
+		while ( ( cur = eventPath[ i++ ] ) && !event.isPropagationStopped() ) {
+
+			event.type = i > 1 ?
+				bubbleType :
+				special.bindType || type;
+
+			// jQuery handler
+			handle = ( dataPriv.get( cur, "events" ) || {} )[ event.type ] &&
+				dataPriv.get( cur, "handle" );
+			if ( handle ) {
+				handle.apply( cur, data );
+			}
+
+			// Native handler
+			handle = ontype && cur[ ontype ];
+			if ( handle && handle.apply && acceptData( cur ) ) {
+				event.result = handle.apply( cur, data );
+				if ( event.result === false ) {
+					event.preventDefault();
+				}
+			}
+		}
+		event.type = type;
+
+		// If nobody prevented the default action, do it now
+		if ( !onlyHandlers && !event.isDefaultPrevented() ) {
+
+			if ( ( !special._default ||
+				special._default.apply( eventPath.pop(), data ) === false ) &&
+				acceptData( elem ) ) {
+
+				// Call a native DOM method on the target with the same name as the event.
+				// Don't do default actions on window, that's where global variables be (#6170)
+				if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) {
+
+					// Don't re-trigger an onFOO event when we call its FOO() method
+					tmp = elem[ ontype ];
+
+					if ( tmp ) {
+						elem[ ontype ] = null;
+					}
+
+					// Prevent re-triggering of the same event, since we already bubbled it above
+					jQuery.event.triggered = type;
+					elem[ type ]();
+					jQuery.event.triggered = undefined;
+
+					if ( tmp ) {
+						elem[ ontype ] = tmp;
+					}
+				}
+			}
+		}
+
+		return event.result;
+	},
+
+	// Piggyback on a donor event to simulate a different one
+	// Used only for `focus(in | out)` events
+	simulate: function( type, elem, event ) {
+		var e = jQuery.extend(
+			new jQuery.Event(),
+			event,
+			{
+				type: type,
+				isSimulated: true
+			}
+		);
+
+		jQuery.event.trigger( e, null, elem );
+	}
+
+} );
+
+jQuery.fn.extend( {
+
+	trigger: function( type, data ) {
+		return this.each( function() {
+			jQuery.event.trigger( type, data, this );
+		} );
+	},
+	triggerHandler: function( type, data ) {
+		var elem = this[ 0 ];
+		if ( elem ) {
+			return jQuery.event.trigger( type, data, elem, true );
+		}
+	}
+} );
+
+
+jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
+	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
+	"change select submit keydown keypress keyup contextmenu" ).split( " " ),
+	function( i, name ) {
+
+	// Handle event binding
+	jQuery.fn[ name ] = function( data, fn ) {
+		return arguments.length > 0 ?
+			this.on( name, null, data, fn ) :
+			this.trigger( name );
+	};
+} );
+
+jQuery.fn.extend( {
+	hover: function( fnOver, fnOut ) {
+		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
+	}
+} );
+
+
+
+
+support.focusin = "onfocusin" in window;
+
+
+// Support: Firefox <=44
+// Firefox doesn't have focus(in | out) events
+// Related ticket - https://bugzilla.mozilla.org/show_bug.cgi?id=687787
+//
+// Support: Chrome <=48 - 49, Safari <=9.0 - 9.1
+// focus(in | out) events fire after focus & blur events,
+// which is spec violation - http://www.w3.org/TR/DOM-Level-3-Events/#events-focusevent-event-order
+// Related ticket - https://bugs.chromium.org/p/chromium/issues/detail?id=449857
+if ( !support.focusin ) {
+	jQuery.each( { focus: "focusin", blur: "focusout" }, function( orig, fix ) {
+
+		// Attach a single capturing handler on the document while someone wants focusin/focusout
+		var handler = function( event ) {
+			jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ) );
+		};
+
+		jQuery.event.special[ fix ] = {
+			setup: function() {
+				var doc = this.ownerDocument || this,
+					attaches = dataPriv.access( doc, fix );
+
+				if ( !attaches ) {
+					doc.addEventListener( orig, handler, true );
+				}
+				dataPriv.access( doc, fix, ( attaches || 0 ) + 1 );
+			},
+			teardown: function() {
+				var doc = this.ownerDocument || this,
+					attaches = dataPriv.access( doc, fix ) - 1;
+
+				if ( !attaches ) {
+					doc.removeEventListener( orig, handler, true );
+					dataPriv.remove( doc, fix );
+
+				} else {
+					dataPriv.access( doc, fix, attaches );
+				}
+			}
+		};
+	} );
+}
+var location = window.location;
+
+var nonce = jQuery.now();
+
+var rquery = ( /\?/ );
+
+
+
+// Cross-browser xml parsing
+jQuery.parseXML = function( data ) {
+	var xml;
+	if ( !data || typeof data !== "string" ) {
+		return null;
+	}
+
+	// Support: IE 9 - 11 only
+	// IE throws on parseFromString with invalid input.
+	try {
+		xml = ( new window.DOMParser() ).parseFromString( data, "text/xml" );
+	} catch ( e ) {
+		xml = undefined;
+	}
+
+	if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) {
+		jQuery.error( "Invalid XML: " + data );
+	}
+	return xml;
+};
+
+
+var
+	rbracket = /\[\]$/,
+	rCRLF = /\r?\n/g,
+	rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
+	rsubmittable = /^(?:input|select|textarea|keygen)/i;
+
+function buildParams( prefix, obj, traditional, add ) {
+	var name;
+
+	if ( Array.isArray( obj ) ) {
+
+		// Serialize array item.
+		jQuery.each( obj, function( i, v ) {
+			if ( traditional || rbracket.test( prefix ) ) {
+
+				// Treat each array item as a scalar.
+				add( prefix, v );
+
+			} else {
+
+				// Item is non-scalar (array or object), encode its numeric index.
+				buildParams(
+					prefix + "[" + ( typeof v === "object" && v != null ? i : "" ) + "]",
+					v,
+					traditional,
+					add
+				);
+			}
+		} );
+
+	} else if ( !traditional && jQuery.type( obj ) === "object" ) {
+
+		// Serialize object item.
+		for ( name in obj ) {
+			buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
+		}
+
+	} else {
+
+		// Serialize scalar item.
+		add( prefix, obj );
+	}
+}
+
+// Serialize an array of form elements or a set of
+// key/values into a query string
+jQuery.param = function( a, traditional ) {
+	var prefix,
+		s = [],
+		add = function( key, valueOrFunction ) {
+
+			// If value is a function, invoke it and use its return value
+			var value = jQuery.isFunction( valueOrFunction ) ?
+				valueOrFunction() :
+				valueOrFunction;
+
+			s[ s.length ] = encodeURIComponent( key ) + "=" +
+				encodeURIComponent( value == null ? "" : value );
+		};
+
+	// If an array was passed in, assume that it is an array of form elements.
+	if ( Array.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
+
+		// Serialize the form elements
+		jQuery.each( a, function() {
+			add( this.name, this.value );
+		} );
+
+	} else {
+
+		// If traditional, encode the "old" way (the way 1.3.2 or older
+		// did it), otherwise encode params recursively.
+		for ( prefix in a ) {
+			buildParams( prefix, a[ prefix ], traditional, add );
+		}
+	}
+
+	// Return the resulting serialization
+	return s.join( "&" );
+};
+
+jQuery.fn.extend( {
+	serialize: function() {
+		return jQuery.param( this.serializeArray() );
+	},
+	serializeArray: function() {
+		return this.map( function() {
+
+			// Can add propHook for "elements" to filter or add form elements
+			var elements = jQuery.prop( this, "elements" );
+			return elements ? jQuery.makeArray( elements ) : this;
+		} )
+		.filter( function() {
+			var type = this.type;
+
+			// Use .is( ":disabled" ) so that fieldset[disabled] works
+			return this.name && !jQuery( this ).is( ":disabled" ) &&
+				rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
+				( this.checked || !rcheckableType.test( type ) );
+		} )
+		.map( function( i, elem ) {
+			var val = jQuery( this ).val();
+
+			if ( val == null ) {
+				return null;
+			}
+
+			if ( Array.isArray( val ) ) {
+				return jQuery.map( val, function( val ) {
+					return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+				} );
+			}
+
+			return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+		} ).get();
+	}
+} );
+
+
+var
+	r20 = /%20/g,
+	rhash = /#.*$/,
+	rantiCache = /([?&])_=[^&]*/,
+	rheaders = /^(.*?):[ \t]*([^\r\n]*)$/mg,
+
+	// #7653, #8125, #8152: local protocol detection
+	rlocalProtocol = /^(?:about|app|app-storage|.+-extension|file|res|widget):$/,
+	rnoContent = /^(?:GET|HEAD)$/,
+	rprotocol = /^\/\//,
+
+	/* Prefilters
+	 * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example)
+	 * 2) These are called:
+	 *    - BEFORE asking for a transport
+	 *    - AFTER param serialization (s.data is a string if s.processData is true)
+	 * 3) key is the dataType
+	 * 4) the catchall symbol "*" can be used
+	 * 5) execution will start with transport dataType and THEN continue down to "*" if needed
+	 */
+	prefilters = {},
+
+	/* Transports bindings
+	 * 1) key is the dataType
+	 * 2) the catchall symbol "*" can be used
+	 * 3) selection will start with transport dataType and THEN go to "*" if needed
+	 */
+	transports = {},
+
+	// Avoid comment-prolog char sequence (#10098); must appease lint and evade compression
+	allTypes = "*/".concat( "*" ),
+
+	// Anchor tag for parsing the document origin
+	originAnchor = document.createElement( "a" );
+	originAnchor.href = location.href;
+
+// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
+function addToPrefiltersOrTransports( structure ) {
+
+	// dataTypeExpression is optional and defaults to "*"
+	return function( dataTypeExpression, func ) {
+
+		if ( typeof dataTypeExpression !== "string" ) {
+			func = dataTypeExpression;
+			dataTypeExpression = "*";
+		}
+
+		var dataType,
+			i = 0,
+			dataTypes = dataTypeExpression.toLowerCase().match( rnothtmlwhite ) || [];
+
+		if ( jQuery.isFunction( func ) ) {
+
+			// For each dataType in the dataTypeExpression
+			while ( ( dataType = dataTypes[ i++ ] ) ) {
+
+				// Prepend if requested
+				if ( dataType[ 0 ] === "+" ) {
+					dataType = dataType.slice( 1 ) || "*";
+					( structure[ dataType ] = structure[ dataType ] || [] ).unshift( func );
+
+				// Otherwise append
+				} else {
+					( structure[ dataType ] = structure[ dataType ] || [] ).push( func );
+				}
+			}
+		}
+	};
+}
+
+// Base inspection function for prefilters and transports
+function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) {
+
+	var inspected = {},
+		seekingTransport = ( structure === transports );
+
+	function inspect( dataType ) {
+		var selected;
+		inspected[ dataType ] = true;
+		jQuery.each( structure[ dataType ] || [], function( _, prefilterOrFactory ) {
+			var dataTypeOrTransport = prefilterOrFactory( options, originalOptions, jqXHR );
+			if ( typeof dataTypeOrTransport === "string" &&
+				!seekingTransport && !inspected[ dataTypeOrTransport ] ) {
+
+				options.dataTypes.unshift( dataTypeOrTransport );
+				inspect( dataTypeOrTransport );
+				return false;
+			} else if ( seekingTransport ) {
+				return !( selected = dataTypeOrTransport );
+			}
+		} );
+		return selected;
+	}
+
+	return inspect( options.dataTypes[ 0 ] ) || !inspected[ "*" ] && inspect( "*" );
+}
+
+// A special extend for ajax options
+// that takes "flat" options (not to be deep extended)
+// Fixes #9887
+function ajaxExtend( target, src ) {
+	var key, deep,
+		flatOptions = jQuery.ajaxSettings.flatOptions || {};
+
+	for ( key in src ) {
+		if ( src[ key ] !== undefined ) {
+			( flatOptions[ key ] ? target : ( deep || ( deep = {} ) ) )[ key ] = src[ key ];
+		}
+	}
+	if ( deep ) {
+		jQuery.extend( true, target, deep );
+	}
+
+	return target;
+}
+
+/* Handles responses to an ajax request:
+ * - finds the right dataType (mediates between content-type and expected dataType)
+ * - returns the corresponding response
+ */
+function ajaxHandleResponses( s, jqXHR, responses ) {
+
+	var ct, type, finalDataType, firstDataType,
+		contents = s.contents,
+		dataTypes = s.dataTypes;
+
+	// Remove auto dataType and get content-type in the process
+	while ( dataTypes[ 0 ] === "*" ) {
+		dataTypes.shift();
+		if ( ct === undefined ) {
+			ct = s.mimeType || jqXHR.getResponseHeader( "Content-Type" );
+		}
+	}
+
+	// Check if we're dealing with a known content-type
+	if ( ct ) {
+		for ( type in contents ) {
+			if ( contents[ type ] && contents[ type ].test( ct ) ) {
+				dataTypes.unshift( type );
+				break;
+			}
+		}
+	}
+
+	// Check to see if we have a response for the expected dataType
+	if ( dataTypes[ 0 ] in responses ) {
+		finalDataType = dataTypes[ 0 ];
+	} else {
+
+		// Try convertible dataTypes
+		for ( type in responses ) {
+			if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[ 0 ] ] ) {
+				finalDataType = type;
+				break;
+			}
+			if ( !firstDataType ) {
+				firstDataType = type;
+			}
+		}
+
+		// Or just use first one
+		finalDataType = finalDataType || firstDataType;
+	}
+
+	// If we found a dataType
+	// We add the dataType to the list if needed
+	// and return the corresponding response
+	if ( finalDataType ) {
+		if ( finalDataType !== dataTypes[ 0 ] ) {
+			dataTypes.unshift( finalDataType );
+		}
+		return responses[ finalDataType ];
+	}
+}
+
+/* Chain conversions given the request and the original response
+ * Also sets the responseXXX fields on the jqXHR instance
+ */
+function ajaxConvert( s, response, jqXHR, isSuccess ) {
+	var conv2, current, conv, tmp, prev,
+		converters = {},
+
+		// Work with a copy of dataTypes in case we need to modify it for conversion
+		dataTypes = s.dataTypes.slice();
+
+	// Create converters map with lowercased keys
+	if ( dataTypes[ 1 ] ) {
+		for ( conv in s.converters ) {
+			converters[ conv.toLowerCase() ] = s.converters[ conv ];
+		}
+	}
+
+	current = dataTypes.shift();
+
+	// Convert to each sequential dataType
+	while ( current ) {
+
+		if ( s.responseFields[ current ] ) {
+			jqXHR[ s.responseFields[ current ] ] = response;
+		}
+
+		// Apply the dataFilter if provided
+		if ( !prev && isSuccess && s.dataFilter ) {
+			response = s.dataFilter( response, s.dataType );
+		}
+
+		prev = current;
+		current = dataTypes.shift();
+
+		if ( current ) {
+
+			// There's only work to do if current dataType is non-auto
+			if ( current === "*" ) {
+
+				current = prev;
+
+			// Convert response if prev dataType is non-auto and differs from current
+			} else if ( prev !== "*" && prev !== current ) {
+
+				// Seek a direct converter
+				conv = converters[ prev + " " + current ] || converters[ "* " + current ];
+
+				// If none found, seek a pair
+				if ( !conv ) {
+					for ( conv2 in converters ) {
+
+						// If conv2 outputs current
+						tmp = conv2.split( " " );
+						if ( tmp[ 1 ] === current ) {
+
+							// If prev can be converted to accepted input
+							conv = converters[ prev + " " + tmp[ 0 ] ] ||
+								converters[ "* " + tmp[ 0 ] ];
+							if ( conv ) {
+
+								// Condense equivalence converters
+								if ( conv === true ) {
+									conv = converters[ conv2 ];
+
+								// Otherwise, insert the intermediate dataType
+								} else if ( converters[ conv2 ] !== true ) {
+									current = tmp[ 0 ];
+									dataTypes.unshift( tmp[ 1 ] );
+								}
+								break;
+							}
+						}
+					}
+				}
+
+				// Apply converter (if not an equivalence)
+				if ( conv !== true ) {
+
+					// Unless errors are allowed to bubble, catch and return them
+					if ( conv && s.throws ) {
+						response = conv( response );
+					} else {
+						try {
+							response = conv( response );
+						} catch ( e ) {
+							return {
+								state: "parsererror",
+								error: conv ? e : "No conversion from " + prev + " to " + current
+							};
+						}
+					}
+				}
+			}
+		}
+	}
+
+	return { state: "success", data: response };
+}
+
+jQuery.extend( {
+
+	// Counter for holding the number of active queries
+	active: 0,
+
+	// Last-Modified header cache for next request
+	lastModified: {},
+	etag: {},
+
+	ajaxSettings: {
+		url: location.href,
+		type: "GET",
+		isLocal: rlocalProtocol.test( location.protocol ),
+		global: true,
+		processData: true,
+		async: true,
+		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
+
+		/*
+		timeout: 0,
+		data: null,
+		dataType: null,
+		username: null,
+		password: null,
+		cache: null,
+		throws: false,
+		traditional: false,
+		headers: {},
+		*/
+
+		accepts: {
+			"*": allTypes,
+			text: "text/plain",
+			html: "text/html",
+			xml: "application/xml, text/xml",
+			json: "application/json, text/javascript"
+		},
+
+		contents: {
+			xml: /\bxml\b/,
+			html: /\bhtml/,
+			json: /\bjson\b/
+		},
+
+		responseFields: {
+			xml: "responseXML",
+			text: "responseText",
+			json: "responseJSON"
+		},
+
+		// Data converters
+		// Keys separate source (or catchall "*") and destination types with a single space
+		converters: {
+
+			// Convert anything to text
+			"* text": String,
+
+			// Text to html (true = no transformation)
+			"text html": true,
+
+			// Evaluate text as a json expression
+			"text json": JSON.parse,
+
+			// Parse text as xml
+			"text xml": jQuery.parseXML
+		},
+
+		// For options that shouldn't be deep extended:
+		// you can add your own custom options here if
+		// and when you create one that shouldn't be
+		// deep extended (see ajaxExtend)
+		flatOptions: {
+			url: true,
+			context: true
+		}
+	},
+
+	// Creates a full fledged settings object into target
+	// with both ajaxSettings and settings fields.
+	// If target is omitted, writes into ajaxSettings.
+	ajaxSetup: function( target, settings ) {
+		return settings ?
+
+			// Building a settings object
+			ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) :
+
+			// Extending ajaxSettings
+			ajaxExtend( jQuery.ajaxSettings, target );
+	},
+
+	ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),
+	ajaxTransport: addToPrefiltersOrTransports( transports ),
+
+	// Main method
+	ajax: function( url, options ) {
+
+		// If url is an object, simulate pre-1.5 signature
+		if ( typeof url === "object" ) {
+			options = url;
+			url = undefined;
+		}
+
+		// Force options to be an object
+		options = options || {};
+
+		var transport,
+
+			// URL without anti-cache param
+			cacheURL,
+
+			// Response headers
+			responseHeadersString,
+			responseHeaders,
+
+			// timeout handle
+			timeoutTimer,
+
+			// Url cleanup var
+			urlAnchor,
+
+			// Request state (becomes false upon send and true upon completion)
+			completed,
+
+			// To know if global events are to be dispatched
+			fireGlobals,
+
+			// Loop variable
+			i,
+
+			// uncached part of the url
+			uncached,
+
+			// Create the final options object
+			s = jQuery.ajaxSetup( {}, options ),
+
+			// Callbacks context
+			callbackContext = s.context || s,
+
+			// Context for global events is callbackContext if it is a DOM node or jQuery collection
+			globalEventContext = s.context &&
+				( callbackContext.nodeType || callbackContext.jquery ) ?
+					jQuery( callbackContext ) :
+					jQuery.event,
+
+			// Deferreds
+			deferred = jQuery.Deferred(),
+			completeDeferred = jQuery.Callbacks( "once memory" ),
+
+			// Status-dependent callbacks
+			statusCode = s.statusCode || {},
+
+			// Headers (they are sent all at once)
+			requestHeaders = {},
+			requestHeadersNames = {},
+
+			// Default abort message
+			strAbort = "canceled",
+
+			// Fake xhr
+			jqXHR = {
+				readyState: 0,
+
+				// Builds headers hashtable if needed
+				getResponseHeader: function( key ) {
+					var match;
+					if ( completed ) {
+						if ( !responseHeaders ) {
+							responseHeaders = {};
+							while ( ( match = rheaders.exec( responseHeadersString ) ) ) {
+								responseHeaders[ match[ 1 ].toLowerCase() ] = match[ 2 ];
+							}
+						}
+						match = responseHeaders[ key.toLowerCase() ];
+					}
+					return match == null ? null : match;
+				},
+
+				// Raw string
+				getAllResponseHeaders: function() {
+					return completed ? responseHeadersString : null;
+				},
+
+				// Caches the header
+				setRequestHeader: function( name, value ) {
+					if ( completed == null ) {
+						name = requestHeadersNames[ name.toLowerCase() ] =
+							requestHeadersNames[ name.toLowerCase() ] || name;
+						requestHeaders[ name ] = value;
+					}
+					return this;
+				},
+
+				// Overrides response content-type header
+				overrideMimeType: function( type ) {
+					if ( completed == null ) {
+						s.mimeType = type;
+					}
+					return this;
+				},
+
+				// Status-dependent callbacks
+				statusCode: function( map ) {
+					var code;
+					if ( map ) {
+						if ( completed ) {
+
+							// Execute the appropriate callbacks
+							jqXHR.always( map[ jqXHR.status ] );
+						} else {
+
+							// Lazy-add the new callbacks in a way that preserves old ones
+							for ( code in map ) {
+								statusCode[ code ] = [ statusCode[ code ], map[ code ] ];
+							}
+						}
+					}
+					return this;
+				},
+
+				// Cancel the request
+				abort: function( statusText ) {
+					var finalText = statusText || strAbort;
+					if ( transport ) {
+						transport.abort( finalText );
+					}
+					done( 0, finalText );
+					return this;
+				}
+			};
+
+		// Attach deferreds
+		deferred.promise( jqXHR );
+
+		// Add protocol if not provided (prefilters might expect it)
+		// Handle falsy url in the settings object (#10093: consistency with old signature)
+		// We also use the url parameter if available
+		s.url = ( ( url || s.url || location.href ) + "" )
+			.replace( rprotocol, location.protocol + "//" );
+
+		// Alias method option to type as per ticket #12004
+		s.type = options.method || options.type || s.method || s.type;
+
+		// Extract dataTypes list
+		s.dataTypes = ( s.dataType || "*" ).toLowerCase().match( rnothtmlwhite ) || [ "" ];
+
+		// A cross-domain request is in order when the origin doesn't match the current origin.
+		if ( s.crossDomain == null ) {
+			urlAnchor = document.createElement( "a" );
+
+			// Support: IE <=8 - 11, Edge 12 - 13
+			// IE throws exception on accessing the href property if url is malformed,
+			// e.g. http://example.com:80x/
+			try {
+				urlAnchor.href = s.url;
+
+				// Support: IE <=8 - 11 only
+				// Anchor's host property isn't correctly set when s.url is relative
+				urlAnchor.href = urlAnchor.href;
+				s.crossDomain = originAnchor.protocol + "//" + originAnchor.host !==
+					urlAnchor.protocol + "//" + urlAnchor.host;
+			} catch ( e ) {
+
+				// If there is an error parsing the URL, assume it is crossDomain,
+				// it can be rejected by the transport if it is invalid
+				s.crossDomain = true;
+			}
+		}
+
+		// Convert data if not already a string
+		if ( s.data && s.processData && typeof s.data !== "string" ) {
+			s.data = jQuery.param( s.data, s.traditional );
+		}
+
+		// Apply prefilters
+		inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
+
+		// If request was aborted inside a prefilter, stop there
+		if ( completed ) {
+			return jqXHR;
+		}
+
+		// We can fire global events as of now if asked to
+		// Don't fire events if jQuery.event is undefined in an AMD-usage scenario (#15118)
+		fireGlobals = jQuery.event && s.global;
+
+		// Watch for a new set of requests
+		if ( fireGlobals && jQuery.active++ === 0 ) {
+			jQuery.event.trigger( "ajaxStart" );
+		}
+
+		// Uppercase the type
+		s.type = s.type.toUpperCase();
+
+		// Determine if request has content
+		s.hasContent = !rnoContent.test( s.type );
+
+		// Save the URL in case we're toying with the If-Modified-Since
+		// and/or If-None-Match header later on
+		// Remove hash to simplify url manipulation
+		cacheURL = s.url.replace( rhash, "" );
+
+		// More options handling for requests with no content
+		if ( !s.hasContent ) {
+
+			// Remember the hash so we can put it back
+			uncached = s.url.slice( cacheURL.length );
+
+			// If data is available, append data to url
+			if ( s.data ) {
+				cacheURL += ( rquery.test( cacheURL ) ? "&" : "?" ) + s.data;
+
+				// #9682: remove data so that it's not used in an eventual retry
+				delete s.data;
+			}
+
+			// Add or update anti-cache param if needed
+			if ( s.cache === false ) {
+				cacheURL = cacheURL.replace( rantiCache, "$1" );
+				uncached = ( rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + ( nonce++ ) + uncached;
+			}
+
+			// Put hash and anti-cache on the URL that will be requested (gh-1732)
+			s.url = cacheURL + uncached;
+
+		// Change '%20' to '+' if this is encoded form body content (gh-2658)
+		} else if ( s.data && s.processData &&
+			( s.contentType || "" ).indexOf( "application/x-www-form-urlencoded" ) === 0 ) {
+			s.data = s.data.replace( r20, "+" );
+		}
+
+		// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+		if ( s.ifModified ) {
+			if ( jQuery.lastModified[ cacheURL ] ) {
+				jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
+			}
+			if ( jQuery.etag[ cacheURL ] ) {
+				jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
+			}
+		}
+
+		// Set the correct header, if data is being sent
+		if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
+			jqXHR.setRequestHeader( "Content-Type", s.contentType );
+		}
+
+		// Set the Accepts header for the server, depending on the dataType
+		jqXHR.setRequestHeader(
+			"Accept",
+			s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[ 0 ] ] ?
+				s.accepts[ s.dataTypes[ 0 ] ] +
+					( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
+				s.accepts[ "*" ]
+		);
+
+		// Check for headers option
+		for ( i in s.headers ) {
+			jqXHR.setRequestHeader( i, s.headers[ i ] );
+		}
+
+		// Allow custom headers/mimetypes and early abort
+		if ( s.beforeSend &&
+			( s.beforeSend.call( callbackContext, jqXHR, s ) === false || completed ) ) {
+
+			// Abort if not done already and return
+			return jqXHR.abort();
+		}
+
+		// Aborting is no longer a cancellation
+		strAbort = "abort";
+
+		// Install callbacks on deferreds
+		completeDeferred.add( s.complete );
+		jqXHR.done( s.success );
+		jqXHR.fail( s.error );
+
+		// Get transport
+		transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
+
+		// If no transport, we auto-abort
+		if ( !transport ) {
+			done( -1, "No Transport" );
+		} else {
+			jqXHR.readyState = 1;
+
+			// Send global event
+			if ( fireGlobals ) {
+				globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
+			}
+
+			// If request was aborted inside ajaxSend, stop there
+			if ( completed ) {
+				return jqXHR;
+			}
+
+			// Timeout
+			if ( s.async && s.timeout > 0 ) {
+				timeoutTimer = window.setTimeout( function() {
+					jqXHR.abort( "timeout" );
+				}, s.timeout );
+			}
+
+			try {
+				completed = false;
+				transport.send( requestHeaders, done );
+			} catch ( e ) {
+
+				// Rethrow post-completion exceptions
+				if ( completed ) {
+					throw e;
+				}
+
+				// Propagate others as results
+				done( -1, e );
+			}
+		}
+
+		// Callback for when everything is done
+		function done( status, nativeStatusText, responses, headers ) {
+			var isSuccess, success, error, response, modified,
+				statusText = nativeStatusText;
+
+			// Ignore repeat invocations
+			if ( completed ) {
+				return;
+			}
+
+			completed = true;
+
+			// Clear timeout if it exists
+			if ( timeoutTimer ) {
+				window.clearTimeout( timeoutTimer );
+			}
+
+			// Dereference transport for early garbage collection
+			// (no matter how long the jqXHR object will be used)
+			transport = undefined;
+
+			// Cache response headers
+			responseHeadersString = headers || "";
+
+			// Set readyState
+			jqXHR.readyState = status > 0 ? 4 : 0;
+
+			// Determine if successful
+			isSuccess = status >= 200 && status < 300 || status === 304;
+
+			// Get response data
+			if ( responses ) {
+				response = ajaxHandleResponses( s, jqXHR, responses );
+			}
+
+			// Convert no matter what (that way responseXXX fields are always set)
+			response = ajaxConvert( s, response, jqXHR, isSuccess );
+
+			// If successful, handle type chaining
+			if ( isSuccess ) {
+
+				// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+				if ( s.ifModified ) {
+					modified = jqXHR.getResponseHeader( "Last-Modified" );
+					if ( modified ) {
+						jQuery.lastModified[ cacheURL ] = modified;
+					}
+					modified = jqXHR.getResponseHeader( "etag" );
+					if ( modified ) {
+						jQuery.etag[ cacheURL ] = modified;
+					}
+				}
+
+				// if no content
+				if ( status === 204 || s.type === "HEAD" ) {
+					statusText = "nocontent";
+
+				// if not modified
+				} else if ( status === 304 ) {
+					statusText = "notmodified";
+
+				// If we have data, let's convert it
+				} else {
+					statusText = response.state;
+					success = response.data;
+					error = response.error;
+					isSuccess = !error;
+				}
+			} else {
+
+				// Extract error from statusText and normalize for non-aborts
+				error = statusText;
+				if ( status || !statusText ) {
+					statusText = "error";
+					if ( status < 0 ) {
+						status = 0;
+					}
+				}
+			}
+
+			// Set data for the fake xhr object
+			jqXHR.status = status;
+			jqXHR.statusText = ( nativeStatusText || statusText ) + "";
+
+			// Success/Error
+			if ( isSuccess ) {
+				deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
+			} else {
+				deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
+			}
+
+			// Status-dependent callbacks
+			jqXHR.statusCode( statusCode );
+			statusCode = undefined;
+
+			if ( fireGlobals ) {
+				globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",
+					[ jqXHR, s, isSuccess ? success : error ] );
+			}
+
+			// Complete
+			completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
+
+			if ( fireGlobals ) {
+				globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
+
+				// Handle the global AJAX counter
+				if ( !( --jQuery.active ) ) {
+					jQuery.event.trigger( "ajaxStop" );
+				}
+			}
+		}
+
+		return jqXHR;
+	},
+
+	getJSON: function( url, data, callback ) {
+		return jQuery.get( url, data, callback, "json" );
+	},
+
+	getScript: function( url, callback ) {
+		return jQuery.get( url, undefined, callback, "script" );
+	}
+} );
+
+jQuery.each( [ "get", "post" ], function( i, method ) {
+	jQuery[ method ] = function( url, data, callback, type ) {
+
+		// Shift arguments if data argument was omitted
+		if ( jQuery.isFunction( data ) ) {
+			type = type || callback;
+			callback = data;
+			data = undefined;
+		}
+
+		// The url can be an options object (which then must have .url)
+		return jQuery.ajax( jQuery.extend( {
+			url: url,
+			type: method,
+			dataType: type,
+			data: data,
+			success: callback
+		}, jQuery.isPlainObject( url ) && url ) );
+	};
+} );
+
+
+jQuery._evalUrl = function( url ) {
+	return jQuery.ajax( {
+		url: url,
+
+		// Make this explicit, since user can override this through ajaxSetup (#11264)
+		type: "GET",
+		dataType: "script",
+		cache: true,
+		async: false,
+		global: false,
+		"throws": true
+	} );
+};
+
+
+jQuery.fn.extend( {
+	wrapAll: function( html ) {
+		var wrap;
+
+		if ( this[ 0 ] ) {
+			if ( jQuery.isFunction( html ) ) {
+				html = html.call( this[ 0 ] );
+			}
+
+			// The elements to wrap the target around
+			wrap = jQuery( html, this[ 0 ].ownerDocument ).eq( 0 ).clone( true );
+
+			if ( this[ 0 ].parentNode ) {
+				wrap.insertBefore( this[ 0 ] );
+			}
+
+			wrap.map( function() {
+				var elem = this;
+
+				while ( elem.firstElementChild ) {
+					elem = elem.firstElementChild;
+				}
+
+				return elem;
+			} ).append( this );
+		}
+
+		return this;
+	},
+
+	wrapInner: function( html ) {
+		if ( jQuery.isFunction( html ) ) {
+			return this.each( function( i ) {
+				jQuery( this ).wrapInner( html.call( this, i ) );
+			} );
+		}
+
+		return this.each( function() {
+			var self = jQuery( this ),
+				contents = self.contents();
+
+			if ( contents.length ) {
+				contents.wrapAll( html );
+
+			} else {
+				self.append( html );
+			}
+		} );
+	},
+
+	wrap: function( html ) {
+		var isFunction = jQuery.isFunction( html );
+
+		return this.each( function( i ) {
+			jQuery( this ).wrapAll( isFunction ? html.call( this, i ) : html );
+		} );
+	},
+
+	unwrap: function( selector ) {
+		this.parent( selector ).not( "body" ).each( function() {
+			jQuery( this ).replaceWith( this.childNodes );
+		} );
+		return this;
+	}
+} );
+
+
+jQuery.expr.pseudos.hidden = function( elem ) {
+	return !jQuery.expr.pseudos.visible( elem );
+};
+jQuery.expr.pseudos.visible = function( elem ) {
+	return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
+};
+
+
+
+
+jQuery.ajaxSettings.xhr = function() {
+	try {
+		return new window.XMLHttpRequest();
+	} catch ( e ) {}
+};
+
+var xhrSuccessStatus = {
+
+		// File protocol always yields status code 0, assume 200
+		0: 200,
+
+		// Support: IE <=9 only
+		// #1450: sometimes IE returns 1223 when it should be 204
+		1223: 204
+	},
+	xhrSupported = jQuery.ajaxSettings.xhr();
+
+support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );
+support.ajax = xhrSupported = !!xhrSupported;
+
+jQuery.ajaxTransport( function( options ) {
+	var callback, errorCallback;
+
+	// Cross domain only allowed if supported through XMLHttpRequest
+	if ( support.cors || xhrSupported && !options.crossDomain ) {
+		return {
+			send: function( headers, complete ) {
+				var i,
+					xhr = options.xhr();
+
+				xhr.open(
+					options.type,
+					options.url,
+					options.async,
+					options.username,
+					options.password
+				);
+
+				// Apply custom fields if provided
+				if ( options.xhrFields ) {
+					for ( i in options.xhrFields ) {
+						xhr[ i ] = options.xhrFields[ i ];
+					}
+				}
+
+				// Override mime type if needed
+				if ( options.mimeType && xhr.overrideMimeType ) {
+					xhr.overrideMimeType( options.mimeType );
+				}
+
+				// X-Requested-With header
+				// For cross-domain requests, seeing as conditions for a preflight are
+				// akin to a jigsaw puzzle, we simply never set it to be sure.
+				// (it can always be set on a per-request basis or even using ajaxSetup)
+				// For same-domain requests, won't change header if already provided.
+				if ( !options.crossDomain && !headers[ "X-Requested-With" ] ) {
+					headers[ "X-Requested-With" ] = "XMLHttpRequest";
+				}
+
+				// Set headers
+				for ( i in headers ) {
+					xhr.setRequestHeader( i, headers[ i ] );
+				}
+
+				// Callback
+				callback = function( type ) {
+					return function() {
+						if ( callback ) {
+							callback = errorCallback = xhr.onload =
+								xhr.onerror = xhr.onabort = xhr.onreadystatechange = null;
+
+							if ( type === "abort" ) {
+								xhr.abort();
+							} else if ( type === "error" ) {
+
+								// Support: IE <=9 only
+								// On a manual native abort, IE9 throws
+								// errors on any property access that is not readyState
+								if ( typeof xhr.status !== "number" ) {
+									complete( 0, "error" );
+								} else {
+									complete(
+
+										// File: protocol always yields status 0; see #8605, #14207
+										xhr.status,
+										xhr.statusText
+									);
+								}
+							} else {
+								complete(
+									xhrSuccessStatus[ xhr.status ] || xhr.status,
+									xhr.statusText,
+
+									// Support: IE <=9 only
+									// IE9 has no XHR2 but throws on binary (trac-11426)
+									// For XHR2 non-text, let the caller handle it (gh-2498)
+									( xhr.responseType || "text" ) !== "text"  ||
+									typeof xhr.responseText !== "string" ?
+										{ binary: xhr.response } :
+										{ text: xhr.responseText },
+									xhr.getAllResponseHeaders()
+								);
+							}
+						}
+					};
+				};
+
+				// Listen to events
+				xhr.onload = callback();
+				errorCallback = xhr.onerror = callback( "error" );
+
+				// Support: IE 9 only
+				// Use onreadystatechange to replace onabort
+				// to handle uncaught aborts
+				if ( xhr.onabort !== undefined ) {
+					xhr.onabort = errorCallback;
+				} else {
+					xhr.onreadystatechange = function() {
+
+						// Check readyState before timeout as it changes
+						if ( xhr.readyState === 4 ) {
+
+							// Allow onerror to be called first,
+							// but that will not handle a native abort
+							// Also, save errorCallback to a variable
+							// as xhr.onerror cannot be accessed
+							window.setTimeout( function() {
+								if ( callback ) {
+									errorCallback();
+								}
+							} );
+						}
+					};
+				}
+
+				// Create the abort callback
+				callback = callback( "abort" );
+
+				try {
+
+					// Do send the request (this may raise an exception)
+					xhr.send( options.hasContent && options.data || null );
+				} catch ( e ) {
+
+					// #14683: Only rethrow if this hasn't been notified as an error yet
+					if ( callback ) {
+						throw e;
+					}
+				}
+			},
+
+			abort: function() {
+				if ( callback ) {
+					callback();
+				}
+			}
+		};
+	}
+} );
+
+
+
+
+// Prevent auto-execution of scripts when no explicit dataType was provided (See gh-2432)
+jQuery.ajaxPrefilter( function( s ) {
+	if ( s.crossDomain ) {
+		s.contents.script = false;
+	}
+} );
+
+// Install script dataType
+jQuery.ajaxSetup( {
+	accepts: {
+		script: "text/javascript, application/javascript, " +
+			"application/ecmascript, application/x-ecmascript"
+	},
+	contents: {
+		script: /\b(?:java|ecma)script\b/
+	},
+	converters: {
+		"text script": function( text ) {
+			jQuery.globalEval( text );
+			return text;
+		}
+	}
+} );
+
+// Handle cache's special case and crossDomain
+jQuery.ajaxPrefilter( "script", function( s ) {
+	if ( s.cache === undefined ) {
+		s.cache = false;
+	}
+	if ( s.crossDomain ) {
+		s.type = "GET";
+	}
+} );
+
+// Bind script tag hack transport
+jQuery.ajaxTransport( "script", function( s ) {
+
+	// This transport only deals with cross domain requests
+	if ( s.crossDomain ) {
+		var script, callback;
+		return {
+			send: function( _, complete ) {
+				script = jQuery( "<script>" ).prop( {
+					charset: s.scriptCharset,
+					src: s.url
+				} ).on(
+					"load error",
+					callback = function( evt ) {
+						script.remove();
+						callback = null;
+						if ( evt ) {
+							complete( evt.type === "error" ? 404 : 200, evt.type );
+						}
+					}
+				);
+
+				// Use native DOM manipulation to avoid our domManip AJAX trickery
+				document.head.appendChild( script[ 0 ] );
+			},
+			abort: function() {
+				if ( callback ) {
+					callback();
+				}
+			}
+		};
+	}
+} );
+
+
+
+
+var oldCallbacks = [],
+	rjsonp = /(=)\?(?=&|$)|\?\?/;
+
+// Default jsonp settings
+jQuery.ajaxSetup( {
+	jsonp: "callback",
+	jsonpCallback: function() {
+		var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( nonce++ ) );
+		this[ callback ] = true;
+		return callback;
+	}
+} );
+
+// Detect, normalize options and install callbacks for jsonp requests
+jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {
+
+	var callbackName, overwritten, responseContainer,
+		jsonProp = s.jsonp !== false && ( rjsonp.test( s.url ) ?
+			"url" :
+			typeof s.data === "string" &&
+				( s.contentType || "" )
+					.indexOf( "application/x-www-form-urlencoded" ) === 0 &&
+				rjsonp.test( s.data ) && "data"
+		);
+
+	// Handle iff the expected data type is "jsonp" or we have a parameter to set
+	if ( jsonProp || s.dataTypes[ 0 ] === "jsonp" ) {
+
+		// Get callback name, remembering preexisting value associated with it
+		callbackName = s.jsonpCallback = jQuery.isFunction( s.jsonpCallback ) ?
+			s.jsonpCallback() :
+			s.jsonpCallback;
+
+		// Insert callback into url or form data
+		if ( jsonProp ) {
+			s[ jsonProp ] = s[ jsonProp ].replace( rjsonp, "$1" + callbackName );
+		} else if ( s.jsonp !== false ) {
+			s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.jsonp + "=" + callbackName;
+		}
+
+		// Use data converter to retrieve json after script execution
+		s.converters[ "script json" ] = function() {
+			if ( !responseContainer ) {
+				jQuery.error( callbackName + " was not called" );
+			}
+			return responseContainer[ 0 ];
+		};
+
+		// Force json dataType
+		s.dataTypes[ 0 ] = "json";
+
+		// Install callback
+		overwritten = window[ callbackName ];
+		window[ callbackName ] = function() {
+			responseContainer = arguments;
+		};
+
+		// Clean-up function (fires after converters)
+		jqXHR.always( function() {
+
+			// If previous value didn't exist - remove it
+			if ( overwritten === undefined ) {
+				jQuery( window ).removeProp( callbackName );
+
+			// Otherwise restore preexisting value
+			} else {
+				window[ callbackName ] = overwritten;
+			}
+
+			// Save back as free
+			if ( s[ callbackName ] ) {
+
+				// Make sure that re-using the options doesn't screw things around
+				s.jsonpCallback = originalSettings.jsonpCallback;
+
+				// Save the callback name for future use
+				oldCallbacks.push( callbackName );
+			}
+
+			// Call if it was a function and we have a response
+			if ( responseContainer && jQuery.isFunction( overwritten ) ) {
+				overwritten( responseContainer[ 0 ] );
+			}
+
+			responseContainer = overwritten = undefined;
+		} );
+
+		// Delegate to script
+		return "script";
+	}
+} );
+
+
+
+
+// Support: Safari 8 only
+// In Safari 8 documents created via document.implementation.createHTMLDocument
+// collapse sibling forms: the second one becomes a child of the first one.
+// Because of that, this security measure has to be disabled in Safari 8.
+// https://bugs.webkit.org/show_bug.cgi?id=137337
+support.createHTMLDocument = ( function() {
+	var body = document.implementation.createHTMLDocument( "" ).body;
+	body.innerHTML = "<form></form><form></form>";
+	return body.childNodes.length === 2;
+} )();
+
+
+// Argument "data" should be string of html
+// context (optional): If specified, the fragment will be created in this context,
+// defaults to document
+// keepScripts (optional): If true, will include scripts passed in the html string
+jQuery.parseHTML = function( data, context, keepScripts ) {
+	if ( typeof data !== "string" ) {
+		return [];
+	}
+	if ( typeof context === "boolean" ) {
+		keepScripts = context;
+		context = false;
+	}
+
+	var base, parsed, scripts;
+
+	if ( !context ) {
+
+		// Stop scripts or inline event handlers from being executed immediately
+		// by using document.implementation
+		if ( support.createHTMLDocument ) {
+			context = document.implementation.createHTMLDocument( "" );
+
+			// Set the base href for the created document
+			// so any parsed elements with URLs
+			// are based on the document's URL (gh-2965)
+			base = context.createElement( "base" );
+			base.href = document.location.href;
+			context.head.appendChild( base );
+		} else {
+			context = document;
+		}
+	}
+
+	parsed = rsingleTag.exec( data );
+	scripts = !keepScripts && [];
+
+	// Single tag
+	if ( parsed ) {
+		return [ context.createElement( parsed[ 1 ] ) ];
+	}
+
+	parsed = buildFragment( [ data ], context, scripts );
+
+	if ( scripts && scripts.length ) {
+		jQuery( scripts ).remove();
+	}
+
+	return jQuery.merge( [], parsed.childNodes );
+};
+
+
+/**
+ * Load a url into a page
+ */
+jQuery.fn.load = function( url, params, callback ) {
+	var selector, type, response,
+		self = this,
+		off = url.indexOf( " " );
+
+	if ( off > -1 ) {
+		selector = stripAndCollapse( url.slice( off ) );
+		url = url.slice( 0, off );
+	}
+
+	// If it's a function
+	if ( jQuery.isFunction( params ) ) {
+
+		// We assume that it's the callback
+		callback = params;
+		params = undefined;
+
+	// Otherwise, build a param string
+	} else if ( params && typeof params === "object" ) {
+		type = "POST";
+	}
+
+	// If we have elements to modify, make the request
+	if ( self.length > 0 ) {
+		jQuery.ajax( {
+			url: url,
+
+			// If "type" variable is undefined, then "GET" method will be used.
+			// Make value of this field explicit since
+			// user can override it through ajaxSetup method
+			type: type || "GET",
+			dataType: "html",
+			data: params
+		} ).done( function( responseText ) {
+
+			// Save response for use in complete callback
+			response = arguments;
+
+			self.html( selector ?
+
+				// If a selector was specified, locate the right elements in a dummy div
+				// Exclude scripts to avoid IE 'Permission Denied' errors
+				jQuery( "<div>" ).append( jQuery.parseHTML( responseText ) ).find( selector ) :
+
+				// Otherwise use the full result
+				responseText );
+
+		// If the request succeeds, this function gets "data", "status", "jqXHR"
+		// but they are ignored because response was set above.
+		// If it fails, this function gets "jqXHR", "status", "error"
+		} ).always( callback && function( jqXHR, status ) {
+			self.each( function() {
+				callback.apply( this, response || [ jqXHR.responseText, status, jqXHR ] );
+			} );
+		} );
+	}
+
+	return this;
+};
+
+
+
+
+// Attach a bunch of functions for handling common AJAX events
+jQuery.each( [
+	"ajaxStart",
+	"ajaxStop",
+	"ajaxComplete",
+	"ajaxError",
+	"ajaxSuccess",
+	"ajaxSend"
+], function( i, type ) {
+	jQuery.fn[ type ] = function( fn ) {
+		return this.on( type, fn );
+	};
+} );
+
+
+
+
+jQuery.expr.pseudos.animated = function( elem ) {
+	return jQuery.grep( jQuery.timers, function( fn ) {
+		return elem === fn.elem;
+	} ).length;
+};
+
+
+
+
+jQuery.offset = {
+	setOffset: function( elem, options, i ) {
+		var curPosition, curLeft, curCSSTop, curTop, curOffset, curCSSLeft, calculatePosition,
+			position = jQuery.css( elem, "position" ),
+			curElem = jQuery( elem ),
+			props = {};
+
+		// Set position first, in-case top/left are set even on static elem
+		if ( position === "static" ) {
+			elem.style.position = "relative";
+		}
+
+		curOffset = curElem.offset();
+		curCSSTop = jQuery.css( elem, "top" );
+		curCSSLeft = jQuery.css( elem, "left" );
+		calculatePosition = ( position === "absolute" || position === "fixed" ) &&
+			( curCSSTop + curCSSLeft ).indexOf( "auto" ) > -1;
+
+		// Need to be able to calculate position if either
+		// top or left is auto and position is either absolute or fixed
+		if ( calculatePosition ) {
+			curPosition = curElem.position();
+			curTop = curPosition.top;
+			curLeft = curPosition.left;
+
+		} else {
+			curTop = parseFloat( curCSSTop ) || 0;
+			curLeft = parseFloat( curCSSLeft ) || 0;
+		}
+
+		if ( jQuery.isFunction( options ) ) {
+
+			// Use jQuery.extend here to allow modification of coordinates argument (gh-1848)
+			options = options.call( elem, i, jQuery.extend( {}, curOffset ) );
+		}
+
+		if ( options.top != null ) {
+			props.top = ( options.top - curOffset.top ) + curTop;
+		}
+		if ( options.left != null ) {
+			props.left = ( options.left - curOffset.left ) + curLeft;
+		}
+
+		if ( "using" in options ) {
+			options.using.call( elem, props );
+
+		} else {
+			curElem.css( props );
+		}
+	}
+};
+
+jQuery.fn.extend( {
+	offset: function( options ) {
+
+		// Preserve chaining for setter
+		if ( arguments.length ) {
+			return options === undefined ?
+				this :
+				this.each( function( i ) {
+					jQuery.offset.setOffset( this, options, i );
+				} );
+		}
+
+		var doc, docElem, rect, win,
+			elem = this[ 0 ];
+
+		if ( !elem ) {
+			return;
+		}
+
+		// Return zeros for disconnected and hidden (display: none) elements (gh-2310)
+		// Support: IE <=11 only
+		// Running getBoundingClientRect on a
+		// disconnected node in IE throws an error
+		if ( !elem.getClientRects().length ) {
+			return { top: 0, left: 0 };
+		}
+
+		rect = elem.getBoundingClientRect();
+
+		doc = elem.ownerDocument;
+		docElem = doc.documentElement;
+		win = doc.defaultView;
+
+		return {
+			top: rect.top + win.pageYOffset - docElem.clientTop,
+			left: rect.left + win.pageXOffset - docElem.clientLeft
+		};
+	},
+
+	position: function() {
+		if ( !this[ 0 ] ) {
+			return;
+		}
+
+		var offsetParent, offset,
+			elem = this[ 0 ],
+			parentOffset = { top: 0, left: 0 };
+
+		// Fixed elements are offset from window (parentOffset = {top:0, left: 0},
+		// because it is its only offset parent
+		if ( jQuery.css( elem, "position" ) === "fixed" ) {
+
+			// Assume getBoundingClientRect is there when computed position is fixed
+			offset = elem.getBoundingClientRect();
+
+		} else {
+
+			// Get *real* offsetParent
+			offsetParent = this.offsetParent();
+
+			// Get correct offsets
+			offset = this.offset();
+			if ( !nodeName( offsetParent[ 0 ], "html" ) ) {
+				parentOffset = offsetParent.offset();
+			}
+
+			// Add offsetParent borders
+			parentOffset = {
+				top: parentOffset.top + jQuery.css( offsetParent[ 0 ], "borderTopWidth", true ),
+				left: parentOffset.left + jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true )
+			};
+		}
+
+		// Subtract parent offsets and element margins
+		return {
+			top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ),
+			left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true )
+		};
+	},
+
+	// This method will return documentElement in the following cases:
+	// 1) For the element inside the iframe without offsetParent, this method will return
+	//    documentElement of the parent window
+	// 2) For the hidden or detached element
+	// 3) For body or html element, i.e. in case of the html node - it will return itself
+	//
+	// but those exceptions were never presented as a real life use-cases
+	// and might be considered as more preferable results.
+	//
+	// This logic, however, is not guaranteed and can change at any point in the future
+	offsetParent: function() {
+		return this.map( function() {
+			var offsetParent = this.offsetParent;
+
+			while ( offsetParent && jQuery.css( offsetParent, "position" ) === "static" ) {
+				offsetParent = offsetParent.offsetParent;
+			}
+
+			return offsetParent || documentElement;
+		} );
+	}
+} );
+
+// Create scrollLeft and scrollTop methods
+jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
+	var top = "pageYOffset" === prop;
+
+	jQuery.fn[ method ] = function( val ) {
+		return access( this, function( elem, method, val ) {
+
+			// Coalesce documents and windows
+			var win;
+			if ( jQuery.isWindow( elem ) ) {
+				win = elem;
+			} else if ( elem.nodeType === 9 ) {
+				win = elem.defaultView;
+			}
+
+			if ( val === undefined ) {
+				return win ? win[ prop ] : elem[ method ];
+			}
+
+			if ( win ) {
+				win.scrollTo(
+					!top ? val : win.pageXOffset,
+					top ? val : win.pageYOffset
+				);
+
+			} else {
+				elem[ method ] = val;
+			}
+		}, method, val, arguments.length );
+	};
+} );
+
+// Support: Safari <=7 - 9.1, Chrome <=37 - 49
+// Add the top/left cssHooks using jQuery.fn.position
+// Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=29084
+// Blink bug: https://bugs.chromium.org/p/chromium/issues/detail?id=589347
+// getComputedStyle returns percent when specified for top/left/bottom/right;
+// rather than make the css module depend on the offset module, just check for it here
+jQuery.each( [ "top", "left" ], function( i, prop ) {
+	jQuery.cssHooks[ prop ] = addGetHookIf( support.pixelPosition,
+		function( elem, computed ) {
+			if ( computed ) {
+				computed = curCSS( elem, prop );
+
+				// If curCSS returns percentage, fallback to offset
+				return rnumnonpx.test( computed ) ?
+					jQuery( elem ).position()[ prop ] + "px" :
+					computed;
+			}
+		}
+	);
+} );
+
+
+// Create innerHeight, innerWidth, height, width, outerHeight and outerWidth methods
+jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
+	jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name },
+		function( defaultExtra, funcName ) {
+
+		// Margin is only for outerHeight, outerWidth
+		jQuery.fn[ funcName ] = function( margin, value ) {
+			var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
+				extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );
+
+			return access( this, function( elem, type, value ) {
+				var doc;
+
+				if ( jQuery.isWindow( elem ) ) {
+
+					// $( window ).outerWidth/Height return w/h including scrollbars (gh-1729)
+					return funcName.indexOf( "outer" ) === 0 ?
+						elem[ "inner" + name ] :
+						elem.document.documentElement[ "client" + name ];
+				}
+
+				// Get document width or height
+				if ( elem.nodeType === 9 ) {
+					doc = elem.documentElement;
+
+					// Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height],
+					// whichever is greatest
+					return Math.max(
+						elem.body[ "scroll" + name ], doc[ "scroll" + name ],
+						elem.body[ "offset" + name ], doc[ "offset" + name ],
+						doc[ "client" + name ]
+					);
+				}
+
+				return value === undefined ?
+
+					// Get width or height on the element, requesting but not forcing parseFloat
+					jQuery.css( elem, type, extra ) :
+
+					// Set width or height on the element
+					jQuery.style( elem, type, value, extra );
+			}, type, chainable ? margin : undefined, chainable );
+		};
+	} );
+} );
+
+
+jQuery.fn.extend( {
+
+	bind: function( types, data, fn ) {
+		return this.on( types, null, data, fn );
+	},
+	unbind: function( types, fn ) {
+		return this.off( types, null, fn );
+	},
+
+	delegate: function( selector, types, data, fn ) {
+		return this.on( types, selector, data, fn );
+	},
+	undelegate: function( selector, types, fn ) {
+
+		// ( namespace ) or ( selector, types [, fn] )
+		return arguments.length === 1 ?
+			this.off( selector, "**" ) :
+			this.off( types, selector || "**", fn );
+	}
+} );
+
+jQuery.holdReady = function( hold ) {
+	if ( hold ) {
+		jQuery.readyWait++;
+	} else {
+		jQuery.ready( true );
+	}
+};
+jQuery.isArray = Array.isArray;
+jQuery.parseJSON = JSON.parse;
+jQuery.nodeName = nodeName;
+
+
+
+
+// Register as a named AMD module, since jQuery can be concatenated with other
+// files that may use define, but not via a proper concatenation script that
+// understands anonymous AMD modules. A named AMD is safest and most robust
+// way to register. Lowercase jquery is used because AMD module names are
+// derived from file names, and jQuery is normally delivered in a lowercase
+// file name. Do this after creating the global so that if an AMD module wants
+// to call noConflict to hide this version of jQuery, it will work.
+
+// Note that for maximum portability, libraries that are not jQuery should
+// declare themselves as anonymous modules, and avoid setting a global if an
+// AMD loader is present. jQuery is a special case. For more information, see
+// https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon
+
+if ( typeof define === "function" && define.amd ) {
+	define( "jquery", [], function() {
+		return jQuery;
+	} );
+}
+
+
+
+
+var
+
+	// Map over jQuery in case of overwrite
+	_jQuery = window.jQuery,
+
+	// Map over the $ in case of overwrite
+	_$ = window.$;
+
+jQuery.noConflict = function( deep ) {
+	if ( window.$ === jQuery ) {
+		window.$ = _$;
+	}
+
+	if ( deep && window.jQuery === jQuery ) {
+		window.jQuery = _jQuery;
+	}
+
+	return jQuery;
+};
+
+// Expose jQuery and $ identifiers, even in AMD
+// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
+// and CommonJS for browser emulators (#13566)
+if ( !noGlobal ) {
+	window.jQuery = window.$ = jQuery;
+}
+
+
+
+
+return jQuery;
+} );
diff --git a/tests/jquery-3.2.1.min.js b/tests/jquery-3.2.1.min.js
deleted file mode 100644
index 644d35e..0000000
--- a/tests/jquery-3.2.1.min.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */
-!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.2.1",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=Array.isArray(d)))?(e?(e=!1,f=c&&Array.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;d<c;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:i.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;d<c;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;f<g;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,f=0,h=[];if(w(a))for(d=a.length;f<d;f++)e=b(a[f],f,c),null!=e&&h.push(e);else for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);return g.apply([],h)},guid:1,proxy:function(a,b){var c,d,e;if("string"==typeof b&&(c=a[b],b=a,a=c),r.isFunction(a))return d=f.call(arguments,2),e=function(){return a.apply(b||this,d.concat(f.call(arguments)))},e.guid=a.guid=a.guid||r.guid++,e},now:Date.now,support:o}),"function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){j["[object "+b+"]"]=b.toLowerCase()});function w(a){var b=!!a&&"length"in a&&a.length,c=r.type(a);return"function"!==c&&!r.isWindow(a)&&("array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a)}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=function(a,b){for(var c=0,d=a.length;c<d;c++)if(a[c]===b)return c;return-1},J="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",K="[\\x20\\t\\r\\n\\f]",L="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",M="\\["+K+"*("+L+")(?:"+K+"*([*^$|!~]?=)"+K+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+L+"))|)"+K+"*\\]",N=":("+L+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",O=new RegExp(K+"+","g"),P=new RegExp("^"+K+"+|((?:^|[^\\\\])(?:\\\\.)*)"+K+"+$","g"),Q=new RegExp("^"+K+"*,"+K+"*"),R=new RegExp("^"+K+"*([>+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(N),U=new RegExp("^"+L+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+N),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),aa=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:d<0?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ba=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ca=function(a,b){return b?"\0"===a?"\ufffd":a.slice(0,-1)+"\\"+a.charCodeAt(a.length-1).toString(16)+" ":"\\"+a},da=function(){m()},ea=ta(function(a){return a.disabled===!0&&("form"in a||"label"in a)},{dir:"parentNode",next:"legend"});try{G.apply(D=H.call(v.childNodes),v.childNodes),D[v.childNodes.length].nodeType}catch(fa){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s=b&&b.ownerDocument,w=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==w&&9!==w&&11!==w)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==w&&(l=Z.exec(a)))if(f=l[1]){if(9===w){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(s&&(j=s.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(l[2])return G.apply(d,b.getElementsByTagName(a)),d;if((f=l[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==w)s=b,r=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(ba,ca):b.setAttribute("id",k=u),o=g(a),h=o.length;while(h--)o[h]="#"+k+" "+sa(o[h]);r=o.join(","),s=$.test(a)&&qa(b.parentNode)||b}if(r)try{return G.apply(d,s.querySelectorAll(r)),d}catch(x){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(P,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("fieldset");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&a.sourceIndex-b.sourceIndex;if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return function(b){return"form"in b?b.parentNode&&b.disabled===!1?"label"in b?"label"in b.parentNode?b.parentNode.disabled===a:b.disabled===a:b.isDisabled===a||b.isDisabled!==!a&&ea(b)===a:b.disabled===a:"label"in b&&b.disabled===a}}function pa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function qa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return!!b&&"HTML"!==b.nodeName},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),v!==n&&(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(n.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){return a.getAttribute("id")===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}}):(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c,d,e,f=b.getElementById(a);if(f){if(c=f.getAttributeNode("id"),c&&c.value===a)return[f];e=b.getElementsByName(a),d=0;while(f=e[d++])if(c=f.getAttributeNode("id"),c&&c.value===a)return[f]}return[]}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){if("undefined"!=typeof b.getElementsByClassName&&p)return b.getElementsByClassName(a)},r=[],q=[],(c.qsa=Y.test(n.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){a.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+K+"*[*^$|!~]?="),2!==a.querySelectorAll(":enabled").length&&q.push(":enabled",":disabled"),o.appendChild(a).disabled=!0,2!==a.querySelectorAll(":disabled").length&&q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Y.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"*"),s.call(a,"[s!='']:x"),r.push("!=",N)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Y.test(o.compareDocumentPosition),t=b||Y.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?I(k,a)-I(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?I(k,a)-I(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?la(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(S,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.escape=function(a){return(a+"").replace(ba,ca)},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(_,aa),a[3]=(a[3]||a[4]||a[5]||"").replace(_,aa),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return V.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&T.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(_,aa).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:!b||(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(O," ")+" ").indexOf(c)>-1:"|="===b&&(e===c||e.slice(0,c.length+1)===c+"-"))}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(P,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(_,aa),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return U.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(_,aa).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:oa(!1),disabled:oa(!0),checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:pa(function(){return[0]}),last:pa(function(a,b){return[b-1]}),eq:pa(function(a,b,c){return[c<0?c+b:c]}),even:pa(function(a,b){for(var c=0;c<b;c+=2)a.push(c);return a}),odd:pa(function(a,b){for(var c=1;c<b;c+=2)a.push(c);return a}),lt:pa(function(a,b,c){for(var d=c<0?c+b:c;--d>=0;)a.push(d);return a}),gt:pa(function(a,b,c){for(var d=c<0?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=ma(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=na(b);function ra(){}ra.prototype=d.filters=d.pseudos,d.setFilters=new ra,g=ga.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){c&&!(e=Q.exec(h))||(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=R.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(P," ")}),h=h.slice(c.length));for(g in d.filter)!(e=V[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?ga.error(a):z(a,i).slice(0)};function sa(a){for(var b=0,c=a.length,d="";b<c;b++)d+=a[b].value;return d}function ta(a,b,c){var d=b.dir,e=b.next,f=e||d,g=c&&"parentNode"===f,h=x++;return b.first?function(b,c,e){while(b=b[d])if(1===b.nodeType||g)return a(b,c,e);return!1}:function(b,c,i){var j,k,l,m=[w,h];if(i){while(b=b[d])if((1===b.nodeType||g)&&a(b,c,i))return!0}else while(b=b[d])if(1===b.nodeType||g)if(l=b[u]||(b[u]={}),k=l[b.uniqueID]||(l[b.uniqueID]={}),e&&e===b.nodeName.toLowerCase())b=b[d]||b;else{if((j=k[f])&&j[0]===w&&j[1]===h)return m[2]=j[2];if(k[f]=m,m[2]=a(b,c,i))return!0}return!1}}function ua(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function va(a,b,c){for(var d=0,e=b.length;d<e;d++)ga(a,b[d],c);return c}function wa(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;h<i;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function xa(a,b,c,d,e,f){return d&&!d[u]&&(d=xa(d)),e&&!e[u]&&(e=xa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||va(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:wa(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=wa(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?I(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=wa(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ya(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ta(function(a){return a===b},h,!0),l=ta(function(a){return I(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];i<f;i++)if(c=d.relative[a[i].type])m=[ta(ua(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;e<f;e++)if(d.relative[a[e].type])break;return xa(i>1&&ua(m),i>1&&sa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(P,"$1"),c,i<e&&ya(a.slice(i,e)),e<f&&ya(a=a.slice(e)),e<f&&sa(a))}m.push(c)}return ua(m)}function za(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=E.call(i));u=wa(u)}G.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&ga.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=ya(b[c]),f[u]?d.push(f):e.push(f);f=A(a,za(e,d)),f.selector=a}return f},i=ga.select=function(a,b,c,e){var f,i,j,k,l,m="function"==typeof a&&a,n=!e&&g(a=m.selector||a);if(c=c||[],1===n.length){if(i=n[0]=n[0].slice(0),i.length>2&&"ID"===(j=i[0]).type&&9===b.nodeType&&p&&d.relative[i[1].type]){if(b=(d.find.ID(j.matches[0].replace(_,aa),b)||[])[0],!b)return c;m&&(b=b.parentNode),a=a.slice(i.shift().value.length)}f=V.needsContext.test(a)?0:i.length;while(f--){if(j=i[f],d.relative[k=j.type])break;if((l=d.find[k])&&(e=l(j.matches[0].replace(_,aa),$.test(i[0].type)&&qa(b.parentNode)||b))){if(i.splice(f,1),a=e.length&&sa(i),!a)return G.apply(c,e),c;break}}}return(m||h(a,n))(e,b,!p,c,!b||$.test(a)&&qa(b.parentNode)||b),c},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("fieldset"))}),ja(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){if(!c)return a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){if(!c&&"input"===a.nodeName.toLowerCase())return a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(J,function(a,b,c){var d;if(!c)return a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);r.find=x,r.expr=x.selectors,r.expr[":"]=r.expr.pseudos,r.uniqueSort=r.unique=x.uniqueSort,r.text=x.getText,r.isXMLDoc=x.isXML,r.contains=x.contains,r.escapeSelector=x.escape;var y=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&r(a).is(c))break;d.push(a)}return d},z=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},A=r.expr.match.needsContext;function B(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()}var C=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,D=/^.[^:#\[\.,]*$/;function E(a,b,c){return r.isFunction(b)?r.grep(a,function(a,d){return!!b.call(a,d,a)!==c}):b.nodeType?r.grep(a,function(a){return a===b!==c}):"string"!=typeof b?r.grep(a,function(a){return i.call(b,a)>-1!==c}):D.test(b)?r.filter(b,a,c):(b=r.filter(b,a),r.grep(a,function(a){return i.call(b,a)>-1!==c&&1===a.nodeType}))}r.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?r.find.matchesSelector(d,a)?[d]:[]:r.find.matches(a,r.grep(b,function(a){return 1===a.nodeType}))},r.fn.extend({find:function(a){var b,c,d=this.length,e=this;if("string"!=typeof a)return this.pushStack(r(a).filter(function(){for(b=0;b<d;b++)if(r.contains(e[b],this))return!0}));for(c=this.pushStack([]),b=0;b<d;b++)r.find(a,e[b],c);return d>1?r.uniqueSort(c):c},filter:function(a){return this.pushStack(E(this,a||[],!1))},not:function(a){return this.pushStack(E(this,a||[],!0))},is:function(a){return!!E(this,"string"==typeof a&&A.test(a)?r(a):a||[],!1).length}});var F,G=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,H=r.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||F,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:G.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof r?b[0]:b,r.merge(this,r.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),C.test(e[1])&&r.isPlainObject(b))for(e in b)r.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&(this[0]=f,this.length=1),this}return a.nodeType?(this[0]=a,this.length=1,this):r.isFunction(a)?void 0!==c.ready?c.ready(a):a(r):r.makeArray(a,this)};H.prototype=r.fn,F=r(d);var I=/^(?:parents|prev(?:Until|All))/,J={children:!0,contents:!0,next:!0,prev:!0};r.fn.extend({has:function(a){var b=r(a,this),c=b.length;return this.filter(function(){for(var a=0;a<c;a++)if(r.contains(this,b[a]))return!0})},closest:function(a,b){var c,d=0,e=this.length,f=[],g="string"!=typeof a&&r(a);if(!A.test(a))for(;d<e;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&r.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?r.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?i.call(r(a),this[0]):i.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(r.uniqueSort(r.merge(this.get(),r(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function K(a,b){while((a=a[b])&&1!==a.nodeType);return a}r.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return y(a,"parentNode")},parentsUntil:function(a,b,c){return y(a,"parentNode",c)},next:function(a){return K(a,"nextSibling")},prev:function(a){return K(a,"previousSibling")},nextAll:function(a){return y(a,"nextSibling")},prevAll:function(a){return y(a,"previousSibling")},nextUntil:function(a,b,c){return y(a,"nextSibling",c)},prevUntil:function(a,b,c){return y(a,"previousSibling",c)},siblings:function(a){return z((a.parentNode||{}).firstChild,a)},children:function(a){return z(a.firstChild)},contents:function(a){return B(a,"iframe")?a.contentDocument:(B(a,"template")&&(a=a.content||a),r.merge([],a.childNodes))}},function(a,b){r.fn[a]=function(c,d){var e=r.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=r.filter(d,e)),this.length>1&&(J[a]||r.uniqueSort(e),I.test(a)&&e.reverse()),this.pushStack(e)}});var L=/[^\x20\t\r\n\f]+/g;function M(a){var b={};return r.each(a.match(L)||[],function(a,c){b[c]=!0}),b}r.Callbacks=function(a){a="string"==typeof a?M(a):r.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=e||a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){r.each(b,function(b,c){r.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==r.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return r.each(arguments,function(a,b){var c;while((c=r.inArray(b,f,c))>-1)f.splice(c,1),c<=h&&h--}),this},has:function(a){return a?r.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||b||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j};function N(a){return a}function O(a){throw a}function P(a,b,c,d){var e;try{a&&r.isFunction(e=a.promise)?e.call(a).done(b).fail(c):a&&r.isFunction(e=a.then)?e.call(a,b,c):b.apply(void 0,[a].slice(d))}catch(a){c.apply(void 0,[a])}}r.extend({Deferred:function(b){var c=[["notify","progress",r.Callbacks("memory"),r.Callbacks("memory"),2],["resolve","done",r.Callbacks("once memory"),r.Callbacks("once memory"),0,"resolved"],["reject","fail",r.Callbacks("once memory"),r.Callbacks("once memory"),1,"rejected"]],d="pending",e={state:function(){return d},always:function(){return f.done(arguments).fail(arguments),this},"catch":function(a){return e.then(null,a)},pipe:function(){var a=arguments;return r.Deferred(function(b){r.each(c,function(c,d){var e=r.isFunction(a[d[4]])&&a[d[4]];f[d[1]](function(){var a=e&&e.apply(this,arguments);a&&r.isFunction(a.promise)?a.promise().progress(b.notify).done(b.resolve).fail(b.reject):b[d[0]+"With"](this,e?[a]:arguments)})}),a=null}).promise()},then:function(b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(b<f)){if(a=d.apply(h,i),a===c.promise())throw new TypeError("Thenable self-resolution");j=a&&("object"==typeof a||"function"==typeof a)&&a.then,r.isFunction(j)?e?j.call(a,g(f,c,N,e),g(f,c,O,e)):(f++,j.call(a,g(f,c,N,e),g(f,c,O,e),g(f,c,N,c.notifyWith))):(d!==N&&(h=void 0,i=[a]),(e||c.resolveWith)(h,i))}},k=e?j:function(){try{j()}catch(a){r.Deferred.exceptionHook&&r.Deferred.exceptionHook(a,k.stackTrace),b+1>=f&&(d!==O&&(h=void 0,i=[a]),c.rejectWith(h,i))}};b?k():(r.Deferred.getStackHook&&(k.stackTrace=r.Deferred.getStackHook()),a.setTimeout(k))}}return r.Deferred(function(a){c[0][3].add(g(0,a,r.isFunction(e)?e:N,a.notifyWith)),c[1][3].add(g(0,a,r.isFunction(b)?b:N)),c[2][3].add(g(0,a,r.isFunction(d)?d:O))}).promise()},promise:function(a){return null!=a?r.extend(a,e):e}},f={};return r.each(c,function(a,b){var g=b[2],h=b[5];e[b[1]]=g.add,h&&g.add(function(){d=h},c[3-a][2].disable,c[0][2].lock),g.add(b[3].fire),f[b[0]]=function(){return f[b[0]+"With"](this===f?void 0:this,arguments),this},f[b[0]+"With"]=g.fireWith}),e.promise(f),b&&b.call(f,f),f},when:function(a){var b=arguments.length,c=b,d=Array(c),e=f.call(arguments),g=r.Deferred(),h=function(a){return function(c){d[a]=this,e[a]=arguments.length>1?f.call(arguments):c,--b||g.resolveWith(d,e)}};if(b<=1&&(P(a,g.done(h(c)).resolve,g.reject,!b),"pending"===g.state()||r.isFunction(e[c]&&e[c].then)))return g.then();while(c--)P(e[c],h(c),g.reject);return g.promise()}});var Q=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;r.Deferred.exceptionHook=function(b,c){a.console&&a.console.warn&&b&&Q.test(b.name)&&a.console.warn("jQuery.Deferred exception: "+b.message,b.stack,c)},r.readyException=function(b){a.setTimeout(function(){throw b})};var R=r.Deferred();r.fn.ready=function(a){return R.then(a)["catch"](function(a){r.readyException(a)}),this},r.extend({isReady:!1,readyWait:1,ready:function(a){(a===!0?--r.readyWait:r.isReady)||(r.isReady=!0,a!==!0&&--r.readyWait>0||R.resolveWith(d,[r]))}}),r.ready.then=R.then;function S(){d.removeEventListener("DOMContentLoaded",S),
-a.removeEventListener("load",S),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",S),a.addEventListener("load",S));var T=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)T(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(r(a),c)})),b))for(;h<i;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},U=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function V(){this.expando=r.expando+V.uid++}V.uid=1,V.prototype={cache:function(a){var b=a[this.expando];return b||(b={},U(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[r.camelCase(b)]=c;else for(d in b)e[r.camelCase(d)]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][r.camelCase(b)]},access:function(a,b,c){return void 0===b||b&&"string"==typeof b&&void 0===c?this.get(a,b):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d=a[this.expando];if(void 0!==d){if(void 0!==b){Array.isArray(b)?b=b.map(r.camelCase):(b=r.camelCase(b),b=b in d?[b]:b.match(L)||[]),c=b.length;while(c--)delete d[b[c]]}(void 0===b||r.isEmptyObject(d))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!r.isEmptyObject(b)}};var W=new V,X=new V,Y=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Z=/[A-Z]/g;function $(a){return"true"===a||"false"!==a&&("null"===a?null:a===+a+""?+a:Y.test(a)?JSON.parse(a):a)}function _(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Z,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c=$(c)}catch(e){}X.set(a,b,c)}else c=void 0;return c}r.extend({hasData:function(a){return X.hasData(a)||W.hasData(a)},data:function(a,b,c){return X.access(a,b,c)},removeData:function(a,b){X.remove(a,b)},_data:function(a,b,c){return W.access(a,b,c)},_removeData:function(a,b){W.remove(a,b)}}),r.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=X.get(f),1===f.nodeType&&!W.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=r.camelCase(d.slice(5)),_(f,d,e[d])));W.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){X.set(this,a)}):T(this,function(b){var c;if(f&&void 0===b){if(c=X.get(f,a),void 0!==c)return c;if(c=_(f,a),void 0!==c)return c}else this.each(function(){X.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){X.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=W.get(a,b),c&&(!d||Array.isArray(c)?d=W.access(a,b,r.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return W.get(a,c)||W.access(a,c,{empty:r.Callbacks("once memory").add(function(){W.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?r.queue(this[0],a):void 0===b?this:this.each(function(){var c=r.queue(this,a,b);r._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&r.dequeue(this,a)})},dequeue:function(a){return this.each(function(){r.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=r.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=W.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var aa=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,ba=new RegExp("^(?:([+-])=|)("+aa+")([a-z%]*)$","i"),ca=["Top","Right","Bottom","Left"],da=function(a,b){return a=b||a,"none"===a.style.display||""===a.style.display&&r.contains(a.ownerDocument,a)&&"none"===r.css(a,"display")},ea=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};function fa(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return r.css(a,b,"")},i=h(),j=c&&c[3]||(r.cssNumber[b]?"":"px"),k=(r.cssNumber[b]||"px"!==j&&+i)&&ba.exec(r.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,r.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var ga={};function ha(a){var b,c=a.ownerDocument,d=a.nodeName,e=ga[d];return e?e:(b=c.body.appendChild(c.createElement(d)),e=r.css(b,"display"),b.parentNode.removeChild(b),"none"===e&&(e="block"),ga[d]=e,e)}function ia(a,b){for(var c,d,e=[],f=0,g=a.length;f<g;f++)d=a[f],d.style&&(c=d.style.display,b?("none"===c&&(e[f]=W.get(d,"display")||null,e[f]||(d.style.display="")),""===d.style.display&&da(d)&&(e[f]=ha(d))):"none"!==c&&(e[f]="none",W.set(d,"display",c)));for(f=0;f<g;f++)null!=e[f]&&(a[f].style.display=e[f]);return a}r.fn.extend({show:function(){return ia(this,!0)},hide:function(){return ia(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){da(this)?r(this).show():r(this).hide()})}});var ja=/^(?:checkbox|radio)$/i,ka=/<([a-z][^\/\0>\x20\t\r\n\f]+)/i,la=/^$|\/(?:java|ecma)script/i,ma={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};ma.optgroup=ma.option,ma.tbody=ma.tfoot=ma.colgroup=ma.caption=ma.thead,ma.th=ma.td;function na(a,b){var c;return c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[],void 0===b||b&&B(a,b)?r.merge([a],c):c}function oa(a,b){for(var c=0,d=a.length;c<d;c++)W.set(a[c],"globalEval",!b||W.get(b[c],"globalEval"))}var pa=/<|&#?\w+;/;function qa(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],n=0,o=a.length;n<o;n++)if(f=a[n],f||0===f)if("object"===r.type(f))r.merge(m,f.nodeType?[f]:f);else if(pa.test(f)){g=g||l.appendChild(b.createElement("div")),h=(ka.exec(f)||["",""])[1].toLowerCase(),i=ma[h]||ma._default,g.innerHTML=i[1]+r.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;r.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",n=0;while(f=m[n++])if(d&&r.inArray(f,d)>-1)e&&e.push(f);else if(j=r.contains(f.ownerDocument,f),g=na(l.appendChild(f),"script"),j&&oa(g),c){k=0;while(f=g[k++])la.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),o.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",o.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var ra=d.documentElement,sa=/^key/,ta=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,ua=/^([^.]*)(?:\.(.+)|)/;function va(){return!0}function wa(){return!1}function xa(){try{return d.activeElement}catch(a){}}function ya(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ya(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=wa;else if(!e)return a;return 1===f&&(g=e,e=function(a){return r().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=r.guid++)),a.each(function(){r.event.add(this,b,e,d,c)})}r.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.get(a);if(q){c.handler&&(f=c,c=f.handler,e=f.selector),e&&r.find.matchesSelector(ra,e),c.guid||(c.guid=r.guid++),(i=q.events)||(i=q.events={}),(g=q.handle)||(g=q.handle=function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(L)||[""],j=b.length;while(j--)h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n&&(l=r.event.special[n]||{},n=(e?l.delegateType:l.bindType)||n,l=r.event.special[n]||{},k=r.extend({type:n,origType:p,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&r.expr.match.needsContext.test(e),namespace:o.join(".")},f),(m=i[n])||(m=i[n]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,o,g)!==!1||a.addEventListener&&a.addEventListener(n,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),r.event.global[n]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=W.hasData(a)&&W.get(a);if(q&&(i=q.events)){b=(b||"").match(L)||[""],j=b.length;while(j--)if(h=ua.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n){l=r.event.special[n]||{},n=(d?l.delegateType:l.bindType)||n,m=i[n]||[],h=h[2]&&new RegExp("(^|\\.)"+o.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&p!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,o,q.handle)!==!1||r.removeEvent(a,n,q.handle),delete i[n])}else for(n in i)r.event.remove(a,n+b[j],c,d,!0);r.isEmptyObject(i)&&W.remove(a,"handle events")}},dispatch:function(a){var b=r.event.fix(a),c,d,e,f,g,h,i=new Array(arguments.length),j=(W.get(this,"events")||{})[b.type]||[],k=r.event.special[b.type]||{};for(i[0]=b,c=1;c<arguments.length;c++)i[c]=arguments[c];if(b.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,b)!==!1){h=r.event.handlers.call(this,b,j),c=0;while((f=h[c++])&&!b.isPropagationStopped()){b.currentTarget=f.elem,d=0;while((g=f.handlers[d++])&&!b.isImmediatePropagationStopped())b.rnamespace&&!b.rnamespace.test(g.namespace)||(b.handleObj=g,b.data=g.data,e=((r.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(b.result=e)===!1&&(b.preventDefault(),b.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,b),b.result}},handlers:function(a,b){var c,d,e,f,g,h=[],i=b.delegateCount,j=a.target;if(i&&j.nodeType&&!("click"===a.type&&a.button>=1))for(;j!==this;j=j.parentNode||this)if(1===j.nodeType&&("click"!==a.type||j.disabled!==!0)){for(f=[],g={},c=0;c<i;c++)d=b[c],e=d.selector+" ",void 0===g[e]&&(g[e]=d.needsContext?r(e,this).index(j)>-1:r.find(e,this,null,[j]).length),g[e]&&f.push(d);f.length&&h.push({elem:j,handlers:f})}return j=this,i<b.length&&h.push({elem:j,handlers:b.slice(i)}),h},addProp:function(a,b){Object.defineProperty(r.Event.prototype,a,{enumerable:!0,configurable:!0,get:r.isFunction(b)?function(){if(this.originalEvent)return b(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[a]},set:function(b){Object.defineProperty(this,a,{enumerable:!0,configurable:!0,writable:!0,value:b})}})},fix:function(a){return a[r.expando]?a:new r.Event(a)},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==xa()&&this.focus)return this.focus(),!1},delegateType:"focusin"},blur:{trigger:function(){if(this===xa()&&this.blur)return this.blur(),!1},delegateType:"focusout"},click:{trigger:function(){if("checkbox"===this.type&&this.click&&B(this,"input"))return this.click(),!1},_default:function(a){return B(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},r.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},r.Event=function(a,b){return this instanceof r.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?va:wa,this.target=a.target&&3===a.target.nodeType?a.target.parentNode:a.target,this.currentTarget=a.currentTarget,this.relatedTarget=a.relatedTarget):this.type=a,b&&r.extend(this,b),this.timeStamp=a&&a.timeStamp||r.now(),void(this[r.expando]=!0)):new r.Event(a,b)},r.Event.prototype={constructor:r.Event,isDefaultPrevented:wa,isPropagationStopped:wa,isImmediatePropagationStopped:wa,isSimulated:!1,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=va,a&&!this.isSimulated&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=va,a&&!this.isSimulated&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=va,a&&!this.isSimulated&&a.stopImmediatePropagation(),this.stopPropagation()}},r.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(a){var b=a.button;return null==a.which&&sa.test(a.type)?null!=a.charCode?a.charCode:a.keyCode:!a.which&&void 0!==b&&ta.test(a.type)?1&b?1:2&b?3:4&b?2:0:a.which}},r.event.addProp),r.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){r.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return e&&(e===d||r.contains(d,e))||(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),r.fn.extend({on:function(a,b,c,d){return ya(this,a,b,c,d)},one:function(a,b,c,d){return ya(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,r(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return b!==!1&&"function"!=typeof b||(c=b,b=void 0),c===!1&&(c=wa),this.each(function(){r.event.remove(this,a,c,b)})}});var za=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,Aa=/<script|<style|<link/i,Ba=/checked\s*(?:[^=]|=\s*.checked.)/i,Ca=/^true\/(.*)/,Da=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Ea(a,b){return B(a,"table")&&B(11!==b.nodeType?b:b.firstChild,"tr")?r(">tbody",a)[0]||a:a}function Fa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function Ga(a){var b=Ca.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Ha(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(W.hasData(a)&&(f=W.access(a),g=W.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;c<d;c++)r.event.add(b,e,j[e][c])}X.hasData(a)&&(h=X.access(a),i=r.extend({},h),X.set(b,i))}}function Ia(a,b){var c=b.nodeName.toLowerCase();"input"===c&&ja.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function Ja(a,b,c,d){b=g.apply([],b);var e,f,h,i,j,k,l=0,m=a.length,n=m-1,q=b[0],s=r.isFunction(q);if(s||m>1&&"string"==typeof q&&!o.checkClone&&Ba.test(q))return a.each(function(e){var f=a.eq(e);s&&(b[0]=q.call(this,e,f.html())),Ja(f,b,c,d)});if(m&&(e=qa(b,a[0].ownerDocument,!1,a,d),f=e.firstChild,1===e.childNodes.length&&(e=f),f||d)){for(h=r.map(na(e,"script"),Fa),i=h.length;l<m;l++)j=e,l!==n&&(j=r.clone(j,!0,!0),i&&r.merge(h,na(j,"script"))),c.call(a[l],j,l);if(i)for(k=h[h.length-1].ownerDocument,r.map(h,Ga),l=0;l<i;l++)j=h[l],la.test(j.type||"")&&!W.access(j,"globalEval")&&r.contains(k,j)&&(j.src?r._evalUrl&&r._evalUrl(j.src):p(j.textContent.replace(Da,""),k))}return a}function Ka(a,b,c){for(var d,e=b?r.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||r.cleanData(na(d)),d.parentNode&&(c&&r.contains(d.ownerDocument,d)&&oa(na(d,"script")),d.parentNode.removeChild(d));return a}r.extend({htmlPrefilter:function(a){return a.replace(za,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=r.contains(a.ownerDocument,a);if(!(o.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||r.isXMLDoc(a)))for(g=na(h),f=na(a),d=0,e=f.length;d<e;d++)Ia(f[d],g[d]);if(b)if(c)for(f=f||na(a),g=g||na(h),d=0,e=f.length;d<e;d++)Ha(f[d],g[d]);else Ha(a,h);return g=na(h,"script"),g.length>0&&oa(g,!i&&na(a,"script")),h},cleanData:function(a){for(var b,c,d,e=r.event.special,f=0;void 0!==(c=a[f]);f++)if(U(c)){if(b=c[W.expando]){if(b.events)for(d in b.events)e[d]?r.event.remove(c,d):r.removeEvent(c,d,b.handle);c[W.expando]=void 0}c[X.expando]&&(c[X.expando]=void 0)}}}),r.fn.extend({detach:function(a){return Ka(this,a,!0)},remove:function(a){return Ka(this,a)},text:function(a){return T(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.appendChild(a)}})},prepend:function(){return Ja(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ea(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ja(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(r.cleanData(na(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null!=a&&a,b=null==b?a:b,this.map(function(){return r.clone(this,a,b)})},html:function(a){return T(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!Aa.test(a)&&!ma[(ka.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;c<d;c++)b=this[c]||{},1===b.nodeType&&(r.cleanData(na(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ja(this,arguments,function(b){var c=this.parentNode;r.inArray(this,a)<0&&(r.cleanData(na(this)),c&&c.replaceChild(b,this))},a)}}),r.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){r.fn[a]=function(a){for(var c,d=[],e=r(a),f=e.length-1,g=0;g<=f;g++)c=g===f?this:this.clone(!0),r(e[g])[b](c),h.apply(d,c.get());return this.pushStack(d)}});var La=/^margin/,Ma=new RegExp("^("+aa+")(?!px)[a-z%]+$","i"),Na=function(b){var c=b.ownerDocument.defaultView;return c&&c.opener||(c=a),c.getComputedStyle(b)};!function(){function b(){if(i){i.style.cssText="box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",i.innerHTML="",ra.appendChild(h);var b=a.getComputedStyle(i);c="1%"!==b.top,g="2px"===b.marginLeft,e="4px"===b.width,i.style.marginRight="50%",f="4px"===b.marginRight,ra.removeChild(h),i=null}}var c,e,f,g,h=d.createElement("div"),i=d.createElement("div");i.style&&(i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",o.clearCloneStyle="content-box"===i.style.backgroundClip,h.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",h.appendChild(i),r.extend(o,{pixelPosition:function(){return b(),c},boxSizingReliable:function(){return b(),e},pixelMarginRight:function(){return b(),f},reliableMarginLeft:function(){return b(),g}}))}();function Oa(a,b,c){var d,e,f,g,h=a.style;return c=c||Na(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||r.contains(a.ownerDocument,a)||(g=r.style(a,b)),!o.pixelMarginRight()&&Ma.test(g)&&La.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Pa(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Qa=/^(none|table(?!-c[ea]).+)/,Ra=/^--/,Sa={position:"absolute",visibility:"hidden",display:"block"},Ta={letterSpacing:"0",fontWeight:"400"},Ua=["Webkit","Moz","ms"],Va=d.createElement("div").style;function Wa(a){if(a in Va)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ua.length;while(c--)if(a=Ua[c]+b,a in Va)return a}function Xa(a){var b=r.cssProps[a];return b||(b=r.cssProps[a]=Wa(a)||a),b}function Ya(a,b,c){var d=ba.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Za(a,b,c,d,e){var f,g=0;for(f=c===(d?"border":"content")?4:"width"===b?1:0;f<4;f+=2)"margin"===c&&(g+=r.css(a,c+ca[f],!0,e)),d?("content"===c&&(g-=r.css(a,"padding"+ca[f],!0,e)),"margin"!==c&&(g-=r.css(a,"border"+ca[f]+"Width",!0,e))):(g+=r.css(a,"padding"+ca[f],!0,e),"padding"!==c&&(g+=r.css(a,"border"+ca[f]+"Width",!0,e)));return g}function $a(a,b,c){var d,e=Na(a),f=Oa(a,b,e),g="border-box"===r.css(a,"boxSizing",!1,e);return Ma.test(f)?f:(d=g&&(o.boxSizingReliable()||f===a.style[b]),"auto"===f&&(f=a["offset"+b[0].toUpperCase()+b.slice(1)]),f=parseFloat(f)||0,f+Za(a,b,c||(g?"border":"content"),d,e)+"px")}r.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Oa(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=r.camelCase(b),i=Ra.test(b),j=a.style;return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:j[b]:(f=typeof c,"string"===f&&(e=ba.exec(c))&&e[1]&&(c=fa(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(r.cssNumber[h]?"":"px")),o.clearCloneStyle||""!==c||0!==b.indexOf("background")||(j[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i?j.setProperty(b,c):j[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=r.camelCase(b),i=Ra.test(b);return i||(b=Xa(h)),g=r.cssHooks[b]||r.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Oa(a,b,d)),"normal"===e&&b in Ta&&(e=Ta[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),r.each(["height","width"],function(a,b){r.cssHooks[b]={get:function(a,c,d){if(c)return!Qa.test(r.css(a,"display"))||a.getClientRects().length&&a.getBoundingClientRect().width?$a(a,b,d):ea(a,Sa,function(){return $a(a,b,d)})},set:function(a,c,d){var e,f=d&&Na(a),g=d&&Za(a,b,d,"border-box"===r.css(a,"boxSizing",!1,f),f);return g&&(e=ba.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=r.css(a,b)),Ya(a,c,g)}}}),r.cssHooks.marginLeft=Pa(o.reliableMarginLeft,function(a,b){if(b)return(parseFloat(Oa(a,"marginLeft"))||a.getBoundingClientRect().left-ea(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px"}),r.each({margin:"",padding:"",border:"Width"},function(a,b){r.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];d<4;d++)e[a+ca[d]+b]=f[d]||f[d-2]||f[0];return e}},La.test(a)||(r.cssHooks[a+b].set=Ya)}),r.fn.extend({css:function(a,b){return T(this,function(a,b,c){var d,e,f={},g=0;if(Array.isArray(b)){for(d=Na(a),e=b.length;g<e;g++)f[b[g]]=r.css(a,b[g],!1,d);return f}return void 0!==c?r.style(a,b,c):r.css(a,b)},a,b,arguments.length>1)}});function _a(a,b,c,d,e){return new _a.prototype.init(a,b,c,d,e)}r.Tween=_a,_a.prototype={constructor:_a,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||r.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(r.cssNumber[c]?"":"px")},cur:function(){var a=_a.propHooks[this.prop];return a&&a.get?a.get(this):_a.propHooks._default.get(this)},run:function(a){var b,c=_a.propHooks[this.prop];return this.options.duration?this.pos=b=r.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):_a.propHooks._default.set(this),this}},_a.prototype.init.prototype=_a.prototype,_a.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=r.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){r.fx.step[a.prop]?r.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[r.cssProps[a.prop]]&&!r.cssHooks[a.prop]?a.elem[a.prop]=a.now:r.style(a.elem,a.prop,a.now+a.unit)}}},_a.propHooks.scrollTop=_a.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},r.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},r.fx=_a.prototype.init,r.fx.step={};var ab,bb,cb=/^(?:toggle|show|hide)$/,db=/queueHooks$/;function eb(){bb&&(d.hidden===!1&&a.requestAnimationFrame?a.requestAnimationFrame(eb):a.setTimeout(eb,r.fx.interval),r.fx.tick())}function fb(){return a.setTimeout(function(){ab=void 0}),ab=r.now()}function gb(a,b){var c,d=0,e={height:a};for(b=b?1:0;d<4;d+=2-b)c=ca[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function hb(a,b,c){for(var d,e=(kb.tweeners[b]||[]).concat(kb.tweeners["*"]),f=0,g=e.length;f<g;f++)if(d=e[f].call(c,b,a))return d}function ib(a,b,c){var d,e,f,g,h,i,j,k,l="width"in b||"height"in b,m=this,n={},o=a.style,p=a.nodeType&&da(a),q=W.get(a,"fxshow");c.queue||(g=r._queueHooks(a,"fx"),null==g.unqueued&&(g.unqueued=0,h=g.empty.fire,g.empty.fire=function(){g.unqueued||h()}),g.unqueued++,m.always(function(){m.always(function(){g.unqueued--,r.queue(a,"fx").length||g.empty.fire()})}));for(d in b)if(e=b[d],cb.test(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}n[d]=q&&q[d]||r.style(a,d)}if(i=!r.isEmptyObject(b),i||!r.isEmptyObject(n)){l&&1===a.nodeType&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=q&&q.display,null==j&&(j=W.get(a,"display")),k=r.css(a,"display"),"none"===k&&(j?k=j:(ia([a],!0),j=a.style.display||j,k=r.css(a,"display"),ia([a]))),("inline"===k||"inline-block"===k&&null!=j)&&"none"===r.css(a,"float")&&(i||(m.done(function(){o.display=j}),null==j&&(k=o.display,j="none"===k?"":k)),o.display="inline-block")),c.overflow&&(o.overflow="hidden",m.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]})),i=!1;for(d in n)i||(q?"hidden"in q&&(p=q.hidden):q=W.access(a,"fxshow",{display:j}),f&&(q.hidden=!p),p&&ia([a],!0),m.done(function(){p||ia([a]),W.remove(a,"fxshow");for(d in n)r.style(a,d,n[d])})),i=hb(p?q[d]:0,d,m),d in q||(q[d]=i.start,p&&(i.end=i.start,i.start=0))}}function jb(a,b){var c,d,e,f,g;for(c in a)if(d=r.camelCase(c),e=b[d],f=a[c],Array.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=r.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function kb(a,b,c){var d,e,f=0,g=kb.prefilters.length,h=r.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=ab||fb(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;g<i;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),f<1&&i?c:(i||h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:r.extend({},b),opts:r.extend(!0,{specialEasing:{},easing:r.easing._default},c),originalProperties:b,originalOptions:c,startTime:ab||fb(),duration:c.duration,tweens:[],createTween:function(b,c){var d=r.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;c<d;c++)j.tweens[c].run(1);return b?(h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j,b])):h.rejectWith(a,[j,b]),this}}),k=j.props;for(jb(k,j.opts.specialEasing);f<g;f++)if(d=kb.prefilters[f].call(j,a,k,j.opts))return r.isFunction(d.stop)&&(r._queueHooks(j.elem,j.opts.queue).stop=r.proxy(d.stop,d)),d;return r.map(k,hb,j),r.isFunction(j.opts.start)&&j.opts.start.call(a,j),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always),r.fx.timer(r.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j}r.Animation=r.extend(kb,{tweeners:{"*":[function(a,b){var c=this.createTween(a,b);return fa(c.elem,a,ba.exec(b),c),c}]},tweener:function(a,b){r.isFunction(a)?(b=a,a=["*"]):a=a.match(L);for(var c,d=0,e=a.length;d<e;d++)c=a[d],kb.tweeners[c]=kb.tweeners[c]||[],kb.tweeners[c].unshift(b)},prefilters:[ib],prefilter:function(a,b){b?kb.prefilters.unshift(a):kb.prefilters.push(a)}}),r.speed=function(a,b,c){var d=a&&"object"==typeof a?r.extend({},a):{complete:c||!c&&b||r.isFunction(a)&&a,duration:a,easing:c&&b||b&&!r.isFunction(b)&&b};return r.fx.off?d.duration=0:"number"!=typeof d.duration&&(d.duration in r.fx.speeds?d.duration=r.fx.speeds[d.duration]:d.duration=r.fx.speeds._default),null!=d.queue&&d.queue!==!0||(d.queue="fx"),d.old=d.complete,d.complete=function(){r.isFunction(d.old)&&d.old.call(this),d.queue&&r.dequeue(this,d.queue)},d},r.fn.extend({fadeTo:function(a,b,c,d){return this.filter(da).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=r.isEmptyObject(a),f=r.speed(b,c,d),g=function(){var b=kb(this,r.extend({},a),f);(e||W.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=r.timers,g=W.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&db.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));!b&&c||r.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=W.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=r.timers,g=d?d.length:0;for(c.finish=!0,r.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;b<g;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),r.each(["toggle","show","hide"],function(a,b){var c=r.fn[b];r.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(gb(b,!0),a,d,e)}}),r.each({slideDown:gb("show"),slideUp:gb("hide"),slideToggle:gb("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){r.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),r.timers=[],r.fx.tick=function(){var a,b=0,c=r.timers;for(ab=r.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||r.fx.stop(),ab=void 0},r.fx.timer=function(a){r.timers.push(a),r.fx.start()},r.fx.interval=13,r.fx.start=function(){bb||(bb=!0,eb())},r.fx.stop=function(){bb=null},r.fx.speeds={slow:600,fast:200,_default:400},r.fn.delay=function(b,c){return b=r.fx?r.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",o.checkOn=""!==a.value,o.optSelected=c.selected,a=d.createElement("input"),a.value="t",a.type="radio",o.radioValue="t"===a.value}();var lb,mb=r.expr.attrHandle;r.fn.extend({attr:function(a,b){return T(this,r.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){r.removeAttr(this,a)})}}),r.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?r.prop(a,b,c):(1===f&&r.isXMLDoc(a)||(e=r.attrHooks[b.toLowerCase()]||(r.expr.match.bool.test(b)?lb:void 0)),void 0!==c?null===c?void r.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=r.find.attr(a,b),
-null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&B(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(L);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c)}}),lb={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=mb[b]||r.find.attr;mb[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=mb[g],mb[g]=e,e=null!=c(a,b,d)?g:null,mb[g]=f),e}});var nb=/^(?:input|select|textarea|button)$/i,ob=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return T(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):nb.test(a.nodeName)||ob.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});function pb(a){var b=a.match(L)||[];return b.join(" ")}function qb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,qb(this)))});if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=qb(c),d=1===c.nodeType&&" "+pb(e)+" "){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=pb(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,qb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=qb(c),d=1===c.nodeType&&" "+pb(e)+" "){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=pb(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,qb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(L)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=qb(this),b&&W.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":W.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+pb(qb(c))+" ").indexOf(b)>-1)return!0;return!1}});var rb=/\r/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":Array.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(rb,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:pb(r.text(a))}},select:{get:function(a){var b,c,d,e=a.options,f=a.selectedIndex,g="select-one"===a.type,h=g?null:[],i=g?f+1:e.length;for(d=f<0?i:g?f:0;d<i;d++)if(c=e[d],(c.selected||d===f)&&!c.disabled&&(!c.parentNode.disabled||!B(c.parentNode,"optgroup"))){if(b=r(c).val(),g)return b;h.push(b)}return h},set:function(a,b){var c,d,e=a.options,f=r.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=r.inArray(r.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),r.each(["radio","checkbox"],function(){r.valHooks[this]={set:function(a,b){if(Array.isArray(b))return a.checked=r.inArray(r(a).val(),b)>-1}},o.checkOn||(r.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var sb=/^(?:focusinfocus|focusoutblur)$/;r.extend(r.event,{trigger:function(b,c,e,f){var g,h,i,j,k,m,n,o=[e||d],p=l.call(b,"type")?b.type:b,q=l.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!sb.test(p+r.event.triggered)&&(p.indexOf(".")>-1&&(q=p.split("."),p=q.shift(),q.sort()),k=p.indexOf(":")<0&&"on"+p,b=b[r.expando]?b:new r.Event(p,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=q.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:r.makeArray(c,[b]),n=r.event.special[p]||{},f||!n.trigger||n.trigger.apply(e,c)!==!1)){if(!f&&!n.noBubble&&!r.isWindow(e)){for(j=n.delegateType||p,sb.test(j+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),i=h;i===(e.ownerDocument||d)&&o.push(i.defaultView||i.parentWindow||a)}g=0;while((h=o[g++])&&!b.isPropagationStopped())b.type=g>1?j:n.bindType||p,m=(W.get(h,"events")||{})[b.type]&&W.get(h,"handle"),m&&m.apply(h,c),m=k&&h[k],m&&m.apply&&U(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=p,f||b.isDefaultPrevented()||n._default&&n._default.apply(o.pop(),c)!==!1||!U(e)||k&&r.isFunction(e[p])&&!r.isWindow(e)&&(i=e[k],i&&(e[k]=null),r.event.triggered=p,e[p](),r.event.triggered=void 0,i&&(e[k]=i)),b.result}},simulate:function(a,b,c){var d=r.extend(new r.Event,c,{type:a,isSimulated:!0});r.event.trigger(d,null,b)}}),r.fn.extend({trigger:function(a,b){return this.each(function(){r.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];if(c)return r.event.trigger(a,b,c,!0)}}),r.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(a,b){r.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),r.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),o.focusin="onfocusin"in a,o.focusin||r.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){r.event.simulate(b,a.target,r.event.fix(a))};r.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=W.access(d,b);e||d.addEventListener(a,c,!0),W.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=W.access(d,b)-1;e?W.access(d,b,e):(d.removeEventListener(a,c,!0),W.remove(d,b))}}});var tb=a.location,ub=r.now(),vb=/\?/;r.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return c&&!c.getElementsByTagName("parsererror").length||r.error("Invalid XML: "+b),c};var wb=/\[\]$/,xb=/\r?\n/g,yb=/^(?:submit|button|image|reset|file)$/i,zb=/^(?:input|select|textarea|keygen)/i;function Ab(a,b,c,d){var e;if(Array.isArray(b))r.each(b,function(b,e){c||wb.test(a)?d(a,e):Ab(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==r.type(b))d(a,b);else for(e in b)Ab(a+"["+e+"]",b[e],c,d)}r.param=function(a,b){var c,d=[],e=function(a,b){var c=r.isFunction(b)?b():b;d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(null==c?"":c)};if(Array.isArray(a)||a.jquery&&!r.isPlainObject(a))r.each(a,function(){e(this.name,this.value)});else for(c in a)Ab(c,a[c],b,e);return d.join("&")},r.fn.extend({serialize:function(){return r.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=r.prop(this,"elements");return a?r.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!r(this).is(":disabled")&&zb.test(this.nodeName)&&!yb.test(a)&&(this.checked||!ja.test(a))}).map(function(a,b){var c=r(this).val();return null==c?null:Array.isArray(c)?r.map(c,function(a){return{name:b.name,value:a.replace(xb,"\r\n")}}):{name:b.name,value:c.replace(xb,"\r\n")}}).get()}});var Bb=/%20/g,Cb=/#.*$/,Db=/([?&])_=[^&]*/,Eb=/^(.*?):[ \t]*([^\r\n]*)$/gm,Fb=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Gb=/^(?:GET|HEAD)$/,Hb=/^\/\//,Ib={},Jb={},Kb="*/".concat("*"),Lb=d.createElement("a");Lb.href=tb.href;function Mb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(L)||[];if(r.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function Nb(a,b,c,d){var e={},f=a===Jb;function g(h){var i;return e[h]=!0,r.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function Ob(a,b){var c,d,e=r.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&r.extend(!0,a,d),a}function Pb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}if(f)return f!==i[0]&&i.unshift(f),c[f]}function Qb(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}r.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:tb.href,type:"GET",isLocal:Fb.test(tb.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Kb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":r.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?Ob(Ob(a,r.ajaxSettings),b):Ob(r.ajaxSettings,a)},ajaxPrefilter:Mb(Ib),ajaxTransport:Mb(Jb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m,n,o=r.ajaxSetup({},c),p=o.context||o,q=o.context&&(p.nodeType||p.jquery)?r(p):r.event,s=r.Deferred(),t=r.Callbacks("once memory"),u=o.statusCode||{},v={},w={},x="canceled",y={readyState:0,getResponseHeader:function(a){var b;if(k){if(!h){h={};while(b=Eb.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return k?g:null},setRequestHeader:function(a,b){return null==k&&(a=w[a.toLowerCase()]=w[a.toLowerCase()]||a,v[a]=b),this},overrideMimeType:function(a){return null==k&&(o.mimeType=a),this},statusCode:function(a){var b;if(a)if(k)y.always(a[y.status]);else for(b in a)u[b]=[u[b],a[b]];return this},abort:function(a){var b=a||x;return e&&e.abort(b),A(0,b),this}};if(s.promise(y),o.url=((b||o.url||tb.href)+"").replace(Hb,tb.protocol+"//"),o.type=c.method||c.type||o.method||o.type,o.dataTypes=(o.dataType||"*").toLowerCase().match(L)||[""],null==o.crossDomain){j=d.createElement("a");try{j.href=o.url,j.href=j.href,o.crossDomain=Lb.protocol+"//"+Lb.host!=j.protocol+"//"+j.host}catch(z){o.crossDomain=!0}}if(o.data&&o.processData&&"string"!=typeof o.data&&(o.data=r.param(o.data,o.traditional)),Nb(Ib,o,c,y),k)return y;l=r.event&&o.global,l&&0===r.active++&&r.event.trigger("ajaxStart"),o.type=o.type.toUpperCase(),o.hasContent=!Gb.test(o.type),f=o.url.replace(Cb,""),o.hasContent?o.data&&o.processData&&0===(o.contentType||"").indexOf("application/x-www-form-urlencoded")&&(o.data=o.data.replace(Bb,"+")):(n=o.url.slice(f.length),o.data&&(f+=(vb.test(f)?"&":"?")+o.data,delete o.data),o.cache===!1&&(f=f.replace(Db,"$1"),n=(vb.test(f)?"&":"?")+"_="+ub++ +n),o.url=f+n),o.ifModified&&(r.lastModified[f]&&y.setRequestHeader("If-Modified-Since",r.lastModified[f]),r.etag[f]&&y.setRequestHeader("If-None-Match",r.etag[f])),(o.data&&o.hasContent&&o.contentType!==!1||c.contentType)&&y.setRequestHeader("Content-Type",o.contentType),y.setRequestHeader("Accept",o.dataTypes[0]&&o.accepts[o.dataTypes[0]]?o.accepts[o.dataTypes[0]]+("*"!==o.dataTypes[0]?", "+Kb+"; q=0.01":""):o.accepts["*"]);for(m in o.headers)y.setRequestHeader(m,o.headers[m]);if(o.beforeSend&&(o.beforeSend.call(p,y,o)===!1||k))return y.abort();if(x="abort",t.add(o.complete),y.done(o.success),y.fail(o.error),e=Nb(Jb,o,c,y)){if(y.readyState=1,l&&q.trigger("ajaxSend",[y,o]),k)return y;o.async&&o.timeout>0&&(i=a.setTimeout(function(){y.abort("timeout")},o.timeout));try{k=!1,e.send(v,A)}catch(z){if(k)throw z;A(-1,z)}}else A(-1,"No Transport");function A(b,c,d,h){var j,m,n,v,w,x=c;k||(k=!0,i&&a.clearTimeout(i),e=void 0,g=h||"",y.readyState=b>0?4:0,j=b>=200&&b<300||304===b,d&&(v=Pb(o,y,d)),v=Qb(o,v,y,j),j?(o.ifModified&&(w=y.getResponseHeader("Last-Modified"),w&&(r.lastModified[f]=w),w=y.getResponseHeader("etag"),w&&(r.etag[f]=w)),204===b||"HEAD"===o.type?x="nocontent":304===b?x="notmodified":(x=v.state,m=v.data,n=v.error,j=!n)):(n=x,!b&&x||(x="error",b<0&&(b=0))),y.status=b,y.statusText=(c||x)+"",j?s.resolveWith(p,[m,x,y]):s.rejectWith(p,[y,x,n]),y.statusCode(u),u=void 0,l&&q.trigger(j?"ajaxSuccess":"ajaxError",[y,o,j?m:n]),t.fireWith(p,[y,x]),l&&(q.trigger("ajaxComplete",[y,o]),--r.active||r.event.trigger("ajaxStop")))}return y},getJSON:function(a,b,c){return r.get(a,b,c,"json")},getScript:function(a,b){return r.get(a,void 0,b,"script")}}),r.each(["get","post"],function(a,b){r[b]=function(a,c,d,e){return r.isFunction(c)&&(e=e||d,d=c,c=void 0),r.ajax(r.extend({url:a,type:b,dataType:e,data:c,success:d},r.isPlainObject(a)&&a))}}),r._evalUrl=function(a){return r.ajax({url:a,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,"throws":!0})},r.fn.extend({wrapAll:function(a){var b;return this[0]&&(r.isFunction(a)&&(a=a.call(this[0])),b=r(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this},wrapInner:function(a){return r.isFunction(a)?this.each(function(b){r(this).wrapInner(a.call(this,b))}):this.each(function(){var b=r(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=r.isFunction(a);return this.each(function(c){r(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(a){return this.parent(a).not("body").each(function(){r(this).replaceWith(this.childNodes)}),this}}),r.expr.pseudos.hidden=function(a){return!r.expr.pseudos.visible(a)},r.expr.pseudos.visible=function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)},r.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Rb={0:200,1223:204},Sb=r.ajaxSettings.xhr();o.cors=!!Sb&&"withCredentials"in Sb,o.ajax=Sb=!!Sb,r.ajaxTransport(function(b){var c,d;if(o.cors||Sb&&!b.crossDomain)return{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Rb[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}}),r.ajaxPrefilter(function(a){a.crossDomain&&(a.contents.script=!1)}),r.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return r.globalEval(a),a}}}),r.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),r.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=r("<script>").prop({charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&f("error"===a.type?404:200,a.type)}),d.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Tb=[],Ub=/(=)\?(?=&|$)|\?\?/;r.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Tb.pop()||r.expando+"_"+ub++;return this[a]=!0,a}}),r.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Ub.test(b.url)?"url":"string"==typeof b.data&&0===(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ub.test(b.data)&&"data");if(h||"jsonp"===b.dataTypes[0])return e=b.jsonpCallback=r.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Ub,"$1"+e):b.jsonp!==!1&&(b.url+=(vb.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||r.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){void 0===f?r(a).removeProp(e):a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Tb.push(e)),g&&r.isFunction(f)&&f(g[0]),g=f=void 0}),"script"}),o.createHTMLDocument=function(){var a=d.implementation.createHTMLDocument("").body;return a.innerHTML="<form></form><form></form>",2===a.childNodes.length}(),r.parseHTML=function(a,b,c){if("string"!=typeof a)return[];"boolean"==typeof b&&(c=b,b=!1);var e,f,g;return b||(o.createHTMLDocument?(b=d.implementation.createHTMLDocument(""),e=b.createElement("base"),e.href=d.location.href,b.head.appendChild(e)):b=d),f=C.exec(a),g=!c&&[],f?[b.createElement(f[1])]:(f=qa([a],b,g),g&&g.length&&r(g).remove(),r.merge([],f.childNodes))},r.fn.load=function(a,b,c){var d,e,f,g=this,h=a.indexOf(" ");return h>-1&&(d=pb(a.slice(h)),a=a.slice(0,h)),r.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&r.ajax({url:a,type:e||"GET",dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?r("<div>").append(r.parseHTML(a)).find(d):a)}).always(c&&function(a,b){g.each(function(){c.apply(this,f||[a.responseText,b,a])})}),this},r.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){r.fn[b]=function(a){return this.on(b,a)}}),r.expr.pseudos.animated=function(a){return r.grep(r.timers,function(b){return a===b.elem}).length},r.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=r.css(a,"position"),l=r(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=r.css(a,"top"),i=r.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),r.isFunction(b)&&(b=b.call(a,c,r.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},r.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){r.offset.setOffset(this,a,b)});var b,c,d,e,f=this[0];if(f)return f.getClientRects().length?(d=f.getBoundingClientRect(),b=f.ownerDocument,c=b.documentElement,e=b.defaultView,{top:d.top+e.pageYOffset-c.clientTop,left:d.left+e.pageXOffset-c.clientLeft}):{top:0,left:0}},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===r.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),B(a[0],"html")||(d=a.offset()),d={top:d.top+r.css(a[0],"borderTopWidth",!0),left:d.left+r.css(a[0],"borderLeftWidth",!0)}),{top:b.top-d.top-r.css(c,"marginTop",!0),left:b.left-d.left-r.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===r.css(a,"position"))a=a.offsetParent;return a||ra})}}),r.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;r.fn[a]=function(d){return T(this,function(a,d,e){var f;return r.isWindow(a)?f=a:9===a.nodeType&&(f=a.defaultView),void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),r.each(["top","left"],function(a,b){r.cssHooks[b]=Pa(o.pixelPosition,function(a,c){if(c)return c=Oa(a,b),Ma.test(c)?r(a).position()[b]+"px":c})}),r.each({Height:"height",Width:"width"},function(a,b){r.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){r.fn[d]=function(e,f){var g=arguments.length&&(c||"boolean"!=typeof e),h=c||(e===!0||f===!0?"margin":"border");return T(this,function(b,c,e){var f;return r.isWindow(b)?0===d.indexOf("outer")?b["inner"+a]:b.document.documentElement["client"+a]:9===b.nodeType?(f=b.documentElement,Math.max(b.body["scroll"+a],f["scroll"+a],b.body["offset"+a],f["offset"+a],f["client"+a])):void 0===e?r.css(b,c,h):r.style(b,c,e,h)},b,g?e:void 0,g)}})}),r.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}}),r.holdReady=function(a){a?r.readyWait++:r.ready(!0)},r.isArray=Array.isArray,r.parseJSON=JSON.parse,r.nodeName=B,"function"==typeof define&&define.amd&&define("jquery",[],function(){return r});var Vb=a.jQuery,Wb=a.$;return r.noConflict=function(b){return a.$===r&&(a.$=Wb),b&&a.jQuery===r&&(a.jQuery=Vb),r},b||(a.jQuery=a.$=r),r});

From b3100d5684b1c2a8a123b6b901d4255c114b7e18 Mon Sep 17 00:00:00 2001
From: Thomas Johnson <tbjohnson123@gmail.com>
Date: Tue, 21 Nov 2017 17:01:23 -0800
Subject: [PATCH 160/264] Tab size fixes in domEventTests for #43.

---
 tests/domEventTests.nim | 992 ++++++++++++++++++++--------------------
 1 file changed, 496 insertions(+), 496 deletions(-)

diff --git a/tests/domEventTests.nim b/tests/domEventTests.nim
index 94ea02a..2db49c8 100644
--- a/tests/domEventTests.nim
+++ b/tests/domEventTests.nim
@@ -1,629 +1,629 @@
 import times, jstrutils, strutils, kdom, karax, karaxdsl, vdom, tables
 
 var
-    results: seq[cstring]
-    dragEventsCompleted = initTable[DragEventTypes, bool]()
-    testRunning: array[13, bool]
-    testCompleted: array[13, bool]
-    test2ImageDrop = false
-    dblClickCount = 0
-    test6ClickCount = 0
-    test8Failure = false
-    test10inputFocusCount = 0
-    test12Failure = false
+  results: seq[cstring]
+  dragEventsCompleted = initTable[DragEventTypes, bool]()
+  testRunning: array[13, bool]
+  testCompleted: array[13, bool]
+  test2ImageDrop = false
+  dblClickCount = 0
+  test6ClickCount = 0
+  test8Failure = false
+  test10inputFocusCount = 0
+  test12Failure = false
 
 proc getLogText(text: string): cstring =
-    result = "[$#]: $#" % [format(getLocalTime(getTime()), "HH:mm:ss"), $text]
+  result = "[$#]: $#" % [format(getLocalTime(getTime()), "HH:mm:ss"), $text]
 
 proc log(text: string, clear: bool = false) =
-    if clear:
-        results = @[]
-    results.add getLogText(text)
-    echo text
-    redrawSync()
+  if clear:
+    results = @[]
+  results.add getLogText(text)
+  echo text
+  redrawSync()
 
-    # Scroll to top after adding text using JQuery
-    discard window.setTimeout("$('#results').animate({ scrollTop: 0 }, 100);", 100)
+  # Scroll to top after adding text using JQuery
+  discard window.setTimeout("$('#results').animate({ scrollTop: 0 }, 100);", 100)
     
 proc check(cond: bool, msg: string) =
-    if not cond:
-        log "FAIL: " & msg
-        doAssert(cond, msg)
+  if not cond:
+    log "FAIL: " & msg
+    doAssert(cond, msg)
 
 proc check(cond: bool, msg: string, warn: bool): bool =
-    if not cond:
-        if warn:
-            log "WARNING: " & msg
-        else:
-            log "FAIL: " & msg
-            doAssert(cond, msg)
-    result = cond
+  if not cond:
+    if warn:
+      log "WARNING: " & msg
+    else:
+      log "FAIL: " & msg
+      doAssert(cond, msg)
+  result = cond
 
 proc dragDivDragStart(ev: kdom.Event) =
-    dragEventsCompleted[DragStart] = true
-    var dgev = ((DragEvent)ev)
-    var dragDiv = document.getElementById("dragDiv")
+  dragEventsCompleted[DragStart] = true
+  var dgev = ((DragEvent)ev)
+  var dragDiv = document.getElementById("dragDiv")
 
-    if dragDiv != nil:
-        var style = window.getComputedStyle(dgev.target)
-        var dataX = $(parseInt(style.left) - dgev.clientX)
-        var dataY = $(parseInt(style.top) - dgev.clientY)
-        dgev.dataTransfer.setData("text/plain", dataX & "," & dataY)
-        var img = (ImageElement)document.createElement("img")
-        img.src ="https://nim-lang.org/assets/img/logo.svg"
-        dgev.dataTransfer.setDragImage(img, 0, 0)
+  if dragDiv != nil:
+    var style = window.getComputedStyle(dgev.target)
+    var dataX = $(parseInt(style.left) - dgev.clientX)
+    var dataY = $(parseInt(style.top) - dgev.clientY)
+    dgev.dataTransfer.setData("text/plain", dataX & "," & dataY)
+    var img = (ImageElement)document.createElement("img")
+    img.src ="https://nim-lang.org/assets/img/logo.svg"
+    dgev.dataTransfer.setDragImage(img, 0, 0)
     
 proc dragDivDragOver(ev: kdom.Event) =
-    dragEventsCompleted[DragOver] = true
-    ev.preventDefault()
+  dragEventsCompleted[DragOver] = true
+  ev.preventDefault()
 
 proc checkAllTests() =
-    var allTestsPassed = true
-    for a in testCompleted:
-        if not a:
-            allTestsPassed = false
-            break
-    
-    if allTestsPassed:
-        log "All tests completed successfully!"
-    else:
-        log "Some tests failed. Check the log."
+  var allTestsPassed = true
+  for a in testCompleted:
+    if not a:
+      allTestsPassed = false
+      break
+  
+  if allTestsPassed:
+    log "All tests completed successfully!"
+  else:
+    log "Some tests failed. Check the log."
     
 proc completeTest13() =
-    testRunning[12] = false
-    testCompleted[12] = true
-    log "Test 13 completed successfully."
-    checkAllTests()
+  testRunning[12] = false
+  testCompleted[12] = true
+  log "Test 13 completed successfully."
+  checkAllTests()
 
 proc test13() =
-    testRunning[12] = true
-    log "Test 13 started."
-    log "This test verifies KeyboardEvent getModifierState functionality."
-    log "To continue, press the left CTRL key."
+  testRunning[12] = true
+  log "Test 13 started."
+  log "This test verifies KeyboardEvent getModifierState functionality."
+  log "To continue, press the left CTRL key."
     
 proc test12focus1(ev: kdom.Event) =
-    ev.stopImmediatePropagation()
+  ev.stopImmediatePropagation()
 
 proc test12focus2(ev: kdom.Event) =
-    test12Failure = true
-    check false, "Unexpected listener invocation."
+  test12Failure = true
+  check false, "Unexpected listener invocation."
 
 proc test12focus3(ev: kdom.Event) =
-    test12Failure = true
-    check false, "Unexpected listener invocation."
+  test12Failure = true
+  check false, "Unexpected listener invocation."
 
 proc completeTest12() =
-    if not test12Failure:    
-        var elmt = document.getElementById("test12input")
-        elmt.style.visibility = "hidden"
-        testRunning[11] = false
-        testCompleted[11] = true
-        log "Test 12 completed successfully."
-        test13()
+  if not test12Failure:    
+    var elmt = document.getElementById("test12input")
+    elmt.style.visibility = "hidden"
+    testRunning[11] = false
+    testCompleted[11] = true
+    log "Test 12 completed successfully."
+    test13()
 
 proc test12() =
-    testRunning[11] = true
-    log "Test 12 started."
-    log "This test verifies stopImmediatePropagation functionality."
+  testRunning[11] = true
+  log "Test 12 started."
+  log "This test verifies stopImmediatePropagation functionality."
 
-    var elmt = document.getElementById("test12input")
-    elmt.style.visibility = "visible"
-    elmt.addEventListener($Focus, test12focus1)
-    elmt.addEventListener($Focus, test12focus2)
-    elmt.addEventListener($Focus, test12focus3)
-    elmt.focus()
-    discard setTimeout(completeTest12, 500)
-    
+  var elmt = document.getElementById("test12input")
+  elmt.style.visibility = "visible"
+  elmt.addEventListener($Focus, test12focus1)
+  elmt.addEventListener($Focus, test12focus2)
+  elmt.addEventListener($Focus, test12focus3)
+  elmt.focus()
+  discard setTimeout(completeTest12, 500)
+  
 proc completeTest11() =
-    document.querySelector("h3").style.visibility = "hidden"
-    
-    testRunning[10] = false
-    testCompleted[10] = true
-    log "Test 11 completed."
-    test12()
+  document.querySelector("h3").style.visibility = "hidden"
+  
+  testRunning[10] = false
+  testCompleted[10] = true
+  log "Test 11 completed."
+  test12()
 
 proc test11() =
-    testRunning[10] = true
-    log "Test 11 started."
-    log "This test checks querySelector and querySelectorAll."
-    
-    document.getElementById("test11h3").style.visibility = "visible"
+  testRunning[10] = true
+  log "Test 11 started."
+  log "This test checks querySelector and querySelectorAll."
+  
+  document.getElementById("test11h3").style.visibility = "visible"
 
-    var elmt = document.querySelector("h3")
-    check elmt != nil, "querySelector returned nil."
-    log "text: " & $elmt.innerHTML
-    check $elmt.innerHTML == "test 11", "Unexpected h3 value."
+  var elmt = document.querySelector("h3")
+  check elmt != nil, "querySelector returned nil."
+  log "text: " & $elmt.innerHTML
+  check $elmt.innerHTML == "test 11", "Unexpected h3 value."
 
-    var elmts = document.querySelectorAll("h3")
-    log "elmts len: " & $elmts.len
-    check elmts.len == 1, "Unexpected elmts len."
+  var elmts = document.querySelectorAll("h3")
+  log "elmts len: " & $elmts.len
+  check elmts.len == 1, "Unexpected elmts len."
 
-    log "text: " & $elmts[0].innerHTML
-    check $elmts[0].innerHTML == "test 11", "Unexpected h3 value."
+  log "text: " & $elmts[0].innerHTML
+  check $elmts[0].innerHTML == "test 11", "Unexpected h3 value."
 
-    discard setTimeout(completeTest11, 500)
+  discard setTimeout(completeTest11, 500)
 
 proc completeTest10() =
-    testRunning[9] = false
-    testCompleted[9] = true
-    var test10input1 = document.getElementById("test10input1")
-    var test10input2 = document.getElementById("test10input2")
-    test10input1.style.visibility = "hidden"
-    test10input2.style.visibility = "hidden"
-    log "Test 10 completed."
-    test11()
+  testRunning[9] = false
+  testCompleted[9] = true
+  var test10input1 = document.getElementById("test10input1")
+  var test10input2 = document.getElementById("test10input2")
+  test10input1.style.visibility = "hidden"
+  test10input2.style.visibility = "hidden"
+  log "Test 10 completed."
+  test11()
 
 proc test10inputOnfocus(ev: kdom.Event) =
-    if testRunning[9]:
-        inc test10inputFocusCount
-        if test10inputFocusCount > 3:
-            discard setTimeout(completeTest10, 500)
+  if testRunning[9]:
+    inc test10inputFocusCount
+    if test10inputFocusCount > 3:
+      discard setTimeout(completeTest10, 500)
 
 proc test10() =
-    log "Test 10 started."
-    log "This test checks element.focus()."
-    testRunning[9] = true
-    var test10input1 = document.getElementById("test10input1")
-    var test10input2 = document.getElementById("test10input2")
-    test10input1.style.visibility = "visible"
-    test10input2.style.visibility = "visible"
-    test10input1.addEventListener($DomEvent.Focus, test10inputOnfocus)
-    test10input2.addEventListener($DomEvent.Focus, test10inputOnfocus)
-    test10input1.focus()
-    test10input2.focus()
-    test10input1.focus()
-    test10input2.focus()
+  log "Test 10 started."
+  log "This test checks element.focus()."
+  testRunning[9] = true
+  var test10input1 = document.getElementById("test10input1")
+  var test10input2 = document.getElementById("test10input2")
+  test10input1.style.visibility = "visible"
+  test10input2.style.visibility = "visible"
+  test10input1.addEventListener($DomEvent.Focus, test10inputOnfocus)
+  test10input2.addEventListener($DomEvent.Focus, test10inputOnfocus)
+  test10input1.focus()
+  test10input2.focus()
+  test10input1.focus()
+  test10input2.focus()
 
 proc completeTest9() =
-    var test9Value = $document.getElementById("test9value").value
-    doAssert(test9Value == "[test9]", "Unexpected test9 value.")
-    testRunning[8] = false
-    testCompleted[8] = true
-    test10()
+  var test9Value = $document.getElementById("test9value").value
+  doAssert(test9Value == "[test9]", "Unexpected test9 value.")
+  testRunning[8] = false
+  testCompleted[8] = true
+  test10()
 
 proc test9() =
-    log "Test 9 started."
-    log "This tests the setTimeout(w: Window, code: cstring, pause: int) proc."
-    testRunning[8] = true
+  log "Test 9 started."
+  log "This tests the setTimeout(w: Window, code: cstring, pause: int) proc."
+  testRunning[8] = true
 
-    discard window.setTimeout("document.getElementById('test9value').value = '[test9]';", 500)
-    discard window.setTimeout(completeTest9, 1000)
-    
+  discard window.setTimeout("document.getElementById('test9value').value = '[test9]';", 500)
+  discard window.setTimeout(completeTest9, 1000)
+  
 proc completeTest8() =
-    if not test8Failure:
-        log "Test 8 completed successfully."
-        testRunning[7] = false
-        testCompleted[7] = true
-        test9()
-    else:
-        log "Test 8 failed."
+  if not test8Failure:
+    log "Test 8 completed successfully."
+    testRunning[7] = false
+    testCompleted[7] = true
+    test9()
+  else:
+    log "Test 8 failed."
 
 proc failTest8() =
-    test8Failure = true
-    check(false, "ClearTimeout failed.")    
+  test8Failure = true
+  check(false, "ClearTimeout failed.")    
 
 proc test8() =
-    log "Test 8 started."
-    log "This test checks that clearTimeout() works correctly."
-    testRunning[7] = true
-    var timeout = setTimeout(failTest8, 1000)
-    clearTimeout(timeout)
-    discard setTimeout(completeTest8, 1200)
-    
+  log "Test 8 started."
+  log "This test checks that clearTimeout() works correctly."
+  testRunning[7] = true
+  var timeout = setTimeout(failTest8, 1000)
+  clearTimeout(timeout)
+  discard setTimeout(completeTest8, 1200)
+  
 proc test7() =
-    log "Test 7 started."
-    log "This test ensures that mouse events correctly pass button and key modifier information."
-    log "To continue, right-click while holding SHIFT."
-    testRunning[6] = true
+  log "Test 7 started."
+  log "This test ensures that mouse events correctly pass button and key modifier information."
+  log "To continue, right-click while holding SHIFT."
+  testRunning[6] = true
 
 # A mouseMove handler is needed (even if empty) so mouseDown will have a value for movementX and movementY
 proc mouseMove(ev: kdom.Event) =
-    discard
+  discard
 
 proc mouseDown(ev: kdom.Event) =
-    var me = (MouseEvent)ev
-    if testRunning[5]:
-        log "[ME] button: " & $me.button
-        log "[ME] buttons: " & $me.buttons
-        log "[ME] altKey: " & $me.altKey
-        log "[ME] ctrlKey: " & $me.ctrlKey
-        log "[ME] metaKey: " & $me.metaKey
-        log "[ME] shiftKey: " & $me.shiftKey
+  var me = (MouseEvent)ev
+  if testRunning[5]:
+    log "[ME] button: " & $me.button
+    log "[ME] buttons: " & $me.buttons
+    log "[ME] altKey: " & $me.altKey
+    log "[ME] ctrlKey: " & $me.ctrlKey
+    log "[ME] metaKey: " & $me.metaKey
+    log "[ME] shiftKey: " & $me.shiftKey
 
-        log "[ME] clientX: " & $me.clientX
-        check me.clientX > 0, "Unexpected clientX value."
+    log "[ME] clientX: " & $me.clientX
+    check me.clientX > 0, "Unexpected clientX value."
 
-        log "[ME] clientY: " & $me.clientY
-        check me.clientY > 0, "Unexpected clientY value."
+    log "[ME] clientY: " & $me.clientY
+    check me.clientY > 0, "Unexpected clientY value."
 
-        log "[ME] movementX: " & $me.movementX
-        check me.movementX > 0, "Unexpected movementX value."
+    log "[ME] movementX: " & $me.movementX
+    check me.movementX > 0, "Unexpected movementX value."
 
-        log "[ME] movementY: " & $me.movementY
-        check me.movementY > 0, "Unexpected movementY value."
-        
-        log "[ME] offsetX: " & $me.offsetX
-        check me.offsetX > 0, "Unexpected offsetX value."
-        
-        log "[ME] offsetY: " & $me.offsetY
-        check me.offsetY > 0, "Unexpected offsetY value."
+    log "[ME] movementY: " & $me.movementY
+    check me.movementY > 0, "Unexpected movementY value."
+    
+    log "[ME] offsetX: " & $me.offsetX
+    check me.offsetX > 0, "Unexpected offsetX value."
+    
+    log "[ME] offsetY: " & $me.offsetY
+    check me.offsetY > 0, "Unexpected offsetY value."
 
-        log "[ME] pageX: " & $me.pageX
-        check me.pageX > 0, "Unexpected pageX value."
+    log "[ME] pageX: " & $me.pageX
+    check me.pageX > 0, "Unexpected pageX value."
 
-        log "[ME] pageY: " & $me.pageY
-        check me.pageY > 0, "Unexpected pageY value."
+    log "[ME] pageY: " & $me.pageY
+    check me.pageY > 0, "Unexpected pageY value."
 
-        log "[ME] relatedTarget == nil: " & $(me.relatedTarget == nil)
+    log "[ME] relatedTarget == nil: " & $(me.relatedTarget == nil)
 
-        log "[ME] screenX: " & $me.screenX
-        check me.screenX > 0, "Unexpected screenX value."
+    log "[ME] screenX: " & $me.screenX
+    check me.screenX > 0, "Unexpected screenX value."
 
-        log "[ME] screenY: " & $me.screenY
-        check me.screenY > 0, "Unexpected screenY value."
+    log "[ME] screenY: " & $me.screenY
+    check me.screenY > 0, "Unexpected screenY value."
 
-        log "[ME] x: " & $me.x
-        check me.x > 0, "Unexpected x value."
+    log "[ME] x: " & $me.x
+    check me.x > 0, "Unexpected x value."
 
-        log "[ME] y: " & $me.y
-        check me.y > 0, "Unexpected y value."
+    log "[ME] y: " & $me.y
+    check me.y > 0, "Unexpected y value."
 
-        if dblClickCount == 1:
-            inc test6ClickCount
+    if dblClickCount == 1:
+      inc test6ClickCount
 
-            if test6ClickCount > 1:
-                testRunning[5] = false
-                testCompleted[5] = true
-                log "Test 6 completed successfully."
-                test7()
-    elif testRunning[6]:
-        log "[ME] buttons: " & $me.buttons
-        var passed = check(me.buttons == (int)SecondaryButton, "Unexpected buttons value.", true)
-        
-        log "[ME] shiftKey: " & $me.shiftKey
-        passed = passed and check(me.shiftKey, "Unexpected shiftKey value.", true)
-        
-        var isShiftPressed = me.getModifierState($KeyboardEventKey.Shift)
-        log "[ME] getModifierState shift result: " & $isShiftPressed
-        passed = passed and check(isShiftPressed, "Unexpected getModifierState shift result.", true)
-        
-        if passed:
-            log "Test 7 completed successfully."
-            testRunning[6] = false
-            testCompleted[6] = true
+      if test6ClickCount > 1:
+        testRunning[5] = false
+        testCompleted[5] = true
+        log "Test 6 completed successfully."
+        test7()
+  elif testRunning[6]:
+    log "[ME] buttons: " & $me.buttons
+    var passed = check(me.buttons == (int)SecondaryButton, "Unexpected buttons value.", true)
+    
+    log "[ME] shiftKey: " & $me.shiftKey
+    passed = passed and check(me.shiftKey, "Unexpected shiftKey value.", true)
+    
+    var isShiftPressed = me.getModifierState($KeyboardEventKey.Shift)
+    log "[ME] getModifierState shift result: " & $isShiftPressed
+    passed = passed and check(isShiftPressed, "Unexpected getModifierState shift result.", true)
+    
+    if passed:
+      log "Test 7 completed successfully."
+      testRunning[6] = false
+      testCompleted[6] = true
 
-        ev.preventDefault()
+    ev.preventDefault()
 
-        if testCompleted[6]:
-            test8()
+    if testCompleted[6]:
+      test8()
 
 proc dblClick(ev: kdom.Event) =
-    inc dblClickCount
-    check dblClickCount == 1, "Unexpected double-click event invocation."
-    log "Try double-clicking again."
+  inc dblClickCount
+  check dblClickCount == 1, "Unexpected double-click event invocation."
+  log "Try double-clicking again."
 
 proc test6() =
-    log "Test 6 started."
-    log "This test validates that addEventListener can be called by passing AddEventListenerOptions, and the options work correctly."
-    log "To continue, try double-clicking the mouse."
-    var options = AddEventListenerOptions(once:true)
-    document.addEventListener($DomEvent.DblClick, dblClick, options)
-    testRunning[5] = true
+  log "Test 6 started."
+  log "This test validates that addEventListener can be called by passing AddEventListenerOptions, and the options work correctly."
+  log "To continue, try double-clicking the mouse."
+  var options = AddEventListenerOptions(once:true)
+  document.addEventListener($DomEvent.DblClick, dblClick, options)
+  testRunning[5] = true
 
 proc test5() =
-    log "Test 5 started."
-    log "This test validates the newly added properties: window.screen.width, window.scren.height, element.clientWidth, and element.clientHeight."
-    log "window.screen.width: " & $window.screen.width
-    check(window.screen.width > 0, "Unexpected value for window.screen.width.")
+  log "Test 5 started."
+  log "This test validates the newly added properties: window.screen.width, window.scren.height, element.clientWidth, and element.clientHeight."
+  log "window.screen.width: " & $window.screen.width
+  check(window.screen.width > 0, "Unexpected value for window.screen.width.")
 
-    log "window.screen.height: " & $window.screen.height
-    check(window.screen.height > 0, "Unexpected value for window.screen.height.")
-    
-    var elem = document.getElementById("results")
-    log "results div clientWidth: " & $elem.clientWidth
-    check(elem.clientWidth > 0, "Unexpected value for clientWidth.")
+  log "window.screen.height: " & $window.screen.height
+  check(window.screen.height > 0, "Unexpected value for window.screen.height.")
+  
+  var elem = document.getElementById("results")
+  log "results div clientWidth: " & $elem.clientWidth
+  check(elem.clientWidth > 0, "Unexpected value for clientWidth.")
 
-    log "results div clientHeight: " & $elem.clientHeight
-    check(elem.clientHeight > 0, "Unexpected value for clientHeight.")
-    
-    testRunning[4] = false
-    testCompleted[4] = true
+  log "results div clientHeight: " & $elem.clientHeight
+  check(elem.clientHeight > 0, "Unexpected value for clientHeight.")
+  
+  testRunning[4] = false
+  testCompleted[4] = true
 
-    log "Test 5 completed successfully."
-    test6()
-    
+  log "Test 5 completed successfully."
+  test6()
+  
 proc keyDown(ev: kdom.Event) =
-    var kbev = ((KeyboardEvent)ev)
-    if testRunning[2]:
-        log "[KB] altKey: " & $kbev.altKey
-        log "[KB] ctrlKey: " & $kbev.ctrlKey
-        log "[KB] metaKey: " & $kbev.metaKey
-        log "[KB] shiftKey: " & $kbev.shiftKey
-        log "[KB] code: " & $kbev.code
-        log "[KB] isComposing: " & $kbev.isComposing
-        log "[KB] key: " & $kbev.key
-        log "[KB] keyCode: " & $kbev.keyCode
-        log "[KB] location: " & $kbev.location
+  var kbev = ((KeyboardEvent)ev)
+  if testRunning[2]:
+    log "[KB] altKey: " & $kbev.altKey
+    log "[KB] ctrlKey: " & $kbev.ctrlKey
+    log "[KB] metaKey: " & $kbev.metaKey
+    log "[KB] shiftKey: " & $kbev.shiftKey
+    log "[KB] code: " & $kbev.code
+    log "[KB] isComposing: " & $kbev.isComposing
+    log "[KB] key: " & $kbev.key
+    log "[KB] keyCode: " & $kbev.keyCode
+    log "[KB] location: " & $kbev.location
 
-        log "Test 3 completed successfully."
-        testRunning[2] = false
-        testCompleted[2] = true
+    log "Test 3 completed successfully."
+    testRunning[2] = false
+    testCompleted[2] = true
 
-        testRunning[3] = true
-        log "Test 4 started."
-        log "This test ensures the child events have access to base event settings."
+    testRunning[3] = true
+    log "Test 4 started."
+    log "This test ensures the child events have access to base event settings."
 
-        log "[KB] event.bubbles: " & $kbev.bubbles
-        check kbev.bubbles, "Unexpected event.bubbles value."
+    log "[KB] event.bubbles: " & $kbev.bubbles
+    check kbev.bubbles, "Unexpected event.bubbles value."
 
-        log "[KB] event.cancelBubble: " & $kbev.cancelBubble
-        check kbev.cancelBubble == false, "Unexpected event.cancelBubble value."
+    log "[KB] event.cancelBubble: " & $kbev.cancelBubble
+    check kbev.cancelBubble == false, "Unexpected event.cancelBubble value."
 
-        log "[KB] event.cancelable: " & $kbev.cancelable
-        check kbev.cancelable, "Unexpected event.cancelable value."
+    log "[KB] event.cancelable: " & $kbev.cancelable
+    check kbev.cancelable, "Unexpected event.cancelable value."
 
-        log "[KB] event.composed: " & $kbev.composed
-        check kbev.composed, "Unexpected event.composed value."
+    log "[KB] event.composed: " & $kbev.composed
+    check kbev.composed, "Unexpected event.composed value."
 
-        log "[KB] event.currentTarget.nodeName: " & $kbev.currentTarget.nodeName
-        check kbev.currentTarget.nodeName == "#document", "Unexpected event.currentTarget.nodeName value."
+    log "[KB] event.currentTarget.nodeName: " & $kbev.currentTarget.nodeName
+    check kbev.currentTarget.nodeName == "#document", "Unexpected event.currentTarget.nodeName value."
 
-        log "[KB] event.defaultPrevented: " & $kbev.defaultPrevented
-        check kbev.defaultPrevented == false, "Unexpected event.defaultPrevented value."
+    log "[KB] event.defaultPrevented: " & $kbev.defaultPrevented
+    check kbev.defaultPrevented == false, "Unexpected event.defaultPrevented value."
 
-        log "[KB] event.eventPhase: " & $kbev.eventPhase
-        check EventPhase(kbev.eventPhase) == BubblingPhase, "Unexpected event.eventPhase value."
+    log "[KB] event.eventPhase: " & $kbev.eventPhase
+    check EventPhase(kbev.eventPhase) == BubblingPhase, "Unexpected event.eventPhase value."
 
-        log "[KB] event.isTrusted: " & $kbev.isTrusted
-        check kbev.isTrusted, "Unexpected event.isTrusted value."
+    log "[KB] event.isTrusted: " & $kbev.isTrusted
+    check kbev.isTrusted, "Unexpected event.isTrusted value."
 
-        log "[UI] kbev.detail: " & $kbev.detail
+    log "[UI] kbev.detail: " & $kbev.detail
 
-        log "[UI] kbev.view.outerHeight: " & $kbev.view.outerHeight
-        check kbev.view.outerHeight > 0, "Unexpected view.outerHeight value."
+    log "[UI] kbev.view.outerHeight: " & $kbev.view.outerHeight
+    check kbev.view.outerHeight > 0, "Unexpected view.outerHeight value."
 
-        log "[UI] kbev.view.outerWidth: " & $kbev.view.outerWidth
-        check kbev.view.outerWidth > 0, "Unexpected view.outerWidth value."
+    log "[UI] kbev.view.outerWidth: " & $kbev.view.outerWidth
+    check kbev.view.outerWidth > 0, "Unexpected view.outerWidth value."
 
-        testRunning[3] = false
-        testCompleted[3] = true
-        log "Test 4 completed."
-        test5()
-    elif testRunning[12]:
-        if kbev.code == "ControlLeft":
-            log "[KB] altKey: " & $kbev.altKey
-            log "[KB] ctrlKey: " & $kbev.ctrlKey
-            log "[KB] metaKey: " & $kbev.metaKey
-            log "[KB] shiftKey: " & $kbev.shiftKey
-            log "[KB] code: " & $kbev.code
-            log "[KB] isComposing: " & $kbev.isComposing
-            log "[KB] key: " & $kbev.key
-            log "[KB] keyCode: " & $kbev.keyCode
-            log "[KB] location: " & $kbev.location
-            var isControl = kbev.getModifierState($KeyboardEventKey.Control)
-            log "[KB] getModifierState result: " & $isControl
-            check isControl, "Unexpected getModifierState return value."
-            completeTest13()
-        
+    testRunning[3] = false
+    testCompleted[3] = true
+    log "Test 4 completed."
+    test5()
+  elif testRunning[12]:
+    if kbev.code == "ControlLeft":
+      log "[KB] altKey: " & $kbev.altKey
+      log "[KB] ctrlKey: " & $kbev.ctrlKey
+      log "[KB] metaKey: " & $kbev.metaKey
+      log "[KB] shiftKey: " & $kbev.shiftKey
+      log "[KB] code: " & $kbev.code
+      log "[KB] isComposing: " & $kbev.isComposing
+      log "[KB] key: " & $kbev.key
+      log "[KB] keyCode: " & $kbev.keyCode
+      log "[KB] location: " & $kbev.location
+      var isControl = kbev.getModifierState($KeyboardEventKey.Control)
+      log "[KB] getModifierState result: " & $isControl
+      check isControl, "Unexpected getModifierState return value."
+      completeTest13()
+      
 proc test3() =
-    log "Test 3 started."
-    log "This test validates KeyboardEvent handling."
-    log "Click on the browser to focus, and then press any key."
-    testRunning[2] = true
-    
+  log "Test 3 started."
+  log "This test validates KeyboardEvent handling."
+  log "Click on the browser to focus, and then press any key."
+  testRunning[2] = true
+  
 proc dragDivDrop(ev: kdom.Event) =
-    dragEventsCompleted[Drop] = true
-    var dgev = ((DragEvent)ev)
-    var dragDiv = document.getElementById("dragDiv")
-    var data = $dgev.dataTransfer.getData("text/plain")
-    var dt = dgev.dataTransfer
-    
+  dragEventsCompleted[Drop] = true
+  var dgev = ((DragEvent)ev)
+  var dragDiv = document.getElementById("dragDiv")
+  var data = $dgev.dataTransfer.getData("text/plain")
+  var dt = dgev.dataTransfer
+  
+  if not test2ImageDrop:
+    var offset = data.split(",")
+    var newLeft = dgev.clientX + parseInt(offset[0])
+    var newTop = dgev.clientY + parseInt(offset[1])
+
+    if newLeft < 0: newLeft = 0
+    if newTop < 0: newTop = 0
+    if newLeft + dragDiv.clientWidth > window.outerWidth: newLeft = window.outerWidth - dragDiv.clientWidth
+    if newTop + dragDiv.clientHeight > window.outerHeight: newTop = window.outerHeight - dragDiv.clientHeight
+
+    dragDiv.style.left = $newLeft & "px"
+    dragDiv.style.top = $newTop & "px"
+
+    if testRunning[0]:
+      log "[drop] Drop coords: $#, $#" % [$newLeft, $newTop]
+
+  if testCompleted[0] and not testCompleted[1] and not testRunning[1]:
+    testRunning[1] = true
+    log "Test 2 started."
+    log "This test validates the DataTransfer and DataTransferItem objects passed as part of the drag events."
+    var isChrome = ($navigator.userAgent).contains("Chrome")
+
+    log "[DT] effectAllowed: " & $dt.effectAllowed
+    var expectedEffectAllowed = $Uninitialized
+    if isChrome: 
+      expectedEffectAllowed = if test2ImageDrop: $DataTransferEffectAllowed.Copy else: $DataTransferEffectAllowed.All
+    check(dt.effectAllowed == $expectedEffectAllowed, "Unexpected effectAllowed value.")
+
     if not test2ImageDrop:
-        var offset = data.split(",")
-        var newLeft = dgev.clientX + parseInt(offset[0])
-        var newTop = dgev.clientY + parseInt(offset[1])
+      log "[DT] dropEffect: " & $dt.dropEffect
+      var expectedDropEffect = if isChrome: $DataTransferDropEffect.None else: $DataTransferDropEffect.Move
+      check(dt.dropEffect == $expectedDropEffect, "Unexpected dropEffect value.")
 
-        if newLeft < 0: newLeft = 0
-        if newTop < 0: newTop = 0
-        if newLeft + dragDiv.clientWidth > window.outerWidth: newLeft = window.outerWidth - dragDiv.clientWidth
-        if newTop + dragDiv.clientHeight > window.outerHeight: newTop = window.outerHeight - dragDiv.clientHeight
+    var expectedFilesLen = if test2ImageDrop: 1 else: 0
+    log "[DT] files len: " & $dt.files.len
+    check(dt.files.len == expectedFilesLen, "Unexpected files length.")
+    
+    var expectedItemsLen = 1
+    log "[DT] items len: " & $dt.items.len
+    check(dt.items.len == expectedItemsLen, "Unexpected items length.")
 
-        dragDiv.style.left = $newLeft & "px"
-        dragDiv.style.top = $newTop & "px"
+    var expectedItemKind = if test2ImageDrop: $DataTransferItemKind.File else: $DataTransferItemKind.String
+    log "[DT] items[0].kind: " & $dt.items[0].kind
+    check(dt.items[0].kind == expectedItemKind, "Unexpected item kind.")
 
-        if testRunning[0]:
-            log "[drop] Drop coords: $#, $#" % [$newLeft, $newTop]
+    var expectedItemType = if test2ImageDrop: "image/png" else: "text/plain"
+    log "[DT] items[0].type: " & $dt.items[0].`type`
+    check(dt.items[0].`type` == expectedItemType, "Unexpected item type.")
+    
+    var expectedTypesLen = if not isChrome and test2ImageDrop: 2 else: 1
+    log "[DT] types len: " & $dt.types.len
+    check(dt.types.len == expectedTypesLen, "Unexpected types length.")
 
-    if testCompleted[0] and not testCompleted[1] and not testRunning[1]:
-        testRunning[1] = true
-        log "Test 2 started."
-        log "This test validates the DataTransfer and DataTransferItem objects passed as part of the drag events."
-        var isChrome = ($navigator.userAgent).contains("Chrome")
-
-        log "[DT] effectAllowed: " & $dt.effectAllowed
-        var expectedEffectAllowed = $Uninitialized
-        if isChrome: 
-            expectedEffectAllowed = if test2ImageDrop: $DataTransferEffectAllowed.Copy else: $DataTransferEffectAllowed.All
-        check(dt.effectAllowed == $expectedEffectAllowed, "Unexpected effectAllowed value.")
-
-        if not test2ImageDrop:
-            log "[DT] dropEffect: " & $dt.dropEffect
-            var expectedDropEffect = if isChrome: $DataTransferDropEffect.None else: $DataTransferDropEffect.Move
-            check(dt.dropEffect == $expectedDropEffect, "Unexpected dropEffect value.")
-
-        var expectedFilesLen = if test2ImageDrop: 1 else: 0
-        log "[DT] files len: " & $dt.files.len
-        check(dt.files.len == expectedFilesLen, "Unexpected files length.")
-        
-        var expectedItemsLen = 1
-        log "[DT] items len: " & $dt.items.len
-        check(dt.items.len == expectedItemsLen, "Unexpected items length.")
-
-        var expectedItemKind = if test2ImageDrop: $DataTransferItemKind.File else: $DataTransferItemKind.String
-        log "[DT] items[0].kind: " & $dt.items[0].kind
-        check(dt.items[0].kind == expectedItemKind, "Unexpected item kind.")
-
-        var expectedItemType = if test2ImageDrop: "image/png" else: "text/plain"
-        log "[DT] items[0].type: " & $dt.items[0].`type`
-        check(dt.items[0].`type` == expectedItemType, "Unexpected item type.")
-        
-        var expectedTypesLen = if not isChrome and test2ImageDrop: 2 else: 1
-        log "[DT] types len: " & $dt.types.len
-        check(dt.types.len == expectedTypesLen, "Unexpected types length.")
-
-        if test2ImageDrop:
-            log "[DT] types[0]: " & $dt.types[0]
-            if isChrome:
-                check(dt.types[0] == "Files", "Unexpected type value.")
-            else:
-                log "[DT] types[1]: " & $dt.types[1]
-                check(dt.types[0] == "application/x-moz-file", "Unexpected type value.")
-                check(dt.types[1] == "Files", "Unexpected type value.")
-                
-        if test2ImageDrop:
-            test2ImageDrop = false
-
-            # TODO: Determine why getAsString() does invoke callback
-            # proc getAsString*(dti: DataTransferItem, callback: proc(data: cstring))
+    if test2ImageDrop:
+      log "[DT] types[0]: " & $dt.types[0]
+      if isChrome:
+        check(dt.types[0] == "Files", "Unexpected type value.")
+      else:
+        log "[DT] types[1]: " & $dt.types[1]
+        check(dt.types[0] == "application/x-moz-file", "Unexpected type value.")
+        check(dt.types[1] == "Files", "Unexpected type value.")
             
-            var jfile = dt.items[0].getAsFile()
-            log "[DT] file name: " & $jfile.name
-            check(jfile.name.len > 0, "Unexpected file name length.")
-                
-            testCompleted[1] = true
-            testRunning[1] = false
-            log "Test 2 completed successfully."
-            test3()
-        
-            dgev.preventDefault()
-            return
+    if test2ImageDrop:
+      test2ImageDrop = false
 
-        document.getElementById("dragDiv").style.visibility = "hidden"
-        log "To continue, drag a .PNG file (file type matters) anywhere on this page."
-        log "NOTE: If the browser redirects to the image, then consider this test as failed."
-        test2ImageDrop = true
-        testRunning[1] = false
+      # TODO: Determine why getAsString() does invoke callback
+      # proc getAsString*(dti: DataTransferItem, callback: proc(data: cstring))
+      
+      var jfile = dt.items[0].getAsFile()
+      log "[DT] file name: " & $jfile.name
+      check(jfile.name.len > 0, "Unexpected file name length.")
+          
+      testCompleted[1] = true
+      testRunning[1] = false
+      log "Test 2 completed successfully."
+      test3()
+  
+      dgev.preventDefault()
+      return
 
-    dgev.preventDefault()
+    document.getElementById("dragDiv").style.visibility = "hidden"
+    log "To continue, drag a .PNG file (file type matters) anywhere on this page."
+    log "NOTE: If the browser redirects to the image, then consider this test as failed."
+    test2ImageDrop = true
+    testRunning[1] = false
+
+  dgev.preventDefault()
 
 proc dragDivDrag(ev: kdom.Event) =
-    dragEventsCompleted[Drag] = true
-    var dgev = ((DragEvent)ev)
-    dgev.preventDefault()
+  dragEventsCompleted[Drag] = true
+  var dgev = ((DragEvent)ev)
+  dgev.preventDefault()
 
 proc dragDivDragLeave(ev: kdom.Event) =
-    dragEventsCompleted[DragLeave] = true
-    var dgev = ((DragEvent)ev)
-    if testRunning[0]:
-        log "[dragLeave]"
-    dgev.preventDefault()
-  
+  dragEventsCompleted[DragLeave] = true
+  var dgev = ((DragEvent)ev)
+  if testRunning[0]:
+    log "[dragLeave]"
+  dgev.preventDefault()
+
 proc dragDivDragExit(ev: kdom.Event) =
-    dragEventsCompleted[DragExit] = true
-    var dgev = ((DragEvent)ev)
-    if testRunning[0]:
-        log "[dragExit]"
-    dgev.preventDefault()
-    
+  dragEventsCompleted[DragExit] = true
+  var dgev = ((DragEvent)ev)
+  if testRunning[0]:
+    log "[dragExit]"
+  dgev.preventDefault()
+  
 proc dragDivDragEnd(ev: kdom.Event) =
-    dragEventsCompleted[DragEnd] = true
-    var dgev = ((DragEvent)ev)
-    if testRunning[0]:
-        log "[dragEnd]"
-    dgev.preventDefault()
-        
+  dragEventsCompleted[DragEnd] = true
+  var dgev = ((DragEvent)ev)
+  if testRunning[0]:
+    log "[dragEnd]"
+  dgev.preventDefault()
+      
 proc dragDivDragEnter(ev: kdom.Event) =
-    dragEventsCompleted[DragEnter] = true
-    if testRunning[0]:
-        log "[dragEnter]"
-    var dgev = ((DragEvent)ev)
-    dgev.preventDefault()
+  dragEventsCompleted[DragEnter] = true
+  if testRunning[0]:
+    log "[dragEnter]"
+  var dgev = ((DragEvent)ev)
+  dgev.preventDefault()
 
 proc initDragEvents() =
-    log "Drag event initialization started."
-    var dragDiv = document.getElementById("dragDiv")
-    document.addEventListener($DragEventTypes.DragOver, dragDivDragOver, false)
-    document.addEventListener($DragEventTypes.Drop, dragDivDrop, false)
-    document.addEventListener($DragEventTypes.Drag, dragDivDrag, false)
-    dragDiv.addEventListener($DragEventTypes.DragStart, dragDivDragStart, false)
-    dragDiv.addEventListener($DragEventTypes.DragExit, dragDivDragExit, false)
-    dragDiv.addEventListener($DragEventTypes.DragLeave, dragDivDragLeave, false)
-    dragDiv.addEventListener($DragEventTypes.DragEnd, dragDivDragEnd, false)
-    dragDiv.addEventListener($DragEventTypes.DragEnter, dragDivDragEnter, false)
-    log "Drag event initialization complete."
-    log "Drag the div to continue the test. Make sure you drag the div over another element."
-    log "Then click the \"Check test 1 status\" button."
+  log "Drag event initialization started."
+  var dragDiv = document.getElementById("dragDiv")
+  document.addEventListener($DragEventTypes.DragOver, dragDivDragOver, false)
+  document.addEventListener($DragEventTypes.Drop, dragDivDrop, false)
+  document.addEventListener($DragEventTypes.Drag, dragDivDrag, false)
+  dragDiv.addEventListener($DragEventTypes.DragStart, dragDivDragStart, false)
+  dragDiv.addEventListener($DragEventTypes.DragExit, dragDivDragExit, false)
+  dragDiv.addEventListener($DragEventTypes.DragLeave, dragDivDragLeave, false)
+  dragDiv.addEventListener($DragEventTypes.DragEnd, dragDivDragEnd, false)
+  dragDiv.addEventListener($DragEventTypes.DragEnter, dragDivDragEnter, false)
+  log "Drag event initialization complete."
+  log "Drag the div to continue the test. Make sure you drag the div over another element."
+  log "Then click the \"Check test 1 status\" button."
 
 proc initMouseEvents() =
-    log "Mouse event initialization started."
-    document.addEventListener($DomEvent.MouseDown, mouseDown, false)
-    document.addEventListener($DomEvent.MouseMove, mouseMove, false)
-    log "Mouse event initialization complete."
-    
+  log "Mouse event initialization started."
+  document.addEventListener($DomEvent.MouseDown, mouseDown, false)
+  document.addEventListener($DomEvent.MouseMove, mouseMove, false)
+  log "Mouse event initialization complete."
+  
 proc initKbEvents() =
-    log "KB event initialization started."
-    document.addEventListener($DomEvent.KeyDown, keyDown, false)
-    log "KB event initialization complete."
-    
+  log "KB event initialization started."
+  document.addEventListener($DomEvent.KeyDown, keyDown, false)
+  log "KB event initialization complete."
+  
 proc startTests() =
-    log "[Disclaimer: these tests have been tested successfully on Linux with Firefox and Chromium. Your results may vary.]"
-    log "Note: these tests require some manual steps, which will be shown here."
-    log "Note: new entries appear in this text area at the top, so read in this direction."
-    log "  | |    | |    | |    | |    | |    | |    | |    | |    | |    | |    | |"
-    log " /  \\  /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\"
-    log "Test 1 started."
-    log "This test checks that drag events are fired."
-    testRunning[0] = true
-    for evt in [Drag, DragEnd, DragEnter, DragExit, DragLeave, DragOver, DragStart, Drop]:
-        dragEventsCompleted.add(evt, false)
-    initKbEvents()
-    initMouseEvents()
-    initDragEvents()
-    
+  log "[Disclaimer: these tests have been tested successfully on Linux with Firefox and Chromium. Your results may vary.]"
+  log "Note: these tests require some manual steps, which will be shown here."
+  log "Note: new entries appear in this text area at the top, so read in this direction."
+  log "  | |    | |    | |    | |    | |    | |    | |    | |    | |    | |    | |"
+  log " /  \\  /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\ /   \\"
+  log "Test 1 started."
+  log "This test checks that drag events are fired."
+  testRunning[0] = true
+  for evt in [Drag, DragEnd, DragEnter, DragExit, DragLeave, DragOver, DragStart, Drop]:
+    dragEventsCompleted.add(evt, false)
+  initKbEvents()
+  initMouseEvents()
+  initDragEvents()
+  
 proc checkTest1Status() =
-    var evtsCompleted = true
+  var evtsCompleted = true
 
-    # Chrome doesn't seem to send DragExit, so ignore this
-    if (($navigator.userAgent).contains("Chrome")):
-        dragEventsCompleted[DragExit] = true
-    
+  # Chrome doesn't seem to send DragExit, so ignore this
+  if (($navigator.userAgent).contains("Chrome")):
+    dragEventsCompleted[DragExit] = true
+  
+  for evt, completed in dragEventsCompleted:
+    if not completed:
+      evtsCompleted = false
+      break
+
+  if evtsCompleted:
+    testRunning[0] = false
+    log "Test 1 completed successfully. Drag the div anywhere to start the next test."
+    testCompleted[0] = true
+    document.getElementById("checkTest1").style.visibility = "hidden"
+  else:
+    log "Test 1 has not completed yet. Make sure you drag the div over another element."
+    log "Status:"
     for evt, completed in dragEventsCompleted:
-        if not completed:
-            evtsCompleted = false
-            break
-
-    if evtsCompleted:
-        testRunning[0] = false
-        log "Test 1 completed successfully. Drag the div anywhere to start the next test."
-        testCompleted[0] = true
-        document.getElementById("checkTest1").style.visibility = "hidden"
-    else:
-        log "Test 1 has not completed yet. Make sure you drag the div over another element."
-        log "Status:"
-        for evt, completed in dragEventsCompleted:
-            log $evt & ": " & $completed
+      log $evt & ": " & $completed
 
 proc createDom(): VNode =
-    result = buildHtml(tdiv()):
-        tdiv(id="dragDiv", draggable="true"):
-            tdiv(class="divcontent"):
-                text "draggable div"
-        tdiv(id="results"):
-            for i in countdown(results.len - 1, 0):
-                tdiv:
-                    text $results[i]
-        tdiv(id="checkTest1"):
-            button(onclick=checkTest1Status):
-                text "Check test 1 status"
-        input(`type`="hidden", id="test9value")
-        input(`type`="text", id="test10input1")
-        input(`type`="text", id="test10input2")
-        h3(id="test11h3"):
-            text "test 11"
-        input(`type`="text", id="test12input")
-        
+  result = buildHtml(tdiv()):
+    tdiv(id="dragDiv", draggable="true"):
+      tdiv(class="divcontent"):
+        text "draggable div"
+    tdiv(id="results"):
+      for i in countdown(results.len - 1, 0):
+        tdiv:
+          text $results[i]
+    tdiv(id="checkTest1"):
+      button(onclick=checkTest1Status):
+        text "Check test 1 status"
+    input(`type`="hidden", id="test9value")
+    input(`type`="text", id="test10input1")
+    input(`type`="text", id="test10input2")
+    h3(id="test11h3"):
+      text "test 11"
+    input(`type`="text", id="test12input")
+      
 proc onload() =
-    startTests()
-    
+  startTests()
+  
 setRenderer createDom
 onload()

From 28bccf9223d4b71310e158652282d8381f0b5e56 Mon Sep 17 00:00:00 2001
From: Thomas Johnson <tbjohnson123@gmail.com>
Date: Tue, 21 Nov 2017 17:14:59 -0800
Subject: [PATCH 161/264] Tab size fixes in domEventTests.css, .html for #43.

---
 tests/domEventTests.css  | 20 ++++++++++----------
 tests/domEventTests.html | 20 ++++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/tests/domEventTests.css b/tests/domEventTests.css
index 882c277..f590741 100644
--- a/tests/domEventTests.css
+++ b/tests/domEventTests.css
@@ -11,23 +11,23 @@
 }
 
 #results {
-    font-family: monospace;
-    font-size: 10pt;
-    width: 100%;
-    height: 400px;
-    overflow: auto;
-    background-color: #000000;
-    color: forestgreen;
+  font-family: monospace;
+  font-size: 10pt;
+  width: 100%;
+  height: 400px;
+  overflow: auto;
+  background-color: #000000;
+  color: forestgreen;
 }
 
 #test10input1, #test10input2, #test11h3, #test12input {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 #test11h3 {
-    color: gold;
+  color: gold;
 }
 
 body {
-    background-color: dimgrey;
+  background-color: dimgrey;
 }
\ No newline at end of file
diff --git a/tests/domEventTests.html b/tests/domEventTests.html
index 2039ac6..26e161f 100644
--- a/tests/domEventTests.html
+++ b/tests/domEventTests.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>DOM Event Tests</title>
-    <link href="domEventTests.css" rel="stylesheet" />
-    <meta charset="UTF-8" />
-    <script src="jquery-3.2.1.js" type="text/javascript"></script>
-  </head>
-  <body id="body">
-    <div id="ROOT"></div>
-    <script src="nimcache/domEventTests.js" type="text/javascript"></script>
-  </body>
+<head>
+  <title>DOM Event Tests</title>
+  <link href="domEventTests.css" rel="stylesheet" />
+  <meta charset="UTF-8" />
+  <script src="jquery-3.2.1.js" type="text/javascript"></script>
+</head>
+<body id="body">
+  <div id="ROOT"></div>
+  <script src="nimcache/domEventTests.js" type="text/javascript"></script>
+</body>
 </html>

From 1ad7567b288d873e12021f6100a20bc82d7cc664 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 22 Nov 2017 14:37:12 +0100
Subject: [PATCH 162/264] added new experiments

---
 experiments/config.nims          |  1 +
 experiments/scrollapp_simple.nim | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 experiments/config.nims
 create mode 100644 experiments/scrollapp_simple.nim

diff --git a/experiments/config.nims b/experiments/config.nims
new file mode 100644
index 0000000..532b206
--- /dev/null
+++ b/experiments/config.nims
@@ -0,0 +1 @@
+--path: "../src"
diff --git a/experiments/scrollapp_simple.nim b/experiments/scrollapp_simple.nim
new file mode 100644
index 0000000..cdd19cd
--- /dev/null
+++ b/experiments/scrollapp_simple.nim
@@ -0,0 +1,25 @@
+## Example that shows how to accomplish an "infinitely scrolling" app.
+
+include karax / prelude
+import karax / [kdom, vstyles]
+
+var entries: seq[cstring] = @[]
+for i in 1..500:
+  entries.add(cstring("Entry ") & &i)
+
+proc scrollEvent(ev: Event; n: VNode) =
+  let d = n.dom
+  if d != nil and inViewport(d.lastChild):
+    # "load" more data:
+    for i in 1..50:
+      entries.add(cstring("Loaded Entry ") & &i)
+
+proc createDom(): VNode =
+  result = buildHtml():
+    tdiv(onscroll=scrollEvent, style=style(
+        (StyleAttr.height, cstring"400px"), (StyleAttr.overflow, cstring"scroll"))):
+      for x in entries:
+        tdiv:
+          text x
+
+setRenderer createDom

From 22f24a1a8a3575ff00efd05eff8e5b1132896556 Mon Sep 17 00:00:00 2001
From: Thomas Johnson <tbjohnson123@gmail.com>
Date: Sun, 26 Nov 2017 15:11:19 -0800
Subject: [PATCH 163/264] Added blob support to ajaxPost. Cleanup in kdom and
 added InputElement and Blob support. Test updates. (#43)

---
 karax/kajax.nim         |  16 ++++-
 karax/karax.nim         |   4 +-
 karax/kdom.nim          | 150 +++++++++++++++++++++++++++++++++-------
 tests/domEventTests.nim |  23 +++---
 4 files changed, 149 insertions(+), 44 deletions(-)

diff --git a/karax/kajax.nim b/karax/kajax.nim
index c226c50..2fd14fa 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -8,7 +8,9 @@ import karax
 proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int; response: cstring);
-          kxi: KaraxInstance = kxi) =
+          kxi: KaraxInstance = kxi,
+          useBinary: bool = false,
+          blob: Blob = nil) =
   proc contWrapper(httpStatus: int; response: cstring) =
     cont(httpStatus, response)
     redraw(kxi)
@@ -22,6 +24,7 @@ proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
   proc setRequestHeader(r: HttpRequest; a, b: cstring) {.importcpp: "#.setRequestHeader(@)".}
   proc statechange(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
   proc send(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
+  proc send(r: HttpRequest, data: Blob) {.importcpp: "#.send(#)".}
   proc open(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
   proc newRequest(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
 
@@ -36,7 +39,10 @@ proc ajax(meth, url: cstring; headers: openarray[(cstring, cstring)];
         contWrapper(this.status, this.responseText)
       else:
         contWrapper(this.status, this.statusText)
-  ajax.send(data)
+  if useBinary:
+    ajax.send(blob)
+  else:
+    ajax.send(data)
 
 proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
@@ -44,6 +50,12 @@ proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
           kxi: KaraxInstance = kxi) =
   ajax("POST", url, headers, data, cont, kxi)
 
+proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
+          data: Blob;
+          cont: proc (httpStatus: int, response: cstring);
+          kxi: KaraxInstance = kxi) =
+  ajax("POST", url, headers, "", cont, kxi, true, data)
+
 proc ajaxGet*(url: cstring; headers: openarray[(cstring, cstring)];
           cont: proc (httpStatus: int, response: cstring);
           kxi: KaraxInstance = kxi) =
diff --git a/karax/karax.nim b/karax/karax.nim
index 0ff666b..0359e59 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -2,7 +2,7 @@
 
 import kdom, vdom, jstrutils, compact, jdict, vstyles
 
-export kdom.Event
+export kdom.Event, kdom.Blob
 
 proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
   ## the preferred way of debugging karax applications. Now deprecated,
@@ -85,7 +85,7 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind;
     let action = action
     let n = n
     result = proc (ev: Event) =
-      if ((KeyboardEvent)ev).keyCode == 13: keyeventBody()
+      if cast[KeyboardEvent](ev).keyCode == 13: keyeventBody()
 
   proc laterWrapper(): NativeEventHandler =
     let action = action
diff --git a/karax/kdom.nim b/karax/kdom.nim
index 17f2630..c276bfb 100644
--- a/karax/kdom.nim
+++ b/karax/kdom.nim
@@ -164,10 +164,8 @@ type
     name*: cstring
     readOnly*: bool
     options*: seq[OptionElement]
+    selectedOptions*: seq[OptionElement]
     clientWidth*, clientHeight*: int
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
-  HtmlElement* = ref object of Element
     contentEditable*: string
     isContentEditable*: bool
     dir*: string
@@ -176,6 +174,87 @@ type
     offsetLeft*: int
     offsetTop*: int
 
+  # https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+  ValidityState* = ref ValidityStateObj
+  ValidityStateObj {.importc.} = object
+    badInput*: bool
+    customError*: bool
+    patternMismatch*: bool
+    rangeOverflow*: bool
+    rangeUnderflow*: bool
+    stepMismatch*: bool
+    tooLong*: bool
+    tooShort*: bool
+    typeMismatch*: bool
+    valid*: bool
+    valueMissing*: bool
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/Blob
+  Blob* = ref BlobObj
+  BlobObj {.importc.} = object of RootObj
+    size*: int
+    `type`*: cstring
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/File
+  File* = ref FileObj
+  FileObj {.importc.} = object of Blob
+    lastModified*: int
+    name*: cstring
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
+  InputElement* = ref InputElementObj
+  InputElementObj {.importc.} = object of Element
+    # Properties related to the parent form
+    formAction*: cstring
+    formEncType*: cstring
+    formMethod*: cstring
+    formNoValidate*: bool
+    formTarget*: cstring
+
+    # Properties that apply to any type of input element that is not hidden
+    `type`*: cstring
+    autofocus*: bool
+    required*: bool
+    value*: cstring
+    validity*: ValidityState
+    validationMessage*: cstring
+    willValidate*: bool
+
+    # Properties that apply only to elements of type "checkbox" or "radio"
+    indeterminate*: bool
+
+    # Properties that apply only to elements of type "image"
+    alt*: cstring
+    height*: cstring
+    src*: cstring
+    width*: cstring
+
+    # Properties that apply only to elements of type "file"
+    accept*: cstring
+    files*: seq[Blob]
+
+    # Properties that apply only to text/number-containing or elements
+    autocomplete*: cstring
+    maxLength*: int
+    size*: int
+    pattern*: cstring
+    placeholder*: cstring
+    min*: cstring
+    max*: cstring
+    selectionStart*: int
+    selectionEnd*: int
+    selectionDirection*: cstring
+
+    # Properties not yet categorized
+    dirName*: cstring
+    accessKey*: cstring
+    list*: Element
+    multiple*: bool
+    labels*: seq[Element]
+    step*: cstring
+    valueAsDate*: cstring
+    valueAsNumber*: float
+
   LinkElement* = ref LinkObj
   LinkObj {.importc.} = object of ElementObj
     target*: cstring
@@ -205,13 +284,19 @@ type
     text*: cstring
     value*: cstring
 
+  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
   FormElement* = ref FormObj
   FormObj {.importc.} = object of ElementObj
+    acceptCharset*: cstring
     action*: cstring
-    encoding*: cstring
-    `method`*: cstring
-    target*: cstring
+    autocomplete*: cstring
     elements*: seq[Element]
+    encoding*: cstring
+    enctype*: cstring
+    length*: int
+    `method`*: cstring
+    noValidate*: bool
+    target*: cstring
 
   ImageElement* = ref ImageObj
   ImageObj {.importc.} = object of ElementObj
@@ -339,12 +424,14 @@ type
     isTrusted*: bool
 
   # https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
-  UIEvent* {.importc.} = ref object of Event
+  UIEvent* = ref UIEventObj
+  UIEventObj {.importc.} = object of Event
     detail*: int64
     view*: Window
 
   # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
-  KeyboardEvent* {.importc.} = ref object of UIEvent
+  KeyboardEvent* = ref KeyboardEventObj
+  KeyboardEventObj {.importc.} = object of UIEvent
     altKey*, ctrlKey*, metaKey*, shiftKey*: bool
     code*: cstring
     isComposing*: bool
@@ -708,7 +795,8 @@ type
     FifthButton = 16
 
   # https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
-  MouseEvent* {.importc.} = ref object of UIEvent
+  MouseEvent* = ref MouseEventObj
+  MouseEventObj {.importc.} = object of UIEvent
     altKey*, ctrlKey*, metaKey*, shiftKey*: bool
     button*: int
     buttons*: int
@@ -720,18 +808,20 @@ type
     #region*: cstring
     screenX*, screenY*: int
     x*, y*: int
-  
+
   DataTransferItemKind* {.pure.} = enum
     File = "file",
     String = "string"
 
   # https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
-  DataTransferItem* {.importc.} = ref object of RootObj
+  DataTransferItem* = ref DataTransferItemObj
+  DataTransferItemObj {.importc.} = object of RootObj
     kind*: cstring
     `type`*: cstring
 
   # https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
-  DataTransfer* {.importc.} = ref object of RootObj
+  DataTransfer* = ref DataTransferObj
+  DataTransferObj {.importc.} = object of RootObj
     dropEffect*: cstring
     effectAllowed*: cstring
     files*: seq[Element]
@@ -766,16 +856,14 @@ type
     Drop = "drop"
 
   # https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
-  DragEvent* {.importc.} = ref object of MouseEvent
+  DragEvent* {.importc.} = object of MouseEvent
     dataTransfer*: DataTransfer
-    
+
   TouchList* {.importc.} = ref object of RootObj
-    length*: int
+    length*: int    
 
-  TouchEvent* {.importc.} = ref object of UIEvent
-    changedTouches*, targetTouches*, touches*: TouchList
-
-  Touch* {.importc.} = ref object of RootObj
+  Touch* = ref TouchObj
+  TouchObj {.importc.} = object of RootObj
     identifier*: int
     screenX*, screenY*, clientX*, clientY*, pageX*, pageY*: int
     target*: Element
@@ -783,6 +871,10 @@ type
     rotationAngle*: int
     force*: float
 
+  TouchEvent* = ref TouchEventObj
+  TouchEventObj {.importc.} = object of UIEvent
+    changedTouches*, targetTouches*, touches*: seq[Touch]
+
   Location* = ref LocationObj
   LocationObj {.importc.} = object of RootObj
     hash*: cstring
@@ -845,12 +937,6 @@ type
     once*: bool
     passive*: bool
 
-  JFile* {.importc.} = ref object
-    lastModified*: int
-    name*: cstring
-    size*: int
-    `type`*: cstring
-
 when defined(nodejs):
   # we provide a dummy DOM for nodejs for testing purposes
   proc len*(x: Node): int = x.childNodes.len
@@ -1022,6 +1108,8 @@ proc getElementsByClassName*(e: Element, name: cstring): seq[Element]
 # FormElement "methods"
 proc reset*(f: FormElement)
 proc submit*(f: FormElement)
+proc checkValidity*(e: FormElement): bool
+proc reportValidity*(e: FormElement): bool
 
 # EmbedElement "methods"
 proc play*(e: EmbedElement)
@@ -1072,7 +1160,16 @@ proc setData*(dt: DataTransfer, format: cstring, data: cstring)
 proc setDragImage*(dt: DataTransfer, img: Element, xOffset: int64, yOffset: int64)
 
 # DataTransferItem "methods"
-proc getAsFile*(dti: DataTransferItem): JFile
+proc getAsFile*(dti: DataTransferItem): File
+
+# InputElement "methods"
+proc setSelectionRange*(e: InputElement, selectionStart: int, selectionEnd: int, selectionDirection: cstring = "none")
+proc setRangeText*(e: InputElement, replacement: cstring, startindex: int = 0, endindex: int = 0, selectionMode: cstring = "preserve")
+proc setCustomValidity*(e: InputElement, error: cstring)
+proc checkValidity*(e: InputElement): bool
+
+# Blob "methods"
+proc slice*(e: Blob, startindex: int = 0, endindex: int = e.size, contentType: cstring = "")
 
 {.pop.}
 
@@ -1132,3 +1229,4 @@ proc inViewport*(el: Node): bool =
 proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
 proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
 proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}
+proc offsetLeft*(e: Node): int {.importcpp: "#.offsetLeft", nodecl.}
diff --git a/tests/domEventTests.nim b/tests/domEventTests.nim
index 2db49c8..347d636 100644
--- a/tests/domEventTests.nim
+++ b/tests/domEventTests.nim
@@ -41,7 +41,7 @@ proc check(cond: bool, msg: string, warn: bool): bool =
 
 proc dragDivDragStart(ev: kdom.Event) =
   dragEventsCompleted[DragStart] = true
-  var dgev = ((DragEvent)ev)
+  var dgev = cast[DragEvent](ev)
   var dragDiv = document.getElementById("dragDiv")
 
   if dragDiv != nil:
@@ -413,7 +413,7 @@ proc test3() =
   
 proc dragDivDrop(ev: kdom.Event) =
   dragEventsCompleted[Drop] = true
-  var dgev = ((DragEvent)ev)
+  var dgev = cast[DragEvent](ev)
   var dragDiv = document.getElementById("dragDiv")
   var data = $dgev.dataTransfer.getData("text/plain")
   var dt = dgev.dataTransfer
@@ -495,7 +495,7 @@ proc dragDivDrop(ev: kdom.Event) =
       log "Test 2 completed successfully."
       test3()
   
-      dgev.preventDefault()
+      ev.preventDefault()
       return
 
     document.getElementById("dragDiv").style.visibility = "hidden"
@@ -504,40 +504,35 @@ proc dragDivDrop(ev: kdom.Event) =
     test2ImageDrop = true
     testRunning[1] = false
 
-  dgev.preventDefault()
+  ev.preventDefault()
 
 proc dragDivDrag(ev: kdom.Event) =
   dragEventsCompleted[Drag] = true
-  var dgev = ((DragEvent)ev)
-  dgev.preventDefault()
+  ev.preventDefault()
 
 proc dragDivDragLeave(ev: kdom.Event) =
   dragEventsCompleted[DragLeave] = true
-  var dgev = ((DragEvent)ev)
   if testRunning[0]:
     log "[dragLeave]"
-  dgev.preventDefault()
+  ev.preventDefault()
 
 proc dragDivDragExit(ev: kdom.Event) =
   dragEventsCompleted[DragExit] = true
-  var dgev = ((DragEvent)ev)
   if testRunning[0]:
     log "[dragExit]"
-  dgev.preventDefault()
+  ev.preventDefault()
   
 proc dragDivDragEnd(ev: kdom.Event) =
   dragEventsCompleted[DragEnd] = true
-  var dgev = ((DragEvent)ev)
   if testRunning[0]:
     log "[dragEnd]"
-  dgev.preventDefault()
+  ev.preventDefault()
       
 proc dragDivDragEnter(ev: kdom.Event) =
   dragEventsCompleted[DragEnter] = true
   if testRunning[0]:
     log "[dragEnter]"
-  var dgev = ((DragEvent)ev)
-  dgev.preventDefault()
+  ev.preventDefault()
 
 proc initDragEvents() =
   log "Drag event initialization started."

From c9c30eaf450787a7bfe25588b48ce43f5298fa77 Mon Sep 17 00:00:00 2001
From: Thomas Johnson <tbjohnson123@gmail.com>
Date: Sun, 26 Nov 2017 15:20:01 -0800
Subject: [PATCH 164/264] Fixing spacing issue in kdom. (#43)

---
 karax/kdom.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/karax/kdom.nim b/karax/kdom.nim
index c276bfb..a9b80b2 100644
--- a/karax/kdom.nim
+++ b/karax/kdom.nim
@@ -1223,8 +1223,8 @@ proc clientWidth*(): int {.
 proc inViewport*(el: Node): bool =
   let rect = el.getBoundingClientRect()
   result = rect.top >= 0 and rect.left >= 0 and
-          rect.bottom <= clientHeight().float and
-          rect.right <= clientWidth().float
+           rect.bottom <= clientHeight().float and
+           rect.right <= clientWidth().float
 
 proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
 proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}

From be759d9b42956acff75aff708b31b25d9ecb0957 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 30 Nov 2017 18:16:31 +0100
Subject: [PATCH 165/264] bugfix: apply class changes consistently

---
 .gitignore      | 3 ++-
 karax/karax.nim | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 42b07a7..2a1e84c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 nimcache/
-/tests/tester
\ No newline at end of file
+/tests/tester
+*.exe
diff --git a/karax/karax.nim b/karax/karax.nim
index 9aea015..fed61aa 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -260,6 +260,7 @@ proc updateStyles(newNode, oldNode: VNode) =
   if oldNode.dom != nil:
     if newNode.style != nil: applyStyle(oldNode.dom, newNode.style)
     else: oldNode.dom.style = Style()
+    oldNode.dom.class = newNode.class
   oldNode.style = newNode.style
   oldNode.class = newNode.class
 

From 135044d8d77074fd5f901c54d432186b2c7814ac Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Tue, 5 Dec 2017 16:32:11 +0100
Subject: [PATCH 166/264] added vdom.getVNodeById for easier component creation

---
 karax/vdom.nim | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 91f4116..314b3ba 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -423,3 +423,11 @@ proc `$`*(n: VNode): kstring =
   else:
     result = ""
     add(result, n)
+
+proc getVNodeById*(n: VNode; id: cstring): VNode =
+  ## Get the VNode that was marked with ``id``. Returns ``nil``
+  ## if no node exists.
+  if n.id == id: return n
+  for i in 0..<n.len:
+    result = getVNodeById(n[i], id)
+    if result != nil: return result

From 7aace273559c7694ccccf951b69c83c1b939ff26 Mon Sep 17 00:00:00 2001
From: Rayner De Los Santos F <raydf@perspectiva.io>
Date: Wed, 3 Jan 2018 09:04:10 -0400
Subject: [PATCH 167/264] Adding hasError method (#45)

---
 karax/errors.nim | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/karax/errors.nim b/karax/errors.nim
index 847bd85..aedd103 100644
--- a/karax/errors.nim
+++ b/karax/errors.nim
@@ -8,6 +8,8 @@ var
 
 proc hasErrors*(): bool = gerrorCounter != 0
 
+proc hasError*(field: cstring): bool = gerrorMsgs.contains(field) and len(gerrorMsgs[field]) > 0
+
 proc disableOnError*(): cstring = toDisabled(hasErrors())
 
 proc getError*(field: cstring): cstring =

From b5fc4de0107dae4568e55a85a12f7398303cb862 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 23 Jan 2018 06:38:43 +0100
Subject: [PATCH 168/264] jjson: added the %* macro inspired from json.nim

---
 karax/jjson.nim | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/karax/jjson.nim b/karax/jjson.nim
index 88580f9..ad6106b 100644
--- a/karax/jjson.nim
+++ b/karax/jjson.nim
@@ -19,9 +19,12 @@ proc newJsonNode*(fields: varargs[(cstring, JsonNode)]): JsonNode =
 proc newJObject*(): JsonNode =
   result = JsonNode()
 
+proc newJArray*(elements: varargs[JsonNode]): JsonNode {.importcpp: "#".}
+
 proc newJNull*(): JsonNode = nil
 
 template `%`*(x: typed): JsonNode = cast[JsonNode](x)
+template `%`*(x: string): JsonNode = cast[JsonNode](cstring x)
 
 proc getNum*(x: JsonNode): int {.importcpp: "#".}
 
@@ -31,3 +34,34 @@ proc getFNum*(x: JsonNode): cstring {.importcpp: "#".}
 
 iterator items*(x: JsonNode): JsonNode =
   for i in 0..<len(x): yield x[i]
+
+import macros
+
+proc toJson(x: NimNode): NimNode {.compiletime.} =
+  case x.kind
+  of nnkBracket:
+    result = newCall(bindSym"newJArray")
+    for i in 0 ..< x.len:
+      result.add(toJson(x[i]))
+  of nnkTableConstr:
+    result = newCall(bindSym"newJsonNode")
+    for i in 0 ..< x.len:
+      x[i].expectKind nnkExprColonExpr
+      let key = x[i][0]
+      let a = if x[i].kind in {nnkIdent, nnkSym, nnkAccQuoted}:
+                newLit($key)
+              else:
+                key
+      result.add newTree(nnkPar, newCall(bindSym"cstring", a), toJson(x[i][1]))
+  of nnkCurly:
+    x.expectLen(0)
+    result = newCall(bindSym"newJObject")
+  of nnkNilLit:
+    result = newCall(bindSym"newJNull")
+  else:
+    result = newCall(bindSym"%", x)
+
+macro `%*`*(x: untyped): untyped =
+  ## Convert an expression to a JsonNode directly, without having to specify
+  ## `%` for every element.
+  result = toJson(x)

From db9325b3bb0ba0f24278356b71109713cdc54f8c Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Tue, 23 Jan 2018 07:12:47 +0100
Subject: [PATCH 169/264] added karax.setForeignNodeId to make interfacing with
 ECharts easier

---
 experiments/config.nims      |  1 +
 experiments/echartstest.html | 14 +++++++++
 experiments/echartstest.nim  | 61 ++++++++++++++++++++++++++++++++++++
 karax/karax.nim              | 15 +++++++--
 4 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 experiments/config.nims
 create mode 100644 experiments/echartstest.html
 create mode 100644 experiments/echartstest.nim

diff --git a/experiments/config.nims b/experiments/config.nims
new file mode 100644
index 0000000..4071d27
--- /dev/null
+++ b/experiments/config.nims
@@ -0,0 +1 @@
+--path: "../karax"
diff --git a/experiments/echartstest.html b/experiments/echartstest.html
new file mode 100644
index 0000000..fd510bd
--- /dev/null
+++ b/experiments/echartstest.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Karax ECharts Test</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.js"></script>
+<script type="text/javascript" src="nimcache/echartstest.js"></script>
+</html>
diff --git a/experiments/echartstest.nim b/experiments/echartstest.nim
new file mode 100644
index 0000000..45da71a
--- /dev/null
+++ b/experiments/echartstest.nim
@@ -0,0 +1,61 @@
+
+
+import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]
+
+type
+  Views = enum
+    Customers, Products
+
+var
+  currentView = Customers
+
+setOnHashChange(proc(hash: cstring) =
+  if hash == cstring"#/Products": currentView = Products
+  else: currentView = Customers
+)
+
+type
+  EChart* = ref object
+
+proc echartsInit(n: Element): EChart {.importc: "echarts.init".}
+proc setOption(x: EChart; option: JsonNode) {.importcpp.}
+
+proc postRender() =
+  if currentView == Products:
+    let myChart = echartsInit(kdom.getElementById("echartSection"))
+    # specify chart configuration item and data
+    let option = %*{
+      "title": {
+        "text": "ECharts entry example"
+      },
+      "tooltip": {},
+      "legend": {
+        "data": ["Sales"]
+      },
+      "xAxis": {
+        "data": ["shirt","cardign","chiffon shirt","pants","heels","socks"]
+      },
+      "yAxis": {},
+      "series": [{
+        "name": "Sales",
+        "type": "bar",
+        "data": [5, 20, 36, 10, 10, 20]
+      }]
+    }
+    myChart.setOption(option)
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    ul(class = "tabs"):
+      for v in low(Views)..high(Views):
+        li:
+          a(href = "#/" & $v):
+            text cstring($v)
+
+    if currentView == Products:
+      tdiv(id = "echartSection", style = style((width, kstring"600px"), (height, kstring"400px")))
+    tdiv:
+      text "other section"
+
+setRenderer createDom, "ROOT", postRender
+setForeignNodeId "echartSection"
diff --git a/karax/karax.nim b/karax/karax.nim
index 9aea015..eaeac4b 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -42,6 +42,7 @@ type
     byId: JDict[cstring, VNode]
     when defined(stats):
       recursion: int
+    orphans: JDict[cstring, bool]
 
 
 var
@@ -176,6 +177,7 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
   if not n.style.isNil: applyStyle(result, n.style)
 
 proc same(n: VNode, e: Node; nesting = 0): bool =
+  if kxi.orphans.contains(n.id): return true
   if n.kind == VNodeKind.component:
     result = same(VComponent(n).expanded, e, nesting+1)
   elif n.kind == VNodeKind.vthunk or n.kind == VNodeKind.dthunk:
@@ -623,7 +625,8 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
                          patchesV: newSeq[PatchV](30),
                          components: @[],
                          surpressRedraws: false,
-                         byId: newJDict[cstring, VNode]())
+                         byId: newJDict[cstring, VNode](),
+                         orphans: newJDict[cstring, bool]())
   kxi = result
   window.onload = init
 
@@ -636,7 +639,8 @@ proc setInitializer*(renderer: proc (): VNode, root: cstring = "ROOT",
                         patchesV: newSeq[PatchV](30),
                         components: @[],
                         surpressRedraws: true,
-                        byId: newJDict[cstring, VNode]())
+                        byId: newJDict[cstring, VNode](),
+                        orphans: newJDict[cstring, bool]())
   kxi = result
   window.onload = init
 
@@ -672,8 +676,13 @@ proc setOnHashChange*(action: proc (hashPart: cstring)) =
     redraw()
   onhashchange = wrapper
 
-{.push stackTrace:off.}
+proc setForeignNodeId*(id: cstring; kxi: KaraxInstance = kxi) =
+  ## Declares a node ID as "foreign". Foreign nodes are not
+  ## under Karax's control in the sense that Karax does not attempt
+  ## to perform structural checks on them.
+  kxi.orphans[id] = true
 
+{.push stackTrace:off.}
 proc setupErrorHandler*() =
   ## Installs an error handler that transforms native JS unhandled
   ## exceptions into Nim based stack traces. If `useAlert` is false,

From 5576c4809da6edf66bf57b47b654cc7252b48be2 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sat, 17 Feb 2018 14:13:26 +0100
Subject: [PATCH 170/264] Karax: better support for routing; easier to use;
 todoapp bugfix: misapplied .compact macro

---
 examples/todoapp/todoapp.nim | 13 +++----
 karax/karax.nim              | 69 +++++++++++++++++++++++-------------
 tests/difftest.nim           |  2 +-
 3 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 7aa90d1..9f5e99f 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -89,7 +89,7 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.compac
           onblur = focusLost,
           onkeyupenter = editEntry, value = d, setFocus=true)
 
-proc makeFooter(entriesCount, completedCount: int): VNode {.compact.} =
+proc makeFooter(entriesCount, completedCount: int): VNode =
   result = buildHtml(footer(class = "footer")):
     span(class = "todo-count"):
       strong:
@@ -115,7 +115,10 @@ proc makeHeader(): VNode {.compact.} =
     input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
           onkeyupenter = onTodoEnter, setFocus)
 
-proc createDom(): VNode =
+proc createDom(data: RouterData): VNode =
+  if data.hashPart == "#/": filter = all
+  elif data.hashPart == "#/completed": filter = completed
+  elif data.hashPart == "#/active": filter = active
   result = buildHtml(tdiv(class="todomvc-wrapper")):
     section(class = "todoapp"):
       makeHeader()
@@ -141,12 +144,6 @@ proc createDom(): VNode =
               inc entriesCount
       makeFooter(entriesCount, completedCount)
 
-setOnHashChange(proc(hash: cstring) =
-  if hash == "#/": filter = all
-  elif hash == "#/completed": filter = completed
-  elif hash == "#/active": filter = active
-)
-
 if hasItem(lenSuffix):
   entriesLen = parseInt getItem(lenSuffix)
 else:
diff --git a/karax/karax.nim b/karax/karax.nim
index 7ecaa9c..0871422 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -23,12 +23,15 @@ type
     parent, current: Node
 
 type
+  RouterData* = ref object ## information that is passed to the 'renderer' callback
+    hashPart*: cstring     ## the hash part of the URL for routing.
+
   KaraxInstance* = ref object ## underlying karax instance. Usually you don't have
                               ## know about this.
     rootId: cstring not nil
-    renderer: proc (): VNode {.closure.}
+    renderer: proc (data: RouterData): VNode {.closure.}
     currentTree: VNode
-    postRenderCallback: proc ()
+    postRenderCallback: proc (data: RouterData)
     toFocus: Node
     toFocusV: VNode
     renderId: int
@@ -287,17 +290,18 @@ proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   shallowCopy(oldNode.events, newNode.events)
   applyEvents(oldNode, kxi)
 
-proc printV(n: VNode; depth: cstring = "") =
-  kout depth, cstring($n.kind), cstring"key ", n.index
-  #for k, v in pairs(n.style):
-  #  kout depth, "style: ", k, v
-  if n.kind == VNodeKind.component:
-    let nn = VComponent(n)
-    if nn.expanded != nil: printV(nn.expanded, ">>" & depth)
-  elif n.kind == VNodeKind.text:
-    kout depth, n.text
-  for i in 0 ..< n.len:
-    printV(n[i], depth & "  ")
+when false:
+  proc printV(n: VNode; depth: cstring = "") =
+    kout depth, cstring($n.kind), cstring"key ", n.index
+    #for k, v in pairs(n.style):
+    #  kout depth, "style: ", k, v
+    if n.kind == VNodeKind.component:
+      let nn = VComponent(n)
+      if nn.expanded != nil: printV(nn.expanded, ">>" & depth)
+    elif n.kind == VNodeKind.text:
+      kout depth, n.text
+    for i in 0 ..< n.len:
+      printV(n[i], depth & "  ")
 
 proc addPatch(kxi: KaraxInstance; ka: PatchKind; parenta, currenta: Node;
               na: VNode) =
@@ -559,9 +563,13 @@ proc runDiff*(kxi: KaraxInstance; oldNode, newNode: VNode) =
     kxi.currentTree = newNode
   doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
+var onhashChange {.importc: "window.onhashchange".}: proc()
+var hashPart {.importc: "window.location.hash".}: cstring
+
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
-  let newtree = kxi.renderer()
+  let rdata = RouterData(hashPart: hashPart)
+  let newtree = kxi.renderer(rdata)
   inc kxi.runCount
   newtree.id = kxi.rootId
   kxi.toFocus = nil
@@ -586,7 +594,7 @@ proc dodraw(kxi: KaraxInstance) =
   doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
 
   if not kxi.postRenderCallback.isNil:
-    kxi.postRenderCallback()
+    kxi.postRenderCallback(rdata)
 
   # now that it's part of the DOM, give it the focus:
   if kxi.toFocus != nil:
@@ -598,7 +606,8 @@ proc dodraw(kxi: KaraxInstance) =
     echo "depth ", depth(kxi.currentTree, total), " total ", total
 
 proc reqFrame(callback: proc()): int {.importc: "window.requestAnimationFrame".}
-proc cancelFrame(id: int) {.importc: "window.cancelAnimationFrame".}
+when false:
+  proc cancelFrame(id: int) {.importc: "window.cancelAnimationFrame".}
 
 proc redraw*(kxi: KaraxInstance = kxi) =
   # we buffer redraw requests:
@@ -617,8 +626,11 @@ proc redrawSync*(kxi: KaraxInstance = kxi) = dodraw(kxi)
 proc init(ev: Event) =
   kxi.renderId = reqFrame(proc () = kxi.dodraw)
 
-proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
-                  clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =
+proc setRenderer*(renderer: proc (data: RouterData): VNode,
+                  root: cstring = "ROOT",
+                  clientPostRenderCallback:
+                    proc (data: RouterData) = nil): KaraxInstance {.
+                    discardable.} =
   ## Setup Karax. Usually the return value can be ignored.
   result = KaraxInstance(rootId: root, renderer: renderer,
                          postRenderCallback: clientPostRenderCallback,
@@ -630,9 +642,18 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
                          orphans: newJDict[cstring, bool]())
   kxi = result
   window.onload = init
+  onhashChange = proc() = redraw()
 
-proc setInitializer*(renderer: proc (): VNode, root: cstring = "ROOT",
-                    clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =
+proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
+                  clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =
+  ## Setup Karax. Usually the return value can be ignored.
+  proc wrapRenderer(data: RouterData): VNode = result = renderer()
+  proc wrapPostRender(data: RouterData) = clientPostRenderCallback()
+  setRenderer(wrapRenderer, root, wrapPostRender)
+
+proc setInitializer*(renderer: proc (data: RouterData): VNode, root: cstring = "ROOT",
+                    clientPostRenderCallback:
+                      proc (data: RouterData) = nil): KaraxInstance {.discardable.} =
   ## Setup Karax. Usually the return value can be ignored.
   result = KaraxInstance(rootId: root, renderer: renderer,
                         postRenderCallback: clientPostRenderCallback,
@@ -669,9 +690,9 @@ proc addEventHandler*(n: VNode; k: EventKind; action: proc();
     if not kxi.surpressRedraws: redraw(kxi)
   addEventListener(n, k, wrapper)
 
-proc setOnHashChange*(action: proc (hashPart: cstring)) =
-  var onhashChange {.importc: "window.onhashchange".}: proc()
-  var hashPart {.importc: "window.location.hash".}: cstring
+proc setOnHashChange*(action: proc (hashPart: cstring)) {.deprecated.} =
+  ## Now deprecated, instead pass a callback to ``setRenderer`` that receives
+  ## a ``data: RouterData`` parameter.
   proc wrapper() =
     action(hashPart)
     redraw()
@@ -693,7 +714,7 @@ proc setupErrorHandler*() =
   var onerror {.importc: "window.onerror", used.} =
     proc (msg, url: cstring, line, col: int, error: cstring): bool =
       var x = cstring"Error: " & msg & "\n" & stackTraceAsCstring()
-      kout(x)
+      echo(x)
       return true # suppressErrorAlert
 {.pop.}
 
diff --git a/tests/difftest.nim b/tests/difftest.nim
index 2762612..3318f24 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -165,7 +165,7 @@ proc testWildInsert() =
   let b = createEntries(entries)
   doDiff(a, b, "pkInsertBefore button 7", "pkAppend div 5")
 
-kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (): VNode = discard,
+kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (data: RouterData): VNode = discard,
                     byId: newJDict[cstring, VNode]())
 
 testAppend()

From dd0ea311a38f3ca3355ac9b847b230482bbe3010 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 5 Mar 2018 09:58:39 +0100
Subject: [PATCH 171/264] fixes an annoying karun bug

---
 tools/karun.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/karun.nim b/tools/karun.nim
index a7ba3c0..92ec3d4 100644
--- a/tools/karun.nim
+++ b/tools/karun.nim
@@ -55,7 +55,7 @@ proc main =
   createDir("nimcache")
   exec("nim js --out:nimcache/" & name & ".js " & rest)
   let dest = "nimcache" / name & ".html"
-  writeFile(dest, html % [name, css])
+  writeFile(dest, html % [name, selectedCss])
   if run: openDefaultBrowser(dest)
 
 main()

From 75739f8170e4dac1ba2cd05ff692a603b97edb23 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Mon, 5 Mar 2018 10:00:11 +0100
Subject: [PATCH 172/264] add experiment what Karax would look like without DOM
 diff'ing but with barebones reactive programming

---
 experiments/trello/knete.nim   | 752 +++++++++++++++++++++++++++++++++
 experiments/trello/trello.nim  | 151 +++++++
 experiments/trello/widgets.nim |  43 ++
 3 files changed, 946 insertions(+)
 create mode 100644 experiments/trello/knete.nim
 create mode 100644 experiments/trello/trello.nim
 create mode 100644 experiments/trello/widgets.nim

diff --git a/experiments/trello/knete.nim b/experiments/trello/knete.nim
new file mode 100644
index 0000000..2fd0d05
--- /dev/null
+++ b/experiments/trello/knete.nim
@@ -0,0 +1,752 @@
+## Raw DOM manipulation. No DOM diff'ing, no cry.
+
+import macros, tables
+from strutils import startsWith, toLowerAscii, toUpperAscii
+
+when defined(js):
+  type kstring* = cstring
+else:
+  type kstring* = string
+
+type
+  Tag* {.pure.} = enum
+    text = "#text",
+
+    html, head, title, base, link, meta, style,
+    script, noscript,
+    body, section, nav, article, aside,
+    h1, h2, h3, h4, h5, h6,
+    header, footer, address, main
+
+    p, hr, pre, blockquote, ol, ul, li,
+    dl, dt, dd,
+    figure, figcaption,
+
+    tdiv = "div",
+
+    a, em, strong, small,
+    strikethrough = "s", cite, quote,
+    dfn, abbr, data, time, code, `var` = "var", samp,
+    kdb, sub, sup, italic = "i", bold = "b", underlined = "u",
+    mark, ruby, rt, rp, bdi, dbo, span, br, wbr,
+    ins, del, img, iframe, embed, `object` = "object",
+    param, video, audio, source, track, canvas, map,
+    area, svg, math,
+
+    table, caption, colgroup, col, tbody, thead,
+    tfoot, tr, td, th,
+
+    form, fieldset, legend, label, input, button,
+    select, datalist, optgroup, option, textarea,
+    keygen, output, progress, meter,
+    details, summary, command, menu
+
+type
+  EventKind* {.pure.} = enum ## The events supported by the virtual DOM.
+    onclick, ## An element is clicked.
+    oncontextmenu, ## An element is right-clicked.
+    ondblclick, ## An element is double clicked.
+    onkeyup, ## A key was released.
+    onkeydown, ## A key is pressed.
+    onkeypressed, # A key was pressed.
+    onfocus, ## An element got the focus.
+    onblur, ## An element lost the focus.
+    onchange, ## The selected value of an element was changed.
+    onscroll, ## The user scrolled within an element.
+
+    onmousedown, ## A pointing device button (usually a mouse) is pressed
+                 ## on an element.
+    onmouseenter, ## A pointing device is moved onto the element that
+                  ## has the listener attached.
+    onmouseleave, ## A pointing device is moved off the element that
+                  ## has the listener attached.
+    onmousemove, ## A pointing device is moved over an element.
+    onmouseout, ## A pointing device is moved off the element that
+                ## has the listener attached or off one of its children.
+    onmouseover, ## A pointing device is moved onto the element that has
+                 ## the listener attached or onto one of its children.
+    onmouseup, ## A pointing device button is released over an element.
+
+    ondrag,  ## An element or text selection is being dragged (every 350ms).
+    ondragend, ## A drag operation is being ended (by releasing a mouse button
+               ## or hitting the escape key).
+    ondragenter, ## A dragged element or text selection enters a valid drop target.
+    ondragleave, ## A dragged element or text selection leaves a valid drop target.
+    ondragover, ## An element or text selection is being dragged over a valid
+                ## drop target (every 350ms).
+    ondragstart, ## The user starts dragging an element or text selection.
+    ondrop, ## An element is dropped on a valid drop target.
+
+    onsubmit, ## A form is submitted
+    oninput, ## An input value changes
+
+    onkeyupenter, ## vdom extension: an input field received the ENTER key press
+    onkeyuplater  ## vdom extension: a key was pressed and some time
+                  ## passed (useful for on-the-fly text completions)
+
+
+macro buildLookupTables(): untyped =
+  var a = newTree(nnkBracket)
+  for i in low(Tag)..high(Tag):
+    let x = $i
+    let y = if x[0] == '#': x else: toUpperAscii(x)
+    a.add(newCall("kstring", newLit(y)))
+  var e = newTree(nnkBracket)
+  for i in low(EventKind)..high(EventKind):
+    e.add(newCall("kstring", newLit(substr($i, 2))))
+
+  template tmpl(a, e) {.dirty.} =
+    const
+      toTagName*: array[Tag, kstring] = a
+      toEventName*: array[EventKind, kstring] = e
+
+  result = getAst tmpl(a, e)
+
+buildLookupTables()
+
+# ---------------- CSS ----------------------------------------------
+
+type
+  StyleAttr* {.pure.} = enum
+    ## The style attributes supported by the virtual DOM.
+    ## Reference: https://www.w3schools.com/jsref/dom_obj_style.asp
+    alignContent
+    alignItems
+    alignSelf
+    animation
+    animationDelay
+    animationDirection
+    animationDuration
+    animationFillMode
+    animationIterationCount
+    animationName
+    animationTimingFunction
+    animationPlayState
+    background
+    backgroundAttachment
+    backgroundColor
+    backgroundImage
+    backgroundPosition
+    backgroundRepeat
+    backgroundClip
+    backgroundOrigin
+    backgroundSize
+    backfaceVisibility
+    border
+    borderBottom
+    borderBottomColor
+    borderBottomLeftRadius
+    borderBottomRightRadius
+    borderBottomStyle
+    borderBottomWidth
+    borderCollapse
+    borderColor
+    borderImage
+    borderImageOutset
+    borderImageRepeat
+    borderImageSlice
+    borderImageSource
+    borderImageWidth
+    borderLeft
+    borderLeftColor
+    borderLeftStyle
+    borderLeftWidth
+    borderRadius
+    borderRight
+    borderRightColor
+    borderRightStyle
+    borderRightWidth
+    borderSpacing
+    borderStyle
+    borderTop
+    borderTopColor
+    borderTopLeftRadius
+    borderTopRightRadius
+    borderTopStyle
+    borderTopWidth
+    borderWidth
+    bottom
+    boxDecorationBreak
+    boxShadow
+    boxSizing
+    captionSide
+    clear
+    clip
+    color
+    columnCount
+    columnFill
+    columnGap
+    columnRule
+    columnRuleColor
+    columnRuleStyle
+    columnRuleWidth
+    columns
+    columnSpan
+    columnWidth
+    content
+    counterIncrement
+    counterReset
+    cursor
+    direction
+    display
+    emptyCells
+    filter
+    flex
+    flexBasis
+    flexDirection
+    flexFlow
+    flexGrow
+    flexShrink
+    flexWrap
+    cssFloat
+    font
+    fontFamily
+    fontSize
+    fontSizeAdjust
+    fontStretch
+    fontStyle
+    fontVariant
+    fontWeight
+    hangingPunctuation
+    height
+    hyphens
+    icon
+    imageOrientation
+    justifyContent
+    left
+    letterSpacing
+    lineHeight
+    listStyle
+    listStyleImage
+    listStylePosition
+    listStyleType
+    margin
+    marginBottom
+    marginLeft
+    marginRight
+    marginTop
+    maxHeight
+    maxWidth
+    minHeight
+    minWidth
+    navDown
+    navIndex
+    navLeft
+    navRight
+    navUp
+    opacity
+    order
+    orphans
+    outline
+    outlineColor
+    outlineOffset
+    outlineStyle
+    outlineWidth
+    overflow
+    overflowX
+    overflowY
+    padding
+    paddingBottom
+    paddingLeft
+    paddingRight
+    paddingTop
+    pageBreakAfter
+    pageBreakBefore
+    pageBreakInside
+    perspective
+    perspectiveOrigin
+    pointerEvents
+    position
+    quotes
+    resize
+    right
+    scrollbar3dLightColor # note: missing in w3schools reference
+    scrollbarArrowColor # note: missing in w3schools reference
+    scrollbarBaseColor # note: missing in w3schools reference
+    scrollbarDarkshadowColor # note: missing in w3schools reference
+    scrollbarFaceColor # note: missing in w3schools reference
+    scrollbarHighlightColor # note: missing in w3schools reference
+    scrollbarShadowColor # note: missing in w3schools reference
+    scrollbarTrackColor # note: missing in w3schools reference
+    tableLayout
+    tabSize
+    textAlign
+    textAlignLast
+    textDecoration
+    textDecorationColor
+    textDecorationLine
+    textDecorationStyle
+    textIndent
+    textJustify
+    textOverflow
+    textShadow
+    textTransform
+    top
+    transform
+    transformOrigin
+    transformStyle
+    transition
+    transitionDelay
+    transitionDuration
+    transitionProperty
+    transitionTimingFunction
+    unicodeBidi
+    userSelect
+    verticalAlign
+    visibility
+    whiteSpace
+    width
+    wordBreak
+    wordSpacing
+    wordWrap
+    widows
+    zIndex
+
+macro buildStyleLookupTable(): untyped =
+  var e = newTree(nnkBracket)
+  for i in low(StyleAttr)..high(StyleAttr):
+    e.add(newCall("kstring", newLit($i)))
+  template tmpl(e) {.dirty.} =
+    const
+      toStyleAttrName: array[StyleAttr, kstring] = e
+  result = getAst tmpl(e)
+
+buildStyleLookupTable()
+
+type
+  StyleObj {.importc.} = object
+    background*: cstring
+    backgroundAttachment*: cstring
+    backgroundColor*: cstring
+    backgroundImage*: cstring
+    backgroundPosition*: cstring
+    backgroundRepeat*: cstring
+    border*: cstring
+    borderBottom*: cstring
+    borderBottomColor*: cstring
+    borderBottomStyle*: cstring
+    borderBottomWidth*: cstring
+    borderColor*: cstring
+    borderLeft*: cstring
+    borderLeftColor*: cstring
+    borderLeftStyle*: cstring
+    borderLeftWidth*: cstring
+    borderRight*: cstring
+    borderRightColor*: cstring
+    borderRightStyle*: cstring
+    borderRightWidth*: cstring
+    borderStyle*: cstring
+    borderTop*: cstring
+    borderTopColor*: cstring
+    borderTopStyle*: cstring
+    borderTopWidth*: cstring
+    borderWidth*: cstring
+    bottom*: cstring
+    captionSide*: cstring
+    clear*: cstring
+    clip*: cstring
+    color*: cstring
+    cursor*: cstring
+    direction*: cstring
+    display*: cstring
+    emptyCells*: cstring
+    cssFloat*: cstring
+    font*: cstring
+    fontFamily*: cstring
+    fontSize*: cstring
+    fontStretch*: cstring
+    fontStyle*: cstring
+    fontVariant*: cstring
+    fontWeight*: cstring
+    height*: cstring
+    left*: cstring
+    letterSpacing*: cstring
+    lineHeight*: cstring
+    listStyle*: cstring
+    listStyleImage*: cstring
+    listStylePosition*: cstring
+    listStyleType*: cstring
+    margin*: cstring
+    marginBottom*: cstring
+    marginLeft*: cstring
+    marginRight*: cstring
+    marginTop*: cstring
+    maxHeight*: cstring
+    maxWidth*: cstring
+    minHeight*: cstring
+    minWidth*: cstring
+    overflow*: cstring
+    padding*: cstring
+    paddingBottom*: cstring
+    paddingLeft*: cstring
+    paddingRight*: cstring
+    paddingTop*: cstring
+    pageBreakAfter*: cstring
+    pageBreakBefore*: cstring
+    pointerEvents*: cstring
+    position*: cstring
+    right*: cstring
+    scrollbar3dLightColor*: cstring
+    scrollbarArrowColor*: cstring
+    scrollbarBaseColor*: cstring
+    scrollbarDarkshadowColor*: cstring
+    scrollbarFaceColor*: cstring
+    scrollbarHighlightColor*: cstring
+    scrollbarShadowColor*: cstring
+    scrollbarTrackColor*: cstring
+    tableLayout*: cstring
+    textAlign*: cstring
+    textDecoration*: cstring
+    textIndent*: cstring
+    textTransform*: cstring
+    transform*: cstring
+    top*: cstring
+    verticalAlign*: cstring
+    visibility*: cstring
+    width*: cstring
+    wordSpacing*: cstring
+    zIndex*: int
+  Style* = ref StyleObj
+
+  ElementObj {.importc.} = object
+    id*, class*, value*: cstring
+    disabled*: bool
+    style*: Style
+  Element* = ref ElementObj
+
+  DocumentObj {.importc.} = object
+  Document = ref DocumentObj
+
+proc setStyle(s: Style; key, val: cstring) {.importcpp: "#[#] = #", noSideEffect.}
+
+proc applyStyles*(e: Element; pairs: openArray[(StyleAttr, kstring)]) =
+  for x in pairs:
+    e.style.setStyle(toStyleAttrName[x[0]], x[1])
+
+# ------- Tree manipulation ---------------------------
+
+var document {.importc.}: Document
+
+proc parent*(x: Element): Element {.importcpp: "#.parentNode".}
+
+proc up*(x: Element; className: cstring): Element =
+  result = x
+  while result != nil and result.class != className:
+    result = result.parent
+
+proc len*(x: Element): int {.importcpp: "#.childNodes.length".}
+proc `[]`*(x: Element; idx: int): Element {.importcpp: "#.childNodes[#]".}
+proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
+proc add*(n, child: Element) {.importcpp: "appendChild".}
+
+proc removeChild(n, child: Element) {.importcpp.}
+proc replaceChild(n, newNode, oldNode: Element) {.importcpp.}
+
+proc replace*(self, by: Element) = replaceChild(self.parent, by, self)
+proc delete*(self: Element) = removeChild(self.parent, self)
+
+proc insertBefore(n, newNode, before: Element) {.importcpp.}
+proc insert*(before, newNode: Element) = insertBefore(before.parent, newNode, before)
+
+proc createTextNode(d: Document, text: cstring): Element {.importcpp.}
+proc text*(s: kstring): Element = createTextNode(document, s)
+
+iterator items*(n: Element): Element =
+  for i in 0..<n.len: yield n[i]
+
+proc createElement(d: Document, identifier: cstring): Element {.importcpp.}
+proc setAttr*(n: Element; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
+
+proc tree*(kind: Tag; kids: varargs[Element]): Element =
+  result = createElement(document, toTagName[kind])
+  for k in kids: result.add k
+
+proc tree*(kind: Tag; attrs: openarray[(kstring, kstring)];
+           kids: varargs[Element]): Element =
+  result = tree(kind, kids)
+  for a in attrs: result.setAttr(a[0], a[1])
+
+# other arbitrary stuff belonging to Element
+proc focus*(e: Element) {.importcpp.}
+proc scrollIntoView*(e: Element) {.importcpp.}
+proc blur*(e: Element) {.importcpp.}
+
+proc toChecked*(checked: bool): cstring =
+  (if checked: cstring"checked" else: cstring(nil))
+
+proc toDisabled*(disabled: bool): cstring =
+  (if disabled: cstring"disabled" else: cstring(nil))
+
+# -------------- Timer handling --------------------
+
+type
+  Timeout* {.importc.} = ref object of RootObj
+
+proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
+proc clearTimeout*(t: Timeout) {.importc, nodecl.}
+
+# -------------- Event handling --------------------
+
+type
+  EventObj {.importc.} = object
+    target*: Element
+    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
+    code*: cstring
+    isComposing*: bool
+    key*: cstring
+    keyCode*: int
+    location*: int
+  Event* = ref EventObj
+
+  EventHandler* = proc (ev: Event) {.closure.}
+
+proc addEventListener(e: Element, ev: cstring, cb: proc(ev: Event),
+  useCapture = false) {.importcpp.}
+
+proc addEventHandler*(e: Element; k: EventKind; action: EventHandler) =
+  case k
+  of EventKind.onkeyuplater:
+    proc laterWrapper(): EventHandler =
+      let action = action
+      var timer: Timeout
+      result = proc (ev: Event) =
+        proc wrapper() = action(ev)
+        if timer != nil: clearTimeout(timer)
+        timer = setTimeout(wrapper, 400)
+
+    e.addEventListener("keyup", laterWrapper())
+  of EventKind.onkeyupenter:
+    proc enterWrapper(): EventHandler =
+      let action = action
+      result = proc (ev: Event) =
+        if ev.keyCode == 13: action(ev)
+
+    e.addEventListener("keyup", enterWrapper())
+  else:
+    e.addEventListener(toEventName[k], action)
+
+proc addEventHandler*(e: Element; k: EventKind; action: proc()) =
+  addEventHandler e, k, (proc (ev: Event) = action())
+
+proc prepareDragData*(ev: Event; datatype, data: cstring)
+  {.importcpp: "#.dataTransfer.setData(@)".}
+
+proc recvDragData*(ev: Event; datatype: cstring): cstring
+  {.importcpp: "#.dataTransfer.getData(@)".}
+
+proc preventDefault*(ev: Event) {.importcpp.}
+
+# ------------------ Init handling -----------------------------------
+
+proc replaceById(id: cstring; newTree: Element) =
+  let x = getElementById(id)
+  x.parent.replaceChild(newTree, x)
+  newTree.id = id
+
+proc setWindowOnload(h: EventHandler) {.importcpp: "window.onload = #".}
+proc setInitializer*(initializer: proc (hashPart: kstring): Element;
+                     root: cstring = "ROOT") =
+  var onhashChange {.importc: "window.onhashchange".}: proc()
+  var hashPart {.importc: "window.location.hash".}: cstring
+
+  setWindowOnload proc (ev: Event) =
+    replaceById root, initializer(hashPart)
+  onhashchange = proc () =
+    replaceById root, initializer(hashPart)
+
+# ------------------ DSL section -------------------------------------
+
+const
+  StmtContext = ["inc", "echo", "dec", "!"]
+  SpecialAttrs = ["id", "class", "value"]
+
+type
+  ComponentKind {.pure.} = enum
+    None,
+    Tag
+
+var
+  allcomponents {.compileTime.} = initTable[string, ComponentKind]()
+
+proc isComponent(x: string): ComponentKind {.compileTime.} =
+  allcomponents.getOrDefault(x)
+
+proc addTags() {.compileTime.} =
+  let x = (bindSym"Tag").getTypeImpl
+  expectKind(x, nnkEnumTy)
+  for i in ord(Tag.html)..ord(Tag.high):
+    # +1 because of empty node at the start of the enum AST:
+    let tag = $x[i+1]
+    allcomponents[tag] = ComponentKind.Tag
+
+static:
+  addTags()
+
+
+proc getName(n: NimNode): string =
+  case n.kind
+  of nnkIdent:
+    result = $n.ident
+  of nnkAccQuoted:
+    result = ""
+    for i in 0..<n.len:
+      result.add getName(n[i])
+  of nnkStrLit..nnkTripleStrLit:
+    result = n.strVal
+  else:
+    #echo repr n
+    expectKind(n, nnkIdent)
+
+proc newDotAsgn(tmp: NimNode, key: string, x: NimNode): NimNode =
+  result = newTree(nnkAsgn, newDotExpr(tmp, newIdentNode key), x)
+
+proc toKstring(n: NimNode): NimNode =
+  if n.kind == nnkStrLit:
+    result = newCall(bindSym"kstring", n)
+  else:
+    result = copyNimNode(n)
+    for child in n:
+      result.add toKstring(child)
+
+proc tcall2(n, tmpContext: NimNode): NimNode =
+  # we need to distinguish statement and expression contexts:
+  # every call statement 's' needs to be transformed to 'dest.add s'.
+  # If expressions need to be distinguished from if statements. Since
+  # we know we start in a statement context, it's pretty simple to
+  # figure out expression contexts: In calls everything is an expression
+  # (except for the last child of the macros we consider here),
+  # lets, consts, types can be considered as expressions
+  # case is complex, calls are assumed to produce a value.
+  when defined(js):
+    template evHandler(): untyped = bindSym"addEventHandler"
+  else:
+    template evHandler(): untyped = ident"addEventHandler"
+
+  case n.kind
+  of nnkLiterals, nnkIdent, nnkSym, nnkDotExpr, nnkBracketExpr:
+    if tmpContext != nil:
+      result = newCall(bindSym"add", tmpContext, n)
+    else:
+      result = n
+  of nnkForStmt, nnkIfExpr, nnkElifExpr, nnkElseExpr,
+      nnkOfBranch, nnkElifBranch, nnkExceptBranch, nnkElse,
+      nnkConstDef, nnkWhileStmt, nnkIdentDefs, nnkVarTuple:
+    # recurse for the last son:
+    result = copyNimTree(n)
+    let L = n.len
+    assert n.len == result.len
+    if L > 0:
+      result[L-1] = tcall2(result[L-1], tmpContext)
+  of nnkStmtList, nnkStmtListExpr, nnkWhenStmt, nnkIfStmt, nnkTryStmt,
+     nnkFinally:
+    # recurse for every child:
+    result = copyNimNode(n)
+    for x in n:
+      result.add tcall2(x, tmpContext)
+  of nnkCaseStmt:
+    # recurse for children, but don't add call for case ident
+    result = copyNimNode(n)
+    result.add n[0]
+    for i in 1 ..< n.len:
+      result.add tcall2(n[i], tmpContext)
+  of nnkProcDef:
+    let name = getName n[0]
+    if name.startsWith"on":
+      # turn it into an anon proc:
+      let anon = copyNimTree(n)
+      anon[0] = newEmptyNode()
+      if tmpContext == nil:
+        error "no Element to attach the event handler to"
+      else:
+        result = newCall(evHandler(), tmpContext,
+                         newDotExpr(bindSym"EventKind", n[0]), anon, ident("kxi"))
+    else:
+      result = n
+  of nnkVarSection, nnkLetSection, nnkConstSection:
+    result = n
+  of nnkCallKinds - {nnkInfix}:
+    let op = getName(n[0])
+    if isComponent(op) == ComponentKind.Tag:
+      let tmp = genSym(nskLet, "tmp")
+      let call = newCall(bindSym"tree", newDotExpr(bindSym"Tag", n[0]))
+      result = newTree(
+        if tmpContext == nil: nnkStmtListExpr else: nnkStmtList,
+        newLetStmt(tmp, call))
+      for i in 1 ..< n.len:
+        # named parameters are transformed into attributes or events:
+        let x = n[i]
+        if x.kind == nnkExprEqExpr:
+          let key = getName x[0]
+          if key.startsWith("on"):
+            result.add newCall(evHandler(),
+              tmp, newDotExpr(bindSym"EventKind", x[0]), x[1])
+          elif key in SpecialAttrs:
+            result.add newDotAsgn(tmp, key, x[1])
+          elif eqIdent(key, "style"):
+            result.add newCall(bindSym"applyStyles", tmp, toKstring x[1])
+          elif eqIdent(key, "setFocus"):
+            result.add newCall(bindSym"focus", tmp)
+          else:
+            result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
+        elif eqIdent(x, "setFocus"):
+          result.add newCall(bindSym"focus", tmp)
+        else:
+          result.add tcall2(x, tmp)
+      if tmpContext == nil:
+        result.add tmp
+      else:
+        result.add newCall(bindSym"add", tmpContext, tmp)
+    elif tmpContext != nil and op notin StmtContext:
+      var hasEventHandlers = false
+      for i in 1..<n.len:
+        let it = n[i]
+        if it.kind in {nnkProcDef, nnkStmtList}:
+          hasEventHandlers = true
+          break
+      if not hasEventHandlers:
+        result = newCall(bindSym"add", tmpContext, n)
+      else:
+        let tmp = genSym(nskLet, "tmp")
+        var slicedCall = newCall(n[0])
+        let ex = newTree(nnkStmtListExpr)
+        ex.add newEmptyNode() # will become the let statement
+        for i in 1..<n.len:
+          let it = n[i]
+          if it.kind in {nnkProcDef, nnkStmtList}:
+            ex.add tcall2(it, tmp)
+          else:
+            slicedCall.add it
+        ex[0] = newLetStmt(tmp, slicedCall)
+        ex.add tmp
+        result = newCall(bindSym"add", tmpContext, ex)
+    elif op == "!" and n.len == 2:
+      result = n[1]
+    else:
+      result = n
+  else:
+    result = n
+
+macro buildHtml*(tag, children: untyped): Element =
+  let kids = newProc(procType=nnkDo, body=children)
+  expectKind kids, nnkDo
+  var call: NimNode
+  if tag.kind in nnkCallKinds:
+    call = tag
+  else:
+    call = newCall(tag)
+  call.add body(kids)
+  result = tcall2(call, nil)
+  when defined(debugKaraxDsl):
+    echo repr result
+
+macro buildHtml*(children: untyped): Element =
+  let kids = newProc(procType=nnkDo, body=children)
+  expectKind kids, nnkDo
+  result = tcall2(body(kids), nil)
+  when defined(debugKaraxDsl):
+    echo repr result
+
+macro flatHtml*(tag: untyped): Element =
+  result = tcall2(tag, nil)
+  when defined(debugKaraxDsl):
+    echo repr result
diff --git a/experiments/trello/trello.nim b/experiments/trello/trello.nim
new file mode 100644
index 0000000..d12105a
--- /dev/null
+++ b/experiments/trello/trello.nim
@@ -0,0 +1,151 @@
+
+import knete, widgets
+import karax / jstrutils
+
+type
+  Attachable* = ref object of RootObj ## an element that is attachable to
+                                      ## DOM elements.
+    attachedTo*: seq[Element]
+
+  TaskId = int
+  Task = ref object
+    id: TaskId
+    name, desc: kstring
+
+  ColumnId = distinct int
+  Column = ref object of Attachable
+    id: ColumnId
+    header: kstring
+    tasks: seq[Task]
+
+  Board = ref object
+    columns: seq[Column]
+
+var b = Board(columns: @[Column(id: ColumnId 0, header: "To Do"),
+                         Column(id: ColumnId 1, header: "Doing"),
+                         Column(id: ColumnId 2, header: "Done")])
+
+proc removeTask(t: TaskId) =
+  for c in b.columns:
+    for i in 0 ..< c.tasks.len:
+      if c.tasks[i].id == t:
+        delete(c.tasks, i)
+        break
+
+proc moveTask(t: TaskId; dest: Column) =
+  for c in b.columns:
+    for i in 0 ..< c.tasks.len:
+      let task = c.tasks[i]
+      if task.id == t:
+        delete(c.tasks, i)
+        dest.tasks.add task
+        return
+
+var nextTaskId = 0 ## negative because they are not yet backed
+                   ## up by the database
+
+proc createTask(c: Column; name, desc: kstring): Task =
+  dec nextTaskId
+  result = Task(id: TaskId nextTaskId, name: name, desc: desc)
+  c.tasks.add result
+
+# --------------------- UI -----------------------------------------------
+
+proc renderTask(t: Task): Element =
+  proc dodelete =
+    removeTask t.id
+    delete result
+
+  proc dragstart(ev: Event) =
+    ev.prepareDragData("taskid", ev.target.id)
+
+  result = buildHtml():
+    tdiv(draggable="true", ondragstart=dragstart, id = &t.id):
+      bindField t.name
+      br()
+      bindField t.desc
+      button(onclick = dodelete):
+        text cross
+
+type
+  NewTaskPanel = object
+    c: Column
+    e: Element
+
+proc open(p: var NewTaskPanel; c: Column) =
+  p.e.style.display = "block"
+  p.c = c
+
+proc newTaskDialog(): NewTaskPanel =
+  var nameInp = buildHtml():
+    input(setFocus = true)
+  var descInp = buildHtml():
+    input()
+
+  proc close =
+    result.e.style.display = "none"
+
+  proc submit =
+    let t = createTask(result.c, nameInp.value, descInp.value)
+    close()
+    result.c.attachedTo[0].add renderTask(t)
+
+  result.e = buildHtml():
+    tdiv(style={display: "none", position: "fixed",
+        left: "0", top: "0", width: "100%", height: "100%",
+        overflow: "auto",
+        backgroundColor: "rgb(0,0,0)",
+        backgroundColor: "rgba(0,0,0,0.4)", zIndex: "1"}):
+      tdiv(style={backgroundColor: "#fefefe",
+          margin: "15% auto", padding: "20px", border: "1px solid #888",
+          width: "80%"}):
+        span(onclick = close, style={color: "#aaa",
+            cssFloat: "right",
+            fontSize: "28px",
+            fontWeight: "bold"}):
+          text cross
+        p:
+          text "Task name"
+          nameInp
+        p:
+          text "Task description"
+          descInp
+        span(onclick = submit, style={color: "#0f0",
+            cssFloat: "left",
+            fontWeight: "bold"}):
+          text "Submit"
+
+var dialog = newTaskDialog()
+
+proc renderColumn(c: Column): Element =
+  proc doadd(c: Column): proc () =
+    result = proc() = dialog.open(c)
+
+  proc allowDrop(ev: Event) = ev.preventDefault()
+  proc drop(ev: Event) =
+    ev.preventDefault()
+    let data = ev.recvDragData("taskid")
+    moveTask(parseInt data, c)
+    ev.target.up("mycolumn").add(getElementById(data))
+
+  result = buildHtml():
+    tdiv(class = "mycolumn", style = {cssFloat: "left", width: "33%"},
+         ondrop = drop, ondragover = allowDrop):
+      tdiv(class = "myheader"):
+        bindField c.header
+        span(onclick = doadd(c)):
+          text plus
+      for t in c.tasks:
+        renderTask(t)
+  c.attachedTo.add result
+
+proc renderBoard(b: Board): Element =
+  result = buildHtml(tdiv):
+    dialog.e
+    for c in b.columns:
+      renderColumn(c)
+
+proc main(hashPart: kstring): Element =
+  result = renderBoard(b)
+
+setInitializer main
diff --git a/experiments/trello/widgets.nim b/experiments/trello/widgets.nim
new file mode 100644
index 0000000..a6ab77b
--- /dev/null
+++ b/experiments/trello/widgets.nim
@@ -0,0 +1,43 @@
+## Common widget implemenations
+
+import knete
+
+const
+  cross* = "x"
+  plus* = kstring"+"
+
+const
+  LEFT* = 37
+  UP* = 38
+  RIGHT* = 39
+  DOWN* = 40
+  TAB* = 9
+  ESC* = 27
+  ENTER* = 13
+
+proc editable*(x: kstring; onchanged: proc (value: kstring);
+               isEdited = false): Element =
+  proc onenter(ev: Event) = ev.target.blur()
+  proc submit(ev: Event) =
+    onchanged(ev.target.value)
+    # close the loop: This is a common pattern in Knete.
+    replace(result, editable(ev.target.value, onchanged, false))
+
+  proc makeEditable() =
+    # close the loop: This is a common pattern in Knete.
+    replace(result, editable(x, onchanged, true))
+
+  result = buildHtml():
+    if isEdited:
+      input(class = "edit",
+        onblur = submit,
+        onkeyupenter = onenter,
+        value = x,
+        setFocus = true)
+    else:
+      span(onclick = makeEditable):
+        text x
+
+template bindField*(field): Element =
+  editable field, proc (value: kstring) =
+    field = value

From 87edc4cdb9ac9de6ec50b4cd19bb1ce6e503a3f5 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 7 Mar 2018 11:52:25 +0100
Subject: [PATCH 173/264] fixes overly aggressive text node reuse DOM diff'ing
 bug

---
 karax/karax.nim    | 5 +++--
 tests/difftest.nim | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 0871422..19a7dfb 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -233,7 +233,7 @@ proc eq(a, b: VNode): EqResult =
   if a.kind == VNodeKind.text:
     if a.text != b.text:
       when defined(profileKarax): inc reasons[deText]
-      return similar
+      return different # similar
   elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
     if a.text != b.text: return different
     if a.len != b.len: return different
@@ -648,7 +648,8 @@ proc setRenderer*(renderer: proc (): VNode, root: cstring = "ROOT",
                   clientPostRenderCallback: proc () = nil): KaraxInstance {.discardable.} =
   ## Setup Karax. Usually the return value can be ignored.
   proc wrapRenderer(data: RouterData): VNode = result = renderer()
-  proc wrapPostRender(data: RouterData) = clientPostRenderCallback()
+  proc wrapPostRender(data: RouterData) =
+    if clientPostRenderCallback != nil: clientPostRenderCallback()
   setRenderer(wrapRenderer, root, wrapPostRender)
 
 proc setInitializer*(renderer: proc (data: RouterData): VNode, root: cstring = "ROOT",
diff --git a/tests/difftest.nim b/tests/difftest.nim
index 3318f24..fca3391 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -156,14 +156,14 @@ proc testWild() =
   let a = createEntries(entries)
   entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
   let b = createEntries(entries)
-  doDiff(a, b, "pkDetach button 7", "pkRemove nil", "pkDetach div 5", "pkRemove nil")
+  doDiff(a, b, "pkDetach button 7", "pkRemove nil", "pkDetach div 7", "pkRemove nil")
 
 proc testWildInsert() =
   var entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5")]
   let a = createEntries(entries)
   entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring"7", cstring("5")]
   let b = createEntries(entries)
-  doDiff(a, b, "pkInsertBefore button 7", "pkAppend div 5")
+  doDiff(a, b, "pkInsertBefore button 7", "pkInsertBefore div 7")
 
 kxi = KaraxInstance(rootId: cstring"ROOT", renderer: proc (data: RouterData): VNode = discard,
                     byId: newJDict[cstring, VNode]())

From 1e3a1e4745c51685ca48d13561c99ae7417b0215 Mon Sep 17 00:00:00 2001
From: shinriyo <shinriyo@gmail.com>
Date: Wed, 14 Mar 2018 20:23:39 +0900
Subject: [PATCH 174/264] add 'git clone' instructions to the readme (#51)

---
 readme.rst | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/readme.rst b/readme.rst
index 3fac7ad..41f6cfa 100644
--- a/readme.rst
+++ b/readme.rst
@@ -7,6 +7,8 @@ to change.
 
 To try it out, run::
 
+  git clone https://github.com/pragmagic/karax
+  cd karax
   nimble install # For first time
 
   cd examples/todoapp

From 9068686614a3cf87d6ca1cb3e42663df82d1e4bd Mon Sep 17 00:00:00 2001
From: Dominik Picheta <dominikpicheta@googlemail.com>
Date: Wed, 23 May 2018 22:30:06 +0100
Subject: [PATCH 175/264] General improvements and fixes (#58)

* Fixes Nimble package structure.
* Improves readme.
* Fixes compatibility with devel.
* Add nice error message when ROOT is missing.
* Pass responseText instead of statusText in ajax callbacks.
* Implements verbatim node.
* Apparently it should just be true all the time.
* Small fix to readme.
* Fixes verbatim node updates.
* Move karun into the `karax` directory so that it's installable.
---
 karax.nimble                     |  4 ++--
 karax/kajax.nim                  |  2 +-
 karax/karax.nim                  | 16 ++++++++++++++++
 {tools => karax/tools}/karun.nim |  0
 karax/vdom.nim                   |  9 ++++++++-
 readme.rst                       |  6 ++++--
 6 files changed, 31 insertions(+), 6 deletions(-)
 rename {tools => karax/tools}/karun.nim (100%)

diff --git a/karax.nimble b/karax.nimble
index bc49e03..743d85b 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -9,6 +9,6 @@ license       = "MIT"
 
 requires "nim >= 0.16.1"
 
-skipDirs = @["examples", "experiments"]
+skipDirs = @["examples", "experiments", "tests"]
 
-bin = @["tools/karun"]
+bin = @["karax/tools/karun"]
diff --git a/karax/kajax.nim b/karax/kajax.nim
index 800d315..80184d1 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -38,7 +38,7 @@ proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
       if this.status == 200:
         contWrapper(this.status, this.responseText)
       else:
-        contWrapper(this.status, this.statusText)
+        contWrapper(this.status, this.responseText)
   if useBinary:
     ajax.send(blob)
   else:
diff --git a/karax/karax.nim b/karax/karax.nim
index 19a7dfb..bd3451c 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -4,6 +4,8 @@ import kdom, vdom, jstrutils, compact, jdict, vstyles
 
 export kdom.Event, kdom.Blob
 
+{.experimental: "notnil".}
+
 proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
   ## the preferred way of debugging karax applications. Now deprecated,
   ## you can now use ``system.echo`` instead.
@@ -135,6 +137,10 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
     attach n
+  elif n.kind == VNodeKind.verbatim:
+    result = document.createElement("div")
+    result.innerHTML = n.text
+    return result
   elif n.kind == VNodeKind.vthunk:
     let x = callThunk(vcomponents[n.text], n)
     result = vnodeToDom(x, kxi)
@@ -183,6 +189,8 @@ proc same(n: VNode, e: Node; nesting = 0): bool =
   if kxi.orphans.contains(n.id): return true
   if n.kind == VNodeKind.component:
     result = same(VComponent(n).expanded, e, nesting+1)
+  elif n.kind == VNodeKind.verbatim:
+    result = true
   elif n.kind == VNodeKind.vthunk or n.kind == VNodeKind.dthunk:
     # we don't check these for now:
     result = true
@@ -239,6 +247,9 @@ proc eq(a, b: VNode): EqResult =
     if a.len != b.len: return different
     for i in 0..<a.len:
       if eq(a[i], b[i]) == different: return different
+  elif a.kind == VNodeKind.verbatim:
+    if a.text != b.text:
+      return different
   elif b.kind == VNodeKind.component:
     # different component names mean different components:
     if a.text != b.text:
@@ -632,6 +643,11 @@ proc setRenderer*(renderer: proc (data: RouterData): VNode,
                     proc (data: RouterData) = nil): KaraxInstance {.
                     discardable.} =
   ## Setup Karax. Usually the return value can be ignored.
+  if document.getElementById(root).isNil:
+    let msg = "Could not find a <div> with id=" & root &
+              ". Karax needs it as its rendering target."
+    raise newException(Exception, $msg)
+
   result = KaraxInstance(rootId: root, renderer: renderer,
                          postRenderCallback: clientPostRenderCallback,
                          patches: newSeq[Patch](60),
diff --git a/tools/karun.nim b/karax/tools/karun.nim
similarity index 100%
rename from tools/karun.nim
rename to karax/tools/karun.nim
diff --git a/karax/vdom.nim b/karax/vdom.nim
index 314b3ba..80f9389 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -14,7 +14,7 @@ type
   VNodeKind* {.pure.} = enum
     text = "#text", int = "#int", bool = "#bool",
     vthunk = "#vthunk", dthunk = "#dthunk",
-    component = "#component",
+    component = "#component", verbatim="#verbatim",
 
     html, head, title, base, link, meta, style,
     script, noscript,
@@ -267,6 +267,13 @@ when defined(js):
   proc text*(s: string): VNode = VNode(kind: VNodeKind.text, text: kstring(s), index: -1)
 proc text*(s: kstring): VNode = VNode(kind: VNodeKind.text, text: s, index: -1)
 
+when defined(js):
+  proc verbatim*(s: string): VNode =
+    VNode(kind: VNodeKind.verbatim, text: kstring(s), index: -1)
+proc verbatim*(s: kstring): VNode =
+  VNode(kind: VNodeKind.verbatim, text: s, index: -1)
+
+
 iterator items*(n: VNode): VNode =
   for i in 0..<n.kids.len: yield n.kids[i]
 
diff --git a/readme.rst b/readme.rst
index 41f6cfa..2a34365 100644
--- a/readme.rst
+++ b/readme.rst
@@ -7,9 +7,11 @@ to change.
 
 To try it out, run::
 
-  git clone https://github.com/pragmagic/karax
+  cd ~/projects # Insert your favourite directory for projects
+
+  nimble develop karax # This will clone Karax and create a link to it in ~/.nimble
+
   cd karax
-  nimble install # For first time
 
   cd examples/todoapp
   nim js todoapp.nim

From 9882d1aec2bb894984c99fd3b22cc3cb868df600 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 24 May 2018 00:01:01 +0200
Subject: [PATCH 176/264] cleanup dom's PR

---
 karax/karax.nim | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index bd3451c..6297534 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -4,7 +4,8 @@ import kdom, vdom, jstrutils, compact, jdict, vstyles
 
 export kdom.Event, kdom.Blob
 
-{.experimental: "notnil".}
+when defined(nimNoNil):
+  {.experimental: "notnil".}
 
 proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
   ## the preferred way of debugging karax applications. Now deprecated,
@@ -140,6 +141,7 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
   elif n.kind == VNodeKind.verbatim:
     result = document.createElement("div")
     result.innerHTML = n.text
+    attach n
     return result
   elif n.kind == VNodeKind.vthunk:
     let x = callThunk(vcomponents[n.text], n)

From 78cad8745230079f4fdce66f3c9daea8109d2552 Mon Sep 17 00:00:00 2001
From: oskca <oskca@users.noreply.github.com>
Date: Fri, 25 May 2018 15:12:22 +0800
Subject: [PATCH 177/264]  make --css works in karun (#64)

* make --css works in karun

* ignore karun executable in source tree
---
 .gitignore            | 2 +-
 karax/tools/karun.nim | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 96bc49b..acb4ec1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
 nimcache/
 /tests/tester
-/tools/karun
+karax/tools/karun
 *.code-workspace
 *.exe
diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index 92ec3d4..5501879 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -42,6 +42,7 @@ proc main =
         rest = rest.replace("--run ")
       of "css":
         selectedCss = css
+        rest = rest.replace("--css ")
       else: discard
     of cmdShortOption:
       if op.key == "r":

From 092395ed5c49b3176c69cde987d035d6842c7f1d Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Fri, 25 May 2018 22:41:01 +0200
Subject: [PATCH 178/264] bugfix: textareas are allowed to be weird

---
 karax/karax.nim | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 6297534..e353597 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -199,8 +199,9 @@ proc same(n: VNode, e: Node; nesting = 0): bool =
   elif toTag[n.kind] == e.nodename:
     result = true
     if n.kind != VNodeKind.text:
-      if e.len != n.len:
-        echo "expected ", e.len, " real ", n.len, toTag[n.kind], " nesting ", nesting
+      # BUGFIX: Microsoft's Edge gives the textarea a child containing the text node!
+      if e.len != n.len and n.kind != VNodeKind.textarea:
+        echo "expected ", n.len, " real ", e.len, " ", toTag[n.kind], " nesting ", nesting
         return false
       for i in 0 ..< n.len:
         if not same(n[i], e[i], nesting+1): return false

From 330a7351f9481258d72b8a8a335c270b91600c8d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sun, 10 Jun 2018 12:09:30 +0200
Subject: [PATCH 179/264] knete.nim: change order of parameters in replaceById

---
 experiments/trello/knete.nim  | 2 +-
 experiments/trello/trello.nim | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/experiments/trello/knete.nim b/experiments/trello/knete.nim
index 2fd0d05..3a09ee3 100644
--- a/experiments/trello/knete.nim
+++ b/experiments/trello/knete.nim
@@ -538,7 +538,7 @@ proc preventDefault*(ev: Event) {.importcpp.}
 
 # ------------------ Init handling -----------------------------------
 
-proc replaceById(id: cstring; newTree: Element) =
+proc replaceById*(newTree: Element; id: cstring = "ROOT") =
   let x = getElementById(id)
   x.parent.replaceChild(newTree, x)
   newTree.id = id
diff --git a/experiments/trello/trello.nim b/experiments/trello/trello.nim
index d12105a..77c56df 100644
--- a/experiments/trello/trello.nim
+++ b/experiments/trello/trello.nim
@@ -129,7 +129,7 @@ proc renderColumn(c: Column): Element =
     ev.target.up("mycolumn").add(getElementById(data))
 
   result = buildHtml():
-    tdiv(class = "mycolumn", style = {cssFloat: "left", width: "33%"},
+    tdiv(class = "mycolumn", style = {cssFloat: "left", width: "20%"},
          ondrop = drop, ondragover = allowDrop):
       tdiv(class = "myheader"):
         bindField c.header

From 52026d16877e65c6a238a5a65d81746860bf6b8e Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sun, 10 Jun 2018 13:27:58 +0200
Subject: [PATCH 180/264] Karax DSL: allow 'style = {}' syntax for inline CSS

---
 karax/karaxdsl.nim | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/karax/karaxdsl.nim b/karax/karaxdsl.nim
index b9c6a56..5d0cde4 100644
--- a/karax/karaxdsl.nim
+++ b/karax/karaxdsl.nim
@@ -1,5 +1,5 @@
 
-import macros, vdom, compact
+import macros, vdom, compact, kbase
 from strutils import startsWith, toLowerAscii
 
 when defined(js):
@@ -23,6 +23,14 @@ proc getName(n: NimNode): string =
     #echo repr n
     expectKind(n, nnkIdent)
 
+proc toKstring(n: NimNode): NimNode =
+  if n.kind == nnkStrLit:
+    result = newCall(bindSym"kstring", n)
+  else:
+    result = copyNimNode(n)
+    for child in n:
+      result.add toKstring(child)
+
 proc newDotAsgn(tmp: NimNode, key: string, x: NimNode): NimNode =
   result = newTree(nnkAsgn, newDotExpr(tmp, newIdentNode key), x)
 
@@ -104,6 +112,8 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
           if key.startsWith("on"):
             result.add newCall(evHandler(),
               tmp, newDotExpr(bindSym"EventKind", x[0]), x[1], ident("kxi"))
+          elif eqIdent(key, "style") and x[1].kind == nnkTableConstr:
+            result.add newDotAsgn(tmp, key, newCall("style", toKstring x[1]))
           elif key in SpecialAttrs:
             result.add newDotAsgn(tmp, key, x[1])
           elif eqIdent(key, "setFocus"):

From fbfeced5b1d1e5cc4649cc11051d25421adf693a Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 14 Jun 2018 15:07:34 +0200
Subject: [PATCH 181/264] kajax.nim: add a switch to disable automatic
 redrawing when data was received

---
 karax/kajax.nim | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/karax/kajax.nim b/karax/kajax.nim
index 80184d1..114b29d 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -8,12 +8,13 @@ import karax
 proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int; response: cstring);
+          doRedraw: bool = true,
           kxi: KaraxInstance = kxi,
           useBinary: bool = false,
           blob: Blob = nil) =
   proc contWrapper(httpStatus: int; response: cstring) =
     cont(httpStatus, response)
-    redraw(kxi)
+    if doRedraw: redraw(kxi)
 
   type
     HttpRequest {.importc.} = ref object
@@ -47,30 +48,35 @@ proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
 proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int, response: cstring);
+          doRedraw: bool = true,
           kxi: KaraxInstance = kxi) =
-  ajax("POST", url, headers, data, cont, kxi)
+  ajax("POST", url, headers, data, cont, doRedraw, kxi)
 
 proc ajaxPost*(url: cstring; headers: openarray[(cstring, cstring)];
           data: Blob;
           cont: proc (httpStatus: int, response: cstring);
+          doRedraw: bool = true,
           kxi: KaraxInstance = kxi) =
-  ajax("POST", url, headers, "", cont, kxi, true, data)
+  ajax("POST", url, headers, "", cont, doRedraw, kxi, true, data)
 
 proc ajaxGet*(url: cstring; headers: openarray[(cstring, cstring)];
           cont: proc (httpStatus: int, response: cstring);
+          doRedraw: bool = true,
           kxi: KaraxInstance = kxi) =
-  ajax("GET", url, headers, nil, cont, kxi)
+  ajax("GET", url, headers, nil, cont, doRedraw, kxi)
 
 proc ajaxPut*(url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
           cont: proc (httpStatus: int, response: cstring);
+          doRedraw: bool = true,
           kxi: KaraxInstance = kxi) =
-  ajax("PUT", url, headers, data, cont, kxi)
+  ajax("PUT", url, headers, data, cont, doRedraw, kxi)
 
 proc ajaxDelete*(url: cstring; headers: openarray[(cstring, cstring)];
           cont: proc (httpStatus: int, response: cstring);
+          doRedraw: bool = true,
           kxi: KaraxInstance = kxi) =
-  ajax("DELETE", url, headers, nil, cont, kxi)
+  ajax("DELETE", url, headers, nil, cont, doRedraw, kxi)
 
 
 proc toJson*[T](data: T): cstring {.importc: "JSON.stringify".}

From 20fe1bcbee9140082df6eba84cbbcf56d706824f Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 14 Jun 2018 15:07:54 +0200
Subject: [PATCH 182/264] extended the readme.rst with plenty of examples from
 my blog post

---
 readme.rst | 270 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 266 insertions(+), 4 deletions(-)

diff --git a/readme.rst b/readme.rst
index 2a34365..f7e90b5 100644
--- a/readme.rst
+++ b/readme.rst
@@ -25,10 +25,7 @@ To try it out, run::
 It uses a virtual DOM like React, but is much smaller than the existing
 frameworks plus of course it's written in Nim for Nim. No external
 dependencies! And thanks to Nim's whole program optimization only what
-is used ends up in the generated JavaScript code. But don't take my
-word for it, look at this:
-
-.. image:: docs/benchmark.png
+is used ends up in the generated JavaScript code.
 
 
 Goals
@@ -40,3 +37,268 @@ Goals
 
 .. |travis| image:: https://travis-ci.org/pragmagic/karax.svg?branch=master
     :target: https://travis-ci.org/pragmagic/karax
+
+
+Hello World
+===========
+
+The simplest Karax program looks like this:
+
+.. code-block:: nim
+
+  include karax / prelude
+
+  proc createDom(): VNode =
+    result = buildHtml(tdiv):
+      text "Hello World!"
+
+  setRenderer createDom
+
+
+Since ``div`` is a keyword in Nim, karax choose to use ``tdiv`` instead
+here. ``tdiv`` produces a ``<div>`` virtual DOM node.
+
+As you can see, karax comes with its own ``buildHtml`` DSL for convenient
+construction of (virtual) DOM trees (of type ``VNode``). Karax provides
+a tiny build tool called ``karun`` that generates the HTML boilerplate code that
+embeds and invokes the generated JavaScript code::
+
+  nim c karax/tools/karun
+  karax/tools/karun -r helloworld.nim
+
+Via ``-d:debugKaraxDsl`` we can have a look at the produced Nim code by
+``buildHtml``:
+
+.. code-block:: nim
+
+  let tmp1 = tree(VNodeKind.tdiv)
+  add(tmp1, text "Hello World!")
+  tmp1
+
+(I shortened the IDs for better readability.)
+
+Ok, so ``buildHtml`` introduces temporaries and calls ``add`` for the tree
+construction so that it composes with all of Nim's control flow constructs:
+
+
+.. code-block:: nim
+
+  include karax / prelude
+  import random
+
+  proc createDom(): VNode =
+    result = buildHtml(tdiv):
+      if random(100) <= 50:
+        text "Hello World!"
+      else:
+        text "Hello Universe"
+
+  randomize()
+  setRenderer createDom
+
+
+Produces:
+
+.. code-block:: nim
+
+  let tmp1 = tree(VNodeKind.tdiv)
+  if random(100) <= 50:
+    add(tmp1, text "Hello World!")
+  else:
+    add(tmp1, text "Hello Universe")
+  tmp1
+
+
+Event model
+===========
+
+Karax does not change the DOM's event model much, here is a program
+that writes "Hello simulated universe" on a button click:
+
+.. code-block:: nim
+
+  include karax / prelude
+
+  var lines: seq[kstring] = @[]
+
+  proc createDom(): VNode =
+    result = buildHtml(tdiv):
+      button:
+        text "Say hello!"
+        proc onclick(ev: Event; n: VNode) =
+          lines.add "Hello simulated universe"
+      for x in lines:
+        tdiv:
+          text x
+
+  setRenderer createDom
+
+
+``kstring`` is Karax's alias for ``cstring`` (which stands for "compatible
+string"; for the JS target that is an immutable JavaScript string) which
+is preferred for efficiency on the JS target. However, on the native targets
+``kstring`` is mapped  to ``string`` for efficiency. The DSL for HTML
+construction is also avaible for the native targets (!) and the ``kstring``
+abstraction helps to deal with these conflicting requirements.
+
+Karax's DSL is quite flexible when it comes to event handlers, so the
+following syntax is also supported:
+
+.. code-block:: nim
+
+  include karax / prelude
+  from future import `=>`
+
+  var lines: seq[kstring] = @[]
+
+  proc createDom(): VNode =
+    result = buildHtml(tdiv):
+      button(onclick = () => lines.add "Hello simulated universe"):
+        text "Say hello!"
+      for x in lines:
+        tdiv:
+          text x
+
+  setRenderer createDom
+
+
+The ``buildHtml`` macro produces this code for us:
+
+.. code-block:: nim
+
+  let tmp2 = tree(VNodeKind.tdiv)
+  let tmp3 = tree(VNodeKind.button)
+  addEventHandler(tmp3, EventKind.onclick,
+                  () => lines.add "Hello simulated universe", kxi)
+  add(tmp3, text "Say hello!")
+  add(tmp2, tmp3)
+  for x in lines:
+    let tmp4 = tree(VNodeKind.tdiv)
+    add(tmp4, text x)
+    add(tmp2, tmp4)
+  tmp2
+
+As the examples grow larger it becomes more and more visible of what
+a DSL that composes with the builtin Nim control flow constructs buys us.
+Once you have tasted this power there is no going back and languages
+without AST based macro system simply don't cut it anymore.
+
+
+DOM diffing
+===========
+
+Ok, so now we have seen DOM creation and event handlers. But how does
+Karax actually keep the DOM up to date? The trick is that every event
+handler is wrapped in a helper proc that triggers a *redraw* operation
+that calls the *renderer* that you initially passed to ``setRenderer``.
+So a new virtual DOM is created and compared against the previous
+virtual DOM. This comparison produces a patch set that is then applied
+to the real DOM the browser uses internally. This process is called
+"virtual DOM diffing" and other frameworks, most notably Facebook's
+*React*, do quite similar things. The virtual DOM is faster to create
+and manipulate than the real DOM so this approach is quite efficient.
+
+
+Form validation
+===============
+
+Most applications these days have some "login"
+mechanism consisting of ``username`` and ``password`` and
+a ``login`` button. The login button should only be clickable
+if ``username`` and ``password`` are not empty. An error
+message should be shown as long as one input field is empty.
+
+To create new UI elements we write a ``loginField`` proc that
+returns a ``VNode``:
+
+.. code-block:: nim
+
+  proc loginField(desc, field, class: kstring;
+                  validator: proc (field: kstring): proc ()): VNode =
+    result = buildHtml(tdiv):
+      label(`for` = field):
+        text desc
+      input(class = class, id = field, onchange = validator(field))
+
+We use the ``karax / errors`` module to help with this error
+logic. The ``errors`` module is mostly a mapping from strings to
+strings but it turned out that the logic is tricky enough to warrant
+a library solution. ``validateNotEmpty`` returns a closure that
+captures the ``field`` parameter:
+
+.. code-block:: nim
+
+  proc validateNotEmpty(field: kstring): proc () =
+    result = proc () =
+      let x = getVNodeById(field)
+      if x.text.isNil or x.text == "":
+        errors.setError(field, field & " must not be empty")
+      else:
+        errors.setError(field, "")
+
+This indirection is required because
+event handlers in Karax need to have the type ``proc ()``
+or ``proc (ev: Event; n: VNode)``. The errors module also
+gives us a handy ``disableOnError`` helper. It returns
+``"disabled"`` if there are errors. Now we have all the
+pieces together to write our login dialog:
+
+
+.. code-block:: nim
+
+  # some consts in order to prevent typos:
+  const
+    username = kstring"username"
+    password = kstring"password"
+
+  var loggedIn: bool
+
+  proc loginDialog(): VNode =
+    result = buildHtml(tdiv):
+      if not loggedIn:
+        loginField("Name :", username, "input", validateNotEmpty)
+        loginField("Password: ", password, "password", validateNotEmpty)
+        button(onclick = () => (loggedIn = true), disabled = errors.disableOnError()):
+          text "Login"
+        p:
+          text errors.getError(username)
+        p:
+          text errors.getError(password)
+      else:
+        p:
+          text "You are now logged in."
+
+  setRenderer loginDialog
+
+(Full example `here <https://github.com/pragmagic/karax/blob/master/examples/login.nim>`_.)
+
+This code still has a bug though, when you run it, the ``login`` button is not
+disabled until some input fields are validated! This is easily fixed,
+at initialization we have to do:
+
+.. code-block:: nim
+  setError username, username & " must not be empty"
+  setError password, password & " must not be empty"
+
+There are likely more elegant solutions to this problem.
+
+
+Routing
+=======
+
+For routing ``setRenderer`` can be called with a callback that takes a parameter of
+type ``RouterData``. Here is the relevant excerpt from the famous "Todo App" example:
+
+.. code-block:: nim
+
+  proc createDom(data: RouterData): VNode =
+    if data.hashPart == "#/": filter = all
+    elif data.hashPart == "#/completed": filter = completed
+    elif data.hashPart == "#/active": filter = active
+    result = buildHtml(tdiv(class="todomvc-wrapper")):
+      section(class = "todoapp"):
+        ...
+
+  setRenderer createDom
+
+(Full example `here <https://github.com/pragmagic/karax/blob/master/examples/todoapp/todoapp.nim>`_.)

From 3b3aa6347dbebe398175e3dd3c34667cca06c3cb Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Tue, 3 Jul 2018 12:19:19 +0200
Subject: [PATCH 183/264] improve karax documentation

---
 readme.rst | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/readme.rst b/readme.rst
index f7e90b5..38ae2b5 100644
--- a/readme.rst
+++ b/readme.rst
@@ -2,8 +2,8 @@ Karax – Single page applications in Nim |travis|
 ================================================
 
 Karax is a framework for developing single page applications in Nim.
-It's still in heavy development, so keep in mind that the API is subject
-to change.
+The API is reasonably stable and version 1 should arrive anytime soon
+now.
 
 To try it out, run::
 
@@ -184,6 +184,27 @@ Once you have tasted this power there is no going back and languages
 without AST based macro system simply don't cut it anymore.
 
 
+Attaching data to an event handler
+==================================
+
+Since the type of an event handler is ``(ev: Event; n: VNode)`` or ``()`` any
+additional data that should be passed to the event handler needs to be
+done via Nim's closures. In general this means a pattern like this:
+
+.. code-block:: nim
+
+  proc menuAction(menuEntry: kstring): proc() =
+    result = proc() =
+      echo "clicked ", menuEntry
+
+  proc buildMenu(menu: seq[kstring]): VNode =
+    result = buildHtml(tdiv):
+      for m in menu:
+        nav(class="navbar is-primary"):
+          tdiv(class="navbar-brand"):
+            a(class="navbar-item", onclick = menuAction(m)):
+
+
 DOM diffing
 ===========
 

From 6ab7c9455ddd25c0dd5f5d413e7bcb40b0b26de7 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Tue, 3 Jul 2018 12:56:05 +0200
Subject: [PATCH 184/264] make menus.nim example compile again

---
 experiments/menus.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/experiments/menus.nim b/experiments/menus.nim
index 3f79d83..6ea0529 100644
--- a/experiments/menus.nim
+++ b/experiments/menus.nim
@@ -1,6 +1,6 @@
 ## Example program that shows how to create menus with Karax.
 
-include karaxprelude
+include prelude
 import jstrutils, kdom
 
 proc contentA(): VNode =

From 015590e8060402f9f31a16f6de1d6371f64c3317 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Tue, 3 Jul 2018 12:56:32 +0200
Subject: [PATCH 185/264] karax DSL: allow 'foo-bar' syntax for custom HTML
 attributes

---
 karax/karaxdsl.nim | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/karax/karaxdsl.nim b/karax/karaxdsl.nim
index 5d0cde4..307153a 100644
--- a/karax/karaxdsl.nim
+++ b/karax/karaxdsl.nim
@@ -19,6 +19,12 @@ proc getName(n: NimNode): string =
       result.add getName(n[i])
   of nnkStrLit..nnkTripleStrLit:
     result = n.strVal
+  of nnkInfix:
+    # allow 'foo-bar' syntax:
+    if n.len == 3 and $n[0] == "-":
+      result = getName(n[1]) & "-" & getName(n[2])
+    else:
+      expectKind(n, nnkIdent)
   else:
     #echo repr n
     expectKind(n, nnkIdent)

From b3a5ed9c5474b86617bbb724c95052bf67079850 Mon Sep 17 00:00:00 2001
From: Dominik Picheta <dominikpicheta@googlemail.com>
Date: Mon, 30 Jul 2018 07:57:59 +0100
Subject: [PATCH 186/264] Adds animation events. (#70)

---
 karax/vdom.nim | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 80f9389..e9627a8 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -84,6 +84,10 @@ type
     onsubmit, ## A form is submitted
     oninput, ## An input value changes
 
+    onanimationstart,
+    onanimationend,
+    onanimationiteration,
+
     onkeyupenter, ## vdom extension: an input field received the ENTER key press
     onkeyuplater  ## vdom extension: a key was pressed and some time
                   ## passed (useful for on-the-fly text completions)

From b05c037bb028dfa90a0e7cfc1e992999aeb64f2b Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Wed, 15 Aug 2018 16:25:26 +0200
Subject: [PATCH 187/264] Karax: prepare for the Nim release where 'nil' is not
 a thing for strings anymore

---
 karax/vdom.nim    | 10 +++++-----
 karax/vstyles.nim | 11 ++++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 80f9389..f9df2bf 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -208,7 +208,7 @@ template markDirty*(c: VComponent) =
   inc c.version
 
 proc setAttr*(n: VNode; key: kstring; val: kstring = "") =
-  if n.attrs.isNil:
+  if n.attrs.len == 0:
     n.attrs = @[key, val]
   else:
     for i in countup(0, n.attrs.len-2, 2):
@@ -291,7 +291,7 @@ proc addEventListener*(n: VNode; event: EventKind; handler: EventHandler) =
   n.events.add((event, handler, nil))
 
 template toStringAttr(field) =
-  if n.field != nil:
+  if n.field.len > 0:
     result.add " " & astToStr(field) & " = " & $n.field
 
 proc toString*(n: VNode; result: var string; indent: int) =
@@ -306,7 +306,7 @@ proc toString*(n: VNode; result: var string; indent: int) =
   if n.kind == VNodeKind.text:
     result.add n.text
   else:
-    if n.text != nil:
+    if n.text.len > 0:
       result.add " value = "
       result.add n.text
     for child in items(n):
@@ -379,11 +379,11 @@ proc add*(result: var string, n: VNode, indent = 0, indWidth = 2) =
     let kind = $n.kind
     result.add('<')
     result.add(kind)
-    if n.id != nil:
+    if n.id.len > 0:
       result.add " id=\""
       result.addEscapedAttr(n.id)
       result.add('"')
-    if n.class != nil:
+    if n.class.len > 0:
       result.add " class=\""
       result.addEscapedAttr(n.class)
       result.add('"')
diff --git a/karax/vstyles.nim b/karax/vstyles.nim
index 2b7e48f..e2fca7d 100644
--- a/karax/vstyles.nim
+++ b/karax/vstyles.nim
@@ -241,8 +241,8 @@ proc setAttr(s: VStyle; a, value: kstring) {.noSideEffect.} =
       s[i+1] = value
       return
     elif s[i] > a:
-      s.add nil
-      s.add nil
+      s.add ""
+      s.add ""
       # insertion point here:
       for j in countdown(s.len-1, i, 2):
         s[j] = s[j-2]
@@ -255,18 +255,19 @@ proc setAttr(s: VStyle; a, value: kstring) {.noSideEffect.} =
   s.add value
 
 proc setAttr*(s: VStyle; attr: StyleAttr, value: kstring) {.noSideEffect.} =
-  assert value != nil, "value must not be nil"
+  when kstring is cstring:
+    assert value != nil, "value must not be nil"
   setAttr(s, toStyleAttrName[attr], value)
 
 proc getAttr*(s: VStyle; attr: StyleAttr): kstring {.noSideEffect.} =
-  ## returns 'nil' if the attribute has not been set.
+  ## returns "" if the attribute has not been set.
   var i = 0
   let a = toStyleAttrName[attr]
   while i < s.len:
     if s[i] == a:
       return s[i+1]
     elif s[i] > a:
-      return nil
+      return ""
     inc i, 2
 
 proc style*(pairs: varargs[(StyleAttr, kstring)]): VStyle {.noSideEffect.} =

From bd69de9f146b850ca5ba61397d59a18782af0366 Mon Sep 17 00:00:00 2001
From: LemonBoy <LemonBoy@users.noreply.github.com>
Date: Mon, 3 Sep 2018 00:25:51 +0200
Subject: [PATCH 188/264] Don't choke on nnkDotExpr nodes (#71)

Fixes #69
---
 karax/karaxdsl.nim | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/karax/karaxdsl.nim b/karax/karaxdsl.nim
index 307153a..81ba99d 100644
--- a/karax/karaxdsl.nim
+++ b/karax/karaxdsl.nim
@@ -25,6 +25,8 @@ proc getName(n: NimNode): string =
       result = getName(n[1]) & "-" & getName(n[2])
     else:
       expectKind(n, nnkIdent)
+  of nnkDotExpr:
+    result = getName(n[0]) & "." & getName(n[1])
   else:
     #echo repr n
     expectKind(n, nnkIdent)

From a07f1c7b8214fa76e4db0fe5762bbc27af831112 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sat, 22 Sep 2018 20:40:00 +0200
Subject: [PATCH 189/264] fixes #72

---
 LICENSE.txt | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 LICENSE.txt

diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..ac49796
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Xored Software, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

From fc0ca22785a97701d7c6c5ef249a0b132eee11e2 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sun, 23 Sep 2018 09:52:22 +0200
Subject: [PATCH 190/264] update karax.nimble for latest Nimble

---
 karax.nimble | 1 +
 1 file changed, 1 insertion(+)

diff --git a/karax.nimble b/karax.nimble
index 743d85b..eabf8e4 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -12,3 +12,4 @@ requires "nim >= 0.16.1"
 skipDirs = @["examples", "experiments", "tests"]
 
 bin = @["karax/tools/karun"]
+installExt = @["nim"]

From 3a2effdf99fbc0d5cb8d7c9f26ac463eef8fadfd Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sun, 23 Sep 2018 09:55:43 +0200
Subject: [PATCH 191/264] fixes readme.rst

---
 readme.rst | 1 +
 1 file changed, 1 insertion(+)

diff --git a/readme.rst b/readme.rst
index 38ae2b5..4045e2b 100644
--- a/readme.rst
+++ b/readme.rst
@@ -298,6 +298,7 @@ disabled until some input fields are validated! This is easily fixed,
 at initialization we have to do:
 
 .. code-block:: nim
+
   setError username, username & " must not be empty"
   setError password, password & " must not be empty"
 

From 1ccd8b1c16a9be7277e28d15103695352feb5a4f Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Fri, 28 Sep 2018 09:24:39 +0200
Subject: [PATCH 192/264] fix #73: echartstest.nim doesnt work (#75)

---
 experiments/echartstest.nim | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/experiments/echartstest.nim b/experiments/echartstest.nim
index 45da71a..950c6ce 100644
--- a/experiments/echartstest.nim
+++ b/experiments/echartstest.nim
@@ -1,5 +1,3 @@
-
-
 import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]
 
 type
@@ -9,18 +7,13 @@ type
 var
   currentView = Customers
 
-setOnHashChange(proc(hash: cstring) =
-  if hash == cstring"#/Products": currentView = Products
-  else: currentView = Customers
-)
-
 type
   EChart* = ref object
 
 proc echartsInit(n: Element): EChart {.importc: "echarts.init".}
 proc setOption(x: EChart; option: JsonNode) {.importcpp.}
 
-proc postRender() =
+proc postRender(data: RouterData) =
   if currentView == Products:
     let myChart = echartsInit(kdom.getElementById("echartSection"))
     # specify chart configuration item and data
@@ -44,7 +37,11 @@ proc postRender() =
     }
     myChart.setOption(option)
 
-proc createDom(): VNode =
+proc createDom(data: RouterData): VNode =
+  let hash = data.hashPart
+  if hash == cstring"#/Products": currentView = Products
+  else: currentView = Customers
+
   result = buildHtml(tdiv):
     ul(class = "tabs"):
       for v in low(Views)..high(Views):

From b16112613a35d5b6bd1d5c05035b70c26f19690f Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Tue, 9 Oct 2018 15:43:08 -0700
Subject: [PATCH 193/264] Update readme.rst (#77)

---
 readme.rst | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index 4045e2b..7881074 100644
--- a/readme.rst
+++ b/readme.rst
@@ -118,6 +118,7 @@ that writes "Hello simulated universe" on a button click:
 .. code-block:: nim
 
   include karax / prelude
+  # alternatively: import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]
 
   var lines: seq[kstring] = @[]
 
@@ -147,7 +148,7 @@ following syntax is also supported:
 .. code-block:: nim
 
   include karax / prelude
-  from future import `=>`
+  from sugar import `=>`
 
   var lines: seq[kstring] = @[]
 

From 16008dbe52c5064514f0ee2174e4a13276e9f1f6 Mon Sep 17 00:00:00 2001
From: Jairo <kidandcat@gmail.com>
Date: Wed, 12 Dec 2018 12:29:41 +0100
Subject: [PATCH 194/264] Watch option (#79)

* Update karun.nim
* Watch option

Add a -w flag to watch for changes in folder and recompile.
---
 karax/tools/karun.nim | 48 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index 5501879..dc1ba44 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -1,7 +1,14 @@
 ## Simple tool to quickly run Karax applications. Generates the HTML
 ## required to run a Karax app and opens it in a browser.
 
-import os, strutils, parseopt, browsers
+import os, 
+  strutils, 
+  parseopt, 
+  browsers, 
+  times, 
+  tables
+  
+
 
 const
   css = """
@@ -26,12 +33,23 @@ proc exec(cmd: string) =
   if os.execShellCmd(cmd) != 0:
     quit "External command failed: " & cmd
 
+proc build(name: string, rest: string, selectedCss: string, run: bool) =
+  echo("Building...")
+  createDir("nimcache")
+  exec("nim js --out:nimcache/" & name & ".js " & rest)
+  let dest = "nimcache" / name & ".html"
+  writeFile(dest, html % [name, selectedCss])
+  if run: openDefaultBrowser(dest)
+
 proc main =
   var op = initOptParser()
   var rest = op.cmdLineRest
   var file = ""
   var run = false
   var selectedCss = ""
+  var watch = false
+  var files: Table[string, Time] = {"path": getLastModificationTime(".")}.toTable
+
   while true:
     op.next()
     case op.kind
@@ -48,15 +66,33 @@ proc main =
       if op.key == "r":
         run = true
         rest = rest.replace("-r ")
+      if op.key == "w":
+        watch = true
+        rest = rest.replace("-w ")
     of cmdArgument: file = op.key
     of cmdEnd: break
 
   if file.len == 0: quit "filename expected"
   let name = file.splitFile.name
-  createDir("nimcache")
-  exec("nim js --out:nimcache/" & name & ".js " & rest)
-  let dest = "nimcache" / name & ".html"
-  writeFile(dest, html % [name, selectedCss])
-  if run: openDefaultBrowser(dest)
+  build(name, rest, selectedCss, run)
+  echo("after build")
+  if watch:
+    # TODO: launch http server
+    while true:
+      sleep(300)
+      for path in walkDirRec("."):
+        if ".git" in path:
+          continue
+        if files.hasKey(path):
+          if files[path] != getLastModificationTime(path):
+            echo("File changed: " & path)
+            build(name, rest, selectedCss, run)
+            files[path] = getLastModificationTime(path)
+        else:
+          files[path] = getLastModificationTime(path)
 
 main()
+
+
+
+

From 068c30c97d1d1b955af3c593da9dca4f13b29c41 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 12 Dec 2018 12:31:14 +0100
Subject: [PATCH 195/264] make examples compile again with a config.nims file

---
 examples/config.nims | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 examples/config.nims

diff --git a/examples/config.nims b/examples/config.nims
new file mode 100644
index 0000000..76ed4d9
--- /dev/null
+++ b/examples/config.nims
@@ -0,0 +1 @@
+--path: ".."

From a90efe752de78f2164203b2862dd089a9d9f445a Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 12 Dec 2018 12:34:35 +0100
Subject: [PATCH 196/264] merged #53 manually; todoapp must ignore empty input
 lines

---
 examples/todoapp/todoapp.nim | 5 +++--
 karax/jstrutils.nim          | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index 9f5e99f..b944de5 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -41,8 +41,9 @@ proc updateEntry(pos: int, content: cstring, completed: bool) =
   markAsCompleted(pos, completed)
 
 proc onTodoEnter(ev: Event; n: VNode) =
-  addEntry(n.value, false)
-  n.value = ""
+  if n.value.strip() != "":
+    addEntry(n.value, false)
+    n.value = ""
 
 proc removeHandler(ev: Event; n: VNode) =
   updateEntry(n.index, cstring(nil), false)
diff --git a/karax/jstrutils.nim b/karax/jstrutils.nim
index a6f2cc9..6b83afb 100644
--- a/karax/jstrutils.nim
+++ b/karax/jstrutils.nim
@@ -4,6 +4,8 @@ proc split*(s, sep: cstring): seq[cstring] {.importcpp, nodecl.}
 
 proc split*(s, sep: cstring; max: int): seq[cstring] {.importcpp, nodecl.}
 
+proc strip*(s: cstring): cstring {.importcpp: "#.trim()", nodecl.}
+
 proc startsWith*(a, b: cstring): bool {.importcpp: "startsWith", nodecl.}
 proc contains*(a, b: cstring): bool {.importcpp: "(#.indexOf(#)>=0)", nodecl.}
 

From 18b5a12d1e0a826f8c60cf338fd38e2d1bc766e5 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 12 Dec 2018 15:02:58 +0100
Subject: [PATCH 197/264] added a new way for native DOM <-> virtual DOM
 interop, see nativenodes.nim example

---
 experiments/config.nims     |  1 +
 experiments/nativenodes.nim | 18 ++++++++++++++++++
 karax/compact.nim           | 20 ++------------------
 karax/karax.nim             | 19 +++++++++++--------
 karax/vdom.nim              |  8 ++++----
 5 files changed, 36 insertions(+), 30 deletions(-)
 create mode 100644 experiments/nativenodes.nim

diff --git a/experiments/config.nims b/experiments/config.nims
index 4071d27..86673aa 100644
--- a/experiments/config.nims
+++ b/experiments/config.nims
@@ -1 +1,2 @@
 --path: "../karax"
+--path: ".."
diff --git a/experiments/nativenodes.nim b/experiments/nativenodes.nim
new file mode 100644
index 0000000..9d255ee
--- /dev/null
+++ b/experiments/nativenodes.nim
@@ -0,0 +1,18 @@
+
+
+include karax / prelude
+import karax / kdom
+
+proc myInput: VNode =
+  result = buildHtml:
+    input()
+
+var inp = vnodeToDom(myInput())
+
+proc myAwesomeComponent(x: Node): VNode =
+  result = dthunk(x)
+
+proc main: VNode =
+  result = myAwesomeComponent(inp)
+
+setRenderer main
diff --git a/karax/compact.nim b/karax/compact.nim
index 7a7664d..3363802 100644
--- a/karax/compact.nim
+++ b/karax/compact.nim
@@ -8,18 +8,15 @@ import macros, vdom, tables, strutils, kbase
 when defined(js):
   var
     vcomponents* = newJDict[cstring, proc(args: seq[VNode]): VNode]()
-    dcomponents* = newJDict[cstring, proc(args: seq[VNode]): Node]()
 else:
   var
     vcomponents* = newTable[kstring, proc(args: seq[VNode]): VNode]()
-    dcomponents* = newTable[kstring, proc(args: seq[VNode]): Node]()
 
 type
   ComponentKind* {.pure.} = enum
     None,
     Tag,
-    VNode,
-    Node
+    VNode
 
 var
   allcomponents {.compileTime.} = initTable[string, ComponentKind]()
@@ -84,10 +81,8 @@ when defined(js):
     var isvirtual = ComponentKind.None
     if rettype == "VNode":
       isvirtual = ComponentKind.VNode
-    elif rettype == "Node":
-      isvirtual = ComponentKind.Node
     else:
-      error "component must return VNode or Node", params[0]
+      error "component must return VNode", params[0]
     let realName = if name.kind == nnkPostfix: name[1] else: name
     let nn = $realName
     n[0] = ident("inner" & nn)
@@ -105,26 +100,15 @@ when defined(js):
       proc pname(args: seq[VNode]): VNode =
         unpackCall
 
-    template dwrapper(pname, unpackCall) {.dirty.} =
-      proc pname(args: seq[VNode]): Node =
-        unpackCall
-
     template vregister(key, val) =
       bind jdict.`[]=`
       `[]=`(vcomponents, kstring(key), val)
 
-    template dregister(key, val) =
-      bind jdict.`[]=`
-      `[]=`(dcomponents, kstring(key), val)
-
     result = newTree(nnkStmtList, n)
 
     if isvirtual == ComponentKind.VNode:
       result.add getAst(vwrapper(newname name, unpackCall))
       result.add getAst(vregister(newLit(nn), realName))
-    else:
-      result.add getAst(dwrapper(newname name, unpackCall))
-      result.add getAst(dregister(newLit(nn), realName))
     allcomponents[nn] = isvirtual
     when defined(debugKaraxDsl):
       echo repr result
diff --git a/karax/karax.nim b/karax/karax.nim
index e353597..2fc8632 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -123,7 +123,7 @@ template attach(n: VNode) =
   n.dom = result
   if n.id != nil: kxi.byId[n.id] = n
 
-proc applyEvents(n: VNode; kxi: KaraxInstance) =
+proc applyEvents(n: VNode) =
   let dest = n.dom
   for i in 0..<len(n.events):
     n.events[i][2] = wrapEvent(dest, n, n.events[i][0], n.events[i][1])
@@ -134,7 +134,7 @@ proc getVNodeById*(id: cstring; kxi: KaraxInstance = kxi): VNode =
   if kxi.byId.contains(id):
     result = kxi.byId[id]
 
-proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
+proc vnodeToDom*(n: VNode; kxi: KaraxInstance = nil): Node =
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
     attach n
@@ -150,7 +150,8 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
     attach n
     return result
   elif n.kind == VNodeKind.dthunk:
-    result = callThunk(dcomponents[n.text], n)
+    result = n.dom #callThunk(dcomponents[n.text], n)
+    assert result != nil
     #n.key = result.key
     attach n
     return result
@@ -182,8 +183,8 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance): Node =
   for k, v in attrs(n):
     if v != nil:
       result.setAttr(k, v)
-  applyEvents(n, kxi)
-  if n == kxi.toFocusV and kxi.toFocus.isNil:
+  applyEvents(n)
+  if kxi != nil and n == kxi.toFocusV and kxi.toFocus.isNil:
     kxi.toFocus = result
   if not n.style.isNil: applyStyle(result, n.style)
 
@@ -194,7 +195,7 @@ proc same(n: VNode, e: Node; nesting = 0): bool =
   elif n.kind == VNodeKind.verbatim:
     result = true
   elif n.kind == VNodeKind.vthunk or n.kind == VNodeKind.dthunk:
-    # we don't check these for now:
+    # we don't check these:
     result = true
   elif toTag[n.kind] == e.nodename:
     result = true
@@ -245,11 +246,13 @@ proc eq(a, b: VNode): EqResult =
     if a.text != b.text:
       when defined(profileKarax): inc reasons[deText]
       return different # similar
-  elif a.kind == VNodeKind.vthunk or a.kind == VNodeKind.dthunk:
+  elif a.kind == VNodeKind.vthunk:
     if a.text != b.text: return different
     if a.len != b.len: return different
     for i in 0..<a.len:
       if eq(a[i], b[i]) == different: return different
+  elif a.kind == VNodeKind.dthunk:
+    return identical
   elif a.kind == VNodeKind.verbatim:
     if a.text != b.text:
       return different
@@ -302,7 +305,7 @@ proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
                else: toEventName[k]
     d.removeEventListener(name, oldNode.events[i][2])
   shallowCopy(oldNode.events, newNode.events)
-  applyEvents(oldNode, kxi)
+  applyEvents(oldNode)
 
 when false:
   proc printV(n: VNode; depth: cstring = "") =
diff --git a/karax/vdom.nim b/karax/vdom.nim
index b5556eb..3dc61d9 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -14,13 +14,13 @@ type
   VNodeKind* {.pure.} = enum
     text = "#text", int = "#int", bool = "#bool",
     vthunk = "#vthunk", dthunk = "#dthunk",
-    component = "#component", verbatim="#verbatim",
+    component = "#component", verbatim = "#verbatim",
 
     html, head, title, base, link, meta, style,
     script, noscript,
     body, section, nav, article, aside,
     h1, h2, h3, h4, h5, h6,
-    header, footer, address, main
+    header, footer, address, main,
 
     p, hr, pre, blockquote, ol, ul, li,
     dl, dt, dd,
@@ -167,8 +167,8 @@ template callThunk*(fn: typed; n: VNode): untyped =
 proc vthunk*(name: kstring; args: varargs[VNode, vn]): VNode =
   VNode(kind: VNodeKind.vthunk, text: name, index: -1, kids: @args)
 
-proc dthunk*(name: kstring; args: varargs[VNode, vn]): VNode =
-  VNode(kind: VNodeKind.dthunk, text: name, index: -1, kids: @args)
+proc dthunk*(dom: Node): VNode =
+  VNode(kind: VNodeKind.dthunk, dom: dom)
 
 proc setEventIfNoConflict(v: VNode; kind: EventKind; handler: EventHandler) =
   assert handler != nil

From a2c2aac6399bf7de0f05137dcc32b64f924f4a78 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 12 Dec 2018 15:04:19 +0100
Subject: [PATCH 198/264] Karax v1 has arrived

---
 karax.nimble | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/karax.nimble b/karax.nimble
index eabf8e4..87ce20f 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,7 +1,7 @@
 # Package
 
-version       = "0.2.0"
-author        = "Xored Software, Inc."
+version       = "1.0.0"
+author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"
 

From c8c7b13d2f5636d245939a0bd5be4ca70618b86e Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 12 Dec 2018 15:18:36 +0100
Subject: [PATCH 199/264] update readme.rst, v1 has arrived

---
 readme.rst | 2 --
 1 file changed, 2 deletions(-)

diff --git a/readme.rst b/readme.rst
index 7881074..481b948 100644
--- a/readme.rst
+++ b/readme.rst
@@ -2,8 +2,6 @@ Karax – Single page applications in Nim |travis|
 ================================================
 
 Karax is a framework for developing single page applications in Nim.
-The API is reasonably stable and version 1 should arrive anytime soon
-now.
 
 To try it out, run::
 

From fc9f9312ef9dabf06479df0ba2b508637100350b Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 31 Jan 2019 16:15:03 +0100
Subject: [PATCH 200/264] improve deprecation message

---
 karax/karax.nim | 2 +-
 karax/kdom.nim  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 2fc8632..82a7ee2 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -713,7 +713,7 @@ proc addEventHandler*(n: VNode; k: EventKind; action: proc();
     if not kxi.surpressRedraws: redraw(kxi)
   addEventListener(n, k, wrapper)
 
-proc setOnHashChange*(action: proc (hashPart: cstring)) {.deprecated.} =
+proc setOnHashChange*(action: proc (hashPart: cstring)) {.deprecated: "use setRenderer instead".} =
   ## Now deprecated, instead pass a callback to ``setRenderer`` that receives
   ## a ``data: RouterData`` parameter.
   proc wrapper() =
diff --git a/karax/kdom.nim b/karax/kdom.nim
index a9b80b2..e6a96fb 100644
--- a/karax/kdom.nim
+++ b/karax/kdom.nim
@@ -438,7 +438,7 @@ type
     key*: cstring
     keyCode*: int
     location*: int
-    
+
   # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
   KeyboardEventKey* {.pure.} = enum
     # Modifier keys
@@ -828,7 +828,7 @@ type
     items*: seq[DataTransferItem]
     types*: seq[cstring]
 
-  DataTransferDropEffect* {.pure.} = enum 
+  DataTransferDropEffect* {.pure.} = enum
     None = "none",
     Copy = "copy",
     Link = "link",
@@ -860,7 +860,7 @@ type
     dataTransfer*: DataTransfer
 
   TouchList* {.importc.} = ref object of RootObj
-    length*: int    
+    length*: int
 
   Touch* = ref TouchObj
   TouchObj {.importc.} = object of RootObj
@@ -1142,7 +1142,7 @@ proc setAttribute*(s: Style, attr, value: cstring, caseSensitive=false)
 proc preventDefault*(ev: Event)
 proc stopImmediatePropagation*(ev: Event)
 proc stopPropagation*(ev: Event)
-    
+
 # KeyboardEvent "methods"
 proc getModifierState*(ev: KeyboardEvent, keyArg: cstring): bool
 

From 2936245d399eecfca81b0cf714e5113cba0724bc Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 31 Jan 2019 16:16:37 +0100
Subject: [PATCH 201/264] add newWebsocket variant that lacks the key

---
 karax.nimble          | 2 +-
 karax/jwebsockets.nim | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index 87ce20f..7da4f93 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "1.0.0"
+version       = "1.1.0"
 author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"
diff --git a/karax/jwebsockets.nim b/karax/jwebsockets.nim
index 2b1412e..7c94da7 100644
--- a/karax/jwebsockets.nim
+++ b/karax/jwebsockets.nim
@@ -11,4 +11,7 @@ type
 proc newWebSocket*(url, key: cstring): WebSocket
   {.importcpp: "new WebSocket(@)".}
 
+proc newWebSocket*(url: cstring): WebSocket
+  {.importcpp: "new WebSocket(@)".}
+
 proc send*(w: WebSocket; data: cstring) {.importcpp.}

From 0118aea50617163b7fe20c8099b8e83ce4790013 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 31 Jan 2019 21:28:31 +0100
Subject: [PATCH 202/264] use stdlib's dom module if possible

---
 karax/kdom.nim      | 1234 +------------------------------------------
 karax/kdom_impl.nim | 1232 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 1238 insertions(+), 1228 deletions(-)
 create mode 100644 karax/kdom_impl.nim

diff --git a/karax/kdom.nim b/karax/kdom.nim
index e6a96fb..782d825 100644
--- a/karax/kdom.nim
+++ b/karax/kdom.nim
@@ -1,1232 +1,10 @@
-#
-#
-#            Nim's Runtime Library
-#        (c) Copyright 2012 Andreas Rumpf
-#
-#    See the file "copying.txt", included in this
-#    distribution, for details about the copyright.
-#
+## Karax -- Single page applications for Nim.
 
-## Declaration of the Document Object Model for the `JavaScript backend
-## <backends.html#the-javascript-target>`_.
+from dom import nil
 
-when not defined(js) and not defined(Nimdoc):
-  {.error: "This module only works on the JavaScript platform".}
-
-type
-  EventTarget* = ref EventTargetObj
-  EventTargetObj {.importc.} = object of RootObj
-    onabort*: proc (event: Event) {.nimcall.}
-    onblur*: proc (event: Event) {.nimcall.}
-    onchange*: proc (event: Event) {.nimcall.}
-    onclick*: proc (event: Event) {.nimcall.}
-    ondblclick*: proc (event: Event) {.nimcall.}
-    onerror*: proc (event: Event) {.nimcall.}
-    onfocus*: proc (event: Event) {.nimcall.}
-    onkeydown*: proc (event: Event) {.nimcall.}
-    onkeypress*: proc (event: Event) {.nimcall.}
-    onkeyup*: proc (event: Event) {.nimcall.}
-    onload*: proc (event: Event) {.nimcall.}
-    onmousedown*: proc (event: Event) {.nimcall.}
-    onmousemove*: proc (event: Event) {.nimcall.}
-    onmouseout*: proc (event: Event) {.nimcall.}
-    onmouseover*: proc (event: Event) {.nimcall.}
-    onmouseup*: proc (event: Event) {.nimcall.}
-    onreset*: proc (event: Event) {.nimcall.}
-    onselect*: proc (event: Event) {.nimcall.}
-    onsubmit*: proc (event: Event) {.nimcall.}
-    onunload*: proc (event: Event) {.nimcall.}
-
-  # https://developer.mozilla.org/en-US/docs/Web/Events
-  DomEvent* {.pure.} = enum
-    Abort = "abort",
-    BeforeInput = "beforeinput",
-    Blur = "blur",
-    Click = "click",
-    CompositionEnd = "compositionend",
-    CompositionStart = "compositionstart",
-    CompositionUpdate = "compositionupdate",
-    DblClick = "dblclick",
-    Error = "error",
-    Focus = "focus",
-    FocusIn = "focusin",
-    FocusOut = "focusout",
-    Input = "input",
-    KeyDown = "keydown",
-    KeyPress = "keypress",
-    KeyUp = "keyup",
-    Load = "load",
-    MouseDown = "mousedown",
-    MouseEnter = "mouseenter",
-    MouseLeave = "mouseleave",
-    MouseMove = "mousemove",
-    MouseOut = "mouseout",
-    MouseOver = "mouseover",
-    MouseUp = "mouseup",
-    Resize = "resize",
-    Scroll = "scroll",
-    Select = "select",
-    Unload = "unload",
-    Wheel = "wheel"
-
-  Window* = ref WindowObj
-  WindowObj {.importc.} = object of EventTargetObj
-    document*: Document
-    event*: Event
-    history*: History
-    location*: Location
-    closed*: bool
-    defaultStatus*: cstring
-    innerHeight*, innerWidth*: int
-    locationbar*: ref LocationBar
-    menubar*: ref MenuBar
-    name*: cstring
-    outerHeight*, outerWidth*: int
-    pageXOffset*, pageYOffset*: int
-    personalbar*: ref PersonalBar
-    scrollbars*: ref ScrollBars
-    statusbar*: ref StatusBar
-    status*: cstring
-    toolbar*: ref ToolBar
-    frames*: seq[Frame]
-    screen*: Screen
-
-  Frame* = ref FrameObj
-  FrameObj {.importc.} = object of WindowObj
-
-  ClassList* = ref ClassListObj
-  ClassListObj {.importc.} = object of RootObj
-
-  NodeType* = enum
-    ElementNode = 1,
-    AttributeNode,
-    TextNode,
-    CDATANode,
-    EntityRefNode,
-    EntityNode,
-    ProcessingInstructionNode,
-    CommentNode,
-    DocumentNode,
-    DocumentTypeNode,
-    DocumentFragmentNode,
-    NotationNode
-
-  Node* = ref NodeObj
-  NodeObj {.importc.} = object of EventTargetObj
-    attributes*: seq[Node]
-    childNodes*: seq[Node]
-    children*: seq[Node]
-    data*: cstring
-    firstChild*: Node
-    lastChild*: Node
-    nextSibling*: Node
-    nodeName*: cstring
-    nodeType*: NodeType
-    nodeValue*: cstring
-    parentNode*: Node
-    previousSibling*: Node
-    innerHTML*: cstring
-    style*: Style
-    when defined(nodejs):
-      id*: cstring
-
-  Document* = ref DocumentObj
-  DocumentObj {.importc.} = object of NodeObj
-    alinkColor*: cstring
-    bgColor*: cstring
-    body*: Element
-    charset*: cstring
-    cookie*: cstring
-    defaultCharset*: cstring
-    fgColor*: cstring
-    head*: Element
-    lastModified*: cstring
-    linkColor*: cstring
-    referrer*: cstring
-    title*: cstring
-    URL*: cstring
-    vlinkColor*: cstring
-    anchors*: seq[AnchorElement]
-    forms*: seq[FormElement]
-    images*: seq[ImageElement]
-    applets*: seq[Element]
-    embeds*: seq[EmbedElement]
-    links*: seq[LinkElement]
-
-  Element* = ref ElementObj
-  ElementObj {.importc.} = object of NodeObj
-    classList*: Classlist
-    checked*: bool
-    defaultChecked*: bool
-    defaultValue*: cstring
-    disabled*: bool
-    form*: FormElement
-    name*: cstring
-    readOnly*: bool
-    options*: seq[OptionElement]
-    selectedOptions*: seq[OptionElement]
-    clientWidth*, clientHeight*: int
-    contentEditable*: string
-    isContentEditable*: bool
-    dir*: string
-    offsetHeight*: int
-    offsetWidth*: int
-    offsetLeft*: int
-    offsetTop*: int
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
-  ValidityState* = ref ValidityStateObj
-  ValidityStateObj {.importc.} = object
-    badInput*: bool
-    customError*: bool
-    patternMismatch*: bool
-    rangeOverflow*: bool
-    rangeUnderflow*: bool
-    stepMismatch*: bool
-    tooLong*: bool
-    tooShort*: bool
-    typeMismatch*: bool
-    valid*: bool
-    valueMissing*: bool
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/Blob
-  Blob* = ref BlobObj
-  BlobObj {.importc.} = object of RootObj
-    size*: int
-    `type`*: cstring
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/File
-  File* = ref FileObj
-  FileObj {.importc.} = object of Blob
-    lastModified*: int
-    name*: cstring
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
-  InputElement* = ref InputElementObj
-  InputElementObj {.importc.} = object of Element
-    # Properties related to the parent form
-    formAction*: cstring
-    formEncType*: cstring
-    formMethod*: cstring
-    formNoValidate*: bool
-    formTarget*: cstring
-
-    # Properties that apply to any type of input element that is not hidden
-    `type`*: cstring
-    autofocus*: bool
-    required*: bool
-    value*: cstring
-    validity*: ValidityState
-    validationMessage*: cstring
-    willValidate*: bool
-
-    # Properties that apply only to elements of type "checkbox" or "radio"
-    indeterminate*: bool
-
-    # Properties that apply only to elements of type "image"
-    alt*: cstring
-    height*: cstring
-    src*: cstring
-    width*: cstring
-
-    # Properties that apply only to elements of type "file"
-    accept*: cstring
-    files*: seq[Blob]
-
-    # Properties that apply only to text/number-containing or elements
-    autocomplete*: cstring
-    maxLength*: int
-    size*: int
-    pattern*: cstring
-    placeholder*: cstring
-    min*: cstring
-    max*: cstring
-    selectionStart*: int
-    selectionEnd*: int
-    selectionDirection*: cstring
-
-    # Properties not yet categorized
-    dirName*: cstring
-    accessKey*: cstring
-    list*: Element
-    multiple*: bool
-    labels*: seq[Element]
-    step*: cstring
-    valueAsDate*: cstring
-    valueAsNumber*: float
-
-  LinkElement* = ref LinkObj
-  LinkObj {.importc.} = object of ElementObj
-    target*: cstring
-    text*: cstring
-    x*: int
-    y*: int
-
-  EmbedElement* = ref EmbedObj
-  EmbedObj {.importc.} = object of ElementObj
-    height*: int
-    hspace*: int
-    src*: cstring
-    width*: int
-    `type`*: cstring
-    vspace*: int
-
-  AnchorElement* = ref AnchorObj
-  AnchorObj {.importc.} = object of ElementObj
-    text*: cstring
-    x*, y*: int
-
-  OptionElement* = ref OptionObj
-  OptionObj {.importc.} = object of ElementObj
-    defaultSelected*: bool
-    selected*: bool
-    selectedIndex*: int
-    text*: cstring
-    value*: cstring
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
-  FormElement* = ref FormObj
-  FormObj {.importc.} = object of ElementObj
-    acceptCharset*: cstring
-    action*: cstring
-    autocomplete*: cstring
-    elements*: seq[Element]
-    encoding*: cstring
-    enctype*: cstring
-    length*: int
-    `method`*: cstring
-    noValidate*: bool
-    target*: cstring
-
-  ImageElement* = ref ImageObj
-  ImageObj {.importc.} = object of ElementObj
-    border*: int
-    complete*: bool
-    height*: int
-    hspace*: int
-    lowsrc*: cstring
-    src*: cstring
-    vspace*: int
-    width*: int
-
-  Style* = ref StyleObj
-  StyleObj {.importc.} = object of RootObj
-    background*: cstring
-    backgroundAttachment*: cstring
-    backgroundColor*: cstring
-    backgroundImage*: cstring
-    backgroundPosition*: cstring
-    backgroundRepeat*: cstring
-    border*: cstring
-    borderBottom*: cstring
-    borderBottomColor*: cstring
-    borderBottomStyle*: cstring
-    borderBottomWidth*: cstring
-    borderColor*: cstring
-    borderLeft*: cstring
-    borderLeftColor*: cstring
-    borderLeftStyle*: cstring
-    borderLeftWidth*: cstring
-    borderRight*: cstring
-    borderRightColor*: cstring
-    borderRightStyle*: cstring
-    borderRightWidth*: cstring
-    borderStyle*: cstring
-    borderTop*: cstring
-    borderTopColor*: cstring
-    borderTopStyle*: cstring
-    borderTopWidth*: cstring
-    borderWidth*: cstring
-    bottom*: cstring
-    captionSide*: cstring
-    clear*: cstring
-    clip*: cstring
-    color*: cstring
-    cursor*: cstring
-    direction*: cstring
-    display*: cstring
-    emptyCells*: cstring
-    cssFloat*: cstring
-    font*: cstring
-    fontFamily*: cstring
-    fontSize*: cstring
-    fontStretch*: cstring
-    fontStyle*: cstring
-    fontVariant*: cstring
-    fontWeight*: cstring
-    height*: cstring
-    left*: cstring
-    letterSpacing*: cstring
-    lineHeight*: cstring
-    listStyle*: cstring
-    listStyleImage*: cstring
-    listStylePosition*: cstring
-    listStyleType*: cstring
-    margin*: cstring
-    marginBottom*: cstring
-    marginLeft*: cstring
-    marginRight*: cstring
-    marginTop*: cstring
-    maxHeight*: cstring
-    maxWidth*: cstring
-    minHeight*: cstring
-    minWidth*: cstring
-    overflow*: cstring
-    padding*: cstring
-    paddingBottom*: cstring
-    paddingLeft*: cstring
-    paddingRight*: cstring
-    paddingTop*: cstring
-    pageBreakAfter*: cstring
-    pageBreakBefore*: cstring
-    pointerEvents*: cstring
-    position*: cstring
-    right*: cstring
-    scrollbar3dLightColor*: cstring
-    scrollbarArrowColor*: cstring
-    scrollbarBaseColor*: cstring
-    scrollbarDarkshadowColor*: cstring
-    scrollbarFaceColor*: cstring
-    scrollbarHighlightColor*: cstring
-    scrollbarShadowColor*: cstring
-    scrollbarTrackColor*: cstring
-    tableLayout*: cstring
-    textAlign*: cstring
-    textDecoration*: cstring
-    textIndent*: cstring
-    textTransform*: cstring
-    transform*: cstring
-    top*: cstring
-    verticalAlign*: cstring
-    visibility*: cstring
-    width*: cstring
-    wordSpacing*: cstring
-    zIndex*: int
-
-  EventPhase* = enum
-    None = 0,
-    CapturingPhase,
-    AtTarget,
-    BubblingPhase
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/Event
-  Event* = ref EventObj
-  EventObj {.importc.} = object of RootObj
-    bubbles*: bool
-    cancelBubble*: bool
-    cancelable*: bool
-    composed*: bool
-    currentTarget*: Node
-    defaultPrevented*: bool
-    eventPhase*: int
-    target*: Node
-    `type`*: cstring
-    isTrusted*: bool
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
-  UIEvent* = ref UIEventObj
-  UIEventObj {.importc.} = object of Event
-    detail*: int64
-    view*: Window
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
-  KeyboardEvent* = ref KeyboardEventObj
-  KeyboardEventObj {.importc.} = object of UIEvent
-    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
-    code*: cstring
-    isComposing*: bool
-    key*: cstring
-    keyCode*: int
-    location*: int
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
-  KeyboardEventKey* {.pure.} = enum
-    # Modifier keys
-    Alt,
-    AltGraph,
-    CapsLock,
-    Control,
-    Fn,
-    FnLock,
-    Hyper,
-    Meta,
-    NumLock,
-    ScrollLock,
-    Shift,
-    Super,
-    Symbol,
-    SymbolLock,
-
-    # Whitespace keys
-    ArrowDown,
-    ArrowLeft,
-    ArrowRight,
-    ArrowUp,
-    End,
-    Home,
-    PageDown,
-    PageUp,
-
-    # Editing keys
-    Backspace,
-    Clear,
-    Copy,
-    CrSel,
-    Cut,
-    Delete,
-    EraseEof,
-    ExSel,
-    Insert,
-    Paste,
-    Redo,
-    Undo,
-
-    # UI keys
-    Accept,
-    Again,
-    Attn,
-    Cancel,
-    ContextMenu,
-    Escape,
-    Execute,
-    Find,
-    Finish,
-    Help,
-    Pause,
-    Play,
-    Props,
-    Select,
-    ZoomIn,
-    ZoomOut,
-
-    # Device keys
-    BrigtnessDown,
-    BrigtnessUp,
-    Eject,
-    LogOff,
-    Power,
-    PowerOff,
-    PrintScreen,
-    Hibernate,
-    Standby,
-    WakeUp,
-
-    # Common IME keys
-    AllCandidates,
-    Alphanumeric,
-    CodeInput,
-    Compose,
-    Convert,
-    Dead,
-    FinalMode,
-    GroupFirst,
-    GroupLast,
-    GroupNext,
-    GroupPrevious,
-    ModeChange,
-    NextCandidate,
-    NonConvert,
-    PreviousCandidate,
-    Process,
-    SingleCandidate,
-
-    # Korean keyboards only
-    HangulMode,
-    HanjaMode,
-    JunjaMode,
-
-    # Japanese keyboards only
-    Eisu,
-    Hankaku,
-    Hiragana,
-    HiraganaKatakana,
-    KanaMode,
-    KanjiMode,
-    Katakana,
-    Romaji,
-    Zenkaku,
-    ZenkakuHanaku,
-
-    # Function keys
-    F1,
-    F2,
-    F3,
-    F4,
-    F5,
-    F6,
-    F7,
-    F8,
-    F9,
-    F10,
-    F11,
-    F12,
-    F13,
-    F14,
-    F15,
-    F16,
-    F17,
-    F18,
-    F19,
-    F20,
-    Soft1,
-    Soft2,
-    Soft3,
-    Soft4,
-
-    # Phone keys
-    AppSwitch,
-    Call,
-    Camera,
-    CameraFocus,
-    EndCall,
-    GoBack,
-    GoHome,
-    HeadsetHook,
-    LastNumberRedial,
-    Notification,
-    MannerMode,
-    VoiceDial,
-
-    # Multimedia keys
-    ChannelDown,
-    ChannelUp,
-    MediaFastForward,
-    MediaPause,
-    MediaPlay,
-    MediaPlayPause,
-    MediaRecord,
-    MediaRewind,
-    MediaStop,
-    MediaTrackNext,
-    MediaTrackPrevious,
-
-    # Audio control keys
-    AudioBalanceLeft,
-    AudioBalanceRight,
-    AudioBassDown,
-    AudioBassBoostDown,
-    AudioBassBoostToggle,
-    AudioBassBoostUp,
-    AudioBassUp,
-    AudioFaderFront,
-    AudioFaderRear,
-    AudioSurroundModeNext,
-    AudioTrebleDown,
-    AudioTrebleUp,
-    AudioVolumeDown,
-    AUdioVolumeMute,
-    AudioVolumeUp,
-    MicrophoneToggle,
-    MicrophoneVolumeDown,
-    MicrophoneVolumeMute,
-    MicrophoneVolumeUp,
-
-    # TV control keys
-    TV,
-    TV3DMode,
-    TVAntennaCable,
-    TVAudioDescription,
-    TVAudioDescriptionMixDown,
-    TVAudioDescriptionMixUp,
-    TVContentsMenu,
-    TVDataService,
-    TVInput,
-    TVInputComponent1,
-    TVInputComponent2,
-    TVInputComposite1,
-    TVInputComposite2,
-    TVInputHDMI1,
-    TVInputHDMI2,
-    TVInputHDMI3,
-    TVInputHDMI4,
-    TVInputVGA1,
-    TVMediaContext,
-    TVNetwork,
-    TVNumberEntry,
-    TVPower,
-    TVRadioService,
-    TVSatellite,
-    TVSatelliteBS,
-    TVSatelliteCS,
-    TVSatelliteToggle,
-    TVTerrestrialAnalog,
-    TVTerrestrialDigital,
-    TVTimer,
-
-    # Media controller keys
-    AVRInput,
-    AVRPower,
-    ColorF0Red,
-    ColorF1Green,
-    ColorF2Yellow,
-    ColorF3Blue,
-    ColorF4Grey,
-    ColorF5Brown,
-    ClosedCaptionToggle,
-    Dimmer,
-    DisplaySwap,
-    DVR,
-    Exit,
-    FavoriteClear0,
-    FavoriteClear1,
-    FavoriteClear2,
-    FavoriteClear3,
-    FavoriteRecall0,
-    FavoriteRecall1,
-    FavoriteRecall2,
-    FavoriteRecall3,
-    FavoriteStore0,
-    FavoriteStore1,
-    FavoriteStore2,
-    FavoriteStore3,
-    Guide,
-    GuideNextDay,
-    GuidePreviousDay,
-    Info,
-    InstantReplay,
-    Link,
-    ListProgram,
-    LiveContent,
-    Lock,
-    MediaApps,
-    MediaAudioTrack,
-    MediaLast,
-    MediaSkipBackward,
-    MediaSkipForward,
-    MediaStepBackward,
-    MediaStepForward,
-    MediaTopMenu,
-    NavigateIn,
-    NavigateNext,
-    NavigateOut,
-    NavigatePrevious,
-    NextFavoriteChannel,
-    NextUserProfile,
-    OnDemand,
-    Pairing,
-    PinPDown,
-    PinPMove,
-    PinPUp,
-    PlaySpeedDown,
-    PlaySpeedReset,
-    PlaySpeedUp,
-    RandomToggle,
-    RcLowBattery,
-    RecordSpeedNext,
-    RfBypass,
-    ScanChannelsToggle,
-    ScreenModeNext,
-    Settings,
-    SplitScreenToggle,
-    STBInput,
-    STBPower,
-    Subtitle,
-    Teletext,
-    VideoModeNext,
-    Wink,
-    ZoomToggle,
-
-    # Speech recognition keys
-    SpeechCorrectionList,
-    SpeechInputToggle,
-
-    # Document keys
-    Close,
-    New,
-    Open,
-    Print,
-    Save,
-    SpellCheck,
-    MailForward,
-    MailReply,
-    MailSend,
-
-    # Application selector keys
-    LaunchCalculator,
-    LaunchCalendar,
-    LaunchContacts,
-    LaunchMail,
-    LaunchMediaPlayer,
-    LaunchMusicPlayer,
-    LaunchMyComputer,
-    LaunchPhone,
-    LaunchScreenSaver,
-    LaunchSpreadsheet,
-    LaunchWebBrowser,
-    LaunchWebCam,
-    LaunchWordProcessor,
-    LaunchApplication1,
-    LaunchApplication2,
-    LaunchApplication3,
-    LaunchApplication4,
-    LaunchApplication5,
-    LaunchApplication6,
-    LaunchApplication7,
-    LaunchApplication8,
-    LaunchApplication9,
-    LaunchApplication10,
-    LaunchApplication11,
-    LaunchApplication12,
-    LaunchApplication13,
-    LaunchApplication14,
-    LaunchApplication15,
-    LaunchApplication16,
-
-    # Browser control keys
-    BrowserBack,
-    BrowserFavorites,
-    BrowserForward,
-    BrowserHome,
-    BrowserRefresh,
-    BrowserSearch,
-    BrowserStop,
-
-    # Numeric keypad keys
-    Key11,
-    Key12,
-    Separator
-
-  MouseButtons* = enum
-    NoButton = 0,
-    PrimaryButton = 1,
-    SecondaryButton = 2,
-    AuxilaryButton = 4,
-    FourthButton = 8,
-    FifthButton = 16
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
-  MouseEvent* = ref MouseEventObj
-  MouseEventObj {.importc.} = object of UIEvent
-    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
-    button*: int
-    buttons*: int
-    clientX*, clientY*: int
-    movementX*, movementY*: int
-    offsetX*, offsetY*: int
-    pageX*, pageY*: int
-    relatedTarget*: EventTarget
-    #region*: cstring
-    screenX*, screenY*: int
-    x*, y*: int
-
-  DataTransferItemKind* {.pure.} = enum
-    File = "file",
-    String = "string"
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
-  DataTransferItem* = ref DataTransferItemObj
-  DataTransferItemObj {.importc.} = object of RootObj
-    kind*: cstring
-    `type`*: cstring
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
-  DataTransfer* = ref DataTransferObj
-  DataTransferObj {.importc.} = object of RootObj
-    dropEffect*: cstring
-    effectAllowed*: cstring
-    files*: seq[Element]
-    items*: seq[DataTransferItem]
-    types*: seq[cstring]
-
-  DataTransferDropEffect* {.pure.} = enum
-    None = "none",
-    Copy = "copy",
-    Link = "link",
-    Move = "move"
-
-  DataTransferEffectAllowed* {.pure.} = enum
-    None = "none",
-    Copy = "copy",
-    CopyLink = "copyLink",
-    CopyMove = "copyMove",
-    Link = "link",
-    LinkMove = "linkMove",
-    Move = "move",
-    All = "all",
-    Uninitialized = "uninitialized"
-
-  DragEventTypes* = enum
-    Drag = "drag",
-    DragEnd = "dragend",
-    DragEnter = "dragenter",
-    DragExit = "dragexit",
-    DragLeave = "dragleave",
-    DragOver = "dragover",
-    DragStart = "dragstart",
-    Drop = "drop"
-
-  # https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
-  DragEvent* {.importc.} = object of MouseEvent
-    dataTransfer*: DataTransfer
-
-  TouchList* {.importc.} = ref object of RootObj
-    length*: int
-
-  Touch* = ref TouchObj
-  TouchObj {.importc.} = object of RootObj
-    identifier*: int
-    screenX*, screenY*, clientX*, clientY*, pageX*, pageY*: int
-    target*: Element
-    radiusX*, radiusY*: int
-    rotationAngle*: int
-    force*: float
-
-  TouchEvent* = ref TouchEventObj
-  TouchEventObj {.importc.} = object of UIEvent
-    changedTouches*, targetTouches*, touches*: seq[Touch]
-
-  Location* = ref LocationObj
-  LocationObj {.importc.} = object of RootObj
-    hash*: cstring
-    host*: cstring
-    hostname*: cstring
-    href*: cstring
-    pathname*: cstring
-    port*: cstring
-    protocol*: cstring
-    search*: cstring
-
-  History* = ref HistoryObj
-  HistoryObj {.importc.} = object of RootObj
-    length*: int
-
-  Navigator* = ref NavigatorObj
-  NavigatorObj {.importc.} = object of RootObj
-    appCodeName*: cstring
-    appName*: cstring
-    appVersion*: cstring
-    cookieEnabled*: bool
-    language*: cstring
-    platform*: cstring
-    userAgent*: cstring
-    mimeTypes*: seq[ref MimeType]
-
-  Plugin* {.importc.} = object of RootObj
-    description*: cstring
-    filename*: cstring
-    name*: cstring
-
-  MimeType* {.importc.} = object of RootObj
-    description*: cstring
-    enabledPlugin*: ref Plugin
-    suffixes*: seq[cstring]
-    `type`*: cstring
-
-  LocationBar* {.importc.} = object of RootObj
-    visible*: bool
-  MenuBar* = LocationBar
-  PersonalBar* = LocationBar
-  ScrollBars* = LocationBar
-  ToolBar* = LocationBar
-  StatusBar* = LocationBar
-
-  Screen = ref ScreenObj
-  ScreenObj {.importc.} = object of RootObj
-    availHeight*: int
-    availWidth*: int
-    colorDepth*: int
-    height*: int
-    pixelDepth*: int
-    width*: int
-
-  TimeOut* {.importc.} = ref object of RootObj
-  Interval* {.importc.} = object of RootObj
-
-  AddEventListenerOptions* = object
-    capture*: bool
-    once*: bool
-    passive*: bool
-
-when defined(nodejs):
-  # we provide a dummy DOM for nodejs for testing purposes
-  proc len*(x: Node): int = x.childNodes.len
-  proc `[]`*(x: Node; idx: int): Element =
-    assert idx >= 0 and idx < x.childNodes.len
-    result = cast[Element](x.childNodes[idx])
-
-  var document* = Document(nodeType: DocumentNode)
-
-  proc getElem(x: Element; id: cstring): Element =
-    if x.id == id: return x
-    for i in 0..<x.len:
-      result = getElem(x[i], id)
-      if result != nil: return result
-
-  proc getElementById*(doc: Document; id: cstring): Element =
-    getElem(doc.body, id)
-  proc getElementById*(id: cstring): Element = document.getElementById(id)
-
-  proc appendChild*(parent, n: Node) =
-    n.parentNode = parent
-    parent.childNodes.add n
-
-  proc replaceChild*(parent, newNode, oldNode: Node) =
-    newNode.parentNode = parent
-    oldNode.parentNode = nil
-    var i = 0
-    while i < parent.len:
-      if Node(parent[i]) == oldNode:
-        parent.childNodes[i] = newNode
-        return
-      inc i
-    doAssert false, "old node not in node list"
-
-  proc removeChild*(parent, child: Node) =
-    child.parentNode = nil
-    var i = 0
-    while i < parent.len:
-      if Node(parent[i]) == child:
-        parent.childNodes.delete(i)
-        return
-      inc i
-    doAssert false, "old node not in node list"
-
-  proc insertBefore*(parent, newNode, before: Node) =
-    appendChild(parent, newNode)
-    var i = 0
-    while i < parent.len-1:
-      if Node(parent[i]) == before:
-        for j in countdown(parent.len-1, i-1):
-          parent.childNodes[j] = parent.childNodes[j-1]
-        parent.childNodes[i-1] = newNode
-        return
-      inc i
-    #doAssert false, "before not in node list"
-
-  proc createElement*(d: Document, identifier: cstring): Element =
-    new(result)
-    result.nodeName = identifier
-    result.nodeType = NodeType.ElementNode
-
-  proc createTextNode*(d: Document, identifier: cstring): Node =
-    new(result)
-    result.nodeName = "#text"
-    result.nodeValue = identifier
-    result.nodeType = NodeType.TextNode
+when not declared(dom.DomApiVersion):
+  include kdom_impl
 
 else:
-  proc len*(x: Node): int {.importcpp: "#.childNodes.length".}
-  proc `[]`*(x: Node; idx: int): Element {.importcpp: "#.childNodes[#]".}
-  proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
-  proc appendChild*(n, child: Node) {.importcpp.}
-  proc removeChild*(n, child: Node) {.importcpp.}
-  proc replaceChild*(n, newNode, oldNode: Node) {.importcpp.}
-  proc insertBefore*(n, newNode, before: Node) {.importcpp.}
-  proc getElementById*(d: Document, id: cstring): Element {.importcpp.}
-  proc createElement*(d: Document, identifier: cstring): Element {.importcpp.}
-  proc createTextNode*(d: Document, identifier: cstring): Node {.importcpp.}
-
-proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
-proc clearTimeout*(t: Timeout) {.importc, nodecl.}
-
-{.push importcpp.}
-
-# EventTarget "methods"
-proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), useCapture: bool = false)
-proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), options: AddEventListenerOptions)
-proc removeEventListener*(et: EventTarget; ev: cstring; cb: proc(ev: Event))
-
-# Window "methods"
-proc alert*(w: Window, msg: cstring)
-proc back*(w: Window)
-proc blur*(w: Window)
-proc captureEvents*(w: Window, eventMask: int) {.deprecated.}
-proc clearInterval*(w: Window, interval: ref Interval)
-proc clearTimeout*(w: Window, timeout: ref TimeOut)
-proc close*(w: Window)
-proc confirm*(w: Window, msg: cstring): bool
-proc disableExternalCapture*(w: Window)
-proc enableExternalCapture*(w: Window)
-proc find*(w: Window, text: cstring, caseSensitive = false,
-           backwards = false)
-proc focus*(w: Window)
-proc forward*(w: Window)
-proc getComputedStyle*(w: Window, e: Node, pe:Node = nil): Style
-proc handleEvent*(w: Window, e: Event)
-proc home*(w: Window)
-proc moveBy*(w: Window, x, y: int)
-proc moveTo*(w: Window, x, y: int)
-proc open*(w: Window, uri, windowname: cstring,
-           properties: cstring = nil): Window
-proc print*(w: Window)
-proc prompt*(w: Window, text, default: cstring): cstring
-proc releaseEvents*(w: Window, eventMask: int) {.deprecated.}
-proc resizeBy*(w: Window, x, y: int)
-proc resizeTo*(w: Window, x, y: int)
-proc routeEvent*(w: Window, event: Event)
-proc scrollBy*(w: Window, x, y: int)
-proc scrollTo*(w: Window, x, y: int)
-proc setInterval*(w: Window, code: cstring, pause: int): ref Interval
-proc setInterval*(w: Window, function: proc (), pause: int): ref Interval
-proc setTimeout*(w: Window, code: cstring, pause: int): ref TimeOut
-proc setTimeout*(w: Window, function: proc (), pause: int): ref Interval
-proc stop*(w: Window)
-proc requestAnimationFrame*(w: Window, function: proc (time: float)): int
-proc cancelAnimationFrame*(w: Window, id: int)
-
-# Node "methods"
-proc appendData*(n: Node, data: cstring)
-proc cloneNode*(n: Node, copyContent: bool): Node
-proc deleteData*(n: Node, start, len: int)
-proc focus*(e: Node)
-proc getAttribute*(n: Node, attr: cstring): cstring
-proc getAttributeNode*(n: Node, attr: cstring): Node
-proc hasChildNodes*(n: Node): bool
-proc insertData*(n: Node, position: int, data: cstring)
-proc removeAttribute*(n: Node, attr: cstring)
-proc removeAttributeNode*(n, attr: Node)
-proc replaceData*(n: Node, start, len: int, text: cstring)
-proc scrollIntoView*(n: Node)
-proc setAttribute*(n: Node, name, value: cstring)
-proc setAttributeNode*(n: Node, attr: Node)
-
-# Document "methods"
-proc captureEvents*(d: Document, eventMask: int) {.deprecated.}
-proc createAttribute*(d: Document, identifier: cstring): Node
-proc getElementsByName*(d: Document, name: cstring): seq[Element]
-proc getElementsByTagName*(d: Document, name: cstring): seq[Element]
-proc getElementsByClassName*(d: Document, name: cstring): seq[Element]
-proc getSelection*(d: Document): cstring
-proc handleEvent*(d: Document, event: Event)
-proc open*(d: Document)
-proc releaseEvents*(d: Document, eventMask: int) {.deprecated.}
-proc routeEvent*(d: Document, event: Event)
-proc write*(d: Document, text: cstring)
-proc writeln*(d: Document, text: cstring)
-proc querySelector*(d: Document, selectors: cstring): Element
-proc querySelectorAll*(d: Document, selectors: cstring): seq[Element]
-
-# Element "methods"
-proc blur*(e: Element)
-proc click*(e: Element)
-proc focus*(e: Element)
-proc handleEvent*(e: Element, event: Event)
-proc select*(e: Element)
-proc getElementsByTagName*(e: Element, name: cstring): seq[Element]
-proc getElementsByClassName*(e: Element, name: cstring): seq[Element]
-
-# FormElement "methods"
-proc reset*(f: FormElement)
-proc submit*(f: FormElement)
-proc checkValidity*(e: FormElement): bool
-proc reportValidity*(e: FormElement): bool
-
-# EmbedElement "methods"
-proc play*(e: EmbedElement)
-proc stop*(e: EmbedElement)
-
-# Location "methods"
-proc reload*(loc: Location)
-proc replace*(loc: Location, s: cstring)
-
-# History "methods"
-proc back*(h: History)
-proc forward*(h: History)
-proc go*(h: History, pagesToJump: int)
-
-# Navigator "methods"
-proc javaEnabled*(h: Navigator): bool
-
-# ClassList "methods"
-proc add*(c: ClassList, class: cstring)
-proc remove*(c: ClassList, class: cstring)
-proc contains*(c: ClassList, class: cstring): bool
-proc toggle*(c: ClassList, class: cstring)
-
-# Style "methods"
-proc getAttribute*(s: Style, attr: cstring, caseSensitive=false): cstring
-proc removeAttribute*(s: Style, attr: cstring, caseSensitive=false)
-proc setAttribute*(s: Style, attr, value: cstring, caseSensitive=false)
-
-# Event "methods"
-proc preventDefault*(ev: Event)
-proc stopImmediatePropagation*(ev: Event)
-proc stopPropagation*(ev: Event)
-
-# KeyboardEvent "methods"
-proc getModifierState*(ev: KeyboardEvent, keyArg: cstring): bool
-
-# MouseEvent "methods"
-proc getModifierState*(ev: MouseEvent, keyArg: cstring): bool
-
-# TouchEvent "methods"
-proc identifiedTouch*(list: TouchList): Touch
-proc item*(list: TouchList, i: int): Touch
-
-# DataTransfer "methods"
-proc clearData*(dt: DataTransfer, format: cstring)
-proc getData*(dt: DataTransfer, format: cstring): cstring
-proc setData*(dt: DataTransfer, format: cstring, data: cstring)
-proc setDragImage*(dt: DataTransfer, img: Element, xOffset: int64, yOffset: int64)
-
-# DataTransferItem "methods"
-proc getAsFile*(dti: DataTransferItem): File
-
-# InputElement "methods"
-proc setSelectionRange*(e: InputElement, selectionStart: int, selectionEnd: int, selectionDirection: cstring = "none")
-proc setRangeText*(e: InputElement, replacement: cstring, startindex: int = 0, endindex: int = 0, selectionMode: cstring = "preserve")
-proc setCustomValidity*(e: InputElement, error: cstring)
-proc checkValidity*(e: InputElement): bool
-
-# Blob "methods"
-proc slice*(e: Blob, startindex: int = 0, endindex: int = e.size, contentType: cstring = "")
-
-{.pop.}
-
-proc setAttr*(n: Node; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
-
-var
-  window* {.importc, nodecl.}: Window
-  navigator* {.importc, nodecl.}: Navigator
-  screen* {.importc, nodecl.}: Screen
-
-when not defined(nodejs):
-  var document* {.importc, nodecl.}: Document
-
-proc decodeURI*(uri: cstring): cstring {.importc, nodecl.}
-proc encodeURI*(uri: cstring): cstring {.importc, nodecl.}
-
-proc escape*(uri: cstring): cstring {.importc, nodecl.}
-proc unescape*(uri: cstring): cstring {.importc, nodecl.}
-
-proc decodeURIComponent*(uri: cstring): cstring {.importc, nodecl.}
-proc encodeURIComponent*(uri: cstring): cstring {.importc, nodecl.}
-proc isFinite*(x: BiggestFloat): bool {.importc, nodecl.}
-proc isNaN*(x: BiggestFloat): bool {.importc, nodecl.}
-
-
-proc id*(n: Node): cstring {.importcpp: "#.id", nodecl.}
-proc `id=`*(n: Node; x: cstring) {.importcpp: "#.id = #", nodecl.}
-proc class*(n: Node): cstring {.importcpp: "#.className", nodecl.}
-proc `class=`*(n: Node; v: cstring) {.importcpp: "#.className = #", nodecl.}
-
-proc value*(n: Node): cstring {.importcpp: "#.value", nodecl.}
-proc `value=`*(n: Node; v: cstring) {.importcpp: "#.value = #", nodecl.}
-
-proc `disabled=`*(n: Node; v: bool) {.importcpp: "#.disabled = #", nodecl.}
-
-proc getElementsByClass*(n: Node; name: cstring): seq[Node] {.
-  importcpp: "#.getElementsByClassName(#)", nodecl.}
-
-
-type
-  BoundingRect* {.importc.} = object
-    top*, bottom*, left*, right*, x*, y*, width*, height*: float
-
-proc getBoundingClientRect*(e: Node): BoundingRect {.
-  importcpp: "getBoundingClientRect", nodecl.}
-proc clientHeight*(): int {.
-  importcpp: "(window.innerHeight || document.documentElement.clientHeight)@", nodecl.}
-proc clientWidth*(): int {.
-  importcpp: "(window.innerWidth || document.documentElement.clientWidth)@", nodecl.}
-
-proc inViewport*(el: Node): bool =
-  let rect = el.getBoundingClientRect()
-  result = rect.top >= 0 and rect.left >= 0 and
-           rect.bottom <= clientHeight().float and
-           rect.right <= clientWidth().float
-
-proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
-proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
-proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}
-proc offsetLeft*(e: Node): int {.importcpp: "#.offsetLeft", nodecl.}
+  import dom
+  export dom
diff --git a/karax/kdom_impl.nim b/karax/kdom_impl.nim
new file mode 100644
index 0000000..e6a96fb
--- /dev/null
+++ b/karax/kdom_impl.nim
@@ -0,0 +1,1232 @@
+#
+#
+#            Nim's Runtime Library
+#        (c) Copyright 2012 Andreas Rumpf
+#
+#    See the file "copying.txt", included in this
+#    distribution, for details about the copyright.
+#
+
+## Declaration of the Document Object Model for the `JavaScript backend
+## <backends.html#the-javascript-target>`_.
+
+when not defined(js) and not defined(Nimdoc):
+  {.error: "This module only works on the JavaScript platform".}
+
+type
+  EventTarget* = ref EventTargetObj
+  EventTargetObj {.importc.} = object of RootObj
+    onabort*: proc (event: Event) {.nimcall.}
+    onblur*: proc (event: Event) {.nimcall.}
+    onchange*: proc (event: Event) {.nimcall.}
+    onclick*: proc (event: Event) {.nimcall.}
+    ondblclick*: proc (event: Event) {.nimcall.}
+    onerror*: proc (event: Event) {.nimcall.}
+    onfocus*: proc (event: Event) {.nimcall.}
+    onkeydown*: proc (event: Event) {.nimcall.}
+    onkeypress*: proc (event: Event) {.nimcall.}
+    onkeyup*: proc (event: Event) {.nimcall.}
+    onload*: proc (event: Event) {.nimcall.}
+    onmousedown*: proc (event: Event) {.nimcall.}
+    onmousemove*: proc (event: Event) {.nimcall.}
+    onmouseout*: proc (event: Event) {.nimcall.}
+    onmouseover*: proc (event: Event) {.nimcall.}
+    onmouseup*: proc (event: Event) {.nimcall.}
+    onreset*: proc (event: Event) {.nimcall.}
+    onselect*: proc (event: Event) {.nimcall.}
+    onsubmit*: proc (event: Event) {.nimcall.}
+    onunload*: proc (event: Event) {.nimcall.}
+
+  # https://developer.mozilla.org/en-US/docs/Web/Events
+  DomEvent* {.pure.} = enum
+    Abort = "abort",
+    BeforeInput = "beforeinput",
+    Blur = "blur",
+    Click = "click",
+    CompositionEnd = "compositionend",
+    CompositionStart = "compositionstart",
+    CompositionUpdate = "compositionupdate",
+    DblClick = "dblclick",
+    Error = "error",
+    Focus = "focus",
+    FocusIn = "focusin",
+    FocusOut = "focusout",
+    Input = "input",
+    KeyDown = "keydown",
+    KeyPress = "keypress",
+    KeyUp = "keyup",
+    Load = "load",
+    MouseDown = "mousedown",
+    MouseEnter = "mouseenter",
+    MouseLeave = "mouseleave",
+    MouseMove = "mousemove",
+    MouseOut = "mouseout",
+    MouseOver = "mouseover",
+    MouseUp = "mouseup",
+    Resize = "resize",
+    Scroll = "scroll",
+    Select = "select",
+    Unload = "unload",
+    Wheel = "wheel"
+
+  Window* = ref WindowObj
+  WindowObj {.importc.} = object of EventTargetObj
+    document*: Document
+    event*: Event
+    history*: History
+    location*: Location
+    closed*: bool
+    defaultStatus*: cstring
+    innerHeight*, innerWidth*: int
+    locationbar*: ref LocationBar
+    menubar*: ref MenuBar
+    name*: cstring
+    outerHeight*, outerWidth*: int
+    pageXOffset*, pageYOffset*: int
+    personalbar*: ref PersonalBar
+    scrollbars*: ref ScrollBars
+    statusbar*: ref StatusBar
+    status*: cstring
+    toolbar*: ref ToolBar
+    frames*: seq[Frame]
+    screen*: Screen
+
+  Frame* = ref FrameObj
+  FrameObj {.importc.} = object of WindowObj
+
+  ClassList* = ref ClassListObj
+  ClassListObj {.importc.} = object of RootObj
+
+  NodeType* = enum
+    ElementNode = 1,
+    AttributeNode,
+    TextNode,
+    CDATANode,
+    EntityRefNode,
+    EntityNode,
+    ProcessingInstructionNode,
+    CommentNode,
+    DocumentNode,
+    DocumentTypeNode,
+    DocumentFragmentNode,
+    NotationNode
+
+  Node* = ref NodeObj
+  NodeObj {.importc.} = object of EventTargetObj
+    attributes*: seq[Node]
+    childNodes*: seq[Node]
+    children*: seq[Node]
+    data*: cstring
+    firstChild*: Node
+    lastChild*: Node
+    nextSibling*: Node
+    nodeName*: cstring
+    nodeType*: NodeType
+    nodeValue*: cstring
+    parentNode*: Node
+    previousSibling*: Node
+    innerHTML*: cstring
+    style*: Style
+    when defined(nodejs):
+      id*: cstring
+
+  Document* = ref DocumentObj
+  DocumentObj {.importc.} = object of NodeObj
+    alinkColor*: cstring
+    bgColor*: cstring
+    body*: Element
+    charset*: cstring
+    cookie*: cstring
+    defaultCharset*: cstring
+    fgColor*: cstring
+    head*: Element
+    lastModified*: cstring
+    linkColor*: cstring
+    referrer*: cstring
+    title*: cstring
+    URL*: cstring
+    vlinkColor*: cstring
+    anchors*: seq[AnchorElement]
+    forms*: seq[FormElement]
+    images*: seq[ImageElement]
+    applets*: seq[Element]
+    embeds*: seq[EmbedElement]
+    links*: seq[LinkElement]
+
+  Element* = ref ElementObj
+  ElementObj {.importc.} = object of NodeObj
+    classList*: Classlist
+    checked*: bool
+    defaultChecked*: bool
+    defaultValue*: cstring
+    disabled*: bool
+    form*: FormElement
+    name*: cstring
+    readOnly*: bool
+    options*: seq[OptionElement]
+    selectedOptions*: seq[OptionElement]
+    clientWidth*, clientHeight*: int
+    contentEditable*: string
+    isContentEditable*: bool
+    dir*: string
+    offsetHeight*: int
+    offsetWidth*: int
+    offsetLeft*: int
+    offsetTop*: int
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+  ValidityState* = ref ValidityStateObj
+  ValidityStateObj {.importc.} = object
+    badInput*: bool
+    customError*: bool
+    patternMismatch*: bool
+    rangeOverflow*: bool
+    rangeUnderflow*: bool
+    stepMismatch*: bool
+    tooLong*: bool
+    tooShort*: bool
+    typeMismatch*: bool
+    valid*: bool
+    valueMissing*: bool
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/Blob
+  Blob* = ref BlobObj
+  BlobObj {.importc.} = object of RootObj
+    size*: int
+    `type`*: cstring
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/File
+  File* = ref FileObj
+  FileObj {.importc.} = object of Blob
+    lastModified*: int
+    name*: cstring
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
+  InputElement* = ref InputElementObj
+  InputElementObj {.importc.} = object of Element
+    # Properties related to the parent form
+    formAction*: cstring
+    formEncType*: cstring
+    formMethod*: cstring
+    formNoValidate*: bool
+    formTarget*: cstring
+
+    # Properties that apply to any type of input element that is not hidden
+    `type`*: cstring
+    autofocus*: bool
+    required*: bool
+    value*: cstring
+    validity*: ValidityState
+    validationMessage*: cstring
+    willValidate*: bool
+
+    # Properties that apply only to elements of type "checkbox" or "radio"
+    indeterminate*: bool
+
+    # Properties that apply only to elements of type "image"
+    alt*: cstring
+    height*: cstring
+    src*: cstring
+    width*: cstring
+
+    # Properties that apply only to elements of type "file"
+    accept*: cstring
+    files*: seq[Blob]
+
+    # Properties that apply only to text/number-containing or elements
+    autocomplete*: cstring
+    maxLength*: int
+    size*: int
+    pattern*: cstring
+    placeholder*: cstring
+    min*: cstring
+    max*: cstring
+    selectionStart*: int
+    selectionEnd*: int
+    selectionDirection*: cstring
+
+    # Properties not yet categorized
+    dirName*: cstring
+    accessKey*: cstring
+    list*: Element
+    multiple*: bool
+    labels*: seq[Element]
+    step*: cstring
+    valueAsDate*: cstring
+    valueAsNumber*: float
+
+  LinkElement* = ref LinkObj
+  LinkObj {.importc.} = object of ElementObj
+    target*: cstring
+    text*: cstring
+    x*: int
+    y*: int
+
+  EmbedElement* = ref EmbedObj
+  EmbedObj {.importc.} = object of ElementObj
+    height*: int
+    hspace*: int
+    src*: cstring
+    width*: int
+    `type`*: cstring
+    vspace*: int
+
+  AnchorElement* = ref AnchorObj
+  AnchorObj {.importc.} = object of ElementObj
+    text*: cstring
+    x*, y*: int
+
+  OptionElement* = ref OptionObj
+  OptionObj {.importc.} = object of ElementObj
+    defaultSelected*: bool
+    selected*: bool
+    selectedIndex*: int
+    text*: cstring
+    value*: cstring
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
+  FormElement* = ref FormObj
+  FormObj {.importc.} = object of ElementObj
+    acceptCharset*: cstring
+    action*: cstring
+    autocomplete*: cstring
+    elements*: seq[Element]
+    encoding*: cstring
+    enctype*: cstring
+    length*: int
+    `method`*: cstring
+    noValidate*: bool
+    target*: cstring
+
+  ImageElement* = ref ImageObj
+  ImageObj {.importc.} = object of ElementObj
+    border*: int
+    complete*: bool
+    height*: int
+    hspace*: int
+    lowsrc*: cstring
+    src*: cstring
+    vspace*: int
+    width*: int
+
+  Style* = ref StyleObj
+  StyleObj {.importc.} = object of RootObj
+    background*: cstring
+    backgroundAttachment*: cstring
+    backgroundColor*: cstring
+    backgroundImage*: cstring
+    backgroundPosition*: cstring
+    backgroundRepeat*: cstring
+    border*: cstring
+    borderBottom*: cstring
+    borderBottomColor*: cstring
+    borderBottomStyle*: cstring
+    borderBottomWidth*: cstring
+    borderColor*: cstring
+    borderLeft*: cstring
+    borderLeftColor*: cstring
+    borderLeftStyle*: cstring
+    borderLeftWidth*: cstring
+    borderRight*: cstring
+    borderRightColor*: cstring
+    borderRightStyle*: cstring
+    borderRightWidth*: cstring
+    borderStyle*: cstring
+    borderTop*: cstring
+    borderTopColor*: cstring
+    borderTopStyle*: cstring
+    borderTopWidth*: cstring
+    borderWidth*: cstring
+    bottom*: cstring
+    captionSide*: cstring
+    clear*: cstring
+    clip*: cstring
+    color*: cstring
+    cursor*: cstring
+    direction*: cstring
+    display*: cstring
+    emptyCells*: cstring
+    cssFloat*: cstring
+    font*: cstring
+    fontFamily*: cstring
+    fontSize*: cstring
+    fontStretch*: cstring
+    fontStyle*: cstring
+    fontVariant*: cstring
+    fontWeight*: cstring
+    height*: cstring
+    left*: cstring
+    letterSpacing*: cstring
+    lineHeight*: cstring
+    listStyle*: cstring
+    listStyleImage*: cstring
+    listStylePosition*: cstring
+    listStyleType*: cstring
+    margin*: cstring
+    marginBottom*: cstring
+    marginLeft*: cstring
+    marginRight*: cstring
+    marginTop*: cstring
+    maxHeight*: cstring
+    maxWidth*: cstring
+    minHeight*: cstring
+    minWidth*: cstring
+    overflow*: cstring
+    padding*: cstring
+    paddingBottom*: cstring
+    paddingLeft*: cstring
+    paddingRight*: cstring
+    paddingTop*: cstring
+    pageBreakAfter*: cstring
+    pageBreakBefore*: cstring
+    pointerEvents*: cstring
+    position*: cstring
+    right*: cstring
+    scrollbar3dLightColor*: cstring
+    scrollbarArrowColor*: cstring
+    scrollbarBaseColor*: cstring
+    scrollbarDarkshadowColor*: cstring
+    scrollbarFaceColor*: cstring
+    scrollbarHighlightColor*: cstring
+    scrollbarShadowColor*: cstring
+    scrollbarTrackColor*: cstring
+    tableLayout*: cstring
+    textAlign*: cstring
+    textDecoration*: cstring
+    textIndent*: cstring
+    textTransform*: cstring
+    transform*: cstring
+    top*: cstring
+    verticalAlign*: cstring
+    visibility*: cstring
+    width*: cstring
+    wordSpacing*: cstring
+    zIndex*: int
+
+  EventPhase* = enum
+    None = 0,
+    CapturingPhase,
+    AtTarget,
+    BubblingPhase
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/Event
+  Event* = ref EventObj
+  EventObj {.importc.} = object of RootObj
+    bubbles*: bool
+    cancelBubble*: bool
+    cancelable*: bool
+    composed*: bool
+    currentTarget*: Node
+    defaultPrevented*: bool
+    eventPhase*: int
+    target*: Node
+    `type`*: cstring
+    isTrusted*: bool
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
+  UIEvent* = ref UIEventObj
+  UIEventObj {.importc.} = object of Event
+    detail*: int64
+    view*: Window
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
+  KeyboardEvent* = ref KeyboardEventObj
+  KeyboardEventObj {.importc.} = object of UIEvent
+    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
+    code*: cstring
+    isComposing*: bool
+    key*: cstring
+    keyCode*: int
+    location*: int
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
+  KeyboardEventKey* {.pure.} = enum
+    # Modifier keys
+    Alt,
+    AltGraph,
+    CapsLock,
+    Control,
+    Fn,
+    FnLock,
+    Hyper,
+    Meta,
+    NumLock,
+    ScrollLock,
+    Shift,
+    Super,
+    Symbol,
+    SymbolLock,
+
+    # Whitespace keys
+    ArrowDown,
+    ArrowLeft,
+    ArrowRight,
+    ArrowUp,
+    End,
+    Home,
+    PageDown,
+    PageUp,
+
+    # Editing keys
+    Backspace,
+    Clear,
+    Copy,
+    CrSel,
+    Cut,
+    Delete,
+    EraseEof,
+    ExSel,
+    Insert,
+    Paste,
+    Redo,
+    Undo,
+
+    # UI keys
+    Accept,
+    Again,
+    Attn,
+    Cancel,
+    ContextMenu,
+    Escape,
+    Execute,
+    Find,
+    Finish,
+    Help,
+    Pause,
+    Play,
+    Props,
+    Select,
+    ZoomIn,
+    ZoomOut,
+
+    # Device keys
+    BrigtnessDown,
+    BrigtnessUp,
+    Eject,
+    LogOff,
+    Power,
+    PowerOff,
+    PrintScreen,
+    Hibernate,
+    Standby,
+    WakeUp,
+
+    # Common IME keys
+    AllCandidates,
+    Alphanumeric,
+    CodeInput,
+    Compose,
+    Convert,
+    Dead,
+    FinalMode,
+    GroupFirst,
+    GroupLast,
+    GroupNext,
+    GroupPrevious,
+    ModeChange,
+    NextCandidate,
+    NonConvert,
+    PreviousCandidate,
+    Process,
+    SingleCandidate,
+
+    # Korean keyboards only
+    HangulMode,
+    HanjaMode,
+    JunjaMode,
+
+    # Japanese keyboards only
+    Eisu,
+    Hankaku,
+    Hiragana,
+    HiraganaKatakana,
+    KanaMode,
+    KanjiMode,
+    Katakana,
+    Romaji,
+    Zenkaku,
+    ZenkakuHanaku,
+
+    # Function keys
+    F1,
+    F2,
+    F3,
+    F4,
+    F5,
+    F6,
+    F7,
+    F8,
+    F9,
+    F10,
+    F11,
+    F12,
+    F13,
+    F14,
+    F15,
+    F16,
+    F17,
+    F18,
+    F19,
+    F20,
+    Soft1,
+    Soft2,
+    Soft3,
+    Soft4,
+
+    # Phone keys
+    AppSwitch,
+    Call,
+    Camera,
+    CameraFocus,
+    EndCall,
+    GoBack,
+    GoHome,
+    HeadsetHook,
+    LastNumberRedial,
+    Notification,
+    MannerMode,
+    VoiceDial,
+
+    # Multimedia keys
+    ChannelDown,
+    ChannelUp,
+    MediaFastForward,
+    MediaPause,
+    MediaPlay,
+    MediaPlayPause,
+    MediaRecord,
+    MediaRewind,
+    MediaStop,
+    MediaTrackNext,
+    MediaTrackPrevious,
+
+    # Audio control keys
+    AudioBalanceLeft,
+    AudioBalanceRight,
+    AudioBassDown,
+    AudioBassBoostDown,
+    AudioBassBoostToggle,
+    AudioBassBoostUp,
+    AudioBassUp,
+    AudioFaderFront,
+    AudioFaderRear,
+    AudioSurroundModeNext,
+    AudioTrebleDown,
+    AudioTrebleUp,
+    AudioVolumeDown,
+    AUdioVolumeMute,
+    AudioVolumeUp,
+    MicrophoneToggle,
+    MicrophoneVolumeDown,
+    MicrophoneVolumeMute,
+    MicrophoneVolumeUp,
+
+    # TV control keys
+    TV,
+    TV3DMode,
+    TVAntennaCable,
+    TVAudioDescription,
+    TVAudioDescriptionMixDown,
+    TVAudioDescriptionMixUp,
+    TVContentsMenu,
+    TVDataService,
+    TVInput,
+    TVInputComponent1,
+    TVInputComponent2,
+    TVInputComposite1,
+    TVInputComposite2,
+    TVInputHDMI1,
+    TVInputHDMI2,
+    TVInputHDMI3,
+    TVInputHDMI4,
+    TVInputVGA1,
+    TVMediaContext,
+    TVNetwork,
+    TVNumberEntry,
+    TVPower,
+    TVRadioService,
+    TVSatellite,
+    TVSatelliteBS,
+    TVSatelliteCS,
+    TVSatelliteToggle,
+    TVTerrestrialAnalog,
+    TVTerrestrialDigital,
+    TVTimer,
+
+    # Media controller keys
+    AVRInput,
+    AVRPower,
+    ColorF0Red,
+    ColorF1Green,
+    ColorF2Yellow,
+    ColorF3Blue,
+    ColorF4Grey,
+    ColorF5Brown,
+    ClosedCaptionToggle,
+    Dimmer,
+    DisplaySwap,
+    DVR,
+    Exit,
+    FavoriteClear0,
+    FavoriteClear1,
+    FavoriteClear2,
+    FavoriteClear3,
+    FavoriteRecall0,
+    FavoriteRecall1,
+    FavoriteRecall2,
+    FavoriteRecall3,
+    FavoriteStore0,
+    FavoriteStore1,
+    FavoriteStore2,
+    FavoriteStore3,
+    Guide,
+    GuideNextDay,
+    GuidePreviousDay,
+    Info,
+    InstantReplay,
+    Link,
+    ListProgram,
+    LiveContent,
+    Lock,
+    MediaApps,
+    MediaAudioTrack,
+    MediaLast,
+    MediaSkipBackward,
+    MediaSkipForward,
+    MediaStepBackward,
+    MediaStepForward,
+    MediaTopMenu,
+    NavigateIn,
+    NavigateNext,
+    NavigateOut,
+    NavigatePrevious,
+    NextFavoriteChannel,
+    NextUserProfile,
+    OnDemand,
+    Pairing,
+    PinPDown,
+    PinPMove,
+    PinPUp,
+    PlaySpeedDown,
+    PlaySpeedReset,
+    PlaySpeedUp,
+    RandomToggle,
+    RcLowBattery,
+    RecordSpeedNext,
+    RfBypass,
+    ScanChannelsToggle,
+    ScreenModeNext,
+    Settings,
+    SplitScreenToggle,
+    STBInput,
+    STBPower,
+    Subtitle,
+    Teletext,
+    VideoModeNext,
+    Wink,
+    ZoomToggle,
+
+    # Speech recognition keys
+    SpeechCorrectionList,
+    SpeechInputToggle,
+
+    # Document keys
+    Close,
+    New,
+    Open,
+    Print,
+    Save,
+    SpellCheck,
+    MailForward,
+    MailReply,
+    MailSend,
+
+    # Application selector keys
+    LaunchCalculator,
+    LaunchCalendar,
+    LaunchContacts,
+    LaunchMail,
+    LaunchMediaPlayer,
+    LaunchMusicPlayer,
+    LaunchMyComputer,
+    LaunchPhone,
+    LaunchScreenSaver,
+    LaunchSpreadsheet,
+    LaunchWebBrowser,
+    LaunchWebCam,
+    LaunchWordProcessor,
+    LaunchApplication1,
+    LaunchApplication2,
+    LaunchApplication3,
+    LaunchApplication4,
+    LaunchApplication5,
+    LaunchApplication6,
+    LaunchApplication7,
+    LaunchApplication8,
+    LaunchApplication9,
+    LaunchApplication10,
+    LaunchApplication11,
+    LaunchApplication12,
+    LaunchApplication13,
+    LaunchApplication14,
+    LaunchApplication15,
+    LaunchApplication16,
+
+    # Browser control keys
+    BrowserBack,
+    BrowserFavorites,
+    BrowserForward,
+    BrowserHome,
+    BrowserRefresh,
+    BrowserSearch,
+    BrowserStop,
+
+    # Numeric keypad keys
+    Key11,
+    Key12,
+    Separator
+
+  MouseButtons* = enum
+    NoButton = 0,
+    PrimaryButton = 1,
+    SecondaryButton = 2,
+    AuxilaryButton = 4,
+    FourthButton = 8,
+    FifthButton = 16
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+  MouseEvent* = ref MouseEventObj
+  MouseEventObj {.importc.} = object of UIEvent
+    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
+    button*: int
+    buttons*: int
+    clientX*, clientY*: int
+    movementX*, movementY*: int
+    offsetX*, offsetY*: int
+    pageX*, pageY*: int
+    relatedTarget*: EventTarget
+    #region*: cstring
+    screenX*, screenY*: int
+    x*, y*: int
+
+  DataTransferItemKind* {.pure.} = enum
+    File = "file",
+    String = "string"
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
+  DataTransferItem* = ref DataTransferItemObj
+  DataTransferItemObj {.importc.} = object of RootObj
+    kind*: cstring
+    `type`*: cstring
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
+  DataTransfer* = ref DataTransferObj
+  DataTransferObj {.importc.} = object of RootObj
+    dropEffect*: cstring
+    effectAllowed*: cstring
+    files*: seq[Element]
+    items*: seq[DataTransferItem]
+    types*: seq[cstring]
+
+  DataTransferDropEffect* {.pure.} = enum
+    None = "none",
+    Copy = "copy",
+    Link = "link",
+    Move = "move"
+
+  DataTransferEffectAllowed* {.pure.} = enum
+    None = "none",
+    Copy = "copy",
+    CopyLink = "copyLink",
+    CopyMove = "copyMove",
+    Link = "link",
+    LinkMove = "linkMove",
+    Move = "move",
+    All = "all",
+    Uninitialized = "uninitialized"
+
+  DragEventTypes* = enum
+    Drag = "drag",
+    DragEnd = "dragend",
+    DragEnter = "dragenter",
+    DragExit = "dragexit",
+    DragLeave = "dragleave",
+    DragOver = "dragover",
+    DragStart = "dragstart",
+    Drop = "drop"
+
+  # https://developer.mozilla.org/en-US/docs/Web/API/DragEvent
+  DragEvent* {.importc.} = object of MouseEvent
+    dataTransfer*: DataTransfer
+
+  TouchList* {.importc.} = ref object of RootObj
+    length*: int
+
+  Touch* = ref TouchObj
+  TouchObj {.importc.} = object of RootObj
+    identifier*: int
+    screenX*, screenY*, clientX*, clientY*, pageX*, pageY*: int
+    target*: Element
+    radiusX*, radiusY*: int
+    rotationAngle*: int
+    force*: float
+
+  TouchEvent* = ref TouchEventObj
+  TouchEventObj {.importc.} = object of UIEvent
+    changedTouches*, targetTouches*, touches*: seq[Touch]
+
+  Location* = ref LocationObj
+  LocationObj {.importc.} = object of RootObj
+    hash*: cstring
+    host*: cstring
+    hostname*: cstring
+    href*: cstring
+    pathname*: cstring
+    port*: cstring
+    protocol*: cstring
+    search*: cstring
+
+  History* = ref HistoryObj
+  HistoryObj {.importc.} = object of RootObj
+    length*: int
+
+  Navigator* = ref NavigatorObj
+  NavigatorObj {.importc.} = object of RootObj
+    appCodeName*: cstring
+    appName*: cstring
+    appVersion*: cstring
+    cookieEnabled*: bool
+    language*: cstring
+    platform*: cstring
+    userAgent*: cstring
+    mimeTypes*: seq[ref MimeType]
+
+  Plugin* {.importc.} = object of RootObj
+    description*: cstring
+    filename*: cstring
+    name*: cstring
+
+  MimeType* {.importc.} = object of RootObj
+    description*: cstring
+    enabledPlugin*: ref Plugin
+    suffixes*: seq[cstring]
+    `type`*: cstring
+
+  LocationBar* {.importc.} = object of RootObj
+    visible*: bool
+  MenuBar* = LocationBar
+  PersonalBar* = LocationBar
+  ScrollBars* = LocationBar
+  ToolBar* = LocationBar
+  StatusBar* = LocationBar
+
+  Screen = ref ScreenObj
+  ScreenObj {.importc.} = object of RootObj
+    availHeight*: int
+    availWidth*: int
+    colorDepth*: int
+    height*: int
+    pixelDepth*: int
+    width*: int
+
+  TimeOut* {.importc.} = ref object of RootObj
+  Interval* {.importc.} = object of RootObj
+
+  AddEventListenerOptions* = object
+    capture*: bool
+    once*: bool
+    passive*: bool
+
+when defined(nodejs):
+  # we provide a dummy DOM for nodejs for testing purposes
+  proc len*(x: Node): int = x.childNodes.len
+  proc `[]`*(x: Node; idx: int): Element =
+    assert idx >= 0 and idx < x.childNodes.len
+    result = cast[Element](x.childNodes[idx])
+
+  var document* = Document(nodeType: DocumentNode)
+
+  proc getElem(x: Element; id: cstring): Element =
+    if x.id == id: return x
+    for i in 0..<x.len:
+      result = getElem(x[i], id)
+      if result != nil: return result
+
+  proc getElementById*(doc: Document; id: cstring): Element =
+    getElem(doc.body, id)
+  proc getElementById*(id: cstring): Element = document.getElementById(id)
+
+  proc appendChild*(parent, n: Node) =
+    n.parentNode = parent
+    parent.childNodes.add n
+
+  proc replaceChild*(parent, newNode, oldNode: Node) =
+    newNode.parentNode = parent
+    oldNode.parentNode = nil
+    var i = 0
+    while i < parent.len:
+      if Node(parent[i]) == oldNode:
+        parent.childNodes[i] = newNode
+        return
+      inc i
+    doAssert false, "old node not in node list"
+
+  proc removeChild*(parent, child: Node) =
+    child.parentNode = nil
+    var i = 0
+    while i < parent.len:
+      if Node(parent[i]) == child:
+        parent.childNodes.delete(i)
+        return
+      inc i
+    doAssert false, "old node not in node list"
+
+  proc insertBefore*(parent, newNode, before: Node) =
+    appendChild(parent, newNode)
+    var i = 0
+    while i < parent.len-1:
+      if Node(parent[i]) == before:
+        for j in countdown(parent.len-1, i-1):
+          parent.childNodes[j] = parent.childNodes[j-1]
+        parent.childNodes[i-1] = newNode
+        return
+      inc i
+    #doAssert false, "before not in node list"
+
+  proc createElement*(d: Document, identifier: cstring): Element =
+    new(result)
+    result.nodeName = identifier
+    result.nodeType = NodeType.ElementNode
+
+  proc createTextNode*(d: Document, identifier: cstring): Node =
+    new(result)
+    result.nodeName = "#text"
+    result.nodeValue = identifier
+    result.nodeType = NodeType.TextNode
+
+else:
+  proc len*(x: Node): int {.importcpp: "#.childNodes.length".}
+  proc `[]`*(x: Node; idx: int): Element {.importcpp: "#.childNodes[#]".}
+  proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
+  proc appendChild*(n, child: Node) {.importcpp.}
+  proc removeChild*(n, child: Node) {.importcpp.}
+  proc replaceChild*(n, newNode, oldNode: Node) {.importcpp.}
+  proc insertBefore*(n, newNode, before: Node) {.importcpp.}
+  proc getElementById*(d: Document, id: cstring): Element {.importcpp.}
+  proc createElement*(d: Document, identifier: cstring): Element {.importcpp.}
+  proc createTextNode*(d: Document, identifier: cstring): Node {.importcpp.}
+
+proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
+proc clearTimeout*(t: Timeout) {.importc, nodecl.}
+
+{.push importcpp.}
+
+# EventTarget "methods"
+proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), useCapture: bool = false)
+proc addEventListener*(et: EventTarget, ev: cstring, cb: proc(ev: Event), options: AddEventListenerOptions)
+proc removeEventListener*(et: EventTarget; ev: cstring; cb: proc(ev: Event))
+
+# Window "methods"
+proc alert*(w: Window, msg: cstring)
+proc back*(w: Window)
+proc blur*(w: Window)
+proc captureEvents*(w: Window, eventMask: int) {.deprecated.}
+proc clearInterval*(w: Window, interval: ref Interval)
+proc clearTimeout*(w: Window, timeout: ref TimeOut)
+proc close*(w: Window)
+proc confirm*(w: Window, msg: cstring): bool
+proc disableExternalCapture*(w: Window)
+proc enableExternalCapture*(w: Window)
+proc find*(w: Window, text: cstring, caseSensitive = false,
+           backwards = false)
+proc focus*(w: Window)
+proc forward*(w: Window)
+proc getComputedStyle*(w: Window, e: Node, pe:Node = nil): Style
+proc handleEvent*(w: Window, e: Event)
+proc home*(w: Window)
+proc moveBy*(w: Window, x, y: int)
+proc moveTo*(w: Window, x, y: int)
+proc open*(w: Window, uri, windowname: cstring,
+           properties: cstring = nil): Window
+proc print*(w: Window)
+proc prompt*(w: Window, text, default: cstring): cstring
+proc releaseEvents*(w: Window, eventMask: int) {.deprecated.}
+proc resizeBy*(w: Window, x, y: int)
+proc resizeTo*(w: Window, x, y: int)
+proc routeEvent*(w: Window, event: Event)
+proc scrollBy*(w: Window, x, y: int)
+proc scrollTo*(w: Window, x, y: int)
+proc setInterval*(w: Window, code: cstring, pause: int): ref Interval
+proc setInterval*(w: Window, function: proc (), pause: int): ref Interval
+proc setTimeout*(w: Window, code: cstring, pause: int): ref TimeOut
+proc setTimeout*(w: Window, function: proc (), pause: int): ref Interval
+proc stop*(w: Window)
+proc requestAnimationFrame*(w: Window, function: proc (time: float)): int
+proc cancelAnimationFrame*(w: Window, id: int)
+
+# Node "methods"
+proc appendData*(n: Node, data: cstring)
+proc cloneNode*(n: Node, copyContent: bool): Node
+proc deleteData*(n: Node, start, len: int)
+proc focus*(e: Node)
+proc getAttribute*(n: Node, attr: cstring): cstring
+proc getAttributeNode*(n: Node, attr: cstring): Node
+proc hasChildNodes*(n: Node): bool
+proc insertData*(n: Node, position: int, data: cstring)
+proc removeAttribute*(n: Node, attr: cstring)
+proc removeAttributeNode*(n, attr: Node)
+proc replaceData*(n: Node, start, len: int, text: cstring)
+proc scrollIntoView*(n: Node)
+proc setAttribute*(n: Node, name, value: cstring)
+proc setAttributeNode*(n: Node, attr: Node)
+
+# Document "methods"
+proc captureEvents*(d: Document, eventMask: int) {.deprecated.}
+proc createAttribute*(d: Document, identifier: cstring): Node
+proc getElementsByName*(d: Document, name: cstring): seq[Element]
+proc getElementsByTagName*(d: Document, name: cstring): seq[Element]
+proc getElementsByClassName*(d: Document, name: cstring): seq[Element]
+proc getSelection*(d: Document): cstring
+proc handleEvent*(d: Document, event: Event)
+proc open*(d: Document)
+proc releaseEvents*(d: Document, eventMask: int) {.deprecated.}
+proc routeEvent*(d: Document, event: Event)
+proc write*(d: Document, text: cstring)
+proc writeln*(d: Document, text: cstring)
+proc querySelector*(d: Document, selectors: cstring): Element
+proc querySelectorAll*(d: Document, selectors: cstring): seq[Element]
+
+# Element "methods"
+proc blur*(e: Element)
+proc click*(e: Element)
+proc focus*(e: Element)
+proc handleEvent*(e: Element, event: Event)
+proc select*(e: Element)
+proc getElementsByTagName*(e: Element, name: cstring): seq[Element]
+proc getElementsByClassName*(e: Element, name: cstring): seq[Element]
+
+# FormElement "methods"
+proc reset*(f: FormElement)
+proc submit*(f: FormElement)
+proc checkValidity*(e: FormElement): bool
+proc reportValidity*(e: FormElement): bool
+
+# EmbedElement "methods"
+proc play*(e: EmbedElement)
+proc stop*(e: EmbedElement)
+
+# Location "methods"
+proc reload*(loc: Location)
+proc replace*(loc: Location, s: cstring)
+
+# History "methods"
+proc back*(h: History)
+proc forward*(h: History)
+proc go*(h: History, pagesToJump: int)
+
+# Navigator "methods"
+proc javaEnabled*(h: Navigator): bool
+
+# ClassList "methods"
+proc add*(c: ClassList, class: cstring)
+proc remove*(c: ClassList, class: cstring)
+proc contains*(c: ClassList, class: cstring): bool
+proc toggle*(c: ClassList, class: cstring)
+
+# Style "methods"
+proc getAttribute*(s: Style, attr: cstring, caseSensitive=false): cstring
+proc removeAttribute*(s: Style, attr: cstring, caseSensitive=false)
+proc setAttribute*(s: Style, attr, value: cstring, caseSensitive=false)
+
+# Event "methods"
+proc preventDefault*(ev: Event)
+proc stopImmediatePropagation*(ev: Event)
+proc stopPropagation*(ev: Event)
+
+# KeyboardEvent "methods"
+proc getModifierState*(ev: KeyboardEvent, keyArg: cstring): bool
+
+# MouseEvent "methods"
+proc getModifierState*(ev: MouseEvent, keyArg: cstring): bool
+
+# TouchEvent "methods"
+proc identifiedTouch*(list: TouchList): Touch
+proc item*(list: TouchList, i: int): Touch
+
+# DataTransfer "methods"
+proc clearData*(dt: DataTransfer, format: cstring)
+proc getData*(dt: DataTransfer, format: cstring): cstring
+proc setData*(dt: DataTransfer, format: cstring, data: cstring)
+proc setDragImage*(dt: DataTransfer, img: Element, xOffset: int64, yOffset: int64)
+
+# DataTransferItem "methods"
+proc getAsFile*(dti: DataTransferItem): File
+
+# InputElement "methods"
+proc setSelectionRange*(e: InputElement, selectionStart: int, selectionEnd: int, selectionDirection: cstring = "none")
+proc setRangeText*(e: InputElement, replacement: cstring, startindex: int = 0, endindex: int = 0, selectionMode: cstring = "preserve")
+proc setCustomValidity*(e: InputElement, error: cstring)
+proc checkValidity*(e: InputElement): bool
+
+# Blob "methods"
+proc slice*(e: Blob, startindex: int = 0, endindex: int = e.size, contentType: cstring = "")
+
+{.pop.}
+
+proc setAttr*(n: Node; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
+
+var
+  window* {.importc, nodecl.}: Window
+  navigator* {.importc, nodecl.}: Navigator
+  screen* {.importc, nodecl.}: Screen
+
+when not defined(nodejs):
+  var document* {.importc, nodecl.}: Document
+
+proc decodeURI*(uri: cstring): cstring {.importc, nodecl.}
+proc encodeURI*(uri: cstring): cstring {.importc, nodecl.}
+
+proc escape*(uri: cstring): cstring {.importc, nodecl.}
+proc unescape*(uri: cstring): cstring {.importc, nodecl.}
+
+proc decodeURIComponent*(uri: cstring): cstring {.importc, nodecl.}
+proc encodeURIComponent*(uri: cstring): cstring {.importc, nodecl.}
+proc isFinite*(x: BiggestFloat): bool {.importc, nodecl.}
+proc isNaN*(x: BiggestFloat): bool {.importc, nodecl.}
+
+
+proc id*(n: Node): cstring {.importcpp: "#.id", nodecl.}
+proc `id=`*(n: Node; x: cstring) {.importcpp: "#.id = #", nodecl.}
+proc class*(n: Node): cstring {.importcpp: "#.className", nodecl.}
+proc `class=`*(n: Node; v: cstring) {.importcpp: "#.className = #", nodecl.}
+
+proc value*(n: Node): cstring {.importcpp: "#.value", nodecl.}
+proc `value=`*(n: Node; v: cstring) {.importcpp: "#.value = #", nodecl.}
+
+proc `disabled=`*(n: Node; v: bool) {.importcpp: "#.disabled = #", nodecl.}
+
+proc getElementsByClass*(n: Node; name: cstring): seq[Node] {.
+  importcpp: "#.getElementsByClassName(#)", nodecl.}
+
+
+type
+  BoundingRect* {.importc.} = object
+    top*, bottom*, left*, right*, x*, y*, width*, height*: float
+
+proc getBoundingClientRect*(e: Node): BoundingRect {.
+  importcpp: "getBoundingClientRect", nodecl.}
+proc clientHeight*(): int {.
+  importcpp: "(window.innerHeight || document.documentElement.clientHeight)@", nodecl.}
+proc clientWidth*(): int {.
+  importcpp: "(window.innerWidth || document.documentElement.clientWidth)@", nodecl.}
+
+proc inViewport*(el: Node): bool =
+  let rect = el.getBoundingClientRect()
+  result = rect.top >= 0 and rect.left >= 0 and
+           rect.bottom <= clientHeight().float and
+           rect.right <= clientWidth().float
+
+proc scrollTop*(e: Node): int {.importcpp: "#.scrollTop", nodecl.}
+proc offsetHeight*(e: Node): int {.importcpp: "#.offsetHeight", nodecl.}
+proc offsetTop*(e: Node): int {.importcpp: "#.offsetTop", nodecl.}
+proc offsetLeft*(e: Node): int {.importcpp: "#.offsetLeft", nodecl.}

From 4186a4b37b5c4a289fb43b42c4aa6685625e6076 Mon Sep 17 00:00:00 2001
From: Jairo <kidandcat@gmail.com>
Date: Fri, 8 Mar 2019 13:32:35 +0100
Subject: [PATCH 203/264] Update Bulma (#89)

---
 karax/tools/karun.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index dc1ba44..8083b65 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -12,7 +12,7 @@ import os,
 
 const
   css = """
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 """
   html = """

From 1ea7208b4dcf2b16cd752bca9347bccd5e4d3a21 Mon Sep 17 00:00:00 2001
From: liuxiaodong <lxdong.007@gmail.com>
Date: Mon, 11 Mar 2019 03:15:13 +0800
Subject: [PATCH 204/264] add uploadFile and a path tag (#88)

* add uploadFile and a path tag
* update uploadFile and circle tag
---
 karax/kajax.nim | 68 +++++++++++++++++++++++++++++++++++++++----------
 karax/vdom.nim  |  2 +-
 2 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/karax/kajax.nim b/karax/kajax.nim
index 114b29d..7fce2c9 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -4,6 +4,59 @@
 ## handling.
 
 import karax
+import jsffi except `&`
+import jscore
+import dom
+
+type 
+  ProgressEvent* {.importc.}= object
+    loaded*: float
+    total*: float
+
+  FormData* {.importc.} = JsObject
+
+  HttpRequest* {.importc.} = ref object
+  ThisObj {.importc.} = ref object
+    readyState, status: int
+    responseText, statusText: cstring
+
+  XMLHttpRequestUpload* {.importc.} = JsObject
+
+proc newFormData*(): FormData {.importcpp: "new FormData()".}
+proc append*(f: FormData, key: cstring, value: Blob) {.importcpp:"#.append(@)".}
+proc append*(f: FormData, key: cstring, value: cstring) {.importcpp:"#.append(@)".}
+
+proc setRequestHeader*(r: HttpRequest; a, b: cstring) {.importcpp: "#.setRequestHeader(@)".}
+proc statechange*(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
+proc send*(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
+proc send*(r: HttpRequest, data: Blob) {.importcpp: "#.send(#)".}
+proc open*(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
+proc newRequest*(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
+
+proc uploadFile*(url: cstring, file: Blob, onprogress :proc(data: ProgressEvent), 
+                cont: proc (httpStatus: int; response: cstring);
+                headers: openarray[(cstring, cstring)] = []) = 
+  proc contWrapper(httpStatus: int; response: cstring) =
+    cont(httpStatus, response)
+
+  proc upload(r: HttpRequest):XMLHttpRequestUpload {.importcpp: "#.upload".}
+  var this {.importc: "this".}: ThisObj
+
+  var formData = newFormData()
+  formData.append("upload_file",file)
+  formData.append("filename", dom.File(file).name)
+  let ajax = newRequest()
+  ajax.open("POST", url, true)
+  for a, b in items(headers):
+    ajax.setRequestHeader(a, b)
+  ajax.statechange proc() =
+    if this.readyState == 4:
+      if this.status == 200:
+        contWrapper(this.status, this.responseText)
+      else:
+        contWrapper(this.status, this.responseText)
+  ajax.upload.onprogress = onprogress
+  ajax.send(formData.to(cstring))
 
 proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
@@ -16,20 +69,8 @@ proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
     cont(httpStatus, response)
     if doRedraw: redraw(kxi)
 
-  type
-    HttpRequest {.importc.} = ref object
-    ThisObj {.importc.} = ref object
-      readyState, status: int
-      responseText, statusText: cstring
-
-  proc setRequestHeader(r: HttpRequest; a, b: cstring) {.importcpp: "#.setRequestHeader(@)".}
-  proc statechange(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
-  proc send(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
-  proc send(r: HttpRequest, data: Blob) {.importcpp: "#.send(#)".}
-  proc open(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
-  proc newRequest(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
-
   var this {.importc: "this".}: ThisObj
+
   let ajax = newRequest()
   ajax.open(meth, url, true)
   for a, b in items(headers):
@@ -81,3 +122,4 @@ proc ajaxDelete*(url: cstring; headers: openarray[(cstring, cstring)];
 
 proc toJson*[T](data: T): cstring {.importc: "JSON.stringify".}
 proc fromJson*[T](blob: cstring): T {.importc: "JSON.parse".}
+
diff --git a/karax/vdom.nim b/karax/vdom.nim
index 3dc61d9..b9c12d9 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -35,7 +35,7 @@ type
     mark, ruby, rt, rp, bdi, dbo, span, br, wbr,
     ins, del, img, iframe, embed, `object` = "object",
     param, video, audio, source, track, canvas, map,
-    area, svg, math,
+    area, svg, math, path, circle
 
     table, caption, colgroup, col, tbody, thead,
     tfoot, tr, td, th,

From 50bed1f6e9a8006da7967ef82830776145fbf79f Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 14 Mar 2019 11:09:06 +0100
Subject: [PATCH 205/264] used sugar.nim instead of future.nim in the login.nim
 example

---
 examples/login.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/login.nim b/examples/login.nim
index 6cc38b1..642f573 100644
--- a/examples/login.nim
+++ b/examples/login.nim
@@ -1,6 +1,6 @@
 
 include karax / prelude
-from future import `=>`
+from sugar import `=>`
 import karax / errors
 
 proc loginField(desc, field, class: kstring;

From 20fe35355c83de024dbf13a6489073ddbb666e81 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 14 Mar 2019 11:21:49 +0100
Subject: [PATCH 206/264] server side Karax rendering: show how events can be
 handled

---
 tests/nativehtmlgen.nim | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/tests/nativehtmlgen.nim b/tests/nativehtmlgen.nim
index 5bb7186..b30ab6a 100644
--- a/tests/nativehtmlgen.nim
+++ b/tests/nativehtmlgen.nim
@@ -5,6 +5,10 @@ import "../karax" / [karaxdsl, vdom]
 when defined(js):
   {.error: "Use 'nim c' to compile this example".}
 
+template kxi(): int = 0
+template addEventHandler(n: VNode; k: EventKind; action: string; kxi: int) =
+  n.setAttr($k, action)
+
 let tab = buildHtml(table):
   tr:
     td:
@@ -16,5 +20,8 @@ let tab = buildHtml(table):
       text "Cell C"
     td:
       text "Cell D"
+    td:
+      a(href = "#/", onclick = "javascript:myFunc()"):
+        text"haha"
 
 echo tab

From ad3c0a63eefcde2d2b72df6049e0520c98d99e6e Mon Sep 17 00:00:00 2001
From: liuxiaodong <lxdong.007@gmail.com>
Date: Thu, 16 May 2019 00:36:22 +0800
Subject: [PATCH 207/264] update verbatim for static HTML (#96)

---
 karax/vdom.nim | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index b9c12d9..0c78186 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -379,6 +379,8 @@ proc add*(result: var string, n: VNode, indent = 0, indWidth = 2) =
 
   if n.kind == VNodeKind.text:
     result.addEscaped(n.text)
+  elif n.kind == VNodeKind.verbatim:
+      result.add(n.text)
   else:
     let kind = $n.kind
     result.add('<')

From cd3e7cc1c80b7bc155511dfa98326613cfc6ad86 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 15 May 2019 18:48:38 +0200
Subject: [PATCH 208/264] fixed indentation

---
 karax/vdom.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 0c78186..3310dca 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -380,7 +380,7 @@ proc add*(result: var string, n: VNode, indent = 0, indWidth = 2) =
   if n.kind == VNodeKind.text:
     result.addEscaped(n.text)
   elif n.kind == VNodeKind.verbatim:
-      result.add(n.text)
+    result.add(n.text)
   else:
     let kind = $n.kind
     result.add('<')

From 33af725e7db412e45fb7b8c0acc04d88fba15d4d Mon Sep 17 00:00:00 2001
From: Hitesh Jasani <hitesh.jasani@gmail.com>
Date: Wed, 15 May 2019 13:06:17 -0400
Subject: [PATCH 209/264] Add docs explaining server side HTML rendering (#97)

* Add docs explaining server side HTML rendering

* Fix indentation
---
 readme.rst | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/readme.rst b/readme.rst
index 481b948..bf5058b 100644
--- a/readme.rst
+++ b/readme.rst
@@ -323,3 +323,31 @@ type ``RouterData``. Here is the relevant excerpt from the famous "Todo App" exa
   setRenderer createDom
 
 (Full example `here <https://github.com/pragmagic/karax/blob/master/examples/todoapp/todoapp.nim>`_.)
+
+
+Server Side HTML Rendering
+==========================
+
+Karax can also be used to render HTML on the server.  Only a subset of
+modules can be used since there is no JS interpreter.
+
+.. code-block:: nim
+
+  import karax / [karaxdsl, vdom]
+
+  const places = @["boston", "cleveland", "los angeles", "new orleans"]
+
+  proc render*(): string =
+    let node = buildHtml(tdiv(class = "mt-3")):
+      h1: text "My Web Page"
+      p: text "Hello world"
+      ul:
+        for place in places:
+          li: text place
+      dl:
+        dt: text "Can I use Karax for client side single page apps?"
+        dd: text "Yes"
+
+        dt: text "Can I use Karax for server side HTML rendering?"
+        dd: text "Yes"
+    result = $vnode

From c091af162263c8078d2faa2e416c7a6e9cd7ba45 Mon Sep 17 00:00:00 2001
From: Jairo <kidandcat@gmail.com>
Date: Wed, 15 May 2019 19:06:43 +0200
Subject: [PATCH 210/264] Update kdom_impl.nim (#94)

* Update kdom_impl.nim

Support full old syntax (maybe support modern syntax too? object options)
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

* Update kdom_impl.nim

use MDN naming

* Update kdom_impl.nim
---
 karax/kdom_impl.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax/kdom_impl.nim b/karax/kdom_impl.nim
index e6a96fb..aaa26cb 100644
--- a/karax/kdom_impl.nim
+++ b/karax/kdom_impl.nim
@@ -1076,7 +1076,7 @@ proc insertData*(n: Node, position: int, data: cstring)
 proc removeAttribute*(n: Node, attr: cstring)
 proc removeAttributeNode*(n, attr: Node)
 proc replaceData*(n: Node, start, len: int, text: cstring)
-proc scrollIntoView*(n: Node)
+proc scrollIntoView*(n: Node, alignToTop = true)
 proc setAttribute*(n: Node, name, value: cstring)
 proc setAttributeNode*(n: Node, attr: Node)
 

From 5e9709bc5b245139fb1c4fa5ec181bff2960aad5 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Mon, 3 Jun 2019 14:59:51 +0200
Subject: [PATCH 211/264] fixes #91

---
 karax/kajax.nim | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/karax/kajax.nim b/karax/kajax.nim
index 7fce2c9..a9a8a2a 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -8,7 +8,7 @@ import jsffi except `&`
 import jscore
 import dom
 
-type 
+type
   ProgressEvent* {.importc.}= object
     loaded*: float
     total*: float
@@ -33,9 +33,19 @@ proc send*(r: HttpRequest, data: Blob) {.importcpp: "#.send(#)".}
 proc open*(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
 proc newRequest*(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
 
-proc uploadFile*(url: cstring, file: Blob, onprogress :proc(data: ProgressEvent), 
+when not declared(dom.File):
+  type
+    DomFile = ref FileObj
+    FileObj {.importc.} = object of Blob
+      lastModified: int
+      name: cstring
+else:
+  type
+    DomFile = dom.File
+
+proc uploadFile*(url: cstring, file: Blob, onprogress :proc(data: ProgressEvent),
                 cont: proc (httpStatus: int; response: cstring);
-                headers: openarray[(cstring, cstring)] = []) = 
+                headers: openarray[(cstring, cstring)] = []) =
   proc contWrapper(httpStatus: int; response: cstring) =
     cont(httpStatus, response)
 
@@ -44,7 +54,7 @@ proc uploadFile*(url: cstring, file: Blob, onprogress :proc(data: ProgressEvent)
 
   var formData = newFormData()
   formData.append("upload_file",file)
-  formData.append("filename", dom.File(file).name)
+  formData.append("filename", DomFile(file).name)
   let ajax = newRequest()
   ajax.open("POST", url, true)
   for a, b in items(headers):

From fc062c2d48b1fe875f72b4f9ded3564fc9bcd87e Mon Sep 17 00:00:00 2001
From: Zed <9434921+zedeus@users.noreply.github.com>
Date: Wed, 10 Jul 2019 14:44:51 +0200
Subject: [PATCH 212/264] Fix tag termination for elements with no children
 (#103)

---
 karax/vdom.nim | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 3310dca..56cf9e6 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -425,7 +425,10 @@ proc add*(result: var string, n: VNode, indent = 0, indWidth = 2) =
       result.add(kind)
       result.add(">")
     else:
-      result.add(" />")
+      result.add(">")
+      result.add("</")
+      result.add(kind)
+      result.add(">")
 
 
 proc `$`*(n: VNode): kstring =

From b99a5430f0cd8abcf086cb774c728da498ee6ebe Mon Sep 17 00:00:00 2001
From: Zed <9434921+zedeus@users.noreply.github.com>
Date: Wed, 10 Jul 2019 14:46:08 +0200
Subject: [PATCH 213/264] Add support for rendering styles to string (#102)

---
 karax/vdom.nim | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 56cf9e6..7f8dcb7 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -8,7 +8,7 @@ else:
     Node* = ref object
 
 import macros, vstyles, kbase
-from strutils import toUpperAscii
+from strutils import toUpperAscii, toLowerAscii, tokenize
 
 type
   VNodeKind* {.pure.} = enum
@@ -399,7 +399,17 @@ proc add*(result: var string, n: VNode, indent = 0, indWidth = 2) =
       result.add("=\"")
       result.addEscapedAttr(v)
       result.add('"')
-    # XXX add style to string
+    if n.style != nil:
+      result.add " style=\""
+      for k, v in pairs(n.style):
+        if v.len == 0: continue
+        for t in tokenize($k, seps={'A' .. 'Z'}):
+          if t.isSep: result.add '-'
+          result.add toLowerAscii(t.token)
+        result.add ": "
+        result.add v
+        result.add "; "
+      result.add('"')
     if n.len > 0:
       result.add('>')
       if n.len > 1:

From 1bbd9c694eb0b04ef0d47005c810ca34df2867a2 Mon Sep 17 00:00:00 2001
From: Jairo <kidandcat@gmail.com>
Date: Fri, 19 Jul 2019 18:38:43 +0200
Subject: [PATCH 214/264] Update karun.nim (#109)

Remove ugly debug echo (sorry)
---
 karax/tools/karun.nim | 1 -
 1 file changed, 1 deletion(-)

diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index 8083b65..1d266bf 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -75,7 +75,6 @@ proc main =
   if file.len == 0: quit "filename expected"
   let name = file.splitFile.name
   build(name, rest, selectedCss, run)
-  echo("after build")
   if watch:
     # TODO: launch http server
     while true:

From 9c8a34e567ac4f78e8db42fc31184a939eb404f1 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 15 Aug 2019 11:07:03 +0200
Subject: [PATCH 215/264] readme.rst: fixed a typo and made the snippet
 runnable

---
 readme.rst | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index bf5058b..4b8cec2 100644
--- a/readme.rst
+++ b/readme.rst
@@ -338,7 +338,7 @@ modules can be used since there is no JS interpreter.
   const places = @["boston", "cleveland", "los angeles", "new orleans"]
 
   proc render*(): string =
-    let node = buildHtml(tdiv(class = "mt-3")):
+    let vnode = buildHtml(tdiv(class = "mt-3")):
       h1: text "My Web Page"
       p: text "Hello world"
       ul:
@@ -351,3 +351,5 @@ modules can be used since there is no JS interpreter.
         dt: text "Can I use Karax for server side HTML rendering?"
         dd: text "Yes"
     result = $vnode
+
+  echo render()

From d08a0356d27a23788d42f5c8a0ee481bc262f633 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 15 Aug 2019 11:07:03 +0200
Subject: [PATCH 216/264] readme.rst: fixed a typo and made the snippet
 runnable

---
 readme.rst | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index bf5058b..4b8cec2 100644
--- a/readme.rst
+++ b/readme.rst
@@ -338,7 +338,7 @@ modules can be used since there is no JS interpreter.
   const places = @["boston", "cleveland", "los angeles", "new orleans"]
 
   proc render*(): string =
-    let node = buildHtml(tdiv(class = "mt-3")):
+    let vnode = buildHtml(tdiv(class = "mt-3")):
       h1: text "My Web Page"
       p: text "Hello world"
       ul:
@@ -351,3 +351,5 @@ modules can be used since there is no JS interpreter.
         dt: text "Can I use Karax for server side HTML rendering?"
         dd: text "Yes"
     result = $vnode
+
+  echo render()

From e422087217ff3bbedfd23baaa2b2e713f47e3ecf Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 15 Aug 2019 17:15:07 +0200
Subject: [PATCH 217/264] avoid exponential DOM diffing

---
 karax/karax.nim    | 213 ++++++++++++++++++++++++---------------------
 tests/difftest.nim |  20 +++--
 2 files changed, 124 insertions(+), 109 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 82a7ee2..6c69325 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -13,11 +13,11 @@ proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
 
 type
   PatchKind = enum
-    pkReplace, pkRemove, pkAppend, pkInsertBefore, pkDetach
+    pkReplace, pkRemove, pkAppend, pkInsertBefore, pkDetach, pkSame
   Patch = object
     k: PatchKind
     parent, current: Node
-    n: VNode
+    newNode, oldNode: VNode
   PatchV = object
     parent, newChild: VNode
     pos: int
@@ -117,7 +117,7 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind;
 # --------------------- DOM diff -----------------------------------------
 
 template detach(n: VNode) =
-  addPatch(kxi, pkDetach, nil, nil, n)
+  addPatch(kxi, pkDetach, nil, nil, nil, n)
 
 template attach(n: VNode) =
   n.dom = result
@@ -134,7 +134,9 @@ proc getVNodeById*(id: cstring; kxi: KaraxInstance = kxi): VNode =
   if kxi.byId.contains(id):
     result = kxi.byId[id]
 
-proc vnodeToDom*(n: VNode; kxi: KaraxInstance = nil): Node =
+proc toDom*(n: VNode; useAttachedNode: bool; kxi: KaraxInstance = nil): Node =
+  if useAttachedNode:
+    if n.dom != nil: return n.dom
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
     attach n
@@ -145,7 +147,7 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance = nil): Node =
     return result
   elif n.kind == VNodeKind.vthunk:
     let x = callThunk(vcomponents[n.text], n)
-    result = vnodeToDom(x, kxi)
+    result = toDom(x, useAttachedNode, kxi)
     #n.key = result.key
     attach n
     return result
@@ -163,14 +165,14 @@ proc vnodeToDom*(n: VNode; kxi: KaraxInstance = nil): Node =
       x.expanded = x.renderImpl(x)
       #  x.updatedImpl(x, nil)
     assert x.expanded != nil
-    result = vnodeToDom(x.expanded, kxi)
+    result = toDom(x.expanded, useAttachedNode, kxi)
     attach n
     return result
   else:
     result = document.createElement(toTag[n.kind])
     attach n
     for k in n:
-      appendChild(result, vnodeToDom(k, kxi))
+      appendChild(result, toDom(k, useAttachedNode, kxi))
     # text is mapped to 'value':
     if n.text != nil:
       result.value = n.text
@@ -231,7 +233,7 @@ when defined(profileKarax):
     for i in low(DifferEnum)..high(DifferEnum):
       echo i, " value: ", a[i]
 
-proc eq(a, b: VNode): EqResult =
+proc eq(a, b: VNode; recursive: bool): EqResult =
   if a.kind != b.kind:
     when defined(profileKarax): inc reasons[deKind]
     return different
@@ -250,7 +252,7 @@ proc eq(a, b: VNode): EqResult =
     if a.text != b.text: return different
     if a.len != b.len: return different
     for i in 0..<a.len:
-      if eq(a[i], b[i]) == different: return different
+      if eq(a[i], b[i], recursive) == different: return different
   elif a.kind == VNodeKind.dthunk:
     return identical
   elif a.kind == VNodeKind.verbatim:
@@ -274,6 +276,14 @@ proc eq(a, b: VNode): EqResult =
   if a.class != b.class or not eq(a.style, b.style) or not sameAttrs(a, b):
     when defined(profileKarax): inc reasons[deSimilar]
     return similar
+
+  if recursive:
+    if a.len != b.len:
+      return different
+    for i in 0..<a.len:
+      if eq(a[i], b[i], true) != identical:
+        return different
+
   # Do not test event listeners here!
   return result
 
@@ -298,12 +308,13 @@ proc updateAttributes(newNode, oldNode: VNode) =
 
 proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   let d = oldNode.dom
-  for i in 0..<oldNode.events.len:
-    let k = oldNode.events[i][0]
-    let name = case k
-               of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
-               else: toEventName[k]
-    d.removeEventListener(name, oldNode.events[i][2])
+  if d != nil:
+    for i in 0..<oldNode.events.len:
+      let k = oldNode.events[i][0]
+      let name = case k
+                of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
+                else: toEventName[k]
+      d.removeEventListener(name, oldNode.events[i][2])
   shallowCopy(oldNode.events, newNode.events)
   applyEvents(oldNode)
 
@@ -321,16 +332,18 @@ when false:
       printV(n[i], depth & "  ")
 
 proc addPatch(kxi: KaraxInstance; ka: PatchKind; parenta, currenta: Node;
-              na: VNode) =
+              na, oldNode: VNode) =
   let L = kxi.patchLen
   if L >= kxi.patches.len:
     # allocate more space:
-    kxi.patches.add(Patch(k: ka, parent: parenta, current: currenta, n: na))
+    kxi.patches.add(Patch(k: ka, parent: parenta, current: currenta,
+                          newNode: na, oldNode: oldNode))
   else:
     kxi.patches[L].k = ka
     kxi.patches[L].parent = parenta
     kxi.patches[L].current = currenta
-    kxi.patches[L].n = na
+    kxi.patches[L].newNode = na
+    kxi.patches[L].oldNode = oldNode
   inc kxi.patchLen
 
 proc addPatchV(kxi: KaraxInstance; parent: VNode; pos: int; newChild: VNode) =
@@ -344,26 +357,35 @@ proc addPatchV(kxi: KaraxInstance; parent: VNode; pos: int; newChild: VNode) =
     kxi.patchesV[L].pos = pos
   inc kxi.patchLenV
 
+proc moveDom(dest, src: VNode) =
+  dest.dom = src.dom
+  src.dom = nil
+  assert dest.len == src.len
+  for i in 0..<dest.len:
+    moveDom(dest[i], src[i])
+
 proc applyPatch(kxi: KaraxInstance) =
   for i in 0..<kxi.patchLen:
     let p = kxi.patches[i]
     case p.k
     of pkReplace:
-      let nn = vnodeToDom(p.n, kxi)
+      let nn = toDom(p.newNode, useAttachedNode = true, kxi)
       if p.parent == nil:
         replaceById(kxi.rootId, nn)
       else:
         p.parent.replaceChild(nn, p.current)
+    of pkSame:
+      moveDom(p.newNode, p.oldNode)
     of pkRemove:
       p.parent.removeChild(p.current)
     of pkAppend:
-      let nn = vnodeToDom(p.n, kxi)
+      let nn = toDom(p.newNode, useAttachedNode = true, kxi)
       p.parent.appendChild(nn)
     of pkInsertBefore:
-      let nn = vnodeToDom(p.n, kxi)
+      let nn = toDom(p.newNode, useAttachedNode = true, kxi)
       p.parent.insertBefore(nn, p.current)
     of pkDetach:
-      let n = p.n
+      let n = p.oldNode
       if n.id != nil: kxi.byId.del(n.id)
       if n.kind == VNodeKind.component:
         let x = VComponent(n)
@@ -377,16 +399,38 @@ proc applyPatch(kxi: KaraxInstance) =
     assert p.newChild.dom != nil
   kxi.patchLenV = 0
 
-proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): EqResult =
+# ASSUME: We patch both the virtual DOM and the real DOM and throw away
+# the newly produced DOM. Thus on updates like 'newNode.dom = oldNode.dom'
+# are required. The only exception is when the top level node is replaced.
+# Then we have to take the new virtual DOM. In fact, we trigger a full DOM
+# rebuild then. However, we don't have to consider old event handlers then
+# so everything stays simple.
+# We also do not produce "Patch sets" anymore, everything is done as simply
+# as possible. Ok, let's assume that we seek to update event handler lists:
+# The new node has captures to itself or to other new nodes, never to old
+# nodes! --> We cannot ever use the old VDOM, we have to use the new virtual
+# DOM. For identical nodes we need to take over the .dom field from the old
+# node since we don't recompute them. This must be done recursively. In
+# vnodeToDom we have to check whether the 'dom' field was already set. If so,
+# There is nothing to do.
+# "Similar" nodes can have the opposite effect; consider
+#
+# AAAABAAAA
+# AAAACDAAAA
+#
+# In this example B did change to C and 'D' is new. However, replacing B by
+# CD is fine.
+#
+
+
+proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance) =
   when defined(stats):
     if kxi.recursion > 100:
-      echo "newNode ", newNode.kind, " oldNode ", oldNode.kind, " eq ", eq(newNode, oldNode)
+      echo "newNode ", newNode.kind, " oldNode ", oldNode.kind, " eq ", eq(newNode, oldNode, false)
       if oldNode.kind == VNodeKind.text:
         echo oldNode.text
-      #return
-      #doAssert false, "overflow!"
     inc kxi.recursion
-  result = eq(newNode, oldNode)
+  let result = eq(newNode, oldNode, false)
   case result
   of componentsIdentical:
     kxi.components.add ComponentPair(oldNode: VComponent(oldNode),
@@ -402,92 +446,56 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance): E
         oldNode.text = newNode.text
         oldNode.dom.nodeValue = newNode.text
 
-    if newNode.events.len != 0 or oldNode.events.len != 0:
-      mergeEvents(newNode, oldNode, kxi)
-    when false:
-      if oldNode.kind == VNodeKind.input or oldNode.kind == VNodeKind.textarea:
-        if oldNode.text != newNode.text:
-          oldNode.text = newNode.text
-          oldNode.dom.value = newNode.text
+    #if newNode.events.len != 0 or oldNode.events.len != 0:
+    #  mergeEvents(newNode, oldNode, kxi)
 
     let newLength = newNode.len
     let oldLength = oldNode.len
-    if newLength == 0 and oldLength == 0: return result
+    if newLength == 0 and oldLength == 0: return
     let minLength = min(newLength, oldLength)
 
     assert oldNode.kind == newNode.kind
     var commonPrefix = 0
-    let isSpecial = oldNode.kind == VNodeKind.component or
-                    oldNode.kind == VNodeKind.vthunk or
-                    oldNode.kind == VNodeKind.dthunk
 
-    template eqAndUpdate(a: VNode; i: int; b: VNode; j: int; info, action: untyped) =
-      let oldLen = kxi.patchLen
-      let oldLenV = kxi.patchLenV
-      assert i < a.len
-      assert j < b.len
-      let r = if isSpecial:
-                diff(a[i], b[j], parent, current, kxi)
-              else:
-                diff(a[i], b[j], current, current.childNodes[j], kxi)
-      case r
-      of identical, componentsIdentical, similar:
-        a[i] = b[j]
-        action
-      of usenewNode:
-        kxi.addPatchV(b, j, a[i])
-        action
-        # unfortunately, we need to propagate the changes upwards:
-        result = useNewNode
-      of different:
-        # undo what 'diff' would have done:
-        kxi.patchLen = oldLen
-        kxi.patchLenV = oldLenV
-        if result != different: result = r
-        break
     # compute common prefix:
     while commonPrefix < minLength:
-      eqAndUpdate(newNode, commonPrefix, oldNode, commonPrefix, cstring"prefix"):
+      if eq(newNode[commonPrefix], oldNode[commonPrefix], true) == identical:
+        kxi.addPatch(pkSame, nil, nil, newNode[commonPrefix], oldNode[commonPrefix])
         inc commonPrefix
+      else:
+        break
 
     # compute common suffix:
     var oldPos = oldLength - 1
     var newPos = newLength - 1
     while oldPos >= commonPrefix and newPos >= commonPrefix:
-      eqAndUpdate(newNode, newPos, oldNode, oldPos, cstring"suffix"):
+      if eq(newNode[newPos], oldNode[oldPos], true) == identical:
+        kxi.addPatch(pkSame, nil, nil, newNode[newPos], oldNode[oldPos])
         dec oldPos
         dec newPos
+      else:
+        break
 
     let pos = min(oldPos, newPos) + 1
     # now the different children are in commonPrefix .. pos - 1:
     for i in commonPrefix..pos-1:
-      let r = diff(newNode[i], oldNode[i], current, current.childNodes[i], kxi)
-      if r == usenewNode:
-        #oldNode[i] = newNode[i]
-        kxi.addPatchV(oldNode, i, newNode[i])
-      elif r != different:
-        newNode[i] = oldNode[i]
-      #else:
-      #  result = usenewNode
+      diff(newNode[i], oldNode[i], current, current.childNodes[i], kxi)
 
     if oldPos + 1 == oldLength:
       for i in pos..newPos:
-        kxi.addPatch(pkAppend, current, nil, newNode[i])
-        result = usenewNode
+        kxi.addPatch(pkAppend, current, nil, newNode[i], nil)
     else:
       let before = current.childNodes[oldPos + 1]
       for i in pos..newPos:
-        kxi.addPatch(pkInsertBefore, current, before, newNode[i])
-        result = usenewNode
+        kxi.addPatch(pkInsertBefore, current, before, newNode[i], nil)
     # XXX call 'attach' here?
     for i in pos..oldPos:
       detach(oldNode[i])
       #doAssert i < current.childNodes.len
-      kxi.addPatch(pkRemove, current, current.childNodes[i], nil)
-      result = usenewNode
+      kxi.addPatch(pkRemove, current, current.childNodes[i], nil, nil)
   of different:
     detach(oldNode)
-    kxi.addPatch(pkReplace, parent, current, newNode)
+    kxi.addPatch(pkReplace, parent, current, newNode, nil)
   of usenewNode: doAssert(false, "eq returned usenewNode")
   when defined(stats):
     dec kxi.recursion
@@ -517,24 +525,25 @@ proc applyComponents(kxi: KaraxInstance) =
       x.renderedVersion = x.version
       if oldExpanded == nil:
         detach(x)
-        kxi.addPatch(pkReplace, parent, current, x.expanded)
+        kxi.addPatch(pkReplace, parent, current, x.expanded, nil)
         when defined(karaxDebug):
           echo "Component ", newNode.text, ": old expansion didn't exist"
       else:
-        let res = diff(x.expanded, oldExpanded, parent, current, kxi)
-        if res == usenewNode:
-          when defined(karaxDebug):
-            echo "Component ", newNode.text, ": re-render triggered a DOM change (case A)"
-          discard "diff created a patchset for us, so this is fine"
-        elif res != different:
-          when defined(karaxDebug):
-            echo "Component ", newNode.text, ": re-render triggered no DOM change whatsoever"
-          x.expanded = oldExpanded
-          assert oldExpanded.dom != nil, "old expanded.dom is nil"
-        else:
-          when defined(karaxDebug):
-            echo "Component ", newNode.text, ": re-render triggered a DOM change (case B)"
-          assert x.expanded.dom != nil, "expanded.dom is nil"
+        diff(x.expanded, oldExpanded, parent, current, kxi)
+        when false:
+          if res == usenewNode:
+            when defined(karaxDebug):
+              echo "Component ", newNode.text, ": re-render triggered a DOM change (case A)"
+            discard "diff created a patchset for us, so this is fine"
+          elif res != different:
+            when defined(karaxDebug):
+              echo "Component ", newNode.text, ": re-render triggered no DOM change whatsoever"
+            x.expanded = oldExpanded
+            assert oldExpanded.dom != nil, "old expanded.dom is nil"
+          else:
+            when defined(karaxDebug):
+              echo "Component ", newNode.text, ": re-render triggered a DOM change (case B)"
+            assert x.expanded.dom != nil, "expanded.dom is nil"
     inc i
   setLen(kxi.components, 0)
 
@@ -549,7 +558,7 @@ when defined(stats):
 proc runDel*(kxi: KaraxInstance; parent: VNode; position: int) =
   detach(parent[position])
   let current = parent.dom
-  kxi.addPatch(pkRemove, current, current.childNodes[position], nil)
+  kxi.addPatch(pkRemove, current, current.childNodes[position], nil, nil)
   parent.delete(position)
   applyPatch(kxi)
   doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
@@ -557,11 +566,11 @@ proc runDel*(kxi: KaraxInstance; parent: VNode; position: int) =
 proc runIns*(kxi: KaraxInstance; parent, kid: VNode; position: int) =
   let current = parent.dom
   if position >= parent.len:
-    kxi.addPatch(pkAppend, current, nil, kid)
+    kxi.addPatch(pkAppend, current, nil, kid, nil)
     parent.add(kid)
   else:
     let before = current.childNodes[position]
-    kxi.addPatch(pkInsertBefore, current, before, kid)
+    kxi.addPatch(pkInsertBefore, current, before, kid, nil)
     parent.insert(kid, position)
   applyPatch(kxi)
   doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
@@ -569,7 +578,7 @@ proc runIns*(kxi: KaraxInstance; parent, kid: VNode; position: int) =
 proc runDiff*(kxi: KaraxInstance; oldNode, newNode: VNode) =
   let olddom = oldNode.dom
   doAssert olddom != nil
-  discard diff(newNode, oldNode, nil, olddom, kxi)
+  diff(newNode, oldNode, nil, olddom, kxi)
   # this is a bit nasty: Since we cannot patch the 'parent' of
   # the current VNode (because we don't store it at all!), we
   # need to override the fields individually:
@@ -591,13 +600,12 @@ proc dodraw(kxi: KaraxInstance) =
   newtree.id = kxi.rootId
   kxi.toFocus = nil
   if kxi.currentTree == nil:
-    let asdom = vnodeToDom(newtree, kxi)
+    let asdom = toDom(newtree, useAttachedNode = true, kxi)
     replaceById(kxi.rootId, asdom)
   else:
     doAssert same(kxi.currentTree, document.getElementById(kxi.rootId))
     let olddom = document.getElementById(kxi.rootId)
-    discard diff(newtree, kxi.currentTree, nil, olddom, kxi)
-    #kout cstring"patch len ", patches.len
+    diff(newtree, kxi.currentTree, nil, olddom, kxi)
   when defined(profileKarax):
     echo "<<<<<<<<<<<<<<"
     echa reasons
@@ -768,3 +776,6 @@ proc toChecked*(checked: bool): cstring =
 
 proc toDisabled*(disabled: bool): cstring =
   (if disabled: cstring"disabled" else: cstring(nil))
+
+proc vnodeToDom*(n: VNode; kxi: KaraxInstance = nil): Node =
+  result = toDom(n, useAttachedNode = false, kxi)
diff --git a/tests/difftest.nim b/tests/difftest.nim
index fca3391..aa2a3c0 100644
--- a/tests/difftest.nim
+++ b/tests/difftest.nim
@@ -22,15 +22,19 @@ proc shortRepr(n: VNode): string =
 var err = 0
 
 proc doDiff(a, b: VNode; expected: varargs[string]) =
-  discard diff(b, a, nil, vnodeToDom(a, kxi), kxi)
+  diff(b, a, nil, vnodeToDom(a, kxi), kxi)
+  var j = 0
   for i in 0..<kxi.patchLen:
-    let p = $kxi.patches[i].k & " " & shortRepr(kxi.patches[i].n)
-    if i >= expected.len:
-      echo "patches differ; expected nothing but got: ", p
-      inc err
-    elif p != expected[i]:
-      echo "patches differ; expected ", expected[i], " but got: ", p
-      inc err
+    if kxi.patches[i].k != pkSame:
+      let n = if kxi.patches[i].k == pkDetach: kxi.patches[i].oldNode else: kxi.patches[i].newNode
+      let p = $kxi.patches[i].k & " " & shortRepr(n)
+      if j >= expected.len:
+        echo "patches differ; expected nothing but got: ", p
+        inc err
+      elif p != expected[j]:
+        echo "patches differ; expected ", expected[i], " but got: ", p
+        inc err
+      inc j
   #hasDom(kxi.currentTree)
   kxi.patchLen = 0
 

From 65e305e6e9a1ffd79e8f070e3b18e223cbd02320 Mon Sep 17 00:00:00 2001
From: Dmitry Matveyev <katar38@gmail.com>
Date: Mon, 9 Sep 2019 12:15:19 +0300
Subject: [PATCH 218/264] Fix script src path for html files to be up to date
 with readme (#114)

---
 examples/carousel/carousel.html     | 2 +-
 examples/mediaplayer/playerapp.html | 2 +-
 examples/scrollapp/scrollapp.html   | 2 +-
 examples/todoapp/todoapp.html       | 2 +-
 experiments/ajaxtest.html           | 2 +-
 experiments/echartstest.html        | 2 +-
 experiments/refs/demo.html          | 2 +-
 experiments/scrollapp.html          | 2 +-
 karax/tools/karun.nim               | 5 ++---
 tests/diffDomTests.html             | 2 +-
 tests/domEventTests.html            | 2 +-
 11 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/examples/carousel/carousel.html b/examples/carousel/carousel.html
index 979dd38..464f960 100644
--- a/examples/carousel/carousel.html
+++ b/examples/carousel/carousel.html
@@ -9,7 +9,7 @@
 
 <div id="ROOT" />
 
-<script type="text/javascript" src="nimcache/carousel.js"></script>
+<script type="text/javascript" src="carousel.js"></script>
 
 </body>
 </html>
diff --git a/examples/mediaplayer/playerapp.html b/examples/mediaplayer/playerapp.html
index 9e076e6..7800d32 100644
--- a/examples/mediaplayer/playerapp.html
+++ b/examples/mediaplayer/playerapp.html
@@ -9,7 +9,7 @@
 
 <div id="ROOT" />
 
-<script type="text/javascript" src="nimcache/playerapp.js"></script>
+<script type="text/javascript" src="playerapp.js"></script>
 
 </body>
 </html>
diff --git a/examples/scrollapp/scrollapp.html b/examples/scrollapp/scrollapp.html
index 1ff8b1b..f7ca085 100644
--- a/examples/scrollapp/scrollapp.html
+++ b/examples/scrollapp/scrollapp.html
@@ -9,7 +9,7 @@
 
 <div id="ROOT" />
 
-<script type="text/javascript" src="nimcache/scrollapp.js"></script>
+<script type="text/javascript" src="scrollapp.js"></script>
 
 </body>
 </html>
diff --git a/examples/todoapp/todoapp.html b/examples/todoapp/todoapp.html
index 488a3bf..bec9d65 100644
--- a/examples/todoapp/todoapp.html
+++ b/examples/todoapp/todoapp.html
@@ -10,7 +10,7 @@
 
 <div id="ROOT" />
 
-<script type="text/javascript" src="nimcache/todoapp.js"></script>
+<script type="text/javascript" src="todoapp.js"></script>
 
 </body>
 </html>
diff --git a/experiments/ajaxtest.html b/experiments/ajaxtest.html
index 39062ad..2927a18 100644
--- a/experiments/ajaxtest.html
+++ b/experiments/ajaxtest.html
@@ -9,5 +9,5 @@
 
 <div id="ROOT" />
 
-<script type="text/javascript" src="nimcache/ajaxtest.js"></script>
+<script type="text/javascript" src="ajaxtest.js"></script>
 </html>
diff --git a/experiments/echartstest.html b/experiments/echartstest.html
index fd510bd..8c9b225 100644
--- a/experiments/echartstest.html
+++ b/experiments/echartstest.html
@@ -10,5 +10,5 @@
 <div id="ROOT" />
 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.js"></script>
-<script type="text/javascript" src="nimcache/echartstest.js"></script>
+<script type="text/javascript" src="echartstest.js"></script>
 </html>
diff --git a/experiments/refs/demo.html b/experiments/refs/demo.html
index e1fe419..941333a 100644
--- a/experiments/refs/demo.html
+++ b/experiments/refs/demo.html
@@ -8,6 +8,6 @@
 
 <body id="body">
   <div id="ROOT"></div>
-  <script type="text/javascript" src="nimcache/demo.js"></script>
+  <script type="text/javascript" src="demo.js"></script>
 </body>
 </html>
diff --git a/experiments/scrollapp.html b/experiments/scrollapp.html
index ad3ce2f..8b909f1 100644
--- a/experiments/scrollapp.html
+++ b/experiments/scrollapp.html
@@ -10,7 +10,7 @@
 
 <div id="ROOT" />
 
-<script type="text/javascript" src="nimcache/scrollapp.js"></script>
+<script type="text/javascript" src="scrollapp.js"></script>
 <script type="text/javascript">
   onload(window.location.pathname.split('/')[1])
 </script>
diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index 1d266bf..c2ca647 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -35,9 +35,8 @@ proc exec(cmd: string) =
 
 proc build(name: string, rest: string, selectedCss: string, run: bool) =
   echo("Building...")
-  createDir("nimcache")
-  exec("nim js --out:nimcache/" & name & ".js " & rest)
-  let dest = "nimcache" / name & ".html"
+  exec("nim js --out:" & name & ".js " & rest)
+  let dest = name & ".html"
   writeFile(dest, html % [name, selectedCss])
   if run: openDefaultBrowser(dest)
 
diff --git a/tests/diffDomTests.html b/tests/diffDomTests.html
index cb6ab28..f8f0e18 100644
--- a/tests/diffDomTests.html
+++ b/tests/diffDomTests.html
@@ -9,7 +9,7 @@
 
 <div id="ROOT" />
 
-<script type="text/javascript" src="nimcache/diffDomTests.js"></script>
+<script type="text/javascript" src="diffDomTests.js"></script>
 <script type="text/javascript">
   onload(window.location.pathname.split('/')[1])
 </script>
diff --git a/tests/domEventTests.html b/tests/domEventTests.html
index 26e161f..dbbff0d 100644
--- a/tests/domEventTests.html
+++ b/tests/domEventTests.html
@@ -8,6 +8,6 @@
 </head>
 <body id="body">
   <div id="ROOT"></div>
-  <script src="nimcache/domEventTests.js" type="text/javascript"></script>
+  <script src="domEventTests.js" type="text/javascript"></script>
 </body>
 </html>

From 023f5d246339415c5aa727f8b44e2689d86ed88f Mon Sep 17 00:00:00 2001
From: Dmitry Matveyev <katar38@gmail.com>
Date: Fri, 13 Sep 2019 12:05:28 +0300
Subject: [PATCH 219/264] Fix typos and add small clarification to
 docs/docs.rst (#115)

---
 docs/docs.rst | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/docs.rst b/docs/docs.rst
index 8298ba9..3eec1a4 100644
--- a/docs/docs.rst
+++ b/docs/docs.rst
@@ -10,17 +10,17 @@ and some extensions that allow for an efficient component system.
 These extensions are:
 
 ``VNodeKind.int``
-     The node havs a single integer field.
+     The node has a single integer field.
 
 ``VNodeKind.bool``
      The node has a single boolean field.
 
-``VNodeKint.vthunk``
+``VNodeKind.vthunk``
      The node is a `virtual thunk`:idx:. This means there is a
      function attached to it that produces the ``VNode`` structure
      on demand.
 
-``VNodeKint.dthunk``
+``VNodeKind.dthunk``
      The node is a `DOM thunk`:idx:. This means there is a
      function attached to it that produces the ``Node`` DOM structure
      on demand.
@@ -53,6 +53,6 @@ Event system
 
 Karax does not abstract over the event system the DOM offers much: The same
 ``Event`` structure is used. Every callback has the
-signature ``proc (ev: Event; n: VNode)``.
+signature ``proc (ev: Event; n: VNode)`` or empty ``proc ()``.
 
 

From 7a7cdd8e76eca9525fe099ba76af04b483c13f2b Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Sat, 21 Sep 2019 14:17:41 -0700
Subject: [PATCH 220/264] add onload (#116)

---
 karax/vdom.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 7f8dcb7..321a455 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -89,9 +89,9 @@ type
     onanimationiteration,
 
     onkeyupenter, ## vdom extension: an input field received the ENTER key press
-    onkeyuplater  ## vdom extension: a key was pressed and some time
+    onkeyuplater,  ## vdom extension: a key was pressed and some time
                   ## passed (useful for on-the-fly text completions)
-
+    onload, # img
 
 macro buildLookupTables(): untyped =
   var a = newTree(nnkBracket)

From e6877a51987c936916dd3f51e290f892bbd4da09 Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Sat, 21 Sep 2019 14:18:05 -0700
Subject: [PATCH 221/264] fixes #119 (#120)

---
 karax/karax.nim | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 6c69325..ecc57fe 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -254,7 +254,10 @@ proc eq(a, b: VNode; recursive: bool): EqResult =
     for i in 0..<a.len:
       if eq(a[i], b[i], recursive) == different: return different
   elif a.kind == VNodeKind.dthunk:
-    return identical
+    if a.dom == b.dom:
+      return identical
+    else: # fix #119
+      return different
   elif a.kind == VNodeKind.verbatim:
     if a.text != b.text:
       return different

From 8dfb8727cd79299f032e65f6aa4ce21d10879cbf Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 26 Sep 2019 21:16:11 +0200
Subject: [PATCH 222/264] fixes #113

---
 karax/kajax.nim | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/karax/kajax.nim b/karax/kajax.nim
index a9a8a2a..4235b50 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -61,10 +61,7 @@ proc uploadFile*(url: cstring, file: Blob, onprogress :proc(data: ProgressEvent)
     ajax.setRequestHeader(a, b)
   ajax.statechange proc() =
     if this.readyState == 4:
-      if this.status == 200:
-        contWrapper(this.status, this.responseText)
-      else:
-        contWrapper(this.status, this.responseText)
+      contWrapper(this.status, this.responseText)
   ajax.upload.onprogress = onprogress
   ajax.send(formData.to(cstring))
 

From 983cc8882bc2b818ae34691148ffa801506fed02 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 26 Sep 2019 21:19:15 +0200
Subject: [PATCH 223/264] fixes #101

---
 karax/karaxdsl.nim | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/karax/karaxdsl.nim b/karax/karaxdsl.nim
index 81ba99d..ebc6e56 100644
--- a/karax/karaxdsl.nim
+++ b/karax/karaxdsl.nim
@@ -11,8 +11,8 @@ const
 
 proc getName(n: NimNode): string =
   case n.kind
-  of nnkIdent:
-    result = $n.ident
+  of nnkIdent, nnkSym:
+    result = $n
   of nnkAccQuoted:
     result = ""
     for i in 0..<n.len:
@@ -27,6 +27,8 @@ proc getName(n: NimNode): string =
       expectKind(n, nnkIdent)
   of nnkDotExpr:
     result = getName(n[0]) & "." & getName(n[1])
+  of nnkOpenSymChoice, nnkClosedSymChoice:
+    result = getName(n[0])
   else:
     #echo repr n
     expectKind(n, nnkIdent)

From 9cf08c4f9c9c3cc8a66d1ad503965c0cff1d796d Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Fri, 27 Sep 2019 23:04:17 +0200
Subject: [PATCH 224/264] fixes a critical event handling regression

---
 karax/karax.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index ecc57fe..4ebb855 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -449,8 +449,8 @@ proc diff(newNode, oldNode: VNode; parent, current: Node; kxi: KaraxInstance) =
         oldNode.text = newNode.text
         oldNode.dom.nodeValue = newNode.text
 
-    #if newNode.events.len != 0 or oldNode.events.len != 0:
-    #  mergeEvents(newNode, oldNode, kxi)
+    if newNode.events.len != 0 or oldNode.events.len != 0:
+      mergeEvents(newNode, oldNode, kxi)
 
     let newLength = newNode.len
     let oldLength = oldNode.len

From 6a0c2871adfa24c3b2083239262df8c2073f60b6 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Sat, 28 Sep 2019 23:25:53 +0200
Subject: [PATCH 225/264] added an experimental avoidDomDiffing API; refs #121

---
 karax/karax.nim | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/karax/karax.nim b/karax/karax.nim
index 4ebb855..dffa98b 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -595,6 +595,14 @@ proc runDiff*(kxi: KaraxInstance; oldNode, newNode: VNode) =
 var onhashChange {.importc: "window.onhashchange".}: proc()
 var hashPart {.importc: "window.location.hash".}: cstring
 
+proc avoidDomDiffing*(kxi: KaraxInstance = kxi) =
+  ## enforce a full redraw for the next redraw operation.
+  ## This can be used as a temporary way to workaround DOM diffing
+  ## problems or to avoid the DOM diffing when you already know
+  ## it should use a completely new DOM.
+  ## This is an experimental API.
+  kxi.currentTree = nil
+
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
   let rdata = RouterData(hashPart: hashPart)

From db4acbf7d64549196b58928bb51c15252482f91c Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Mon, 30 Sep 2019 00:01:07 -0700
Subject: [PATCH 226/264] fixes #121 (#122)

---
 karax/karax.nim | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index dffa98b..77befcd 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -376,7 +376,10 @@ proc applyPatch(kxi: KaraxInstance) =
       if p.parent == nil:
         replaceById(kxi.rootId, nn)
       else:
-        p.parent.replaceChild(nn, p.current)
+        if p.current.parentNode == p.parent:
+          p.parent.replaceChild(nn, p.current)
+        else: # fix #121
+          p.parent.appendChild(nn)
     of pkSame:
       moveDom(p.newNode, p.oldNode)
     of pkRemove:

From 1911a1cfe0db08d840fcfd245e541342f6289836 Mon Sep 17 00:00:00 2001
From: Jairo <kidandcat@gmail.com>
Date: Thu, 10 Oct 2019 17:23:45 +0200
Subject: [PATCH 227/264] Update karun.nim (#124)

Add common meta tag for Mobile first development
---
 karax/tools/karun.nim | 1 +
 1 file changed, 1 insertion(+)

diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index c2ca647..2b948b4 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -19,6 +19,7 @@ const
 <!DOCTYPE html>
 <html>
 <head>
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
   <title>$1</title>
   $2
 </head>

From f6bda9ae892ec93e728e56c260f6628d4f404a28 Mon Sep 17 00:00:00 2001
From: Jairo <kidandcat@gmail.com>
Date: Tue, 12 Nov 2019 10:18:08 +0100
Subject: [PATCH 228/264] Reactive value (#129)

Change proposed in https://github.com/pragmagic/karax/issues/61#issuecomment-522233192
---
 karax/karaxdsl.nim | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/karax/karaxdsl.nim b/karax/karaxdsl.nim
index ebc6e56..451632c 100644
--- a/karax/karaxdsl.nim
+++ b/karax/karaxdsl.nim
@@ -126,6 +126,8 @@ proc tcall2(n, tmpContext: NimNode): NimNode =
             result.add newDotAsgn(tmp, key, newCall("style", toKstring x[1]))
           elif key in SpecialAttrs:
             result.add newDotAsgn(tmp, key, x[1])
+            if key == "value":
+              result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
           elif eqIdent(key, "setFocus"):
             result.add newCall(key, tmp, x[1], ident"kxi")
           elif eqIdent(key, "events"):

From 7440393d3a99c8f0bb49a4380fb84a7626b76951 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=B9i=20Th=C3=A0nh=20Nh=C3=A2n?= <hi@imnhan.com>
Date: Wed, 4 Mar 2020 16:02:03 +0700
Subject: [PATCH 229/264] Self-closing tags (#133) (#134)

---
 karax/vdom.nim | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 321a455..3f44673 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -45,6 +45,10 @@ type
     keygen, output, progress, meter,
     details, summary, command, menu
 
+const selfClosing = {area, base, br, col, embed, hr, img, input,
+  link, meta, param, source, track, wbr}
+
+
 type
   EventKind* {.pure.} = enum ## The events supported by the virtual DOM.
     onclick, ## An element is clicked.
@@ -434,6 +438,8 @@ proc add*(result: var string, n: VNode, indent = 0, indWidth = 2) =
       result.add("</")
       result.add(kind)
       result.add(">")
+    elif n.kind in selfClosing:
+      result.add(" />")
     else:
       result.add(">")
       result.add("</")

From 0a7136b8fc2ef06093631e537aece42c1f9b17ed Mon Sep 17 00:00:00 2001
From: hitoshihrm <59504957+HitoshiHRM@users.noreply.github.com>
Date: Thu, 12 Mar 2020 17:23:07 +0900
Subject: [PATCH 230/264] 3 tiny changes for "All Done" button. (#136)

1."onAllDone" callback fixation.
Because the callback deletes all tasks instead of making them done, fixed.

2.Retouching checkbox and label property.
Because a checkbox didn't work and label did'nt affect the checkbox, I set
the callback on checkbox, and rename label's "for" property.

3.Adding Global var "doneswitch" for convinience.
I guess the button should be able to make "All Done" and "All Undone"
because the checkbox is not a button. So make it done, undone button
interfaced with the checkbox's display.
---
 examples/todoapp/todoapp.nim | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/todoapp/todoapp.nim b/examples/todoapp/todoapp.nim
index b944de5..e3720fd 100644
--- a/examples/todoapp/todoapp.nim
+++ b/examples/todoapp/todoapp.nim
@@ -9,7 +9,7 @@ var
   selectedEntry = -1
   filter: Filter
   entriesLen: int
-
+  doneswitch = true
 const
   contentSuffix = cstring"content"
   completedSuffix = cstring"completed"
@@ -62,9 +62,9 @@ proc toggleEntry(ev: Event; n: VNode) =
   markAsCompleted(id, not isCompleted(id))
 
 proc onAllDone(ev: Event; n: VNode) =
-  clear()
-  selectedEntry = -1
-
+  for i in 0..<entriesLen:
+    markAsCompleted(i, doneswitch)
+  doneswitch = not doneswitch
 proc clearCompleted(ev: Event, n: VNode) =
   for i in 0..<entriesLen:
     if isCompleted(i): setEntryContent(i, nil)
@@ -124,8 +124,8 @@ proc createDom(data: RouterData): VNode =
     section(class = "todoapp"):
       makeHeader()
       section(class = "main"):
-        input(class = "toggle-all", `type` = "checkbox", name = "toggle")
-        label(`for` = "toggle-all", onclick = onAllDone):
+        input(class = "toggle-all", `type` = "checkbox", id = "toggle", onclick = onAllDone)
+        label(`for` = "toggle"):
           text "Mark all as complete"
         var entriesCount = 0
         var completedCount = 0

From 7f061de31739fe4239e3c76b73a30e596bd4a709 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Wed, 1 Apr 2020 17:06:53 +0200
Subject: [PATCH 231/264] prepare for Nim version 1.2

---
 karax/karax.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 77befcd..0b1da6c 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -31,7 +31,7 @@ type
 
   KaraxInstance* = ref object ## underlying karax instance. Usually you don't have
                               ## know about this.
-    rootId: cstring not nil
+    rootId: cstring
     renderer: proc (data: RouterData): VNode {.closure.}
     currentTree: VNode
     postRenderCallback: proc (data: RouterData)

From d7da2a5bd5060f37695810357152027a802f43a6 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 12 Apr 2020 00:22:46 +0200
Subject: [PATCH 232/264] fixes #139

---
 karax/karax.nim | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 0b1da6c..84ab6f5 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -78,6 +78,24 @@ template keyeventBody() =
   # Do not call redraw() here! That is already done
   # by ``karax.addEventHandler``.
 
+proc karaxEvents(d: Node): JSeq[(cstring, NativeEventHandler)] {.importcpp: "#.karaxEvents".}
+proc `karaxEvents=`(d: Node; value: JSeq[(cstring, NativeEventHandler)]) {.importcpp: "#.karaxEvents = #".}
+
+proc addEventShell(d: Node; name: cstring; h: NativeEventHandler) =
+  # The DOM is such a pathetic piece of junk that it doesn't
+  # offer 'removeAllEventHandlers()'. Hence we store the event
+  # handler twice in 'd' so that we can emulate this properly.
+  # This is required to fix bug #139.
+  d.addEventListener(name, h)
+  if d.karaxEvents == nil:
+    d.karaxEvents = newJSeq[(cstring, NativeEventHandler)]()
+  d.karaxEvents.add((name, h))
+
+proc removeAllEventHandlers(d: Node) =
+  if d.karaxEvents != nil:
+    for i in 0..<d.karaxEvents.len:
+      d.removeEventListener(d.karaxEvents[i][0], d.karaxEvents[i][1])
+
 proc wrapEvent(d: Node; n: VNode; k: EventKind;
                action: EventHandler): NativeEventHandler =
   proc stdWrapper(): NativeEventHandler =
@@ -106,13 +124,13 @@ proc wrapEvent(d: Node; n: VNode; k: EventKind;
   case k
   of EventKind.onkeyuplater:
     result = laterWrapper()
-    d.addEventListener("keyup", result)
+    d.addEventShell("keyup", result)
   of EventKind.onkeyupenter:
     result = enterWrapper()
-    d.addEventListener("keyup", result)
+    d.addEventShell("keyup", result)
   else:
     result = stdWrapper()
-    d.addEventListener(toEventName[k], result)
+    d.addEventShell(toEventName[k], result)
 
 # --------------------- DOM diff -----------------------------------------
 
@@ -312,12 +330,14 @@ proc updateAttributes(newNode, oldNode: VNode) =
 proc mergeEvents(newNode, oldNode: VNode; kxi: KaraxInstance) =
   let d = oldNode.dom
   if d != nil:
-    for i in 0..<oldNode.events.len:
-      let k = oldNode.events[i][0]
-      let name = case k
-                of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
-                else: toEventName[k]
-      d.removeEventListener(name, oldNode.events[i][2])
+    removeAllEventHandlers(d)
+    when false:
+      for i in 0..<oldNode.events.len:
+        let k = oldNode.events[i][0]
+        let name = case k
+                  of EventKind.onkeyuplater, EventKind.onkeyupenter: cstring"keyup"
+                  else: toEventName[k]
+        d.removeEventListener(name, oldNode.events[i][2])
   shallowCopy(oldNode.events, newNode.events)
   applyEvents(oldNode)
 

From 6b753009acc06d7cce670369c4c0252e12653e4a Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 12 Apr 2020 00:25:05 +0200
Subject: [PATCH 233/264] 1.1.1

---
 karax.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index 7da4f93..c6259f6 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "1.1.0"
+version       = "1.1.1"
 author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"

From 02038d40c1679c8286f145e72643651524319b89 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 12 Apr 2020 23:41:24 +0200
Subject: [PATCH 234/264] fixes #141

---
 karax/karax.nim | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 84ab6f5..5c0b41a 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -154,7 +154,9 @@ proc getVNodeById*(id: cstring; kxi: KaraxInstance = kxi): VNode =
 
 proc toDom*(n: VNode; useAttachedNode: bool; kxi: KaraxInstance = nil): Node =
   if useAttachedNode:
-    if n.dom != nil: return n.dom
+    if n.dom != nil:
+      if n.id != nil: kxi.byId[n.id] = n
+      return n.dom
   if n.kind == VNodeKind.text:
     result = document.createTextNode(n.text)
     attach n
@@ -383,6 +385,8 @@ proc addPatchV(kxi: KaraxInstance; parent: VNode; pos: int; newChild: VNode) =
 proc moveDom(dest, src: VNode) =
   dest.dom = src.dom
   src.dom = nil
+  if dest.id != nil:
+    kxi.byId[dest.id] = dest
   assert dest.len == src.len
   for i in 0..<dest.len:
     moveDom(dest[i], src[i])

From 5f21dcdc569f59570a9948bb5659c29fa3ebe1a2 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Sun, 12 Apr 2020 23:41:55 +0200
Subject: [PATCH 235/264] 1.1.2

---
 karax.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index c6259f6..bc157ab 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "1.1.1"
+version       = "1.1.2"
 author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"

From 80f500874b71aff061739b2d1e2eadc7b2e68624 Mon Sep 17 00:00:00 2001
From: Miran <narimiran@disroot.org>
Date: Mon, 27 Apr 2020 10:59:54 +0200
Subject: [PATCH 236/264] fix deprecated stuff (#144)

---
 examples/hellouniverse.nim | 2 +-
 karax/compact.nim          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/hellouniverse.nim b/examples/hellouniverse.nim
index 9d6ebc6..c07435b 100644
--- a/examples/hellouniverse.nim
+++ b/examples/hellouniverse.nim
@@ -4,7 +4,7 @@ import random
 
 proc createDom(): VNode =
   result = buildHtml(tdiv):
-    if random(100) <= 50:
+    if rand(100) <= 50:
       text "Hello World!"
     else:
       text "Hello Universe"
diff --git a/karax/compact.nim b/karax/compact.nim
index 3363802..4e5dd6d 100644
--- a/karax/compact.nim
+++ b/karax/compact.nim
@@ -61,7 +61,7 @@ proc newname*(n: NimNode): NimNode =
     n[1] = newname(n[1])
     result = n
   elif n.kind == nnkSym:
-    result = ident($n.symbol)
+    result = ident(n.strVal)
   else:
     result = n
 

From f1cd9e606d117bf387a1ddf9e71cafd02d10a50f Mon Sep 17 00:00:00 2001
From: dawkot <97dawkot@gmail.com>
Date: Sat, 2 May 2020 13:42:53 +0200
Subject: [PATCH 237/264] Added `toSelected` (#145)

Co-authored-by: dawkot <dawkot@github.com>
---
 karax/karax.nim | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/karax/karax.nim b/karax/karax.nim
index 5c0b41a..c32e969 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -815,5 +815,8 @@ proc toChecked*(checked: bool): cstring =
 proc toDisabled*(disabled: bool): cstring =
   (if disabled: cstring"disabled" else: cstring(nil))
 
+proc toSelected*(selected: bool): cstring =
+  (if selected: cstring"selected" else: cstring(nil))
+
 proc vnodeToDom*(n: VNode; kxi: KaraxInstance = nil): Node =
   result = toDom(n, useAttachedNode = false, kxi)

From 22e2e226cb82ca4c8495d10a41545a1df0bbb3d9 Mon Sep 17 00:00:00 2001
From: tarunama <sakeharami@gmail.com>
Date: Thu, 2 Jul 2020 17:36:20 +0900
Subject: [PATCH 238/264] Refactor examples html, nim files. (#147)

* refactor: remove no need first new line

* arrange: add indent in HTML files

Co-authored-by: Takuya Yamamoto <takuya.yamamoto@tabian.co>
---
 examples/button.nim                 |  1 -
 examples/carousel/carousel.html     | 14 +++++++-------
 examples/hellouniverse.nim          |  1 -
 examples/login.nim                  |  1 -
 examples/mediaplayer/playerapp.html | 14 +++++++-------
 examples/scrollapp/scrollapp.html   | 14 +++++++-------
 examples/todoapp/todoapp.html       | 16 ++++++++--------
 examples/toychat.nim                |  1 -
 8 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/examples/button.nim b/examples/button.nim
index bd49dc3..d86fa82 100644
--- a/examples/button.nim
+++ b/examples/button.nim
@@ -1,4 +1,3 @@
-
 include karax / prelude
 
 var lines: seq[kstring] = @[]
diff --git a/examples/carousel/carousel.html b/examples/carousel/carousel.html
index 464f960..500e73a 100644
--- a/examples/carousel/carousel.html
+++ b/examples/carousel/carousel.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 
 <html>
-<head>
-  <title>Carousel app</title>
-</head>
+  <head>
+    <title>Carousel app</title>
+  </head>
 
-<body id="body">
+  <body id="body">
 
-<div id="ROOT" />
+    <div id="ROOT" />
 
-<script type="text/javascript" src="carousel.js"></script>
+    <script type="text/javascript" src="carousel.js"></script>
 
-</body>
+  </body>
 </html>
diff --git a/examples/hellouniverse.nim b/examples/hellouniverse.nim
index c07435b..8343d07 100644
--- a/examples/hellouniverse.nim
+++ b/examples/hellouniverse.nim
@@ -1,4 +1,3 @@
-
 include karax / prelude
 import random
 
diff --git a/examples/login.nim b/examples/login.nim
index 642f573..f7b9062 100644
--- a/examples/login.nim
+++ b/examples/login.nim
@@ -1,4 +1,3 @@
-
 include karax / prelude
 from sugar import `=>`
 import karax / errors
diff --git a/examples/mediaplayer/playerapp.html b/examples/mediaplayer/playerapp.html
index 7800d32..a45a2e8 100644
--- a/examples/mediaplayer/playerapp.html
+++ b/examples/mediaplayer/playerapp.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 
 <html>
-<head>
-  <title>Player app</title>
-</head>
+  <head>
+    <title>Player app</title>
+  </head>
 
-<body id="body">
+  <body id="body">
 
-<div id="ROOT" />
+    <div id="ROOT" />
 
-<script type="text/javascript" src="playerapp.js"></script>
+    <script type="text/javascript" src="playerapp.js"></script>
 
-</body>
+  </body>
 </html>
diff --git a/examples/scrollapp/scrollapp.html b/examples/scrollapp/scrollapp.html
index f7ca085..44d657e 100644
--- a/examples/scrollapp/scrollapp.html
+++ b/examples/scrollapp/scrollapp.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 
 <html>
-<head>
-  <title>Todo app</title>
-</head>
+  <head>
+    <title>Todo app</title>
+  </head>
 
-<body id="body">
+  <body id="body">
 
-<div id="ROOT" />
+    <div id="ROOT" />
 
-<script type="text/javascript" src="scrollapp.js"></script>
+    <script type="text/javascript" src="scrollapp.js"></script>
 
-</body>
+  </body>
 </html>
diff --git a/examples/todoapp/todoapp.html b/examples/todoapp/todoapp.html
index bec9d65..ab3daa7 100644
--- a/examples/todoapp/todoapp.html
+++ b/examples/todoapp/todoapp.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 
 <html>
-<head>
-  <title>Todo app</title>
-  <link rel="stylesheet" href="style.css">
-</head>
+  <head>
+    <title>Todo app</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
 
-<body id="body">
+  <body id="body">
 
-<div id="ROOT" />
+    <div id="ROOT" />
 
-<script type="text/javascript" src="todoapp.js"></script>
+    <script type="text/javascript" src="todoapp.js"></script>
 
-</body>
+  </body>
 </html>
diff --git a/examples/toychat.nim b/examples/toychat.nim
index 66c4cd0..600998c 100644
--- a/examples/toychat.nim
+++ b/examples/toychat.nim
@@ -1,4 +1,3 @@
-
 include login
 
 const

From 98a2d1ce5061b7cc28096800a1e81a79ea7d9951 Mon Sep 17 00:00:00 2001
From: Bung <crc32@qq.com>
Date: Thu, 23 Jul 2020 16:40:04 +0800
Subject: [PATCH 239/264] add static server,websocket refresh watching mode
 (#149)

* add static server,websocket refresh watching mode

* watch optional

* we dont quit when building error in watch mode

* staticDir,publicUrl configure through dot env

* remove unused import

* serve optional
---
 .gitignore                    |   2 +
 karax.nimble                  |   3 +-
 karax/tools/karun.nim         | 116 ++++++++++++++---------
 karax/tools/karun.nims        |   1 +
 karax/tools/static_server.nim | 170 ++++++++++++++++++++++++++++++++++
 5 files changed, 248 insertions(+), 44 deletions(-)
 create mode 100644 karax/tools/karun.nims
 create mode 100644 karax/tools/static_server.nim

diff --git a/.gitignore b/.gitignore
index acb4ec1..842e140 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ nimcache/
 karax/tools/karun
 *.code-workspace
 *.exe
+app.js
+app.html
diff --git a/karax.nimble b/karax.nimble
index bc157ab..a5b269c 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -8,7 +8,8 @@ license       = "MIT"
 # Dependencies
 
 requires "nim >= 0.16.1"
-
+requires "ws"
+requires "dotenv"
 skipDirs = @["examples", "experiments", "tests"]
 
 bin = @["karax/tools/karun"]
diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index 2b948b4..41410ca 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -1,21 +1,16 @@
-## Simple tool to quickly run Karax applications. Generates the HTML
-## required to run a Karax app and opens it in a browser.
-
-import os, 
-  strutils, 
-  parseopt, 
-  browsers, 
-  times, 
-  tables
-  
 
+import os, strutils, browsers,times, tables 
+import parseopt
+import threadpool
+import static_server
 
 const
   css = """
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 """
-  html = """
+
+const html = """
 <!DOCTYPE html>
 <html>
 <head>
@@ -23,33 +18,79 @@ const
   <title>$1</title>
   $2
 </head>
-<body id="body">
-<div id="ROOT" />
-<script type="text/javascript" src="$1.js"></script>
+<body id="body" class="site">
+<div id="ROOT"></div>
+<script type="text/javascript" src="/app.js"></script>
+$3
 </body>
 </html>
 """
+const websocket = """
+<script type="text/javascript">
+var ws = new WebSocket("ws://localhost:8080/ws");
+
+ws.onopen = function(evt) { 
+  console.log("Connection open ..."); 
+  ws.send("Hello WebSockets!");
+};
+
+ws.onmessage = function(evt) {
+  console.log( "Received Message: " + evt.data);
+  if(evt.data == "refresh"){
+    window.location.href = window.location.href
+  }
+};
+
+ws.onclose = function(evt) {
+  console.log("Connection closed.");
+};      
+</script>
+"""
 
 proc exec(cmd: string) =
   if os.execShellCmd(cmd) != 0:
     quit "External command failed: " & cmd
 
-proc build(name: string, rest: string, selectedCss: string, run: bool) =
+proc build(rest: string, selectedCss: string, run: bool, watch: bool) =
   echo("Building...")
-  exec("nim js --out:" & name & ".js " & rest)
-  let dest = name & ".html"
-  writeFile(dest, html % [name, selectedCss])
-  if run: openDefaultBrowser(dest)
+  let cmd = "nim js --out:" & "app" & ".js " & rest
+  if watch:
+    discard os.execShellCmd(cmd)
+  else:
+    exec cmd
+  let dest = "app" & ".html"
+  let script = if run and watch: websocket else: ""
+  writeFile(dest, html % ["app", selectedCss, script])
+  if run: openDefaultBrowser("http://localhost:8080")
+
+proc watchBuild(filePath: string, selectedCss: string, rest: string) {.thread.} = 
+  var files: Table[string, Time] = {"path": getLastModificationTime(".")}.toTable
+  while true:
+    sleep(300)
+    for path in walkDirRec("."):
+      if ".git" in path:
+        continue
+
+      if files.hasKey(path):
+        if files[path] != getLastModificationTime(path):
+          echo("File changed: " & path)
+          build(rest,selectedCss, false, true)
+          files[path] = getLastModificationTime(path)
+      else:
+        if absolutePath(path) in [absolutePath("app" & ".js"),absolutePath("app" & ".html")]:
+          continue
+        files[path] = getLastModificationTime(path)
+
+proc serve(){.thread.} =
+  serveStatic()
 
 proc main =
   var op = initOptParser()
   var rest = op.cmdLineRest
   var file = ""
   var run = false
-  var selectedCss = ""
   var watch = false
-  var files: Table[string, Time] = {"path": getLastModificationTime(".")}.toTable
-
+  var selectedCss = ""
   while true:
     op.next()
     case op.kind
@@ -59,8 +100,11 @@ proc main =
         run = true
         rest = rest.replace("--run ")
       of "css":
-        selectedCss = css
-        rest = rest.replace("--css ")
+        if op.val != "":
+          selectedCss = readFile(op.val)
+        else:
+          selectedCss = css
+        rest = rest.substr(rest.find(" "))
       else: discard
     of cmdShortOption:
       if op.key == "r":
@@ -73,25 +117,11 @@ proc main =
     of cmdEnd: break
 
   if file.len == 0: quit "filename expected"
-  let name = file.splitFile.name
-  build(name, rest, selectedCss, run)
+  if run:
+    spawn serve()
   if watch:
-    # TODO: launch http server
-    while true:
-      sleep(300)
-      for path in walkDirRec("."):
-        if ".git" in path:
-          continue
-        if files.hasKey(path):
-          if files[path] != getLastModificationTime(path):
-            echo("File changed: " & path)
-            build(name, rest, selectedCss, run)
-            files[path] = getLastModificationTime(path)
-        else:
-          files[path] = getLastModificationTime(path)
+    spawn watchBuild(file, selectedCss, rest)
+  build(rest,selectedCss, run, watch)
+  sync()
 
 main()
-
-
-
-
diff --git a/karax/tools/karun.nims b/karax/tools/karun.nims
new file mode 100644
index 0000000..8983496
--- /dev/null
+++ b/karax/tools/karun.nims
@@ -0,0 +1 @@
+switch("threads", "on")
\ No newline at end of file
diff --git a/karax/tools/static_server.nim b/karax/tools/static_server.nim
new file mode 100644
index 0000000..40375a9
--- /dev/null
+++ b/karax/tools/static_server.nim
@@ -0,0 +1,170 @@
+import net, os, strutils, uri, mimetypes, asyncnet, asyncdispatch, md5,
+       logging, httpcore, asyncfile, options
+import asynchttpserver
+from cgi import decodeUrl
+import ws,tables,times
+import dotenv
+
+type 
+  RawHeaders* = seq[tuple[key, val: string]]
+
+proc toStr(headers: Option[RawHeaders]): string =
+  return $newHttpHeaders(headers.get(@({:})))
+
+proc send(
+  request: Request, code: HttpCode, headers: Option[RawHeaders], body: string
+): Future[void] =
+  return request.respond(
+    code, body, newHttpHeaders(headers.get(@({:})))
+  )
+
+proc statusContent(request: Request, status: HttpCode, content: string,
+                   headers: Option[RawHeaders]): Future[void] =
+  try:
+    result = send(request, status, headers, content)
+    when not defined(release):
+      logging.debug("  $1 $2" % [$status, toStr(headers)])
+  except:
+    logging.error("Could not send response: $1" % osErrorMsg(osLastError()))
+
+proc sendStaticIfExists(
+  req: Request, paths: seq[string]
+): Future[HttpCode] {.async.} =
+  result = Http200
+  let mimes = newMimetypes()
+  for p in paths:
+    if existsFile(p):
+
+      var fp = getFilePermissions(p)
+      if not fp.contains(fpOthersRead):
+        return Http403
+
+      let fileSize = getFileSize(p)
+      let ext = p.splitFile.ext
+      let mimetype = mimes.getMimetype(
+        if ext.len > 0: ext[1 .. ^1]
+        else: ""
+      )
+      if fileSize < 10_000_000: # 10 mb
+        var file = readFile(p)
+
+        var hashed = getMD5(file)
+
+        # If the user has a cached version of this file and it matches our
+        # version, let them use it
+        if req.headers.hasKey("If-None-Match") and req.headers["If-None-Match"] == hashed:
+          await req.statusContent(Http304, "", none[RawHeaders]())
+        else:
+          await req.statusContent(Http200, file, some(@({
+            "Content-Type": mimetype,
+            "ETag": hashed
+          })))
+      else:
+        let headers = @({
+          "Content-Type": mimetype,
+          "Content-Length": $fileSize
+        })
+        await req.statusContent(Http200, "", some(headers))
+
+        var fileStream = newFutureStream[string]("sendStaticIfExists")
+        var file = openAsync(p, fmRead)
+        # Let `readToStream` write file data into fileStream in the
+        # background.
+        asyncCheck file.readToStream(fileStream)
+        # The `writeFromStream` proc will complete once all the data in the
+        # `bodyStream` has been written to the file.
+        while true:
+          let (hasValue, value) = await fileStream.read()
+          if hasValue:
+            await req.client.send(value)
+          else:
+            break
+        file.close()
+
+      return 
+
+  # If we get to here then no match could be found.
+  return Http404
+
+
+proc handleFileRequest(
+  req: Request
+): Future[HttpCode] {.async.} =
+  # Find static file.
+  var reqPath = cgi.decodeUrl(req.url.path)
+  var publicUrl = getEnv("publicUrl")
+  var staticDir = getEnv("staticDir")
+  if not publicUrl.endsWith("/"):
+    publicUrl = publicUrl & "/"
+  reqPath = reqPath.substr(publicUrl.len)
+  
+  let path = normalizedPath(
+    staticDir / reqPath
+  )
+
+  # Verify that this isn't outside our static dir.
+  var status = Http400
+  let pathDir = path.splitFile.dir / ""
+
+  if pathDir.startsWith(publicUrl):
+    if existsDir(path):
+      status = await sendStaticIfExists(
+        req,
+        @[path / "index.html", path / "index.htm"]
+      )
+  else:
+    status = await sendStaticIfExists(req, @[path])
+  return status
+
+proc handleWs(req: Request) {.async.} =
+  var ws = await newWebSocket(req)
+  await ws.send("Welcome to simple echo server")
+  var files: Table[string, Time] = {"path": getLastModificationTime(".")}.toTable
+  let watchedFiles = [absolutePath "app.js",absolutePath "app.html"]
+  for path in watchedFiles:
+    files[path] = getLastModificationTime(path)
+  while ws.readyState == Open:
+    await sleepAsync(500)
+    var changed = false
+    for path in watchedFiles:
+      if files[path] != getLastModificationTime(path):
+        changed = true
+        files[path] = getLastModificationTime(path)
+    if changed:
+      await ws.send("refresh")
+      changed = false
+
+
+proc serveStatic*() = 
+  if fileExists( "static.env" ):
+    var env:DotEnv
+    env = initDotEnv(getCurrentDir(), "static.env")
+    env.overload()
+  else:
+    loadEnvFromString("""
+    staticDir="./src/assets/"
+    publicUrl="public"
+    """)
+  
+  var server = newAsyncHttpServer()
+  proc cb(req: Request) {.gcsafe, async.} =
+    if req.url.path == "/ws":
+      await handleWs(req)
+    if req.url.path == "/":
+      await req.respond(Http200, readFile "app.html" )
+    elif req.url.path == "/app.js":
+      let file = absolutePath("app" & ".js")
+      if not file.fileExists:
+        logging.error("$1 not exists!" % file )
+      if fpUserRead notin os.getFilePermissions(file):
+        logging.error("Could not read $1!" % file )
+      await req.respond(Http200, readFile( file ))
+    else:
+      let status = await handleFileRequest(req)
+      if status != Http200:
+        await req.respond(status,"")
+
+  waitFor server.serve(Port(8080), cb)
+
+when isMainModule:
+  serveStatic()
\ No newline at end of file

From 7a36b19729624be0c542b903ed9da89ccf5984ed Mon Sep 17 00:00:00 2001
From: Bung <crc32@qq.com>
Date: Fri, 31 Jul 2020 23:54:05 +0800
Subject: [PATCH 240/264] watch ignore precompile style lang (#150)

---
 karax/tools/karun.nim | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index 41410ca..b29cebe 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -70,7 +70,9 @@ proc watchBuild(filePath: string, selectedCss: string, rest: string) {.thread.}
     for path in walkDirRec("."):
       if ".git" in path:
         continue
-
+      var (_, _, ext) = splitFile(path)
+      if ext in [".scss",".sass",".less",".styl",".pcss",".postcss"]:
+        continue
       if files.hasKey(path):
         if files[path] != getLastModificationTime(path):
           echo("File changed: " & path)

From 0813a7adf9047814cc6a89c1975ad3f98e0b74a6 Mon Sep 17 00:00:00 2001
From: Bung <crc32@qq.com>
Date: Thu, 27 Aug 2020 00:03:52 +0800
Subject: [PATCH 241/264] add transition events (#151)

---
 karax/vdom.nim | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 3f44673..d0ee5b5 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -97,6 +97,11 @@ type
                   ## passed (useful for on-the-fly text completions)
     onload, # img
 
+    ontransitioncancel,
+    ontransitionend,
+    ontransitionrun,
+    ontransitionstart
+
 macro buildLookupTables(): untyped =
   var a = newTree(nnkBracket)
   for i in low(VNodeKind)..high(VNodeKind):

From f0dd16ebfe26e79e069f10ed02970b07a77f4081 Mon Sep 17 00:00:00 2001
From: OctoCat <62594565+lumison@users.noreply.github.com>
Date: Mon, 28 Sep 2020 09:46:23 +0300
Subject: [PATCH 242/264] Fixed the error with password (#155)

* Fixed the error with password

* Changed to old style
---
 examples/login.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/login.nim b/examples/login.nim
index f7b9062..0350e23 100644
--- a/examples/login.nim
+++ b/examples/login.nim
@@ -17,7 +17,7 @@ const
 proc validateNotEmpty(field: kstring): proc () =
   result = proc () =
     let x = getVNodeById(field)
-    if x.text.isNil or x.text == "":
+    if x.text == "":
       errors.setError(field, field & " must not be empty")
     else:
       errors.setError(field, "")
@@ -27,7 +27,7 @@ var loggedIn: bool
 proc loginDialog(): VNode =
   result = buildHtml(tdiv):
     if not loggedIn:
-      loginField("Name :", username, "input", validateNotEmpty)
+      loginField("Name: ", username, "input", validateNotEmpty)
       loginField("Password: ", password, "password", validateNotEmpty)
       button(onclick = () => (loggedIn = true), disabled = errors.disableOnError()):
         text "Login"

From d8fe79fa4041325da07892978336eb8a27e5ac6b Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Thu, 1 Oct 2020 00:28:42 -0700
Subject: [PATCH 243/264] make vstyles.setAttr kstring overload public (#156)

---
 karax/vstyles.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax/vstyles.nim b/karax/vstyles.nim
index e2fca7d..13f9c3a 100644
--- a/karax/vstyles.nim
+++ b/karax/vstyles.nim
@@ -234,7 +234,7 @@ proc eq*(a, b: VStyle): bool =
     if a[i] != b[i]: return false
   return true
 
-proc setAttr(s: VStyle; a, value: kstring) {.noSideEffect.} =
+proc setAttr*(s: VStyle; a, value: kstring) {.noSideEffect.} =
   var i = 0
   while i < s.len:
     if s[i] == a:

From d2f88b4648e8fbff7eb207f2974daebec74c52a9 Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Thu, 1 Oct 2020 10:35:25 -0700
Subject: [PATCH 244/264] close #6 (#157)

---
 karax.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index a5b269c..ac15c06 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -7,7 +7,7 @@ license       = "MIT"
 
 # Dependencies
 
-requires "nim >= 0.16.1"
+requires "nim >= 0.18.0"
 requires "ws"
 requires "dotenv"
 skipDirs = @["examples", "experiments", "tests"]

From 5a2ea1eef9a11f6f08f7acaa8998a066176adbc8 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Thu, 1 Oct 2020 19:56:30 +0200
Subject: [PATCH 245/264] 1.1.3

---
 karax.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index ac15c06..9e29495 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "1.1.2"
+version       = "1.1.3"
 author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"

From bd18fc980ccfb7f44efb1f69a0939d2af924b6db Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Thu, 1 Oct 2020 13:13:54 -0700
Subject: [PATCH 246/264] fix #153 (#159)

---
 karax/vdom.nim    | 6 ++++++
 karax/vstyles.nim | 7 +++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index d0ee5b5..8a3dfaa 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -303,6 +303,12 @@ proc sameAttrs*(a, b: VNode): bool =
 proc addEventListener*(n: VNode; event: EventKind; handler: EventHandler) =
   n.events.add((event, handler, nil))
 
+when kstring is cstring:
+  proc len(a: kstring): int =
+    # xxx: maybe move where kstring is defined
+    # without this, `n.field.len` fails on js (non web) platform
+    if a == nil: 0 else: a.len
+
 template toStringAttr(field) =
   if n.field.len > 0:
     result.add " " & astToStr(field) & " = " & $n.field
diff --git a/karax/vstyles.nim b/karax/vstyles.nim
index 13f9c3a..a5971a9 100644
--- a/karax/vstyles.nim
+++ b/karax/vstyles.nim
@@ -235,6 +235,9 @@ proc eq*(a, b: VStyle): bool =
   return true
 
 proc setAttr*(s: VStyle; a, value: kstring) {.noSideEffect.} =
+  ## inserts (a, value) in sorted order of key `a`
+  # worst case quadratic complexity (if given styles in reverse order), hopefully
+  # not a concern assuming small cardinal
   var i = 0
   while i < s.len:
     if s[i] == a:
@@ -243,8 +246,8 @@ proc setAttr*(s: VStyle; a, value: kstring) {.noSideEffect.} =
     elif s[i] > a:
       s.add ""
       s.add ""
-      # insertion point here:
-      for j in countdown(s.len-1, i, 2):
+      # insertion point here, shift all remaining pairs by 2 indexes
+      for j in countdown(s.len-1, i+3, 2):
         s[j] = s[j-2]
         s[j-1] = s[j-3]
       s[i] = a

From 04779f85028c69574f79549387e4057af507dd5f Mon Sep 17 00:00:00 2001
From: Timothee Cour <timothee.cour2@gmail.com>
Date: Wed, 7 Oct 2020 03:23:16 -0700
Subject: [PATCH 247/264] add toCss: allows tdiv(style = "font-style: oblique;
 color: pink".toCss) (#158)

* add toCss: allows tdiv(style = "font-style: oblique; color: pink".toCss)

* fixup to work with nim c
---
 examples/hellostyle.nim | 17 +++++++++++++++++
 karax/vstyles.nim       | 24 +++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 examples/hellostyle.nim

diff --git a/examples/hellostyle.nim b/examples/hellostyle.nim
new file mode 100644
index 0000000..716c2f0
--- /dev/null
+++ b/examples/hellostyle.nim
@@ -0,0 +1,17 @@
+include karax / prelude
+import karax / vstyles
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    tdiv(style = style(StyleAttr.color, "red".cstring)):
+      text "red"
+    tdiv(style = style(StyleAttr.color, "blue")):
+      text "blue"
+    # explicit `kstring` required for varargs overload
+    tdiv(style = style((fontStyle, "italic".kstring), (color, "orange".kstring))):
+      text "italic orange"
+    # can use a string directly
+    tdiv(style = "font-style: oblique; color: pink".toCss):
+      text "oblique pink"
+
+setRenderer createDom
diff --git a/karax/vstyles.nim b/karax/vstyles.nim
index a5971a9..7097aee 100644
--- a/karax/vstyles.nim
+++ b/karax/vstyles.nim
@@ -1,5 +1,9 @@
+##[
+see examples/hellostyle.nim
+]##
 
-import macros, kbase
+import std/[macros, strutils]
+import kbase
 
 when defined(js):
   import kdom, jdict
@@ -292,6 +296,24 @@ proc style*(a: StyleAttr; val: kstring): VStyle {.noSideEffect.} =
     result[] = @[]
   result.setAttr a, val
 
+proc toCss*(a: string): VStyle =
+  ##[
+  See example in hellostyle.nim
+  Allows passing a css string directly, eg:
+  tdiv(style = style((fontStyle, "italic".kstring), (color, "orange".kstring))): discard
+  tdiv(style = "font-style: oblique; color: pink".toCss): discard
+  ]##
+  when defined(js):
+    result = newJSeq[cstring]()
+  else:
+    new(result)
+    result[] = @[]
+  for ai in a.split(";"):
+    var ai = ai.strip
+    if ai.len == 0: continue
+    let aj = ai.strip.split(":", maxsplit=1)
+    result.setAttr(aj[0], aj[1])
+
 when defined(js):
   proc setStyle(d: Style; key, val: cstring) {.importcpp: "#[#] = #", noSideEffect.}
 

From bcab551f05067a99a4c5adacd13a3531c9c6d78d Mon Sep 17 00:00:00 2001
From: Demian Florentin <demianfe@users.noreply.github.com>
Date: Thu, 22 Oct 2020 06:38:22 -0300
Subject: [PATCH 248/264] onwheel event added (#161)

---
 karax/vdom.nim | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 8a3dfaa..6668d10 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -100,8 +100,10 @@ type
     ontransitioncancel,
     ontransitionend,
     ontransitionrun,
-    ontransitionstart
-
+    ontransitionstart,
+    
+    onwheel # fires when the user rotates a wheel button on a pointing device.
+    
 macro buildLookupTables(): untyped =
   var a = newTree(nnkBracket)
   for i in low(VNodeKind)..high(VNodeKind):

From d3fc084c42d02dbcdbb639c464c0da16223af4e2 Mon Sep 17 00:00:00 2001
From: Xie Yanbo <xieyanbo@gmail.com>
Date: Fri, 30 Oct 2020 17:44:38 +0800
Subject: [PATCH 249/264] added documentation on rendering to string when using
 event handlers (#162)

---
 readme.rst | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/readme.rst b/readme.rst
index 4b8cec2..5d3e862 100644
--- a/readme.rst
+++ b/readme.rst
@@ -353,3 +353,30 @@ modules can be used since there is no JS interpreter.
     result = $vnode
 
   echo render()
+
+Generate HTML with event handlers
+=================================
+
+If you are writing a static site generator or do server-side HTML rendering
+via ``nim c``, you may want to override ``addEventHandler`` when using event
+handlers to avoid compiler complaints.
+
+Here's an example of auto submit a dropdown when a value is selected:
+
+.. code-block:: nim
+
+  template kxi(): int = 0
+  template addEventHandler(n: VNode; k: EventKind; action: string; kxi: int) =
+    n.setAttr($k, action)
+
+  let
+    names = @["nim", "c", "python"]
+    selected_name = request.params.getOrDefaul("name")
+    hello = buildHtml(html):
+      form(`method` = "get"):
+        select(name="name", onchange="this.form.submit()"):
+          for name in names:
+            if name == selected_name:
+              option(selected = ""): text name
+            else:
+              option: text name

From 40daae64e339da00b81ddd5972b16de9f8ef35aa Mon Sep 17 00:00:00 2001
From: Xie Yanbo <xieyanbo@gmail.com>
Date: Mon, 2 Nov 2020 15:17:27 +0800
Subject: [PATCH 250/264] fix typo (#163)

---
 readme.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.rst b/readme.rst
index 5d3e862..6099bd8 100644
--- a/readme.rst
+++ b/readme.rst
@@ -371,7 +371,7 @@ Here's an example of auto submit a dropdown when a value is selected:
 
   let
     names = @["nim", "c", "python"]
-    selected_name = request.params.getOrDefaul("name")
+    selected_name = request.params.getOrDefault("name")
     hello = buildHtml(html):
       form(`method` = "get"):
         select(name="name", onchange="this.form.submit()"):

From 24a037ad1959adbc3f5d0fb9cc22ae84794d3a44 Mon Sep 17 00:00:00 2001
From: Constantine Molchanov <moigagoo@live.com>
Date: Wed, 25 Nov 2020 14:28:12 +0400
Subject: [PATCH 251/264] Get rid of annoying deprecation warnings (#164)

* Get rid of annoying deprecation warnings

Changed existsFile to fileExists and existsDir to dirExists.

* Install packages during nimble develop
---
 .travis.yml                   | 2 +-
 karax/tools/static_server.nim | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 6e03ea9..2f26a5a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -16,5 +16,5 @@ before_script:
   - set -e
   - export PATH=$(pwd)/nim/bin:$(pwd):$PATH
 script:
-  - nimble develop
+  - nimble develop -y
   - nim c -r tests/tester.nim
diff --git a/karax/tools/static_server.nim b/karax/tools/static_server.nim
index 40375a9..5838777 100644
--- a/karax/tools/static_server.nim
+++ b/karax/tools/static_server.nim
@@ -33,7 +33,7 @@ proc sendStaticIfExists(
   result = Http200
   let mimes = newMimetypes()
   for p in paths:
-    if existsFile(p):
+    if fileExists(p):
 
       var fp = getFilePermissions(p)
       if not fp.contains(fpOthersRead):
@@ -107,7 +107,7 @@ proc handleFileRequest(
   let pathDir = path.splitFile.dir / ""
 
   if pathDir.startsWith(publicUrl):
-    if existsDir(path):
+    if dirExists(path):
       status = await sendStaticIfExists(
         req,
         @[path / "index.html", path / "index.htm"]
@@ -167,4 +167,4 @@ proc serveStatic*() =
   waitFor server.serve(Port(8080), cb)
 
 when isMainModule:
-  serveStatic()
\ No newline at end of file
+  serveStatic()

From 9a627985d0971d7e129dc0a791b42c4194d5ea0d Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Tue, 8 Dec 2020 18:02:59 +0100
Subject: [PATCH 252/264] added a getInputText API, cleaner and more robust
 than the .text attribute which is often updated too late in event handlers
 after a redraw

---
 examples/toychat.nim | 2 +-
 karax.nimble         | 2 +-
 karax/karax.nim      | 4 ++++
 readme.rst           | 4 ++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/examples/toychat.nim b/examples/toychat.nim
index 600998c..11ec7a4 100644
--- a/examples/toychat.nim
+++ b/examples/toychat.nim
@@ -11,7 +11,7 @@ var allMessages: seq[TextMessage] = @[]
 
 proc doSendMessage() =
   let inputField = getVNodeById(message)
-  allMessages.add(TextMessage(name: "you", content: inputField.text))
+  allMessages.add(TextMessage(name: "you", content: inputField.getInputText))
   inputField.setInputText ""
 
 proc main(): VNode =
diff --git a/karax.nimble b/karax.nimble
index 9e29495..7d95304 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "1.1.3"
+version       = "1.2.0"
 author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"
diff --git a/karax/karax.nim b/karax/karax.nim
index c32e969..5ec4f5d 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -809,6 +809,10 @@ proc setInputText*(n: VNode; s: cstring) =
   n.text = s
   if n.dom != nil: n.dom.value = s
 
+proc getInputText*(n: VNode): cstring =
+  if n.dom != nil:
+    result = n.dom.value
+
 proc toChecked*(checked: bool): cstring =
   (if checked: cstring"checked" else: cstring(nil))
 
diff --git a/readme.rst b/readme.rst
index 6099bd8..f515667 100644
--- a/readme.rst
+++ b/readme.rst
@@ -250,8 +250,8 @@ captures the ``field`` parameter:
 
   proc validateNotEmpty(field: kstring): proc () =
     result = proc () =
-      let x = getVNodeById(field)
-      if x.text.isNil or x.text == "":
+      let x = getVNodeById(field).getInputText
+      if x.isNil or x == "":
         errors.setError(field, field & " must not be empty")
       else:
         errors.setError(field, "")

From 4c06cb3204bfc89dbbdd1b4d20ca888bd61aeaa1 Mon Sep 17 00:00:00 2001
From: Araq <rumpf_a@web.de>
Date: Tue, 8 Dec 2020 18:03:14 +0100
Subject: [PATCH 253/264] 1.2.1

---
 karax.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax.nimble b/karax.nimble
index 7d95304..8712a6d 100644
--- a/karax.nimble
+++ b/karax.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "1.2.0"
+version       = "1.2.1"
 author        = "Andreas Rumpf"
 description   = "Karax is a framework for developing single page applications in Nim."
 license       = "MIT"

From 6cff2d8b05793ed245964b3c233e1d39742fd3cb Mon Sep 17 00:00:00 2001
From: Antonis Geralis <43617260+planetis-m@users.noreply.github.com>
Date: Fri, 8 Jan 2021 18:07:19 +0200
Subject: [PATCH 254/264] Refactor static_server (#169)

---
 karax/tools/static_server.nim | 131 +++++++++++++---------------------
 1 file changed, 51 insertions(+), 80 deletions(-)

diff --git a/karax/tools/static_server.nim b/karax/tools/static_server.nim
index 5838777..eeddf4f 100644
--- a/karax/tools/static_server.nim
+++ b/karax/tools/static_server.nim
@@ -1,71 +1,63 @@
-import net, os, strutils, uri, mimetypes, asyncnet, asyncdispatch, md5,
-       logging, httpcore, asyncfile, options
-import asynchttpserver
+import
+  std/[net, os, strutils, uri, mimetypes, asyncnet, asyncdispatch, md5,
+  logging, httpcore, asyncfile, asynchttpserver, tables, times]
 from cgi import decodeUrl
-import ws,tables,times
-import dotenv
+import ws, dotenv
 
-type 
+var logger = newConsoleLogger()
+addHandler(logger)
+
+when defined(release):
+  setLogFilter(lvlError)
+
+type
   RawHeaders* = seq[tuple[key, val: string]]
 
-proc toStr(headers: Option[RawHeaders]): string =
-  return $newHttpHeaders(headers.get(@({:})))
+proc toStr(headers: RawHeaders): string =
+  $newHttpHeaders(headers)
 
-proc send(
-  request: Request, code: HttpCode, headers: Option[RawHeaders], body: string
-): Future[void] =
-  return request.respond(
-    code, body, newHttpHeaders(headers.get(@({:})))
-  )
+proc send(request: Request, code: HttpCode, headers: RawHeaders,
+    body: string): Future[void] =
+  return request.respond(code, body, newHttpHeaders(headers))
 
 proc statusContent(request: Request, status: HttpCode, content: string,
-                   headers: Option[RawHeaders]): Future[void] =
+    headers: RawHeaders): Future[void] =
   try:
     result = send(request, status, headers, content)
-    when not defined(release):
-      logging.debug("  $1 $2" % [$status, toStr(headers)])
+    debug("  ", status, " ", toStr(headers))
   except:
-    logging.error("Could not send response: $1" % osErrorMsg(osLastError()))
+    error("Could not send response: ", osErrorMsg(osLastError()))
 
-proc sendStaticIfExists(
-  req: Request, paths: seq[string]
-): Future[HttpCode] {.async.} =
+proc sendStaticIfExists(req: Request, paths: seq[string]): Future[HttpCode] {.async.} =
   result = Http200
   let mimes = newMimetypes()
   for p in paths:
     if fileExists(p):
-
-      var fp = getFilePermissions(p)
-      if not fp.contains(fpOthersRead):
+      if fpOthersRead notin getFilePermissions(p):
         return Http403
-
       let fileSize = getFileSize(p)
-      let ext = p.splitFile.ext
+      let extPos = searchExtPos(p)
       let mimetype = mimes.getMimetype(
-        if ext.len > 0: ext[1 .. ^1]
-        else: ""
-      )
+        if extPos >= 0: p.substr(extPos + 1)
+        else: "")
       if fileSize < 10_000_000: # 10 mb
         var file = readFile(p)
-
         var hashed = getMD5(file)
-
         # If the user has a cached version of this file and it matches our
         # version, let them use it
-        if req.headers.hasKey("If-None-Match") and req.headers["If-None-Match"] == hashed:
-          await req.statusContent(Http304, "", none[RawHeaders]())
+        if req.headers.getOrDefault("If-None-Match") == hashed:
+          await req.statusContent(Http304, "", default(RawHeaders))
         else:
-          await req.statusContent(Http200, file, some(@({
+          await req.statusContent(Http200, file, @{
             "Content-Type": mimetype,
             "ETag": hashed
-          })))
+          })
       else:
-        let headers = @({
+        let headers = @{
           "Content-Type": mimetype,
           "Content-Length": $fileSize
-        })
-        await req.statusContent(Http200, "", some(headers))
-
+        }
+        await req.statusContent(Http200, "", headers)
         var fileStream = newFutureStream[string]("sendStaticIfExists")
         var file = openAsync(p, fmRead)
         # Let `readToStream` write file data into fileStream in the
@@ -80,38 +72,19 @@ proc sendStaticIfExists(
           else:
             break
         file.close()
-
-      return 
-
+      return
   # If we get to here then no match could be found.
   return Http404
 
-
-proc handleFileRequest(
-  req: Request
-): Future[HttpCode] {.async.} =
+proc handleFileRequest(req: Request): Future[HttpCode] {.async.} =
   # Find static file.
   var reqPath = cgi.decodeUrl(req.url.path)
-  var publicUrl = getEnv("publicUrl")
-  var staticDir = getEnv("staticDir")
-  if not publicUrl.endsWith("/"):
-    publicUrl = publicUrl & "/"
-  reqPath = reqPath.substr(publicUrl.len)
-  
-  let path = normalizedPath(
-    staticDir / reqPath
-  )
-
-  # Verify that this isn't outside our static dir.
+  var staticDir = getEnv("staticDir") # it's assumed a relative dir
   var status = Http400
-  let pathDir = path.splitFile.dir / ""
-
-  if pathDir.startsWith(publicUrl):
-    if dirExists(path):
-      status = await sendStaticIfExists(
-        req,
-        @[path / "index.html", path / "index.htm"]
-      )
+  var path = staticDir / reqPath
+  normalizePathEnd(path, false)
+  if dirExists(path):
+    status = await sendStaticIfExists(req, @[path / "index.html", path / "index.htm"])
   else:
     status = await sendStaticIfExists(req, @[path])
   return status
@@ -119,10 +92,12 @@ proc handleFileRequest(
 proc handleWs(req: Request) {.async.} =
   var ws = await newWebSocket(req)
   await ws.send("Welcome to simple echo server")
+
   var files: Table[string, Time] = {"path": getLastModificationTime(".")}.toTable
-  let watchedFiles = [absolutePath "app.js",absolutePath "app.html"]
+  let watchedFiles = [absolutePath "app.js", absolutePath "app.html"]
   for path in watchedFiles:
     files[path] = getLastModificationTime(path)
+
   while ws.readyState == Open:
     await sleepAsync(500)
     var changed = false
@@ -134,35 +109,31 @@ proc handleWs(req: Request) {.async.} =
       await ws.send("refresh")
       changed = false
 
-
-proc serveStatic*() = 
-  if fileExists( "static.env" ):
-    var env:DotEnv
+proc serveStatic*() =
+  if fileExists("static.env"):
+    var env: DotEnv
     env = initDotEnv(getCurrentDir(), "static.env")
     env.overload()
   else:
-    loadEnvFromString("""
-    staticDir="./src/assets/"
-    publicUrl="public"
-    """)
-  
+    putEnv("staticDir", "assets/")
+
   var server = newAsyncHttpServer()
   proc cb(req: Request) {.gcsafe, async.} =
     if req.url.path == "/ws":
       await handleWs(req)
     if req.url.path == "/":
-      await req.respond(Http200, readFile "app.html" )
+      await req.respond(Http200, readFile "app.html")
     elif req.url.path == "/app.js":
       let file = absolutePath("app" & ".js")
       if not file.fileExists:
-        logging.error("$1 not exists!" % file )
+        error(file, " does not exist!")
       if fpUserRead notin os.getFilePermissions(file):
-        logging.error("Could not read $1!" % file )
-      await req.respond(Http200, readFile( file ))
+        error("Could not read ", file, "!")
+      await req.respond(Http200, readFile(file))
     else:
       let status = await handleFileRequest(req)
       if status != Http200:
-        await req.respond(status,"")
+        await req.respond(status, "")
 
   waitFor server.serve(Port(8080), cb)
 

From 32de202845762607a55332c2d138aca1327bf37b Mon Sep 17 00:00:00 2001
From: Double_oxygeN <mail@double-oxygen.net>
Date: Mon, 25 Jan 2021 15:51:24 +0900
Subject: [PATCH 255/264] add picture tag as a kind of virtual DOM (#174)

---
 karax/vdom.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 6668d10..2016ca3 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -34,7 +34,7 @@ type
     kdb, sub, sup, italic = "i", bold = "b", underlined = "u",
     mark, ruby, rt, rp, bdi, dbo, span, br, wbr,
     ins, del, img, iframe, embed, `object` = "object",
-    param, video, audio, source, track, canvas, map,
+    param, video, audio, picture, source, track, canvas, map,
     area, svg, math, path, circle
 
     table, caption, colgroup, col, tbody, thead,

From 0fca6e961d69a7bb073baf10f2c27d31522abb59 Mon Sep 17 00:00:00 2001
From: Antonis Geralis <43617260+planetis-m@users.noreply.github.com>
Date: Thu, 4 Feb 2021 20:24:19 +0200
Subject: [PATCH 256/264] add all svg elements acording to the standard (#178)

---
 karax/vdom.nim | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/karax/vdom.nim b/karax/vdom.nim
index 2016ca3..8fd654e 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -34,8 +34,20 @@ type
     kdb, sub, sup, italic = "i", bold = "b", underlined = "u",
     mark, ruby, rt, rp, bdi, dbo, span, br, wbr,
     ins, del, img, iframe, embed, `object` = "object",
-    param, video, audio, picture, source, track, canvas, map,
-    area, svg, math, path, circle
+    param, video, audio, source, track, canvas, map,
+    area, math,
+
+    # SVG elements, see: https://www.w3.org/TR/SVG2/eltindex.html
+    animate, animateMotion, animateTransform, circle, clipPath, defs, desc,
+    `discard` = "discard", ellipse, feBlend, feColorMatrix, feComponentTransfer,
+    feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap,
+    feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR,
+    feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset,
+    fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence,
+    filter, foreignObject, g, image, line, linearGradient, marker, mask,
+    metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect,
+    `set` = "set", stop, svg, switch, symbol, txt = "text", textPath, tspan,
+    unknown, use, view,
 
     table, caption, colgroup, col, tbody, thead,
     tfoot, tr, td, th,
@@ -101,9 +113,9 @@ type
     ontransitionend,
     ontransitionrun,
     ontransitionstart,
-    
+
     onwheel # fires when the user rotates a wheel button on a pointing device.
-    
+
 macro buildLookupTables(): untyped =
   var a = newTree(nnkBracket)
   for i in low(VNodeKind)..high(VNodeKind):

From 8a7f05ac2a953f0d390efdcf9f045b3068cf8d60 Mon Sep 17 00:00:00 2001
From: flywind <43030857+xflywind@users.noreply.github.com>
Date: Tue, 9 Feb 2021 04:55:46 -0600
Subject: [PATCH 257/264] Update readme.rst (#184)

---
 readme.rst | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/readme.rst b/readme.rst
index f515667..8e1651b 100644
--- a/readme.rst
+++ b/readme.rst
@@ -86,7 +86,7 @@ construction so that it composes with all of Nim's control flow constructs:
 
   proc createDom(): VNode =
     result = buildHtml(tdiv):
-      if random(100) <= 50:
+      if rand(100) <= 50:
         text "Hello World!"
       else:
         text "Hello Universe"
@@ -100,7 +100,7 @@ Produces:
 .. code-block:: nim
 
   let tmp1 = tree(VNodeKind.tdiv)
-  if random(100) <= 50:
+  if rand(100) <= 50:
     add(tmp1, text "Hello World!")
   else:
     add(tmp1, text "Hello Universe")

From 12b98b2338a5cfb11f89e4fdba7e6b7b65038549 Mon Sep 17 00:00:00 2001
From: Matt Haggard <haggardii@gmail.com>
Date: Wed, 31 Mar 2021 05:43:43 -0400
Subject: [PATCH 258/264] Make 'karun -w -r ...' do watching for more than one
 iteration (#190)

---
 karax/tools/karun.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karax/tools/karun.nim b/karax/tools/karun.nim
index b29cebe..adf1ecb 100644
--- a/karax/tools/karun.nim
+++ b/karax/tools/karun.nim
@@ -59,7 +59,7 @@ proc build(rest: string, selectedCss: string, run: bool, watch: bool) =
   else:
     exec cmd
   let dest = "app" & ".html"
-  let script = if run and watch: websocket else: ""
+  let script = if watch: websocket else: ""
   writeFile(dest, html % ["app", selectedCss, script])
   if run: openDefaultBrowser("http://localhost:8080")
 

From cedd39a65fe3a03ef07474f00c55cd5171ace6ea Mon Sep 17 00:00:00 2001
From: Arham Jain <7073362+ajusa@users.noreply.github.com>
Date: Mon, 3 May 2021 04:26:15 -0400
Subject: [PATCH 259/264] Remove kout deprecation (#193)

---
 karax/karax.nim | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 5ec4f5d..bae82d2 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -7,9 +7,8 @@ export kdom.Event, kdom.Blob
 when defined(nimNoNil):
   {.experimental: "notnil".}
 
-proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
-  ## the preferred way of debugging karax applications. Now deprecated,
-  ## you can now use ``system.echo`` instead.
+proc kout*[T](x: T) {.importc: "console.log", varargs.}
+  ## The preferred way of debugging karax applications.
 
 type
   PatchKind = enum

From df828e145da578a00be4b78e9689f51a5f8f92d4 Mon Sep 17 00:00:00 2001
From: Willyboar <foundation@willyboar.com>
Date: Thu, 6 May 2021 18:57:08 +0300
Subject: [PATCH 260/264] beautify README (#194)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* beautify README

* Fix small issues

* Revert "Fix small issues"

This reverts commit 2a480addd7e2a55faaa95dd2145a6dc0aa4b95f7.

* Small Fixes vol.2

* Fix licence link

Co-authored-by: codewski <devon@codewski.com>
Co-authored-by: ΝΙΚΟΣ <nikos@Macintosh.local>
---
 readme.md  | 394 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 readme.rst | 382 ---------------------------------------------------
 2 files changed, 394 insertions(+), 382 deletions(-)
 create mode 100644 readme.md
 delete mode 100644 readme.rst

diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..affdd05
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,394 @@
+![karax](https://user-images.githubusercontent.com/22755228/117183486-482b2a00-ade0-11eb-88e6-d8eeb28951ca.png)
+
+![Travis (.com) branch](https://img.shields.io/travis/com/karaxnim/karax/master?style=for-the-badge) ![GitHub issues](https://img.shields.io/github/issues-raw/karaxnim/karax?style=for-the-badge) ![GitHub](https://img.shields.io/github/license/karaxnim/karax?style=for-the-badge) ![GitHub tag (latest SemVer)](https://img.shields.io/github/v/tag/karaxnim/karax?sort=semver&style=for-the-badge) ![https://nim-lang.org](https://img.shields.io/badge/nim-powered-ffc200?style=for-the-badge)
+ 
+# Karax
+Karax is a framework for developing single page applications in Nim.
+
+## Install
+
+To use Karax you must have nim installed. You can follow the instructions [here](https://nim-lang.org/install.html).
+
+Then you can install karax through nimble:
+``nimble install karax``
+
+## Try Karax
+To try it out, run:
+
+``cd ~/projects # Insert your favourite directory for projects``
+
+``nimble develop karax # This will clone Karax and create a link to it in ~/.nimble``
+
+``cd karax``
+
+``cd examples/todoapp``
+
+``nim js todoapp.nim``
+
+``open todoapp.html``
+
+``cd ../..``
+
+``cd examples/mediaplayer``
+
+``nim js playerapp.nim``
+
+``open playerapp.html``
+
+It uses a virtual DOM like React, but is much smaller than the existing
+frameworks plus of course it's written in Nim for Nim. No external
+dependencies! And thanks to Nim's whole program optimization only what
+is used ends up in the generated JavaScript code.
+
+
+## Goals
+
+
+- Leverage Nim's macro system to produce a framework that allows
+  for the development of applications that are boilerplate free.
+- Keep it small, keep it fast, keep it flexible.
+
+
+
+## Hello World
+
+
+The simplest Karax program looks like this:
+
+```nim
+
+include karax / prelude
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    text "Hello World!"
+
+setRenderer createDom
+```
+
+Since ``div`` is a keyword in Nim, karax choose to use ``tdiv`` instead
+here. ``tdiv`` produces a ``<div>`` virtual DOM node.
+
+As you can see, karax comes with its own ``buildHtml`` DSL for convenient
+construction of (virtual) DOM trees (of type ``VNode``). Karax provides
+a tiny build tool called ``karun`` that generates the HTML boilerplate code that
+embeds and invokes the generated JavaScript code::
+
+``nim c karax/tools/karun``
+``karax/tools/karun -r helloworld.nim``
+
+Via ``-d:debugKaraxDsl`` we can have a look at the produced Nim code by
+``buildHtml``:
+
+```nim
+
+let tmp1 = tree(VNodeKind.tdiv)
+add(tmp1, text "Hello World!")
+tmp1
+```
+(I shortened the IDs for better readability.)
+
+Ok, so ``buildHtml`` introduces temporaries and calls ``add`` for the tree
+construction so that it composes with all of Nim's control flow constructs:
+
+
+```nim
+
+include karax / prelude
+import random
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    if rand(100) <= 50:
+      text "Hello World!"
+    else:
+      text "Hello Universe"
+
+randomize()
+setRenderer createDom
+
+```
+Produces:
+
+```nim
+
+let tmp1 = tree(VNodeKind.tdiv)
+if rand(100) <= 50:
+  add(tmp1, text "Hello World!")
+else:
+  add(tmp1, text "Hello Universe")
+tmp1
+```
+
+## Event model
+
+Karax does not change the DOM's event model much, here is a program
+that writes "Hello simulated universe" on a button click:
+
+```nim
+
+include karax / prelude
+# alternatively: import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]
+
+var lines: seq[kstring] = @[]
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    button:
+      text "Say hello!"
+      proc onclick(ev: Event; n: VNode) =
+        lines.add "Hello simulated universe"
+    for x in lines:
+      tdiv:
+        text x
+
+setRenderer createDom
+```
+
+``kstring`` is Karax's alias for ``cstring`` (which stands for "compatible
+string"; for the JS target that is an immutable JavaScript string) which
+is preferred for efficiency on the JS target. However, on the native targets
+``kstring`` is mapped  to ``string`` for efficiency. The DSL for HTML
+construction is also avaible for the native targets (!) and the ``kstring``
+abstraction helps to deal with these conflicting requirements.
+
+Karax's DSL is quite flexible when it comes to event handlers, so the
+following syntax is also supported:
+
+```nim
+
+include karax / prelude
+from sugar import `=>`
+
+var lines: seq[kstring] = @[]
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv):
+    button(onclick = () => lines.add "Hello simulated universe"):
+      text "Say hello!"
+    for x in lines:
+      tdiv:
+        text x
+
+setRenderer createDom
+```
+
+The ``buildHtml`` macro produces this code for us:
+
+```nim
+
+let tmp2 = tree(VNodeKind.tdiv)
+let tmp3 = tree(VNodeKind.button)
+addEventHandler(tmp3, EventKind.onclick,
+                () => lines.add "Hello simulated universe", kxi)
+add(tmp3, text "Say hello!")
+add(tmp2, tmp3)
+for x in lines:
+  let tmp4 = tree(VNodeKind.tdiv)
+  add(tmp4, text x)
+  add(tmp2, tmp4)
+tmp2
+```
+As the examples grow larger it becomes more and more visible of what
+a DSL that composes with the builtin Nim control flow constructs buys us.
+Once you have tasted this power there is no going back and languages
+without AST based macro system simply don't cut it anymore.
+
+
+## Attaching data to an event handler
+
+
+Since the type of an event handler is ``(ev: Event; n: VNode)`` or ``()`` any
+additional data that should be passed to the event handler needs to be
+done via Nim's closures. In general this means a pattern like this:
+
+```nim
+
+proc menuAction(menuEntry: kstring): proc() =
+  result = proc() =
+    echo "clicked ", menuEntry
+
+proc buildMenu(menu: seq[kstring]): VNode =
+  result = buildHtml(tdiv):
+    for m in menu:
+      nav(class="navbar is-primary"):
+        tdiv(class="navbar-brand"):
+          a(class="navbar-item", onclick = menuAction(m)):
+```
+
+## DOM diffing
+
+Ok, so now we have seen DOM creation and event handlers. But how does
+Karax actually keep the DOM up to date? The trick is that every event
+handler is wrapped in a helper proc that triggers a *redraw* operation
+that calls the *renderer* that you initially passed to ``setRenderer``.
+So a new virtual DOM is created and compared against the previous
+virtual DOM. This comparison produces a patch set that is then applied
+to the real DOM the browser uses internally. This process is called
+"virtual DOM diffing" and other frameworks, most notably Facebook's
+*React*, do quite similar things. The virtual DOM is faster to create
+and manipulate than the real DOM so this approach is quite efficient.
+
+
+## Form validation
+Most applications these days have some "login"
+mechanism consisting of ``username`` and ``password`` and
+a ``login`` button. The login button should only be clickable
+if ``username`` and ``password`` are not empty. An error
+message should be shown as long as one input field is empty.
+
+To create new UI elements we write a ``loginField`` proc that
+returns a ``VNode``:
+
+```nim
+
+proc loginField(desc, field, class: kstring;
+                validator: proc (field: kstring): proc ()): VNode =
+  result = buildHtml(tdiv):
+    label(`for` = field):
+      text desc
+    input(class = class, id = field, onchange = validator(field))
+```
+
+We use the ``karax / errors`` module to help with this error
+logic. The ``errors`` module is mostly a mapping from strings to
+strings but it turned out that the logic is tricky enough to warrant
+a library solution. ``validateNotEmpty`` returns a closure that
+captures the ``field`` parameter:
+
+```nim
+
+proc validateNotEmpty(field: kstring): proc () =
+  result = proc () =
+    let x = getVNodeById(field).getInputText
+    if x.isNil or x == "":
+      errors.setError(field, field & " must not be empty")
+    else:
+      errors.setError(field, "")
+```
+
+This indirection is required because
+event handlers in Karax need to have the type ``proc ()``
+or ``proc (ev: Event; n: VNode)``. The errors module also
+gives us a handy ``disableOnError`` helper. It returns
+``"disabled"`` if there are errors. Now we have all the
+pieces together to write our login dialog:
+
+
+```nim
+
+# some consts in order to prevent typos:
+const
+  username = kstring"username"
+  password = kstring"password"
+
+var loggedIn: bool
+
+proc loginDialog(): VNode =
+  result = buildHtml(tdiv):
+    if not loggedIn:
+      loginField("Name :", username, "input", validateNotEmpty)
+      loginField("Password: ", password, "password", validateNotEmpty)
+      button(onclick = () => (loggedIn = true), disabled = errors.disableOnError()):
+        text "Login"
+      p:
+        text errors.getError(username)
+      p:
+        text errors.getError(password)
+    else:
+      p:
+        text "You are now logged in."
+
+setRenderer loginDialog
+```
+
+(Full example [here](https://github.com/karaxnim/karax/blob/master/examples/login.nim).)
+
+This code still has a bug though, when you run it, the ``login`` button is not
+disabled until some input fields are validated! This is easily fixed,
+at initialization we have to do:
+
+```nim
+
+setError username, username & " must not be empty"
+setError password, password & " must not be empty"
+```
+There are likely more elegant solutions to this problem.
+
+## Routing
+
+
+For routing ``setRenderer`` can be called with a callback that takes a parameter of
+type ``RouterData``. Here is the relevant excerpt from the famous "Todo App" example:
+
+```nim
+
+proc createDom(data: RouterData): VNode =
+  if data.hashPart == "#/": filter = all
+  elif data.hashPart == "#/completed": filter = completed
+  elif data.hashPart == "#/active": filter = active
+  result = buildHtml(tdiv(class="todomvc-wrapper")):
+    section(class = "todoapp"):
+        ...
+
+setRenderer createDom
+```
+(Full example [here](https://github.com/karaxnim/karax/blob/master/examples/todoapp/todoapp.nim).)
+
+## Server Side HTML Rendering
+
+Karax can also be used to render HTML on the server.  Only a subset of
+modules can be used since there is no JS interpreter.
+
+```nim
+
+import karax / [karaxdsl, vdom]
+
+const places = @["boston", "cleveland", "los angeles", "new orleans"]
+
+proc render*(): string =
+  let vnode = buildHtml(tdiv(class = "mt-3")):
+    h1: text "My Web Page"
+    p: text "Hello world"
+    ul:
+      for place in places:
+        li: text place
+    dl:
+      dt: text "Can I use Karax for client side single page apps?"
+      dd: text "Yes"
+
+      dt: text "Can I use Karax for server side HTML rendering?"
+      dd: text "Yes"
+  result = $vnode
+
+echo render()
+```
+## Generate HTML with event handlers
+
+If you are writing a static site generator or do server-side HTML rendering
+via ``nim c``, you may want to override ``addEventHandler`` when using event
+handlers to avoid compiler complaints.
+
+Here's an example of auto submit a dropdown when a value is selected:
+
+```nim
+
+template kxi(): int = 0
+template addEventHandler(n: VNode; k: EventKind; action: string; kxi: int) =
+  n.setAttr($k, action)
+
+let
+  names = @["nim", "c", "python"]
+  selected_name = request.params.getOrDefault("name")
+  hello = buildHtml(html):
+    form(`method` = "get"):
+      select(name="name", onchange="this.form.submit()"):
+        for name in names:
+          if name == selected_name:
+            option(selected = ""): text name
+          else:
+            option: text name
+```
+
+## Licence
+MIT Licence. See [here](https://github.com/karaxnim/karax/blob/master/LICENSE.txt).
\ No newline at end of file
diff --git a/readme.rst b/readme.rst
deleted file mode 100644
index 8e1651b..0000000
--- a/readme.rst
+++ /dev/null
@@ -1,382 +0,0 @@
-Karax – Single page applications in Nim |travis|
-================================================
-
-Karax is a framework for developing single page applications in Nim.
-
-To try it out, run::
-
-  cd ~/projects # Insert your favourite directory for projects
-
-  nimble develop karax # This will clone Karax and create a link to it in ~/.nimble
-
-  cd karax
-
-  cd examples/todoapp
-  nim js todoapp.nim
-  open todoapp.html
-  cd ../..
-
-  cd examples/mediaplayer
-  nim js playerapp.nim
-  open playerapp.html
-
-It uses a virtual DOM like React, but is much smaller than the existing
-frameworks plus of course it's written in Nim for Nim. No external
-dependencies! And thanks to Nim's whole program optimization only what
-is used ends up in the generated JavaScript code.
-
-
-Goals
-=====
-
-- Leverage Nim's macro system to produce a framework that allows
-  for the development of applications that are boilerplate free.
-- Keep it small, keep it fast, keep it flexible.
-
-.. |travis| image:: https://travis-ci.org/pragmagic/karax.svg?branch=master
-    :target: https://travis-ci.org/pragmagic/karax
-
-
-Hello World
-===========
-
-The simplest Karax program looks like this:
-
-.. code-block:: nim
-
-  include karax / prelude
-
-  proc createDom(): VNode =
-    result = buildHtml(tdiv):
-      text "Hello World!"
-
-  setRenderer createDom
-
-
-Since ``div`` is a keyword in Nim, karax choose to use ``tdiv`` instead
-here. ``tdiv`` produces a ``<div>`` virtual DOM node.
-
-As you can see, karax comes with its own ``buildHtml`` DSL for convenient
-construction of (virtual) DOM trees (of type ``VNode``). Karax provides
-a tiny build tool called ``karun`` that generates the HTML boilerplate code that
-embeds and invokes the generated JavaScript code::
-
-  nim c karax/tools/karun
-  karax/tools/karun -r helloworld.nim
-
-Via ``-d:debugKaraxDsl`` we can have a look at the produced Nim code by
-``buildHtml``:
-
-.. code-block:: nim
-
-  let tmp1 = tree(VNodeKind.tdiv)
-  add(tmp1, text "Hello World!")
-  tmp1
-
-(I shortened the IDs for better readability.)
-
-Ok, so ``buildHtml`` introduces temporaries and calls ``add`` for the tree
-construction so that it composes with all of Nim's control flow constructs:
-
-
-.. code-block:: nim
-
-  include karax / prelude
-  import random
-
-  proc createDom(): VNode =
-    result = buildHtml(tdiv):
-      if rand(100) <= 50:
-        text "Hello World!"
-      else:
-        text "Hello Universe"
-
-  randomize()
-  setRenderer createDom
-
-
-Produces:
-
-.. code-block:: nim
-
-  let tmp1 = tree(VNodeKind.tdiv)
-  if rand(100) <= 50:
-    add(tmp1, text "Hello World!")
-  else:
-    add(tmp1, text "Hello Universe")
-  tmp1
-
-
-Event model
-===========
-
-Karax does not change the DOM's event model much, here is a program
-that writes "Hello simulated universe" on a button click:
-
-.. code-block:: nim
-
-  include karax / prelude
-  # alternatively: import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]
-
-  var lines: seq[kstring] = @[]
-
-  proc createDom(): VNode =
-    result = buildHtml(tdiv):
-      button:
-        text "Say hello!"
-        proc onclick(ev: Event; n: VNode) =
-          lines.add "Hello simulated universe"
-      for x in lines:
-        tdiv:
-          text x
-
-  setRenderer createDom
-
-
-``kstring`` is Karax's alias for ``cstring`` (which stands for "compatible
-string"; for the JS target that is an immutable JavaScript string) which
-is preferred for efficiency on the JS target. However, on the native targets
-``kstring`` is mapped  to ``string`` for efficiency. The DSL for HTML
-construction is also avaible for the native targets (!) and the ``kstring``
-abstraction helps to deal with these conflicting requirements.
-
-Karax's DSL is quite flexible when it comes to event handlers, so the
-following syntax is also supported:
-
-.. code-block:: nim
-
-  include karax / prelude
-  from sugar import `=>`
-
-  var lines: seq[kstring] = @[]
-
-  proc createDom(): VNode =
-    result = buildHtml(tdiv):
-      button(onclick = () => lines.add "Hello simulated universe"):
-        text "Say hello!"
-      for x in lines:
-        tdiv:
-          text x
-
-  setRenderer createDom
-
-
-The ``buildHtml`` macro produces this code for us:
-
-.. code-block:: nim
-
-  let tmp2 = tree(VNodeKind.tdiv)
-  let tmp3 = tree(VNodeKind.button)
-  addEventHandler(tmp3, EventKind.onclick,
-                  () => lines.add "Hello simulated universe", kxi)
-  add(tmp3, text "Say hello!")
-  add(tmp2, tmp3)
-  for x in lines:
-    let tmp4 = tree(VNodeKind.tdiv)
-    add(tmp4, text x)
-    add(tmp2, tmp4)
-  tmp2
-
-As the examples grow larger it becomes more and more visible of what
-a DSL that composes with the builtin Nim control flow constructs buys us.
-Once you have tasted this power there is no going back and languages
-without AST based macro system simply don't cut it anymore.
-
-
-Attaching data to an event handler
-==================================
-
-Since the type of an event handler is ``(ev: Event; n: VNode)`` or ``()`` any
-additional data that should be passed to the event handler needs to be
-done via Nim's closures. In general this means a pattern like this:
-
-.. code-block:: nim
-
-  proc menuAction(menuEntry: kstring): proc() =
-    result = proc() =
-      echo "clicked ", menuEntry
-
-  proc buildMenu(menu: seq[kstring]): VNode =
-    result = buildHtml(tdiv):
-      for m in menu:
-        nav(class="navbar is-primary"):
-          tdiv(class="navbar-brand"):
-            a(class="navbar-item", onclick = menuAction(m)):
-
-
-DOM diffing
-===========
-
-Ok, so now we have seen DOM creation and event handlers. But how does
-Karax actually keep the DOM up to date? The trick is that every event
-handler is wrapped in a helper proc that triggers a *redraw* operation
-that calls the *renderer* that you initially passed to ``setRenderer``.
-So a new virtual DOM is created and compared against the previous
-virtual DOM. This comparison produces a patch set that is then applied
-to the real DOM the browser uses internally. This process is called
-"virtual DOM diffing" and other frameworks, most notably Facebook's
-*React*, do quite similar things. The virtual DOM is faster to create
-and manipulate than the real DOM so this approach is quite efficient.
-
-
-Form validation
-===============
-
-Most applications these days have some "login"
-mechanism consisting of ``username`` and ``password`` and
-a ``login`` button. The login button should only be clickable
-if ``username`` and ``password`` are not empty. An error
-message should be shown as long as one input field is empty.
-
-To create new UI elements we write a ``loginField`` proc that
-returns a ``VNode``:
-
-.. code-block:: nim
-
-  proc loginField(desc, field, class: kstring;
-                  validator: proc (field: kstring): proc ()): VNode =
-    result = buildHtml(tdiv):
-      label(`for` = field):
-        text desc
-      input(class = class, id = field, onchange = validator(field))
-
-We use the ``karax / errors`` module to help with this error
-logic. The ``errors`` module is mostly a mapping from strings to
-strings but it turned out that the logic is tricky enough to warrant
-a library solution. ``validateNotEmpty`` returns a closure that
-captures the ``field`` parameter:
-
-.. code-block:: nim
-
-  proc validateNotEmpty(field: kstring): proc () =
-    result = proc () =
-      let x = getVNodeById(field).getInputText
-      if x.isNil or x == "":
-        errors.setError(field, field & " must not be empty")
-      else:
-        errors.setError(field, "")
-
-This indirection is required because
-event handlers in Karax need to have the type ``proc ()``
-or ``proc (ev: Event; n: VNode)``. The errors module also
-gives us a handy ``disableOnError`` helper. It returns
-``"disabled"`` if there are errors. Now we have all the
-pieces together to write our login dialog:
-
-
-.. code-block:: nim
-
-  # some consts in order to prevent typos:
-  const
-    username = kstring"username"
-    password = kstring"password"
-
-  var loggedIn: bool
-
-  proc loginDialog(): VNode =
-    result = buildHtml(tdiv):
-      if not loggedIn:
-        loginField("Name :", username, "input", validateNotEmpty)
-        loginField("Password: ", password, "password", validateNotEmpty)
-        button(onclick = () => (loggedIn = true), disabled = errors.disableOnError()):
-          text "Login"
-        p:
-          text errors.getError(username)
-        p:
-          text errors.getError(password)
-      else:
-        p:
-          text "You are now logged in."
-
-  setRenderer loginDialog
-
-(Full example `here <https://github.com/pragmagic/karax/blob/master/examples/login.nim>`_.)
-
-This code still has a bug though, when you run it, the ``login`` button is not
-disabled until some input fields are validated! This is easily fixed,
-at initialization we have to do:
-
-.. code-block:: nim
-
-  setError username, username & " must not be empty"
-  setError password, password & " must not be empty"
-
-There are likely more elegant solutions to this problem.
-
-
-Routing
-=======
-
-For routing ``setRenderer`` can be called with a callback that takes a parameter of
-type ``RouterData``. Here is the relevant excerpt from the famous "Todo App" example:
-
-.. code-block:: nim
-
-  proc createDom(data: RouterData): VNode =
-    if data.hashPart == "#/": filter = all
-    elif data.hashPart == "#/completed": filter = completed
-    elif data.hashPart == "#/active": filter = active
-    result = buildHtml(tdiv(class="todomvc-wrapper")):
-      section(class = "todoapp"):
-        ...
-
-  setRenderer createDom
-
-(Full example `here <https://github.com/pragmagic/karax/blob/master/examples/todoapp/todoapp.nim>`_.)
-
-
-Server Side HTML Rendering
-==========================
-
-Karax can also be used to render HTML on the server.  Only a subset of
-modules can be used since there is no JS interpreter.
-
-.. code-block:: nim
-
-  import karax / [karaxdsl, vdom]
-
-  const places = @["boston", "cleveland", "los angeles", "new orleans"]
-
-  proc render*(): string =
-    let vnode = buildHtml(tdiv(class = "mt-3")):
-      h1: text "My Web Page"
-      p: text "Hello world"
-      ul:
-        for place in places:
-          li: text place
-      dl:
-        dt: text "Can I use Karax for client side single page apps?"
-        dd: text "Yes"
-
-        dt: text "Can I use Karax for server side HTML rendering?"
-        dd: text "Yes"
-    result = $vnode
-
-  echo render()
-
-Generate HTML with event handlers
-=================================
-
-If you are writing a static site generator or do server-side HTML rendering
-via ``nim c``, you may want to override ``addEventHandler`` when using event
-handlers to avoid compiler complaints.
-
-Here's an example of auto submit a dropdown when a value is selected:
-
-.. code-block:: nim
-
-  template kxi(): int = 0
-  template addEventHandler(n: VNode; k: EventKind; action: string; kxi: int) =
-    n.setAttr($k, action)
-
-  let
-    names = @["nim", "c", "python"]
-    selected_name = request.params.getOrDefault("name")
-    hello = buildHtml(html):
-      form(`method` = "get"):
-        select(name="name", onchange="this.form.submit()"):
-          for name in names:
-            if name == selected_name:
-              option(selected = ""): text name
-            else:
-              option: text name

From ac210fb634bfe006c52c70e8ab5999d8d6de4ee0 Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 6 May 2021 17:57:48 +0200
Subject: [PATCH 261/264] Update readme.md

---
 readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/readme.md b/readme.md
index affdd05..f4f2fa1 100644
--- a/readme.md
+++ b/readme.md
@@ -390,5 +390,5 @@ let
             option: text name
 ```
 
-## Licence
-MIT Licence. See [here](https://github.com/karaxnim/karax/blob/master/LICENSE.txt).
\ No newline at end of file
+## License
+MIT License. See [here](https://github.com/karaxnim/karax/blob/master/LICENSE.txt).

From 93d9b73867111ba9ea2e3a899e28c24c92a26d24 Mon Sep 17 00:00:00 2001
From: Arham Jain <7073362+ajusa@users.noreply.github.com>
Date: Thu, 6 May 2021 16:56:55 -0400
Subject: [PATCH 262/264] Moved CI from Travis to Github Actions (#198)

* Create ci.yml

* removed travis build file

* changed docker image

* Update readme to include CI results
---
 .github/workflows/ci.yml | 31 +++++++++++++++++++++++++++++++
 .travis.yml              | 20 --------------------
 readme.md                |  2 +-
 3 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 .github/workflows/ci.yml
 delete mode 100644 .travis.yml

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..5e6c415
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,31 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the action will run. 
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+    container: nimlang/nim
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+      # Runs a single command using the runners shell
+      - name: Tests
+        run: |
+          nimble develop -y
+          nim c -r tests/tester.nim
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 2f26a5a..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-sudo: false
-language: c
-os: linux
-install:
-  - git clone https://github.com/nim-lang/nim
-  - cd nim
-  - git clone --depth 1 https://github.com/nim-lang/csources.git
-  - cd csources
-  - sh build.sh
-  - cd ../
-  - bin/nim c koch
-  - ./koch boot -d:release
-  - ./koch tools
-  - cd ..
-before_script:
-  - set -e
-  - export PATH=$(pwd)/nim/bin:$(pwd):$PATH
-script:
-  - nimble develop -y
-  - nim c -r tests/tester.nim
diff --git a/readme.md b/readme.md
index f4f2fa1..d8a3814 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 ![karax](https://user-images.githubusercontent.com/22755228/117183486-482b2a00-ade0-11eb-88e6-d8eeb28951ca.png)
 
-![Travis (.com) branch](https://img.shields.io/travis/com/karaxnim/karax/master?style=for-the-badge) ![GitHub issues](https://img.shields.io/github/issues-raw/karaxnim/karax?style=for-the-badge) ![GitHub](https://img.shields.io/github/license/karaxnim/karax?style=for-the-badge) ![GitHub tag (latest SemVer)](https://img.shields.io/github/v/tag/karaxnim/karax?sort=semver&style=for-the-badge) ![https://nim-lang.org](https://img.shields.io/badge/nim-powered-ffc200?style=for-the-badge)
+![Github Actions](https://img.shields.io/github/workflow/status/karaxnim/karax/CI?style=for-the-badge) ![GitHub issues](https://img.shields.io/github/issues-raw/karaxnim/karax?style=for-the-badge) ![GitHub](https://img.shields.io/github/license/karaxnim/karax?style=for-the-badge) ![GitHub tag (latest SemVer)](https://img.shields.io/github/v/tag/karaxnim/karax?sort=semver&style=for-the-badge) ![https://nim-lang.org](https://img.shields.io/badge/nim-powered-ffc200?style=for-the-badge)
  
 # Karax
 Karax is a framework for developing single page applications in Nim.

From 6d51d7d08c4a4072ed1c14e28483d919f8182378 Mon Sep 17 00:00:00 2001
From: geotre <georgetrevill@gmail.com>
Date: Sat, 15 May 2021 20:22:33 +0100
Subject: [PATCH 263/264] Fix issue #192 (#197)

---
 karax/karax.nim | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index bae82d2..3b81262 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -37,6 +37,7 @@ type
     toFocus: Node
     toFocusV: VNode
     renderId: int
+    rendering: bool
     patches: seq[Patch] # we reuse this to save allocations
     patchLen: int
     patchesV: seq[PatchV]
@@ -629,8 +630,21 @@ proc avoidDomDiffing*(kxi: KaraxInstance = kxi) =
   ## This is an experimental API.
   kxi.currentTree = nil
 
+proc reqFrame(callback: proc()): int {.importc: "window.requestAnimationFrame".}
+when false:
+  proc cancelFrame(id: int) {.importc: "window.cancelAnimationFrame".}
+
 proc dodraw(kxi: KaraxInstance) =
   if kxi.renderer.isNil: return
+  kxi.renderId = 0
+
+  if kxi.rendering:
+    # there is a render already running, delay 1 frame
+    kxi.renderId = reqFrame(proc () = kxi.dodraw)
+    return
+
+  kxi.rendering = true
+
   let rdata = RouterData(hashPart: hashPart)
   let newtree = kxi.renderer(rdata)
   inc kxi.runCount
@@ -661,16 +675,12 @@ proc dodraw(kxi: KaraxInstance) =
   # now that it's part of the DOM, give it the focus:
   if kxi.toFocus != nil:
     kxi.toFocus.focus()
-  kxi.renderId = 0
+  kxi.rendering = false
   when defined(stats):
     kxi.recursion = 0
     var total = 0
     echo "depth ", depth(kxi.currentTree, total), " total ", total
 
-proc reqFrame(callback: proc()): int {.importc: "window.requestAnimationFrame".}
-when false:
-  proc cancelFrame(id: int) {.importc: "window.cancelAnimationFrame".}
-
 proc redraw*(kxi: KaraxInstance = kxi) =
   # we buffer redraw requests:
   when false:

From 85c81d8c0e54622293d8133ccee643e6056541e7 Mon Sep 17 00:00:00 2001
From: geotre <georgetrevill@gmail.com>
Date: Sat, 15 May 2021 20:22:56 +0100
Subject: [PATCH 264/264] Fix issue #195 (#196)

---
 karax/karax.nim | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/karax/karax.nim b/karax/karax.nim
index 3b81262..2246676 100644
--- a/karax/karax.nim
+++ b/karax/karax.nim
@@ -800,11 +800,10 @@ proc prepend(parent, kid: Element) =
   parent.insertBefore(kid, parent.firstChild)
 
 proc loadScript*(jsfilename: cstring; kxi: KaraxInstance = kxi) =
-  let body = document.getElementById("body")
   let s = document.createElement("script")
   s.setAttr "type", "text/javascript"
   s.setAttr "src", jsfilename
-  body.prepend(s)
+  document.body.prepend(s)
   redraw(kxi)
 
 proc runLater*(action: proc(); later = 400): Timeout {.discardable.} =