Warn if %sveltekit.body% is a direct child of <body> (#7652)

Rich-Harris · Conduitry · web-flow · commit 2bc62621e531 · 2022-11-14T19:10:58.000-05:00
* warn about %sveltekit.body% inside <body> - #7585 * add display: contents to wrapper element by default * changeset * Apply suggestions from code review Co-authored-by: Conduitry <git@chor.date> * update docs Co-authored-by: Conduitry <git@chor.date>
diff --git a/.changeset/purple-apes-whisper.md b/.changeset/purple-apes-whisper.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Add `style="display: contents"` to wrapper element by default
diff --git a/.changeset/slimy-laws-argue.md b/.changeset/slimy-laws-argue.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Warn if `%sveltekit.body%` is direct child of `<body>`
diff --git a/documentation/docs/10-getting-started/30-project-structure.md b/documentation/docs/10-getting-started/30-project-structure.md
@@ -42,7 +42,7 @@ The `src` directory contains the meat of your project.
 - `routes` contains the [routes](/docs/routing) of your application
 - `app.html` is your page template — an HTML document containing the following placeholders:
   - `%sveltekit.head%` — `<link>` and `<script>` elements needed by the app, plus any `<svelte:head>` content
-  - `%sveltekit.body%` — the markup for a rendered page. Typically this lives inside a `<div>` or other element, rather than directly inside `<body>`, to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process
+  - `%sveltekit.body%` — the markup for a rendered page. This should live inside a `<div>` or other element, rather than directly inside `<body>`, to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process. SvelteKit will warn you in development if this is not the case
   - `%sveltekit.assets%` — either [`paths.assets`](/docs/configuration#paths), if specified, or a relative path to [`paths.base`](/docs/configuration#paths)
   - `%sveltekit.nonce%` — a [CSP](/docs/configuration#csp) nonce for manually included links and scripts, if used
 - `error.html` (optional) is the page that is rendered when everything else fails. It can contain the following placeholders:
diff --git a/packages/create-svelte/templates/default/src/app.html b/packages/create-svelte/templates/default/src/app.html
@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-prefetch>
-		<div>%sveltekit.body%</div>
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/packages/create-svelte/templates/skeleton/src/app.html b/packages/create-svelte/templates/skeleton/src/app.html
@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body>
-		<div>%sveltekit.body%</div>
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/packages/kit/src/runtime/client/start.js b/packages/kit/src/runtime/client/start.js
@@ -19,6 +19,12 @@ export async function start({ env, hydrate, paths, target, trailing_slash }) {
 	set_public_env(env);
 	set_paths(paths);
 
+	if (__SVELTEKIT_DEV__ && target === document.body) {
+		console.warn(
+			`Placing %sveltekit.body% directly inside <body> is not recommended, as your app may break for users who have certain browser extensions installed.\n\nConsider wrapping it in an element:\n\n<div style="display: contents">\n  %sveltekit.body%\n</div>`
+		);
+	}
+
 	const client = create_client({
 		target,
 		base: paths.base,
