consistent query parameter handling between client and server - fixes #497

templates/src/client/app.ts

@@ -87,11 +87,14 @@ export function select_route(url: URL): Target {
 
 		const match = page.pattern.exec(path);
 		if (match) {
-			const query: Record<string, string | true> = {};
+			const query: Record<string, string | string[]> = Object.create(null);
 			if (url.search.length > 0) {
 				url.search.slice(1).split('&').forEach(searchParam => {
-					const [, key, value] = /([^=]*)(?:=(.*))?/.exec(searchParam);
-					query[decodeURIComponent(key)] = decodeURIComponent((value || '').replace(/\+/g, ' '));
+					let [, key, value] = /([^=]*)(?:=(.*))?/.exec(decodeURIComponent(searchParam));
+					value = (value || '').replace(/\+/g, ' ');
+					if (typeof query[key] === 'string') query[key] = [<string>query[key]];
+					if (typeof query[key] === 'object') query[key].push(value);
+					else query[key] = value;
 				});
 			}
 			return { url, path, page, match, query };

templates/src/client/types.ts

@@ -55,7 +55,7 @@ export type Target = {
 	path: string;
 	page: Page;
 	match: RegExpExecArray;
-	query: Record<string, string | true>;
+	query: Record<string, string | string[]>;
 };
 
 export type Redirect = {

test/apps/basics/src/routes/echo-query/index.html

@@ -1,9 +1 @@
-<h1>message: "{message}"</h1>
-
-<script>
-	export default {
-		preload({ query }) {
-			return query;
-		}
-	};
-</script>
+<h1>{JSON.stringify(query)}</h1>

test/apps/basics/src/routes/index.html

@@ -3,5 +3,6 @@
 <a href="a">a</a>
 <a href="ambiguous/ok.json">ok</a>
 <a href="echo-query?message">ok</a>
+<a href="echo-query?p=one&p=two">ok</a>
 
 <div class='hydrate-test'></div>

test/apps/basics/test.ts

@@ -204,7 +204,7 @@ describe('basics', function() {
 
 		assert.equal(
 			await title(),
-			'message: ""'
+			'{"message":""}'
 		);
 	});
 
@@ -217,7 +217,29 @@ describe('basics', function() {
 
 		assert.equal(
 			await title(),
-			'message: ""'
+			'{"message":""}'
+		);
+	});
+
+	it('accepts duplicated query string parameter on server', async () => {
+		await page.goto(`${base}/echo-query?p=one&p=two`);
+
+		assert.equal(
+			await title(),
+			'{"p":["one","two"]}'
+		);
+	});
+
+	it('accepts duplicated query string parameter on client', async () => {
+		await page.goto(base);
+		await start();
+		await prefetchRoutes();
+
+		await page.click('a[href="echo-query?p=one&p=two"]')
+
+		assert.equal(
+			await title(),
+			'{"p":["one","two"]}'
 		);
 	});