Construyendo sobre los Fundamentos

En el artículo anterior, aprendiste los fundamentos: por qué el contexto plano no es reactivo, cómo $state con objetos lo soluciona, y la regla crítica de "mutar, no reasignar". Ahora puedes crear contexto que se actualiza en todas partes.

Pero conocer la mecánica es solo el comienzo. Las APIs de contexto profesionales necesitan más: necesitan ser encapsuladas (estado interno protegido de mal uso), computadas (valores derivados que se mantienen sincronizados automáticamente), y con efectos (persistencia en almacenamiento, sincronización con sistemas externos).

Este artículo enseña los patrones que transforman el contexto reactivo básico en APIs de calidad para producción:

Getters para APIs limpias — Cómo exponer valores reactivos ocultando los detalles de implementación
$derived para valores computados — Cálculos automáticos que se actualizan cuando cambian las dependencias
$effect para efectos secundarios — Persistencia, sincronización y actualizaciones del DOM
Contexto en archivos .svelte.ts — Módulos de contexto reutilizables y con tipos seguros

Al final, podrás construir sistemas de contexto que sean un placer de usar y mantener.

Getters para APIs Limpias

Cuando expones un objeto $state directamente a través del contexto, los consumidores pueden leer y escribir cualquier cosa. Eso está bien para casos simples, pero es problemático a medida que crece la complejidad:

<!-- Provider -->
<script>
	let state = $state({ count: 0, step: 1 })
	setContext('counter', state)
</script>

<!-- Any consumer can do whatever they want -->
<script>
	const counter = getContext('counter')

	// Direct mutation — works but bypasses any validation
	counter.count = 999
	counter.step = -1

	// Consumers could even add random properties
	counter.hackedValue = 'oops'
</script>

Esto no es necesariamente incorrecto, pero hace que tu código sea más difícil de razonar. ¿Quién está cambiando qué? ¿De dónde vienen los errores?

El Patrón Getter

En lugar de exponer el estado sin procesar, expón un objeto API con getters para leer y métodos para escribir:

<!-- CounterProvider.svelte -->
<script>
	import { setContext } from 'svelte'

	let { initial = 0, step = 1, min = -Infinity, max = Infinity, children } = $props()

	// Internal state — not directly exposed
	let count = $state(initial)

	// Public API with getters and methods
	setContext('counter', {
		// Getters: reading goes through these
		get value() {
			return count
		},

		get canIncrement() {
			return count + step <= max
		},

		get canDecrement() {
			return count - step >= min
		},

		// Methods: writing goes through these
		increment() {
			if (count + step <= max) {
				count += step
			}
		},

		decrement() {
			if (count - step >= min) {
				count -= step
			}
		},

		set(newValue) {
			// Validation in one place
			count = Math.max(min, Math.min(max, newValue))
		},

		reset() {
			count = initial
		}
	})
</script>

{@render children()}

Los consumidores obtienen una API limpia y con restricciones:

<script>
	import { getContext } from 'svelte'

	const counter = getContext('counter')
</script>

<div class="counter">
	<button onclick={counter.decrement} disabled={!counter.canDecrement}> − </button>

	<span>{counter.value}</span>

	<button onclick={counter.increment} disabled={!counter.canIncrement}> + </button>

	<button onclick={counter.reset}>Reset</button>
</div>

Por Qué los Getters Son Esenciales

Sin getters, podrías capturar accidentalmente valores desactualizados:

let count = $state(0)

// ❌ Without getters — captures value at creation time
setContext('counter', {
	value: count, // This is 0, forever
	canIncrement: count < max, // This is true, forever
	increment() {
		count++
	}
})

// ✅ With getters — evaluates fresh each time
setContext('counter', {
	get value() {
		return count
	}, // Always current
	get canIncrement() {
		return count < max
	}, // Always current
	increment() {
		count++
	}
})

La función getter se ejecuta cada vez que se accede a la propiedad. Cada renderizado, cada manejador de eventos, cada $derived que lee counter.value obtiene el valor actual de count.

Los Getters Permiten la Encapsulación

Con getters, puedes cambiar la implementación interna sin romper a los consumidores:

// Version 1: Simple counter
let count = $state(0)

setContext('counter', {
	get value() {
		return count
	},
	increment() {
		count++
	}
})

// Version 2: Now we want to track history
// Changed implementation, same API
let history = $state([0])

