https://github.com/jill64/svelte-qparam
🔎 Type-Safe Query Parameter for SvelteKit
https://github.com/jill64/svelte-qparam
library querystring svelte sveltekit typesafe
Last synced: 7 months ago
JSON representation
🔎 Type-Safe Query Parameter for SvelteKit
- Host: GitHub
- URL: https://github.com/jill64/svelte-qparam
- Owner: jill64
- License: mit
- Created: 2023-11-13T14:30:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-01T06:52:33.000Z (9 months ago)
- Last Synced: 2025-05-31T09:15:24.093Z (8 months ago)
- Topics: library, querystring, svelte, sveltekit, typesafe
- Language: TypeScript
- Homepage: https://svelte-qparam.jill64.dev
- Size: 2.31 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-qparam
🔎 Type-Safe Query Parameter for SvelteKit
## [Demo](https://svelte-qparam.jill64.dev)
## Installation
```sh
npm i svelte-qparam
```
## Bulk Parameters
Use the `define` function to set multiple parameter definitions at once.
```svelte
import { page } from '$app/state'
import { define } from 'svelte-qparam'
import { string, number, boolean } from 'svelte-qparam/serde'
const extract = define({
str: string,
num: number,
bool: boolean
})
// https://example.com/?str=value&num=123&bool=false
let { values, qparams: q } = $derived(extract(page.url))
// {
// str: 'value',
// num: 123,
// bool: false
// }
console.log(values)
// output 'value'
console.log(q.str)
q.num = 456
q.bool = true
```
### Fullstack Type-Safety
Values defined with the `define` function can be used in `+page.js` and `+page.server.js`.
This allows you to handle parameters type-safely across applications across servers and clients.
```js
// +page.js
import { define } from 'svelte-qparam'
import { string, number, boolean } from 'svelte-qparam/serde'
export const _extract = define({
str: string,
num: number,
bool: boolean
})
export const load = ({ url, data }) => {
const { values, qparams } = _extract(url)
// ...
return {
qparams
}
}
```
```js
// +page.server.js
import { _extract } from './+page.js'
export const load = ({ url }) => {
const { values } = _extract(url)
// ...
return {
// Note: Cannot return `qparams` from server
// ...
}
}
```
```svelte
let { data } = $props()
let { qparams: q } = $derived(data)
// ...
```
## License
[MIT](LICENSE)