replace %svelte.assets% with relative path (#3234)

Rich-Harris · web-flow · commit dfb3bf57f632 · 2022-01-07T16:46:43.000-05:00
* replace %svelte.assets% with relative path

* changeset

* update templates

* create-svelte changeset
diff --git a/.changeset/proud-hairs-chew.md b/.changeset/proud-hairs-chew.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Replace %svelte.assets% with relative path
diff --git a/.changeset/tasty-islands-drive.md b/.changeset/tasty-islands-drive.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Update template files to include %svelte.assets%
diff --git a/packages/create-svelte/templates/default/src/app.html b/packages/create-svelte/templates/default/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="Svelte demo app" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="%svelte.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>
diff --git a/packages/create-svelte/templates/skeleton/src/app.html b/packages/create-svelte/templates/skeleton/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="%svelte.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>
diff --git a/packages/kit/src/core/build/build_server.js b/packages/kit/src/core/build/build_server.js
@@ -26,9 +26,10 @@ import { set_paths, assets, base } from './runtime/paths.js';
 import { set_prerendering } from './runtime/env.js';
 import * as user_hooks from ${s(hooks)};
 
-const template = ({ head, body }) => ${s(load_template(cwd, config))
+const template = ({ head, body, assets }) => ${s(load_template(cwd, config))
 	.replace('%svelte.head%', '" + head + "')
-	.replace('%svelte.body%', '" + body + "')};
+	.replace('%svelte.body%', '" + body + "')
+	.replace(/%svelte\.assets%/g, '" + assets + "')};
 
 let read = null;
 
diff --git a/packages/kit/src/core/dev/plugin.js b/packages/kit/src/core/dev/plugin.js
@@ -218,10 +218,11 @@ export function create_plugin(config, output, cwd, amp) {
 								router: config.kit.router,
 								ssr: config.kit.ssr,
 								target: config.kit.target,
-								template: ({ head, body }) => {
+								template: ({ head, body, assets }) => {
 									let rendered = load_template(cwd, config)
 										.replace('%svelte.head%', () => head)
-										.replace('%svelte.body%', () => body);
+										.replace('%svelte.body%', () => body)
+										.replace(/%svelte\.assets%/g, assets);
 
 									if (amp) {
 										const result = amp.validateString(rendered);
diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js
@@ -213,10 +213,18 @@ export async function render_response({
 		headers['permissions-policy'] = 'interest-cohort=()';
 	}
 
+	const segments = url.pathname.slice(options.paths.base.length).split('/').slice(2);
+	const assets =
+		options.paths.assets || (segments.length > 0 ? segments.map(() => '..').join('/') : '.');
+
 	return {
 		status,
 		headers,
-		body: options.template({ head, body })
+		body: options.template({
+			head,
+			body,
+			assets
+		})
 	};
 }
 
diff --git a/packages/kit/test/apps/basics/src/app.html b/packages/kit/test/apps/basics/src/app.html
@@ -3,6 +3,7 @@
 	<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" />
 		%svelte.head%
 	</head>
 	<body>
diff --git a/packages/kit/test/apps/basics/static/favicon.png b/packages/kit/test/apps/basics/static/favicon.png
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
@@ -1072,6 +1072,17 @@ test.describe.parallel('$app/paths', () => {
 			})
 		);
 	});
+
+	test('replaces %svelte.assets% in template with relative path', async ({ page }) => {
+		await page.goto('/');
+		expect(await page.getAttribute('link[rel=icon]', 'href')).toBe('./favicon.png');
+
+		await page.goto('/routing');
+		expect(await page.getAttribute('link[rel=icon]', 'href')).toBe('./favicon.png');
+
+		await page.goto('/routing/rest/foo/bar/baz');
+		expect(await page.getAttribute('link[rel=icon]', 'href')).toBe('../../../../favicon.png');
+	});
 });
 
 test.describe.parallel('$app/stores', () => {
diff --git a/packages/kit/types/internal.d.ts b/packages/kit/types/internal.d.ts
@@ -144,7 +144,7 @@ export interface SSRRenderOptions {
 	service_worker?: string;
 	ssr: boolean;
 	target: string;
-	template({ head, body }: { head: string; body: string }): string;
+	template({ head, body, assets }: { head: string; body: string; assets: string }): string;
 	trailing_slash: TrailingSlash;
 }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/kit': patch
 +---
++
 +Replace %svelte.assets% with relative path
Original file line number	Diff line number	Diff line change
`@@ -144,7 +144,7 @@ export interface SSRRenderOptions {`
`144`	`144`	`service_worker?: string;`
`145`	`145`	`ssr: boolean;`
`146`	`146`	`target: string;`
`147`		`- template({ head, body }: { head: string; body: string }): string;`
	`147`	`+ template({ head, body, assets }: { head: string; body: string; assets: string }): string;`
`148`	`148`	`trailing_slash: TrailingSlash;`
`149`	`149`	`}`
`150`	`150`