svelte-search-params 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -0
- package/dist/app.d.ts +13 -0
- package/dist/app.html +12 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/search-params.svelte.d.ts +2 -0
- package/dist/search-params.svelte.js +32 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# svelte-search-parameters - [npm](https://www.npmjs.com/package/svelte-search-parameters)
|
|
2
|
+
|
|
3
|
+
Tiny dependency free reactive search parameters for svelte 5.
|
|
4
|
+
|
|
5
|
+
## Example
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { searchParams } from 'svelte-search-params'
|
|
10
|
+
import * as v from 'valibot'
|
|
11
|
+
|
|
12
|
+
const schema = v.object({
|
|
13
|
+
order: v.fallback(v.string(), "alphabetic"),
|
|
14
|
+
page: v.fallback(v.number(), 1),
|
|
15
|
+
optionalRegionFilter: v.nullable(v.string())
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
const params = searchParams(schema)
|
|
19
|
+
|
|
20
|
+
// To change the url search parameters simply reassign
|
|
21
|
+
params.page = 2 // this won't push history
|
|
22
|
+
</script>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Support
|
|
26
|
+
|
|
27
|
+
Currently only supports [valibot](https://valibot.dev/) as validation library.
|
package/dist/app.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// See https://svelte.dev/docs/kit/types#app.d.ts
|
|
2
|
+
// for information about these interfaces
|
|
3
|
+
declare global {
|
|
4
|
+
namespace App {
|
|
5
|
+
// interface Error {}
|
|
6
|
+
// interface Locals {}
|
|
7
|
+
// interface PageData {}
|
|
8
|
+
// interface PageState {}
|
|
9
|
+
// interface Platform {}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export {}
|
package/dist/app.html
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
%sveltekit.head%
|
|
8
|
+
</head>
|
|
9
|
+
<body data-sveltekit-preload-data="hover">
|
|
10
|
+
<div style="display: contents">%sveltekit.body%</div>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { searchParams } from "./search-params.svelte.ts";
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { searchParams } from "./search-params.svelte.js";
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { replaceState } from "$app/navigation";
|
|
2
|
+
import { page } from "$app/state";
|
|
3
|
+
import * as v from "valibot";
|
|
4
|
+
export function searchParams(schema) {
|
|
5
|
+
const keys = Object.entries(schema.entries).map(([key]) => key);
|
|
6
|
+
const params = Object.fromEntries(keys.map((key) => {
|
|
7
|
+
const value = page.url.searchParams.get(key);
|
|
8
|
+
if (value === null)
|
|
9
|
+
return [key, null];
|
|
10
|
+
try {
|
|
11
|
+
return [key, JSON.parse(value)];
|
|
12
|
+
}
|
|
13
|
+
catch (e) {
|
|
14
|
+
return [key, null];
|
|
15
|
+
}
|
|
16
|
+
}));
|
|
17
|
+
const parsedParams = v.parse(schema, params);
|
|
18
|
+
const state = $state(parsedParams);
|
|
19
|
+
return new Proxy(state, {
|
|
20
|
+
set: (_, property, value) => {
|
|
21
|
+
if (value === null) {
|
|
22
|
+
page.url.searchParams.delete(property);
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
page.url.searchParams.set(property, JSON.stringify(value));
|
|
26
|
+
}
|
|
27
|
+
replaceState(page.url, {});
|
|
28
|
+
state[property] = value;
|
|
29
|
+
return true;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "svelte-search-params",
|
|
3
|
+
"scripts": {
|
|
4
|
+
"test": "vitest",
|
|
5
|
+
"lint": "publint",
|
|
6
|
+
"sync": "svelte-kit sync",
|
|
7
|
+
"dev": "nodemon --exec tsx index.ts",
|
|
8
|
+
"build": "svelte-package && npm run prepack",
|
|
9
|
+
"prepack": "svelte-kit sync && publint"
|
|
10
|
+
},
|
|
11
|
+
"version": "0.0.3",
|
|
12
|
+
"description": "Simple reactive search parameters for svelte",
|
|
13
|
+
"author": {
|
|
14
|
+
"name": "propolies",
|
|
15
|
+
"url": "https://github.com/propolies"
|
|
16
|
+
},
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "git+https://github.com/propolies/svelte-search-params.git",
|
|
20
|
+
"directory": "package"
|
|
21
|
+
},
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"exports": {
|
|
24
|
+
".": {
|
|
25
|
+
"types": "./dist/index.d.ts",
|
|
26
|
+
"import": "./dist/index.js"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"main": "dist/index.js",
|
|
30
|
+
"files": [
|
|
31
|
+
"dist",
|
|
32
|
+
"!dist/**/*.test.*"
|
|
33
|
+
],
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"@sveltejs/kit": "^2.0.0",
|
|
36
|
+
"svelte": "^5.0.0"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@sveltejs/package": "^2.5.7",
|
|
40
|
+
"publint": "^0.3.18",
|
|
41
|
+
"typescript": "^5.9.3",
|
|
42
|
+
"valibot": "^1.2.0",
|
|
43
|
+
"vite": "^7.3.1",
|
|
44
|
+
"vitest": "^4.1.0"
|
|
45
|
+
},
|
|
46
|
+
"type": "module"
|
|
47
|
+
}
|