SvelteURL

import { SvelteURL } from 'svelte/reactivity';

<script>
  import { SvelteURL } from 'svelte/reactivity';

  const url = new SvelteURL('https://example.com/path?foo=bar');

  function updatePath(newPath) {
    url.pathname = newPath;
  }

  function updateQuery(key, value) {
    url.searchParams.set(key, value);
  }
</script>

<p>Current URL: {url.href}</p>
<p>Path: {url.pathname}</p>
<button onclick={() => updatePath('/new-path')}>Change path</button>
<button onclick={() => updateQuery('page', '2')}>Add query</button>

<script>
  import { SvelteURL } from 'svelte/reactivity';

  const apiUrl = new SvelteURL('https://api.example.com/data');

  function addFilter(key, value) {
    apiUrl.searchParams.set(key, value);
  }

  function removeFilter(key) {
    apiUrl.searchParams.delete(key);
  }

  async function fetchData() {
    const response = await fetch(apiUrl.href);
    return response.json();
  }
</script>

<div>
  <input onchange={(e) => addFilter('search', e.target.value)} placeholder="Search" />
  <input onchange={(e) => addFilter('category', e.target.value)} placeholder="Category" />
  <button onclick={fetchData}>Fetch</button>
</div>

<p>API URL: {apiUrl.href}</p>