Cuando los Objetos Simples Se Vuelven Insuficientes

Ya aprendiste a hacer reactivo el contexto con objetos $state y funciones getter. Has visto cómo $derived maneja los valores calculados y $effect gestiona los efectos secundarios. Estos patrones funcionan a la perfección—hasta que tu contexto crece lo suficiente como para que organizarlo se convierta en el desafío.

Cuando un contexto tiene una docena de campos de estado, múltiples propiedades calculadas, varios métodos de acción y lógica de inicialización que depende de parámetros, el enfoque de objeto plano empieza a ser insuficiente. Las piezas relacionadas se dispersan. Se vuelve poco claro qué métodos modifican qué estado. Agregar nuevas funcionalidades implica buscar entre código disperso para encontrar dónde pertenece cada cosa.

Las clases de TypeScript ofrecen una solución. Una clase agrupa de forma natural el estado y el comportamiento relacionados. Los campos viven en la parte superior, los métodos siguen, y la relación entre ellos es explícita. Más importante aún, las clases proveen características que los objetos simples no pueden igualar: campos verdaderamente privados que TypeScript hace cumplir, inicialización con validación en el constructor, herencia para comportamiento compartido, y soporte rico en el IDE que comprende la estructura de tu código.

¿La mejor parte? Los runes de Svelte 5 funcionan perfectamente dentro de las clases. Usas $state, $derived y $effect exactamente como lo harías en cualquier otro lugar—la clase simplemente proporciona organización y encapsulamiento.

Este artículo cubre el contexto basado en clases desde los fundamentos prácticos hasta los patrones avanzados. Aprenderás cuándo las clases ayudan, cómo estructurarlas de manera efectiva y cómo evitar las trampas en las que caen los desarrolladores que son nuevos en este enfoque.

El Espacio del Problema

Antes de agregar clases, entendamos cuándo realmente ayudan. No todo contexto necesita una clase—pero algunos claramente se benefician.

Cuando los Objetos Se Vuelven Difíciles de Manejar

Considera un contexto de preferencias de usuario que ha crecido con el tiempo:

// preferences-context.svelte.ts
export function createPreferencesContext() {
	// State scattered across multiple declarations
	let theme = $state<'light' | 'dark' | 'system'>('system')
	let fontSize = $state(16)
	let language = $state('en')
	let reducedMotion = $state(false)
	let notifications = $state(true)
	let emailDigest = $state<'daily' | 'weekly' | 'never'>('weekly')
	let timezone = $state(Intl.DateTimeFormat().resolvedOptions().timeZone)
	let dateFormat = $state<'mdy' | 'dmy' | 'ymd'>('mdy')
	let measurementUnit = $state<'metric' | 'imperial'>('metric')

	// Derived values somewhere in the middle
	let effectiveTheme = $derived(
		theme === 'system'
			? window.matchMedia('(prefers-color-scheme: dark)').matches
				? 'dark'
				: 'light'
			: theme
	)

	let localeSettings = $derived({
		language,
		timezone,
		dateFormat,
		measurementUnit
	})

	// Effects for persistence scattered around
	$effect(() => {
		localStorage.setItem(
			'preferences',
			JSON.stringify({
				theme,
				fontSize,
				language,
				reducedMotion,
				notifications,
				emailDigest,
				timezone,
				dateFormat,
				measurementUnit
			})
		)
	})

	$effect(() => {
		document.documentElement.setAttribute('data-theme', effectiveTheme)
	})

	// Methods at the end
	return {
		get theme() {
			return theme
		},
		get fontSize() {
			return fontSize
		},
		get language() {
			return language
		},
		// ... 15 more getters

		setTheme(value: 'light' | 'dark' | 'system') {
			theme = value
		},
		setFontSize(value: number) {
			fontSize = Math.max(12, Math.min(24, value))
		},
		setLanguage(value: string) {
			language = value
		},
		// ... 10 more setters

		resetToDefaults() {
			theme = 'system'
			fontSize = 16
			language = 'en'
			// ... reset all 9 fields
		}
	}
}

Esto funciona, pero se está volviendo difícil de navegar. Las declaraciones de estado están en la parte superior, los valores derivados en algún punto intermedio, los efectos dispersos por ahí, y el objeto retornado al final. Cuando necesitas agregar una nueva preferencia, tienes que modificar cuatro lugares diferentes.

Lo que Proveen las Clases

Una versión con clase del mismo contexto:

// PreferencesContext.svelte.ts
export class PreferencesContext {
	// All state together at the top
	theme = $state<'light' | 'dark' | 'system'>('system')
	fontSize = $state(16)
	language = $state('en')
	reducedMotion = $state(false)
	notifications = $state(true)
	emailDigest = $state<'daily' | 'weekly' | 'never'>('weekly')
	timezone = $state(Intl.DateTimeFormat().resolvedOptions().timeZone)
	dateFormat = $state<'mdy' | 'dmy' | 'ymd'>('mdy')
	measurementUnit = $state<'metric' | 'imperial'>('metric')

