replace %svelte.body% etc with %sveltekit.body% (#5016)

* replace %svelte.body% etc with %sveltekit.body% * Update .changeset/olive-lies-train.md Co-authored-by: Ben McCann <[email protected]> Co-authored-by: Ben McCann <[email protected]>
sveltejs · May 23, 2022 · daef4b0 · daef4b0
1 parent f5963d8
commit daef4b0
Show file tree

Hide file tree

Showing 21 changed files with 64 additions and 50 deletions.
diff --git a/.changeset/olive-lies-train.md b/.changeset/olive-lies-train.md
@@ -0,0 +1,6 @@
+---
+'create-svelte': patch
+'@sveltejs/kit': patch
+---
+
+[breaking] Replace `%svelte.body%` with `%sveltekit.body%`, etc.
diff --git a/documentation/docs/80-migrating.md b/documentation/docs/80-migrating.md
@@ -51,7 +51,6 @@ This file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start
 
 When using `adapter-node` the equivalent is a [custom server](https://github.com/sveltejs/kit/tree/master/packages/adapter-node#custom-server). Otherwise, this file has no direct equivalent, since SvelteKit apps can run in serverless environments. You can, however, use the [hooks module](/docs/hooks) to implement session logic.
 
-
 #### src/service-worker.js
 
 Most imports from `@sapper/service-worker` have equivalents in [`$service-worker`](/docs/modules#$service-worker):
@@ -65,7 +64,7 @@ Most imports from `@sapper/service-worker` have equivalents in [`$service-worker
 
 The `src/template.html` file should be renamed `src/app.html`.
 
-Remove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%svelte.head%` and `%sapper.html%` with `%svelte.body%`. The `<div id="sapper">` is no longer necessary.
+Remove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%sveltekit.head%` and `%sapper.html%` with `%sveltekit.body%`. The `<div id="sapper">` is no longer necessary.
 
 #### src/node_modules
 

diff --git a/packages/adapter-static/test/apps/prerendered/src/app.html b/packages/adapter-static/test/apps/prerendered/src/app.html
@@ -3,9 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div>%svelte.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/packages/adapter-static/test/apps/spa/src/app.html b/packages/adapter-static/test/apps/spa/src/app.html
@@ -3,9 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div>%svelte.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/packages/create-svelte/templates/default/src/app.html b/packages/create-svelte/templates/default/src/app.html
@@ -2,11 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div>%svelte.body%</div>
+		<div>%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
@@ -2,11 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div>%svelte.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/packages/kit/src/core/build/build_server.js b/packages/kit/src/core/build/build_server.js
@@ -24,10 +24,10 @@ import { set_paths, assets, base } from '${runtime}/paths.js';
 import { set_prerendering } from '${runtime}/env.js';
 
 const template = ({ head, body, assets, nonce }) => ${s(template)
-	.replace('%svelte.head%', '" + head + "')
-	.replace('%svelte.body%', '" + body + "')
-	.replace(/%svelte\.assets%/g, '" + assets + "')
-	.replace(/%svelte\.nonce%/g, '" + nonce + "')};
+	.replace('%sveltekit.head%', '" + head + "')
+	.replace('%sveltekit.body%', '" + body + "')
+	.replace(/%sveltekit\.assets%/g, '" + assets + "')
+	.replace(/%sveltekit\.nonce%/g, '" + nonce + "')};
 
 let read = null;
 
@@ -76,7 +76,7 @@ export class Server {
 			service_worker: ${has_service_worker ? "base + '/service-worker.js'" : 'null'},
 			router: ${s(config.kit.browser.router)},
 			template,
-			template_contains_nonce: ${template.includes('%svelte.nonce%')},
+			template_contains_nonce: ${template.includes('%sveltekit.nonce%')},
 			trailing_slash: ${s(config.kit.trailingSlash)}
 		};
 	}

diff --git a/packages/kit/src/core/config/index.js b/packages/kit/src/core/config/index.js
@@ -14,7 +14,16 @@ export function load_template(cwd, config) {
 
 	if (fs.existsSync(template)) {
 		const contents = fs.readFileSync(template, 'utf8');
-		const expected_tags = ['%svelte.head%', '%svelte.body%'];
+
+		// TODO remove this for 1.0
+		const match = /%svelte\.([a-z]+)%/.exec(contents);
+		if (match) {
+			throw new Error(
+				`%svelte.${match[1]}% in ${relative} should be replaced with %sveltekit.${match[1]}%`
+			);
+		}
+
+		const expected_tags = ['%sveltekit.head%', '%sveltekit.body%'];
 		expected_tags.forEach((tag) => {
 			if (contents.indexOf(tag) === -1) {
 				throw new Error(`${relative} is missing ${tag}`);

diff --git a/packages/kit/src/core/dev/plugin.js b/packages/kit/src/core/dev/plugin.js
@@ -322,14 +322,14 @@ export async function create_plugin(config, cwd) {
 								template: ({ head, body, assets, nonce }) => {
 									return (
 										template
-											.replace(/%svelte\.assets%/g, assets)
-											.replace(/%svelte\.nonce%/g, nonce)
-											// head and body must be replaced last, in case someone tries to sneak in %svelte.assets% etc
-											.replace('%svelte.head%', () => head)
-											.replace('%svelte.body%', () => body)
+											.replace(/%sveltekit\.assets%/g, assets)
+											.replace(/%sveltekit\.nonce%/g, nonce)
+											// head and body must be replaced last, in case someone tries to sneak in %sveltekit.assets% etc
+											.replace('%sveltekit.head%', () => head)
+											.replace('%sveltekit.body%', () => body)
 									);
 								},
-								template_contains_nonce: template.includes('%svelte.nonce%'),
+								template_contains_nonce: template.includes('%sveltekit.nonce%'),
 								trailing_slash: config.kit.trailingSlash
 							},
 							{

diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js
@@ -46,7 +46,7 @@ export async function render_response({
 		}
 
 		if (options.template_contains_nonce) {
-			throw new Error('Cannot use prerendering if page template contains %svelte.nonce%');
+			throw new Error('Cannot use prerendering if page template contains %sveltekit.nonce%');
 		}
 	}
 

diff --git a/packages/kit/test/apps/amp/src/app.html b/packages/kit/test/apps/amp/src/app.html
@@ -4,9 +4,9 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="canonical" href="https://example.com" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/packages/kit/test/apps/basics/src/app.html b/packages/kit/test/apps/basics/src/app.html
@@ -3,11 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="icon" type="image/png" href="%svelte.assets%/favicon.png" />
+		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
 		<meta name="transform-page" content="__REPLACEME__" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
@@ -1711,7 +1711,7 @@ test.describe.parallel('$app/paths', () => {
 		);
 	});
 
-	test('replaces %svelte.assets% in template with relative path', async ({ page }) => {
+	test('replaces %sveltekit.assets% in template with relative path', async ({ page }) => {
 		await page.goto('/');
 		expect(await page.getAttribute('link[rel=icon]', 'href')).toBe('./favicon.png');
 
@@ -2493,7 +2493,7 @@ test.describe.parallel('Matchers', () => {
 });
 
 test.describe.parallel('XSS', () => {
-	test('replaces %svelte.xxx% tags safely', async ({ page }) => {
+	test('replaces %sveltekit.xxx% tags safely', async ({ page }) => {
 		await page.goto('/unsafe-replacement');
 
 		const content = await page.textContent('body');

diff --git a/packages/kit/test/apps/options-2/src/app.html b/packages/kit/test/apps/options-2/src/app.html
@@ -3,9 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/packages/kit/test/apps/options/source/template.html b/packages/kit/test/apps/options/source/template.html
@@ -3,10 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
 		<h1>I am in the template</h1>
-		<div>%svelte.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/packages/kit/test/prerendering/basics/src/app.html b/packages/kit/test/prerendering/basics/src/app.html
@@ -3,9 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/packages/kit/test/prerendering/disabled/src/app.html b/packages/kit/test/prerendering/disabled/src/app.html
@@ -3,9 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/packages/kit/test/prerendering/options/src/app.html b/packages/kit/test/prerendering/options/src/app.html
@@ -3,10 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="icon" href="%svelte.assets%/favicon.png" />
-		%svelte.head%
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/packages/kit/test/prerendering/paths-base/src/app.html b/packages/kit/test/prerendering/paths-base/src/app.html
@@ -3,9 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/packages/kit/test/prerendering/trailing-slash/src/app.html b/packages/kit/test/prerendering/trailing-slash/src/app.html
@@ -3,10 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="icon" href="%svelte.assets%/favicon.png" />
-		%svelte.head%
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		%sveltekit.head%
 	</head>
 	<body>
-		%svelte.body%
+		%sveltekit.body%
 	</body>
 </html>
diff --git a/sites/kit.svelte.dev/src/app.html b/sites/kit.svelte.dev/src/app.html
@@ -14,9 +14,9 @@
 		<meta name="twitter:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
 		<meta name="og:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
 
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div>%svelte.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ export async function render_response({ @@
     		}
     		if (options.template_contains_nonce) {
-    			throw new Error('Cannot use prerendering if page template contains %svelte.nonce%');
+    			throw new Error('Cannot use prerendering if page template contains %sveltekit.nonce%');
     		}
     	}
@@ Expand Down @@