Skip to content

Commit

Permalink
graciously handle array shuffling
Browse files Browse the repository at this point in the history
  • Loading branch information
JoviDeCroock committed Jun 18, 2024
1 parent 4c20c23 commit eec4c12
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 8 deletions.
24 changes: 19 additions & 5 deletions src/diff/children.js
Original file line number Diff line number Diff line change
Expand Up @@ -302,20 +302,34 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) {
childVNode._flags |= INSERT_VNODE;
}
} else if (matchingIndex !== skewedIndex) {
if (matchingIndex === skewedIndex + 1) {
if (matchingIndex == skewedIndex - 1) {
skew = matchingIndex - skewedIndex;
} else if (matchingIndex === skewedIndex + 1) {
skew++;
} else if (matchingIndex > skewedIndex) {
// Our matched DOM-node is further in the list of children than
// where it's at now.

// When the remaining old children is bigger than the new-children
// minus our skewed index we know we are dealing with a shrinking list
// we have to increase our skew with the matchedIndex - the skewed index
if (remainingOldChildren > newChildrenLength - skewedIndex) {
skew += matchingIndex - skewedIndex;
} else {
// If we have matched all the children just decrease the skew
skew--;
}
} else if (matchingIndex < skewedIndex) {
if (matchingIndex == skewedIndex - 1) {
skew = matchingIndex - skewedIndex;
// Our matched DOM-node is further in the negative way in the list of children
// than where it's at now.

// When the remaining old chiildren is less than the new children
// plus our skewed index we know we are dealing with a growing list
if (remainingOldChildren < newChildrenLength + skewedIndex) {
skew += matchingIndex + skewedIndex;
} else {
skew--;
}
} else {
skew = 0;
}

// Move this VNode's DOM if the original index (matchingIndex) doesn't
Expand Down
29 changes: 26 additions & 3 deletions test/browser/render.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -474,17 +474,17 @@ describe('render()', () => {

it('should support popover auto', () => {
render(<div popover="auto" />, scratch);
expect(scratch.innerHTML).to.equal("<div popover=\"auto\"></div>");
expect(scratch.innerHTML).to.equal('<div popover="auto"></div>');
});

it('should support popover true boolean', () => {
render(<div popover />, scratch);
expect(scratch.innerHTML).to.equal("<div popover=\"\"></div>");
expect(scratch.innerHTML).to.equal('<div popover=""></div>');
});

it('should support popover false boolean', () => {
render(<div popover={false} />, scratch);
expect(scratch.innerHTML).to.equal("<div></div>");
expect(scratch.innerHTML).to.equal('<div></div>');
});

// Test for preactjs/preact#4340
Expand Down Expand Up @@ -1625,4 +1625,27 @@ describe('render()', () => {
'<div><div>One</div><div>Six</div><div>Seven</div></div>'
);
});

it('shuffle', function () {
const App = ({ items }) => (
<div>
{items.map(key => (
<div key={key}>{key}</div>
))}
</div>
);
const a = ['0', '1', '2', '3', '4', '5', '6'];
const b = ['1', '3', '5', '2', '6', '4', '0'];
render(<App items={a} />, scratch);
expect(scratch.innerHTML).to.equal(
`<div>${a.map(n => `<div>${n}</div>`).join('')}</div>`
);

console.log('---');
render(<App items={b} />, scratch);

expect(scratch.innerHTML).to.equal(
`<div>${b.map(n => `<div>${n}</div>`).join('')}</div>`
);
});
});

0 comments on commit eec4c12

Please sign in to comment.