Repository: sveltejs/kit
Pull request #5178 (2022-06-07 19:36:39)

Revert "[breaking] remove `kit.browser.hydrate` config in favor of `compilerOptions.hydratable`"
we messed this one up — it turns out it doesn't enable the thing we thought it would enable, so we're making a change elsewhere instead. in the meantime, there's no sense in removing the `browser.hydrate` option. sorry for the churn, for anyone who upgraded to next.349 already

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 2198f242cbf9297c95733d4a26f9727b44b6ca7b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/sveltejs/kit/new/revert-5155-hydrate?filename=.changeset/good-peaches-roll.md&value=---%0A%22%40sveltejs%2Fkit%22%3A%20patch%0A%22test-amp%22%3A%20patch%0A---%0A%0ARevert%20%22%5Bbreaking%5D%20remove%20%60kit.browser.hydrate%60%20config%20in%20favor%20of%20%60compilerOptions.hydratable%60%22%0A)



Patch:
diff --git a/.changeset/good-peaches-roll.md b/.changeset/good-peaches-roll.md
new file mode 100644
index 000000000..b6b873cd5
--- /dev/null
+++ b/.changeset/good-peaches-roll.md
@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+[breaking] revert removal of `kit.browser.hydrate`
diff --git a/documentation/docs/11-page-options.md b/documentation/docs/11-page-options.md
index 1a54fceb9..046b56261 100644
--- 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 [`compilerOptions.hydratable` config option](https://svelte.dev/docs#compile-time-svelte-compile) 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 [`browser.hydrate` config option](/docs/configuration#browser) or the page-level `hydrate` export:
 
 ```html
 <script context="module">
diff --git a/documentation/docs/14-configuration.md b/documentation/docs/14-configuration.md
index edbcc67f0..123eb37b9 100644
--- a/documentation/docs/14-configuration.md
+++ b/documentation/docs/14-configuration.md
@@ -19,6 +19,7 @@ const config = {
 		alias: {},
 		appDir: '_app',
 		browser: {
+			hydrate: true,
 			router: true
 		},
 		csp: {
@@ -120,6 +121,7 @@ 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
index d82e8e6c3..0e61d988e 100644
--- a/documentation/docs/16-seo.md
+++ b/documentation/docs/16-seo.md
@@ -88,13 +88,11 @@ 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: {
-		// together with hydratable: false
-		// this disables JavaScript
+		// the combination of these options
+		// 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
index 294cbec4d..ad5ac851b 100644
--- 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.compilerOptions.hydratable)},
+			hydrate: ${s(config.kit.browser.hydrate)},
 			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
index 196de0479..68f28fdd8 100644
--- a/packages/kit/src/core/build/utils.js
+++ b/packages/kit/src/core/build/utils.js
@@ -82,6 +82,10 @@ 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
index 5b37bcfa6..597a5ecf9 100644
--- a/packages/kit/src/core/config/index.spec.js
+++ b/packages/kit/src/core/config/index.spec.js
@@ -9,9 +9,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = join(__filename, '..');
 
 const get_defaults = (prefix = '') => ({
-	compilerOptions: {
-		hydratable: true
-	},
 	extensions: ['.svelte'],
 	kit: {
 		adapter: null,
@@ -19,7 +16,7 @@ const get_defaults = (prefix = '') => ({
 		amp: undefined,
 		appDir: '_app',
 		browser: {
-			hydrate: undefined,
+			hydrate: true,
 			router: true
 		},
 		csp: {
diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
index 0833b72fe..9d7405deb 100644
--- a/packages/kit/src/core/config/options.js
+++ b/packages/kit/src/core/config/options.js
@@ -5,10 +5,6 @@ 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`);
@@ -78,10 +74,7 @@ const options = object(
 			}),
 
 			browser: object({
-				// TODO remove for 1.0
-				hydrate: error(
-					(keypath) => `${keypath} has been moved to config.compilerOptions.hydratable`
-				),
+				hydrate: boolean(true),
 				router: boolean(true)
 			}),
 
@@ -149,7 +142,7 @@ const options = object(
 			),
 
 			// TODO remove for 1.0
-			hydrate: error((keypath) => `${keypath} has been moved to config.compilerOptions.hydratable`),
+			hydrate: error((keypath) => `${keypath} has been moved to config.kit.browser.hydrate`),
 
 			inlineStyleThreshold: number(0),
 
diff --git a/packages/kit/src/core/dev/plugin.js b/packages/kit/src/core/dev/plugin.js
index 903467874..0736eaca4 100644
--- 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.compilerOptions.hydratable,
+								hydrate: svelte_config.kit.browser.hydrate,
 								manifest,
 								method_override: svelte_config.kit.methodOverride,
 								paths: {
@@ -523,6 +523,10 @@ 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
 	});
 };


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