feat: default to hydratable: false and add dynamicCompileOptions (#122)

* feat: default to hydratable: false and add experimental.dynamicCompileOptions

* chore: cleanup e2e-tests vite configs

Author: dominikg

.changeset/calm-dancers-accept.md

@@ -0,0 +1,9 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+change default value of compilerOptions.hydratable to false
+
+This is done to align with svelte compiler defaults and improve output in non-ssr scenarios.
+
+Add `{compilerOptions: {hydratable: true}}` to vite-plugin-svelte config if you need hydration (eg. for ssr)

.changeset/curly-pianos-brush.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+add config option `experimental.dynamicCompileOptions` for finegrained control over compileOptions

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -1,11 +1,12 @@
 import {
-	readFileContent,
 	editFile,
 	editFileAndWaitForHmrComplete,
 	getColor,
 	getEl,
 	getText,
 	isBuild,
+	readFileContent,
+	sleep,
 	untilUpdated
 } from '../../testUtils';
 
@@ -14,12 +15,37 @@ import path from 'path';
 
 describe('kit-node', () => {
 	describe('index route', () => {
-		it('should contain greeting', async () => {
-			// TODO is hydration testing needed here?
-			expect(await page.textContent('h1')).toMatch('Hello world!'); // after hydration
+		it('should hydrate', async () => {
+			// mark initial nodes
+			await page.$eval('#load', (e) => {
+				e['__initialNode'] = true;
+			});
+			await page.$eval('#mount', (e) => {
+				e['__initialNode'] = true;
+			});
+
+			// check content before hydration
+			expect(await getText('h1')).toBe('Hello world!');
+			expect(await getText('#load')).toBe('SERVER_LOADED');
+			expect(await getText('#mount')).toBe('BEFORE_MOUNT');
 
+			// also get page as text to confirm
 			const html = await (await fetch(page.url())).text();
-			expect(html).toMatch('Hello world!'); // before hydration
+			expect(html).toMatch('Hello world!');
+			expect(html).toMatch('SERVER_LOADED');
+			expect(html).toMatch('BEFORE_MOUNT');
+
+			// wait a bit for hydration to kick in
+			await sleep(250);
+
+			// check hydrated content
+			expect(await getText('#load')).toBe('CLIENT_LOADED');
+			expect(await getText('#mount')).toBe('AFTER_MOUNT');
+
+			// check that it did not replace the dom elements with new ones
+			expect(await page.$eval('#load', (e) => e['__initialNode'])).toBe(true);
+			expect(await page.$eval('#mount', (e) => e['__initialNode'])).toBe(true);
+
 			if (isBuild) {
 				// TODO additional testing needed here once vite-plugin-svelte implements indexHtmlTransform hook
 			}
@@ -51,7 +77,7 @@ describe('kit-node', () => {
 
 		it('should load dynamic import in onMount', async () => {
 			// expect log to contain message with dynamic import value from onMount
-			expect(browserLogs.some((x) => x === `onMount dynamic imported isSSR: false`)).toBe(true);
+			expect(browserLogs.some((x) => x === 'onMount dynamic imported isSSR: false')).toBe(true);
 		});
 
 		if (isBuild) {

packages/e2e-tests/kit-node/src/routes/index.svelte

@@ -1,26 +1,47 @@
+<script context="module">
+	/**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+	export async function load() {
+		if (globalThis.window) {
+			// delay load on client so we can test hydration with playwright
+			return new Promise((resolve) =>
+				setTimeout(() => {
+					resolve({ props: { load_status: 'CLIENT_LOADED' } });
+				}, 200)
+			);
+		} else {
+			return { props: { load_status: 'SERVER_LOADED' } };
+		}
+	}
+</script>
+
 <script>
 	import { onMount } from 'svelte';
 	// eslint-disable-next-line node/no-missing-import
 	import Counter from '$lib/Counter.svelte';
 	// eslint-disable-next-line node/no-missing-import
 	import Child from '$lib/Child.svelte';
-
+	export let load_status = 'NOT_LOADED';
+	let mount_status = 'BEFORE_MOUNT';
 	onMount(async () => {
 		const isSSR = (await import('../client-only-module.js')).default;
 		console.log(`onMount dynamic imported isSSR: ${isSSR}`);
+		mount_status = 'AFTER_MOUNT';
 	});
 </script>
 
 <main>
 	<h1>Hello world!</h1>
-
 	<Counter />
 
 	<p>Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
 
 	<div id="before-child">before-child</div>
 	<Child testId="test-child" />
 	<div id="after-child">after-child</div>
+	<div id="load">{load_status}</div>
+	<div id="mount">{mount_status}</div>
 </main>
 
 <!-- HMR-TEMPLATE-INJECT -->

packages/e2e-tests/vite-ssr/vite.config.js

@@ -4,7 +4,13 @@ const { svelte } = require('@sveltejs/vite-plugin-svelte');
 module.exports = defineConfig(({ command, mode }) => {
 	const isProduction = mode === 'production';
 	return {
-		plugins: [svelte()],
+		plugins: [
+			svelte({
+				compilerOptions: {
+					hydratable: true /* required for clientside hydration */
+				}
+			})
+		],
 		build: {
 			minify: isProduction,
 			assetsInlineLimit: 0

packages/vite-plugin-svelte/src/utils/compile.ts

@@ -15,26 +15,43 @@ const _createCompileSvelte = (makeHot: Function) =>
 		const { filename, normalizedFilename, cssId, ssr } = svelteRequest;
 		const { emitCss = true } = options;
 		const dependencies = [];
-		const finalCompilerOptions: CompileOptions = {
+
+		const compileOptions: CompileOptions = {
 			...options.compilerOptions,
 			filename,
 			generate: ssr ? 'ssr' : 'dom'
 		};
 		if (options.hot && options.emitCss) {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
 			log.debug(`setting cssHash ${hash} for ${normalizedFilename}`);
-			finalCompilerOptions.cssHash = () => hash;
+			compileOptions.cssHash = () => hash;
 		}
 
 		let preprocessed;
 
 		if (options.preprocess) {
 			preprocessed = await preprocess(code, options.preprocess, { filename });
 			if (preprocessed.dependencies) dependencies.push(...preprocessed.dependencies);
-			if (preprocessed.map) finalCompilerOptions.sourcemap = preprocessed.map;
+			if (preprocessed.map) compileOptions.sourcemap = preprocessed.map;
 		}
-
-		const compiled = compile(preprocessed ? preprocessed.code : code, finalCompilerOptions);
+		const finalCode = preprocessed ? preprocessed.code : code;
+		const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
+			filename,
+			code: finalCode,
+			compileOptions
+		});
+		if (dynamicCompileOptions && log.debug.enabled) {
+			log.debug(
+				`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`
+			);
+		}
+		const finalCompileOptions = dynamicCompileOptions
+			? {
+					...compileOptions,
+					...dynamicCompileOptions
+			  }
+			: compileOptions;
+		const compiled = compile(finalCode, finalCompileOptions);
 
 		if (emitCss && compiled.css.code) {
 			// TODO properly update sourcemap?
@@ -49,7 +66,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 				hotOptions: options.hot,
 				compiled,
 				originalCode: code,
-				compileOptions: finalCompilerOptions
+				compileOptions: finalCompileOptions
 			});
 		}
 
@@ -58,6 +75,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 		return {
 			filename,
 			normalizedFilename,
+			// @ts-ignore
 			compiled,
 			ssr,
 			dependencies

packages/vite-plugin-svelte/src/utils/options.ts

@@ -44,8 +44,7 @@ function buildDefaultOptions(isProduction: boolean, options: Partial<Options>):
 		compilerOptions: {
 			format: 'esm',
 			css: !emitCss,
-			dev: !isProduction,
-			hydratable: true
+			dev: !isProduction
 		}
 	};
 	log.debug(`default options for ${isProduction ? 'production' : 'development'}`, defaultOptions);
@@ -311,6 +310,26 @@ export interface ExperimentalOptions {
 	 * to use this option you have to install "diff-match-patch"
 	 */
 	generateMissingPreprocessorSourcemaps?: boolean;
+
+	/**
+	 * function to update compilerOptions before compilation
+	 *
+	 * data.filename is the file to be compiled,
+	 * data.code is the already preprocessed code
+	 * data.compileOptions are the compilerOptions that are going to be used
+	 *
+	 * to change one, you should return an object with the changes you need, eg:
+	 *
+	 * ```
+	 * ({filename,compileOptions}) => { if( compileWithHydratable(filename) && !compileOptions.hydratable ){ return {hydratable: true}}}
+	 * ```
+	 * @default undefined
+	 */
+	dynamicCompileOptions?: (data: {
+		filename: string;
+		code: string;
+		compileOptions: Partial<CompileOptions>;
+	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
 }
 
 export interface ResolvedOptions extends Options {

scripts/jestPerTestSetup.ts

@@ -117,9 +117,7 @@ beforeAll(async () => {
 			const port = await getUniqueTestPort(e2eTestsRoot, testName, isBuild);
 			server = await serve(tempDir, isBuild, port);
 			const url = ((global as any).viteTestUrl = `http://localhost:${port}`);
-			await (isBuild
-				? page.goto(url, { waitUntil: 'networkidle' })
-				: goToUrlAndWaitForViteWSConnect(page, url));
+			await (isBuild ? page.goto(url) : goToUrlAndWaitForViteWSConnect(page, url));
 		}
 	} catch (e) {
 		// jest doesn't exit if our setup has error here