Add a nice-url option that does not encode /, objects and arrays
#355
Comments
|
Sounds like a good idea, we could add How it is applied would be a bit different than current options though: they are merged into a Would you like to open a PR? Don't forget to add a demo for it. |
franky47
added
feature
|
Giving this a try as I was porting shadcn/ui's Tasks demo to Here's what we could do 🙃 (hint: maybe don't.) Screen.Recording.2023-10-13.at.17.12.58.movI'll try this on multiple browsers to see how they might accept non-encoded special characters and fine tune the query string renderer. If a good set of defaults can be supported, I think we could avoid having an option for this and make it the default. |
|
I asked the LLMs to generate a URL that contains all non-alphanumerical printable ASCII characters to see which ones end up being encoded when displayed in the URL bar. Could you please:
FYI, browsers on Linux would be much appreciated, thanks! 🙏 Edit: results so far: |
|
Chrome 117, macOS, https://www.whatsmybrowser.org/b/MO73G
Safari 16, macOS, https://www.whatsmybrowser.org/b/20H86
Firefox 118, macOS, https://www.whatsmybrowser.org/b/51WS3
Safari 16, iOS, https://www.whatsmybrowser.org/b/40G5X Chrome 118, iOS, https://www.whatsmybrowser.org/b/CTINA
Safari UIWebView 15 (Firefox Klar), macOS, https://www.whatsmybrowser.org/b/V5YGS
(Note: All macOS are copied in Workflowy first to transfer them in this issue, that might change thing again…) |
|
Note: |
|
Thanks @tordans! From my initial tests, it's not just about encoding for pretty URL display in the browser, but more importantly to make sure copy-pasting a URL to share it with others won't break the link by containing characters that may indicate the end of the URL, and drop the rest of the query string. As an example, here's the raw URL from above, unencoded: https://example.com?exclamationMark=!&doubleQuote="&hash=%23&dollar=$&percent=%&ersand=%26&apostrophe='&leftParenthesis=(&rightParenthesis=)&asterisk=*&plus=+&comma=,&hyphen=-&period=.&slash=/&colon=:&semicolon=;&lessThan=<&equals==&greaterThan=>&questionMark=?&at=@&leftSquareBracket=[&backslash=&rightSquareBracket=]&caret=^&underscore=_&backtick=`&leftCurlyBrace={&pipe=|&rightCurlyBrace=}&tilde=~ GitHub seems to break at the |
Yes, it would be great if the library could give reasonable defaults for this. However, it will also be very hard. From my experience with https://radverkehrsatlas.de/regionen/parkraum (which is still the "old" version using React Location), the safest route is often to make it an HTML link eg. in E-Mails or Markdown enabled text. The URL detections of various tools differ so much in Quality, that it will be quite a bit of research to find characters that don't work. And AFAIK the length of the URL plays into it as well. Also, sometimes it helps to put Personally, I would be fine if the library had an option to hand over control if I want the saved (encoded) route or if I want to handle encoding myself. I think its great if the library handle the base-stack of issues like you did with the comma in array. But apart form that, I would be happy to take responsibility of what I put into my arrays and objects in my own codebase. |
|
🎉 This issue has been resolved in version 1.9.0-beta.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
I'd say the easiest way to do this would be to implement a custom parser/serializer, that pre-encodes the string value as needed before returning it from the I've published 1.9.0-beta.1 which includes test cases for your URLs, could you give it a try and see how far you can go before it breaks horribly? I have included the reasoning in PR #372 (a review would be most welcome). |
|
@franky47 I tested beta.2 and it shows pretty URLs without any issues. FYI, this uses JSURL2 (as recommended by Tanstack Router) to get a shorter Also, while I am on Tanstack's docs, is https://tanstack.com/router/v1/docs/guide/custom-search-param-serialization#safe-binary-encodingdecoding relevant for this library / this encoding question? There is no mention of (FYI: The updated site is not public, yet.) |
|
I'm glad it works for you. I don't think you need to bother with |
|
🎉 This issue has been resolved in version 1.9.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
I'm trying to use a custom parser to keep my encoding, but if I encode in the serializer, everything is double encoded. serialize: (value: string[]) => encodeURIComponent(value.join(',')),
// a,b results in a%252Cb and not a%2CbAm I missing something? |
|
@giannif You probably don't need to call Have you taken a look at the |
|
@franky47 I'm using let params = new URLSearchParams({lang: 'it,en'})
params.toString() // 'lang=it%2Cen'I tried a few combinations of parseAsArrayOf(
{
parse: (query: string) => decodeURIComponent(query),
serialize: (value: string) => encodeURIComponent(value),
},
','
).withDefault([])I might switch to |
|
Why not never encode in the first place? The built-in encoder is designed to only minimally encode and keep the URL nice-looking, so you could do this: parseAsArrayOf(parseAsString).withDefault([])For the record, URLSearchParams will decode any encoding on parsing, but will always encode when calling toString (which was the reason this issue was opened). The issue of adding some encoding in the serialize function is that any |
|
I love the minimal encoding, but when I create a link with If I always encode consistently then I can use I hope I described that clearly. It's not an urgent issue for me, I can use |
Sound like we could use a helper function to create links from state values that uses the serializers and follows the same URL rendering logic as the hooks. Would you mind sharing a bit more of your setup in a separate issue, so I can better understand your use-case, and replicate it in tests? |
Right now, all URLs are encoded in a way that make all "non-trivial" characters and arrays and objects look long, complex and quite frankly ugly.
It would be great to have the option opt out of the full and automatic encoding.
Which also means the developer is responsible to make sure the URL does not have any problematic characters.
Config example from
sindresorhus/query-string: This library has an option to setencode:false.I used this in a previous project (more…)
Example of how it looks right now:
/regionen/trto?map=10.6%2F53.6774%2F13.267&config=%21%28i~fromTo~a~~topics~…I would like the
mapto look as nice as on OSM https://www.openstreetmap.org/#map=10/53.6774/13.2670 for example :).Example of our previous URL…
Our previous URL was not pretty either, but still al lot nicer to look but especially shorter at then the encoded version: https://radverkehrsatlas.de/regionen/trto?lat=53.6774&lng=13.267&zoom=10.6&theme=fromTo&bg=default&config=!(i~fromTo~topics~!(i~shops~s~!(i~hidden~a~_F)(i~default~a))(i~education~s~!(i~hidden~a)(i~default~a~_F))(i~places~s~!(i~hidden~a~_F)(i~default~a)(i~circle~a~_F))(i~buildings~s~!(i~hidden~a)(i~default~a~_F))(i~landuse~s~!(i~hidden~a~_F)(i~default~a))(i~barriers~s~!(i~hidden~a~_F)(i~default~a))(i~boundaries~s~!(i~hidden~a)(i~default~a~_F)(i~level-8~a~_F)(i~level-9-10~a~_F)))(i~bikelanes~topics~!(i~bikelanes~s~!(i~hidden~a~_F)(i~default~a)(i~verification~a~_F)(i~completeness~a~_F))(i~bikelanesPresence*_legacy~s~!(i~hidden~a)(i~default~a~_F))(i~places~s~!(i~hidden~a~_F)(i~default~a)(i~circle~a~_F))(i~landuse~s~!(i~hidden~a)(i~default~a~_F)))(i~roadClassification~topics~!(i~roadClassification*_legacy~s~!(i~hidden~a~_F)(i~default~a)(i~oneway~a~_F))(i~bikelanes~s~!(i~hidden~a)(i~default~a~_F)(i~verification~a~_F)(i~completeness~a~_F))(i~maxspeed*_legacy~s~!(i~hidden~a)(i~default~a~_F)(i~details~a~_F))(i~surfaceQuality*_legacy~s~!(i~hidden~a)(i~default~a~_F)(i~bad~a~_F)(i~completeness~a~_F)(i~freshness~a~_F))(i~places~s~!(i~hidden~a~_F)(i~default~a)(i~circle~a~_F))(i~landuse~s~!(i~hidden~a)(i~default~a~_F)))(i~lit~topics~!(i~lit*_legacy~s~!(i~hidden~a~_F)(i~default~a)(i~completeness~a~_F)(i~verification~a~_F)(i~freshness~a~_F))(i~places~s~!(i~hidden~a)(i~default~a~_F)(i~circle~a~_F))(i~landuse~s~!(i~hidden~a)(i~default~a~_F)))~
Current implementation: Reading #343 (reply in thread) the encoding is done by calling
URLSearchParams.toStringwhich encodes everything withencodeURIComponent.Possible solution: https://stackoverflow.com/questions/71316183/urlsearchparams-set-without-uriencoding show possible solutions to decode the URL before returning it either fully or in parts.
The text was updated successfully, but these errors were encountered: