sveltejs · benmccann · Jun 7, 2022 · Jun 3, 2022 · Jun 7, 2022
diff --git a/.changeset/cold-sheep-yawn.md b/.changeset/cold-sheep-yawn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] remove kit.browser.hydrate config in favor of compilerOptions.hydratable
diff --git a/documentation/docs/11-page-options.md b/documentation/docs/11-page-options.md
@@ -24,7 +24,7 @@ Note that this will disable client-side routing for any navigation from this pag
 
 ### hydrate
 
-Ordinarily, SvelteKit [hydrates](/docs/appendix#hydration) your server-rendered HTML into an interactive page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can skip hydration when the app boots up with the app-wide [`browser.hydrate` config option](/docs/configuration#browser) or the page-level `hydrate` export:
+Ordinarily, SvelteKit [hydrates](/docs/appendix#hydration) your server-rendered HTML into an interactive page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can skip hydration when the app boots up with the app-wide [`compilerOptions.hydratable` config option](https://svelte.dev/docs#compile-time-svelte-compile) or the page-level `hydrate` export:
 
 ```html
 <script context="module">

diff --git a/documentation/docs/14-configuration.md b/documentation/docs/14-configuration.md
@@ -19,7 +19,6 @@ const config = {
 		alias: {},
 		appDir: '_app',
 		browser: {
-			hydrate: true,
 			router: true
 		},
 		csp: {
@@ -121,7 +120,6 @@ The directory relative to `paths.assets` where the built JS and CSS (and importe
 
 An object containing zero or more of the following `boolean` values:
 
-- `hydrate` — whether to [hydrate](/docs/page-options#hydrate) the server-rendered HTML with a client-side app. (It's rare that you would set this to `false` on an app-wide basis.)
 - `router` — enables or disables the client-side [router](/docs/page-options#router) app-wide.
 
 ### csp

diff --git a/documentation/docs/16-seo.md b/documentation/docs/16-seo.md
@@ -88,11 +88,13 @@ An unfortunate reality of modern web development is that it is sometimes necessa
 /// file: svelte.config.js
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	compilerOptions: {
+		hydratable: false,
+	}
 	kit: {
-		// the combination of these options
-		// disables JavaScript
+		// together with hydratable: false
+		// this disables JavaScript
 		browser: {
-			hydrate: false,
 			router: false
 		},
 

diff --git a/packages/kit/src/core/build/build_server.js b/packages/kit/src/core/build/build_server.js
@@ -64,7 +64,7 @@ export class Server {
 				error.stack = this.options.get_stack(error);
 			},
 			hooks: null,
-			hydrate: ${s(config.kit.browser.hydrate)},
+			hydrate: ${s(config.compilerOptions.hydratable)},
 			manifest,
 			method_override: ${s(config.kit.methodOverride)},
 			paths: { base, assets },

diff --git a/packages/kit/src/core/build/utils.js b/packages/kit/src/core/build/utils.js
@@ -82,10 +82,6 @@ export const get_default_config = function ({ client_out_dir, config, input, out
 		plugins: [
 			svelte({
 				...config,
-				compilerOptions: {
-					...config.compilerOptions,
-					hydratable: !!config.kit.browser.hydrate
-				},
 				configFile: false
 			})
 		],

diff --git a/packages/kit/src/core/config/index.spec.js b/packages/kit/src/core/config/index.spec.js
@@ -9,14 +9,17 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = join(__filename, '..');
 
 const get_defaults = (prefix = '') => ({
+	compilerOptions: {
+		hydratable: true
+	},
 	extensions: ['.svelte'],
 	kit: {
 		adapter: null,
 		alias: {},
 		amp: undefined,
 		appDir: '_app',
 		browser: {
-			hydrate: true,
+			hydrate: undefined,
 			router: true
 		},
 		csp: {

diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
@@ -5,6 +5,10 @@ import { join } from 'path';
 /** @type {Validator} */
 const options = object(
 	{
+		compilerOptions: object({
+			hydratable: boolean(true)
+		}),
+
 		extensions: validate(['.svelte'], (input, keypath) => {
 			if (!Array.isArray(input) || !input.every((page) => typeof page === 'string')) {
 				throw new Error(`${keypath} must be an array of strings`);
@@ -74,7 +78,10 @@ const options = object(
 			}),
 
 			browser: object({
-				hydrate: boolean(true),
+				// TODO remove for 1.0
+				hydrate: error(
+					(keypath) => `${keypath} has been moved to config.compilerOptions.hydratable`
+				),
 				router: boolean(true)
 			}),
 
@@ -142,7 +149,7 @@ const options = object(
 			),
 
 			// TODO remove for 1.0
-			hydrate: error((keypath) => `${keypath} has been moved to config.kit.browser.hydrate`),
+			hydrate: error((keypath) => `${keypath} has been moved to config.compilerOptions.hydratable`),
 
 			inlineStyleThreshold: number(0),
 

diff --git a/packages/kit/src/core/dev/plugin.js b/packages/kit/src/core/dev/plugin.js
@@ -375,7 +375,7 @@ export const sveltekit = function (svelte_config) {
 									});
 								},
 								hooks,
-								hydrate: svelte_config.kit.browser.hydrate,
+								hydrate: svelte_config.compilerOptions.hydratable,
 								manifest,
 								method_override: svelte_config.kit.methodOverride,
 								paths: {
@@ -523,10 +523,6 @@ function has_correct_case(file, assets) {
 export const svelte = function (svelte_config) {
 	return svelte_plugin({
 		...svelte_config,
-		compilerOptions: {
-			...svelte_config.compilerOptions,
-			hydratable: !!svelte_config.kit.browser.hydrate
-		},
 		configFile: false
 	});
 };

diff --git a/packages/kit/test/apps/amp/svelte.config.js b/packages/kit/test/apps/amp/svelte.config.js
@@ -2,10 +2,12 @@ import path from 'path';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	compilerOptions: {
+		hydratable: false
+	},
 	kit: {
 		browser: {
-			router: false,
-			hydrate: false
+			router: false
 		},
 
 		inlineStyleThreshold: Infinity,