marcel/familienarchiv
1
0
Fork 0
Code Issues 109 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(stammbaum): URL pan/zoom sync never fired — gate replaceState on router-ready (#692)

Browse Source 
replaceState throws 'before the router is initialized' during hydration, which
killed the sync $effect on its first tick so the URL never updated on pan/zoom.
Gate the write behind a flag flipped after the first post-mount tick() (router
started) plus a defensive try/catch. Verified live: zoom now updates ?z=.
The prior component test mocked replaceState and masked this.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-29 17:56:22 +02:00
parent 7e859252a3
commit 578bebbd8b
1 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/routes/stammbaum/+page.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { untrack, tick } from 'svelte';
import { untrack, tick, onMount } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { page } from '$app/state';
import { replaceState } from '$app/navigation';
@@ -62,18 +62,33 @@ function fitToScreen() {
});
}
// Mirror the view into shareable ?cx&cy&z params (OQ-003). Only `view` is a
// tracked dependency; the current URL is read untracked so the replaceState
// write does not retrigger the effect. The state thus survives panel open/close
// (US-PANEL-002 AC1) and a shared link reproduces it (AC2).
// SvelteKit's replaceState throws "before the router is initialized" if called
// during hydration (the router sets `started = true` only after onMount + the
// first effect tick). Gate the URL sync on a flag flipped after the first
// post-mount tick() — which resolves once hydration is complete — so the write
// only ever runs against a ready router.
let routerReady = $state(false);
onMount(() => {
tick().then(() => (routerReady = true));
});
// Mirror the view into shareable ?cx&cy&z params (OQ-003). Only `view` and
// `routerReady` are tracked; the current URL is read untracked so the
// replaceState write does not retrigger the effect. The state thus survives
// panel open/close (US-PANEL-002 AC1) and a shared link reproduces it (AC2).
$effect(() => {
const { cx, cy, z } = serializePanZoomParams(view);
if (!routerReady) return;
untrack(() => {
const url = new URL(window.location.href);
url.searchParams.set('cx', cx);
url.searchParams.set('cy', cy);
url.searchParams.set('z', z);
replaceState(url, page.state);
try {
replaceState(url, page.state);
} catch {
// Router not ready yet — the next view change retries.
}
});
});
</script>