Skip to content

fix: resolve Svelte 5 reactivity warnings#2895

Merged
ChiragAgg5k merged 2 commits intomainfrom
chirag/fix-svelte5-reactivity-warnings
Apr 17, 2026
Merged

fix: resolve Svelte 5 reactivity warnings#2895
ChiragAgg5k merged 2 commits intomainfrom
chirag/fix-svelte5-reactivity-warnings

Conversation

@ChiragAgg5k
Copy link
Copy Markdown
Member

Summary

  • Eliminates all state_referenced_locally and non_reactive_update warnings surfaced by svelte-check and the build (svelte-check now reports 0 errors, 0 warnings on this branch).
  • Touches 46 Svelte files across tutorial layouts, markdoc nodes/tags, init ticket flows, blog, threads, integrations, theme provider, and shared UI primitives.

Approach

  • $derived wraps top-level reads of props / data so access happens in a reactive context (e.g. ticket-card, button, noise, Storage_Image, Heading, Link, Call_To_Action, Partner, blog page, changelog entry, threads, integrations, animated text, etc.).
  • untrack wraps one-time initializers where only the initial snapshot is meaningful (setContext payloads in the 17 tutorial + blog layouts, $state(...) seeded from props in scale / customize / map / threads, and the mid-CTA init block in Heading).
  • Tooltip switched melt-ui config options to getters so reactivity is preserved without firing the warning.
  • skills.svelteactivePill now declared with $state() (fixes non_reactive_update).
  • theme provider — removed prop-default cross-references and moved derived init values into untrack blocks.

The two remaining build-time messages (vite-plugin-svelte rolldown-vite experimental and optimizeDeps.esbuildOptions deprecated) originate from plugin internals and will resolve when vite-plugin-svelte lands full rolldown support — not addressable here.

Test plan

  • bun run check0 errors and 0 warnings
  • bun run format passes
  • bun run build completes without new warnings
  • Spot-check affected pages locally: any docs tutorial layout, /blog, /blog/[page], /changelog/entry/*, /init/tickets/[username], /init/tickets/customize, /integrations, /threads, /threads/[id]
  • Verify tooltips still open/close correctly (melt-ui getter change)
  • Verify theme provider still respects system theme and persists selection

Eliminates all state_referenced_locally and non_reactive_update warnings
surfaced by svelte-check. svelte-check now reports 0 errors, 0 warnings.

- Wrap top-level prop/data reads in $derived so access happens in a
  reactive context
- Wrap one-time initializer reads (setContext, $state initialization,
  side-effect blocks) in untrack to acknowledge intentional snapshots
- Switch melt-ui Tooltip config options to getters so reactivity is
  preserved without triggering the warning
- Declare bind:this target activePill with $state in skills.svelte
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 17, 2026

Greptile Summary

Mechanical Svelte 5 reactivity fix across 46 files. Props computed outside reactive contexts are wrapped in $derived; one-time initializers (setContext, initial state seeds, melt-ui config objects) are guarded with untrack; and melt-ui options are converted to getter accessors. The Array.sort mutation noted in the previous review is also addressed here by switching to toSorted.

Confidence Score: 5/5

Safe to merge — changes are mechanical reactivity fixes with no behavioural regressions identified.

All 46 changes consistently apply one of three well-understood patterns ($derived, untrack, or getter accessors). untrack is used exclusively for genuinely one-time values (event dates, initial state seeds, context setup), so no reactive updates are accidentally suppressed. The previous sort-mutation concern is resolved. No P0 or P1 findings remain.

No files require special attention.

Important Files Changed

Filename Overview
src/lib/components/Tooltip.svelte Converts melt-ui config options to getter accessors so reactive prop values are read lazily — correct approach for melt-ui.
src/lib/providers/theme/theme.svelte Removes prop-default cross-references and wraps initialization blocks in untrack; existing $effect blocks still reference forcedTheme prop directly so reactive behavior is preserved.
src/markdoc/nodes/Heading.svelte Mid-CTA init block wrapped in untrack; $state(renderMidCta) mutation inside untrack is valid since untrack only suppresses dependency tracking, not state writes.
src/markdoc/nodes/Link.svelte Correctly refactors doFollow href stripping into $derived chain; href is now a derived value rather than a mutated variable, improving correctness.
src/routes/(init)/init/tickets/[username]/+page.svelte shareTextOptions is wrapped in untrack but references $derived ticketUrl; texts are baked-in with the initial URL value which is intentional for a one-time random selection.
src/routes/blog/+layout.svelte setContext calls wrapped in untrack to suppress reactivity warning; semantics unchanged from before (context was always set once on mount).
src/routes/(marketing)/(components)/(ai-animations)/skills.svelte activePill switched to $state()! to fix non_reactive_update warning; the non-null assertion is a standard Svelte 5 pattern for DOM bindings that are populated before first use.
src/routes/threads/+page.svelte threads state seeded with untrack(() => data.threads); correct because the local state is independently mutated by search/filter handlers that fetch fresh data themselves.
src/routes/(marketing)/(components)/scale.svelte localStats and originalNumbers seeded with untrack; correct since they represent one-time animation start values, not reactive projections of stats.

Reviews (2): Last reviewed commit: "use toSorted to avoid mutating data.filt..." | Re-trigger Greptile

Comment thread src/routes/blog/[[page]]/+page.svelte
Array.prototype.sort mutates in place; switch to toSorted so the $derived
returns a new array instead of mutating the prop-derived source.
@ChiragAgg5k ChiragAgg5k merged commit 2a649c8 into main Apr 17, 2026
8 of 11 checks passed
@ChiragAgg5k ChiragAgg5k deleted the chirag/fix-svelte5-reactivity-warnings branch April 17, 2026 06:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants