fix: prefix route pathname with hash when using resolve with hash routing enabled (#14786)

fixes #14785

This PR changes the client-side resolve implementation to take into account the hash router setting. As a result, it'll add a hash so you get a route such as /base#/my-route which is what you want when hash routing is enabled.

Author: teemingc

.changeset/blue-baboons-jam.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: include hash when using `resolve` with hash routing enabled

packages/kit/src/exports/vite/index.js

@@ -350,6 +350,7 @@ async function kit({ svelte_config }) {
 				__SVELTEKIT_PATHS_BASE__: s(kit.paths.base),
 				__SVELTEKIT_PATHS_RELATIVE__: s(kit.paths.relative),
 				__SVELTEKIT_CLIENT_ROUTING__: s(kit.router.resolution === 'client'),
+				__SVELTEKIT_HASH_ROUTING__: s(kit.router.type === 'hash'),
 				__SVELTEKIT_SERVER_TRACING_ENABLED__: s(kit.experimental.tracing.server)
 			};
 

packages/kit/src/runtime/app/paths/client.js

@@ -1,6 +1,6 @@
 /** @import { Asset, RouteId, Pathname, ResolvedPathname } from '$app/types' */
 /** @import { ResolveArgs } from './types.js' */
-import { base, assets } from './internal/client.js';
+import { base, assets, hash_routing } from './internal/client.js';
 import { resolve_route } from '../../../utils/routing.js';
 
 /**
@@ -25,6 +25,8 @@ export function asset(file) {
 	return (assets || base) + file;
 }
 
+const pathname_prefix = hash_routing ? '#' : '';
+
 /**
  * Resolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.
  *
@@ -51,7 +53,9 @@ export function asset(file) {
 export function resolve(...args) {
 	// The type error is correct here, and if someone doesn't pass params when they should there's a runtime error,
 	// but we don't want to adjust the internal resolve_route function to accept `undefined`, hence the type cast.
-	return base + resolve_route(args[0], /** @type {Record<string, string>} */ (args[1]));
+	return (
+		base + pathname_prefix + resolve_route(args[0], /** @type {Record<string, string>} */ (args[1]))
+	);
 }
 
 export { base, assets, resolve as resolveRoute };

packages/kit/src/runtime/app/paths/internal/client.js

@@ -1,3 +1,4 @@
 export const base = __SVELTEKIT_PAYLOAD__?.base ?? __SVELTEKIT_PATHS_BASE__;
 export const assets = __SVELTEKIT_PAYLOAD__?.assets ?? base ?? __SVELTEKIT_PATHS_ASSETS__;
 export const app_dir = __SVELTEKIT_APP_DIR__;
+export const hash_routing = __SVELTEKIT_HASH_ROUTING__;

packages/kit/src/types/global-private.d.ts

@@ -13,6 +13,8 @@ declare global {
 	const __SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__: boolean;
 	/** True if `config.kit.router.resolution === 'client'` */
 	const __SVELTEKIT_CLIENT_ROUTING__: boolean;
+	/** True if `config.kit.router.type === 'hash'` */
+	const __SVELTEKIT_HASH_ROUTING__: boolean;
 	/**
 	 * True if any node in the manifest has a server load function.
 	 * Used for treeshaking server load code from client bundles when no server loads exist.

packages/kit/test/apps/hash-based-routing/src/routes/resolve/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+</script>
+
+<a href={resolve('/')}>go to home</a>

packages/kit/test/apps/hash-based-routing/test/test.js

@@ -126,4 +126,13 @@ test.describe('hash based navigation', () => {
 		await expect(page.locator('#button3')).toBeFocused();
 		await expect(page.locator('button[id="button3"]')).toBeFocused();
 	});
+
+	test('resolve works', async ({ page }) => {
+		await page.goto('/#/resolve');
+		await page.locator('a', { hasText: 'go to home' }).click();
+		await expect(page.locator('p')).toHaveText('home');
+		const url = new URL(page.url());
+		expect(url.pathname).toBe('/');
+		expect(url.hash).toBe('#/');
+	});
 });