47ng / 47ng/nuqs

Add an option for opting out of pretty encoding

Open
#1,572 0 comments 4 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
10.8k
Forks
294
Avg merge
1d 16h
Merged PRs (30d)
21

Description

## Context

What's your version of `nuqs`?

```
"nuqs": "2.9.0"
```

What framework are you using?

- ❌ Next.js (app router)
- ❌ Next.js (pages router)
- ❌ React SPA (no router)
- ❌ Remix
- ✅ React Router
- ❌ Other (please specify)

Which version of your framework are you using?

```
"react-router-dom": "^6.29.0",
```

## Description

We recently ported our application to `nuqs`, thank you for the great library. After making the switch, some of our users started reporting problems when pasting URLs from the application into other tools, specifically Slack got a lot of attention. Basically because of the pretty encoding, Slack is mangling / misinterpreting the URLs and cutting them off. This seems particularly prevalent in our URLs which are using `parseAsJson`.

This is pretty much just another variation of #925 and #1114. While we're definitely filing a support ticket with Slack, we'd love if you could give users an option to opt out of the pretty encoding and instead fallback to something else, maybe based on `URLSearchParams` for example. It looks like you already had some idea of how this might work in https://github.com/47ng/nuqs/issues/1114#issuecomment-3246447657. Given an option like that, we'd probably turn it on just to try and ensure max compatibility with other tools (and avoid having to file support tickets all sorts of places to ask them to fix their URL parsing).

I filed this as a bug to match the other two issues, but I could definitely see how this might be considered a feature request instead so apologies if I got it wrong.

## Reproduction

Here's a really simple example based on our application where users have reported problems:

```
https://www.example.com/?queries=[{"query":"http_request_errors{service=\"foo\"}"}]
```

Which renders like this when pasted into Slack:

Image

Here's the same (uglier) URL but encoded with URLSearchParams:

```
https://www.example.com/?queries=%5B%7B%22query%22%3A%22http_request_errors%7Bservice%3D%22foo%22%7D%22%7D%5D
```

Which when pasted into Slack renders correctly:

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.