sveltejs · Rich-Harris · Feb 2, 2022 · Feb 2, 2022 · Feb 2, 2022 · Feb 2, 2022
diff --git a/.changeset/strong-parents-work.md b/.changeset/strong-parents-work.md
@@ -0,0 +1,6 @@
+---
+'create-svelte': patch
+'@sveltejs/kit': patch
+---
+
+Remove target option
diff --git a/documentation/docs/14-configuration.md b/documentation/docs/14-configuration.md
@@ -66,11 +66,10 @@ const config = {
 			register: true,
 			files: (filepath) => !/\.DS_STORE/.test(filepath)
 		},
-		target: null,
 		trailingSlash: 'never',
 		version: {
 			name: Date.now().toString(),
-			pollInterval: 0,
+			pollInterval: 0
 		},
 		vite: () => ({})
 	},
@@ -243,10 +242,6 @@ An object containing zero or more of the following values:
 - `register` - if set to `false`, will disable automatic service worker registration
 - `files` - a function with the type of `(filepath: string) => boolean`. When `true`, the given file will be available in `$service-worker.files`, otherwise it will be excluded.
 
-### target
-
-Specifies an element to mount the app to. It must be a DOM selector that identifies an element that exists in your template file. If unspecified, the app will be mounted to `document.body`.
-
 ### trailingSlash
 
 Whether to remove, append, or ignore trailing slashes when resolving URLs to routes.

diff --git a/packages/adapter-cloudflare-workers/README.md b/packages/adapter-cloudflare-workers/README.md
@@ -24,7 +24,6 @@ import adapter from '@sveltejs/adapter-cloudflare-workers';
 
 export default {
 	kit: {
-		target: '#svelte',
 		adapter: adapter()
 	}
 };

diff --git a/packages/adapter-cloudflare/README.md b/packages/adapter-cloudflare/README.md
@@ -32,7 +32,6 @@ import adapter from '@sveltejs/adapter-cloudflare';
 
 export default {
 	kit: {
-		target: '#svelte',
 		adapter: adapter()
 	}
 };

diff --git a/packages/adapter-netlify/README.md b/packages/adapter-netlify/README.md
@@ -23,8 +23,7 @@ export default {
 			// if true, will split your app into multiple functions
 			// instead of creating a single one for the entire app
 			split: false
-		}),
-		target: '#svelte'
+		})
 	}
 };
 ```

diff --git a/packages/adapter-static/test/apps/prerendered/src/app.html b/packages/adapter-static/test/apps/prerendered/src/app.html
@@ -6,6 +6,6 @@
 		%svelte.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div>%svelte.body%</div>
 	</body>
 </html>
diff --git a/packages/adapter-static/test/apps/prerendered/svelte.config.js b/packages/adapter-static/test/apps/prerendered/svelte.config.js
@@ -3,8 +3,7 @@ import adapter from '../../../index.js';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter(),
-		target: '#svelte'
+		adapter: adapter()
 	}
 };
 

diff --git a/packages/adapter-static/test/apps/spa/src/app.html b/packages/adapter-static/test/apps/spa/src/app.html
@@ -6,6 +6,6 @@
 		%svelte.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div>%svelte.body%</div>
 	</body>
 </html>
diff --git a/packages/adapter-static/test/apps/spa/svelte.config.js b/packages/adapter-static/test/apps/spa/svelte.config.js
@@ -5,8 +5,7 @@ const config = {
 	kit: {
 		adapter: adapter({
 			fallback: '200.html'
-		}),
-		target: '#svelte'
+		})
 	}
 };
 

diff --git a/packages/create-svelte/shared/+default+typescript/svelte.config.js b/packages/create-svelte/shared/+default+typescript/svelte.config.js
@@ -10,9 +10,6 @@ const config = {
 	kit: {
 		adapter: adapter(),
 
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
-
 		// Override http methods in the Todo forms
 		methodOverride: {
 			allowed: ['PATCH', 'DELETE']

diff --git a/packages/create-svelte/shared/+default-typescript/svelte.config.js b/packages/create-svelte/shared/+default-typescript/svelte.config.js
@@ -5,9 +5,6 @@ const config = {
 	kit: {
 		adapter: adapter(),
 
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
-
 		// Override http methods in the Todo forms
 		methodOverride: {
 			allowed: ['PATCH', 'DELETE']

diff --git a/packages/create-svelte/shared/+skeleton+typescript/svelte.config.js b/packages/create-svelte/shared/+skeleton+typescript/svelte.config.js
@@ -8,10 +8,7 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter(),
-
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		adapter: adapter()
 	}
 };
 

diff --git a/packages/create-svelte/shared/+skeleton-typescript/svelte.config.js b/packages/create-svelte/shared/+skeleton-typescript/svelte.config.js
@@ -3,10 +3,7 @@ import adapter from '@sveltejs/adapter-auto';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter(),
-
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		adapter: adapter()
 	}
 };
 

diff --git a/packages/create-svelte/templates/default/src/app.html b/packages/create-svelte/templates/default/src/app.html
@@ -8,6 +8,6 @@
 		%svelte.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div>%svelte.body%</div>
 	</body>
 </html>
diff --git a/packages/create-svelte/templates/default/svelte.config.js b/packages/create-svelte/templates/default/svelte.config.js
@@ -12,9 +12,6 @@ const config = {
 	kit: {
 		adapter: adapter(),
 
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
-
 		// Override http methods in the Todo forms
 		methodOverride: {
 			allowed: ['PATCH', 'DELETE']

diff --git a/packages/create-svelte/templates/skeleton/src/app.html b/packages/create-svelte/templates/skeleton/src/app.html
@@ -8,6 +8,6 @@
 		%svelte.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div>%svelte.body%</div>
 	</body>
 </html>
diff --git a/packages/create-svelte/templates/skeleton/svelte.config.js b/packages/create-svelte/templates/skeleton/svelte.config.js
@@ -5,10 +5,7 @@ import adapter from '@sveltejs/adapter-auto';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter(),
-
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		adapter: adapter()
 	}
 };
 

diff --git a/packages/kit/src/core/build/build_server.js b/packages/kit/src/core/build/build_server.js
@@ -89,7 +89,6 @@ export class App {
 			root,
 			service_worker: ${has_service_worker ? "base + '/service-worker.js'" : 'null'},
 			router: ${s(config.kit.browser.router)},
-			target: ${s(config.kit.target)},
 			template,
 			template_contains_nonce: ${template.includes('%svelte.nonce%')},
 			trailing_slash: ${s(config.kit.trailingSlash)}

diff --git a/packages/kit/src/core/config/index.spec.js b/packages/kit/src/core/config/index.spec.js
@@ -95,7 +95,7 @@ const get_defaults = (prefix = '') => ({
 		protocol: undefined,
 		router: undefined,
 		ssr: undefined,
-		target: null,
+		target: undefined,
 		trailingSlash: 'never',
 		version: {
 			name: Date.now().toString(),
@@ -125,10 +125,10 @@ test('errors on invalid values', () => {
 		validate_config({
 			kit: {
 				// @ts-expect-error - given value expected to throw
-				target: 42
+				appDir: 42
 			}
 		});
-	}, /^config\.kit\.target should be a string, if specified$/);
+	}, /^config\.kit\.appDir should be a string, if specified$/);
 });
 
 test('errors on invalid nested values', () => {

diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
@@ -251,7 +251,8 @@ const options = object(
 					`${keypath} has been removed — use the handle hook instead: https://kit.svelte.dev/docs#hooks-handle'`
 			),
 
