Remove target option (#3674)

Rich-Harris · dummdidumm · web-flow · commit 772dbaf286ba · 2022-02-02T10:50:16.000-05:00
* use data-hydrate instead of explicit target

* update tests

* changeset

* update docs

* Update packages/kit/src/core/config/options.js

Co-authored-by: Simon H &lt;5968653+dummdidumm@users.noreply.github.com&gt;

Co-authored-by: Simon H &lt;5968653+dummdidumm@users.noreply.github.com&gt;
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, and should be removed`),
 
 			trailingSlash: list(['never', 'always', 'ignore']),
 
diff --git a/packages/kit/src/core/dev/plugin.js b/packages/kit/src/core/dev/plugin.js
@@ -262,7 +262,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 SSROptions {
 	root: SSRComponent['default'];
 	router: boolean;
 	service_worker?: string;
-	target: string;
 	template({
 		head,
 		body,

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,6 @@ import adapter from '@sveltejs/adapter-cloudflare-workers';`
`24`	`24`
`25`	`25`	`export default {`
`26`	`26`	`kit: {`
`27`		`- target: '#svelte',`
`28`	`27`	`adapter: adapter()`
`29`	`28`	`}`
`30`	`29`	`};`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,6 @@ import adapter from '@sveltejs/adapter-cloudflare';`
`32`	`32`
`33`	`33`	`export default {`
`34`	`34`	`kit: {`
`35`		`- target: '#svelte',`
`36`	`35`	`adapter: adapter()`
`37`	`36`	`}`
`38`	`37`	`};`
Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,7 @@ import adapter from '../../../index.js';`
`3`	`3`	`/** @type {import('@sveltejs/kit').Config} */`
`4`	`4`	`const config = {`
`5`	`5`	`kit: {`
`6`		`- adapter: adapter(),`
`7`		`- target: '#svelte'`
	`6`	`+ adapter: adapter()`
`8`	`7`	`}`
`9`	`8`	`};`
`10`	`9`
Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,7 @@ const config = {`
`5`	`5`	`kit: {`
`6`	`6`	`adapter: adapter({`
`7`	`7`	`fallback: '200.html'`
`8`		`- }),`
`9`		`- target: '#svelte'`
	`8`	`+ })`
`10`	`9`	`}`
`11`	`10`	`};`
`12`	`11`