karax
karax copied to clipboard
regression: VNode.dom is nil
/cc @Araq after e422087 (avoid exponential DOM diffing) the following minimal example fails before that it was working.
example 1
import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl]
proc myonscroll(ev: Event; n: VNode) =
doAssert n.dom != nil # fails after e422087
proc myonload() =
document.querySelectorAll(".scrollableArea")[0].style.height = "300px"
proc createDom(): VNode =
result = buildHtml(tdiv):
tdiv(class = kstring"scrollableArea", onscroll = myonscroll, style = {StyleAttr.overflow: kstring"scroll"}):
img(src = "https://d17fnq9dkz9hgj.cloudfront.net/breed-uploads/2018/09/dog-landing-hero-lg.jpg", onload = myonload)
setRenderer createDom, "ROOT"
after
karun -r $timn_D/tests/nim/all/t0736.nim
upon scrolling you'll get (in chrome console):
t0736.js:1129 Uncaught Error: Error: unhandled exception: /Users/timothee/git_clone/nim/timn/tests/nim/all/t0736.nim(14, 12) `n.dom != nil` [AssertionError]
Traceback (most recent call last)
karax.nim:89 stdWrapper.:anonymous
karax.nim:708 addEventHandler.wrapper
t0736.nim:14 t0736.myonscroll
assertions.nim:41 assertions.failedAssertImpl
assertions.nim:20 assertions.raiseAssert
fatal.nim:39 sysFatal.sysFatal
note:
- ~~this requires https://github.com/pragmagic/karax/pull/116 to have the
onload
property~~ EDIT: that was now merged - this is reduced from a more complex real example
- this is a different regression from https://github.com/pragmagic/karax/issues/56#issuecomment-531099826 but caused by same commit
example 2 (related but different)
we get null
after that commit e422087 when calling from chrome console
include karax / prelude
proc callback_getVNodeById(id: kstring): VNode {.exportc.} =
getVNodeById(id) # null after e422087 when called from console
proc myonload(ev: Event; n: VNode) =
echo n.dom == nil
echo getVNodeById(kstring"elementsArea").dom == nil # prints false both before and after e422087
proc createDom*(): VNode =
result = buildHtml(tdiv):
tdiv(id = "elementsArea"):
img(src = kstring"https://image.shutterstock.com/image-vector/dog-head-icon-flat-style-260nw-1126157240.jpg", onload=myonload)
setRenderer createDom, "ROOT"
callback_getVNodeById('elementsArea').dom
# after e422087
null
# before e422087
<div id="elementsArea"><img src="https://image.shutterstock.com/image-vector/dog-head-icon-flat-style-260nw-1126157240.jpg"></div>
workaround for example 1
n.dom
=>
ev.currentTarget # or v.target
see https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget for more details on these
workaround for example 2
callback_getVNodeById('elementsArea').dom
=>
document.getElementById("elementsArea")