Constantes com Escopo para uma Lógica de Template Mais Limpa

Entre as diretivas de template do Svelte 5, @const pode parecer a mais simples — um mecanismo direto para declarar constantes locais dentro de blocos de template. No entanto, essa aparente simplicidade esconde uma ferramenta poderosa que, quando utilizada de forma eficaz, pode melhorar drasticamente a legibilidade do código, reduzir cálculos repetitivos e criar uma separação mais clara entre a transformação de dados e a lógica de apresentação.

A diretiva @const resolve uma tensão fundamental no desenvolvimento de componentes: a necessidade de realizar cálculos ou transformações em dados no ponto de uso, sem sobrecarregar a seção de script do componente com valores que só são relevantes dentro de um contexto específico de template. Entender quando e como aproveitar essa diretiva elevará seus templates Svelte de funcionais a elegantes.

O Problema

Computação no Ponto de Consumo

Considere um cenário comum no desenvolvimento de componentes. Você está iterando sobre uma coleção de itens e, para cada item, precisa calcular vários valores derivados que só são relevantes dentro daquele contexto de iteração. Sem @const, você enfrenta uma escolha desconfortável:

1: Colocar Tudo Inline

<script>
	let products = $state([
		{ name: 'Widget', price: 29.99, quantity: 3, taxRate: 0.08 },
		{ name: 'Gadget', price: 49.99, quantity: 1, taxRate: 0.08 },
		{ name: 'Gizmo', price: 19.99, quantity: 5, taxRate: 0.05 }
	])
</script>

