hydrate correctly + test

packages/svelte/src/internal/client/dom/blocks/portal.js

@@ -2,7 +2,7 @@
 import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js';
 import { block, remove_effect_dom, render_effect } from '../../reactivity/effects.js';
 import { active_effect, set_active_effect } from '../../runtime.js';
-import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
+import { hydrate_next, hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
 import { get_next_sibling } from '../operations.js';
 
 /**
@@ -57,6 +57,10 @@ export function portal_outlet(node, id) {
 	var anchor = node;
 	const get_id = typeof id === 'function' ? id : () => id;
 
+	if (hydrating) {
+		anchor = hydrate_next();
+	}
+
 	render_effect(() => {
 		id = get_id();
 

packages/svelte/tests/runtime-runes/samples/portal-switch/PageA.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { getPortalKey } from './main.svelte';
+</script>
+
+{#portal getPortalKey()}
+	on page A
+{/portal}
+
+<p>contents of page A</p>

packages/svelte/tests/runtime-runes/samples/portal-switch/PageB.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { getPortalKey } from './main.svelte';
+</script>
+
+{#portal getPortalKey()}
+	on page B
+{/portal}
+
+<p>contents of page B</p>

packages/svelte/tests/runtime-runes/samples/portal-switch/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<div>on page A</div> <button>switch page</button> <p>contents of page A</p>',
+	test({ assert, target }) {
+		const [toggle] = target.querySelectorAll('button');
+
+		toggle.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<div>on page B</div> <button>switch page</button> <p>contents of page B</p>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/portal-switch/main.svelte

@@ -0,0 +1,24 @@
+<script module>
+	import { createContext } from 'svelte';
+
+	const [getPortalKey, setPortalKey] = createContext();
+	export { getPortalKey };
+</script>
+
+<script>
+	import PageA from './PageA.svelte';
+	import PageB from './PageB.svelte';
+
+	const portalKey = Symbol('portal');
+	setPortalKey(portalKey);
+
+	let Page = $state(PageA);
+</script>
+
+<div>
+	{@portal portalKey}
+</div>
+
+<button onclick={() => Page = Page === PageA ? PageB : PageA}>switch page</button>
+
+<Page />