Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix more remote node reordering issues #161

Merged
merged 2 commits into from
Jun 13, 2022
Merged

Conversation

lemonmade
Copy link
Member

My previous fix in #160 only covered a subset of the reordering bugs in remote-ui. There were two other issues that caused problems in other cases:

  1. We were not sending the correct index to appendChildBefore() in cases where the child was moving to a larger index in children in the same parent as it was already attached
  2. We were not replicating the "append starts by removing from an existing node" behavior in the RemoteRoot object.

This PR fixes both of those issues. The code is a little gnarly and I feel like I could do the whole "map remote root to remote receiver" much more cleanly if I started from scratch, but it appears to fix the reordering bugs that the last PR did not.

Copy link
Contributor

@alxclark alxclark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tophatted the changes using my own internal app and this fixed all of the rendering issues I was noticing previously. Thanks for the fix!

@ericfrank-stripe
Copy link
Contributor

@alxclark Could you give a brief description of the issues you were hitting? I'm curious if some of the bugs we're seeing at Stripe are related.

Copy link
Contributor

@kumar303 kumar303 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it works, ship it 🤷

It hurts my brain but thanks for adding tests. To aid in future refactoring (as you mentioned), it would help to have solid test coverage. I commented on some bits that look to be missing test coverage, in case you have time to add more tests.

The parts I didn't comment on seemed to have test coverage 🚀

Comment on lines +161 to +163
existingAttached = attachedNodes.get(
existingId ?? ROOT_ID,
) as RemoteReceiverAttachableRoot;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This case doesn't seem to have test coverage. Is it easy to add?

Comment on lines +180 to +183
if (id !== existingId) {
existingAttached.version += 1;
enqueueUpdate(existingAttached);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see any test failures when commenting this out. Maybe there is a way to cover it?

Comment on lines +185 to +187
normalizedChild = normalizeNode(child, addVersion);
retain(normalizedChild);
attach(normalizedChild);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see test failures when commenting this out, either

? Object.freeze(currentChildren)
: currentChildren;

newChildren = [...internals.children];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see test failures when commenting this out

? Object.freeze(currentChildren)
: currentChildren;

newChildren = [...internals.children];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see test failures when commenting this out

@alxclark
Copy link
Contributor

@ericfrank-stripe When reordering components on a remote when an explicit key prop was passed, children would be duplicated and or removed from the host.

@lemonmade
Copy link
Member Author

@kumar303 for sure, the core library is missing a lot of tests. We have mostly just used the minimal integration tests in @remote-ui/react to make sure nothing important breaks, and then using our own internal use of remote-ui at Shopify as a way to know when there are bugs. Definitely want to get the core fully covered in tests at some point, but I'm going to ship this fix as-is for the time being.

@lemonmade lemonmade merged commit 0e0ba08 into main Jun 13, 2022
@lemonmade lemonmade deleted the fix-more-reordering-issues branch June 13, 2022 14:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants