Add trailingSlash option (#1404)

* failing test for #733

* implement trailingSlash option - closes #733

* changeset

* docs for trailingSlash option

Author: Rich Harris

.changeset/quiet-cherries-smile.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Add trailingSlash: 'never' | 'always' | 'ignore' option

documentation/docs/13-configuration.md

@@ -42,6 +42,7 @@ const config = {
 		router: true,
 		ssr: true,
 		target: null,
+		trailingSlash: 'never',
 		vite: () => ({})
 	},
 
@@ -138,6 +139,16 @@ Enables or disables [server-side rendering](#ssr-and-javascript-ssr) app-wide.
 
 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.
+
+- `"never"` — redirect `/x/` to `/x`
+- `"always"` — redirect `/x` to `/x/`
+- `"ignore"` — don't automatically add or remove trailing slashes. `/x` and `/x/` will be treated equivalently
+
+> Ignoring trailing slashes is not recommended — the semantics of relative paths differ between the two cases (`./y` from `/x` is `/y`, but from `/x/` is `/x/y`), and `/x` and `/x/` are treated as separate URLs which is harmful to SEO. If you use this option, ensure that you implement logic for conditionally adding or removing trailing slashes from `request.path` inside your [`handle`](#hooks-handle) function.
+
 ### vite
 
 A [Vite config object](https://vitejs.dev/config), or a function that returns one. Not all configuration options can be set, since SvelteKit depends on certain values being configured internally.

packages/kit/src/core/build/index.js

@@ -318,7 +318,8 @@ async function build_server(
 					router: ${s(config.kit.router)},
 					ssr: ${s(config.kit.ssr)},
 					target: ${s(config.kit.target)},
-					template
+					template,
+					trailing_slash: ${s(config.kit.trailingSlash)}
 				};
 			}
 

packages/kit/src/core/dev/index.js

@@ -291,7 +291,8 @@ class Watcher extends EventEmitter {
 								}
 
 								return rendered;
-							}
+							},
+							trailing_slash: this.config.kit.trailingSlash
 						}
 					);
 

packages/kit/src/core/load_config/index.spec.js

@@ -39,7 +39,8 @@ test('fills in defaults', () => {
 			},
 			router: true,
 			ssr: true,
-			target: null
+			target: null,
+			trailingSlash: 'never'
 		},
 		preprocess: null
 	});
@@ -122,7 +123,8 @@ test('fills in partial blanks', () => {
 			},
 			router: true,
 			ssr: true,
-			target: null
+			target: null,
+			trailingSlash: 'never'
 		},
 		preprocess: null
 	});

packages/kit/src/core/load_config/options.js