setContext('counter', {
	get value() {
		return history[history.length - 1]
	}, // Same API!
	increment() {
		history.push(history[history.length - 1] + 1)
	},
	undo() {
		// New feature
		if (history.length > 1) history.pop()
	}
})

Los consumidores que usan counter.value siguen funcionando sin modificaciones. Este es el poder de la encapsulación.

Proveer Estado y Acciones

Una API de contexto bien diseñada típicamente tiene tres partes:

setContext('feature', {
	// 1. State getters — what you can read
	get data() {
		return data
	},
	get isLoading() {
		return isLoading
	},
	get error() {
		return error
	},

	// 2. Derived getters — computed values
	get isEmpty() {
		return data.length === 0
	},
	get summary() {
		return computeSummary(data)
	},

	// 3. Action methods — what you can do
	async fetch() {
		/* ... */
	},
	add(item) {
		/* ... */
	},
	remove(id) {
		/* ... */
	},
	reset() {
		/* ... */
	}
})

Esta estructura hace que el contexto sea autodocumentado. Los consumidores entienden inmediatamente qué está disponible y cómo usarlo.

Valores Computados con $derived

Cuando tu contexto necesita valores computados que dependen del estado, usa $derived. Los valores derivados se recalculan automáticamente cuando cambian sus dependencias, manteniendo todo sincronizado sin esfuerzo manual.

$derived Básico en Contexto

<!-- CartProvider.svelte -->
<script>
	import { setContext } from 'svelte'

	let { children } = $props()

	// Core state
	let items = $state([])
	let discountPercent = $state(0)

	// Derived values — computed automatically
	let itemCount = $derived(items.length)

	let totalQuantity = $derived(items.reduce((sum, item) => sum + item.quantity, 0))

	let subtotal = $derived(items.reduce((sum, item) => sum + item.price * item.quantity, 0))

	let discountAmount = $derived(subtotal * (discountPercent / 100))

	let total = $derived(subtotal - discountAmount)

	let isEmpty = $derived(items.length === 0)

	// Context API
	setContext('cart', {
		// State
		get items() {
			return items
		},

		// Derived values
		get itemCount() {
			return itemCount
		},
		get totalQuantity() {
			return totalQuantity
		},
		get subtotal() {
			return subtotal
		},
		get discountAmount() {
			return discountAmount
		},
		get total() {
			return total
		},
		get isEmpty() {
			return isEmpty
		},

		// Methods
		addItem(product, quantity = 1) {
			const existing = items.find((i) => i.id === product.id)
			if (existing) {
				existing.quantity += quantity
			} else {
				items.push({
					id: product.id,
					name: product.name,
					price: product.price,
					quantity
				})
			}
		},

		removeItem(id) {
			const index = items.findIndex((i) => i.id === id)
			if (index !== -1) {
				items.splice(index, 1)
			}
		},

		applyDiscount(percent) {
			discountPercent = Math.max(0, Math.min(100, percent))
		},

		clear() {
			items.length = 0
			discountPercent = 0
		}
	})
</script>

{@render children()}

Cuando se agrega, elimina o cambia algún ítem:

El arreglo items es mutado
Todos los valores $derived se recalculan automáticamente
Cualquier consumidor que lea esos valores vuelve a renderizarse

Los Consumidores Reciben Actualizaciones Automáticas

<!-- CartSummary.svelte -->
<script>
	import { getContext } from 'svelte'

	const cart = getContext('cart')
</script>

