From 1dae4898efd3c4a4e596917ee9426ed617efe50b Mon Sep 17 00:00:00 2001
From: frontman-git <chanhee.biz@gmail.com>
Date: Wed, 18 Jun 2025 10:44:13 +0900
Subject: [PATCH] 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
---
 src/diff/children.js        | 10 +++++++++-
 test/browser/render.test.js |  7 +++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/diff/children.js b/src/diff/children.js
index 7f401a0373..422000b1ba 100644
--- a/src/diff/children.js
+++ b/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,
diff --git a/test/browser/render.test.js b/test/browser/render.test.js
index 95444aa8ba..fd4517360b 100644
--- a/test/browser/render.test.js
+++ b/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>`);
+	});
 });