vstyles setAttr not changing displayed VNode about karax

[ajusa]

Yep, that's a bug. There are workarounds (like have the current color be a part of the id attribute) but those are a hack. To be honest I'm kind of surprised this happens, this seems like a pretty basic test of the style handling code. Seems like the diffing code doesn't look at style changes when deciding to update an element?

Workaround:

import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]

var s1 = style(StyleAttr.color, "blue")

proc createDom(data: RouterData): VNode =
  result = buildHtml(tdiv):
    p(key="test" & s1.getAttr(StyleAttr.color), style = s1):
      text "change color!"
    button:
      text "Change Color"
      proc onclick(ev: Event; n: VNode) =
        echo "clicked"
        s1.setAttr("color", "red")

setRenderer createDom

[Araq]

Seems like the diffing code doesn't look at style changes when deciding to update an element?

I'm pretty sure that's what we're doing.

[ajusa]

That's why I'm surprised - I've literally seen that code, and had it work in many cases, but I'm not super sure what's going on here.

[geotre]

Changing

        s1.setAttr("color", "red")

to

        s1 = style(StyleAttr.color, "red")

works as expected.

The bug seems to actually be that modifying the existing vstyle ref causes the diff to see the old style as equal to the new style, because they are both the same js array, that contains the new values. (see here, both a.style and b.style refer to the same array). To have this work, the vdom would need to retain a deep copy of the vstyle when it is applied to the dom. This seems like an expensive way to handle allowing re-use of the same Vstyles ref. What do you think @Araq?

[Araq]

To have this work, the vdom would need to retain a deep copy of the vstyle when it is applied to the dom. This seems like an expensive way to handle allowing re-use of the same Vstyles ref.

Yes, performance of vstyle is really important. Can't be fixed.

[geotre]

Ok had a couple ideas of how we could handle this situation more gracefully. Let me know your preference @Araq and I'll PR it.

Solution 1:

To allow reusing a vstyle as tried above:
Tag VStyles with a "version" field. When the vstyle is modified, increment the version. When a vstyle is rendered, keep a copy of that version number in the vnode. Compare vstyle obj and then version when testing for equality.

Solution 2:

To warn when using a vstyle as tried above, perhaps in debug mode only:
Tag VStyles with a "used" field. When a vstyle is rendered, set it to true. When testing for equality, if vstyles are equal check if the "used" field is true on the new vstyle obj. If true, show a warning about not re-using vstyles (it would be runtime only/in the browser but it's better than nothing).

Option 1 seems like it might benefit performance, as vstyles can be kept around and just modified slightly when needed. Option 2 is simpler to implement and less likely to cause issues.

[Araq]

Option 1 seems better. I worry a bit of the overhead of yet another field for every VNode even though many don't have attached styles to them but I cannot think of a non-hacky way right that would avoid that.