diff --git a/diffDomTests.nim b/diffDomTests.nim index e8fefe9..e3014f8 100644 --- a/diffDomTests.nim +++ b/diffDomTests.nim @@ -1,39 +1,104 @@ -import vdom, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils +import vdom, times, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils var entries: seq[cstring] + timeout : Timeout + +proc reset() = + kout cstring"reset started" + entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ] + redraw() + kout cstring"reset finished" + +proc checkOrder(order : seq[int]) = + var ul = getElementById("ul") + assert ul != nil + assert len(ul.children) == len(order) + var pos = 0 + for child in ul.children: + assert child.id == $order[pos] + inc pos + +proc check1() = + checkOrder(@[0, 1, 2, 3, 4, 7, 5]) + kout cstring"test1 finished" # result: 0 1 2 3 4 7 5 -proc test1(ev: Event; n: VNode) = +proc test1() = + kout 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) + +proc check2() = + checkOrder(@[8, 0, 1, 2, 3, 4, 7, 5]) + kout cstring"test2 finished" # result: 8 0 1 2 3 4 7 5 -proc test2(ev: Event; n: VNode) = +proc test2() = + kout 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) + +proc check3() = + checkOrder(@[2, 3, 4, 1]) + kout cstring"test3 finished" # result: 2 3 4 1 -proc test3(ev: Event; n: VNode) = +proc test3() = + kout cstring"test3 started" entries = @[cstring("2"), cstring("3"), cstring("4"), cstring("1") ] + redraw() + timeout = setTimeout(check3, 20) + +proc check4() = + checkOrder(@[5, 6, 7, 8]) + kout cstring"test4 finished" # result: 5 6 7 8 -proc test4(ev: Event; n: VNode) = +proc test4() = + kout cstring"test4 started" entries = @[cstring("5"), cstring("6"), cstring("7"), cstring("8") ] + redraw() + timeout = setTimeout(check4, 20) + +proc check5() = + checkOrder(@[0, 1, 3, 5, 4, 5]) + kout cstring"test5 finished" # result: 0 1 3 5 4 5 -proc test5(ev: Event; n: VNode) = +proc test5() = + kout cstring"test5 started" entries = @[cstring("0"), cstring("1"), cstring("3"), cstring("5"), cstring("4"), cstring("5") ] + redraw() + timeout = setTimeout(check5, 20) +proc check6() = + checkOrder(@[]) + kout cstring"test6 finished" + # result: empty -proc test6(ev: Event; n: VNode) = +proc test6() = + kout cstring"test6 started" entries = @[] + redraw() + timeout = setTimeout(check6, 20) + +proc check7() = + checkOrder(@[2]) + kout cstring"test7 finished" # result: 2 -proc test7(ev: Event; n: VNode) = +proc test7() = + kout cstring"test7 started" entries = @[cstring("2")] + redraw() + timeout = setTimeout(check7, 20) proc createEntry(id: int): VNode = result = buildHtml(): @@ -42,25 +107,9 @@ proc createEntry(id: int): VNode = proc createDom(): VNode = result = buildHtml(tdiv()): - button(onclick=test1): - text "Test1" - button(onclick=test2): - text "Test2" - button(onclick=test3): - text "Test3" - button(onclick=test4): - text "Test4" - button(onclick=test5): - text "Test5" - button(onclick=test6): - text "Test6" - button(onclick=test7): - text "Test7" - ul(): + ul(id="ul"): for e in entries: - li: - createEntry(parseInt(e)) - + createEntry(parseInt(e)) setRenderer createDom @@ -68,3 +117,42 @@ proc onload(session: cstring) {.exportc.} = for i in 0..5: # 0_000: entries.add(cstring($i)) init() + + 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) + t += dtTest + timeout = setTimeout(reset, t) + t += dtReset diff --git a/karax.nim b/karax.nim index 3cf67d2..16c453c 100644 --- a/karax.nim +++ b/karax.nim @@ -79,7 +79,7 @@ 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.} @@ -132,7 +132,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) = replaceById("ROOT", n) else: parent.replaceChild(n, current) - kout cstring("ReplaceChild") + kout cstring("---- replaceChild") #kout cstring("ReplaceChild: (" & current.nodeName & " = " & newNode.id & ") -> (" & # n.nodeName & " = " & oldNode.id & ")") elif newNode.kind != VNodeKind.text: @@ -186,7 +186,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) = while pos <= newPos: if nextChildPos == oldLength: current.appendChild(vnodeToDom(newNode[pos])) - # kout cstring"appendChild " & newNode[pos].id + kout cstring"---- appendChild" # kout cstring("commonPrefix = " & $commonPrefix) # kout cstring("oldPos = " & $oldPos) # kout cstring("newPos = " & $newPos) @@ -199,14 +199,14 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) = #kout cstring("pos = " & $pos) #kout cstring("newLength = " & $newLength) else: - kout cstring"insertBefore " & newNode[pos].id + kout cstring"---- insertBefore" current.insertBefore(vnodeToDom(newNode[pos]), current.childNodes[nextChildPos]) inc oldLength inc pos inc nextChildPos for i in 0..oldPos-pos: - kout cstring"removeChild" + kout cstring"---- removeChild" current.removeChild(current.childNodes[pos]) # var itNew = newPos + 1