feat: navigate() fine-grain URL options

[brillout]

  import { navigate } from 'vike/client/router';
  import { useCallback } from 'react';
  import { usePageContext } from 'vike-react/usePageContext';

  export const useSearchParams = (): [
    URLSearchParams,
    (params: string[][] | Record<string, string> | string | URLSearchParams) => void,
  ] => {
    const pageContext = usePageContext();
    const { searchParams } = pageContext.urlParsed
    const setSearchParams = useCallback(
      (
        params: string[][] | Record<string, string> | string | URLSearchParams,
        options?: NavigateOptions,
      ) => {
        navigate({ search: new URLSearchParams(params), ...options})
      },
      [],
    );
    return [searchParams, setSearchParams];
  };

This is my favorite so far:

// URL current: /products?filter=cars#reviews
// URL next: /products#reviews
navigate('?')

// URL current: /products?filter=cars#reviews
// URL next: /products?filter=cars
navigate('#')

// URL current: /products?filter=cars#reviews
// URL next: /products
navigate('?#')

// URL current: /products?filter=cars&country=germany#reviews
// URL next: /products?filter=cars&sort=price#reviews
navigate({
  search: {
    // Add query
    sort: 'price',
    // Remove query
    country: null
  }
})

// URL current: /products?filter=cars&country=germany
// URL next: /products?filter=computers
navigate('?', {
  search: {
    // Add query
    filter: 'computers'
  }
})

Let me know if this covers your use cases and whether useSearchParams() has a feature not covered by this, and I'll implement it.