@@ -122,6 +122,8 @@ const options = {
 
 			target: expect_string(null),
 
+			trailingSlash: expect_enum(['never', 'always', 'ignore']),
+
 			vite: {
 				type: 'leaf',
 				default: () => ({}),
@@ -186,6 +188,28 @@ function expect_boolean(boolean) {
 	};
 }
 
+/**
+ * @param {string[]} options
+ * @returns {ConfigDefinition}
+ */
+function expect_enum(options, def = options[0]) {
+	return {
+		type: 'leaf',
+		default: def,
+		validate: (option, keypath) => {
+			if (!options.includes(option)) {
+				// prettier-ignore
+				const msg = options.length > 2
+					? `${keypath} should be one of ${options.slice(0, -1).map(option => `"${option}"`).join(', ')} or "${options[options.length - 1]}"`
+					: `${keypath} should be either "${options[0]}" or "${options[1]}"`;
+
+				throw new Error(msg);
+			}
+			return option;
+		}
+	};
+}
+
 /**
  * @param {any} option
  * @param {string} keypath

packages/kit/src/core/load_config/test/index.js

@@ -41,7 +41,8 @@ async function testLoadDefaultConfig(path) {
 			prerender: { crawl: true, enabled: true, force: false, pages: ['*'] },
 			router: true,
 			ssr: true,
-			target: null
+			target: null,
+			trailingSlash: 'never'
 		},
 		preprocess: null
 	});

packages/kit/src/runtime/client/router.js

@@ -20,10 +20,12 @@ export class Router {
 	/** @param {{
 	 *    base: string;
 	 *    routes: import('types/internal').CSRRoute[];
+	 *    trailing_slash: import('types/internal').TrailingSlash;
 	 * }} opts */
-	constructor({ base, routes }) {
+	constructor({ base, routes, trailing_slash }) {
 		this.base = base;
 		this.routes = routes;
+		this.trailing_slash = trailing_slash;
 	}
 
 	/** @param {import('./renderer').Renderer} renderer */
@@ -215,16 +217,27 @@ export class Router {
 	async _navigate(url, scroll, chain, hash) {
 		const info = this.parse(url);
 
+		// remove trailing slashes
+		if (info.path !== '/') {
+			const has_trailing_slash = info.path.endsWith('/');
+
+			const incorrect =
+				(has_trailing_slash && this.trailing_slash === 'never') ||
+				(!has_trailing_slash &&
+					this.trailing_slash === 'always' &&
+					!info.path.split('/').pop().includes('.'));
+
+			if (incorrect) {
+				info.path = has_trailing_slash ? info.path.slice(0, -1) : info.path + '/';
+				history.replaceState({}, '', `${info.path}${location.search}`);
+			}
+		}
+
 		this.renderer.notify({
 			path: info.path,
 			query: info.query
 		});
 
-		// remove trailing slashes
-		if (location.pathname.endsWith('/') && location.pathname !== '/') {
-			history.replaceState({}, '', `${location.pathname.slice(0, -1)}${location.search}`);
-		}
-
 		await this.renderer.update(info, chain, false);
 
 		document.body.focus();

packages/kit/src/runtime/client/start.js

@@ -17,14 +17,15 @@ import { set_paths } from '../paths.js';
  *   host: string;
  *   route: boolean;
  *   spa: boolean;
+ *   trailing_slash: import('types/internal').TrailingSlash;
  *   hydrate: {
  *     status: number;
  *     error: Error;
  *     nodes: Array<Promise<import('types/internal').CSRComponent>>;
  *     page: import('types/page').Page;
  *   };
  * }} opts */
-export async function start({ paths, target, session, host, route, spa, hydrate }) {
+export async function start({ paths, target, session, host, route, spa, trailing_slash, hydrate }) {
 	if (import.meta.env.DEV && !target) {
 		throw new Error('Missing target element. See https://kit.svelte.dev/docs#configuration-target');
 	}
@@ -33,7 +34,8 @@ export async function start({ paths, target, session, host, route, spa, hydrate
 		route &&
 		new Router({
 			base: paths.base,
-			routes
+			routes,
+			trailing_slash
 		});
 
 	const renderer = new Renderer({

packages/kit/src/runtime/server/index.js

@@ -11,15 +11,25 @@ import { hash } from '../hash.js';
  * @param {import('types/internal').SSRRenderState} [state]
  */
 export async function respond(incoming, options, state = {}) {
-	if (incoming.path.endsWith('/') && incoming.path !== '/') {
-		const q = incoming.query.toString();
+	if (incoming.path !== '/' && options.trailing_slash !== 'ignore') {
+		const has_trailing_slash = incoming.path.endsWith('/');
 
-		return {
-			status: 301,
-			headers: {
-				location: encodeURI(incoming.path.slice(0, -1) + (q ? `?${q}` : ''))
-			}
-		};
+		if (
+			(has_trailing_slash && options.trailing_slash === 'never') ||
+			(!has_trailing_slash &&
+				options.trailing_slash === 'always' &&
+				!incoming.path.split('/').pop().includes('.'))
+		) {
+			const path = has_trailing_slash ? incoming.path.slice(0, -1) : incoming.path + '/';
+			const q = incoming.query.toString();
+
+			return {
+				status: 301,
+				headers: {
+					location: encodeURI(path + (q ? `?${q}` : ''))
+				}
+			};
+		}
 	}
 
 	try {