hyperapp: Transitions broken in 1.2.6
Between 1.2.5 and 1.2.6, this snippet was introduced in the child-patching algorithm:
if (newKey != null && newKey === getKey(oldChildren[i + 1])) {
if (oldKey == null) {
removeElement(element, oldElements[i], oldChildren[i])
}
i++
continue
}
In cases where all children are keyed, and the first one is removed, I believe this somehow causes onupdate
not to be called for the rest of the children. (Not exactly sure how yet)
Why do I think this?
The behavior can be observed in the “Toasts” example of @hyperapp/transitions: https://codepen.io/zaceno/pen/QOYOZd
Add a few messages (like five) Click the messages away from the top.
Notice that the remaining children don’t slide up smoothly as they should. Rather they skip up immediately. This means that the Move
transition isn’t being triggered.
Also, notice that the fade-out animation for removed toasts doesn’t occur from their current position at the top, but from their original position (before you started removing them). This tells me that the position-tracking isn’t being triggered either.
Both the Move
transition and position tracking are triggered by the onupdate
lifecycle method. So my conclusion is that onupdate
is not being called.
Cross-reference: https://github.com/hyperapp/transitions/issues/19
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 17 (17 by maintainers)
Here is a start: https://github.com/jorgebucaran/superfine/tree/store-elem-in-vnode
If I can get somewhere I like with that branch and use my time well, I may be able to include a partial diff rewrite in 2.0.
Current status of this issue: waiting for superfine’s new vdom to be ported to hyperapp as it fixes a bug. The bug was present before hyperapp v1.2.6 as well, but likely exacerbated in v1.2.6, and so that’s when I started observing it in @hyperapp/transitions.
https://github.com/hyperapp/hyperapp/issues/737
Yep, I figured you were talking about
@hyperapp/transitions
.Looking into hyperapp’s source again, I would expect this function still gets called for all of the children: https://github.com/hyperapp/hyperapp/blob/master/src/index.js#L304
The
isRecycling
flag should befalse
by then, so it’s confusing whyonupdate
wouldn’t get added to the lifecycle queue.