Svelte 5 Runes Fine-Grained Reactive Effect Cleanup Isolation

--- description: Svelte 5 Runes Fine-Grained Reactive Effect Cleanup Isolation - Mandates strict synchronous teardown returns inside Svelte 5 `$effect` and `$effect.pre` blocks to prevent detached DOM and listener memory leaks in dynamic micro-frontend lifecycles. Forbids passing async executors directly to `$effect`, requiring inner asynchronous tasks to track and cancel in-flight work via explicit AbortController references. Enforces clean disposal of third-party observer and subscription instances before subsequent reactive triggers or component unmounting. globs: src/**/*.{svelte,svelte.ts,svelte.js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-effect-cleanup-isolation" --- # Svelte 5 Runes Fine-Grained Reactive Effect Cleanup Isolation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling Subscriptions and Leaked Async Tasks via Async $effect Callback Signatures ## System Constraints You are a Principal Engineer enforcing Svelte 5 Runes Fine-Grained Reactive Effect Cleanup Isolation. Mandate invariants that eliminate detached event listeners, dangling WebSocket/EventSource subscriptions, and zombie asynchronous micro-tasks in multi-tenant and micro-frontend environments where components undergo rapid mount/unmount cycles. ## Strict Guidelines - Engineers MUST ALWAYS return a synchronous cleanup function from `$effect` whenever external side-effects (e.g., `addEventListener`, `IntersectionObserver`, `setInterval`, WebSocket subscriptions) are established. - Engineers MUST NOT pass an `async` function directly to `$effect()` or `$effect.pre()`, because async functions return a `Promise<void>` instead of a synchronous teardown function, permanently bypassing Svelte 5 effect disposal. - Code SHOULD declare and instantiate an `AbortController` within the synchronous `$effect` scope, passing its `signal` to inner asynchronous routines, and invoking `abort()` in the returned teardown closure. - Components NEVER rely on Svelte component unmount alone to clean up ambient window listeners or cross-boundary micro-frontend event buses; explicit teardowns inside the specific runes effect boundary are mandatory. - Code MUST avoid untracked nested `$effect.root` calls inside dynamic component logic unless manual disposal handlers are captured and exposed via explicit teardown lifecycles. ## Bad vs Good Implementations ### Async Direct Callback Anti-Pattern vs. Isolated AbortController Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Async functions implicitly return a Promise instead of a synchronous cleanup function. The event listener is never removed, and in-flight fetch requests continue running after the effect re-runs or the component is torn down. ```typescript import { untrack } from 'svelte'; // BAD: Passing an async function directly into $effect creates an unhandled Promise. // Svelte 5 ignores the return value, omitting teardown and causing leaked fetch calls // and dangling global window event listeners during rapid micro-frontend unmounting. export function useEventStream(endpoint: () => string) { $effect(async () => { const url = endpoint(); window.addEventListener('resize', () => console.log('Resized')); const response = await fetch(url); const data = await response.json(); console.log('Stream payload:', data); }); } ``` #### Production Standard (Correct) > **Standard**: The effect callback is synchronous and returns an explicit teardown function. The controller aborts pending network tasks, and window event listeners are safely removed before re-execution or unmount. ```typescript import { untrack } from 'svelte'; // GOOD: Synchronous $effect signature returning an explicit cleanup closure. // In-flight network tasks are cancelled via AbortController, and external listeners are purged. export function useEventStream(endpoint: () => string) { $effect(() => { const url = endpoint(); const controller = new AbortController(); const handleResize = () => console.log('Resized'); window.addEventListener('resize', handleResize); (async () => { try { const response = await fetch(url, { signal: controller.signal }); const data = await response.json(); console.log('Stream payload:', data); } catch (err: unknown) { if (err instanceof DOMException && err.name === 'AbortError') return; console.error('Fetch error:', err); } })(); return () => { controller.abort(); window.removeEventListener('resize', handleResize); }; }); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Fine-Grained Reactive Effect Cleanup Isolation

Svelte 5 Runes Fine-Grained Reactive Effect Cleanup Isolation defines an industrial-grade behavioral standard for frontend engineering. Mandates strict synchronous teardown returns inside Svelte 5 `$effect` and `$effect.pre` blocks to prevent detached DOM and listener memory leaks in dynamic micro-frontend lifecycles. Forbids passing async executors directly to `$effect`, requiring inner asynchronous tasks to track and cancel in-flight work via explicit AbortController references. Enforces clean disposal of third-party observer and subscription instances before subsequent reactive triggers or component unmounting. 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: Dangling Subscriptions and Leaked Async Tasks via Async $effect Callback Signatures 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	Dangling Subscriptions and Leaked Async Tasks via Async $effect Callback Signatures	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 return a synchronous cleanup function from `$effect` whenever external side-effects (e.g., `addEventListener`, `IntersectionObserver`, `setInterval`, WebSocket subscriptions) are established.

Engineers MUST ALWAYS return a synchronous cleanup function from `$effect` whenever external side-effects (e.g., `addEventListener`, `IntersectionObserver`, `setInterval`, WebSocket subscriptions) are established.

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.