	// Computed properties clearly marked
	get effectiveTheme() {
		return this.theme === 'system'
			? window.matchMedia('(prefers-color-scheme: dark)').matches
				? 'dark'
				: 'light'
			: this.theme
	}

	get localeSettings() {
		return {
			language: this.language,
			timezone: this.timezone,
			dateFormat: this.dateFormat,
			measurementUnit: this.measurementUnit
		}
	}

	// Methods grouped logically
	setTheme(value: 'light' | 'dark' | 'system') {
		this.theme = value
	}

	setFontSize(value: number) {
		this.fontSize = Math.max(12, Math.min(24, value))
	}

	resetToDefaults() {
		this.theme = 'system'
		this.fontSize = 16
		this.language = 'en'
		this.reducedMotion = false
		this.notifications = true
		this.emailDigest = 'weekly'
		this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
		this.dateFormat = 'mdy'
		this.measurementUnit = 'metric'
	}

	// Lifecycle setup in constructor
	constructor() {
		// Load from localStorage
		this.loadFromStorage()

		// Set up persistence
		$effect(() => {
			this.saveToStorage()
		})

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

	private loadFromStorage() {
		try {
			const stored = localStorage.getItem('preferences')
			if (stored) {
				const data = JSON.parse(stored)
				Object.assign(this, data)
			}
		} catch {
			// Use defaults on error
		}
	}

	private saveToStorage() {
		localStorage.setItem(
			'preferences',
			JSON.stringify({
				theme: this.theme,
				fontSize: this.fontSize,
				language: this.language,
				reducedMotion: this.reducedMotion,
				notifications: this.notifications,
				emailDigest: this.emailDigest,
				timezone: this.timezone,
				dateFormat: this.dateFormat,
				measurementUnit: this.measurementUnit
			})
		)
	}
}

La versión con clase es más fácil de navegar: el estado en la parte superior, las propiedades calculadas a continuación, los métodos públicos, el constructor y luego los helpers privados. Cuando necesitas agregar una nueva preferencia, la estructura te indica exactamente dónde va cada pieza.

El Modelo Mental de Svelte 5

Los runes de Svelte 5 funcionan dentro de las clases porque los runes son transformaciones en tiempo de compilación, no características en tiempo de ejecución. Cuando Svelte ve $state, $derived o $effect, transforma ese código durante la compilación. No importa si el código está dentro de una función, un método de objeto o una clase—la transformación se aplica de la misma manera.

Runes en Campos de Clase

Los campos de clase con $state se vuelven reactivos:

class Counter {
	// This field is reactive
	count = $state(0)

	// Methods can read and mutate the reactive field
	increment() {
		this.count++ // Svelte tracks this mutation
	}
}

Cuando Svelte compila esto, transforma el campo count en algo que el sistema de reactividad de Svelte puede rastrear. La transformación es invisible para ti—simplemente escribes código de clase con aspecto normal.

Valores Derivados como Getters

Para valores calculados en clases, usa los getters nativos de JavaScript:

class Counter {
	count = $state(0)

	// Getter computes fresh each time it's accessed
	get doubled() {
		return this.count * 2
	}

	// Getter can derive from other getters
	get quadrupled() {
		return this.doubled * 2
	}
}

Los getters funcionan como $derived—calculan su valor cada vez que se accede a ellos, y Svelte rastrea qué valores reactivos leen.

En las clases, los getters de JavaScript cumplen el mismo propósito que $derived. Ambos calculan valores de forma reactiva. Los getters son la elección idiomática para las clases porque se integran de forma natural con la sintaxis de clase y la inferencia de tipos de TypeScript.

Efectos en Constructores

Coloca llamadas a $effect en el constructor para configurar efectos secundarios cuando se instancia la clase:

class Timer {
	seconds = $state(0)
	running = $state(false)

	constructor() {
		$effect(() => {
			if (this.running) {
				const interval = setInterval(() => {
					this.seconds++
				}, 1000)

				// Cleanup when effect re-runs or component unmounts
				return () => clearInterval(interval)
			}
		})
	}

	start() {
		this.running = true
	}

	stop() {
		this.running = false
	}
}

El efecto se ejecuta durante la inicialización del componente (cuando la clase se instancia en el <script> de un componente) y realiza la limpieza de manera apropiada.

Implementación

Construyamos contexto basado en clases de forma progresiva, comenzando simple y añadiendo complejidad.

Paso 1: Clase Básica con $state

El contexto basado en clases más simple agrupa estado y métodos relacionados:

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

const COUNTER_KEY = Symbol('counter')

export class CounterContext {
	count = $state(0)

	increment() {
		this.count++
	}

	decrement() {
		this.count--
	}

	reset() {
		this.count = 0
	}
}

export function setCounterContext() {
	return setContext(COUNTER_KEY, new CounterContext())
}

export function getCounterContext(): CounterContext {
	return getContext(COUNTER_KEY)
}

Usándolo:

<!-- Provider.svelte -->
<script>
	import { setCounterContext } from './counter.svelte'
	import type { Snippet } from 'svelte'

