Skip to content

Commit

Permalink
fix(runtime): make isSameVnode return false on initial render in a hy…
Browse files Browse the repository at this point in the history
…dration case
  • Loading branch information
christian-bromann committed Jul 8, 2024
1 parent 23f2b47 commit 6ec65dc
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 0 deletions.
39 changes: 39 additions & 0 deletions src/runtime/vdom/test/vdom-render.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { isSameVnode } from '../vdom-render';

describe('isSameVnode', () => {
it('should detect objectively same nodes', () => {
const vnode1: any = {
$tag$: 'div',
$key$: '1',
$elm$: { nodeType: 9 },
};
const vnode2: any = {
$tag$: 'div',
$key$: '1',
$elm$: { nodeType: 9 },
};
expect(isSameVnode(vnode1, vnode2)).toBe(true);
});

it('should return false in case of hyration', () => {
const vnode1: any = {
$tag$: 'slot',
$key$: '1',
$elm$: { nodeType: 9 },
$nodeId$: 1,
};
const vnode2: any = {
$tag$: 'slot',
$key$: '1',
$elm$: { nodeType: 9 },
};
const vnode3: any = {
$tag$: 'slot',
$key$: '1',
$elm$: { nodeType: 8 },
$nodeId$: 2,
};
expect(isSameVnode(vnode1, vnode2, true)).toBe(false);
expect(isSameVnode(vnode3, vnode2, true)).toBe(true);
});
});
12 changes: 12 additions & 0 deletions src/runtime/vdom/vdom-render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -610,6 +610,18 @@ export const isSameVnode = (leftVNode: d.VNode, rightVNode: d.VNode, isInitialRe
// need to have the same element tag, and same key to be the same
if (leftVNode.$tag$ === rightVNode.$tag$) {
if (BUILD.slotRelocation && leftVNode.$tag$ === 'slot') {
// We are not considering the same node if:
if (
// The component gets hydrated and no VDOM has been initialized.
// Here the comparison can't happen as $name$ property is not set for `leftNode`.
'$nodeId$' in leftVNode && isInitialRender &&
// `leftNode` is not from type HTMLComment which would cause many
// hydration comments to be removed
leftVNode.$elm$.nodeType !== 8
) {
return false;
}

return leftVNode.$name$ === rightVNode.$name$;
}
// this will be set if JSX tags in the build have `key` attrs set on them
Expand Down

0 comments on commit 6ec65dc

Please sign in to comment.