Additional tests for typed routes

packages/kit/test/apps/options/source/pages/resolve-route/+layout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
+
+	let { data, children }: { data: LayoutData; children: Snippet } = $props();
+</script>
+
+<a href={resolve('/resolve-route')}>ROOT resolve-route</a>
+
+<hr />
+<pre>{JSON.stringify({ ['page.route.id']: page.route.id, params: page.params }, null, 2)}</pre>
+
+{@render children()}
+<hr />

packages/kit/test/apps/options/source/pages/resolve-route/+page.svelte

@@ -1,7 +1,147 @@
 <script>
-	import { resolveRoute } from '$app/paths';
+	import { resolve, resolveRoute } from '$app/paths';
 	import SharedCss from '$lib/SharedCSS.svelte';
+
+	const inter = 'interpolation';
+	const links = [
+		{
+			label: 'resolveRoute (deprecated)',
+			href: resolveRoute('/resolve-route/[foo]', { foo: 'resolveRoute' }),
+			description: 'resolveRoute is deprecated',
+			ok: true
+		},
+		{
+			label: 'resolve',
+			href: resolve('/resolve-route/[foo]', { foo: 'resolve' }),
+			description: 'resolve is the new way to resolve routes, foo is of type string by default',
+			ok: true
+		},
+		{
+			label: 'interpolation',
+			href: resolve(`/resolve-route/${inter}`),
+			description: 'simple interpolation',
+			ok: true
+		},
+		{
+			label: 'interpolation yes but?',
+			href: resolve(`/resolve-route/humm`),
+			description:
+				'interpolation is nice, but we can also have a typo and miss the "typecheck", no?',
+			ok: false,
+			indeterminate: true
+		},
+		{
+			label: 'interpolation 2',
+			href: resolve(`/resolve-route/i/${inter}/${inter}`),
+			description: 'second interpolation',
+			ok: true
+		},
+		{
+			label: "resolve('/resolve-route/gp/(gpA)')",
+			href: resolve('/resolve-route/gp/(gpA)'),
+			description: "(gpA) is a group, and it's kept in the route id (DELTA WITH KITROUTES)",
+			ok: false,
+			indeterminate: true
+		},
+		{
+			label: "resolve('/resolve-route/optional-params/[[lang]]', { lang: 'fr' })",
+			href: resolve('/resolve-route/optional-params/[[lang]]', { lang: 'fr' }),
+			description: 'optional-params lang is optional',
+			ok: true
+		},
+		{
+			label: "resolve('/resolve-route/optional-params/[[lang]]')",
+			href: '', //resolve('/resolve-route/optional-params/[[lang]]'),
+			description: 'We should not have a type error here ?',
+			ok: false
+		},
+		{
+			label: "resolve('/resolve-route/optional-params/[[lang]]', { lang: 'en' })",
+			href: resolve('/resolve-route/optional-params/[[lang]]', { lang: 'en' }),
+			description: '[[lang]] is optional, and it s kept in the route id (DELTA WITH KITROUTES)',
+			ok: false,
+			indeterminate: true
+		},
+		{
+			label: "resolve('/resolve-route/numeric/[number=numeric]', { number: 123 })",
+			href: '', //resolve('/resolve-route/numeric/[number=numeric]', { number: 123 }),
+			description: 'type error',
+			ok: false
+		},
+		{
+			label: "resolve('/resolve-route/matched/[letter=lowercase]', { letter: 'A' })",
+			href: resolve('/resolve-route/matched/[letter=lowercase]', { letter: 'A' }),
+			description: 'Would be great to have the matcher ?',
+			ok: false
+		},
+		{
+			label: "resolve('/resolve-route/matched/[id=ab]', { id: 'c' })",
+			href: resolve('/resolve-route/matched/[id=ab]', { id: 'c' }),
+			description: 'Would be great to have the matcher ?',
+			ok: false
+		},
+		{
+			label: "resolve('/resolve-route/api/graphql')",
+			href: resolve('/resolve-route/api/graphql'),
+			description: 'server files',
+			ok: true
+		},
+		{
+			label: "resolve('/resolve-route/a/[...rest]/z', { rest: 'a' })",
+			href: resolve('/resolve-route/a/[...rest]/z', { rest: 'a' }),
+			description: 'catches all route',
+			ok: true
+		},
+		{
+			label: "resolve('/resolve-route/site')",
+			href: resolve('/resolve-route/site'),
+			description: 'We have an action there, maybe resolve should be a bit more specific ?',
+			ok: false,
+			indeterminate: true
+		}
+	];
+
+	const idfy = (id) => id.replace(/[^a-zA-Z0-9]/g, '-');
 </script>
 
