Node reordering issues

[yuretz]

First of all I would like to thank you for your awesome work. This micro-framework/library looks really interesting and very promising indeed.

I was playing with the example provided here and stumbled upon a couple of issues.

The first one is that sometimes, when re-rendering a re-ordered array, the first item is not displayed. I've tried both with data-id attribute in the template and without it, it doesn't help much. What am I doing wrong here?

The second one is just a DOMException being thrown when trying to render the reordered array.

Both issues are illustrated by this fiddle

[yuretz]

Just a small update. Everything renders as expected if the original array is cloned on each update. See this fiddle. However the original example in the documentation suggests that in-place array mutations should be possible too, so I still think this is an issue.

[joshgillies]

hey @yuretz nice bug report. It looks like this bug may have been introduced with #100. Testing your original example against hyperhtml@1.6.7 the list is rendered as expected -
https://jsfiddle.net/L3se6mw4/3/.

[WebReflection]

nice bug indeed ... but majinbuu is just fine. There is something weird going on here, the logic is perfectly fine but it misses one call. I will investigate more tomorrow but so far this works, which is reassuring:

const todo = [
  {id: 0, text: 'write documentation'},
  {id: 1, text: 'publish online'}
];
const list = [];
const aura = majinbuu.aura({splice() {
  console.log(arguments);
  return list.splice.apply(list, arguments);
}}, list);

majinbuu(aura, todo);

todo.push({id: 2, text: 'create Code Pen'});
majinbuu(aura, todo);

const strcmp = (a, b) => (a > b ? 1 : (a < b ? -1 : 0));
todo.sort((a, b) => strcmp(a.text, b.text));
majinbuu(aura, todo);

For some reason, the sort splice is invoked once instead of twice ... and not sure why is that.

[WebReflection]

P.S. and FYI: the reason cloning each object works is that you are creating new wires each time (always different nodes)

[joshgillies]

Oh and also:

I've tried both with data-id attribute in the template and without it, it doesn't help much.

for the record data-id holds no special meaning in hyperHTML - @WebReflection I wonder if that example should be changed? My worry is that by having <li data-id=${item.id}>...</li> we're confusing existing users of React that there's special meaning there, similar to how you would assign a key to nodes in React which is a hint for optimising the rendering of lists.

[WebReflection]

that's just an attribute, but here I have bigger problems to deal with ... 🤷‍♂️

[WebReflection]

@yuretz can you please test this version and tell me if everything looks good to you? Thanks
https://cdn.rawgit.com/WebReflection/hyperHTML/2495c8d46f5ccf63906c729d3f64c8e6abcba7c5/index.js

edit this is the fiddle with this version https://jsfiddle.net/58cnrsq4/

[WebReflection]

@joshgillies I don't know React much so I don't know what's wrong there. Does react deal in a special way with data-id ? Currently, React is way inferior to hyperHTML and others when it comes to attributes so I'm not sure I should penalize the documentation in favor of React weird cases. hyperHTML just set attributes, only data or events have special meanings but if you think something might really put people off please do file a PR to the documentation site, thank you!

[joshgillies]

@WebReflection confirmed with @yuretz original example that the latest as of 2495c8d resolves the issue.

Also regarding data-id I guess I was speculating a little, @yuretz if you can confirm whether you thought there was special meaning behind it that would help clear things up. 👍

[WebReflection]

I've also added the sorting test case and it's covered now. Since the fix is super ugly but kinda obvious, I'm going to push this as patch regardless (or I cannot sleep tonight)

[joshgillies]

@WebReflection adding a test case would be 👌 Nice work!