chore: add ability to hydrate dom custom renderers samples

packages/svelte/tests/custom-renderers/shared.ts

@@ -5,9 +5,11 @@ import { assert } from 'vitest';
 import { compile_directory } from '../helpers.js';
 import { suite_with_variants, type BaseTest } from '../suite.js';
 import type { CompileOptions } from '#compiler';
-import renderer, { create_root, serialize, dispatch_event, dom_elements } from './renderer.js';
+import renderer, { create_root, serialize, dispatch_event, type ObjFragment } from './renderer.js';
 import { writeFile } from 'node:fs/promises';
 import { globSync } from 'tinyglobby';
+import { hydrate, unmount } from 'svelte';
+import { render } from 'svelte/server';
 
 // `_config.js` test callbacks rely on inferred parameter types, which
 // TypeScript treats as non-explicit and rejects for chai's assertion-function
@@ -29,7 +31,9 @@ export interface CustomRendererTest extends BaseTest {
 	html?: string;
 	compileOptions?: Partial<CompileOptions>;
 	props?: Record<string, any>;
+	server_props?: Record<string, any>;
 	context?: Map<any, any>;
+	hydrate?: true;
 	error?: string;
 	compile_error?: string;
 	compile_warnings?: false;
@@ -37,7 +41,7 @@ export interface CustomRendererTest extends BaseTest {
 	warnings?: string[];
 	test?: (args: {
 		assert: Assert;
-		target: any;
+		target: ObjFragment | HTMLElement;
 		component: Record<string, any>;
 		mod: any;
 		logs: any[];
@@ -45,7 +49,6 @@ export interface CustomRendererTest extends BaseTest {
 		renderer: typeof renderer;
 		serialize: typeof serialize;
 		dispatch_event: typeof dispatch_event;
-		dom_elements: Array<DocumentFragment | Node>;
 	}) => void | Promise<void>;
 }
 
@@ -96,6 +99,10 @@ async function common_setup(
 
 	try {
 		await compile_directory(cwd, 'client', compile_options);
+
+		if (config.hydrate) {
+			await compile_directory(cwd, 'server', compile_options);
+		}
 	} catch (err) {
 		if (config.compile_error) {
 			assert.include((err as Error).message, config.compile_error);
@@ -164,12 +171,17 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 
 	try {
 		const mod = await import(`${cwd}/_output/client/main.svelte.js`);
+
+		if (config.hydrate) {
+			await run_hydration_test(cwd, config, mod, logs, warnings);
+			return;
+		}
+
 		const target = create_root();
 
 		let unmount: (() => void) | undefined;
 		let component: Record<string, any> | undefined;
 		try {
-			dom_elements.length = 0;
 			const result = renderer.render(mod.default, {
 				target,
 				props: config.props ?? {},
@@ -218,8 +230,7 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 					warnings,
 					renderer: renderer,
 					serialize,
-					dispatch_event,
-					dom_elements
+					dispatch_event
 				});
 			}
 
@@ -253,6 +264,48 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 	}
 }
 
+async function run_hydration_test(
+	cwd: string,
+	config: CustomRendererTest,
+	mod: any,
+	logs: any[],
+	warnings: any[]
+) {
+	const target = document.createElement('main');
+	const rendered = await render((await import(`${cwd}/_output/server/main.svelte.js`)).default, {
+		props: config.server_props ?? config.props ?? {}
+	});
+	target.innerHTML = rendered.body;
+
+	const component = hydrate(mod.default, {
+		target,
+		props: config.props ?? {},
+		context: config.context
+	});
+
+	if (config.html) {
+		assert.equal(target.innerHTML, config.html);
+	}
+
+	try {
+		if (config.test) {
+			await config.test({
+				assert,
+				target,
+				component,
+				mod,
+				logs,
+				warnings,
+				renderer: renderer,
+				serialize,
+				dispatch_event
+			});
+		}
+	} finally {
+		unmount(component);
+	}
+}
+
 export function ok(value: any): asserts value {
 	if (!value) {
 		throw new Error(`Expected truthy value, got ${value}`);