	let { children }: { children: Snippet } = $props()

	setCounterContext()
</script>

{@render children()}

<!-- Consumer.svelte -->
<script>
	import { getCounterContext } from './counter.svelte'

	const counter = getCounterContext()
</script>

<p>Count: {counter.count}</p>
<button onclick={() => counter.increment()}>+</button>
<button onclick={() => counter.decrement()}>-</button>
<button onclick={() => counter.reset()}>Reset</button>

Paso 2: Agregar Propiedades Calculadas

Agrega getters para valores derivados:

// counter.svelte.ts
export class CounterContext {
	count = $state(0)
	step = $state(1)

	// Computed properties via getters
	get isPositive() {
		return this.count > 0
	}

	get isNegative() {
		return this.count < 0
	}

	get isZero() {
		return this.count === 0
	}

	get displayValue() {
		const sign = this.count >= 0 ? '' : '-'
		return `${sign}${Math.abs(this.count).toLocaleString()}`
	}

	increment() {
		this.count += this.step
	}

	decrement() {
		this.count -= this.step
	}

	setStep(value: number) {
		this.step = Math.max(1, value)
	}

	reset() {
		this.count = 0
	}
}

Los consumidores acceden a las propiedades calculadas como si fueran propiedades regulares:

<script>
	const counter = getCounterContext()
</script>

<p class:positive={counter.isPositive} class:negative={counter.isNegative}>
	{counter.displayValue}
</p>

Paso 3: Parámetros del Constructor

Usa constructores para configurar instancias de clase:

// counter.svelte.ts
export interface CounterOptions {
	initial?: number
	min?: number
	max?: number
	step?: number
}

export class CounterContext {
	count: number
	readonly min: number
	readonly max: number
	step: number

	constructor(options: CounterOptions = {}) {
		const { initial = 0, min = -Infinity, max = Infinity, step = 1 } = options

		this.count = $state(Math.max(min, Math.min(max, initial)))
		this.min = min
		this.max = max
		this.step = $state(step)
	}

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

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

	increment() {
		if (this.canIncrement) {
			this.count += this.step
		}
	}

	decrement() {
		if (this.canDecrement) {
			this.count -= this.step
		}
	}

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

export function setCounterContext(options?: CounterOptions) {
	return setContext(COUNTER_KEY, new CounterContext(options))
}

Proveedor con configuración:

<script>
	import { setCounterContext } from './counter.svelte'
	import type { Snippet } from 'svelte'

	let { children }: { children: Snippet } = $props()

	// Counter that starts at 50, can't go below 0 or above 100
	setCounterContext({ initial: 50, min: 0, max: 100, step: 5 })
</script>

{@render children()}

Paso 4: Campos Privados para Encapsulamiento

Los campos privados de TypeScript impiden que los consumidores accedan directamente al estado interno:

// user-session.svelte.ts
export class UserSessionContext {
	// Private fields - inaccessible outside the class
	#user = $state<User | null>(null)
	#token = $state<string | null>(null)
	#refreshTimer: ReturnType<typeof setTimeout> | null = null

	// Public getters provide controlled access
	get isAuthenticated() {
		return this.#user !== null && this.#token !== null
	}

	get user() {
		return this.#user
	}

	get userId() {
		return this.#user?.id ?? null
	}

	get username() {
		return this.#user?.username ?? null
	}

	// Token is never exposed - only used internally

	constructor() {
		// Attempt to restore session on creation
		this.#restoreSession()
	}

	async login(credentials: { email: string; password: string }) {
		const response = await fetch('/api/auth/login', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify(credentials)
		})

		if (!response.ok) {
			throw new Error('Login failed')
		}

		const data = await response.json()
		this.#user = data.user
		this.#token = data.token

		// Store for session restoration
		sessionStorage.setItem('auth_token', data.token)

		// Set up automatic token refresh
		this.#scheduleTokenRefresh()
	}

	logout() {
		this.#user = null
		this.#token = null
		sessionStorage.removeItem('auth_token')

		if (this.#refreshTimer) {
			clearTimeout(this.#refreshTimer)
			this.#refreshTimer = null
		}
	}

	// Private helper methods
	#restoreSession() {
		const token = sessionStorage.getItem('auth_token')
		if (token) {
			this.#token = token
			this.#fetchCurrentUser()
		}
	}

	async #fetchCurrentUser() {
		if (!this.#token) return

		try {
			const response = await fetch('/api/auth/me', {
				headers: { Authorization: `Bearer ${this.#token}` }
			})

			if (response.ok) {
				this.#user = await response.json()
				this.#scheduleTokenRefresh()
			} else {
				this.logout()
			}
		} catch {
			this.logout()
		}
	}

