feat: add optional params for `hash` and `searchParams` to `resolve()`
Please go easy on me as this is the first PR I'm making to this repository, I am more than open to any suggested changes. I've been trying to get some help with this PR from the official Discord server, but discussion was pretty stale. So I'm hoping by opening this PR we can get this change going. Or, if the conclusion is 'we shouldnt do this at all', that's fine too!
Adds optional arguments for URL params hash and searchParams to resolve(). Appends these to the returned URL after resolving the path.
Resolves https://github.com/sveltejs/kit/issues/14750 and helps address https://github.com/sveltejs/eslint-plugin-svelte/issues/1353
- Additionally updates the example docstring to show new usage:
import { resolve } from '$app/paths';
// using a pathname
const resolved = resolve(`/blog/hello-world`);
// using a route ID plus route parameters
const resolved = resolve('/blog/[slug]', {
slug: 'hello-world'
});
// using a route ID plus URL parameters
const resolved = resolve('/blog/search',
{ hash: 'results', searchParams: { author: 'John Doe', year: '2025' } }
});
// using a route ID plus route parameters and URL parameters
const resolved = resolve('/blog/[slug]',
{ slug: 'hello-world' },
{ hash: 'introduction' }
});
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
- [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- PR references an issue, but no discussion as of yet.
- [x] This message body should clearly illustrate what problems it solves.
- [ ] Ideally, include a test that fails without this PR but passes with it.
- I tried writing some tests in
kit/packages/kit/test/apps/basics/test/client.test.js, but was met withReferenceError: __SVELTEKIT_PAYLOAD__ is not defined at ../../../../src/runtime/app/paths/internal/client.js:1. This makes sense, becauseresolveRouteis used inresolve, which usesbase, which needs__SVELTEKIT_PAYLOAD__. I wasn't able to find any existing tests forresolveorresolveRoute, other than atpackages/kit/test/apps/options/test/test.jsat line97, which seems to be more of an integration test than actually testingresolveRouteitself. This is my first PR for this repo, so I'm not sure where below tests should go. Willing to add these if I get some pointers in the right direction.
import { resolve } from '../../../../src/runtime/app/paths/client.js'; describe('resolve function', () => { it('resolves a simple pathname', () => { const result = resolve('/blog/hello-world'); expect(result).toBe('/blog/hello-world'); }); it('resolves a route ID with dynamic parameters', () => { const result = resolve('/blog/[slug]', { slug: 'hello-world' }); expect(result).toBe('/blog/hello-world'); }); it('resolves a route ID with URL parameters', () => { const result = resolve('/blog/search', { hash: 'results', searchParams: { author: 'John Doe', year: '2025' } }); expect(result).toBe('/blog/search?author=John%20Doe&year=2025#results'); }); it('resolves a route ID with both dynamic and URL parameters', () => { const result = resolve('/blog/[slug]', { slug: 'hello-world' }, { hash: 'introduction' }); expect(result).toBe('/blog/hello-world#introduction'); }); it('handles empty parameters gracefully', () => { const result = resolve('/blog/[slug]', {}); expect(result).toBe('/blog/[slug]'); }); }); - I tried writing some tests in
Tests
- [x] Run the tests with
pnpm testand lint the project withpnpm lintandpnpm check
Changesets
- [x] If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.- added a changeset as requested, but also somewhat unfamiliar with the 'correct' process for these, so a review is required.
Edits
- [x] Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.
🦋 Changeset detected
Latest commit: fc1406257ad8542a0203a1319681c982963684c1
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| @sveltejs/kit | Minor |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
Preview: https://svelte-dev-git-preview-kit-14756-svelte.vercel.app/
Any pointers as to why svelte.dev / preview deployments fails?
When I try to see the details, I just get met with a 404 error in Vercel.
Any pointers as to why
svelte.dev / preview deploymentsfails?When I try to see the details, I just get met with a
404error in Vercel.
Build seems to succeed locally, so I don't really have any insights as to what might be happening here.
Try syncing with main @codevogel
Logs from the failed build
11:28:29.890 ## Errors were thrown in the sample, but not included in an error tag
11:28:29.890
11:28:29.890 These errors were not marked as being expected: 1005 1128.
11:28:29.891 The existing annotation specified 7031
11:28:29.891
11:28:29.891 Compiler Errors:
11:28:29.891
11:28:29.891 ambient-kit.d.ts
11:28:29.891 [1005] 511 - ',' expected.
11:28:29.891 [1128] 512 - Declaration or statement expected.
11:28:29.891 [1005] 710 - ',' expected.
11:28:29.891 [1128] 711 - Declaration or statement expected.
11:28:29.891 [1005] 869 - ',' expected.
11:28:29.891 [1128] 870 - Declaration or statement expected.
11:28:29.892 // @filename: injected.d.ts
11:28:29.892 // @filename: ambient-kit.d.ts
11:28:29.892 /// <reference types="@sveltejs/kit" />
11:28:29.892 // ---cut---
11:28:29.892 // @errors: 7031
11:28:29.892 import { resolve } from '$app/paths';
11:28:29.892
11:28:29.892 // using a pathname
11:28:29.892 const resolved = resolve(`/blog/hello-world`);
11:28:29.892
11:28:29.892 // using a route ID plus route parameters
11:28:29.892 const resolved = resolve('/blog/[slug]', {
11:28:29.892 slug: 'hello-world'
11:28:29.892 });
11:28:29.892
11:28:29.892 // using a route ID plus URL parameters as Record
11:28:29.892 const resolved = resolve('/blog/search',
11:28:29.892 { hash: 'results', searchParams: { author: 'John Doe', year: '2025' } }
11:28:29.893 });
11:28:29.893
11:28:29.893 // using a route ID plus URL parameters as URLSearchParams
11:28:29.893 const resolved = resolve('/blog/search',
11:28:29.893 { hash: 'results', searchParams: new URLSearchParams({ author: 'John Doe', year: '2025' }) }
11:28:29.893 });
11:28:29.893
11:28:29.893 // using a route ID plus route parameters and URL parameters
11:28:29.893 const resolved = resolve('/blog/[slug]',
11:28:29.893 { slug: 'hello-world' },
11:28:29.893 { hash: 'introduction' }
11:28:29.893 });
11:28:29.893
11:28:29.893 [1;31m[500] GET /docs/kit/$app-paths[0m
11:28:29.893 Error: Error compiling snippet in docs/kit/98-reference/20-$app-paths.md
11:28:29.893 Please report this to https://github.com/markedjs/marked.
11:28:29.893 at syntax_highlight (file:///vercel/path0/apps/svelte.dev/.svelte-kit/output/server/chunks/renderer.js:10698:13)
11:28:29.893 at Marked.walkTokens (file:///vercel/path0/apps/svelte.dev/.svelte-kit/output/server/chunks/renderer.js:10302:24)
11:28:29.893 at async Promise.all (index 95)
11:28:30.394
11:28:30.395 node:internal/event_target:1105
11:28:30.395 process.nextTick(() => { throw err; });
11:28:30.395 ^
11:28:30.396 Error: 500 /docs/kit/$app-paths (linked from /docs/kit/modules)
11:28:30.396 To suppress or handle this error, implement `handleHttpError` in https://svelte.dev/docs/kit/configuration#prerender
11:28:30.396 at file:///vercel/path0/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@types+node@_6bh6v3iikhmctpvhh55ysccqsi/node_modules/@sveltejs/kit/src/core/config/options.js:220:13
11:28:30.397 at file:///vercel/path0/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@types+node@_6bh6v3iikhmctpvhh55ysccqsi/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:75:25
11:28:30.397 at save (file:///vercel/path0/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@types+node@_6bh6v3iikhmctpvhh55ysccqsi/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:464:4)
11:28:30.397 at visit (file:///vercel/path0/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@types+node@_6bh6v3iikhmctpvhh55ysccqsi/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:283:3)
11:28:30.397 Emitted 'error' event on Worker instance at:
11:28:30.397 at [kOnErrorMessage] (node:internal/worker:333:10)
11:28:30.397 at [kOnMessage] (node:internal/worker:344:37)
11:28:30.397 at MessagePort.<anonymous> (node:internal/worker:233:57)
11:28:30.397 at [nodejs.internal.kHybridDispatch] (node:internal/event_target:831:20)
11:28:30.397 at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)
11:28:30.397
11:28:30.397 Node.js v20.19.4
11:28:30.486  ELIFECYCLE  Command failed with exit code 1.
11:28:30.502  ELIFECYCLE  Command failed with exit code 1.
11:28:30.516 Error: Command "cd ../../ && pnpm build" exited with 1
Here's a thought for an additional improvement – if you pass a URL as a reference, the eslint rule starts complaining. Not sure how to tackle this.
<a href={myurl}>View URL</a>
<!-- Unexpected href link without resolve(). -->