+<ul>
+	{#each links as { label, href, ok, indeterminate, description }}
+		<li>
+			<input type="checkbox" checked={ok} {indeterminate} />
+			<div>
+				<a data-id="target-{idfy(label)}" {href}>{label}</a>
+				<i>{description}</i>
+			</div>
+		</li>
+	{/each}
+</ul>
+
+<hr />
+
 <SharedCss />
-<a data-id="target" href={resolveRoute('/resolve-route/[foo]', { foo: 'resolved' })}>click me</a>
+
+<style>
+	li {
+		/* height: 33px; */
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: 0.5rem 0;
+	}
+
+	div {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+	}
+
+	input[type='checkbox'] {
+		accent-color: green;
+		width: 2rem;
+		height: 2rem;
+	}
+
+	input[type='checkbox']:indeterminate {
+		accent-color: blue;
+	}
+</style>

packages/kit/test/apps/options/source/pages/resolve-route/a/[...rest]/z/+page.svelte

@@ -0,0 +1 @@
+<h2>[...rest] page</h2>

packages/kit/test/apps/options/source/pages/resolve-route/api/graphql/+server.js

@@ -0,0 +1,7 @@
+import { json } from '@sveltejs/kit';
+
+const allMethod = async () => {
+	return json({ my: 'Graphql server 🎉' });
+};
+
+export { allMethod as GET, allMethod as POST };

packages/kit/test/apps/options/source/pages/resolve-route/gp/(gpA)/+page.svelte

@@ -0,0 +1 @@
+<h2>gpA</h2>

packages/kit/test/apps/options/source/pages/resolve-route/i/[n]/[terpolation]/+page.svelte

@@ -0,0 +1 @@
+Plop

packages/kit/test/apps/options/source/pages/resolve-route/matched/[fallback]/+page.svelte

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

packages/kit/test/apps/options/source/pages/resolve-route/matched/[id=ab]/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>ab: {page.params.id}</h1>

packages/kit/test/apps/options/source/pages/resolve-route/matched/[letter=lowercase]/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>lowercase: {page.params.letter}</h1>

packages/kit/test/apps/options/source/pages/resolve-route/matched/[number=numeric]/+page.svelte

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

packages/kit/test/apps/options/source/pages/resolve-route/optional-params/[[lang]]/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h2>{page.params.lang}</h2>

packages/kit/test/apps/options/source/pages/resolve-route/site/+page.server.ts

@@ -0,0 +1,8 @@
+import type { Actions } from './$types';
+
+export const actions = {
+	create: async () => {
+		// [
+	},
+	'u-p-d-a-t-e': async () => {}
+} satisfies Actions;

packages/kit/test/apps/options/source/pages/resolve-route/site/[id]/+page.server.ts

@@ -0,0 +1,6 @@
+import type { Actions } from '../$types.js';
+
+export const actions = {
+	update: async () => {},
+	delete: async () => {}
+} satisfies Actions;

packages/kit/test/apps/options/source/pages/resolve-route/site/[id]/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { page } from '$app/state';
+</script>
+
+<h2>site [id]</h2>
+
+<pre>id: {page.params.id}</pre>

packages/kit/test/apps/options/source/params/ab.ts

@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+
+export const match = ((param): param is 'a' | 'b' => {
+	return ['a', 'b'].includes(param);
+}) satisfies ParamMatcher;

packages/kit/test/apps/options/source/params/lowercase.js

@@ -0,0 +1,3 @@
+export function match(param) {
+	return /^[a-z]+$/.test(param);
+}

packages/kit/test/apps/options/source/params/numeric.js

@@ -0,0 +1,3 @@
+export function match(param) {
+	return !isNaN(parseInt(param));
+}

packages/kit/test/apps/options/svelte.config.js

@@ -12,6 +12,7 @@ const config = {
 			}
 		},
 		files: {
+			params: 'source/params',
 			assets: 'public',
 			lib: 'source/components',
 			routes: 'source/pages',