Svelte 5 Runes Async Reactive Graph Lifecycle Isolation in Hybrid SSR Hydration

--- description: Svelte 5 Runes Async Reactive Graph Lifecycle Isolation in Hybrid SSR Hydration - Mandates strict boundary isolation for asynchronous microfrontend state transitions within Svelte 5's signal-based rune reactivity graph. Precludes unbounded circular dependency loops, untracked cross-boundary signal subscriptions, and SSR hydration memory leaks by requiring explicit teardown signals and decoupled async state boundaries. 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/svelte5-runes-async-reactive-graph-isolation" --- # Svelte 5 Runes Async Reactive Graph Lifecycle Isolation in Hybrid SSR Hydration > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Cross-Boundary Reactive Loops via Implicit Untracked Async Rune Subscription During Hydration ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Async Reactive Graph Lifecycle Isolation. Mandate invariants that prevent cross-boundary reactive cascade loops, enforce strict AbortController disposal on async signal effects, and quarantine cross-cutting microfrontend bus subscriptions within explicit lifecycle boundaries during hybrid SSR hydration. ## Strict Guidelines - Engineers MUST ALWAYS isolate asynchronous operations within $effect by passing an AbortSignal and returning an explicit cleanup function that cancels pending microtasks. - Engineers MUST NOT read or mutate foreign microfrontend reactive rune states directly inside synchronous $derived expressions without untrack() or dedicated event mediation. - Components NEVER bridge cross-microfrontend bus state using unbounded $effect.root without storing its disposal handle and executing teardown on component unmount. - Engineers MUST explicitly guard against hydration mismatch loops by checking untrack() when synchronizing server-seeded state into client-side dynamic reactive stores. - Shared microfrontend communication channels MUST use deterministic event emitters or explicit message ports rather than mutating shared deep rune proxy state objects directly. ## Bad vs Good Implementations ### Cross-Microfrontend Async Hydration and Cleanup Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Attaches an un-disposed listener to an external microfrontend bus within an unmanaged $effect. If an external consumer reacts to syncCounter or triggers duplicate payloads during SSR hydration, this triggers an infinite reactive update cascade and permanently retains un-garbage-collected microfrontend instances. ```typescript // BAD: Direct mutation inside untracked async effect creates unbounded cascade // and leaks cross-microfrontend event listeners during SSR hydration import { microfrontendEventBus } from '@org/mfe-bus'; export function useSharedBridge(mfeKey: string) { let mfeData = $state<any>(null); let syncCounter = $state(0); // CRITICAL BUG: Leaks on hydration, recursive updates trigger infinite loop $effect(() => { microfrontendEventBus.on(`data:${mfeKey}`, async (payload) => { // Async closure captures and mutates rune inside untracked listener mfeData = payload; syncCounter++; // Circular dependency if external MFE subscribes to counter await fetch(`/api/sync/${mfeKey}`, { method: 'POST', body: JSON.stringify(payload) }); }); }); return { get data() { return mfeData; } }; } ``` #### Production Standard (Correct) > **Standard**: Uses AbortController alongside untrack() inside the Svelte 5 $effect cleanup boundary. Aborts pending fetch operations, removes the event listener upon microfrontend boundary disposal, and isolates reactive updates from downstream signal dependencies. ```typescript // GOOD: Isolated lifecycle boundary with explicit AbortSignal, untrack, and teardown import { untrack } from 'svelte'; import { microfrontendEventBus } from '@org/mfe-bus'; interface BridgeState<T> { readonly data: T | null; readonly error: Error | null; } export function useSharedBridge<T>(mfeKey: string): BridgeState<T> { let mfeData = $state<T | null>(null); let errorState = $state<Error | null>(null); $effect(() => { const controller = new AbortController(); const { signal } = controller; const handleMessage = (payload: T) => { // Untrack mutations to prevent registering dependency on downstream consumers untrack(() => { mfeData = payload; }); fetch(`/api/sync/${mfeKey}`, { method: 'POST', body: JSON.stringify(payload), signal }).catch((err: unknown) => { if (err instanceof Error && err.name === 'AbortError') return; untrack(() => { errorState = err instanceof Error ? err : new Error(String(err)); }); }); }; const unsubscribe = microfrontendEventBus.subscribe(`data:${mfeKey}`, handleMessage); return () => { controller.abort(); unsubscribe(); }; }); return { get data() { return mfeData; }, get error() { return errorState; } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Async Reactive Graph Lifecycle Isolation in Hybrid SSR Hydration

Svelte 5 Runes Async Reactive Graph Lifecycle Isolation in Hybrid SSR Hydration defines an industrial-grade behavioral standard for frontend engineering. Mandates strict boundary isolation for asynchronous microfrontend state transitions within Svelte 5's signal-based rune reactivity graph. Precludes unbounded circular dependency loops, untracked cross-boundary signal subscriptions, and SSR hydration memory leaks by requiring explicit teardown signals and decoupled async state boundaries. 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 Cross-Boundary Reactive Loops via Implicit Untracked Async Rune Subscription During Hydration 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 Cross-Boundary Reactive Loops via Implicit Untracked Async Rune Subscription During Hydration	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 isolate asynchronous operations within $effect by passing an AbortSignal and returning an explicit cleanup function that cancels pending microtasks.

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.