Allow %-encoding in route filenames

.changeset/strong-swans-hammer.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] Allow %-encoded filenames

documentation/docs/02-routing.md

@@ -393,3 +393,27 @@ src/routes/[a].js
 src/routes/[b].svelte
 src/routes/[...catchall].svelte
 ```
+
+#### Encoding
+
+Filenames are URI-decoded, meaning that (for example) a filename like `%40[username].svelte` would match characters beginning with `@`:
+
+```js
+// @filename: ambient.d.ts
+declare global {
+	const assert: {
+		equal: (a: any, b: any) => boolean;
+	};
+}
+
+export {};
+
+// @filename: index.js
+// ---cut---
+assert.equal(
+	decodeURIComponent('%40[username].svelte'),
+	'@[username].svelte'
+);
+```
+
+To express a `%` character, use `%25`, otherwise the result will be malformed.

packages/kit/src/vite/build/build_server.js

@@ -142,7 +142,7 @@ export async function build_server(options, client) {
 
 		if (file) {
 			const resolved = path.resolve(cwd, file);
-			const relative = path.relative(config.kit.files.routes, resolved);
+			const relative = decodeURIComponent(path.relative(config.kit.files.routes, resolved));
 			const name = posixify(path.join('entries/endpoints', relative.replace(/\.js$/, '')));
 			input[name] = resolved;
 		}
@@ -151,7 +151,7 @@ export async function build_server(options, client) {
 	// ...and every component used by pages...
 	manifest_data.components.forEach((file) => {
 		const resolved = path.resolve(cwd, file);
-		const relative = path.relative(config.kit.files.routes, resolved);
+		const relative = decodeURIComponent(path.relative(config.kit.files.routes, resolved));
 
 		const name = relative.startsWith('..')
 			? posixify(path.join('entries/fallbacks', path.basename(file)))

packages/kit/src/vite/index.js

@@ -101,7 +101,7 @@ function kit() {
 		// their location in the source code, which is helpful for debugging
 		manifest_data.components.forEach((file) => {
 			const resolved = path.resolve(cwd, file);
-			const relative = path.relative(svelte_config.kit.files.routes, resolved);
+			const relative = decodeURIComponent(path.relative(svelte_config.kit.files.routes, resolved));
 
 			const name = relative.startsWith('..')
 				? path.basename(file)

packages/kit/test/apps/basics/src/routes/encoded/%24[ticker]/index.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<h1>${$page.params.ticker}</h1>

packages/kit/test/apps/basics/src/routes/encoded/%40[username].svelte

@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<h1>@{$page.params.username}</h1>

packages/kit/test/apps/basics/src/routes/encoded/index.svelte

@@ -2,3 +2,5 @@
 <a href="/encoded/土豆">土豆</a>
 <a href="/encoded/反应">反应</a>
 <a href="/encoded/redirect">Redirect</a>
+<a href="/encoded/@svelte">@svelte</a>
+<a href="/encoded/$SVLT">$SVLT</a>

packages/kit/test/apps/basics/test/test.js

@@ -848,6 +848,18 @@ test.describe('Encoded paths', () => {
 		const response = await request.get('/encoded/endpoint');
 		expect(response.headers()['content-type']).toBe('application/json; charset=utf-8');
 	});
+
+	test('allows %-encoded characters in directory names', async ({ page, clicknav }) => {
+		await page.goto('/encoded');
+		await clicknav('[href="/encoded/$SVLT"]');
+		expect(await page.textContent('h1')).toBe('$SVLT');
+	});
+
+	test('allows %-encoded characters in filenames', async ({ page, clicknav }) => {
+		await page.goto('/encoded');
+		await clicknav('[href="/encoded/@svelte"]');
+		expect(await page.textContent('h1')).toBe('@svelte');
+	});
 });
 
 test.describe('Errors', () => {