fix: resolve Svelte 5.55 navigation state propagation failure#2864
Merged
sydseter merged 3 commits intoOWASP:masterfrom Apr 24, 2026
Merged
Conversation
sydseter
approved these changes
Apr 24, 2026
Collaborator
|
@Mahaboobunnisa123 Great! Looks good |
Collaborator
|
@Mahaboobunnisa123 Thank you for your help. |
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes a SvelteKit (adapter-static) navigation/state propagation regression affecting card browsing and mobile layout behavior by upgrading Svelte and adjusting client-side navigation/reactivity patterns.
Changes:
- Upgraded
svelteto5.55.4(and lockfile updates) to pick up the upstream fix. - Updated card navigation handling (
cardBrowser.svelte) to prevent double-navigation on click and rely ongoto()+ hrefs consistently. - Reworked several components away from
svelte/legacy run()and manual$stateupdates toward$derived-based reactivity; added cleanup for aMutationObserverin the root layout.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| cornucopia.owasp.org/src/routes/cards/+page.svelte | Updates card/mapping state derivation for the cards index page. |
| cornucopia.owasp.org/src/routes/+layout.svelte | Ensures MutationObserver is disconnected on navigation (avoids leaking observers/state). |
| cornucopia.owasp.org/src/lib/components/cardBrowser.svelte | Prevents click navigation from firing both default anchor navigation and JS navigation. |
| cornucopia.owasp.org/src/lib/components/cardFound.svelte | Adjusts component props usage and switches mapping/ASVS derivations to $derived. |
| cornucopia.owasp.org/src/lib/components/webAppCardTaxonomy.svelte | Removes svelte/legacy usage; derives mappings/attacks reactively. |
| cornucopia.owasp.org/src/lib/components/mobileAppCardTaxonomy.svelte | Removes svelte/legacy usage; derives mappings/attacks reactively. |
| cornucopia.owasp.org/src/lib/components/companionCardTaxonomy.svelte | Removes svelte/legacy usage; derives mappings/attacks reactively. |
| cornucopia.owasp.org/package.json | Bumps Svelte dependency version. |
| cornucopia.owasp.org/pnpm-lock.yaml | Lockfile updates for the Svelte upgrade and transitive deps. |
Files not reviewed (1)
- cornucopia.owasp.org/pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)
cornucopia.owasp.org/src/routes/+layout.svelte:36
- The
$effectnow checksif (document)and the file still importsbrowserwithout using it. Consider switching this guard toif (browser)(ortypeof document !== 'undefined') and dropping the unused import, so the intent is clear and the code won’t riskdocumentaccess in non-browser contexts.
// add styles back in non-CSP violating way
$effect(() => {
if (document) {
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
Comment on lines
+41
to
+43
| let mappings = $derived(controller.getCardMappings(card.id)); | ||
| let attacks: Attack[] = $derived(GetCardAttacks(card.id)); | ||
| const asvsVersion = $derived(card.version < '3.0' ? '4.0.3' : '5.0'); |
Comment on lines
+36
to
+41
| const KEYCODE_RIGHT = 39; | ||
| const KEYCODE_LEFT = 37; | ||
| const nextCard = cards.get(card.next); | ||
| const prevCard = cards.get(card.prevous); | ||
| if (event.keyCode == KEYCODE_RIGHT && nextCard) goto(getUrl(nextCard)); | ||
| if (event.keyCode == KEYCODE_LEFT && prevCard) goto(getUrl(prevCard)); |
Comment on lines
+44
to
+46
| let card: Card = $state(undefined as unknown as Card); | ||
| let mapping: any = $state([]); | ||
|
|
Comment on lines
+42
to
+62
| let version: string = $state(VERSION_WEBAPP); | ||
| let suit: string = $state(''); | ||
| let card: Card = $state(undefined as unknown as Card); | ||
| let mapping: any = $state([]); | ||
|
|
||
| $effect(() => { | ||
| const c = cards; | ||
| const v = version; | ||
| if (!c) return; | ||
| if (v === VERSION_WEBAPP) card = c.get('VE2') as Card; | ||
| if (v === VERSION_MOBILEAPP) card = c.get('PC2') as Card; | ||
| if (v === VERSION_COMPANION) card = c.get('AAI2') as Card; | ||
| }); | ||
|
|
||
| $effect(() => { | ||
| const c = card; | ||
| const md = mappingData; | ||
| const v = version; | ||
| if (!c || !md) return; | ||
| mapping = new MappingController(md.get(v)).getCardMappings(c.id); | ||
| }); |
Contributor
Author
Thank you for your kind words. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2838
The card-browser and mobile layout navigation was broken - clicking links would either skip multiple cards, lose the edition/version/language URL params after a few navigations, or sometimes end up on a 404 page entirely.
After digging into it, the root cause was a combination of things. Svelte 5.55.0–5.55.3 had a regression where reactive state stopped propagating correctly during client-side navigation, which is especially painful with adapter-static since there's no server fallback. Upgrading to 5.55.4 (which patches that regression) fixed the engine side.
Changes applied:
Testing results:
Resolved issue: #2838
Screenshots are attached for reference:
AI Tool Disclosure
Perplexity AI, Claude AIClaude Sonnet 4.6Used for guidance on implementation approach(to speedup) and debugging issues[errors]. All the final changes were written, reviewed, and adapted manually.Affirmation