Svelte 5 Polymorphic Snippet Isolation and Cross-Root Context Bridging

--- description: Svelte 5 Polymorphic Snippet Isolation and Cross-Root Context Bridging - Mandates explicit context isolation, type-safe contract bridging, and deterministic lifecycle teardown when passing Svelte 5 polymorphic snippets across independent root mounts or micro-frontend boundaries. Prevents detached reactive tree memory leaks and ambient context lookup failures across disparate application runtimes. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-snippet-cross-root-context-boundary" --- # Svelte 5 Polymorphic Snippet Isolation and Cross-Root Context Bridging > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Direct Cross-Root Snippet Execution Without Context Bridging and Lifecycle Teardown ## System Constraints You are a Principal Engineer enforcing Svelte 5 Snippets Cross-Root Context Propagation Boundary. Svelte 5 Snippets encapsulate their lexical scope and the context graph of their parent root. When rendering dynamic polymorphic snippets across disparate micro-frontends or separate mount() instances, you must enforce explicit context forwarding, strict typing, and lifecycle cleanup to prevent silent context detachment and severe memory leaks. ## Strict Guidelines - Engineers MUST ALWAYS bridge contextual dependencies explicitly via typed data contracts rather than relying on ambient getContext() across micro-frontend mount boundaries. - Engineers MUST wrap cross-root dynamic snippets in explicit teardown boundaries using $effect to dereference captured reactive closures when the host unmounts. - Engineers MUST NOT export or invoke raw Svelte 5 Snippet instances across isolated mount() boundaries without passing the origin root's context snapshot explicitly as an argument. - Code SHOULD enforce strict polymorphic snippet typings using Svelte 5's Snippet<[TPayload, TContextSnapshot]> to guarantee context contracts at compile time. - Components NEVER execute foreign root snippets within detached asynchronous microtasks that bypass the host root's active reactive owner and lifecycle tracking. ## Bad vs Good Implementations ### Cross-Root Snippet Invocation without Context Bridge (Leak and Missing Context) #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly passing and executing a raw Snippet closure across micro-frontend boundaries retains the entire lexical closure and reactive context of the originating root, causing memory leaks and failing to resolve required ambient contexts in the destination host. ```typescript import type { Snippet } from 'svelte'; import { getContext } from 'svelte'; // Bad: Passing snippet directly to an isolated micro-frontend root mount // The snippet relies on ambient getContext('THEME_KEY') from Root A, // which resolves to undefined or retains Root A's entire scope in Root B. export function mountMicroFrontend(target: HTMLElement, foreignSnippet: Snippet<[string]>) { const globalTheme = getContext('THEME_KEY'); // Fails or captures un-isolated scope // Storing snippet in global registry without disposal tracking causes memory leaks window.__MFE_REGISTRY__.activeSnippet = foreignSnippet; } ``` #### Production Standard (Correct) > **Standard**: By explicitly boxing the snippet arguments into a BridgeContract and establishing a deterministic lifecycle disposal mechanism, context is safely propagated without ambient dependency failures, and detached DOM roots can be fully garbage-collected. ```typescript import type { Snippet } from 'svelte'; import { getContext, setContext } from 'svelte'; export interface BridgeContract<TData, TContext> { readonly payload: TData; readonly contextSnapshot: TContext; } export type SafeCrossRootSnippet<TData, TContext> = Snippet<[BridgeContract<TData, TContext>]>; export function createSnippetBoundary<TData, TContext>( snippet: SafeCrossRootSnippet<TData, TContext>, getContextSnapshot: () => TContext ) { let activeSnippet: SafeCrossRootSnippet<TData, TContext> | null = snippet; return { renderContract(data: TData): BridgeContract<TData, TContext> { if (!activeSnippet) { throw new Error('Attempted to render disposed cross-root snippet boundary.'); } return { payload: data, contextSnapshot: getContextSnapshot() }; }, dispose(): void { // Explicitly detach snippet reference to release closure memory activeSnippet = null; } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Polymorphic Snippet Isolation and Cross-Root Context Bridging

Svelte 5 Polymorphic Snippet Isolation and Cross-Root Context Bridging defines an industrial-grade behavioral standard for frontend engineering. Mandates explicit context isolation, type-safe contract bridging, and deterministic lifecycle teardown when passing Svelte 5 polymorphic snippets across independent root mounts or micro-frontend boundaries. Prevents detached reactive tree memory leaks and ambient context lookup failures across disparate application runtimes. 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: Direct Cross-Root Snippet Execution Without Context Bridging and Lifecycle Teardown 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	Direct Cross-Root Snippet Execution Without Context Bridging and Lifecycle Teardown	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 bridge contextual dependencies explicitly via typed data contracts rather than relying on ambient getContext() across micro-frontend mount boundaries.

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.