<div class="cart-summary">
	{#if cart.isEmpty}
		<p>Your cart is empty</p>
	{:else}
		<p>
			{cart.itemCount}
			{cart.itemCount === 1 ? 'item' : 'items'}
			({cart.totalQuantity} total)
		</p>

		<div class="totals">
			<div class="line">
				<span>Subtotal</span>
				<span>${(cart.subtotal / 100).toFixed(2)}</span>
			</div>
			{#if cart.discountAmount > 0}
				<div class="line discount">
					<span>Discount</span>
					<span>-${(cart.discountAmount / 100).toFixed(2)}</span>
				</div>
			{/if}
			<div class="line total">
				<span>Total</span>
				<span>${(cart.total / 100).toFixed(2)}</span>
			</div>
		</div>
	{/if}
</div>

El resumen del carrito se actualiza inmediatamente cuando cambian los ítems. No tienes que recalcular totales manualmente ni preocuparte por datos desactualizados.

Derivaciones Encadenadas

Los valores derivados pueden depender de otros valores derivados. Svelte gestiona el grafo de dependencias automáticamente:

// Base state
let items = $state([])
let taxRate = $state(0.08)
let freeShippingThreshold = 5000 // $50

// First level: derived from state
let subtotal = $derived(items.reduce((sum, item) => sum + item.price * item.quantity, 0))

// Second level: derived from derived
let qualifiesForFreeShipping = $derived(subtotal >= freeShippingThreshold)
let shipping = $derived(qualifiesForFreeShipping ? 0 : 599)

// Third level: derived from multiple derived
let tax = $derived(Math.round(subtotal * taxRate))
let total = $derived(subtotal + shipping + tax)

Cuando cambia items, todo se recalcula en el orden correcto: primero subtotal, luego qualifiesForFreeShipping y shipping, y después tax y total.

Computar Una Vez vs. Cada Acceso

Existe una diferencia sutil entre getters que computan y $derived:

// Getter: computes on every access
get expensive() {
	return items.map(i => heavyCalculation(i))
}

// $derived: computes once when dependencies change, then caches
let expensive = $derived(items.map(i => heavyCalculation(i)))
get expensive() { return expensive }

Para operaciones económicas, la diferencia no importa. Para cómputos costosos, usa $derived para evitar trabajo redundante.

Efectos Secundarios con $effect

Usa $effect dentro de los proveedores para reaccionar a los cambios del estado del contexto. Aquí es donde manejas la persistencia, la sincronización con sistemas externos, los análisis y las actualizaciones del DOM.

Persistiendo en localStorage

Un patrón común es guardar las preferencias del usuario:

<!-- ThemeProvider.svelte -->
<script>
	import { setContext } from 'svelte'
	import { browser } from '$app/environment'

	let { children } = $props()

	// Initialize from localStorage if available
	let initialTheme = 'light'
	if (browser) {
		const stored = localStorage.getItem('theme')
		if (stored === 'light' || stored === 'dark') {
			initialTheme = stored
		}
	}

	let theme = $state(initialTheme)

	// Persist changes to localStorage
	$effect(() => {
		if (browser) {
			localStorage.setItem('theme', theme)
		}
	})

	// Apply to document
	$effect(() => {
		if (browser) {
			document.documentElement.setAttribute('data-theme', theme)
		}
	})

	setContext('theme', {
		get current() {
			return theme
		},

		setTheme(value) {
			if (value === 'light' || value === 'dark') {
				theme = value
			}
		},

		toggle() {
			theme = theme === 'light' ? 'dark' : 'light'
		}
	})
</script>

{@render children()}

El $effect se ejecuta cada vez que cambia theme, manteniendo automáticamente localStorage y el DOM sincronizados.

Sincronizando con Sistemas Externos

Aquí hay un patrón para mantener el contexto sincronizado con una API:

<!-- NotificationProvider.svelte -->
<script>
	import { setContext } from 'svelte'
	import { browser } from '$app/environment'

	let { children } = $props()

	let notifications = $state([])
	let unreadCount = $derived(notifications.filter((n) => !n.read).length)

	// Poll for new notifications
	$effect(() => {
		if (!browser) return

		async function checkForNew() {
			try {
				const response = await fetch('/api/notifications')
				const data = await response.json()

				// Merge new notifications (mutate, don't replace)
				for (const notification of data) {
					if (!notifications.find((n) => n.id === notification.id)) {
						notifications.push(notification)
					}
				}
			} catch (error) {
				console.error('Failed to fetch notifications:', error)
			}
		}

		// Check immediately and then every 30 seconds
		checkForNew()
		const interval = setInterval(checkForNew, 30000)

		// Cleanup on unmount
		return () => clearInterval(interval)
	})

	setContext('notifications', {
		get all() {
			return notifications
		},
		get unreadCount() {
			return unreadCount
		},

		markAsRead(id) {
			const notification = notifications.find((n) => n.id === id)
			if (notification) {
				notification.read = true
			}
		},

		markAllAsRead() {
			for (const notification of notifications) {
				notification.read = true
			}
		},

		dismiss(id) {
			const index = notifications.findIndex((n) => n.id === id)
			if (index !== -1) {
				notifications.splice(index, 1)
			}
		}
	})
</script>

{@render children()}

Limpieza de Efectos

Cuando los efectos establecen suscripciones, temporizadores o listeners de eventos, devuelve una función de limpieza:

<script>
	import { setContext } from 'svelte'

	let { children } = $props()

	let networkStatus = $state({ online: navigator.onLine })

	$effect(() => {
		function handleOnline() {
			networkStatus.online = true
		}

		function handleOffline() {
			networkStatus.online = false
		}

		window.addEventListener('online', handleOnline)
		window.addEventListener('offline', handleOffline)

		// Cleanup: runs before effect re-runs or component unmounts
		return () => {
			window.removeEventListener('online', handleOnline)
			window.removeEventListener('offline', handleOffline)
		}
	})

	setContext('network', {
		get isOnline() {
			return networkStatus.online
		},
		get isOffline() {
			return !networkStatus.online
		}
	})
</script>

{@render children()}

La función de limpieza previene fugas de memoria y manejadores de eventos obsoletos.

Múltiples Effects para Separación de Responsabilidades

No pongas todo en un solo effect. Separa las responsabilidades para mayor claridad:

<script>
	import { setContext } from 'svelte'
	import { browser } from '$app/environment'

	let { children } = $props()

	let user = $state(null)
	let preferences = $state({ theme: 'light', fontSize: 16 })

	// Effect 1: Persist user to sessionStorage
	$effect(() => {
		if (!browser) return

		if (user) {
			sessionStorage.setItem('user', JSON.stringify(user))
		} else {
			sessionStorage.removeItem('user')
		}
	})

	// Effect 2: Persist preferences to localStorage
	$effect(() => {
		if (!browser) return
		localStorage.setItem('preferences', JSON.stringify(preferences))
	})

	// Effect 3: Apply theme to document
	$effect(() => {
		if (!browser) return
		document.documentElement.setAttribute('data-theme', preferences.theme)
	})

	// Effect 4: Apply font size to document
	$effect(() => {
		if (!browser) return
		document.documentElement.style.setProperty('--base-font-size', `${preferences.fontSize}px`)
	})

	// Effect 5: Analytics tracking
	$effect(() => {
		if (!browser || !user) return

		analytics.identify(user.id, {
			email: user.email,
			name: user.name
		})
	})

	setContext('app', {
		get user() {
			return user
		},
		get preferences() {
			return preferences
		}
		// ... methods
	})
</script>

{@render children()}

Cada effect tiene una única responsabilidad, lo que hace que el código sea más fácil de entender y mantener.

Context en Archivos .svelte.ts

Para un context reutilizable y con tipos seguros, crea módulos en archivos .svelte.ts. Esto separa la lógica del context de los componentes y permite una mejor organización.

Un Módulo Counter Completo

// lib/context/counter.svelte.ts
import { setContext, getContext, hasContext } from 'svelte'

// Use Symbol for collision-proof keys
const COUNTER_KEY = Symbol('counter')

// Type definitions
export interface CounterContext {
	readonly value: number
	readonly isAtMin: boolean
	readonly isAtMax: boolean
	increment(): void
	decrement(): void
	set(value: number): void
	reset(): void
}

export interface CounterOptions {
	initial?: number
	min?: number
	max?: number
	step?: number
}

// Creation function
export function createCounterContext(options: CounterOptions = {}): CounterContext {
	const { initial = 0, min = -Infinity, max = Infinity, step = 1 } = options

	// Internal state
	let count = $state(initial)

	// Derived values
	let isAtMin = $derived(count <= min)
	let isAtMax = $derived(count >= max)

	// Context API
	const context: CounterContext = {
		get value() {
			return count
		},
		get isAtMin() {
			return isAtMin
		},
		get isAtMax() {
			return isAtMax
		},

		increment() {
			if (count + step <= max) {
				count += step
			}
		},

		decrement() {
			if (count - step >= min) {
				count -= step
			}
		},

		set(value: number) {
			count = Math.max(min, Math.min(max, value))
		},

		reset() {
			count = initial
		}
	}

	return setContext(COUNTER_KEY, context)
}

// Getter with error handling
export function getCounterContext(): CounterContext {
	if (!hasContext(COUNTER_KEY)) {
		throw new Error(
			'Counter context not found. ' +
				'Wrap your component tree with CounterProvider ' +
				'or call createCounterContext().'
		)
	}
	return getContext(COUNTER_KEY)
}

// Optional getter for graceful handling
export function getCounterContextOrNull(): CounterContext | null {
	return hasContext(COUNTER_KEY) ? getContext(COUNTER_KEY) : null
}

// Check helper
export function hasCounterContext(): boolean {
	return hasContext(COUNTER_KEY)
}

Usando el Módulo

Crea un componente proveedor:

<!-- CounterProvider.svelte -->
<script lang="ts">
	import { createCounterContext, type CounterOptions } from '$lib/context/counter.svelte'

	interface Props extends CounterOptions {
		children: import('svelte').Snippet
	}

	let { initial = 0, min, max, step, children }: Props = $props()

	createCounterContext({ initial, min, max, step })
</script>

{@render children()}

Úsalo en los consumidores:

<!-- CounterDisplay.svelte -->
<script lang="ts">
	import { getCounterContext } from '$lib/context/counter.svelte'

	const counter = getCounterContext()
</script>

<div class="counter">
	<button onclick={counter.decrement} disabled={counter.isAtMin}> − </button>

	<span>{counter.value}</span>

	<button onclick={counter.increment} disabled={counter.isAtMax}> + </button>
</div>

TypeScript proporciona autocompletado completo y verificación de tipos:

counter.value // ✅ number
counter.isAtMin // ✅ boolean
counter.increment() // ✅ void
counter.foo // ❌ Property 'foo' does not exist

Un Ejemplo Más Complejo: Cart Context

// lib/context/cart.svelte.ts
import { setContext, getContext, hasContext } from 'svelte'
import { browser } from '$app/environment'

const CART_KEY = Symbol('cart')
const STORAGE_KEY = 'shopping_cart'

export interface CartItem {
	id: string
	name: string
	price: number
	quantity: number
}

export interface CartContext {
	readonly items: CartItem[]
	readonly itemCount: number
	readonly subtotal: number
	readonly isEmpty: boolean

	addItem(item: Omit<CartItem, 'quantity'>, quantity?: number): void
	removeItem(id: string): void
	updateQuantity(id: string, quantity: number): void
	clear(): void
}

export function createCartContext(): CartContext {
	// Load from storage
	function loadItems(): CartItem[] {
		if (!browser) return []
		try {
			const stored = localStorage.getItem(STORAGE_KEY)
			return stored ? JSON.parse(stored) : []
		} catch {
			return []
		}
	}

	// State
	let items = $state<CartItem[]>(loadItems())

	// Derived
	let itemCount = $derived(items.length)
	let subtotal = $derived(items.reduce((sum, item) => sum + item.price * item.quantity, 0))
	let isEmpty = $derived(items.length === 0)

	// Persistence effect
	$effect(() => {
		if (browser) {
			localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
		}
	})

	// API
	const context: CartContext = {
		get items() {
			return items
		},
		get itemCount() {
			return itemCount
		},
		get subtotal() {
			return subtotal
		},
		get isEmpty() {
			return isEmpty
		},

		addItem(item, quantity = 1) {
			const existing = items.find((i) => i.id === item.id)
			if (existing) {
				existing.quantity += quantity
			} else {
				items.push({ ...item, quantity })
			}
		},

		removeItem(id) {
			const index = items.findIndex((i) => i.id === id)
			if (index !== -1) {
				items.splice(index, 1)
			}
		},

		updateQuantity(id, quantity) {
			const item = items.find((i) => i.id === id)
			if (item) {
				if (quantity <= 0) {
					this.removeItem(id)
				} else {
					item.quantity = quantity
				}
			}
		},

		clear() {
			items.length = 0
		}
	}

	return setContext(CART_KEY, context)
}

export function getCartContext(): CartContext {
	if (!hasContext(CART_KEY)) {
		throw new Error('Cart context not found. Wrap with CartProvider.')
	}
	return getContext(CART_KEY)
}

Organizando los Módulos de Context

Una estructura típica para una aplicación de tamaño mediano:

src/lib/context/
├── cart.svelte.ts        # Shopping cart
├── auth.svelte.ts        # Authentication
├── theme.svelte.ts       # Theme preferences
├── notifications.svelte.ts  # Toast/notification system
├── types.ts              # Shared types
└── index.ts              # Public exports

El index.ts re-exporta todo para importaciones limpias:

// lib/context/index.ts
export * from './cart.svelte'
export * from './auth.svelte'
export * from './theme.svelte'
export * from './notifications.svelte'

Los consumidores importan lo que necesitan:

<script lang="ts">
	import { getCartContext, getAuthContext, getThemeContext } from '$lib/context'

	const cart = getCartContext()
	const auth = getAuthContext()
	const theme = getThemeContext()
</script>

Uniendo Todo

Veamos estos patrones combinados en un sistema de notificaciones realista:

// lib/context/notifications.svelte.ts
import { setContext, getContext, hasContext } from 'svelte'

const NOTIFICATIONS_KEY = Symbol('notifications')

export type NotificationType = 'info' | 'success' | 'warning' | 'error'

export interface Notification {
	id: string
	message: string
	type: NotificationType
	dismissible: boolean
	createdAt: number
}

export interface NotificationContext {
	readonly all: Notification[]
	readonly count: number
	readonly hasNotifications: boolean

	// Convenience methods
	info(message: string): string
	success(message: string): string
	warning(message: string): string
	error(message: string): string

	// Core methods
	add(message: string, options?: NotificationOptions): string
	dismiss(id: string): void
	dismissAll(): void
}

export interface NotificationOptions {
	type?: NotificationType
	duration?: number
	dismissible?: boolean
}

export function createNotificationContext(): NotificationContext {
	let notifications = $state<Notification[]>([])

	// Derived
	let count = $derived(notifications.length)
	let hasNotifications = $derived(count > 0)

	function generateId(): string {
		return `notification-${Date.now()}-${Math.random().toString(36).slice(2)}`
	}

	function addNotification(message: string, options: NotificationOptions = {}): string {
		const { type = 'info', duration = type === 'error' ? 0 : 5000, dismissible = true } = options

		const id = generateId()

		notifications.push({
			id,
			message,
			type,
			dismissible,
			createdAt: Date.now()
		})

		// Auto-dismiss if duration > 0
		if (duration > 0) {
			setTimeout(() => dismiss(id), duration)
		}

		return id
	}

	function dismiss(id: string): void {
		const index = notifications.findIndex((n) => n.id === id)
		if (index !== -1) {
			notifications.splice(index, 1)
		}
	}

	function dismissAll(): void {
		notifications.length = 0
	}

	const context: NotificationContext = {
		get all() {
			return notifications
		},
		get count() {
			return count
		},
		get hasNotifications() {
			return hasNotifications
		},

		info: (message) => addNotification(message, { type: 'info' }),
		success: (message) => addNotification(message, { type: 'success' }),
		warning: (message) => addNotification(message, { type: 'warning' }),
		error: (message) => addNotification(message, { type: 'error' }),

		add: addNotification,
		dismiss,
		dismissAll
	}

	return setContext(NOTIFICATIONS_KEY, context)
}

export function getNotificationContext(): NotificationContext {
	if (!hasContext(NOTIFICATIONS_KEY)) {
		throw new Error('Notification context not found. Wrap with NotificationProvider.')
	}
	return getContext(NOTIFICATIONS_KEY)
}

Proveedor con UI:

<!-- NotificationProvider.svelte -->
<script lang="ts">
	import { createNotificationContext } from '$lib/context/notifications.svelte'
	import { fly, fade } from 'svelte/transition'

	let { children } = $props()

	const notifications = createNotificationContext()
</script>

{@render children()}

<!-- Notification toast container -->
{#if notifications.hasNotifications}
	<div class="notification-container" role="region" aria-label="Notifications">
		{#each notifications.all as notification (notification.id)}
			<div
				class="notification notification-{notification.type}"
				role="alert"
				in:fly={{ y: 20, duration: 200 }}
				out:fade={{ duration: 150 }}
			>
				<span class="message">{notification.message}</span>

				{#if notification.dismissible}
					<button
						class="dismiss"
						onclick={() => notifications.dismiss(notification.id)}
						aria-label="Dismiss"
					>
						×
					</button>
				{/if}
			</div>
		{/each}
	</div>
{/if}

<style>
	.notification-container {
		position: fixed;
		bottom: 1rem;
		right: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		z-index: 9999;
	}

	.notification {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 0.75rem 1rem;
		border-radius: 8px;
		background: white;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		max-width: 400px;
	}

	.notification-success {
		border-left: 4px solid #10b981;
	}
	.notification-error {
		border-left: 4px solid #ef4444;
	}
	.notification-warning {
		border-left: 4px solid #f59e0b;
	}
	.notification-info {
		border-left: 4px solid #3b82f6;
	}

	.dismiss {
		padding: 0.25rem;
		border: none;
		background: none;
		font-size: 1.25rem;
		cursor: pointer;
		opacity: 0.5;
	}

	.dismiss:hover {
		opacity: 1;
	}
</style>

Uso en toda la aplicación:

<script lang="ts">
	import { getNotificationContext } from '$lib/context/notifications.svelte'

	const notify = getNotificationContext()

	async function handleSave() {
		try {
			await saveDocument()
			notify.success('Document saved successfully!')
		} catch (err) {
			notify.error(`Failed to save: ${err.message}`)
		}
	}
</script>

<button onclick={handleSave}>Save Document</button>

{#if notify.hasNotifications}
	<span class="badge">{notify.count}</span>
{/if}

Referencia Rápida

Patrón	Cuándo Usar	Ejemplo
Getters	Siempre para leer estado	`get value() { return count }`
Methods	Para mutaciones con validación	`increment() { if (canIncrement) count++ }`
$derived	Valores computados a partir del estado	`let total = $derived(subtotal + tax)`
$effect	Efectos secundarios (persistencia, sincronización)	`$effect(() => localStorage.setItem(key, value))`
Symbol keys	Claves de context a prueba de colisiones	`const KEY = Symbol('feature')`
.svelte.ts	Módulos de context tipados reutilizables	`export function createContext()`

Conclusión

Los patrones de context reactivo representan la maduración de la gestión de estado en Svelte 5. Los fundamentos—objetos $state y la regla "mutate, don't reassign"—proporcionan la base. Los patrones en este artículo—getters, $derived, $effect y módulos .svelte.ts—transforman esa base en una arquitectura de calidad para producción.

La progresión es natural: comienzas exponiendo estado crudo, luego te das cuenta de que necesitas encapsulamiento (getters). Te encuentras computando los mismos valores repetidamente, y descubres que $derived lo maneja automáticamente. Necesitas persistencia o sincronización, y $effect provee el hook reactivo. Finalmente, quieres reutilización y seguridad de tipos, y los módulos .svelte.ts lo entregan.

Lo que hace poderosos a estos patrones es cómo se componen. Un sistema de notificaciones podría usar todos ellos: getters para count y hasNotifications, $derived para filtrar por tipo, $effect para temporizadores de auto-descarte, y un módulo .svelte.ts para la API tipada completa. Cada patrón resuelve un problema bien, y juntos resuelven problemas complejos con elegancia.

La inversión en aprender estos patrones rinde dividendos en cada context que construyas. Tus APIs se vuelven más limpias, tu código más mantenible, y tus consumidores—ya seas tú el próximo mes o un compañero el próximo año—te agradecerán la claridad.

Conclusiones Clave

Los getters garantizan valores actuales—siempre expone el estado reactivo a través de get value() { return state } en lugar de capturar valores en el momento de creación
Los getters habilitan el encapsulamiento—la implementación interna puede cambiar sin romper a los consumidores, siempre que la interfaz del getter permanezca igual
$derived maneja valores computados—Svelte rastrea automáticamente las dependencias y recalcula cuando cambian, eliminando la lógica de actualización manual
Los valores derivados pueden encadenarse—subtotal depende de items, total depende de subtotal y shipping—Svelte maneja el grafo de dependencias
$effect gestiona efectos secundarios—úsalo para persistencia, sincronización externa, actualizaciones del DOM y analítica; retorna funciones de limpieza para listeners y temporizadores
Separa responsabilidades en múltiples effects—cada effect debe tener una única responsabilidad para mayor claridad y mantenibilidad
Los módulos .svelte.ts habilitan la reutilización—crea módulos de context tipados con claves Symbol, funciones de creación y getters tipados para APIs profesionales
Exporta APIs completas—provee funciones de creación, getters requeridos y opcionales, e interfaces TypeScript claras

Qué Sigue

Lleva el encapsulamiento más lejos con Context Basado en Clases, donde las clases TypeScript se combinan con runes para una gestión de estado poderosa, campos privados y patrones de herencia.

Ver También

Documentación Oficial

$state — Estado reactivo
$derived — Valores computados
$effect — Efectos secundarios
Archivos .svelte.ts — Runes en TypeScript