Corner cases for Arrays HTML formatter
Test 1
I tried this input in the demo:
[1, 2]
[3, 1, 2]
The output looks like this
[3(green), 1]
Instead of
[3(green), 1, 2]
Test 2
The same holds for this type of change:
[1, 2]
[2, 1]
The diff looks like
0: 1
1: moved to 0
It's hard to understand the final state of the list. For me it seems like the final list would have only one element (the one that was previously at 1).
I'm not an UX expert and I'm curious how to better format these types of changes so they are easy to understand.
Also, another bug, that might be easy to fix (didn't look much into formatters) is this:
For:
[{"id": 1, "value": 1}, {"id": 2, "value": 2}]
[{"id": 0, "value": 42}, {"id": 1, "value": 1}, {"id": 2, "value": "new one"}]
The diff looks good except for the unchanged list[1]. The formatter renders the left element instead of the right one, thus it shows left[1] which is {"id": 2, "value": 2} instead of {"id": 1, "value": 1} which is the one that actually wasn't changed.
Test1 is a duplicate of #72, Test2, might be related, but yes representing array moves, adds, deletes, and updates (inside an element) is challenging. Test3? yes, the unchanged values seem to not be considering position shifts, yes, I guess it's an easy fix.