{#each products as product}
	<div class="product-row">
		<span>{product.name}</span>
		<span>{product.quantity} × ${product.price.toFixed(2)}</span>
		<span>Subtotal: ${(product.price * product.quantity).toFixed(2)}</span>
		<span>Tax: ${(product.price * product.quantity * product.taxRate).toFixed(2)}</span>
		<span>
			Total: ${(product.price * product.quantity * (1 + product.taxRate)).toFixed(2)}
		</span>
	</div>
{/each}

Essa abordagem sofre de múltiplos problemas: cálculos repetidos, baixa legibilidade e o risco de inconsistências caso você atualize uma fórmula mas esqueça outra.

2: Pré-calcular no Script

<script>
	let products = $state([
		{ name: 'Widget', price: 29.99, quantity: 3, taxRate: 0.08 },
		{ name: 'Gadget', price: 49.99, quantity: 1, taxRate: 0.08 },
		{ name: 'Gizmo', price: 19.99, quantity: 5, taxRate: 0.05 }
	])

	let enrichedProducts = $derived(
		products.map((product) => ({
			...product,
			subtotal: product.price * product.quantity,
			tax: product.price * product.quantity * product.taxRate,
			total: product.price * product.quantity * (1 + product.taxRate)
		}))
	)
</script>

{#each enrichedProducts as product}
	<div class="product-row">
		<span>{product.name}</span>
		<span>{product.quantity} × ${product.price.toFixed(2)}</span>
		<span>Subtotal: ${product.subtotal.toFixed(2)}</span>
		<span>Tax: ${product.tax.toFixed(2)}</span>
		<span>Total: ${product.total.toFixed(2)}</span>
	</div>
{/each}

Melhor, mas agora sua seção de script contém lógica de transformação que só é relevante para essa renderização específica de template. À medida que os componentes crescem, esse padrão leva a seções de script sobrecarregadas com valores derivados que existem apenas para servir às necessidades de exibição do template.

3: A Solução com `@const`

<script>
	let products = $state([
		{ name: 'Widget', price: 29.99, quantity: 3, taxRate: 0.08 },
		{ name: 'Gadget', price: 49.99, quantity: 1, taxRate: 0.08 },
		{ name: 'Gizmo', price: 19.99, quantity: 5, taxRate: 0.05 }
	])
</script>

{#each products as product}
	{@const subtotal = product.price * product.quantity}
	{@const tax = subtotal * product.taxRate}
	{@const total = subtotal + tax}

	<div class="product-row">
		<span>{product.name}</span>
		<span>{product.quantity} × ${product.price.toFixed(2)}</span>
		<span>Subtotal: ${subtotal.toFixed(2)}</span>
		<span>Tax: ${tax.toFixed(2)}</span>
		<span>Total: ${total.toFixed(2)}</span>
	</div>
{/each}

Agora o cálculo vive exatamente onde é relevante, calculado uma vez por iteração, e os valores se constroem uns sobre os outros de forma natural. O template é limpo, o script se concentra no estado central e o fluxo da lógica é imediatamente aparente.

Sintaxe e Semântica

O Quadro Completo

A diretiva @const segue uma sintaxe direta:

{@const name = expression}

O name deve ser um identificador JavaScript válido (ou um padrão de desestruturação), e expression pode ser qualquer expressão JavaScript. A constante resultante tem escopo limitado ao bloco em que foi declarada — ela não é acessível fora desse bloco e não pode ser reatribuída.

Regras de Posicionamento

A diretiva @const só pode aparecer como filha imediata de:

Instruções de bloco: {#if ...}, {#each ...}, {#await ...}, {#key ...}
Snippets: {#snippet ...}
Componentes: <Component>...</Component>
Elementos especiais: <svelte:boundary>

Ela não pode ser usada no nível superior do template de um componente nem dentro de elementos HTML brutos. Essa restrição é intencional — constantes no nível superior pertencem à seção <script>, e {@const ...} foi projetado especificamente para computações com escopo e dependentes de contexto.

<!-- Valid placements -->
{#if condition}
	{@const value = computeSomething()}
	<p>{value}</p>
{/if}

{#each items as item}
	{@const processed = transform(item)}
	<div>{processed}</div>
{/each}

{#snippet card(data)}
	{@const formattedDate = formatDate(data.created)}
	<article>
		<time>{formattedDate}</time>
	</article>
{/snippet}

<Modal>
	{@const modalId = generateId()}
	<div id={modalId}>...</div>
</Modal>

<!-- Invalid: top-level -->
{@const topLevel = 'error'}
<!-- Compiler error! -->
<p>{topLevel}</p>

<!-- Invalid: inside HTML element -->
<div>
	{@const nested = 'error'}
	<!-- Compiler error! -->
</div>

Múltiplas Constantes e Dependências

Você pode declarar múltiplas diretivas @const dentro de um único bloco, e constantes posteriores podem referenciar as anteriores:

{#each orders as order}
	{@const itemCount = order.items.length}
	{@const subtotal = order.items.reduce((sum, item) => sum + item.price, 0)}
	{@const shipping = itemCount > 5 ? 0 : 9.99}
	{@const discount = subtotal > 100 ? subtotal * 0.1 : 0}
	{@const total = subtotal + shipping - discount}

	<div class="order-summary">
		<p>Items: {itemCount}</p>
		<p>Subtotal: ${subtotal.toFixed(2)}</p>
		{#if shipping === 0}
			<p class="free-shipping">Free shipping!</p>
		{:else}
			<p>Shipping: ${shipping.toFixed(2)}</p>
		{/if}
		{#if discount > 0}
			<p class="discount">Discount: -${discount.toFixed(2)}</p>
		{/if}
		<p class="total">Total: ${total.toFixed(2)}</p>
	</div>
{/each}

Esse padrão de dependência encadeada é um dos maiores pontos fortes do @const — ele permite construir cálculos complexos passo a passo, com cada valor intermediário claramente nomeado e disponível tanto para exibição quanto para computação adicional.

Desestruturação

Extração Elegante de Dados

A diretiva @const suporta completamente os padrões de desestruturação do JavaScript, permitindo a extração elegante de dados aninhados:

Desestruturação de Objetos

<script>
	let users = $state([
		{
			id: 1,
			profile: {
				name: 'Alice Chen',
				avatar: '/avatars/alice.jpg',
				bio: 'Software engineer and coffee enthusiast'
			},
			stats: { posts: 42, followers: 1337, following: 256 }
		},
		{
			id: 2,
			profile: {
				name: 'Bob Smith',
				avatar: '/avatars/bob.jpg',
				bio: 'Designer by day, gamer by night'
			},
			stats: { posts: 18, followers: 892, following: 143 }
		}
	])
</script>

{#each users as user (user.id)}
	{@const { name, avatar, bio } = user.profile}
	{@const { posts, followers, following } = user.stats}
	{@const engagementRatio = followers / (following || 1)}

	<article class="user-card">
		<img src={avatar} alt="{name}'s avatar" />
		<h2>{name}</h2>
		<p class="bio">{bio}</p>

		<div class="stats">
			<span>{posts} posts</span>
			<span>{followers} followers</span>
			<span>{following} following</span>
		</div>

		<div class="engagement" class:high={engagementRatio > 5}>
			Engagement ratio: {engagementRatio.toFixed(2)}
		</div>
	</article>
{/each}

Desestruturação de Arrays

<script>
	let coordinates = $state([
		[0, 0, 'Origin'],
		[10, 20, 'Point A'],
		[30, 40, 'Point B'],
		[-5, 15, 'Point C']
	])

	function calculateDistance(x, y) {
		return Math.sqrt(x * x + y * y)
	}

	function getQuadrant(x, y) {
		if (x >= 0 && y >= 0) return 'I'
		if (x < 0 && y >= 0) return 'II'
		if (x < 0 && y < 0) return 'III'
		return 'IV'
	}
</script>

{#each coordinates as coord, index}
	{@const [x, y, label] = coord}
	{@const distance = calculateDistance(x, y)}
	{@const quadrant = getQuadrant(x, y)}

	<div class="coordinate-row">
		<span class="index">{index + 1}.</span>
		<span class="label">{label}</span>
		<span class="coords">({x}, {y})</span>
		<span class="distance">{distance.toFixed(2)} units from origin</span>
		<span class="quadrant">Quadrant {quadrant}</span>
	</div>
{/each}

Padrões Combinados com Valores Padrão

<script>
	let apiResponses = $state([
		{ data: { user: { name: 'Alice' }, metadata: { version: 2 } } },
		{ data: { user: {}, metadata: {} } },
		{ data: null },
		{ error: 'Network timeout' }
	])
</script>

{#each apiResponses as response, i}
	{@const {
		data: { user: { name = 'Unknown' } = {}, metadata: { version = 1 } = {} } = {},
		error = null
	} = response}

	<div class="response-item" class:error>
		<span>Response {i + 1}:</span>
		{#if error}
			<span class="error-message">Error: {error}</span>
		{:else}
			<span>User: {name} (API v{version})</span>
		{/if}
	</div>
{/each}

Integração com as Runes do Svelte 5

Embora @const crie constantes não reativas, ela se integra perfeitamente ao sistema de reatividade do Svelte 5. As constantes são recalculadas sempre que o bloco de template é re-renderizado devido a mudanças no estado reativo.

Dados Reativos, Computações Constantes

<script>
	let multiplier = $state(1)
	let items = $state([
		{ name: 'Item A', baseValue: 10 },
		{ name: 'Item B', baseValue: 25 },
		{ name: 'Item C', baseValue: 15 }
	])
</script>

<input type="range" bind:value={multiplier} min="1" max="10" />
<p>Multiplier: {multiplier}x</p>

{#each items as item}
	{@const scaledValue = item.baseValue * multiplier}
	{@const rating = scaledValue > 100 ? 'High' : scaledValue > 50 ? 'Medium' : 'Low'}

	<div class="item-card">
		<h3>{item.name}</h3>
		<p>Base: {item.baseValue}</p>
		<p>Scaled: {scaledValue}</p>
		<span class="rating rating-{rating.toLowerCase()}">{rating}</span>
	</div>
{/each}

Quando multiplier muda, o Svelte re-renderiza o bloco #each e todos os valores de @const são recalculados com o novo multiplicador. As constantes em si não são reativas — elas não disparam atualizações — mas participam do ciclo de renderização reativa.

Combinando com `$derived` para Cenários Complexos

Para cenários onde você precisa tanto de estado derivado no nível do componente quanto de constantes com escopo de bloco:

<script>
	let searchQuery = $state('')
	let sortOrder = $state('name')

	let products = $state([
		{ id: 1, name: 'Alpha Widget', price: 29.99, category: 'widgets' },
		{ id: 2, name: 'Beta Gadget', price: 49.99, category: 'gadgets' },
		{ id: 3, name: 'Gamma Widget', price: 19.99, category: 'widgets' },
		{ id: 4, name: 'Delta Gadget', price: 39.99, category: 'gadgets' }
	])

	// Component-level derived: filtering and sorting logic
	let filteredProducts = $derived.by(() => {
		let result = products.filter((p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()))

		return result.sort((a, b) => {
			if (sortOrder === 'name') return a.name.localeCompare(b.name)
			if (sortOrder === 'price') return a.price - b.price
			return 0
		})
	})

	let totalValue = $derived(filteredProducts.reduce((sum, p) => sum + p.price, 0))
</script>

<input bind:value={searchQuery} placeholder="Search products..." />
<select bind:value={sortOrder}>
	<option value="name">Sort by Name</option>
	<option value="price">Sort by Price</option>
</select>

<p>Showing {filteredProducts.length} products (Total: ${totalValue.toFixed(2)})</p>

{#each filteredProducts as product (product.id)}
	{@const priceCategory =
		product.price > 40 ? 'premium' : product.price > 25 ? 'standard' : 'budget'}
	{@const isWidget = product.category === 'widgets'}
	{@const displayPrice = `$${product.price.toFixed(2)}`}

	<div class="product-card {priceCategory}" class:widget={isWidget}>
		<h3>{product.name}</h3>
		<span class="price">{displayPrice}</span>
		<span class="category">{product.category}</span>
		<span class="tier">{priceCategory}</span>
	</div>
{/each}

Aqui, $derived lida com a filtragem e ordenação que afeta quais itens aparecem e em qual ordem — lógica que pertence ao nível do componente. Enquanto isso, @const lida com a lógica de apresentação por item — categorização, formatação e estilização condicional que só é relevante dentro de cada iteração.

Padrões Avançados

1. Parâmetros de Snippet e Constantes

Quando combinado com snippets, @const possibilita padrões poderosos para fragmentos de template reutilizáveis:

<script>
	let transactions = $state([
		{ id: 1, type: 'deposit', amount: 500, date: '2025-01-15', status: 'completed' },
		{ id: 2, type: 'withdrawal', amount: 200, date: '2025-01-14', status: 'completed' },
		{ id: 3, type: 'transfer', amount: 150, date: '2025-01-13', status: 'pending' },
		{ id: 4, type: 'deposit', amount: 1000, date: '2025-01-12', status: 'completed' }
	])

	function formatDate(dateStr) {
		return new Date(dateStr).toLocaleDateString('en-US', {
			month: 'short',
			day: 'numeric',
			year: 'numeric'
		})
	}

	function formatCurrency(amount) {
		return new Intl.NumberFormat('en-US', {
			style: 'currency',
			currency: 'USD'
		}).format(amount)
	}
</script>

{#snippet transactionRow(transaction)}
	{@const { id, type, amount, date, status } = transaction}
	{@const formattedAmount = formatCurrency(amount)}
	{@const formattedDate = formatDate(date)}
	{@const isCredit = type === 'deposit'}
	{@const amountClass = isCredit ? 'credit' : 'debit'}
	{@const statusIcon = status === 'completed' ? '✓' : '⏳'}

	<tr class="transaction-row" data-status={status}>
		<td class="id">#{id}</td>
		<td class="type">{type}</td>
		<td class="amount {amountClass}">
			{isCredit ? '+' : '-'}{formattedAmount}
		</td>
		<td class="date">{formattedDate}</td>
		<td class="status">
			<span class="status-icon">{statusIcon}</span>
			{status}
		</td>
	</tr>
{/snippet}

{#snippet transactionSummary(transactions)}
	{@const totalDeposits = transactions
		.filter((t) => t.type === 'deposit' && t.status === 'completed')
		.reduce((sum, t) => sum + t.amount, 0)}
	{@const totalWithdrawals = transactions
		.filter((t) => t.type === 'withdrawal' && t.status === 'completed')
		.reduce((sum, t) => sum + t.amount, 0)}
	{@const netChange = totalDeposits - totalWithdrawals}
	{@const pendingCount = transactions.filter((t) => t.status === 'pending').length}

	<div class="summary-panel">
		<div class="summary-item">
			<span class="label">Total Deposits</span>
			<span class="value credit">{formatCurrency(totalDeposits)}</span>
		</div>
		<div class="summary-item">
			<span class="label">Total Withdrawals</span>
			<span class="value debit">{formatCurrency(totalWithdrawals)}</span>
		</div>
		<div class="summary-item">
			<span class="label">Net Change</span>
			<span class="value" class:credit={netChange >= 0} class:debit={netChange < 0}>
				{formatCurrency(Math.abs(netChange))}
				{netChange >= 0 ? '↑' : '↓'}
			</span>
		</div>
		{#if pendingCount > 0}
			<div class="summary-item pending-notice">
				<span>{pendingCount} pending transaction{pendingCount > 1 ? 's' : ''}</span>
			</div>
		{/if}
	</div>
{/snippet}

<div class="transactions-container">
	{@render transactionSummary(transactions)}

	<table class="transactions-table">
		<thead>
			<tr>
				<th>ID</th>
				<th>Type</th>
				<th>Amount</th>
				<th>Date</th>
				<th>Status</th>
			</tr>
		</thead>
		<tbody>
			{#each transactions as transaction (transaction.id)}
				{@render transactionRow(transaction)}
			{/each}
		</tbody>
	</table>
</div>

<style>
	.credit {
		color: #16a34a;
	}
	.debit {
		color: #dc2626;
	}
	.transaction-row[data-status='pending'] {
		opacity: 0.7;
	}
	.pending-notice {
		background: #fef3c7;
		padding: 0.5rem;
		border-radius: 4px;
	}
</style>

2. Constantes em Blocos Condicionais

Dentro de blocos {#if} e {:else if}, @const permite calcular valores que só são relevantes quando determinadas condições são atendidas:

<script>
	let userStatus = $state('premium') // 'free' | 'basic' | 'premium'

	let user = $state({
		name: 'Alice',
		credits: 150,
		subscription: {
			plan: 'premium',
			expiresAt: '2025-06-15',
			features: ['unlimited_downloads', 'priority_support', 'early_access']
		}
	})
</script>

{#if userStatus === 'premium'}
	{@const { plan, expiresAt, features } = user.subscription}
	{@const daysRemaining = Math.ceil((new Date(expiresAt) - new Date()) / (1000 * 60 * 60 * 24))}
	{@const isExpiringSoon = daysRemaining < 30}

	<div class="premium-panel">
		<h2>Premium Member</h2>
		<p class="plan-name">{plan.charAt(0).toUpperCase() + plan.slice(1)} Plan</p>

		<div class="expiry" class:warning={isExpiringSoon}>
			{#if isExpiringSoon}
				<span class="warning-icon">⚠️</span>
				Renew soon! Only {daysRemaining} days remaining
			{:else}
				{daysRemaining} days remaining
			{/if}
		</div>

		<ul class="features">
			{#each features as feature}
				{@const displayName = feature.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())}
				<li>✓ {displayName}</li>
			{/each}
		</ul>
	</div>
{:else if userStatus === 'basic'}
	{@const upgradeDiscount = user.credits >= 100 ? 0.2 : 0.1}
	{@const discountedPrice = (9.99 * (1 - upgradeDiscount)).toFixed(2)}

	<div class="basic-panel">
		<h2>Basic Member</h2>
		<p>You have {user.credits} credits</p>

		<div class="upgrade-offer">
			<p>Upgrade to Premium!</p>
			<p class="price">
				<span class="original">$9.99</span>
				<span class="discounted">${discountedPrice}</span>
				<span class="savings">({(upgradeDiscount * 100).toFixed(0)}% off!)</span>
			</p>
		</div>
	</div>
{:else}
	{@const creditsToBasic = Math.max(0, 50 - user.credits)}

	<div class="free-panel">
		<h2>Free Member</h2>
		<p>You have {user.credits} credits</p>

		{#if creditsToBasic > 0}
			<p class="goal">Earn {creditsToBasic} more credits to unlock Basic features!</p>
		{:else}
			<p class="ready">You're eligible for Basic membership!</p>
		{/if}
	</div>
{/if}

Cada ramificação calcula apenas os valores de que necessita, e esses valores não poluem outras ramificações nem a seção de script do componente.

3. Filhos de Componentes com Constantes

Quando conteúdo é passado para componentes, @const pode calcular valores dentro desse contexto:

<!-- DataGrid.svelte -->
<script>
	let { data, children } = $props()
</script>

<div class="data-grid">
	{#each data as row, rowIndex}
		<div class="grid-row" data-row={rowIndex}>
			{@render children(row, rowIndex)}
		</div>
	{/each}
</div>

<!-- App.svelte -->
<script>
	import DataGrid from './DataGrid.svelte'

	let employees = $state([
		{ name: 'Alice', department: 'Engineering', salary: 95000, startDate: '2020-03-15' },
		{ name: 'Bob', department: 'Design', salary: 85000, startDate: '2021-07-22' },
		{ name: 'Charlie', department: 'Engineering', salary: 110000, startDate: '2019-01-10' }
	])
</script>

<DataGrid data={employees}>
	{#snippet children(employee, index)}
		{@const yearsEmployed = (
			(Date.now() - new Date(employee.startDate)) /
			(1000 * 60 * 60 * 24 * 365)
		).toFixed(1)}
		{@const seniorityLevel = yearsEmployed >= 3 ? 'Senior' : yearsEmployed >= 1 ? 'Mid' : 'Junior'}
		{@const annualizedSalary = employee.salary.toLocaleString()}
		{@const isHighEarner = employee.salary > 100000}

		<div class="employee-cell name">{employee.name}</div>
		<div class="employee-cell department">{employee.department}</div>
		<div class="employee-cell salary" class:high-earner={isHighEarner}>
			${annualizedSalary}
		</div>
		<div class="employee-cell tenure">
			{yearsEmployed} years ({seniorityLevel})
		</div>
	{/snippet}
</DataGrid>

4. Constantes em Blocos Await

A diretiva @const funciona em todas as ramificações de blocos #await:

<script>
	let userId = $state(1)

	async function fetchUserData(id) {
		const response = await fetch(`/api/users/${id}`)
		if (!response.ok) throw new Error('Failed to fetch user')
		return response.json()
	}

	let userPromise = $derived(fetchUserData(userId))
</script>

{#await userPromise}
	{@const loadingMessage = `Loading user ${userId}...`}
	<div class="loading-state">
		<span class="spinner"></span>
		<p>{loadingMessage}</p>
	</div>
{:then user}
	{@const { firstName, lastName, email, role } = user}
	{@const fullName = `${firstName} ${lastName}`}
	{@const isAdmin = role === 'admin'}
	{@const initials = `${firstName[0]}${lastName[0]}`}

	<div class="user-profile" class:admin={isAdmin}>
		<div class="avatar">{initials}</div>
		<h2>{fullName}</h2>
		<p class="email">{email}</p>
		<span class="role-badge">{role}</span>
	</div>
{:catch error}
	{@const errorMessage = error.message || 'Unknown error occurred'}
	{@const errorCode = error.code || 'UNKNOWN'}
	{@const canRetry = errorCode !== 'AUTH_FAILED'}

	<div class="error-state">
		<h3>Error Loading User</h3>
		<p class="error-message">{errorMessage}</p>
		<code class="error-code">{errorCode}</code>
		{#if canRetry}
			<button onclick={() => (userId = userId)}>Retry</button>
		{:else}
			<p>Please log in again to continue.</p>
		{/if}
	</div>
{/await}

5. Constantes em Blocos Key

Embora o bloco #key destrua e recrie seu conteúdo quando a chave muda, @const dentro dele calcula valores frescos a cada recriação:

<script>
	import { fly } from 'svelte/transition'

	let notificationId = $state(1)
	let notifications = $state({
		1: { type: 'success', title: 'Upload Complete', message: 'Your file has been uploaded.' },
		2: { type: 'warning', title: 'Low Storage', message: 'You are running low on storage.' },
		3: { type: 'error', title: 'Connection Lost', message: 'Please check your internet.' }
	})

	function nextNotification() {
		notificationId = (notificationId % 3) + 1
	}
</script>

{#key notificationId}
	{@const notification = notifications[notificationId]}
	{@const { type, title, message } = notification}
	{@const icon = type === 'success' ? '✓' : type === 'warning' ? '⚠' : '✕'}
	{@const colorClass = `notification-${type}`}

	<div class="notification {colorClass}" transition:fly={{ y: -20, duration: 300 }}>
		<span class="icon">{icon}</span>
		<div class="content">
			<h4>{title}</h4>
			<p>{message}</p>
		</div>
	</div>
{/key}

<button onclick={nextNotification}>Next Notification</button>

Exemplo do Mundo Real

Tabela de Dados com Colunas Calculadas

Aqui está um exemplo abrangente combinando múltiplos padrões de @const:

<script>
	let sortColumn = $state('name')
	let sortDirection = $state('asc')

	let inventory = $state([
		{ sku: 'WDG-001', name: 'Widget Pro', price: 29.99, cost: 12.0, stock: 150, reorderPoint: 50 },
		{ sku: 'WDG-002', name: 'Widget Basic', price: 19.99, cost: 8.0, stock: 45, reorderPoint: 50 },
		{
			sku: 'GDG-001',
			name: 'Gadget Elite',
			price: 89.99,
			cost: 35.0,
			stock: 200,
			reorderPoint: 30
		},
		{
			sku: 'GDG-002',
			name: 'Gadget Standard',
			price: 59.99,
			cost: 25.0,
			stock: 25,
			reorderPoint: 40
		},
		{
			sku: 'ACC-001',
			name: 'Accessory Pack',
			price: 14.99,
			cost: 5.0,
			stock: 500,
			reorderPoint: 100
		}
	])

	let sortedInventory = $derived.by(() => {
		return [...inventory].sort((a, b) => {
			let aVal = a[sortColumn]
			let bVal = b[sortColumn]

			if (typeof aVal === 'string') {
				return sortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal)
			}
			return sortDirection === 'asc' ? aVal - bVal : bVal - aVal
		})
	})

	// Footer aggregations - moved here since they can't be @const inside <tfoot>
	let totalCostValue = $derived(
		sortedInventory.reduce((sum, item) => sum + item.stock * item.cost, 0)
	)
	let totalPotentialRevenue = $derived(
		sortedInventory.reduce((sum, item) => sum + item.stock * item.price, 0)
	)
	let totalItems = $derived(sortedInventory.reduce((sum, item) => sum + item.stock, 0))
	let lowStockCount = $derived(
		sortedInventory.filter((item) => item.stock <= item.reorderPoint).length
	)

	function toggleSort(column) {
		if (sortColumn === column) {
			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'
		} else {
			sortColumn = column
			sortDirection = 'asc'
		}
	}
</script>

{#snippet sortableHeader(column, label)}
	{@const isActive = sortColumn === column}
	{@const arrow = isActive ? (sortDirection === 'asc' ? '↑' : '↓') : ''}

	<th class:active={isActive} onclick={() => toggleSort(column)}>
		{label}
		<span class="sort-arrow">{arrow}</span>
	</th>
{/snippet}

<table class="inventory-table">
	<thead>
		<tr>
			{@render sortableHeader('sku', 'SKU')}
			{@render sortableHeader('name', 'Product')}
			{@render sortableHeader('price', 'Price')}
			{@render sortableHeader('cost', 'Cost')}
			<th>Margin</th>
			{@render sortableHeader('stock', 'Stock')}
			<th>Status</th>
			<th>Value</th>
		</tr>
	</thead>
	<tbody>
		{#each sortedInventory as item (item.sku)}
			{@const margin = ((item.price - item.cost) / item.price) * 100}
			{@const marginClass = margin > 60 ? 'high' : margin > 40 ? 'medium' : 'low'}
			{@const stockStatus =
				item.stock <= item.reorderPoint * 0.5
					? 'critical'
					: item.stock <= item.reorderPoint
						? 'low'
						: 'ok'}
			{@const inventoryValue = item.stock * item.cost}
			{@const potentialRevenue = item.stock * item.price}

			<tr class="inventory-row" data-status={stockStatus}>
				<td class="sku">{item.sku}</td>
				<td class="name">{item.name}</td>
				<td class="price">${item.price.toFixed(2)}</td>
				<td class="cost">${item.cost.toFixed(2)}</td>
				<td class="margin {marginClass}">{margin.toFixed(1)}%</td>
				<td class="stock">{item.stock} units</td>
				<td class="status">
					{#if stockStatus === 'critical'}
						<span class="badge critical">⚠️ Critical</span>
					{:else if stockStatus === 'low'}
						<span class="badge warning">📦 Reorder</span>
					{:else}
						<span class="badge ok">✓ In Stock</span>
					{/if}
				</td>
				<td class="value">
					<div class="value-breakdown">
						<span class="cost-value">${inventoryValue.toLocaleString()}</span>
						<span class="potential">→ ${potentialRevenue.toLocaleString()}</span>
					</div>
				</td>
			</tr>
		{/each}
	</tbody>
	<tfoot>
		<tr class="totals-row">
			<td colspan="5">
				<strong>Totals:</strong>
				{sortedInventory.length} products, {totalItems.toLocaleString()} units
				{#if lowStockCount > 0}
					<span class="low-stock-warning">({lowStockCount} need reorder)</span>
				{/if}
			</td>
			<td colspan="3">
				<div class="total-values">
					<span>Cost: ${totalCostValue.toLocaleString()}</span>
					<span>Potential: ${totalPotentialRevenue.toLocaleString()}</span>
				</div>
			</td>
		</tr>
	</tfoot>
</table>

<style>
	.inventory-table {
		width: 100%;
		border-collapse: collapse;
	}

	th {
		cursor: pointer;
		user-select: none;
		padding: 0.75rem;
		text-align: left;
		background: #f8fafc;
	}

	th.active {
		background: #e2e8f0;
	}

	td {
		padding: 0.75rem;
		border-bottom: 1px solid #e2e8f0;
	}

	.margin.high {
		color: #16a34a;
		font-weight: 600;
	}
	.margin.medium {
		color: #ca8a04;
	}
	.margin.low {
		color: #dc2626;
	}

	.inventory-row[data-status='critical'] {
		background: #fef2f2;
	}
	.inventory-row[data-status='low'] {
		background: #fffbeb;
	}

	.badge {
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		font-size: 0.75rem;
	}
	.badge.critical {
		background: #fee2e2;
		color: #dc2626;
	}
	.badge.warning {
		background: #fef3c7;
		color: #b45309;
	}
	.badge.ok {
		background: #dcfce7;
		color: #16a34a;
	}

	.value-breakdown {
		display: flex;
		flex-direction: column;
		font-size: 0.875rem;
	}
	.potential {
		color: #6b7280;
	}

	.low-stock-warning {
		color: #dc2626;
		margin-left: 0.5rem;
	}
</style>

Armadilhas Comuns e Como Evitá-las

1: Usando `@const` no Nível Superior

<!-- CORRECT: Use script section for top-level constants -->
<script>
	const greeting = 'Hello'
</script>

<!-- WRONG: @const cannot be used at top level -->
{@const greeting = 'Hello'}
<!-- Compiler error! -->
<h1>{greeting}</h1>
<h1>{greeting}</h1>

2: Tentando Reatribuição

{#each items as item}
	{@const count = item.quantity}

	<!-- WRONG: Cannot reassign const -->
	<button onclick={() => count++}>Increment</button>
	<!-- Error! -->

	<!-- CORRECT: Modify the source state instead -->
	<button onclick={() => item.quantity++}>Increment</button>
{/each}

3: Esperando Reatividade de Constantes

<script>
	let multiplier = $state(1)
</script>

{#each items as item}
	{@const computed = item.value * multiplier}

	<!-- This works correctly - computed is recalculated when multiplier changes
       because the entire each block re-renders -->
	<span>{computed}</span>
{/each}

<!-- But be aware: @const doesn't create reactive bindings,
     it creates values that exist for a single render cycle -->

4: Usando `@const` Dentro de Elementos HTML

<!-- WRONG: @const must be direct child of a block -->
<div>
	{@const value = 42}
	<!-- Compiler error! -->
	{value}
</div>

<!-- CORRECT: Wrap in a block if needed -->
{#if true}
	{@const value = 42}
	<div>{value}</div>
{/if}

<!-- Or compute in the script section for simple cases -->

5: Uso Excessivo de `@const` para Expressões Simples

<!-- Unnecessary: simple property access doesn't need @const -->
{#each users as user}
	{@const name = user.name}
	<!-- Overkill -->
	<span>{name}</span>
{/each}

<!-- Better: use directly when expression is simple -->
{#each users as user}
	<span>{user.name}</span>
{/each}

<!-- @const shines for computed values or repeated expressions -->
{#each users as user}
	{@const displayName = `${user.firstName} ${user.lastName}`.trim() || 'Anonymous'}
	{@const initials = displayName
		.split(' ')
		.map((n) => n[0])
		.join('')}

	<div class="user">
		<span class="avatar">{initials}</span>
		<span class="name">{displayName}</span>
	</div>
{/each}

Considerações de Desempenho

A diretiva @const é computacionalmente econômica — é essencialmente açúcar sintático que o compilador transforma em JavaScript otimizado. No entanto, tenha estes pontos em mente:

O cálculo ocorre a cada renderização: Ao contrário de $derived, que memoiza resultados, os valores de @const são calculados do zero cada vez que o bloco é renderizado. Para cálculos custosos, considere movê-los para $derived na seção de script.
Sem sobrecarga de reatividade: Como @const não cria ligações reativas, não há sobrecarga de gerenciamento de assinaturas. Isso o torna eficiente para valores que não precisam disparar atualizações por conta própria.
Eficiência de escopo: Os valores declarados com @const têm escopo adequado e são coletados pelo garbage collector quando o bloco é destruído, prevenindo vazamentos de memória.

Resumo das Melhores Práticas

Use @const para cálculos com escopo de bloco que só são relevantes dentro de uma iteração ou ramificação condicional específica.
Prefira @const em vez de repetição inline quando o mesmo cálculo aparece várias vezes dentro de um bloco.
Encadeie constantes ao construir cálculos complexos passo a passo — cada valor intermediário se torna autodocumentado.
Use desestruturação para extrair dados aninhados de forma limpa no ponto de uso.
Mantenha os scripts de componentes focados no estado central e em preocupações transversais; deixe @const lidar com a lógica de apresentação.
Não complique demais: O acesso simples a propriedades não precisa de @const. Reserve-o para cálculos reais ou valores usados múltiplas vezes.
Combine com $derived estrategicamente: use $derived para transformações no nível do componente que afetam o que é renderizado, e @const para lógica de apresentação por item.

Conclusão

A diretiva @const incorpora a filosofia do Svelte de colocar as ferramentas certas nos lugares certos. Ao permitir declarações de constantes com escopo dentro de blocos de template, ela ajuda a escrever componentes mais limpos, legíveis e fáceis de manter — mantendo o cálculo próximo ao consumo e preservando uma clara separação de responsabilidades.

Essa funcionalidade aparentemente simples tem implicações profundas para a organização do código: ela permite manter os scripts dos componentes focados no gerenciamento de estado, enquanto move cálculos específicos de apresentação diretamente para o template onde são utilizados.

O uso estratégico de @const transforma templates verbosos e repetitivos em código autodocumentado e eficiente. Seja para formatar valores de exibição, calcular resultados intermediários em iterações #each, ou construir cálculos complexos passo a passo, @const fornece o nível certo de abstração sem a sobrecarga de ligações reativas.

Ao entender quando usar @const versus $derived, e como aproveitar padrões de desestruturação e encadeamento, você pode escrever componentes Svelte que são ao mesmo tempo performáticos e fáceis de manter.

Principais Conclusões

{@const} cria constantes com escopo de bloco dentro de blocos #if, #each, #await e #snippet, calculadas do zero a cada renderização sem sobrecarga reativa
A sintaxe segue as declarações const do JavaScript com suporte para desestruturação de arrays e objetos: {@const { name, age } = user} ou {@const [first, ...rest] = items}
O escopo é limitado ao bloco declarante e seus filhos — as constantes não são acessíveis fora do bloco que as define, evitando conflitos de nomes
Os cálculos ocorrem a cada renderização, ao contrário de $derived, que memoiza resultados, tornando @const mais adequado para cálculos simples ou valores usados múltiplas vezes dentro de um bloco
A ausência de sobrecarga reativa garante renderização eficiente — @const não cria assinaturas nem dispara atualizações, apenas calcula valores quando o bloco é renderizado
Encadeável para cálculos em múltiplas etapas, onde cada @const pode referenciar constantes anteriores: {@const a = x + y} {@const b = a * 2} {@const c = b / z}
Padrões comuns incluem formatação (datas, números, moedas), extração de dados aninhados, cálculo de totais em blocos #each e simplificação de condicionais complexas
A integração com TypeScript fornece inferência de tipos completa com verificação em tempo de compilação para referências indefinidas e erros de tipo em expressões constantes

Veja Também

Documentação Oficial do Svelte 5 - {@const}
$derived - Valores calculados reativos no nível do componente
JavaScript const - A palavra-chave const do JavaScript na qual @const é baseado
Atribuição via Desestruturação - Padrão amplamente utilizado com @const