	#scheduleTokenRefresh() {
		// Refresh token 5 minutes before expiry
		this.#refreshTimer = setTimeout(
			() => {
				this.#refreshToken()
			},
			55 * 60 * 1000
		) // 55 minutes
	}

	async #refreshToken() {
		if (!this.#token) return

		try {
			const response = await fetch('/api/auth/refresh', {
				method: 'POST',
				headers: { Authorization: `Bearer ${this.#token}` }
			})

			if (response.ok) {
				const data = await response.json()
				this.#token = data.token
				sessionStorage.setItem('auth_token', data.token)
				this.#scheduleTokenRefresh()
			} else {
				this.logout()
			}
		} catch {
			this.logout()
		}
	}
}

Con campos privados, los consumidores no pueden acceder al token directamente de manera accidental (o intencional):

<script>
	const session = getUserSessionContext()

	// ✅ These work
	console.log(session.isAuthenticated)
	console.log(session.username)

	// ❌ TypeScript error: Property '#token' is not accessible
	// console.log(session.#token)
</script>

Paso 5: Efectos para la Gestión del Ciclo de Vida

Agrega $effect en el constructor para efectos secundarios:

// theme.svelte.ts
export class ThemeContext {
	#mode = $state<'light' | 'dark' | 'system'>('system')
	#systemPreference = $state<'light' | 'dark'>('light')

	get mode() {
		return this.#mode
	}

	get effectiveTheme(): 'light' | 'dark' {
		if (this.#mode === 'system') {
			return this.#systemPreference
		}
		return this.#mode
	}

	get isDark() {
		return this.effectiveTheme === 'dark'
	}

	constructor() {
		// Load saved preference
		const saved = localStorage.getItem('theme-mode')
		if (saved === 'light' || saved === 'dark' || saved === 'system') {
			this.#mode = saved
		}

		// Track system preference
		if (typeof window !== 'undefined') {
			const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
			this.#systemPreference = mediaQuery.matches ? 'dark' : 'light'

			// Effect to listen for system preference changes
			$effect(() => {
				const handler = (e: MediaQueryListEvent) => {
					this.#systemPreference = e.matches ? 'dark' : 'light'
				}

				mediaQuery.addEventListener('change', handler)
				return () => mediaQuery.removeEventListener('change', handler)
			})
		}

		// Effect to persist mode changes
		$effect(() => {
			localStorage.setItem('theme-mode', this.#mode)
		})

		// Effect to apply theme to document
		$effect(() => {
			document.documentElement.setAttribute('data-theme', this.effectiveTheme)
			document.documentElement.classList.toggle('dark', this.isDark)
		})
	}

	setMode(mode: 'light' | 'dark' | 'system') {
		this.#mode = mode
	}

	toggle() {
		if (this.#mode === 'light') {
			this.#mode = 'dark'
		} else if (this.#mode === 'dark') {
			this.#mode = 'system'
		} else {
			this.#mode = 'light'
		}
	}
}

Paso 6: Composición en Lugar de Herencia

Cuando los contextos comparten comportamiento, prefiere la composición sobre la herencia. Esto mantiene las clases enfocadas y fáciles de probar:

// Reusable behavior modules
// persistence.svelte.ts
export function createPersistence<T>(
	key: string,
	serialize: (data: T) => string,
	deserialize: (data: string) => T
) {
	return {
		load(): T | null {
			try {
				const stored = localStorage.getItem(key)
				return stored ? deserialize(stored) : null
			} catch {
				return null
			}
		},

		save(data: T) {
			localStorage.setItem(key, serialize(data))
		},

		clear() {
			localStorage.removeItem(key)
		}
	}
}

// history.svelte.ts
export class History<T> {
	#states = $state<T[]>([])
	#index = $state(-1)
	#maxSize: number

	constructor(maxSize = 50) {
		this.#maxSize = maxSize
	}

	get canUndo() {
		return this.#index > 0
	}

	get canRedo() {
		return this.#index < this.#states.length - 1
	}

	get current(): T | undefined {
		return this.#states[this.#index]
	}

	push(state: T) {
		// Remove any future states if we're not at the end
		this.#states = this.#states.slice(0, this.#index + 1)

		// Add new state
		this.#states.push(state)

		// Trim to max size
		if (this.#states.length > this.#maxSize) {
			this.#states = this.#states.slice(-this.#maxSize)
		}

		this.#index = this.#states.length - 1
	}

	undo(): T | undefined {
		if (this.canUndo) {
			this.#index--
			return this.current
		}
	}

	redo(): T | undefined {
		if (this.canRedo) {
			this.#index++
			return this.current
		}
	}

	clear() {
		this.#states = []
		this.#index = -1
	}
}

Ahora compón estos en un contexto:

// document-context.svelte.ts
export class DocumentContext {
	#content = $state('')
	#title = $state('Untitled')
	#savedAt = $state<Date | null>(null)

	// Composed behaviors
	#history = new History<string>(100)
	#persistence = createPersistence<{ title: string; content: string }>(
		'document',
		JSON.stringify,
		JSON.parse
	)

	get content() {
		return this.#content
	}

