Svelte 5 Runes Effect Ownership and Resource Teardown Standard

--- description: Svelte 5 Runes Effect Ownership and Resource Teardown Standard - Enforces deterministic lifecycle management and lexical root ownership for Svelte 5 runes ($effect, $effect.pre, $effect.root) in high-churn environments and micro-frontends. Prevents orphaned reactive loops, memory leaks, and dangling cross-application subscriptions caused by creating effects outside component initialization contexts or omitting explicit teardown handlers. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-effect-ownership-and-teardown" --- # Svelte 5 Runes Effect Ownership and Resource Teardown Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Instantiating unbounded effects in asynchronous callbacks or omitting explicit teardown for unmanaged effect roots ## System Constraints You are a Principal Software Architect enforcing deterministic reactive boundaries in Svelte 5. You must reject any code that instantiates raw $effect runes inside detached async contexts, event handlers, or class methods without explicit $effect.root encapsulation. Mandate strict cleanup return contracts on all subscriptions, listeners, and intervals within effect bodies to ensure flawless micro-frontend unmounting. ## Strict Guidelines - Engineers MUST ALWAYS return a teardown function from an $effect when establishing DOM event listeners, WebSockets, workers, or timers. - Engineers MUST NOT invoke $effect() or $effect.pre() inside asynchronous promises, setTimeout callbacks, or non-reactive utility functions without $effect.root(). - Code SHOULD encapsulate external non-Svelte lifecycles (e.g., third-party DOM widgets, micro-frontend message buses) inside an $effect.root scope and assign the returned teardown function directly to a disposable holder. - Services MUST explicitly call the cleanup function returned by $effect.root() when destroying stores, singleton controllers, or detached micro-frontend containers. - Components NEVER use $effect to compute synchronous derived state; $derived or $derived.by MUST be used instead to avoid cascade re-render storms. ## Bad vs Good Implementations ### Managing Micro-Frontend Bus Subscriptions with $effect and Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Calling $effect() inside an instance method that may execute outside component initialization creates an unlinked reactive context. Failing to return a cleanup callback leaves the event listener pinned to the EventTarget, leaking memory when the consuming micro-frontend unmounts. ```typescript // BAD: Dangling subscription across micro-frontend boundaries // Missing return teardown and spawning nested effects inside async handlers export class EventBusBridge { private bus: EventTarget; constructor(bus: EventTarget) { this.bus = bus; } public watchChannel(channelName: string, onMessage: (data: unknown) => void) { // Anti-pattern: Creating $effect inside arbitrary method without root ownership // and neglecting to clean up the underlying DOM/bus listener on unmount. $effect(() => { const handler = (evt: Event) => onMessage((evt as CustomEvent).detail); this.bus.addEventListener(channelName, handler); // Memory Leak: No cleanup returned! }); } } ``` #### Production Standard (Correct) > **Standard**: Wrapping external lifecycle subscriptions inside $effect.root creates an isolated reactive tree that does not rely on component-level lexical anchoring. Returning an explicit cleanup function from both the inner $effect and the $effect.root guarantees complete teardown upon unmounting. ```typescript // GOOD: Lexical effect ownership via $effect.root and guaranteed disposal export class EventBusBridge { private bus: EventTarget; private disposers: Array<() => void> = []; constructor(bus: EventTarget) { this.bus = bus; } public watchChannel(channelName: string, onMessage: (data: unknown) => void): () => void { // Invariant: Isolate manual reactive lifetimes via $effect.root const cleanupRoot = $effect.root(() => { $effect(() => { const handler = (evt: Event) => onMessage((evt as CustomEvent).detail); this.bus.addEventListener(channelName, handler); return () => { this.bus.removeEventListener(channelName, handler); }; }); }); const dispose = () => { cleanupRoot(); }; this.disposers.push(dispose); return dispose; } public destroy(): void { for (const dispose of this.disposers) { dispose(); } this.disposers = []; } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Effect Ownership and Resource Teardown Standard

Svelte 5 Runes Effect Ownership and Resource Teardown Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic lifecycle management and lexical root ownership for Svelte 5 runes ($effect, $effect.pre, $effect.root) in high-churn environments and micro-frontends. Prevents orphaned reactive loops, memory leaks, and dangling cross-application subscriptions caused by creating effects outside component initialization contexts or omitting explicit teardown handlers. 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: Instantiating unbounded effects in asynchronous callbacks or omitting explicit teardown for unmanaged effect roots 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	Instantiating unbounded effects in asynchronous callbacks or omitting explicit teardown for unmanaged effect roots	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 teardown function from an $effect when establishing DOM event listeners, WebSockets, workers, or timers.

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.