Revert "[breaking] remove kit.browser.hydrate config in favor of `c…

…ompilerOptions.hydratable` (#5155)" This reverts commit 0861127.
sveltejs · Jun 7, 2022 · 2198f24 · 2198f24
1 parent 1bdb334
commit 2198f24
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 30 deletions.
diff --git a/.changeset/cold-sheep-yawn.md b/.changeset/cold-sheep-yawn.md
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 [`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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,17 +9,14 @@ 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: undefined,
+			hydrate: true,
 			router: true
 		},
 		csp: {

diff --git 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
@@ -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
 	});
 };

diff --git 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,