	get title() {
		return this.#title
	}

	get savedAt() {
		return this.#savedAt
	}

	get canUndo() {
		return this.#history.canUndo
	}

	get canRedo() {
		return this.#history.canRedo
	}

	get hasUnsavedChanges() {
		const saved = this.#persistence.load()
		return !saved || saved.content !== this.#content || saved.title !== this.#title
	}

	constructor() {
		// Load saved document
		const saved = this.#persistence.load()
		if (saved) {
			this.#content = saved.content
			this.#title = saved.title
		}

		// Initialize history with current content
		this.#history.push(this.#content)
	}

	setContent(content: string) {
		this.#content = content
		this.#history.push(content)
	}

	setTitle(title: string) {
		this.#title = title
	}

	undo() {
		const previous = this.#history.undo()
		if (previous !== undefined) {
			this.#content = previous
		}
	}

	redo() {
		const next = this.#history.redo()
		if (next !== undefined) {
			this.#content = next
		}
	}

	save() {
		this.#persistence.save({
			title: this.#title,
			content: this.#content
		})
		this.#savedAt = new Date()
	}

	clear() {
		this.#content = ''
		this.#title = 'Untitled'
		this.#history.clear()
		this.#history.push('')
		this.#persistence.clear()
		this.#savedAt = null
	}
}

La composición mantiene cada pieza enfocada. La clase History maneja deshacer/rehacer. El módulo de persistencia maneja el almacenamiento. El DocumentContext los orquesta sin mezclar responsabilidades.

Errores Comunes y Anti-Patrones

Al usar contexto basado en clases, pueden surgir ciertos problemas. Aquí están los errores más comunes y cómo evitarlos.

1: Error: Perder el Contexto de `this`

class Counter {
	count = $state(0)

	// ❌ Arrow function loses `this` context in some scenarios
	increment = () => {
		this.count++
	}

	// ❌ Destructuring breaks `this` binding
	// const { increment } = counter; increment() // Error!
}

Por qué ocurre: Cuando los métodos se desestructuran o se pasan como callbacks, pierden su enlace de this.

Solución: Usa métodos regulares y enlaza en el sitio de llamada, o usa funciones de flecha de manera consistente siendo consciente de las compensaciones:

class Counter {
  count = $state(0)

  // ✅ Regular method - works when called on the instance
  increment() {
    this.count++
  }
}

// In component: always call on the instance
<button onclick={() => counter.increment()}>+</button>

2: Crear Clases en el Lugar Incorrecto

<!-- ❌ Creates new instance every render -->
<script>
	class Counter {
		count = $state(0)
	}

	const counter = new Counter() // Recreated on each render!
</script>

Por qué ocurre: La clase se define e instancia dentro del componente, lo cual se ejecuta durante la inicialización.

Solución: Define las clases en archivos .svelte.ts separados:

// counter.svelte.ts
export class Counter {
	count = $state(0)
	increment() {
		this.count++
	}
}

<!-- Component.svelte -->
<script>
	import { Counter } from './counter.svelte'

	const counter = new Counter() // Created once during initialization
</script>

3: Exponer Arrays u Objetos Mutables

class TodoContext {
	// ❌ Consumers can mutate the array directly
	todos = $state<Todo[]>([])

	addTodo(text: string) {
		this.todos.push({ id: Date.now(), text, done: false })
	}
}

// Consumer can break encapsulation:
// context.todos.push({ id: 'fake', text: 'hacked', done: true })

Por qué ocurre: Los arrays y objetos son referencias. Exponerlos permite que los consumidores eviten tus métodos.

Solución: Usa campos privados con getters de solo lectura:

class TodoContext {
	#todos = $state<Todo[]>([])

	// Return a copy or use a getter that TypeScript sees as readonly
	get todos(): readonly Todo[] {
		return this.#todos
	}

	addTodo(text: string) {
		this.#todos.push({ id: Date.now(), text, done: false })
	}
}

4: Usar $derived en Campos de Clase

class Counter {
	count = $state(0)

	// ❌ This doesn't work as expected in class fields
	doubled = $derived(this.count * 2) // 'this' may not be bound correctly
}

Por qué ocurre: La inicialización de campos de clase ocurre antes de que se ejecute el constructor, y el enlace de this puede ser problemático con $derived en los inicializadores de campos.

Solución: Usa getters nativos en su lugar:

class Counter {
	count = $state(0)

	// ✅ Getter works correctly
	get doubled() {
		return this.count * 2
	}
}

5: Lógica Pesada en el Constructor

class DataContext {
	data = $state<Data[]>([])

	constructor() {
		// ❌ Blocking async operations in constructor
		const response = await fetch('/api/data') // Syntax error!
		this.data = await response.json()
	}
}

Por qué ocurre: Los constructores no pueden ser asíncronos, y las operaciones bloqueantes causan problemas.

Solución: Usa un método de inicialización explícito o inicializa mediante un efecto:

class DataContext {
	#data = $state<Data[]>([])
	#loading = $state(false)
	#error = $state<Error | null>(null)

