diff --git a/diffDomTests.html b/diffDomTests.html new file mode 100644 index 0000000..5ecf130 --- /dev/null +++ b/diffDomTests.html @@ -0,0 +1,19 @@ + + + + + Diff dom tests + + + + + +
+ + + + + + diff --git a/diffDomTests.nim b/diffDomTests.nim new file mode 100644 index 0000000..359b00e --- /dev/null +++ b/diffDomTests.nim @@ -0,0 +1,62 @@ + +import vdom, karax, karaxdsl, jdict, jstrutils, parseutils, sequtils + +var + entries: seq[cstring] + +# result: 0 1 2 3 4 7 5 +proc test1(ev: Event; n: VNode) = + entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ] + entries.insert(cstring("7"), 5) + +# result: 8 0 1 2 3 4 7 5 +proc test2(ev: Event; n: VNode) = + entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ] + entries.insert(cstring("7"), 5) + entries.insert(cstring("8"), 0) + +# result: 2 3 4 1 +proc test3(ev: Event; n: VNode) = + entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ] + entries = @[cstring("2"), cstring("3"), cstring("4"), cstring("1") ] + +# result: 5 6 7 8 +proc test4(ev: Event; n: VNode) = + entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ] + entries = @[cstring("5"), cstring("6"), cstring("7"), cstring("8") ] + +# result: 0 1 3 5 4 5 +proc test5(ev: Event; n: VNode) = + entries = @[cstring("0"), cstring("1"), cstring("2"), cstring("3"), cstring("4"), cstring("5") ] + entries = @[cstring("0"), cstring("1"), cstring("3"), cstring("5"), cstring("4"), cstring("5") ] + + +proc createEntry(id: int): VNode = + result = buildHtml(): + button(id="" & $id): + text $id + +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" + ul(): + for e in entries: + li: + createEntry(parseInt(e)) + + +setRenderer createDom + +proc onload(session: cstring) {.exportc.} = + for i in 0..5: # 0_000: + entries.add(cstring($i)) + init() diff --git a/karax.nim b/karax.nim index 8ffcbe1..3cf67d2 100644 --- a/karax.nim +++ b/karax.nim @@ -137,7 +137,7 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) = # n.nodeName & " = " & oldNode.id & ")") elif newNode.kind != VNodeKind.text: let newLength = newNode.len - let oldLength = oldNode.len + var oldLength = oldNode.len let minLength = min(newLength, oldLength) assert oldNode.kind == newNode.kind when false: @@ -181,15 +181,27 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) = #kout cstring("----------") var nextChildPos = oldPos + 1 + # kout cstring("pos = " & $pos) + # kout cstring("nextChildPos = " & $nextChildPos) while pos <= newPos: if nextChildPos == oldLength: current.appendChild(vnodeToDom(newNode[pos])) - kout cstring"appendChild" + # kout cstring"appendChild " & newNode[pos].id + # kout cstring("commonPrefix = " & $commonPrefix) + # kout cstring("oldPos = " & $oldPos) + # kout cstring("newPos = " & $newPos) + # kout cstring("newLength = " & $newLength) + # kout cstring("oldLength = " & $oldLength) + + # kout cstring("pos = " & $pos) + # kout cstring("nextChildPos = " & $nextChildPos) + # kout cstring("-----------") #kout cstring("pos = " & $pos) #kout cstring("newLength = " & $newLength) else: - kout cstring"insertBefore" + kout cstring"insertBefore " & newNode[pos].id current.insertBefore(vnodeToDom(newNode[pos]), current.childNodes[nextChildPos]) + inc oldLength inc pos inc nextChildPos @@ -223,74 +235,6 @@ proc updateElement(parent, current: Node, newNode, oldNode: VNode) = # kout cstring"removeChild" # current.removeChild(current.lastChild) -proc updateElement1(parent, current: Node, newNode, oldNode: VNode) = - if not equals(newNode, oldNode): - let n = vnodeToDom(newNode) - if parent == nil: - replaceById("ROOT", n) - else: - parent.replaceChild(n, current) - kout cstring"ReplaceChild" - elif newNode.kind != VNodeKind.text: - let newLength = newNode.len - let oldLength = oldNode.len - let minLength = min(newLength, oldLength) - assert oldNode.kind == newNode.kind - when false: - if current.nodeName != toTag[oldNode.kind]: - kout current.nodeName - kout toTag[oldNode.kind] - assert false - - # var commonPrefix = 0 - # while commonPrefix < minLength and equals(newNode[commonPrefix], oldNode[commonPrefix]): - # inc commonPrefix - - # var oldPos = oldLength - 1 - # var newPos = newLength - 1 - # while oldPos >= commonPrefix and newPos >= commonPrefix and equals(newNode[newPos], oldNode[oldPos]): - # dec oldPos - # dec newPos - - # var pos = min(oldPos, newPos) + 1 - # var nextChildPos = oldPos + 1 - # while pos <= newPos: - # if nextChildPos == oldLength: - # current.appendChild(vnodeToDom(newNode[pos])) - # kout cstring"appendChild" - # else: - # kout cstring"insertBefore" - # current.insertBefore(vnodeToDom(newNode[pos]), current.childNodes[nextChildPos]) - # inc pos - # inc nextChildPos - - # for i in 0..oldPos-pos: - # kout cstring"removeChild" - # current.removeChild(current.childNodes[pos]) - - # # kout cstring("commonPrefix = " & $commonPrefix) - # # kout cstring("oldPos = " & $oldPos) - # # kout cstring("newPos = " & $newPos) - # # kout cstring("newLength = " & $newLength) - # # kout cstring("oldLength = " & $oldLength) - - # for i in 0..newLength-1: - # updateElement(current, current.childNodes[i], - # newNode[i], - # oldNode[i]) - - for i in 0..min(newLength, oldLength)-1: - updateElement(current, current.childNodes[i], - newNode[i], - oldNode[i]) - if newLength > oldLength: - for i in oldLength..newLength-1: - kout cstring"appendChild" - current.appendChild(vnodeToDom(newNode[i])) - elif oldLength > newLength: - for i in countdown(oldLength-1, newLength): - kout cstring"removeChild" - current.removeChild(current.lastChild) proc dodraw() = let newtree = dorender() diff --git a/todoapp.nim b/todoapp.nim index 63875a6..ea71c66 100644 --- a/todoapp.nim +++ b/todoapp.nim @@ -119,3 +119,6 @@ proc onload(session: cstring) {.exportc.} = for i in 0..1: # 0_000: entries.add((cstring"Entry " & &i, false)) init() + +for i in 0..10_000: + entries.add((cstring"Entry " & &i, false)) \ No newline at end of file