Unexpected untrack required to handle component status / type alerts in demo

[quentinderoubaix]

While migrating the demo website to Svelte 5, we wanted to update the ComponentTypeAlert.svelte and StatusAlert.svelte as follow:

import {page} from '$app/stores';

const regex = /\/(components|services)\/([^/]+)/;
let componentName = $derived($page.url.pathname.match(regex)?.[2]);

$effect(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   componentName;
   alert.api.open();
});

The goal was to track if we have navigated to a new component, and if the status / type alerts need to be shown, to open the alert again.

However, we encountered a weird behavior that can be reproduced by:

• navigate to Bootstrap Rating
• notice the standalone alert and close the it
• navigate to Bootstrap Slider
• notice the standalone alert and try to close it
• notice the alert is not closing !!!

We were able to fix this weird behavior by editing the code to:

import {page} from '$app/stores';
import {untrack} from 'svelte';

const regex = /\/(components|services)\/([^/]+)/;
let componentName = $derived($page.url.pathname.match(regex)?.[2]);

$effect(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   componentName;
   untrack(() => alert.api.open());
});

We don't believe there is a reason why we should need this untrack here, so we should open an issue on svelte, with a proper reproduction environment.
After investigation / discussion, this issue could then be closed and the untrack removed.