	get data() {
		return this.#data
	}
	get loading() {
		return this.#loading
	}
	get error() {
		return this.#error
	}

	constructor() {
		// Start loading in an effect
		$effect(() => {
			this.load()
		})
	}

	async load() {
		this.#loading = true
		this.#error = null

		try {
			const response = await fetch('/api/data')
			if (!response.ok) throw new Error('Failed to fetch')
			this.#data = await response.json()
		} catch (e) {
			this.#error = e instanceof Error ? e : new Error('Unknown error')
		} finally {
			this.#loading = false
		}
	}
}

Consideraciones de Rendimiento y Escalabilidad

Reactividad Granular

La reactividad de Svelte es granular a nivel de propiedad. Cuando tienes una clase con múltiples campos $state, cambiar un campo solo afecta a los componentes que leen ese campo específico:

class AppContext {
	user = $state<User | null>(null)
	theme = $state<'light' | 'dark'>('light')
	notifications = $state<Notification[]>([])
}

Un componente que solo lee context.theme no se volverá a renderizar cuando cambie context.notifications. Esto significa que las clases de contexto grandes no causan problemas de rendimiento inherentemente — solo las partes relevantes desencadenan actualizaciones.

Evitar Getters Innecesarios

El acceso simple a propiedades no necesita la sobrecarga de un getter:

class Counter {
	count = $state(0)

	// ❌ Unnecessary getter for simple state
	get value() {
		return this.count
	}

	// ✅ Just expose the field directly
	// Consumers use: counter.count
}

Usa getters cuando necesites:

Valores computados/derivados
Control de acceso (retornando copias de arrays/objetos)
Evaluación diferida de operaciones costosas

Colecciones Grandes

Para contextos que gestionan colecciones grandes (cientos de elementos), considera:

class ItemsContext {
	#items = $state<Map<string, Item>>(new Map())

	get items(): readonly Item[] {
		return Array.from(this.#items.values())
	}

	getById(id: string): Item | undefined {
		return this.#items.get(id) // O(1) lookup
	}

	updateItem(id: string, updates: Partial<Item>) {
		const item = this.#items.get(id)
		if (item) {
			// Mutate in place for reactivity
			Object.assign(item, updates)
		}
	}

	// For bulk operations, batch updates
	bulkUpdate(updates: Map<string, Partial<Item>>) {
		for (const [id, changes] of updates) {
			this.updateItem(id, changes)
		}
	}
}

Usar un Map proporciona búsquedas en O(1). Mutar elementos en su lugar mantiene la reactividad sin recrear toda la colección.

Gestión de Memoria

Las clases persisten durante el ciclo de vida de su componente proveedor. Ten en cuenta:

class CacheContext {
	#cache = $state<Map<string, CachedItem>>(new Map())
	#maxSize = 1000

	set(key: string, value: unknown, ttl = 60000) {
		// Evict if at capacity
		if (this.#cache.size >= this.#maxSize) {
			const oldestKey = this.#cache.keys().next().value
			if (oldestKey) this.#cache.delete(oldestKey)
		}

		this.#cache.set(key, {
			value,
			expiresAt: Date.now() + ttl
		})
	}

	get(key: string): unknown | undefined {
		const item = this.#cache.get(key)
		if (!item) return undefined

		if (Date.now() > item.expiresAt) {
			this.#cache.delete(key)
			return undefined
		}

		return item.value
	}

	// Periodic cleanup
	constructor() {
		$effect(() => {
			const interval = setInterval(() => {
				const now = Date.now()
				for (const [key, item] of this.#cache) {
					if (now > item.expiresAt) {
						this.#cache.delete(key)
					}
				}
			}, 60000)

			return () => clearInterval(interval)
		})
	}
}

Cuándo NO Usar Clases

Las clases agregan estructura pero también ceremonia. No las uses cuando:

Contexto Simple

Para contextos simples con uno o dos campos de estado y lógica mínima, un objeto plano es más limpio:

// ❌ Overkill for simple context
class ToggleContext {
	value = $state(false)
	toggle() {
		this.value = !this.value
	}
}

// ✅ Simple object is better
export function createToggleContext() {
	let value = $state(false)

	return setContext('toggle', {
		get value() {
			return value
		},
		toggle() {
			value = !value
		}
	})
}

Estado Singleton

Si tienes estado a nivel de aplicación que no necesita la API de contexto (no depende de la posición en el árbol de componentes), considera usar un módulo simple:

// global-state.svelte.ts
// ✅ Simpler for true globals
export const appState = {
	#darkMode: $state(false),

	get darkMode() {
		return this.#darkMode
	},
	toggleDarkMode() {
		this.#darkMode = !this.#darkMode
	}
}

// Use directly without context:
// import { appState } from './global-state.svelte'

Utilidades Sin Estado

No envuelvas utilidades sin estado en clases:

// ❌ Class with no state is just functions with extra steps
class Validators {
	isEmail(value: string) {
		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
	}
}

