sveltekit-search-params - npm Package Compare versions

Comparing version 0.1.14 to 1.0.0

package.json

 {
   "name": "sveltekit-search-params",
-  "version": "0.1.14",
+  "version": "1.0.0",
   "repository": "git+https://github.com/paoloricciuti/sveltekit-search-params.git",
@@ -5,0 +5,0 @@ "author": "Paolo Ricciuti",

README.md

@@ -396,1 +396,35 @@ # sveltekit-search-params
 ```
+
+## Store options
+
+Both functions accept a configuration object that contains the following properties:
+
+### debounceHistory
+
+The number of milliseconds to delay the writing of the history when the state changes. This is to avoid cluttering the history of the user especially when a store is bound to an input text (every keystroke would cause a new history entry). It defaults to 0. If set a new entry in the history will be added only after `debounceHistory` seconds of "inactivity".
+
+### pushHistory
+
+A boolean defining if the history have to be written at all. If set to false no new history entries will be written to the history stack (the URL will still update but the user will not be able to go back with the browser).
+
+### How to use it
+
+To set the configuration object you can pass it as a third parameter in case of `queryParam` or the second in case of `queryParameters`.
+
+```svelte
+<script lang="ts">
+    import { ssp, queryParameters, queryParam } from "sveltekit-search-params";
+    const name = queryParam("name", ssp.string(), {
+        debounceHistory: 500, //a new history entry will be created after 500ms of this store not changing
+    });
+    const count = queryParam("count", ssp.number(), {
+        debounceHistory: 1500, //a new history entry will be created after 1500ms of this store not changing
+    })
+    const store = queryParameters({
+        username: true,
+        isCool: ssp.boolean(true),
+    }, {
+        pushHistory: false, //no new history entries for this store
+    });
+</script>
+```

sveltekit-search-params.d.ts

@@ -7,2 +7,6 @@ import { type Writable } from 'svelte/store';
 };
+export declare type StoreOptions = {
+    debounceHistory?: number;
+    pushHistory?: boolean;
+};
 declare type LooseAutocomplete<T> = {
@@ -48,4 +52,4 @@ [K in keyof T]: T[K];
 };
-export declare function queryParameters<T extends object>(options?: Options<T>): Writable<LooseAutocomplete<T>>;
-export declare function queryParam<T = string>(name: string, { encode: encode, decode: decode, defaultValue }?: EncodeAndDecodeOptions<T>): Writable<T | null>;
+export declare function queryParameters<T extends object>(options?: Options<T>, { debounceHistory, pushHistory, }?: StoreOptions): Writable<LooseAutocomplete<T>>;
+export declare function queryParam<T = string>(name: string, { encode: encode, decode: decode, defaultValue }?: EncodeAndDecodeOptions<T>, { debounceHistory, pushHistory, }?: StoreOptions): Writable<T | null>;
 export {};

sveltekit-search-params.js

@@ -10,2 +10,12 @@ /* eslint-disable @typescript-eslint/no-empty-function */
 function noop(value) { }
+const GOTO_OPTIONS = {
+    keepFocus: true,
+    noScroll: true,
+    replaceState: true,
+};
+const GOTO_OPTIONS_PUSH = {
+    keepFocus: true,
+    noScroll: true,
+    replaceState: false,
+};
 function mixSearchAndOptions(searchParams, options) {
@@ -95,3 +105,4 @@ const uniqueKeys = Array.from(new Set(Array.from(searchParams?.keys?.() || []).concat(Object.keys(options ?? {}))));
 const defaultedParams = new Set();
-export function queryParameters(options) {
+const debouncedTimeouts = new Map();
+export function queryParameters(options, { debounceHistory = 0, pushHistory = true, } = {}) {
     const { set: _set, subscribe } = writable();
@@ -122,6 +133,9 @@ const setRef = { value: noop };
                 });
-                goto(`?${query}`, {
-                    keepFocus: true,
-                    noScroll: true,
-                });
+                goto(`?${query}`, GOTO_OPTIONS);
+                clearTimeout(debouncedTimeouts.get("queryParameters"));
+                if (pushHistory) {
+                    debouncedTimeouts.set("queryParameters", setTimeout(() => {
+                        goto("", GOTO_OPTIONS_PUSH);
+                    }, debounceHistory));
+                }
                 batchedUpdates.clear();
@@ -161,3 +175,3 @@ });
 };
-export function queryParam(name, { encode: encode = DEFAULT_ENCODER_DECODER.encode, decode: decode = DEFAULT_ENCODER_DECODER.decode, defaultValue } = DEFAULT_ENCODER_DECODER) {
+export function queryParam(name, { encode: encode = DEFAULT_ENCODER_DECODER.encode, decode: decode = DEFAULT_ENCODER_DECODER.decode, defaultValue } = DEFAULT_ENCODER_DECODER, { debounceHistory = 0, pushHistory = true, } = {}) {
     const { set: _set, subscribe } = writable();
@@ -183,6 +197,9 @@ const setRef = { value: noop };
                 });
-                goto(`?${query}`, {
-                    keepFocus: true,
-                    noScroll: true,
-                });
+                goto(`?${query}`, GOTO_OPTIONS);
+                clearTimeout(debouncedTimeouts.get(name));
+                if (pushHistory) {
+                    debouncedTimeouts.set(name, setTimeout(() => {
+                        goto("", GOTO_OPTIONS_PUSH);
+                    }, debounceHistory));
+                }
                 batchedUpdates.clear();
@@ -189,0 +206,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30215

increased by8.87%

Lines of code

315

increased by7.14%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

429

increased by8.33%

No dependency changes