Comments (9)
This could very well be an optional third parameter in the store creator.
What i'm thinking tho is that the url might still update with the replaceState option set to true and only after the debounce (which defaults to 0) we add a new history entry, we can even avoid to use sveltekit apis and just do a
history.pushState(history.state, null)
This is because i think is still important to update the url right away with every change but we can avoid filling the history by doing this. I think this would be the best in terms of UX.
The propsed api will look like this
<script>
import {queryParam, ssp} from "sveltekit-search-params";
const test = queryParam("test", ssp.string(), {
debounceHistory: 300, //with this the URL will update on every keystroke but a new history will be debounced to 300ms
})
</script>
<input bind:value={$test} />
We could even add another option to completely disable pushing history, something like
<script>
import {queryParam, ssp} from "sveltekit-search-params";
const test = queryParam("test", ssp.string(), {
pushHistory: false, //no new history will be created for this query param
})
</script>
<input bind:value={$test} />
The only thing i don't really like about this is that to pass the options you have to pass the encoder and decoder. I could put the options as an optional parameter in the second spot of the arguments but this would be a breaking change (it may still be worth given that we are still not at 1.0?).
Ideas on the API, the naming etc? I'll start to work on this tomorrow morning probably.
from sveltekit-search-params.
i think this is a good API yes but i wonder if there is a lower level api we can offer that is less declarative but more generically powerful (maybe also replaces encoder?)
<script>
import {queryParam, ssp, defaultEncoder} from "sveltekit-search-params";
// assuming you have a standard debounce fn
const test = queryParam("test", ssp.string(), (state, saveState) => {
debounce(() => saveState(defaultEncoder(state)), 300)
})
</script>
<input bind:value={$test} />
im not sure about the decoder equivalent but just giving some idea of alternative APIs that might be lower level but more powerful - i think these can sometimes be more useful/easier to maintain than pure declarative api's
from sveltekit-search-params.
I like the idea of a more powerful api but I dislike that this is the only option...what if we provide both? We could provide a set of options as the third argument and provide listener for the update:
<script>
import {queryParam, ssp} from "sveltekit-search-params";
const test = queryParam("test", ssp.string(), {
debounceHistory: 300, //with this the URL will update on every keystroke but a new history will be debounced to 300ms
})
test.on("update", (state, saveState)=>{
//Do your powerful stuff
})
</script>
<input bind:value={$test} />
from sveltekit-search-params.
up to you :) if in doubt, just do the simple thing first
from sveltekit-search-params.
Is just that I think the history issue is something very real and devs shouldn't be forced to write always the same code for something like this.
The idea of a callback in the "lifetime" is tempting tho
from sveltekit-search-params.
yup yup. do whatever is simple to you, we dont need to overthink this, i was just offering the obvious alternative api
from sveltekit-search-params.
Yeah, I value your insight and I would love to build the best api possible that's why I was discussing with you. Thanks for the feedback, I'll work on this tomorrow
from sveltekit-search-params.
@sw-yx updated the package to 1.0.0 with the new options added. Let me know if it fits your needs.
I'll probably add the listener in another task.
from sveltekit-search-params.
oh nice! thanks!
from sveltekit-search-params.
Related Issues (20)
- Usage in derived storage HOT 5
- [Bug]: Updating queryParam(s) values to undefined does not remove param
- Allow encoding as undefined to remove param HOT 2
- Setting a default if enumerated parameter is invalid HOT 2
- defaultValue not applyed in a second client side navigation HOT 3
- Question: How do you achieve goto with replaceState HOT 1
- Array helper default value not typed correctly HOT 1
- Optimistic store updates, update store before navigation happens. HOT 1
- Cannot find package '$app' HOT 1
- Initial store value is undefined for param with defaultValue set HOT 2
- first unsubscribe to params store stops updates with multiple subscribers HOT 2
- sort params in url to improve browser cache hit rate
- update SvelteKit `peerDependency` to include 2 HOT 1
- Type error with exactOptionalPropertyTypes on
- Updating to SvelteKit 2 leads to warning HOT 8
- Crashes with enabled prerendering HOT 8
- Support for bind:group directive HOT 5
- Reset search param A when search param B changes - Unexpected behaviour HOT 7
- hiding default value with arrays and objects HOT 1
- Value is nullable if default value is provided HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sveltekit-search-params.