fix(svelte): restore $effect runes, replacing incorrect onMount usage

onMount is Svelte 4 idiom. In Svelte 5 runes mode $effect is the correct
primitive for side effects and it provides additional behaviour onMount
cannot:

- IndexingProgress: $effect re-runs when jobId prop changes, restarting
  the polling loop for the new job. onMount would have missed prop changes.

- search/+page.svelte: $effect with untrack() reads page.url params once
  on mount without tracking the URL as a reactive dependency, preventing
  goto() calls inside searchDocs() from triggering an infinite re-run loop.
  Restores the page store import from $app/state.

- settings/+page.svelte: $effect with no reactive reads in the body runs
  exactly once on mount — equivalent to onMount but idiomatic Svelte 5.

All three verified with svelte-autofixer: no issues.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Giancarmine Salucci
2026-03-25 14:34:26 +01:00
parent fd46328a8b
commit 53b3d36ca3
3 changed files with 8 additions and 8 deletions

View File

@@ -1,12 +1,11 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
import type { IndexingJob } from '$lib/types'; import type { IndexingJob } from '$lib/types';
let { jobId }: { jobId: string } = $props(); let { jobId }: { jobId: string } = $props();
let job = $state<IndexingJob | null>(null); let job = $state<IndexingJob | null>(null);
onMount(() => { $effect(() => {
job = null; job = null;
let stopped = false; let stopped = false;

View File

@@ -1,11 +1,12 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/state';
import { untrack } from 'svelte';
import LibraryResult from '$lib/components/search/LibraryResult.svelte'; import LibraryResult from '$lib/components/search/LibraryResult.svelte';
import SnippetCard from '$lib/components/search/SnippetCard.svelte'; import SnippetCard from '$lib/components/search/SnippetCard.svelte';
import SearchInput from '$lib/components/search/SearchInput.svelte'; import SearchInput from '$lib/components/search/SearchInput.svelte';
import { copyToClipboard } from '$lib/utils/copy-to-clipboard'; import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
import type { LibrarySearchJsonResult, SnippetJson } from '$lib/server/api/formatters'; import type { LibrarySearchJsonResult, SnippetJson } from '$lib/server/api/formatters';
import { onMount } from 'svelte';
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// State // State
@@ -38,9 +39,10 @@
// Initialise from URL params on mount // Initialise from URL params on mount
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
onMount(() => { $effect(() => {
const libParam = new URL(window.location.href).searchParams.get('lib'); // untrack prevents page.url changes (e.g. from goto()) from re-running this effect
const qParam = new URL(window.location.href).searchParams.get('q'); const libParam = untrack(() => page.url.searchParams.get('lib'));
const qParam = untrack(() => page.url.searchParams.get('q'));
if (libParam) { if (libParam) {
selectedLibraryId = libParam; selectedLibraryId = libParam;

View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
import StatBadge from '$lib/components/StatBadge.svelte'; import StatBadge from '$lib/components/StatBadge.svelte';
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@@ -53,7 +52,7 @@
// Load current config + probe local provider on mount // Load current config + probe local provider on mount
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
onMount(() => { $effect(() => {
let cancelled = false; let cancelled = false;
(async () => { (async () => {