Skip to content

feat(useUrlSearchParams): Add a stringify option for users to provide stringify logic #4773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

mingXta
Copy link

@mingXta mingXta commented May 24, 2025

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

Description

resolves #4772

feat(useUrlSearchParams): Optimize URL empty parameter display format

Add stripEqualSign option to useUrlSearchParams. When this option is set to true, empty parameters in the URL will be displayed as ?foo&bar instead of ?foo=&bar=

export interface UseUrlSearchParamsOptions 
extends ConfigurableWindow {
  /**
   * Remove equal sign for empty parameters
   * When set to true, empty parameters will 
   be displayed as '?foo&bar' instead of '?
   foo=&bar='
   *
   * @default false
   */
  stripEqualSign?: boolean
}

export function useUrlSearchParams<T extends 
Record<string, any>>(
  mode: LocationQueryMode = 'history',
  options: UseUrlSearchParamsOptions = {},
) {
  const { stripEqualSign = false } = options
  // ... existing code ...
  function constructQuery(params: 
  URLSearchParams) {
    const stringified = stripEqualSign ? 
    params.toString().replace(/=(&|$)/g, '$1') 
    : params.toString()
    // ... existing code ...
  }
  // ... existing code ...
}

test cases

it('strips equal sign for empty params when stripEqualSign is true', async () => {
        const params = useUrlSearchParams(mode, { stripEqualSign: true })
        params.foo = ''
        params.bar = ''
        await nextTick()
        switch (mode) {
          case 'history':
            expect(window.history.replaceState).toBeCalledWith(null, '', '/?foo&bar')
            break
          case 'hash':
            expect(window.history.replaceState).toBeCalledWith(null, '', '/#?foo&bar')
            break
          case 'hash-params':
            expect(window.history.replaceState).toBeCalledWith(null, '', '/#foo&bar')
            break
        }
      })

Additional context

@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. enhancement New feature or request labels May 24, 2025
Co-authored-by: Robin <robin.kehl@singular-it.de>
OrbisK
OrbisK previously approved these changes May 25, 2025
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label May 25, 2025
@@ -78,7 +86,7 @@ export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
}

function constructQuery(params: URLSearchParams) {
const stringified = params.toString()
const stringified = stripEqualSign ? params.toString().replace(/=(&|$)/g, '$1') : params.toString()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a simple replace with a regex can be dangerous.

I'd suggest exposing a hook for users to provide stringify logic themselves if needed

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a good suggestion that I add an option called stringify function.

@dosubot dosubot bot removed the lgtm This PR has been approved by a maintainer label May 27, 2025
@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. and removed size:S This PR changes 10-29 lines, ignoring generated files. labels May 28, 2025
Copy link
Collaborator

@OrbisK OrbisK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good overall.

Maybe we can add one example to the docs 👍🏽

@@ -78,8 +87,7 @@ export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
}

function constructQuery(params: URLSearchParams) {
const stringified = params.toString()

const stringified = stringify ? stringify(params) : params.toString()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tiny change but if we

Suggested change
const stringified = stringify ? stringify(params) : params.toString()
const stringified = stringify(params)

and

const {
    initialValue = {},
    removeNullishValues = true,
    removeFalsyValues = false,
    write: enableWrite = true,
    writeMode = 'replace',
    window = defaultWindow!,
    stringify = (params) => params.toString(),
  } = options

The default is much more obvious.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it looks better this way, I will modify them and add doc.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@OrbisK I've made the changes based on your suggestions and added doc. I'm happy to make further adjustments if needed. Thank you!

@mingXta mingXta changed the title feat(useUrlSearchParams): Add stripEqualSign option to useUrlSearchParams feat(useUrlSearchParams): Add a stringify option for users to provide stringify logic May 29, 2025
Copy link
Collaborator

@OrbisK OrbisK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you 💚

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Jun 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request lgtm This PR has been approved by a maintainer size:M This PR changes 30-99 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useUrlSearchParams | Write empty values to URL without equal sign
3 participants