kit icon indicating copy to clipboard operation
kit copied to clipboard

feat: add optional params for `hash` and `searchParams` to `resolve()`

Open codevogel opened this issue 2 months ago • 6 comments

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 with ReferenceError: __SVELTEKIT_PAYLOAD__ is not defined at ../../../../src/runtime/app/paths/internal/client.js:1. This makes sense, because resolveRoute is used in resolve, which uses base, which needs __SVELTEKIT_PAYLOAD__. I wasn't able to find any existing tests for resolve or resolveRoute, other than at packages/kit/test/apps/options/test/test.js at line 97, which seems to be more of an integration test than actually testing resolveRoute itself. 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]');
       });
    });
    

Tests

  • [x] Run the tests with pnpm test and lint the project with pnpm lint and pnpm 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 changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.
    • 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.

codevogel avatar Oct 19 '25 10:10 codevogel

🦋 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

changeset-bot[bot] avatar Oct 19 '25 10:10 changeset-bot[bot]

Preview: https://svelte-dev-git-preview-kit-14756-svelte.vercel.app/

svelte-docs-bot[bot] avatar Oct 19 '25 10:10 svelte-docs-bot[bot]

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.

codevogel avatar Oct 23 '25 15:10 codevogel

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.

Build seems to succeed locally, so I don't really have any insights as to what might be happening here.

codevogel avatar Nov 02 '25 15:11 codevogel

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

ghostdevv avatar Nov 02 '25 17:11 ghostdevv

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(). -->

zeekrey avatar Dec 05 '25 14:12 zeekrey