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)

Most upvoted comments

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 be false by then, so it’s confusing why onupdate wouldn’t get added to the lifecycle queue.