Changing the class list appended to an element name causes the element to be removed and recreated

I know the “correct” way to modify a class list is to use the class module, but I’m using snabbdom-jsx, and it provides a classNames property, which you can supply an array of class names to. The array is then translated to a period-delimited list of classes and appended to the element tag name, e.g.h('div.foo',...) becomes h('div.foo.bar', ...). As a result of this, snabbdom is removing the element entirely and relplacing it with a new element. This seems to me to be incorrect (not to mention inefficient) behaviour, seeing as only the class list has changed. I’ll log an issue with snabbdom-jsx as well and suggest use of the class module.

[paldepind]

When a virtual DOM library does children reordering it has to be able to somehow figure out which elements are identical. Snabbdom, React and most other virtual DOM libraries offer a key property to help guide this reordering.

I’m sure you know that.

With Snabbdom I decided that by default it would use an elements tag name, its id and its static classes to determine equality. This has the advantage that in many cases you can avoid adding key properties to elements and still do efficient reordering. Consider this example:

var vnode1 = patch(elm, h('div', [
  h('a.btn-primary', 'Click me'),
  h('a.btn-default', 'Click med')
]));
var vnode2 = patch(vnode1, h('div', [
  h('a.btn-default', 'Click med'),
  h('a.btn-primary', 'Click me')
]));

Here Snabbdom can only make a distinction between the two a elements by relying on the static classes. Thus it can efficiently do a reorder without needing users to supply a key property. This relies on a distinction between static classes and dynamic classes.

Thus I think this is neither incorrect nor inefficient behaviour.

We could do what @yelouafi suggests and add support for arrays in the class module. I would be open to do that. But I am not sure if it is a good idea. Determining added and removed elements between two lists take O(n^2) time and thus it would be less efficient than the current approach of using an object.

[yelouafi]

Finally i think my proposition doesnt make much sens. It doesnt make sens to check all elms for an array to endup just applying the whole array to the elm. One could just use the className prop. So i think keeping the current approach as is betterm