Svelte 5 Runes Fine-Grained Reactive Isolation and Asynchronous Boundary Standard

--- description: Svelte 5 Runes Fine-Grained Reactive Isolation and Asynchronous Boundary Standard - Enforces strict isolation and boundary guarantees when sharing signal-driven state across asynchronous pipelines and federated micro-frontends in Svelte 5. Prevents broken dependency tracking caused by async context degradation and eliminates memory leaks or state desynchronization from leaking reactive proxy objects across foreign domains. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-reactive-isolation-standard-svelte-5-runes-f-955" --- # Svelte 5 Runes Fine-Grained Reactive Isolation and Asynchronous Boundary Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Leaking Mutable Reactive Proxies Across Micro-Frontend Boundaries and Tracking Across Async Await Yields ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Fine-Grained Reactive Isolation Standard. Svelte 5 signals track dependencies synchronously; any signal read after an 'await' boundary is untracked, and passing '$state' proxies across micro-frontend boundaries causes proxy poisoning, memory leaks, and silent synchronization failures. You must enforce explicit snapshotting via '$state.snapshot()', AbortController cleanup in '$effect', and shallow reactivity via '$state.raw()' for external federated state. ## Strict Guidelines - Engineers MUST ALWAYS invoke '$state.snapshot()' when serializing or exposing state payloads to foreign micro-frontends, event buses, or asynchronous workers to prevent proxy mutation leaks. - Engineers MUST NOT read reactive rune state ('$state', '$derived') following an 'await' expression inside an '$effect' or function without capturing the synchronous value prior to the yield, as Svelte 5 tracking context terminates at the first suspension point. - Engineers MUST ALWAYS manage asynchronous tasks inside '$effect' with an 'AbortController' and return an explicit cleanup function to abort stale in-flight invocations. - Code MUST use '$state.raw()' when ingesting external foreign objects, non-reactive configurations, or third-party SDK clients from sibling micro-frontends to prevent deep proxying overhead and prototype pollution. - Components NEVER bind two-way '$bindable' runes across federated micro-frontend entrypoints; communication across architectural boundaries MUST occur via unidirectional event emissions and immutable snapshot payloads. ## Bad vs Good Implementations ### Asynchronous Signal Synchronization Across Micro-Frontend Boundaries #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Svelte 5 runes synchronously track signal dependencies. Executing the fetch in an untracked async wrapper without an AbortController causes race conditions. Passing the raw 'query' proxy to the federated event bus causes state desynchronization and memory leaks between separate micro-frontend host contexts. ```typescript import { federatedEventBus } from '@org/mfe-core'; let query = $state({ term: '', filters: { activeOnly: true } }); let results = $state<string[]>([]); $effect(() => { // Anti-Pattern: Reading signals across await drops tracking; passing raw proxy leaks reactive proxy internals (async () => { const response = await fetch(`/api/search?q=${query.term}`); const data = await response.json(); results = data.items; // Leaking mutable reactive proxy across federated micro-frontend boundary federatedEventBus.publish('search:updated', query); })(); }); ``` #### Production Standard (Correct) > **Standard**: All reactive dependencies are captured synchronously before the asynchronous boundary. '$state.snapshot()' guarantees that the federated event payload is detached from the local reactive proxy graph. An AbortController ensures in-flight requests are cancelled when signals change before resolution. ```typescript import { federatedEventBus } from '@org/mfe-core'; interface SearchQuery { term: string; filters: { activeOnly: boolean }; } let query = $state<SearchQuery>({ term: '', filters: { activeOnly: true } }); let results = $state.raw<string[]>([]); $effect(() => { // 1. Synchronously read tracked signals and isolate snapshot prior to async yield const currentTerm = query.term; const payload = $state.snapshot(query); const controller = new AbortController(); async function executeSearch() { try { const response = await fetch(`/api/search?q=${encodeURIComponent(currentTerm)}`, { signal: controller.signal }); const data = await response.json(); results = data.items; // 2. Dispatch pure, non-reactive immutable snapshot across MFE boundary federatedEventBus.publish('search:updated', payload); } catch (err: unknown) { if ((err as Error).name !== 'AbortError') { throw err; } } } void executeSearch(); // 3. Return explicit teardown to abort stale network and async boundary tasks return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Fine-Grained Reactive Isolation and Asynchronous Boundary Standard

Svelte 5 Runes Fine-Grained Reactive Isolation and Asynchronous Boundary Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict isolation and boundary guarantees when sharing signal-driven state across asynchronous pipelines and federated micro-frontends in Svelte 5. Prevents broken dependency tracking caused by async context degradation and eliminates memory leaks or state desynchronization from leaking reactive proxy objects across foreign domains. 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: Leaking Mutable Reactive Proxies Across Micro-Frontend Boundaries and Tracking Across Async Await Yields 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	Leaking Mutable Reactive Proxies Across Micro-Frontend Boundaries and Tracking Across Async Await Yields	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 invoke '$state.snapshot()' when serializing or exposing state payloads to foreign micro-frontends, event buses, or asynchronous workers to prevent proxy mutation leaks.

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.