-			target: string(null),
+			// TODO remove this for 1.0
+			target: error((keypath) => `${keypath} is no longer required`),
 
 			trailingSlash: list(['never', 'always', 'ignore']),
 

diff --git a/packages/kit/src/core/dev/plugin.js b/packages/kit/src/core/dev/plugin.js
@@ -261,7 +261,6 @@ export async function create_plugin(config, cwd) {
 							read: (file) => fs.readFileSync(path.join(config.kit.files.assets, file)),
 							root,
 							router: config.kit.browser.router,
-							target: config.kit.target,
 							template: ({ head, body, assets, nonce }) => {
 								return (
 									template

diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js
@@ -152,11 +152,13 @@ export async function render_response({
 		needs_nonce: options.template_contains_nonce
 	});
 
+	const target = hash(body);
+
 	// prettier-ignore
 	const init_app = `
 		import { start } from ${s(options.prefix + options.manifest._.entry.file)};
 		start({
-			target: ${options.target ? `document.querySelector(${s(options.target)})` : 'document.body'},
+			target: document.querySelector('[data-hydrate="${target}"]').parentNode,
 			paths: ${s(options.paths)},
 			session: ${try_serialize($session, (error) => {
 				throw new Error(`Failed to serialize session data: ${error.message}`);
@@ -234,15 +236,15 @@ export async function render_response({
 				.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
 				.join('');
 
-			const attributes = ['type="module"'];
+			const attributes = ['type="module"', `data-hydrate="${target}"`];
 
 			csp.add_script(init_app);
 
 			if (csp.script_needs_nonce) {
 				attributes.push(`nonce="${csp.nonce}"`);
 			}
 
-			head += `<script ${attributes.join(' ')}>${init_app}</script>`;
+			body += `\n\t\t<script ${attributes.join(' ')}>${init_app}</script>`;
 
 			// prettier-ignore
 			body += serialized_data
@@ -252,7 +254,7 @@ export async function render_response({
 
 					return `<script ${attributes}>${json}</script>`;
 				})
-				.join('\n\n\t');
+				.join('\n\t');
 		}
 
 		if (options.service_worker) {

diff --git a/packages/kit/test/apps/options/source/template.html b/packages/kit/test/apps/options/source/template.html
@@ -7,6 +7,6 @@
 	</head>
 	<body>
 		<h1>I am in the template</h1>
-		<div id="content-goes-here">%svelte.body%</div>
+		<div>%svelte.body%</div>
 	</body>
 </html>
diff --git a/packages/kit/test/apps/options/svelte.config.js b/packages/kit/test/apps/options/svelte.config.js
@@ -19,7 +19,6 @@ const config = {
 		},
 		appDir: '_wheee',
 		floc: true,
-		target: '#content-goes-here',
 		inlineStyleThreshold: 1024,
 		trailingSlash: 'always',
 		vite: {

diff --git a/packages/kit/types/config.d.ts b/packages/kit/types/config.d.ts
@@ -163,7 +163,6 @@ export interface Config {
 			register?: boolean;
 			files?: (filepath: string) => boolean;
 		};
-		target?: string;
 		trailingSlash?: TrailingSlash;
 		version?: {
 			name?: string;

diff --git a/packages/kit/types/internal.d.ts b/packages/kit/types/internal.d.ts
@@ -140,7 +140,6 @@ export interface SSRRenderOptions {
 	root: SSRComponent['default'];
 	router: boolean;
 	service_worker?: string;
-	target: string;
 	template({
 		head,
 		body,
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,6 @@ import adapter from '@sveltejs/adapter-cloudflare-workers'; @@
     export default {
     	kit: {
-    		target: '#svelte',
     		adapter: adapter()
     	}
     };
@@ Expand Down @@