In the previous lesson, you learned how to use the $effect rune in Svelte to manage reactive side effects, such as timers and DOM updates. Now, we’ll explore another powerful feature of Svelte: reactive built-ins. These are special objects like SvelteDate and SvelteURL that are designed to work seamlessly with Svelte’s reactivity system. Unlike regular variables, these built-ins don’t require $stateto be reactive. Instead, they are inherently reactive, making them ideal for handling dynamic data like dates and URLs.

In this lesson, you’ll learn how to use SvelteDate to create a reactive clock and SvelteURL to manage and update query parameters dynamically. By the end, you’ll be able to build applications that respond to changes in dates and URLs without writing complex reactivity logic. Let’s dive in!

SvelteDate is a reactive version of JavaScript’s built-in Date object. It allows you to work with dates in a way that automatically updates the UI whenever the date changes. Unlike regular Date objects, SvelteDate is mutable, meaning you can update its value directly without needing to reassign it.

Here’s an example of how to use SvelteDate to display the current time:

svelte
Copy to clipboard
1<script>
2    import { SvelteDate } from 'svelte/reactivity';
3
4    let currentDate = new SvelteDate();
5
6    $effect(() => {
7        const interval = setInterval(() => {
8            currentDate.setTime(Date.now()); // Update the existing instance
9        }, 1000);
10
11        return () => clearInterval(interval);
12    });
13</script>
14
15<h3>Current Time</h3>
16<p>{currentDate.toLocaleTimeString()}</p>

In this example, we create a SvelteDate instance called currentDate. The $effect rune sets up an interval that updates currentDate every second. Because SvelteDate is reactive, the UI automatically reflects the updated time without requiring additional logic. The cleanup function ensures the interval is cleared when the component is destroyed, preventing memory leaks.

When you run this code, you’ll see the current time displayed, updating every second.

SvelteURL is a reactive version of JavaScript’s URL object. It allows you to work with URLs in a way that automatically updates the UI whenever the URL changes. Like SvelteDate, SvelteURL is mutable, so you can update its properties directly.

Here’s an example of how to use SvelteURL to manage and update query parameters:

svelte
Copy to clipboard
1<script>
2    import { SvelteURL } from 'svelte/reactivity';
3
4    let url = new SvelteURL('https://example.com?foo=1&bar=2');
5
6    function updateQueryParam() {
7        url.searchParams.set('foo', String(Number(url.searchParams.get('foo')) + 1));
8    }
9</script>
10
11<h3>Reactive URL</h3>
12<p><strong>Current URL:</strong> {url.href}</p>
13<button onclick={updateQueryParam}>Increment 'foo' Query Param</button>

In this example, we create a SvelteURL instance called url with an initial query string. The updateQueryParam function increments the value of the foo query parameter by 1. Because SvelteURL is reactive, the UI automatically updates to reflect the new URL whenever the query parameter changes.

When you run this code, you’ll see the current URL displayed, and clicking the button will increment the foo query parameter.

Now, let’s combine what we’ve learned into a single example that uses both SvelteDate and SvelteURL:

svelte
Copy to clipboard
1<script>
2    import { SvelteDate, SvelteURL } from 'svelte/reactivity';
3
4    let currentDate = new SvelteDate();
5
6    $effect(() => {
7        const interval = setInterval(() => {
8            currentDate.setTime(Date.now());
9        }, 1000);
10
11        return () => clearInterval(interval);
12    });
13
14    let url = new SvelteURL('https://example.com?foo=1&bar=2');
15
16    function updateQueryParam() {
17        url.searchParams.set('foo', String(Number(url.searchParams.get('foo')) + 1));
18    }
19</script>
20
21<h3>Current Time</h3>
22<p>{currentDate.toLocaleTimeString()}</p>
23
24<h3>Reactive URL</h3>
25<p><strong>Current URL:</strong> {url.href}</p>
26<button onclick={updateQueryParam}>Increment 'foo' Query Param</button>

In this example, we use SvelteDate to display the current time and SvelteURL to manage a reactive URL. The $effect rune ensures the time updates every second, and the updateQueryParam function allows the user to increment the foo query parameter. Both components work together to create a dynamic and reactive UI.

When you run this code, you’ll see the current time updating every second and the URL updating whenever the button is clicked.

In this lesson, you learned how to use Svelte’s reactive built-ins, SvelteDate and SvelteURL, to create dynamic and reactive applications. You saw how SvelteDate can be used to display and update the current time, and how SvelteURL can manage and update query parameters. You also revisited the $effect rune to manage side effects like timers.

In the practice exercises, you’ll:

1. Experiment with SvelteDate to create a reactive clock.
2. Use SvelteURL to build a dynamic URL manager.
3. Combine these concepts to create a more complex reactive application.

Take your time to explore and experiment with the code. Understanding reactive built-ins is a key step in mastering reactivity and state management in Svelte. Great job, and keep up the good work!