// ✅ Just use functions
export function isEmail(value: string) {
	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
}

Herencia Profundamente Anidada

Evita las jerarquías de herencia profundas. Son difíciles de entender y mantener:

// ❌ Deep inheritance is confusing
class BaseContext {
	/* ... */
}
class StatefulContext extends BaseContext {
	/* ... */
}
class PersistentContext extends StatefulContext {
	/* ... */
}
class UserContext extends PersistentContext {
	/* ... */
}

// ✅ Prefer composition
class UserContext {
	#persistence = new Persistence('user')
	#state = new StateMachine(/* ... */)
	// ...
}

Ejemplo Completo de Producción

Aquí hay un sistema de notificaciones completo que demuestra todos los patrones:

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

const NOTIFICATIONS_KEY = Symbol('notifications')

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

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

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

export class NotificationsContext {
	// Private state
	#notifications = $state<Notification[]>([])
	#timers = new Map<string, ReturnType<typeof setTimeout>>()

	// Configuration
	readonly #defaultDuration: number
	readonly #maxNotifications: number

	constructor(options: { defaultDuration?: number; maxNotifications?: number } = {}) {
		this.#defaultDuration = options.defaultDuration ?? 5000
		this.#maxNotifications = options.maxNotifications ?? 5
	}

	// Public getters
	get all(): readonly Notification[] {
		return this.#notifications
	}

	get count() {
		return this.#notifications.length
	}

	get hasNotifications() {
		return this.#notifications.length > 0
	}

	// Convenience methods for common notification types
	info(message: string, options?: Omit<NotificationOptions, 'type'>) {
		return this.add(message, { ...options, type: 'info' })
	}

	success(message: string, options?: Omit<NotificationOptions, 'type'>) {
		return this.add(message, { ...options, type: 'success' })
	}

	warning(message: string, options?: Omit<NotificationOptions, 'type'>) {
		return this.add(message, { ...options, type: 'warning' })
	}

	error(message: string, options?: Omit<NotificationOptions, 'type'>) {
		// Errors stay longer and don't auto-dismiss by default
		return this.add(message, { duration: 0, ...options, type: 'error' })
	}

