fix hydration of top-level content (#4550)

Author: tanhauhau

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Allow `<svelte:self>` to be used in a slot ([#2798](https://github.com/sveltejs/svelte/issues/2798))
 * Expose object of unknown props in `$$restProps` ([#2930](https://github.com/sveltejs/svelte/issues/2930))
+* Fix hydration of top-level content ([#4542](https://github.com/sveltejs/svelte/issues/4542))
 
 ## 3.19.2
 

src/runtime/internal/Component.ts

@@ -1,7 +1,7 @@
 import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
 import { current_component, set_current_component } from './lifecycle';
 import { blank_object, is_function, run, run_all, noop } from './utils';
-import { children } from './dom';
+import { children, detach } from './dom';
 import { transition_in } from './transitions';
 
 interface Fragment {
@@ -146,8 +146,10 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 	if (options.target) {
 		if (options.hydrate) {
+			const nodes = children(options.target);
 			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			$$.fragment && $$.fragment!.l(children(options.target));
+			$$.fragment && $$.fragment!.l(nodes);
+			nodes.forEach(detach);
 		} else {
 			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			$$.fragment && $$.fragment!.c();

test/hydration/samples/top-level-cleanup-2/_after.html

@@ -0,0 +1 @@
+<div>Hello world</div>

test/hydration/samples/top-level-cleanup-2/_before.html

@@ -0,0 +1,2 @@
+<main>This should be thrown away</main>
+<div>hello</div>

test/hydration/samples/top-level-cleanup-2/_config.js

@@ -0,0 +1 @@
+export default {};

test/hydration/samples/top-level-cleanup-2/main.svelte

@@ -0,0 +1 @@
+<div>Hello world</div>

test/hydration/samples/top-level-cleanup/_after.html

@@ -0,0 +1 @@
+<div>Hello world</div>

test/hydration/samples/top-level-cleanup/_before.html

@@ -0,0 +1 @@
+<main>This should be thrown away</main>

test/hydration/samples/top-level-cleanup/_config.js

@@ -0,0 +1 @@
+export default {};

test/hydration/samples/top-level-cleanup/main.svelte

@@ -0,0 +1 @@
+<div>Hello world</div>