Introducción

La rune $derived crea valores que son computados a partir de otros valores reactivos. Cuando esos valores fuente cambian, el valor derivado se recalcula automáticamente. Este es uno de los conceptos más poderosos del sistema de reactividad de Svelte 5—te permite expresar relaciones de datos complejas de forma declarativa mientras el framework se encarga de toda la lógica de actualización.

Analogía: Piensa en un valor derivado como un marcador en vivo en un partido deportivo. El marcador no tiene su propia opinión sobre el puntaje—simplemente refleja el estado actual del juego. Cuando un equipo anota, el marcador se actualiza automáticamente.

Svelte 5 ofrece dos formas de la rune derivada:

$derived(expression) — Para cómputos simples de una sola expresión
$derived.by(() => { ... }) — Para lógica compleja que requiere múltiples sentencias

Este tutorial cubre cada forma en profundidad, explica cuándo usar cada una y proporciona extensos ejemplos del mundo real para ayudarte a dominar los cómputos reactivos en Svelte 5.

Parte 1: La rune `$derived`

¿Qué es `$derived`?

$derived crea un valor reactivo a partir de una expresión única. Cuando cualquier valor reactivo en esa expresión cambia, el valor derivado se recalcula automáticamente.

Los valores derivados son memoizados automáticamente—solo se recalculan cuando las dependencias cambian, lo que los hace perfectos para cómputos costosos.

<script>
	let count = $state(5)
	let doubled = $derived(count * 2) // Always count * 2
</script>

<p>{count} × 2 = {doubled}</p>

La restricción clave: $derived() recibe exactamente una expresión — sin punto y coma, sin múltiples sentencias, sin flujo de control. Piénsalo como una fórmula en una celda de una hoja de cálculo.

Sintaxis básica

let derivedValue = $derived(expression)

Donde expression puede ser:

Aritmética: count * 2, price + tax
Llamadas a métodos: items.filter(...), name.toUpperCase()
Operadores ternarios: isActive ? 'Yes' : 'No'
Literales de plantilla: `Hello, ${name}!`
Acceso a propiedades: user.profile.name
Métodos encadenados: items.filter(...).map(...).join(', ')

Cuándo usar `$derived`

Usa $derived cuando tu cómputo cabe en una expresión única sin pasos intermedios.

Buenos casos de uso para $derived:

<script>
	let price = $state(100)
	let quantity = $state(2)
	let taxRate = $state(0.08)
	let items = $state(['banana', 'apple', 'cherry'])
	let user = $state({ firstName: 'Alice', lastName: 'Smith' })

	// Simple arithmetic
	let subtotal = $derived(price * quantity)
	let tax = $derived(subtotal * taxRate)
	let total = $derived(subtotal + tax)

	// Array operations
	let sorted = $derived([...items].sort())
	let count = $derived(items.length)
	let first = $derived(items[0])
	let hasItems = $derived(items.length > 0)

	// String operations
	let fullName = $derived(`${user.firstName} ${user.lastName}`)
	let initials = $derived(`${user.firstName[0]}${user.lastName[0]}`)

	// Ternary expressions
	let status = $derived(total > 500 ? 'Premium Order' : 'Standard Order')
	let discount = $derived(quantity >= 10 ? 0.1 : 0)

	// Chained methods (still one expression)
	let processed = $derived(
		items
			.filter((i) => i.length > 4)
			.map((i) => i.toUpperCase())
			.join(', ')
	)

	// Nullish coalescing and optional chaining
	let displayName = $derived(user?.nickname ?? user.firstName)
</script>

Regla general: Si puedes escribirlo sin punto y coma ni llaves { }, usa $derived().

Ejemplos del mundo real con `$derived`

1. Totales del carrito de compras

<script>
	let cart = $state([
		{ name: 'T-Shirt', price: 25.99, quantity: 2 },
		{ name: 'Jeans', price: 59.99, quantity: 1 },
		{ name: 'Socks', price: 8.99, quantity: 3 }
	])

	let itemCount = $derived(cart.reduce((sum, item) => sum + item.quantity, 0))
	let subtotal = $derived(cart.reduce((sum, item) => sum + item.price * item.quantity, 0))
	let shipping = $derived(subtotal > 100 ? 0 : 9.99)
	let total = $derived(subtotal + shipping)
	let freeShippingRemaining = $derived(Math.max(0, 100 - subtotal))
</script>

<h2>Your Cart ({itemCount} items)</h2>

