tag root attributes out of sync #2280

Closed
fabien opened this Issue Feb 28, 2017 · 8 comments

Comments

Projects
None yet
2 participants
@fabien
Contributor

fabien commented Feb 28, 2017

  1. Describe your issue:

Please see the plnkr below, the values are not in sync. This is a contrived example, in my case I had an issue with something similar, where I had a data-id attribute to identify each looped item. I noticed that the data-id attributes were never updated when an item was removed from this.items, regardless of no-reorder.

  1. Can you reproduce the issue?

http://plnkr.co/edit/2jdhrRgDEZr3vJvVsXip?p=preview

The color applied to the looped tag itself is out of sync with the value displayed inside.

  1. On which browser/OS does the issue appear?

  2. Which version of Riot does it affect?

v. 3.3.1

  1. How would you tag this issue?
  • Bug
@fabien

This comment has been minimized.

Show comment
Hide comment
@fabien

fabien Feb 28, 2017

Contributor

On a sidenote, I've been playing with MutationObserver and I've noticed that without no-reorder a lot of items are thrown away and recreated (typically all those after the item that was removed), and with no-reorder there's a sort of re-use of tags which is never picked up by the observer if an item is removed and another is added simultaneously. It does not pick up any changes, and observing attributes is not an option either, due to the bug outlined above.

Contributor

fabien commented Feb 28, 2017

On a sidenote, I've been playing with MutationObserver and I've noticed that without no-reorder a lot of items are thrown away and recreated (typically all those after the item that was removed), and with no-reorder there's a sort of re-use of tags which is never picked up by the observer if an item is removed and another is added simultaneously. It does not pick up any changes, and observing attributes is not an option either, due to the bug outlined above.

@fabien

This comment has been minimized.

Show comment
Hide comment
@fabien

fabien Mar 1, 2017

Contributor

Another update that seems to be related: when splicing (e.g. insertion at a specific index) in another object into the array being looped, with no-reorder enabled, impartial objects (for example without a color property) will retain the values of the item that was in the spot before.

Again, I noticed this in my current app, when I inserted an object without an id, it kept re-using the id that was there before. Repeatedly inserting without ids, would yield many seemingly identical objects.

I would expect the object to be reset, but perhaps this is not easily distinguishable for Riot internally. I'm using https://github.com/Yomguithereal/baobab so updates are expected to be yielding new instances with each change, as it keeps immutable state by default.

Contributor

fabien commented Mar 1, 2017

Another update that seems to be related: when splicing (e.g. insertion at a specific index) in another object into the array being looped, with no-reorder enabled, impartial objects (for example without a color property) will retain the values of the item that was in the spot before.

Again, I noticed this in my current app, when I inserted an object without an id, it kept re-using the id that was there before. Repeatedly inserting without ids, would yield many seemingly identical objects.

I would expect the object to be reset, but perhaps this is not easily distinguishable for Riot internally. I'm using https://github.com/Yomguithereal/baobab so updates are expected to be yielding new instances with each change, as it keeps immutable state by default.

@fabien

This comment has been minimized.

Show comment
Hide comment
@fabien

fabien Mar 1, 2017

Contributor

I've added another plnkr to show the behavior above:

http://plnkr.co/edit/sijR9FExaKfYkwvWnjeR?p=preview

Simply adding no-reorder causes this unexpected behavior.

Contributor

fabien commented Mar 1, 2017

I've added another plnkr to show the behavior above:

http://plnkr.co/edit/sijR9FExaKfYkwvWnjeR?p=preview

Simply adding no-reorder causes this unexpected behavior.

@GianlucaGuarini

This comment has been minimized.

Show comment
Hide comment
@fabien

This comment has been minimized.

Show comment
Hide comment
@fabien

fabien Mar 1, 2017

Contributor

@GianlucaGuarini can you explain how looped rendering actually works? With regards to no-reorder and without? I've come to realize that it's doing stuff internally you'd never expect.

Using MutationObserver I can observe all kinds of oddities, and especially how tags are being re-used. For example, on removal of a single item, I'm receiving an element that has all the properties of the last inserted item, not the actual item that was removed (somewhere halfway the list).

In addition, none of its root attributes is preserved on the element I receive, for example class is now empty.

Contributor

fabien commented Mar 1, 2017

@GianlucaGuarini can you explain how looped rendering actually works? With regards to no-reorder and without? I've come to realize that it's doing stuff internally you'd never expect.

Using MutationObserver I can observe all kinds of oddities, and especially how tags are being re-used. For example, on removal of a single item, I'm receiving an element that has all the properties of the last inserted item, not the actual item that was removed (somewhere halfway the list).

In addition, none of its root attributes is preserved on the element I receive, for example class is now empty.

@fabien

This comment has been minimized.

Show comment
Hide comment
@fabien

fabien Mar 5, 2017

Contributor

@GianlucaGuarini thanks for the prompt fix! What about the other points I raised? Do they remain valid? Something to consider for v.4 next? Or wontfix?

Contributor

fabien commented Mar 5, 2017

@GianlucaGuarini thanks for the prompt fix! What about the other points I raised? Do they remain valid? Something to consider for v.4 next? Or wontfix?

@GianlucaGuarini

This comment has been minimized.

Show comment
Hide comment
Member

GianlucaGuarini commented Mar 5, 2017

@fabien please see #2283

@fabien

This comment has been minimized.

Show comment
Hide comment
@fabien

fabien Mar 5, 2017

Contributor

@GianlucaGuarini are you specifically referring to this part, perhaps?

  1. Performant loops. A call such as items.push(elem) will update the array as well as the corresponding DOM collection in place. All array operations: unshift, splice, sort... are executed as fast as it can get.
Contributor

fabien commented Mar 5, 2017

@GianlucaGuarini are you specifically referring to this part, perhaps?

  1. Performant loops. A call such as items.push(elem) will update the array as well as the corresponding DOM collection in place. All array operations: unshift, splice, sort... are executed as fast as it can get.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment