Skip to content

Commit 1dae489

Browse files
committed
fix: reuse DOM nodes inside <template> during hydration
fix: apply precommit hook Co-authored-by: Ryan Christian <33403762+rschristian@users.noreply.github.com> refactor: reorder template tag check to avoid expensive instanceof first Co-authored-by: Ryan Christian <33403762+rschristian@users.noreply.github.com> fix: import slice from util file
1 parent 9103e8f commit 1dae489

File tree

2 files changed

+16
-1
lines changed

2 files changed

+16
-1
lines changed

src/diff/children.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import {
88
UNDEFINED,
99
NULL
1010
} from '../constants';
11-
import { isArray } from '../util';
11+
import { isArray, slice } from '../util';
1212
import { getDomSibling } from '../component';
1313

14+
1415
/**
1516
* @typedef {import('../internal').ComponentChildren} ComponentChildren
1617
* @typedef {import('../internal').Component} Component
@@ -53,6 +54,13 @@ export function diffChildren(
5354
isHydrating,
5455
refQueue
5556
) {
57+
if (
58+
newParentVNode.type === 'template' &&
59+
excessDomChildren?.length === 0 &&
60+
parentDom instanceof DocumentFragment
61+
) {
62+
excessDomChildren = slice.call(parentDom.childNodes);
63+
}
5664
let i,
5765
/** @type {VNode} */
5866
oldVNode,

test/browser/render.test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2013,4 +2013,11 @@ describe('render()', () => {
20132013
render(<App />, scratch);
20142014
expect(scratch.innerHTML).to.equal('hello world');
20152015
});
2016+
it('should hydrate <template> tags ', () => {
2017+
const App = () => <template><h1>it works</h1></template>;
2018+
scratch.innerHTML = `<template><h1>it works</h1></template>`;
2019+
2020+
render(<App />, scratch);
2021+
expect(scratch.innerHTML).to.equal(`<template><h1>it works</h1></template>`);
2022+
});
20162023
});

0 commit comments

Comments
 (0)