{#each cart as item}
	<div class="cart-item">
		<span>{item.name}</span>
		<input type="number" bind:value={item.quantity} min="1" />
		<span>${(item.price * item.quantity).toFixed(2)}</span>
	</div>
{/each}

<hr />
<p>Subtotal: ${subtotal.toFixed(2)}</p>
<p>Shipping: {shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</p>

{#if freeShippingRemaining > 0}
	<p class="promo">Add ${freeShippingRemaining.toFixed(2)} more for free shipping!</p>
{/if}

<p class="total">Total: ${total.toFixed(2)}</p>

2. Búsqueda y filtrado

<script>
	let products = $state([
		{ name: 'MacBook Pro', category: 'Electronics', price: 1999 },
		{ name: 'iPhone', category: 'Electronics', price: 999 },
		{ name: 'Coffee Maker', category: 'Kitchen', price: 79 },
		{ name: 'Standing Desk', category: 'Furniture', price: 599 },
		{ name: 'Headphones', category: 'Electronics', price: 299 }
	])

	let searchQuery = $state('')
	let selectedCategory = $state('all')
	let maxPrice = $state(2000)

	// Each filter step is a simple expression
	let searchFiltered = $derived(
		products.filter((p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
	)

	let categoryFiltered = $derived(
		selectedCategory === 'all'
			? searchFiltered
			: searchFiltered.filter((p) => p.category === selectedCategory)
	)

	let priceFiltered = $derived(categoryFiltered.filter((p) => p.price <= maxPrice))

	let resultCount = $derived(priceFiltered.length)
	let categories = $derived([...new Set(products.map((p) => p.category))])
</script>

<input type="search" bind:value={searchQuery} placeholder="Search products..." />

<select bind:value={selectedCategory}>
	<option value="all">All Categories</option>
	{#each categories as cat}
		<option value={cat}>{cat}</option>
	{/each}
</select>

<label>
	Max Price: ${maxPrice}
	<input type="range" bind:value={maxPrice} min="0" max="2000" />
</label>

<p>Showing {resultCount} products</p>

{#each priceFiltered as product}
	<div class="product">
		<h3>{product.name}</h3>
		<p>{product.category} • ${product.price}</p>
	</div>
{/each}

3. Contador de caracteres en tiempo real

<script>
	let text = $state('')
	let maxLength = $state(280)

	let charCount = $derived(text.length)
	let remaining = $derived(maxLength - charCount)
	let percentage = $derived((charCount / maxLength) * 100)
	let isOverLimit = $derived(charCount > maxLength)
	let isNearLimit = $derived(remaining <= 20 && remaining > 0)
	let wordCount = $derived(text.trim() ? text.trim().split(/\s+/).length : 0)
</script>

<textarea bind:value={text} placeholder="What's happening?"></textarea>

<div class="counter" class:warning={isNearLimit} class:error={isOverLimit}>
	{remaining} characters remaining • {wordCount} words
</div>

<div class="progress-bar">
	<div
		class="progress"
		style="width: {Math.min(percentage, 100)}%"
		class:warning={isNearLimit}
		class:error={isOverLimit}
	></div>
</div>

<button disabled={isOverLimit || charCount === 0}> Post </button>

<style>
	.warning {
		color: #f39c12;
	}
	.error {
		color: #e74c3c;
	}
	.progress-bar {
		height: 4px;
		background: #eee;
		border-radius: 2px;
	}
	.progress {
		height: 100%;
		background: #3498db;
		transition: width 0.2s;
	}
	.progress.warning {
		background: #f39c12;
	}
	.progress.error {
		background: #e74c3c;
	}
</style>

4. Conversor de divisas

<script>
	let amount = $state(100)
	let fromCurrency = $state('USD')
	let toCurrency = $state('EUR')

	// In real app, these would come from an API
	let rates = $state({
		USD: 1,
		EUR: 0.92,
		GBP: 0.79,
		JPY: 149.5,
		CAD: 1.36
	})

	let converted = $derived((amount / rates[fromCurrency]) * rates[toCurrency])
	let formattedResult = $derived(
		new Intl.NumberFormat('en-US', {
			style: 'currency',
			currency: toCurrency
		}).format(converted)
	)
	let exchangeRate = $derived((rates[toCurrency] / rates[fromCurrency]).toFixed(4))
</script>

<input type="number" bind:value={amount} />
<select bind:value={fromCurrency}>
	{#each Object.keys(rates) as currency}
		<option value={currency}>{currency}</option>
	{/each}
</select>

<span>→</span>

<select bind:value={toCurrency}>
	{#each Object.keys(rates) as currency}
		<option value={currency}>{currency}</option>
	{/each}
</select>

<p class="result">{formattedResult}</p>
<p class="rate">1 {fromCurrency} = {exchangeRate} {toCurrency}</p>

5. Formato de fecha y hora

<script>
	let selectedDate = $state(new Date())

	let formattedDate = $derived(selectedDate.toLocaleDateString('en-US', { dateStyle: 'full' }))
	let formattedTime = $derived(selectedDate.toLocaleTimeString('en-US', { timeStyle: 'short' }))
	let relativeTime = $derived(getRelativeTime(selectedDate))
	let dayOfYear = $derived(
		Math.floor((selectedDate - new Date(selectedDate.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
	)
	let weekNumber = $derived(Math.ceil(dayOfYear / 7))
	let isWeekend = $derived([0, 6].includes(selectedDate.getDay()))
	let quarter = $derived(Math.ceil((selectedDate.getMonth() + 1) / 3))

	function getRelativeTime(date) {
		const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
		const diff = date - new Date()
		const days = Math.round(diff / (1000 * 60 * 60 * 24))
		if (Math.abs(days) < 1) return 'today'
		return rtf.format(days, 'day')
	}
</script>

<input type="datetime-local" bind:value={selectedDate} />

<dl>
	<dt>Full Date</dt>
	<dd>{formattedDate}</dd>

	<dt>Time</dt>
	<dd>{formattedTime}</dd>

	<dt>Relative</dt>
	<dd>{relativeTime}</dd>

	<dt>Day of Year</dt>
	<dd>{dayOfYear}</dd>

	<dt>Week Number</dt>
	<dd>{weekNumber}</dd>

	<dt>Quarter</dt>
	<dd>Q{quarter}</dd>

	<dt>Weekend?</dt>
	<dd>{isWeekend ? 'Yes 🎉' : 'No'}</dd>
</dl>

Valores derivados vs. cálculos directos en la plantilla

¿Por qué usar $derived en lugar de calcular directamente en la plantilla?

<script>
	let items = $state([
		{ name: 'Apple', price: 1.5, quantity: 3 },
		{ name: 'Banana', price: 0.75, quantity: 5 }
	])

	// With $derived - calculated once, reused everywhere
	let total = $derived(items.reduce((sum, item) => sum + item.price * item.quantity, 0))
</script>

<!-- Option 1: Using $derived (better) -->
<p>Total: ${total.toFixed(2)}</p>
<p>With tax: ${(total * 1.08).toFixed(2)}</p>
<p>Per item average: ${(total / items.length).toFixed(2)}</p>

<!-- Option 2: Calculating in template (worse) -->
<p>Total: ${items.reduce((s, i) => s + i.price * i.quantity, 0).toFixed(2)}</p>
<p>With tax: ${(items.reduce((s, i) => s + i.price * i.quantity, 0) * 1.08).toFixed(2)}</p>
<!-- The reduce runs THREE times! -->

Beneficios de $derived:

Calcula una vez por cambio y almacena el resultado en caché
Hace el código más legible
Puede reutilizarse en toda la plantilla
Más fácil de depurar y testear

Parte 2: La rune `$derived.by`

¿Qué es `$derived.by`?

$derived.by crea un valor reactivo a partir de un cuerpo de función. A diferencia de $derived, puede contener múltiples sentencias, variables intermedias, flujo de control, bucles, bloques try/catch y retornos anticipados.

<script>
	let numbers = $state([1, 5, 3, 9, 2, 7])

	let stats = $derived.by(() => {
		// Multiple statements and variables
		const sorted = [...numbers].sort((a, b) => a - b)
		const sum = numbers.reduce((a, b) => a + b, 0)
		const avg = sum / numbers.length

		// Multi-step calculation
		const mid = Math.floor(sorted.length / 2)
		const median = sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid]

		// Return the computed result
		return { min: sorted[0], max: sorted.at(-1), sum, avg, median }
	})
</script>

Sintaxis básica

let derivedValue = $derived.by(() => {
	// Multiple statements
	// Local variables
	// Control flow
	return result
})

La función pasada a $derived.by debe:

Ser sincrónica (sin async/await)
Retornar un valor
Ser un cómputo puro (sin efectos secundarios)

Cuándo usar `$derived.by`

Usa $derived.by cuando necesites:

Múltiples sentencias — Más de una línea de lógica
Variables intermedias — Variables para almacenar resultados parciales
Flujo de control — if/else, switch, for, while
Retornos anticipados — Retornar desde diferentes rutas de código
Try/catch — Manejo de errores
Transformaciones complejas — Procesamiento de datos en múltiples pasos

Ejemplos del mundo real con `$derived.by`

1. Sistema de permisos de usuario

<script>
	let user = $state({
		id: 1,
		name: 'Alice',
		role: 'editor',
		subscription: 'premium',
		verified: true,
		loginCount: 42,
		createdAt: new Date('2023-01-15')
	})

	let permissions = $derived.by(() => {
		// Admin gets everything - early return
		if (user.role === 'admin') {
			return {
				canRead: true,
				canWrite: true,
				canDelete: true,
				canPublish: true,
				canManageUsers: true,
				canAccessAnalytics: true,
				canExport: true
			}
		}

		// Start with base permissions
		const perms = {
			canRead: true,
			canWrite: false,
			canDelete: false,
			canPublish: false,
			canManageUsers: false,
			canAccessAnalytics: false,
			canExport: false
		}

		// Role-based permissions
		if (user.role === 'editor') {
			perms.canWrite = true
			perms.canPublish = true
		} else if (user.role === 'author') {
			perms.canWrite = true
		}

		// Subscription-based upgrades
		if (user.subscription === 'premium') {
			perms.canAccessAnalytics = true
			perms.canExport = true
		} else if (user.subscription === 'pro') {
			perms.canExport = true
		}

		// Verified users can delete their own content
		if (user.verified) {
			perms.canDelete = true
		}

		// Veteran users (1+ year) get analytics
		const accountAge = Date.now() - user.createdAt.getTime()
		const oneYear = 365 * 24 * 60 * 60 * 1000
		if (accountAge > oneYear) {
			perms.canAccessAnalytics = true
		}

		return perms
	})
</script>

<h2>Permissions for {user.name}</h2>
<ul>
	{#each Object.entries(permissions) as [perm, allowed]}
		<li class:granted={allowed} class:denied={!allowed}>
			{perm}: {allowed ? 'yes' : 'no'}
		</li>
	{/each}
</ul>

2. Validación de formularios con errores detallados

<script>
	let form = $state({
		email: '',
		password: '',
		confirmPassword: '',
		age: '',
		website: ''
	})

	let validation = $derived.by(() => {
		const errors = {}
		const warnings = {}

		// Email validation
		if (!form.email) {
			errors.email = 'Email is required'
		} else if (!form.email.includes('@')) {
			errors.email = 'Please enter a valid email address'
		} else if (form.email.endsWith('.con')) {
			warnings.email = 'Did you mean .com?'
		}

		// Password validation
		if (!form.password) {
			errors.password = 'Password is required'
		} else {
			const pwd = form.password
			const issues = []

			if (pwd.length < 8) issues.push('at least 8 characters')
			if (!/[A-Z]/.test(pwd)) issues.push('one uppercase letter')
			if (!/[a-z]/.test(pwd)) issues.push('one lowercase letter')
			if (!/[0-9]/.test(pwd)) issues.push('one number')
			if (!/[^A-Za-z0-9]/.test(pwd)) issues.push('one special character')

			if (issues.length > 0) {
				errors.password = `Password needs: ${issues.join(', ')}`
			}
		}

		// Confirm password
		if (form.password && form.confirmPassword !== form.password) {
			errors.confirmPassword = 'Passwords do not match'
		}

		// Age validation
		if (form.age) {
			const age = parseInt(form.age)
			if (isNaN(age)) {
				errors.age = 'Please enter a valid number'
			} else if (age < 13) {
				errors.age = 'You must be at least 13 years old'
			} else if (age > 120) {
				errors.age = 'Please enter a realistic age'
			} else if (age < 18) {
				warnings.age = 'Parental consent may be required'
			}
		}

		// Website validation (optional field)
		if (form.website) {
			try {
				new URL(form.website)
			} catch {
				// Try adding https://
				try {
					new URL(`https://${form.website}`)
					warnings.website = 'Consider adding https://'
				} catch {
					errors.website = 'Please enter a valid URL'
				}
			}
		}

		const errorCount = Object.keys(errors).length
		const warningCount = Object.keys(warnings).length
		const isValid = errorCount === 0

		return { errors, warnings, errorCount, warningCount, isValid }
	})
</script>

<form>
	<div class="field">
		<label>Email</label>
		<input type="email" bind:value={form.email} />
		{#if validation.errors.email}
			<span class="error">{validation.errors.email}</span>
		{:else if validation.warnings.email}
			<span class="warning">{validation.warnings.email}</span>
		{/if}
	</div>

	<div class="field">
		<label>Password</label>
		<input type="password" bind:value={form.password} />
		{#if validation.errors.password}
			<span class="error">{validation.errors.password}</span>
		{/if}
	</div>

	<div class="field">
		<label>Confirm Password</label>
		<input type="password" bind:value={form.confirmPassword} />
		{#if validation.errors.confirmPassword}
			<span class="error">{validation.errors.confirmPassword}</span>
		{/if}
	</div>

	<div class="field">
		<label>Age</label>
		<input type="number" bind:value={form.age} />
		{#if validation.errors.age}
			<span class="error">{validation.errors.age}</span>
		{:else if validation.warnings.age}
			<span class="warning">{validation.warnings.age}</span>
		{/if}
	</div>

	<div class="field">
		<label>Website (optional)</label>
		<input type="text" bind:value={form.website} />
		{#if validation.errors.website}
			<span class="error">{validation.errors.website}</span>
		{:else if validation.warnings.website}
			<span class="warning">{validation.warnings.website}</span>
		{/if}
	</div>

	<button type="submit" disabled={!validation.isValid}>
		Submit ({validation.errorCount} errors, {validation.warningCount} warnings)
	</button>
</form>

3. Generador de Reportes Financieros

<script>
	let transactions = $state([
		{ date: '2024-01-05', type: 'income', amount: 5000, category: 'salary' },
		{ date: '2024-01-10', type: 'expense', amount: 1200, category: 'rent' },
		{ date: '2024-01-12', type: 'expense', amount: 85, category: 'utilities' },
		{ date: '2024-01-15', type: 'income', amount: 500, category: 'freelance' },
		{ date: '2024-01-18', type: 'expense', amount: 150, category: 'groceries' },
		{ date: '2024-01-22', type: 'expense', amount: 60, category: 'entertainment' },
		{ date: '2024-01-25', type: 'expense', amount: 200, category: 'groceries' },
		{ date: '2024-01-28', type: 'income', amount: 250, category: 'dividends' }
	])

	let report = $derived.by(() => {
		// Initialize accumulators
		let totalIncome = 0
		let totalExpenses = 0
		const incomeByCategory = {}
		const expensesByCategory = {}
		const dailyBalance = []

		// Track running balance for chart data
		let runningBalance = 0

		// Sort transactions by date for running balance
		const sortedTransactions = [...transactions].sort((a, b) => new Date(a.date) - new Date(b.date))

		// Single pass through data
		for (const t of sortedTransactions) {
			if (t.type === 'income') {
				totalIncome += t.amount
				incomeByCategory[t.category] = (incomeByCategory[t.category] || 0) + t.amount
				runningBalance += t.amount
			} else {
				totalExpenses += t.amount
				expensesByCategory[t.category] = (expensesByCategory[t.category] || 0) + t.amount
				runningBalance -= t.amount
			}

			dailyBalance.push({
				date: t.date,
				balance: runningBalance,
				transaction: t
			})
		}

		// Calculate derived metrics
		const netIncome = totalIncome - totalExpenses
		const savingsRate = totalIncome > 0 ? ((netIncome / totalIncome) * 100).toFixed(1) : 0

		// Find largest expense category
		const largestExpenseCategory = Object.entries(expensesByCategory).sort(
			([, a], [, b]) => b - a
		)[0]

		// Monthly comparison (if we had previous month data)
		const expenseBreakdown = Object.entries(expensesByCategory)
			.map(([category, amount]) => ({
				category,
				amount,
				percentage: ((amount / totalExpenses) * 100).toFixed(1)
			}))
			.sort((a, b) => b.amount - a.amount)

		// Budget warnings
		const warnings = []
		if (savingsRate < 10) {
			warnings.push('Savings rate below recommended 10%')
		}
		if (expensesByCategory.entertainment > totalIncome * 0.1) {
			warnings.push('Entertainment exceeds 10% of income')
		}

		return {
			totalIncome,
			totalExpenses,
			netIncome,
			savingsRate,
			incomeByCategory,
			expensesByCategory,
			expenseBreakdown,
			largestExpenseCategory: largestExpenseCategory
				? { name: largestExpenseCategory[0], amount: largestExpenseCategory[1] }
				: null,
			dailyBalance,
			currentBalance: runningBalance,
			transactionCount: transactions.length,
			warnings
		}
	})
</script>

<h2>Financial Report</h2>

<div class="summary-cards">
	<div class="card income">
		<h3>Income</h3>
		<p class="amount">${report.totalIncome.toLocaleString()}</p>
	</div>
	<div class="card expenses">
		<h3>Expenses</h3>
		<p class="amount">${report.totalExpenses.toLocaleString()}</p>
	</div>
	<div
		class="card balance"
		class:positive={report.netIncome >= 0}
		class:negative={report.netIncome < 0}
	>
		<h3>Net</h3>
		<p class="amount">${report.netIncome.toLocaleString()}</p>
	</div>
</div>

<p>Savings Rate: {report.savingsRate}%</p>

{#if report.largestExpenseCategory}
	<p>
		Largest expense: {report.largestExpenseCategory.name} (${report.largestExpenseCategory.amount})
	</p>
{/if}

<h3>Expense Breakdown</h3>
{#each report.expenseBreakdown as item}
	<div class="expense-bar">
		<span>{item.category}</span>
		<div class="bar" style="width: {item.percentage}%"></div>
		<span>${item.amount} ({item.percentage}%)</span>
	</div>
{/each}

{#if report.warnings.length > 0}
	<div class="warnings">
		<h3>Warnings</h3>
		<ul>
			{#each report.warnings as warning}
				<li>{warning}</li>
			{/each}
		</ul>
	</div>
{/if}

4. Parser de Markdown con Manejo de Errores

<script>
	let markdownInput = $state(`# Hello World

This is a **bold** statement and this is *italic*.

- Item 1
- Item 2
- Item 3

> A blockquote

\`\`\`javascript
const x = 42;
\`\`\`
`)

	let parsed = $derived.by(() => {
		try {
			let html = markdownInput

			// Track what we've processed for stats
			const stats = {
				headings: 0,
				bold: 0,
				italic: 0,
				lists: 0,
				codeBlocks: 0,
				blockquotes: 0
			}

			// Process code blocks first (to avoid processing their contents)
			const codeBlocks = []
			html = html.replace(/```

(\w*)\n([\s\S]*?)

```/g, (match, lang, code) => {
				stats.codeBlocks++
				const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`
				codeBlocks.push({ lang, code: code.trim() })
				return placeholder
			})

			// Headings
			html = html.replace(/^### (.+)$/gm, (_, text) => {
				stats.headings++
				return `<h3>${text}</h3>`
			})
			html = html.replace(/^## (.+)$/gm, (_, text) => {
				stats.headings++
				return `<h2>${text}</h2>`
			})
			html = html.replace(/^# (.+)$/gm, (_, text) => {
				stats.headings++
				return `<h1>${text}</h1>`
			})

			// Bold and italic
			html = html.replace(/\*\*(.+?)\*\*/g, (_, text) => {
				stats.bold++
				return `<strong>${text}</strong>`
			})
			html = html.replace(/\*(.+?)\*/g, (_, text) => {
				stats.italic++
				return `<em>${text}</em>`
			})

			// Lists
			html = html.replace(/^- (.+)$/gm, (_, text) => {
				stats.lists++
				return `<li>${text}</li>`
			})
			html = html.replace(/(<li>.*<\/li>\n?)+/g, (match) => {
				return `<ul>${match}</ul>`
			})

			// Blockquotes
			html = html.replace(/^> (.+)$/gm, (_, text) => {
				stats.blockquotes++
				return `<blockquote>${text}</blockquote>`
			})

			// Restore code blocks
			codeBlocks.forEach((block, i) => {
				const highlighted = `<pre><code class="language-${block.lang}">${escapeHtml(block.code)}</code></pre>`
				html = html.replace(`__CODE_BLOCK_${i}__`, highlighted)
			})

			// Paragraphs (lines that aren't already wrapped)
			html = html
				.split('\n\n')
				.map((block) => {
					if (block.match(/^<[^>]+>/)) return block
					if (block.trim()) return `<p>${block}</p>`
					return ''
				})
				.join('\n')

			return {
				success: true,
				html,
				stats,
				error: null
			}
		} catch (error) {
			return {
				success: false,
				html: '',
				stats: null,
				error: error.message
			}
		}
	})

	function escapeHtml(text) {
		return text
			.replace(/&/g, '&amp;')
			.replace(/</g, '&lt;')
			.replace(/>/g, '&gt;')
			.replace(/"/g, '"')
	}
</script>

<div class="editor">
	<textarea bind:value={markdownInput}></textarea>

	<div class="preview">
		{#if parsed.success}
			{@html parsed.html}

			<div class="stats">
				<small>
					{parsed.stats.headings} headings •
					{parsed.stats.bold} bold •
					{parsed.stats.italic} italic •
					{parsed.stats.codeBlocks} code blocks
				</small>
			</div>
		{:else}
			<div class="error">
				Parse error: {parsed.error}
			</div>
		{/if}
	</div>
</div>

5. Agrupación y Agregación Inteligente de Datos

<script>
	let employees = $state([
		{ id: 1, name: 'Alice', department: 'Engineering', salary: 95000, startDate: '2020-03-15' },
		{ id: 2, name: 'Bob', department: 'Marketing', salary: 72000, startDate: '2021-06-01' },
		{ id: 3, name: 'Carol', department: 'Engineering', salary: 88000, startDate: '2019-11-20' },
		{ id: 4, name: 'David', department: 'Sales', salary: 68000, startDate: '2022-01-10' },
		{ id: 5, name: 'Eve', department: 'Engineering', salary: 102000, startDate: '2018-07-22' },
		{ id: 6, name: 'Frank', department: 'Marketing', salary: 78000, startDate: '2020-09-05' },
		{ id: 7, name: 'Grace', department: 'Sales', salary: 71000, startDate: '2021-03-18' }
	])

	let groupBy = $state('department')

	let analysis = $derived.by(() => {
		const groups = {}
		const companyStats = {
			totalEmployees: employees.length,
			totalSalary: 0,
			avgSalary: 0,
			seniorityDistribution: { '<1yr': 0, '1-2yr': 0, '2-3yr': 0, '3+yr': 0 }
		}

		const now = new Date()

		// First pass: group employees and gather company-wide stats
		for (const emp of employees) {
			// Group by selected field
			const groupKey = emp[groupBy]
			if (!groups[groupKey]) {
				groups[groupKey] = {
					employees: [],
					totalSalary: 0,
					count: 0
				}
			}
			groups[groupKey].employees.push(emp)
			groups[groupKey].totalSalary += emp.salary
			groups[groupKey].count++

			// Company-wide stats
			companyStats.totalSalary += emp.salary

			// Seniority calculation
			const startDate = new Date(emp.startDate)
			const yearsEmployed = (now - startDate) / (365.25 * 24 * 60 * 60 * 1000)

			if (yearsEmployed < 1) companyStats.seniorityDistribution['<1yr']++
			else if (yearsEmployed < 2) companyStats.seniorityDistribution['1-2yr']++
			else if (yearsEmployed < 3) companyStats.seniorityDistribution['2-3yr']++
			else companyStats.seniorityDistribution['3+yr']++
		}

		companyStats.avgSalary = companyStats.totalSalary / companyStats.totalEmployees

		// Second pass: calculate per-group statistics
		const groupStats = []
		for (const [name, data] of Object.entries(groups)) {
			const salaries = data.employees.map((e) => e.salary).sort((a, b) => a - b)
			const avgSalary = data.totalSalary / data.count

			// Find newest and most senior employee
			const sorted = [...data.employees].sort(
				(a, b) => new Date(a.startDate) - new Date(b.startDate)
			)

			groupStats.push({
				name,
				count: data.count,
				totalSalary: data.totalSalary,
				avgSalary,
				minSalary: salaries[0],
				maxSalary: salaries[salaries.length - 1],
				salaryRange: salaries[salaries.length - 1] - salaries[0],
				topEarner: data.employees.reduce((top, emp) => (emp.salary > top.salary ? emp : top)),
				mostSenior: sorted[0],
				newest: sorted[sorted.length - 1],
				percentOfCompany: ((data.count / companyStats.totalEmployees) * 100).toFixed(1)
			})
		}

		// Sort groups by count (largest first)
		groupStats.sort((a, b) => b.count - a.count)

		return {
			groups: groupStats,
			company: companyStats,
			groupCount: groupStats.length
		}
	})
</script>

<h2>Employee Analysis</h2>

<label>
	Group by:
	<select bind:value={groupBy}>
		<option value="department">Department</option>
	</select>
</label>

<div class="company-overview">
	<h3>Company Overview</h3>
	<p>Total Employees: {analysis.company.totalEmployees}</p>
	<p>Total Payroll: ${analysis.company.totalSalary.toLocaleString()}</p>
	<p>Average Salary: ${analysis.company.avgSalary.toLocaleString()}</p>
</div>

<div class="seniority">
	<h4>Seniority Distribution</h4>
	{#each Object.entries(analysis.company.seniorityDistribution) as [range, count]}
		<span>{range}: {count}</span>
	{/each}
</div>

<h3>By {groupBy} ({analysis.groupCount} groups)</h3>

{#each analysis.groups as group}
	<details open>
		<summary>
			{group.name} - {group.count} employees ({group.percentOfCompany}% of company)
		</summary>

		<div class="group-stats">
			<p>Salary range: ${group.minSalary.toLocaleString()} - ${group.maxSalary.toLocaleString()}</p>
			<p>Average: ${Math.round(group.avgSalary).toLocaleString()}</p>
			<p>Top earner: {group.topEarner.name} (${group.topEarner.salary.toLocaleString()})</p>
			<p>Most senior: {group.mostSenior.name} (since {group.mostSenior.startDate})</p>
			<p>Newest: {group.newest.name} (since {group.newest.startDate})</p>
		</div>
	</details>
{/each}

6. Visualización de Estado con Switch

<script>
	let orderStatus = $state('processing')

	let statusDisplay = $derived.by(() => {
		switch (orderStatus) {
			case 'pending':
				return {
					icon: '⏳',
					label: 'Pending',
					color: '#f39c12',
					description: 'Your order is waiting to be processed',
					actions: ['Cancel Order']
				}
			case 'processing':
				return {
					icon: '⚙️',
					label: 'Processing',
					color: '#3498db',
					description: 'We are preparing your order',
					actions: ['Contact Support']
				}
			case 'shipped':
				return {
					icon: '📦',
					label: 'Shipped',
					color: '#9b59b6',
					description: 'Your order is on its way',
					actions: ['Track Package', 'Contact Support']
				}
			case 'delivered':
				return {
					icon: '✅',
					label: 'Delivered',
					color: '#27ae60',
					description: 'Your order has been delivered',
					actions: ['Leave Review', 'Return Item', 'Buy Again']
				}
			case 'cancelled':
				return {
					icon: '❌',
					label: 'Cancelled',
					color: '#e74c3c',
					description: 'This order was cancelled',
					actions: ['View Refund Status', 'Reorder']
				}
			default:
				return {
					icon: '❓',
					label: 'Unknown',
					color: '#95a5a6',
					description: 'Status unknown',
					actions: ['Contact Support']
				}
		}
	})
</script>

<div class="status-card" style="border-color: {statusDisplay.color}">
	<div class="status-header" style="background: {statusDisplay.color}">
		<span class="icon">{statusDisplay.icon}</span>
		<span class="label">{statusDisplay.label}</span>
	</div>
	<p>{statusDisplay.description}</p>
	<div class="actions">
		{#each statusDisplay.actions as action}
			<button>{action}</button>
		{/each}
	</div>
</div>

<label>
	Test different statuses:
	<select bind:value={orderStatus}>
		<option value="pending">Pending</option>
		<option value="processing">Processing</option>
		<option value="shipped">Shipped</option>
		<option value="delivered">Delivered</option>
		<option value="cancelled">Cancelled</option>
	</select>
</label>

Errores Comunes con `$derived.by`

1. Usar `$derived.by` Cuando `$derived` Sería Suficiente

<script>
	let count = $state(0)

	// AVOID: Overly verbose - don't do this
	let doubled = $derived.by(() => {
		return count * 2
	})

	// PREFERRED: Simple and clean
	let doubled = $derived(count * 2)
</script>

2. Efectos Secundarios en `$derived.by`

Nunca pongas efectos secundarios dentro de $derived o $derived.by — nada de fetch, nada de console.log, nada de mutaciones al estado que no te pertenece. Los valores derivados se recomputan cuando Svelte lo decide, por lo que los efectos secundarios se ejecutarán de manera impredecible. Muévelos a $effect.

Los valores derivados deben ser computaciones puras. No pongas efectos secundarios dentro de ellos:

<script>
	let count = $state(0)

	// AVOID: Side effects in derived
	let doubled = $derived.by(() => {
		console.log('Calculating doubled...') // Side effect!
		fetch('/api/log', { method: 'POST' }) // Side effect!
		someGlobalVariable = count // Side effect!
		return count * 2
	})

	// PREFERRED: Pure computation only
	let doubled = $derived(count * 2)

	// Put side effects in $effect instead
	$effect(() => {
		console.log('Count changed to:', count)
	})
</script>

3. Operaciones Asíncronas en `$derived.by`

$derived.by debe retornar un valor de forma sincrónica. No puedes usar await dentro de él. Para datos asíncronos, usa $state + $effect con un AbortController para manejar respuestas desactualizadas.

$derived.by debe ser sincrónico. No puede ser asíncrono:

<script>
	let userId = $state(1)

	// AVOID: This won't work - can't use async/await
	let user = $derived.by(async () => {
		const response = await fetch(`/api/users/${userId}`)
		return response.json()
	})

	// PREFERRED: For async data, use $effect and $state together
	let user = $state(null)
	let loading = $state(false)

	$effect(() => {
		loading = true
		fetch(`/api/users/${userId}`)
			.then((r) => r.json())
			.then((data) => {
				user = data
				loading = false
			})
	})
</script>

4. Olvidar la Sentencia Return

<script>
	let items = $state([1, 2, 3])

	// AVOID: Missing return - result is undefined!
	let sum = $derived.by(() => {
		let total = 0
		for (const item of items) {
			total += item
		}
		// Oops! Forgot to return
	})

	// PREFERRED: Always return your computed value
	let sum = $derived.by(() => {
		let total = 0
		for (const item of items) {
			total += item
		}
		return total
	})
</script>

Parte 3: `$derived` vs `$derived.by` — Las Diferencias Explicadas

Ahora que has visto ambas formas en acción, aclaremos exactamente cuándo usar cada una.

La Relación Técnica

Por debajo, $derived(expression) es azúcar sintáctico para $derived.by(() => expression). El compilador transforma:

let doubled = $derived(count * 2)

En algo conceptualmente como:

let doubled = $derived.by(() => count * 2)

Son idénticos en tiempo de ejecución — la diferencia es puramente en qué sintaxis está permitida.

Comparación Lado a Lado

Característica	`$derived(expression)`	`$derived.by(() => { ... })`
Entrada	Expresión única	Cuerpo de función
Sentencias	Solo una	Múltiples permitidas
Variables locales	❌ No es posible	✅ Permitidas
Flujo de control	Solo ternario `? :`	`if`/`else`, `switch`, bucles
Retornos tempranos	❌ No es posible	✅ Permitidos
Try/catch	❌ No es posible	✅ Permitido
Legibilidad	Conciso, obvio	Más verboso
Caso de uso	Fórmulas simples	Lógica compleja
Señal de intención	"Es directo"	"Tiene complejidad"

Diagrama de Decisión

Start
  │
  ▼
Can you write it as a single expression
(no semicolons, no { } curly braces)?
  │
  ├── YES → Use $derived(expression)
  │
  └── NO → Continue...
         │
         ▼
      Do you need any of these?
      • Multiple statements
      • Intermediate variables
      • if/else or switch
      • for/while loops
      • try/catch
      • Early returns
         │
         ├── YES → Use $derived.by(() => { ... })
         │
         └── NO → You probably can use $derived()
                  Just write it as one expression

Ejemplos: Mismo Resultado, Diferentes Enfoques

A veces puedes lograr el mismo resultado con cualquiera de las dos formas. Elige según la legibilidad:

<script>
	let numbers = $state([1, 2, 3, 4, 5])

	// Both work - choose the clearer one

	// Simple enough for $derived
	let sum = $derived(numbers.reduce((a, b) => a + b, 0))
	let avg = $derived(sum / numbers.length)

	// Or use $derived.by for more clarity
	let stats = $derived.by(() => {
		const sum = numbers.reduce((a, b) => a + b, 0)
		const avg = sum / numbers.length
		return { sum, avg }
	})
</script>

<script>
	let user = $state({ role: 'admin' })

	// Ternary works for simple conditions
	let isAdmin = $derived(user.role === 'admin' ? true : false)
	// Even simpler:
	let isAdmin = $derived(user.role === 'admin')

	// But complex conditions need $derived.by
	let accessLevel = $derived.by(() => {
		if (user.role === 'admin') return 'full'
		if (user.role === 'editor') return 'write'
		if (user.role === 'viewer') return 'read'
		return 'none'
	})
</script>

Cuándo `$derived` Se Vuelve Incómodo

Si te encuentras escribiendo expresiones complejas como esta, cambia a $derived.by:

<script>
	let cart = $state([])

	// AVOID: This works but is hard to read
	let summary = $derived(
		cart.length === 0
			? { empty: true, total: 0, message: 'Cart is empty' }
			: {
					empty: false,
					total: cart.reduce((sum, item) => sum + item.price * item.quantity, 0),
					message: `${cart.length} items in cart`
				}
	)

	// PREFERRED: Much clearer with $derived.by
	let summary = $derived.by(() => {
		if (cart.length === 0) {
			return { empty: true, total: 0, message: 'Cart is empty' }
		}

		const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0)

		return {
			empty: false,
			total,
			message: `${cart.length} items in cart`
		}
	})
</script>

Consideraciones de Rendimiento

Ambas formas tienen un rendimiento idéntico. La elección es puramente sobre claridad del código y mantenibilidad. El compilador de Svelte maneja ambas de la misma manera.

Sin embargo, mantén la computación en sí eficiente:

<script>
	let hugeArray = $state([...Array(100000).keys()])

	// AVOID: This runs every time hugeArray changes
	let sorted = $derived([...hugeArray].sort())

	// Consider if you really need this to be reactive,
	// or if you can compute it once or less frequently
</script>

Temas Avanzados

Cómo Funciona el Seguimiento de Dependencias

Svelte rastrea las dependencias en tiempo de ejecución, no analizando tu código. Observa qué valores reactivos son realmente leídos durante la ejecución.

<script>
	let showDetails = $state(false)
	let user = $state({
		name: 'Alice',
		email: 'alice@example.com',
		bio: 'Software developer'
	})

	let display = $derived(showDetails ? `${user.name} - ${user.email}: ${user.bio}` : user.name)
</script>

Cuando showDetails es false:

Se ejecuta la rama false: user.name
Dependencias: showDetails, user.name
¡Cambiar user.email o user.bio NO recalcula display!

Cuando showDetails es true:

Se ejecuta la rama true: ${user.name} - ${user.email}: ${user.bio}
Dependencias: showDetails, user.name, user.email, user.bio
Ahora cambiar cualquiera de estos recalcula display

Por qué esto importa: Svelte es inteligente para evitar trabajo innecesario. Solo recalcula cuando los valores que fueron realmente utilizados han cambiado.

Excluir Dependencias con `untrack`

A veces quieres leer un valor reactivo sin crear una dependencia. La función untrack de 'svelte' te permite hacer esto:

<script>
	import { untrack } from 'svelte'

	let count = $state(0)
	let multiplier = $state(2)

	// This derived value depends ONLY on count, not multiplier
	let result = $derived.by(() => {
		const mult = untrack(() => multiplier) // Read without tracking
		return count * mult
	})

	// Changing count → recalculates result
	// Changing multiplier → does NOT recalculate result
</script>

Casos de uso para untrack:

Valores de configuración que raramente cambian
Registro o depuración sin crear dependencias
Lecturas únicas de estado reactivo
Romper dependencias circulares

Memoización Automática

Los valores derivados solo se recalculan cuando cambian sus dependencias:

<script>
	let items = $state([
		/* ... */
	])
	let filter = $state('all')

	let filtered = $derived.by(() => {
		console.log('Recalculating...') // Only logs when items or filter changes

		if (filter === 'all') return items
		return items.filter((item) => item.category === filter)
	})
</script>

Si lees filtered múltiples veces en tu plantilla, el cálculo solo se ejecuta una vez por cambio.

Los Valores Derivados NO Son Proxies

A diferencia de $state, $derived no envuelve objetos en Proxies. El valor retornado es tal cual:

<script>
	let items = $state([
		{ name: 'A', selected: false },
		{ name: 'B', selected: true },
		{ name: 'C', selected: false }
	])

	// This finds the selected item
	let selected = $derived(items.find((item) => item.selected))
</script>

<!-- 
  selected points to the actual item in items array.
  Because items IS proxied, changing selected.name 
  actually changes items[1].name!
-->
{#if selected}
	<input bind:value={selected.name} />
{/if}

Sobreescribir Valores Derivados (UI Optimista)

Asignar directamente a una variable derivada la sobreescribe hasta la próxima vez que cambien sus dependencias fuente, momento en el que Svelte la vuelve a derivar. Esto es intencional y útil para UI optimista — pero significa que la sobreescritura es temporal, no permanente.

Los valores derivados pueden ser sobreescritos temporalmente — perfecto para actualizaciones optimistas:

<script>
	let { post } = $props()

	// Normally derived from the server data
	let likes = $derived(post.likes)

	async function handleLike() {
		// Immediately show the like (optimistic)
		likes++

		try {
			// Tell the server
			await fetch(`/api/posts/${post.id}/like`, { method: 'POST' })
			// Server will eventually update post.likes
		} catch (error) {
			// Failed! Roll back the optimistic update
			likes--
		}
	}
</script>

<button onclick={handleLike}>
	{likes}
</button>

La sobreescritura es temporal — una vez que post.likes cambia desde el servidor, likes se sincronizará de vuelta al valor derivado.

Desestructuración con `$derived`

Svelte 5 maneja la desestructuración en declaraciones $derived de forma especial — cada variable desestructurada se convierte en su propio valor derivado reactivo:

<script>
	let data = $state({ width: 10, height: 20 })

	// This WORKS in Svelte 5!
	// Each variable becomes its own derived value
	let { area, perimeter } = $derived({
		area: data.width * data.height,
		perimeter: 2 * (data.width + data.height)
	})
</script>

<p>Area: {area}</p><p>Perimeter: {perimeter}</p>

Esto es aproximadamente equivalente a:

<script>
	let _computed = $derived({
		area: data.width * data.height,
		perimeter: 2 * (data.width + data.height)
	})
	let area = $derived(_computed.area)
	let perimeter = $derived(_computed.perimeter)
</script>

Sin embargo, si desestructuras el resultado de un valor $derived después de que fue creado (no en la declaración), pierdes la reactividad:

<script>
	let data = $state({ width: 10, height: 20 })

	// AVOID: This takes a snapshot, not a reactive reference
	// area and perimeter are static values from the moment of destructuring
	let { area, perimeter } = dimensions

	// PREFERRED: Access through the derived object
	// Use dimensions.area and dimensions.perimeter in your template
	let dimensions = $derived({
		area: data.width * data.height,
		perimeter: 2 * (data.width + data.height)
	})
</script>

La distinción clave:

let { a, b } = $derived(...) → ✅ Reactivo (manejo especial del compilador)
let x = $derived(...); let { a, b } = x → ❌ No reactivo (desestructuración en tiempo de ejecución)

Si necesitas valores derivados individuales y no puedes usar el patrón de desestructuración en la declaración, defínelos por separado:

<script>
	// PREFERRED: Separate derived values
	let area = $derived(data.width * data.height)
	let perimeter = $derived(2 * (data.width + data.height))
</script>

Referencia Rápida

`$derived` — Expresiones Simples

// Arithmetic
let doubled = $derived(count * 2)
let total = $derived(price + tax + shipping)

// Array methods
let filtered = $derived(items.filter((x) => x > 0))
let sorted = $derived([...items].sort())
let first = $derived(items[0])
let count = $derived(items.length)

// String operations
let upper = $derived(name.toUpperCase())
let message = $derived(`Hello, ${name}!`)

// Ternary conditions
let status = $derived(isActive ? 'Active' : 'Inactive')
let display = $derived(loading ? 'Loading...' : data)

// Chained methods
let result = $derived(
	items
		.filter((x) => x.active)
		.map((x) => x.name)
		.join(', ')
)

// Nullish coalescing
let value = $derived(user?.name ?? 'Anonymous')

`$derived.by` — Lógica Compleja

// Multiple statements and local variables
let stats = $derived.by(() => {
	const sum = items.reduce((a, b) => a + b, 0)
	const avg = sum / items.length
	return { sum, avg }
})

// If/else control flow
let tier = $derived.by(() => {
	if (points >= 1000) return 'gold'
	if (points >= 500) return 'silver'
	return 'bronze'
})

// Switch statements
let icon = $derived.by(() => {
	switch (status) {
		case 'success':
			return '✅'
		case 'error':
			return '❌'
		default:
			return '⏳'
	}
})

// Loops
let grouped = $derived.by(() => {
	const groups = {}
	for (const item of items) {
		const key = item.category
		if (!groups[key]) groups[key] = []
		groups[key].push(item)
	}
	return groups
})

// Try/catch
let parsed = $derived.by(() => {
	try {
		return { data: JSON.parse(input), error: null }
	} catch (e) {
		return { data: null, error: e.message }
	}
})

// Early returns
let result = $derived.by(() => {
	if (!user) return null
	if (!user.verified) return { error: 'Not verified' }
	return { data: user.profile }
})

Excluir Dependencias

import { untrack } from 'svelte'

let result = $derived.by(() => {
	const config = untrack(() => configValue) // Read without tracking
	return count * config
})

Patrón de Desestructuración

// Reactive - special compiler handling
let { area, perimeter } = $derived({
	area: width * height,
	perimeter: 2 * (width + height)
})

// NOT reactive - runtime destructuring
let dimensions = $derived({ area: width * height })
let { area } = dimensions // loses reactivity

Conclusiones Clave

La runa $derived es esencial para construir aplicaciones reactivas con Svelte 5. Esto es lo que necesitas recordar:

Usa `$derived` Cuando:

Tu cálculo es una expresión simple
No se necesitan variables intermedias
La lógica cabe en una línea (o se encadena bien)
Quieres indicar "esto es sencillo"

Usa `$derived.by` Cuando:

Necesitas múltiples sentencias
Necesitas variables locales para valores intermedios
Necesitas flujo de control (if/else, switch, bucles)
Necesitas manejo de errores con try/catch
Necesitas retornos anticipados
La lógica es lo suficientemente compleja como para beneficiarse de una estructura explícita

Principios Clave:

Elige según la complejidad — Usa $derived para fórmulas simples, $derived.by para lógica compleja
Las dependencias se rastrean en tiempo de ejecución — Svelte solo recalcula cuando los valores realmente usados han cambiado
Mantén los cálculos puros — Sin efectos secundarios. Usa $effect para efectos secundarios
Los valores derivados son memoizados — Solo se recalculan cuando cambian las dependencias
Usa untrack para excluir dependencias — Cuando necesitas leer sin crear una dependencia

Con estos patrones dominados, escribirás código reactivo más limpio y eficiente que se mantiene sincronizado automáticamente con tus datos.

Introducción

Parte 1: La rune $derived

¿Qué es $derived?

Sintaxis básica

Cuándo usar $derived

Ejemplos del mundo real con $derived

1. Totales del carrito de compras

2. Búsqueda y filtrado

3. Contador de caracteres en tiempo real

4. Conversor de divisas

5. Formato de fecha y hora

Valores derivados vs. cálculos directos en la plantilla

Parte 2: La rune $derived.by

¿Qué es $derived.by?

Sintaxis básica

Cuándo usar $derived.by

Ejemplos del mundo real con $derived.by

1. Sistema de permisos de usuario

2. Validación de formularios con errores detallados

3. Generador de Reportes Financieros

4. Parser de Markdown con Manejo de Errores

5. Agrupación y Agregación Inteligente de Datos

6. Visualización de Estado con Switch

Errores Comunes con $derived.by

1. Usar $derived.by Cuando $derived Sería Suficiente

2. Efectos Secundarios en $derived.by

3. Operaciones Asíncronas en $derived.by

4. Olvidar la Sentencia Return

Parte 3: $derived vs $derived.by — Las Diferencias Explicadas

La Relación Técnica

Comparación Lado a Lado

Diagrama de Decisión

Ejemplos: Mismo Resultado, Diferentes Enfoques

Cuándo $derived Se Vuelve Incómodo

Consideraciones de Rendimiento

Temas Avanzados

Cómo Funciona el Seguimiento de Dependencias

Excluir Dependencias con untrack

Memoización Automática

Los Valores Derivados NO Son Proxies

Sobreescribir Valores Derivados (UI Optimista)

Desestructuración con $derived

Referencia Rápida

$derived — Expresiones Simples

$derived.by — Lógica Compleja

Excluir Dependencias

Patrón de Desestructuración

Conclusiones Clave

Usa $derived Cuando:

Usa $derived.by Cuando:

Principios Clave:

Ver También

Documentación Oficial

Recursos Externos

Parte 1: La rune `$derived`

¿Qué es `$derived`?

Cuándo usar `$derived`

Ejemplos del mundo real con `$derived`

Parte 2: La rune `$derived.by`

¿Qué es `$derived.by`?

Cuándo usar `$derived.by`

Ejemplos del mundo real con `$derived.by`

Errores Comunes con `$derived.by`

1. Usar `$derived.by` Cuando `$derived` Sería Suficiente

2. Efectos Secundarios en `$derived.by`

3. Operaciones Asíncronas en `$derived.by`

Parte 3: `$derived` vs `$derived.by` — Las Diferencias Explicadas

Cuándo `$derived` Se Vuelve Incómodo

Excluir Dependencias con `untrack`

Desestructuración con `$derived`

`$derived` — Expresiones Simples

`$derived.by` — Lógica Compleja

Usa `$derived` Cuando:

Usa `$derived.by` Cuando: