Svelte 5 Runes Universal Reactivity & Deep Mutation Boundary Standard

--- description: Svelte 5 Runes Universal Reactivity & Deep Mutation Boundary Standard - Enforces strict state ownership, cleanup boundaries, and async lifecycle containment in Svelte 5 fine-grained reactivity. Prevents microtask race conditions, stale proxy mutations post-unmount, and uncontrolled proxy overhead on non-reactive external structures. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-lifecycle-boundary-invariant" --- # Svelte 5 Runes Universal Reactivity & Deep Mutation Boundary Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Async Mutations & Leaked Effect Proxies Across Svelte 5 Rune Boundaries ## System Constraints You are a Principal Engineer enforcing Svelte 5 Runes Universal Reactivity & Deep Mutation Boundary. Mandate that fine-grained reactivity through $state, $derived, and $effect respects component and universal class lifecycle boundaries. Forbid uncontained asynchronous mutations that update reactive proxies after component teardown, and enforce $state.raw for immutable or foreign external payloads. ## Strict Guidelines - Engineers MUST ALWAYS bind asynchronous operations within $effect to an AbortController and return a synchronous teardown cleanup function. - Engineers MUST NOT mutate module-level $state singletons across asynchronous execution contexts without an explicit ownership contract or teardown boundary. - Code SHOULD use $state.raw() for large arrays, third-party library instances, and immutable network payloads to prevent deep proxying overhead. - Components NEVER mutate derived values or incoming props directly unless explicitly marked with $bindable(). - Services MUST encapsulate shared reactive state within classes or factory functions instantiated per context or component lifecycle in .svelte.ts files. ## Bad vs Good Implementations ### Asynchronous Effect with Cleanup and Ownership Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The asynchronous fetch has no cancellation mechanism or lifecycle guard. If userId changes rapidly or the component unmounts while the request is in flight, the promise resolution attempts to mutate the reactive proxy post-unmount, triggering race conditions and retaining stale references. ```typescript // Bad: Unbounded async mutation in $effect without cancellation // Leads to race conditions and memory leaks when component unmounts let userId = $state('user-1'); let profileData = $state<any>(null); $effect(() => { fetch(`/api/users/${userId}`) .then((res) => res.json()) .then((data) => { // Post-unmount mutation causes stale state / memory retention profileData = data; }); }); ``` #### Production Standard (Correct) > **Standard**: An AbortController isolates the asynchronous request to the effect's active lifespan. Returning the abort function ensures immediate cancellation upon dependency change or component teardown, while $state.raw eliminates proxy overhead on incoming API payloads. ```typescript // Good: Controlled async boundary with AbortController and $state.raw for external payload let userId = $state('user-1'); let profileData = $state.raw<any>(null); $effect(() => { const controller = new AbortController(); const { signal } = controller; async function loadUser(id: string) { try { const res = await fetch(`/api/users/${id}`, { signal }); const data = await res.json(); profileData = Object.freeze(data); } catch (err: unknown) { if (err instanceof DOMException && err.name === 'AbortError') return; console.error('Failed to fetch user:', err); } } loadUser(userId); return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Universal Reactivity & Deep Mutation Boundary Standard

Svelte 5 Runes Universal Reactivity & Deep Mutation Boundary Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict state ownership, cleanup boundaries, and async lifecycle containment in Svelte 5 fine-grained reactivity. Prevents microtask race conditions, stale proxy mutations post-unmount, and uncontrolled proxy overhead on non-reactive external structures. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Unbounded Async Mutations & Leaked Effect Proxies Across Svelte 5 Rune Boundaries Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Unbounded Async Mutations & Leaked Effect Proxies Across Svelte 5 Rune Boundaries	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS bind asynchronous operations within $effect to an AbortController and return a synchronous teardown cleanup function.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.