@sveltejs/kit 1.0.0-next.518 → 1.0.0-next.519

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.518",
+  "version": "1.0.0-next.519",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",

package/src/core/sync/create_manifest_data/index.js

@@ -3,7 +3,8 @@ import path from 'path';
 import mime from 'mime';
 import { runtime_directory } from '../../utils.js';
 import { posixify } from '../../../utils/filesystem.js';
-import { parse_route_id, affects_path } from '../../../utils/routing.js';
+import { parse_route_id } from '../../../utils/routing.js';
+import { sort_routes } from './sort.js';
 
 /**
  * @param {{
@@ -82,11 +83,8 @@ function create_matchers(config, cwd) {
  * @param {string} fallback
  */
 function create_routes_and_nodes(cwd, config, fallback) {
-	/** @type {Map<string, import('types').RouteData>} */
-	const route_map = new Map();
-
-	/** @type {Map<string, import('./types').Part[][]>} */
-	const segment_map = new Map();
+	/** @type {import('types').RouteData[]} */
+	const routes = [];
 
 	const routes_base = posixify(path.relative(cwd, config.kit.files.routes));
 
@@ -111,32 +109,19 @@ function create_routes_and_nodes(cwd, config, fallback) {
 				throw new Error(`Invalid route ${id} — brackets are unbalanced`);
 			}
 
-			const { pattern, names, types } = parse_route_id(id);
+			if (/\[\.\.\.\w+\]\/\[\[/.test(id)) {
+				throw new Error(
+					`Invalid route ${id} — an [[optional]] route segment cannot follow a [...rest] route segment`
+				);
+			}
 
-			const segments = id.split('/');
+			if (/\[\[\.\.\./.test(id)) {
+				throw new Error(
+					`Invalid route ${id} — a rest route segment is always optional, remove the outer square brackets`
+				);
+			}
 
-			segment_map.set(
-				id,
-				segments
-					.filter((segment) => segment !== '' && affects_path(segment))
-					.map((segment) => {
-						/** @type {import('./types').Part[]} */
-						const parts = [];
-						segment.split(/\[(.+?)\]/).map((content, i) => {
-							const dynamic = !!(i % 2);
-
-							if (!content) return;
-
-							parts.push({
-								content,
-								dynamic,
-								rest: dynamic && content.startsWith('...'),
-								type: (dynamic && content.split('=')[1]) || null
-							});
-						});
-						return parts;
-					})
-			);
+			const { pattern, names, types } = parse_route_id(id);
 
 			/** @type {import('types').RouteData} */
 			const route = {
@@ -157,7 +142,7 @@ function create_routes_and_nodes(cwd, config, fallback) {
 
 			// important to do this before walking children, so that child
 			// routes appear later
-			route_map.set(id, route);
+			routes.push(route);
 
 			// if we don't do this, the route map becomes unwieldy to console.log
 			Object.defineProperty(route, 'parent', { enumerable: false });
@@ -224,8 +209,8 @@ function create_routes_and_nodes(cwd, config, fallback) {
 
 		walk(0, '', '', null);
 
-		const root = /** @type {import('types').RouteData} */ (route_map.get(''));
-		if (route_map.size === 1) {
+		if (routes.length === 1) {
+			const root = routes[0];
 			if (!root.leaf && !root.error && !root.layout && !root.endpoint) {
 				throw new Error(
 					// TODO adjust this error message for 1.0
@@ -237,7 +222,7 @@ function create_routes_and_nodes(cwd, config, fallback) {
 	} else {
 		// If there's no routes directory, we'll just create a single empty route. This ensures the root layout and
 		// error components are included in the manifest, which is needed for subsequent build/dev commands to work
-		route_map.set('', {
+		routes.push({
 			id: '',
 			segment: '',
 			pattern: /^$/,
@@ -252,7 +237,9 @@ function create_routes_and_nodes(cwd, config, fallback) {
 		});
 	}
 
-	const root = /** @type {import('types').RouteData} */ (route_map.get(''));
+	prevent_conflicts(routes);
+
+	const root = routes[0];
 
 	if (!root.layout?.component) {
 		if (!root.layout) root.layout = { depth: 0, child_pages: [] };
@@ -267,32 +254,19 @@ function create_routes_and_nodes(cwd, config, fallback) {
 	// we do layouts/errors first as they are more likely to be reused,
 	// and smaller indexes take fewer bytes. also, this guarantees that
 	// the default error/layout are 0/1
-	route_map.forEach((route) => {
+	for (const route of routes) {
 		if (route.layout) nodes.push(route.layout);
 		if (route.error) nodes.push(route.error);
-	});
-
-	/** @type {Map<string, string>} */
-	const conflicts = new Map();
-
-	route_map.forEach((route) => {
-		if (!route.leaf) return;
-
-		nodes.push(route.leaf);
-
-		const normalized = route.id.split('/').filter(affects_path).join('/');
-
-		if (conflicts.has(normalized)) {
-			throw new Error(`${conflicts.get(normalized)} and ${route.id} occupy the same route`);
-		}
+	}
 
-		conflicts.set(normalized, route.id);
-	});
+	for (const route of routes) {
+		if (route.leaf) nodes.push(route.leaf);
+	}
 
 	const indexes = new Map(nodes.map((node, i) => [node, i]));
 
-	route_map.forEach((route) => {
-		if (!route.leaf) return;
+	for (const route of routes) {
+		if (!route.leaf) continue;
 
 		route.page = {
 			layouts: [],
@@ -333,11 +307,12 @@ function create_routes_and_nodes(cwd, config, fallback) {
 		if (parent_id !== undefined) {
 			throw new Error(`${current_node.component} references missing segment "${parent_id}"`);
 		}
-	});
-
-	const routes = Array.from(route_map.values()).sort((a, b) => compare(a, b, segment_map));
+	}
 
-	return { nodes, routes };
+	return {
+		nodes,
+		routes: sort_routes(routes)
+	};
 }
 
 /**
@@ -400,59 +375,6 @@ function analyze(project_relative, file, component_extensions, module_extensions
 	throw new Error(`Files and directories prefixed with + are reserved (saw ${project_relative})`);
 }
 
-/**
- * @param {import('types').RouteData} a
- * @param {import('types').RouteData} b
- * @param {Map<string, import('./types').Part[][]>} segment_map
- */
-function compare(a, b, segment_map) {
-	const a_segments = /** @type {import('./types').Part[][]} */ (segment_map.get(a.id));
-	const b_segments = /** @type {import('./types').Part[][]} */ (segment_map.get(b.id));
-
-	const max_segments = Math.max(a_segments.length, b_segments.length);
-	for (let i = 0; i < max_segments; i += 1) {
-		const sa = a_segments[i];
-		const sb = b_segments[i];
-
-		// /x < /x/y, but /[...x]/y < /[...x]
-		if (!sa) return a.id.includes('[...') ? +1 : -1;
-		if (!sb) return b.id.includes('[...') ? -1 : +1;
-
-		const max_parts = Math.max(sa.length, sb.length);
-		for (let i = 0; i < max_parts; i += 1) {
-			const pa = sa[i];
-			const pb = sb[i];
-
-			// xy < x[y], but [x].json < [x]
-			if (pa === undefined) return pb.dynamic ? -1 : +1;
-			if (pb === undefined) return pa.dynamic ? +1 : -1;
-
-			// x < [x]
-			if (pa.dynamic !== pb.dynamic) {
-				return pa.dynamic ? +1 : -1;
-			}
-
-			if (pa.dynamic) {
-				// [x] < [...x]
-				if (pa.rest !== pb.rest) {
-					return pa.rest ? +1 : -1;
-				}
-
-				// [x=type] < [x]
-				if (!!pa.type !== !!pb.type) {
-					return pa.type ? -1 : +1;
-				}
-			}
-		}
-	}
-
-	if (!!a.endpoint !== !!b.endpoint) {
-		return a.endpoint ? -1 : +1;
-	}
-
-	return a < b ? -1 : 1;
-}
-
 /** @param {string} dir */
 function list_files(dir) {
 	/** @type {string[]} */
@@ -486,3 +408,63 @@ function count_occurrences(needle, haystack) {
 	}
 	return count;
 }
+
+/** @param {import('types').RouteData[]} routes */
+function prevent_conflicts(routes) {
+	/** @type {Map<string, string>} */
+	const lookup = new Map();
+
+	for (const route of routes) {
+		if (!route.leaf && !route.endpoint) continue;
+
+		const normalized = normalize_route_id(route.id);
+
+		// find all permutations created by optional parameters
+		const split = normalized.split(/<\?(.+?)\>/g);
+
+		let permutations = [/** @type {string} */ (split[0])];
+
+		// turn `x/[[optional]]/y` into `x/y` and `x/[required]/y`
+		for (let i = 1; i < split.length; i += 2) {
+			const matcher = split[i];
+			const next = split[i + 1];
+
+			permutations = [
+				...permutations.map((x) => x + next),
+				...permutations.map((x) => x + `<${matcher}>${next}`)
+			];
+		}
+
+		for (const permutation of permutations) {
+			// remove leading/trailing/duplicated slashes caused by prior
+			// manipulation of optional parameters and (groups)
+			const key = permutation
+				.replace(/\/{2,}/, '/')
+				.replace(/^\//, '')
+				.replace(/\/$/, '');
+
+			if (lookup.has(key)) {
+				throw new Error(
+					`The "${lookup.get(key)}" and "${route.id}" routes conflict with each other`
+				);
+			}
+
+			lookup.set(key, route.id);
+		}
+	}
+}
+
+/** @param {string} id */
+function normalize_route_id(id) {
+	return (
+		id
+			// remove groups
+			.replace(/(?<=^|\/)\(.+?\)(?=$|\/)/g, '')
+
+			// replace `[param]` with `<*>`, `[param=x]` with `<x>`, and `[[param]]` with `<?*>`
+			.replace(
+				/\[(?:(\[)|(\.\.\.))?.+?(=.+?)?\]\]?/g,
+				(_, optional, rest, matcher) => `<${optional ? '?' : ''}${rest ?? ''}${matcher ?? '*'}>`
+			)
+	);
+}

package/src/core/sync/create_manifest_data/sort.js

@@ -0,0 +1,163 @@
+import { affects_path } from '../../../utils/routing.js';
+
+/**
+ * @typedef {{
+ *   type: 'static' | 'required' | 'optional' | 'rest';
+ *   content: string;
+ *   matched: boolean;
+ * }} Part
+ */
+
+/**
+ * @typedef {Part[]} Segment
+ */
+
+const EMPTY = { type: 'static', content: '', matched: false };
+
+/** @param {import('types').RouteData[]} routes */
+export function sort_routes(routes) {
+	/** @type {Map<string, Part[]>} */
+	const segment_cache = new Map();
+
+	/** @param {string} segment */
+	function get_parts(segment) {
+		if (!segment_cache.has(segment)) {
+			segment_cache.set(segment, split(segment));
+		}
+
+		return segment_cache.get(segment);
+	}
+
+	/** @param {string} id */
+	function split(id) {
+		/** @type {Part[]} */
+		const parts = [];
+
+		let i = 0;
+		while (i <= id.length) {
+			const start = id.indexOf('[', i);
+			if (start === -1) {
+				parts.push({ type: 'static', content: id.slice(i), matched: false });
+				break;
+			}
+
+			parts.push({ type: 'static', content: id.slice(i, start), matched: false });
+
+			const type = id[start + 1] === '[' ? 'optional' : id[start + 1] === '.' ? 'rest' : 'required';
+			const delimiter = type === 'optional' ? ']]' : ']';
+			const end = id.indexOf(delimiter, start);
+
+			if (end === -1) {
+				throw new Error(`Invalid route ID ${id}`);
+			}
+
+			const content = id.slice(start, (i = end + delimiter.length));
+
+			parts.push({
+				type,
+				content,
+				matched: content.includes('=')
+			});
+		}
+
+		return parts;
+	}
+
+	return routes.sort((route_a, route_b) => {
+		const segments_a = split_route_id(route_a.id).map(get_parts);
+		const segments_b = split_route_id(route_b.id).map(get_parts);
+
+		for (let i = 0; i < Math.max(segments_a.length, segments_b.length); i += 1) {
+			const segment_a = segments_a[i] ?? [EMPTY];
+			const segment_b = segments_b[i] ?? [EMPTY];
+
+			for (let j = 0; j < Math.max(segment_a.length, segment_b.length); j += 1) {
+				const a = segment_a[j];
+				const b = segment_b[j];
+
+				// first part of each segment is always static
+				// (though it may be the empty string), then
+				// it alternates between dynamic and static
+				// (i.e. [foo][bar] is disallowed)
+				const dynamic = j % 2 === 1;
+
+				if (dynamic) {
+					if (!a) return -1;
+					if (!b) return +1;
+
+					// get the next static chunk, so we can handle [...rest] edge cases
+					const next_a = segment_a[j + 1].content || segments_a[i + 1]?.[0].content;
+					const next_b = segment_b[j + 1].content || segments_b[i + 1]?.[0].content;
+
+					// `[...rest]/x` outranks `[...rest]`
+					if (a.type === 'rest' && b.type === 'rest') {
+						if (next_a && next_b) continue;
+						if (next_a) return -1;
+						if (next_b) return +1;
+					}
+
+					// `[...rest]/x` outranks `[required]` or `[required]/[required]`
+					// but not `[required]/x`
+					if (a.type === 'rest') {
+						return next_a && !next_b ? -1 : +1;
+					}
+
+					if (b.type === 'rest') {
+						return next_b && !next_a ? +1 : -1;
+					}
+
+					// part with matcher outranks one without
+					if (a.matched !== b.matched) {
+						return a.matched ? -1 : +1;
+					}
+
+					if (a.type !== b.type) {
+						// `[...rest]` has already been accounted for, so here
+						// we're comparing between `[required]` and `[[optional]]`
+						if (a.type === 'required') return -1;
+						if (b.type === 'required') return +1;
+					}
+				} else if (a.content !== b.content) {
+					// shallower path outranks deeper path
+					if (a === EMPTY) return -1;
+					if (b === EMPTY) return +1;
+
+					return sort_static(a.content, b.content);
+				}
+			}
+		}
+
+		return route_a.id < route_b.id ? +1 : -1;
+	});
+}
+
+/** @param {string} id */
+function split_route_id(id) {
+	return (
+		id
+			// remove all [[optional]] parts unless they're at the very end
+			.replace(/\[\[[^\]]+\]\](?!$)/g, '')
+			.split('/')
+			.filter((segment) => segment !== '' && affects_path(segment))
+	);
+}
+
+/**
+ * Sort two strings lexicographically, except `foobar` outranks `foo`
+ * @param {string} a
+ * @param {string} b
+ */
+function sort_static(a, b) {
+	if (a === b) return 0;
+
+	for (let i = 0; true; i += 1) {
+		const char_a = a[i];
+		const char_b = b[i];
+
+		if (char_a !== char_b) {
+			if (char_a === undefined) return +1;
+			if (char_b === undefined) return -1;
+			return char_a < char_b ? -1 : +1;
+		}
+	}
+}

package/src/core/sync/create_manifest_data/types.d.ts

@@ -1,8 +1,8 @@
 import { PageNode } from 'types';
 
 interface Part {
-	content: string;
 	dynamic: boolean;
+	optional: boolean;
 	rest: boolean;
 	type: string | null;
 }

package/src/utils/routing.js

@@ -1,4 +1,4 @@
-const param_pattern = /^(\.\.\.)?(\w+)(?:=(\w+))?$/;
+const param_pattern = /^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;
 
 /** @param {string} id */
 export function parse_route_id(id) {
@@ -22,57 +22,70 @@ export function parse_route_id(id) {
 						.map((segment, i, segments) => {
 							const decoded_segment = decodeURIComponent(segment);
 							// special case — /[...rest]/ could contain zero segments
-							const match = /^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(decoded_segment);
-							if (match) {
-								names.push(match[1]);
-								types.push(match[2]);
+							const rest_match = /^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(decoded_segment);
+							if (rest_match) {
+								names.push(rest_match[1]);
+								types.push(rest_match[2]);
 								return '(?:/(.*))?';
 							}
+							// special case — /[[optional]]/ could contain zero segments
+							const optional_match = /^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(decoded_segment);
+							if (optional_match) {
+								names.push(optional_match[1]);
+								types.push(optional_match[2]);
+								return '(?:/([^/]+))?';
+							}
 
 							const is_last = i === segments.length - 1;
 
-							return (
-								decoded_segment &&
-								'/' +
-									decoded_segment
-										.split(/\[(.+?)\]/)
-										.map((content, i) => {
-											if (i % 2) {
-												const match = param_pattern.exec(content);
-												if (!match) {
-													throw new Error(
-														`Invalid param: ${content}. Params and matcher names can only have underscores and alphanumeric characters.`
-													);
-												}
-
-												const [, rest, name, type] = match;
-												names.push(name);
-												types.push(type);
-												return rest ? '(.*?)' : '([^/]+?)';
-											}
-
-											if (is_last && content.includes('.')) add_trailing_slash = false;
-
-											return (
-												content // allow users to specify characters on the file system in an encoded manner
-													.normalize()
-													// We use [ and ] to denote parameters, so users must encode these on the file
-													// system to match against them. We don't decode all characters since others
-													// can already be epressed and so that '%' can be easily used directly in filenames
-													.replace(/%5[Bb]/g, '[')
-													.replace(/%5[Dd]/g, ']')
-													// '#', '/', and '?' can only appear in URL path segments in an encoded manner.
-													// They will not be touched by decodeURI so need to be encoded here, so
-													// that we can match against them.
-													// We skip '/' since you can't create a file with it on any OS
-													.replace(/#/g, '%23')
-													.replace(/\?/g, '%3F')
-													// escape characters that have special meaning in regex
-													.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-											); // TODO handle encoding
-										})
-										.join('')
-							);
+							if (!decoded_segment) {
+								return;
+							}
+
+							const parts = decoded_segment.split(/\[(.+?)\](?!\])/);
+							const result = parts
+								.map((content, i) => {
+									if (i % 2) {
+										const match = param_pattern.exec(content);
+										if (!match) {
+											throw new Error(
+												`Invalid param: ${content}. Params and matcher names can only have underscores and alphanumeric characters.`
+											);
+										}
+
+										const [, optional, rest, name, type] = match;
+										// It's assumed that the following invalid route id cases are already checked
+										// - unbalanced brackets
+										// - optional param following rest param
+
+										names.push(name);
+										types.push(type);
+										return rest ? '(.*?)' : optional ? '([^/]*)?' : '([^/]+?)';
+									}
+
+									if (is_last && content.includes('.')) add_trailing_slash = false;
+
+									return (
+										content // allow users to specify characters on the file system in an encoded manner
+											.normalize()
+											// We use [ and ] to denote parameters, so users must encode these on the file
+											// system to match against them. We don't decode all characters since others
+											// can already be epressed and so that '%' can be easily used directly in filenames
+											.replace(/%5[Bb]/g, '[')
+											.replace(/%5[Dd]/g, ']')
+											// '#', '/', and '?' can only appear in URL path segments in an encoded manner.
+											// They will not be touched by decodeURI so need to be encoded here, so
+											// that we can match against them.
+											// We skip '/' since you can't create a file with it on any OS
+											.replace(/#/g, '%23')
+											.replace(/\?/g, '%3F')
+											// escape characters that have special meaning in regex
+											.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+									); // TODO handle encoding
+								})
+								.join('');
+
+							return '/' + result;
 						})
 						.join('')}${add_trailing_slash ? '/?' : ''}$`
 			  );
@@ -101,7 +114,7 @@ export function exec(match, names, types, matchers) {
 	for (let i = 0; i < names.length; i += 1) {
 		const name = names[i];
 		const type = types[i];
-		const value = match[i + 1] || '';
+		let value = match[i + 1] || '';
 
 		if (type) {
 			const matcher = matchers[type];