fix: reuse DOM nodes inside <template> during hydration

fix: apply precommit hook

Co-authored-by: Ryan Christian <[email protected]>

refactor: reorder template tag check to avoid expensive instanceof first

Co-authored-by: Ryan Christian <[email protected]>

fix: import slice from util file

Author: frontman-git

src/diff/children.js

@@ -8,9 +8,10 @@ import {
 	UNDEFINED,
 	NULL
 } from '../constants';
-import { isArray } from '../util';
+import { isArray, slice } from '../util';
 import { getDomSibling } from '../component';
 
+
 /**
  * @typedef {import('../internal').ComponentChildren} ComponentChildren
  * @typedef {import('../internal').Component} Component
@@ -53,6 +54,13 @@ export function diffChildren(
 	isHydrating,
 	refQueue
 ) {
+	if (
+		newParentVNode.type === 'template' &&
+		excessDomChildren?.length === 0 &&
+		parentDom instanceof DocumentFragment
+	) {
+		excessDomChildren = slice.call(parentDom.childNodes);
+	}
 	let i,
 		/** @type {VNode} */
 		oldVNode,

test/browser/render.test.js

@@ -2013,4 +2013,11 @@ describe('render()', () => {
 		render(<App />, scratch);
 		expect(scratch.innerHTML).to.equal('hello world');
 	});
+	it('should hydrate <template> tags ', () => {
+		const App = () => <template><h1>it works</h1></template>;
+		scratch.innerHTML = `<template><h1>it works</h1></template>`;
+
+		render(<App />, scratch);
+		expect(scratch.innerHTML).to.equal(`<template><h1>it works</h1></template>`);
+	});
 });