karax icon indicating copy to clipboard operation
karax copied to clipboard

regression: VNode.dom is nil

Open timotheecour opened this issue 4 years ago • 1 comments

/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>

timotheecour avatar Sep 13 '19 20:09 timotheecour

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")

timotheecour avatar Sep 18 '19 07:09 timotheecour