	// Core add method
	add(message: string, options: NotificationOptions = {}): string {
		const { type = 'info', duration = this.#defaultDuration, dismissible = true } = options

		const id = this.#generateId()

		const notification: Notification = {
			id,
			message,
			type,
			timestamp: Date.now(),
			dismissible
		}

		// Add to the beginning (newest first)
		this.#notifications.unshift(notification)

		// Enforce max notifications
		while (this.#notifications.length > this.#maxNotifications) {
			const oldest = this.#notifications.pop()
			if (oldest) {
				this.#clearTimer(oldest.id)
			}
		}

		// Set up auto-dismiss if duration > 0
		if (duration > 0) {
			const timer = setTimeout(() => {
				this.dismiss(id)
			}, duration)
			this.#timers.set(id, timer)
		}

		return id
	}

	// Dismiss a specific notification
	dismiss(id: string) {
		const index = this.#notifications.findIndex((n) => n.id === id)
		if (index !== -1) {
			this.#notifications.splice(index, 1)
			this.#clearTimer(id)
		}
	}

	// Dismiss all notifications
	dismissAll() {
		for (const notification of this.#notifications) {
			this.#clearTimer(notification.id)
		}
		this.#notifications.length = 0
	}

	// Dismiss all notifications of a specific type
	dismissByType(type: NotificationType) {
		const toDismiss = this.#notifications.filter((n) => n.type === type).map((n) => n.id)

		for (const id of toDismiss) {
			this.dismiss(id)
		}
	}

	// Private helpers
	#generateId(): string {
		return `notification-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
	}

	#clearTimer(id: string) {
		const timer = this.#timers.get(id)
		if (timer) {
			clearTimeout(timer)
			this.#timers.delete(id)
		}
	}
}

// Context setup helpers
export function setNotificationsContext(
	options?: ConstructorParameters<typeof NotificationsContext>[0]
) {
	return setContext(NOTIFICATIONS_KEY, new NotificationsContext(options))
}

export function getNotificationsContext(): NotificationsContext {
	if (!hasContext(NOTIFICATIONS_KEY)) {
		throw new Error(
			'Notifications context not found. ' + 'Wrap your component tree with a NotificationsProvider.'
		)
	}
	return getContext(NOTIFICATIONS_KEY)
}

Componente proveedor con UI:

<!-- NotificationsProvider.svelte -->
<script lang="ts">
	import { setNotificationsContext } from './notifications-context.svelte'
	import { fly, fade } from 'svelte/transition'
	import type { Snippet } from 'svelte'

	interface Props {
		defaultDuration?: number
		maxNotifications?: number
		children: Snippet
	}

	let { defaultDuration = 5000, maxNotifications = 5, children }: Props = $props()

	const notifications = setNotificationsContext({
		defaultDuration,
		maxNotifications
	})
</script>

{@render children()}

<!-- Toast container -->
{#if notifications.hasNotifications}
	<div class="notifications-container" role="region" aria-label="Notifications" aria-live="polite">
		{#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="notification-message">{notification.message}</span>

				{#if notification.dismissible}
					<button
						class="notification-dismiss"
						onclick={() => notifications.dismiss(notification.id)}
						aria-label="Dismiss notification"
					>
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
							<path d="M18 6L6 18M6 6l12 12" />
						</svg>
					</button>
				{/if}
			</div>
		{/each}
	</div>
{/if}

<style>
	.notifications-container {
		position: fixed;
		top: 1rem;
		right: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		z-index: 9999;
		max-width: 400px;
	}

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

	.notification-info {
		border-left-color: #3b82f6;
	}

	.notification-success {
		border-left-color: #10b981;
	}

	.notification-warning {
		border-left-color: #f59e0b;
	}

	.notification-error {
		border-left-color: #ef4444;
	}

	.notification-message {
		flex: 1;
		font-size: 0.9375rem;
		line-height: 1.5;
		color: #1e293b;
	}

	.notification-dismiss {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		padding: 0;
		border: none;
		background: none;
		color: #94a3b8;
		cursor: pointer;
		transition: color 0.2s;
	}

	.notification-dismiss:hover {
		color: #475569;
	}

	.notification-dismiss svg {
		width: 100%;
		height: 100%;
	}
</style>

Uso a lo largo de la aplicación:

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

	const notifications = getNotificationsContext()

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

	function handleFormSubmit() {
		if (!validateForm()) {
			notifications.warning('Please fill in all required fields')
			return
		}
		// ... proceed with submission
	}
</script>

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

Conclusión

El contexto basado en clases representa la evolución natural de los patrones de gestión de estado a medida que crece la complejidad. Cuando un contexto tiene múltiples campos de estado relacionados, propiedades computadas, métodos de acción y consideraciones de ciclo de vida, las clases proporcionan la estructura organizacional que mantiene el código mantenible.

La idea clave es que las runas de Svelte 5 funcionan perfectamente dentro de las clases. $state crea campos reactivos. Los getters de JavaScript sirven como propiedades computadas (similares a $derived). $effect en los constructores maneja la configuración del ciclo de vida. Los campos privados refuerzan la encapsulación. TypeScript proporciona seguridad de tipos y soporte para el IDE.

Pero las clases no siempre son la respuesta. Los contextos simples con uno o dos campos de estado se sirven mejor con objetos simples. El estado verdaderamente global puede no necesitar contexto en absoluto. Las utilidades sin estado simplemente deben ser funciones. El objetivo es hacer coincidir la solución con la complejidad del problema—ni más ni menos.

Cuando sí recurras a las clases, los patrones de este artículo te servirán bien: campos privados para la encapsulación, getters para valores computados, parámetros de constructor para la configuración, comportamientos compuestos para la reutilización, y tipado explícito para la seguridad.

Puntos Clave

Las clases organizan contextos complejos. Cuando un contexto tiene muchos campos de estado relacionados, métodos y valores computados, una clase proporciona una estructura clara que los objetos simples no tienen.

Las runas funcionan dentro de las clases. Usa $state para campos reactivos, getters de JavaScript para propiedades computadas, y $effect en los constructores para la gestión del ciclo de vida. La sintaxis es familiar; la clase solo proporciona organización.

Los campos privados refuerzan la encapsulación. La sintaxis #field de TypeScript crea estado verdaderamente privado al que los consumidores no pueden acceder directamente, obligándolos a usar tu API pública.

Los getters reemplazan a $derived. En contextos de clase, los getters nativos de JavaScript cumplen el mismo propósito que $derived—calculan valores de forma reactiva sin necesidad de la runa.

Los constructores inicializan pero no deben bloquear. Usa los constructores para configurar el estado inicial y los efectos, pero maneja las operaciones asíncronas mediante métodos explícitos o efectos que se ejecuten después de la construcción.

La composición supera a la herencia. Crea módulos de comportamiento reutilizables (persistencia, historial, validación) y compónlos en clases de contexto en lugar de crear jerarquías de herencia profundas.

Adecúa la complejidad a las necesidades. Los contextos simples no necesitan clases. Usa objetos simples para uno o dos campos de estado. Reserva las clases para contextos donde los beneficios organizacionales superen la ceremonia.

¿Qué Sigue?

¿Listo para aplicar el contexto basado en clases a funcionalidades del mundo real? El siguiente artículo, Context as a Feature Boundary, muestra cómo encapsular funcionalidades completas—como carritos de compra, autenticación y notificaciones—detrás de APIs limpias y testeables. Aprenderás a reemplazar los stores globales, componer funcionalidades de forma segura y escalar tu arquitectura a medida que tu aplicación crece.

Ver También

Documentación Oficial

Svelte 5 Classes — Uso de runas en clases
TypeScript Class Fields — Campos privados y modificadores de acceso