Yang Baru di Svelte Maret 2026

Ekosistem Svelte bergerak cepat. Dalam periode Februari–Maret 2026, rilis svelte@5.50.0 hingga 5.53.x dan SvelteKit@2.51.0 hingga 2.53.x membawa sejumlah penambahan yang cukup signifikan — mulai dari Error Boundaries yang kini bisa berjalan di server, hingga better-auth yang resmi masuk sebagai add-on di Svelte CLI.

Artikel ini merangkum perubahan paling penting dari rilis-rilis tersebut, lengkap dengan konteks teknis kapan dan mengapa fitur-fitur ini berguna.

Error Boundaries Meluas ke Server

Sejak Svelte 5.3.0, <svelte:boundary> sudah tersedia untuk menangkap error rendering di client. Masalahnya, sebelum versi 5.53.0, error boundary tidak berfungsi saat proses rendering berlangsung di server — yang berarti jika ada error saat SSR, seluruh halaman bisa gagal tanpa mekanisme pemulihan yang elegan.

Mulai 5.53.0, error boundary kini juga aktif saat server-side rendering. Caranya: tambahkan onerror handler saat memanggil fungsi render() di sisi server.

// src/entry-server.js
import App from './App.svelte';
import { render } from 'svelte/server';

const { head, body } = await render(App, {
  props: { slug: 'artikel-populer' },
  transformError: (error) => {
    // Jangan kirim stack trace mentah ke browser
    console.error('[SSR Error]', error);
    return { message: 'Konten tidak dapat dimuat saat ini.' };
  }
});

Fungsi transformError menerima error asli dan harus mengembalikan objek yang bisa di-serialize ke JSON. Nilai ini yang nantinya diteruskan ke snippet failed di client untuk proses hydration.

Di dalam komponen, sintaks <svelte:boundary> tetap sama seperti sebelumnya:

<!-- src/components/ArticleBody.svelte -->
<svelte:boundary>
  <ArticleContent {slug} />

  {#snippet failed(error, reset)}
    <div class="error-state">
      <p>{error.message}</p>
      <button onclick={reset}>Muat ulang</button>
    </div>
  {/snippet}
</svelte:boundary>

Integrasi lebih dalam dengan SvelteKit tersedia lewat opsi eksperimental handleRenderingErrors di kit@2.54. Saat diaktifkan, SvelteKit otomatis membungkus komponen route dalam error boundary dan meneruskan error yang sudah diproses oleh handleError ke komponen +error.svelte.

createContext untuk Komponen Programatik

Svelte 5.50.0 menambahkan createContext — sebuah fungsi yang memungkinkan pengaturan context saat membuat instance komponen secara manual (lewat mount() atau hydrate()).

Sebelumnya, jika ingin memasang komponen di luar tree Svelte normal (misalnya lewat JavaScript murni), kamu tidak bisa menyuntikkan context ke dalamnya. Sekarang bisa:

// src/lib/portal.js
import { mount, createContext } from 'svelte';
import Tooltip from './Tooltip.svelte';

function attachTooltip(targetEl, content) {
  mount(Tooltip, {
    target: targetEl,
    props: { content },
    context: createContext({
      theme: 'dark',
      locale: 'id'
    })
  });
}

Ini berguna saat membangun plugin, widget embeddable, atau sistem komponen yang harus hidup di luar aplikasi Svelte utama.

TrustedHTML di Blok {@html}

Svelte 5.52.0 menambahkan dukungan TrustedHTML — tipe dari Trusted Types API — sebagai nilai valid untuk blok {@html}.

Sebelumnya, {@html} hanya menerima string biasa, yang berarti jika proyek menggunakan Content Security Policy berbasis Trusted Types, kode seperti ini akan gagal:

<!-- Sebelumnya: hanya bisa string biasa -->
{@html htmlString}

Sekarang, nilai TrustedHTML diterima langsung tanpa perlu konversi:

<script>
  import { policy } from '$lib/trusted-types';

  // TrustedHTML dari policy
  const safeHtml = policy.createHTML(rawContent);
</script>

{@html safeHtml}

Perubahan ini relevan terutama untuk aplikasi enterprise atau proyek yang menerapkan CSP ketat di lingkungan produksi.

Komentar di Dalam Tag HTML

Fitur kecil tapi berguna dari 5.53.0: sekarang bisa menulis komentar HTML di dalam tag, bukan hanya di antara elemen.

<input
  type="text"
  <!-- bind ke store nama pengguna -->
  bind:value={username}
  <!-- placeholder dinamis berdasarkan locale -->
  placeholder={$t('form.username.placeholder')}
/>

Manfaatnya terasa saat bekerja dengan komponen yang punya banyak atribut — terutama berguna untuk menjelaskan keputusan desain atau menandai atribut yang bersumber dari mana.

Pembaruan SvelteKit

Posisi Scroll di Callback Navigasi

SvelteKit 2.51.0 menambahkan informasi posisi scroll ke semua callback navigasi: beforeNavigate, onNavigate, dan afterNavigate. Data ini tersedia lewat properti scroll.

// src/routes/+layout.svelte
import { beforeNavigate, afterNavigate } from '$app/navigation';

beforeNavigate(({ scroll }) => {
  console.log('Posisi scroll sebelum navigasi:', scroll);
  // { x: 0, y: 340 }
});

afterNavigate(({ scroll }) => {
  // scroll di sini adalah posisi baru setelah navigasi selesai
});

Ini berguna untuk membangun mekanisme “restore scroll position” saat pengguna menekan tombol back, atau untuk analytics yang ingin melacak seberapa jauh pengguna membaca sebelum berpindah halaman.

Fungsi match untuk Mapping Route

SvelteKit 2.52.0 menambahkan kemampuan pada fungsi match di parameter matchers — sekarang bisa memetakan nilai path kembali ke route ID dan parameter-nya.

Parameter matchers di SvelteKit digunakan untuk memvalidasi segmen URL. Misalnya, matcher integer memastikan segmen hanya berisi angka. Yang baru adalah matcher ini sekarang bisa membalik proses: dari nilai, tentukan route mana yang cocok.

// src/params/category.js
const validCategories = ['frontend', 'backend', 'devops'];

export function match(value) {
  return validCategories.includes(value);
}

Kemampuan mapping balik ini berguna untuk fitur seperti sitemap generator atau canonical URL resolver yang perlu membangun URL dari data, bukan sekadar memvalidasi URL yang masuk.

Dukungan Vite 8

SvelteKit 2.53.0 kini kompatibel dengan Vite 8. Upgrade ini membawa peningkatan performa build dan dukungan untuk fitur-fitur terbaru ekosistem Vite. Tidak ada breaking change di sisi SvelteKit dari update ini — cukup upgrade Vite di package.json dan jalankan ulang.

Breaking Change di adapter-netlify

Adapter Netlify 6.0.0 membawa perubahan yang perlu diperhatikan bagi yang sudah deploy SvelteKit ke Netlify:

platform.context sekarang menggunakan format Netlify Functions modern, menggantikan format lama berbasis AWS Lambda. Jika ada kode yang mengakses platform.context untuk mengambil informasi request Netlify, perlu menyesuaikan dengan struktur baru.

Selain itu, konfigurasi redirect sekarang bisa dilakukan langsung di netlify.toml — tidak harus lewat konfigurasi SvelteKit.

better-auth Masuk Ekosistem CLI Svelte

Sejak sv@0.12.0, better-auth tersedia sebagai add-on resmi di Svelte CLI. Ini berarti setup autentikasi bisa dilakukan lewat satu perintah interaktif:

npx sv add better-auth

CLI akan memandu pilihan provider: email & password, GitHub OAuth, Google OAuth, atau kombinasi keduanya. Kode boilerplate dihasilkan otomatis, termasuk konfigurasi handler di hooks.server.ts dan helper auth untuk digunakan di load functions.

Better-auth sendiri adalah library autentikasi yang framework-agnostic dengan dukungan built-in untuk passkey, dua faktor autentikasi, dan manajemen sesi. Kehadirannya sebagai add-on resmi di CLI menjadikannya pilihan default yang direkomendasikan tim Svelte untuk proyek baru.

Kesimpulan

Rilis Maret 2026 memperkuat posisi Svelte sebagai framework yang serius di domain SSR dan keamanan: Error Boundaries server-side mengisi celah penting dalam penanganan error rendering, dukungan TrustedHTML mempermudah integrasi CSP ketat, dan masuknya better-auth ke CLI menyederhanakan salah satu kebutuhan paling umum dalam membangun aplikasi web. Untuk langkah berikutnya, changelog lengkap di GitHub adalah tempat terbaik memantau perkembangan sebelum setiap minor release.

Referensi

1. 1svelte
   — Svelte Docs
2. 2Svelte Releases — GitHub
3. 3SvelteKit Releases — GitHub
4. 4better-auth add-on — Svelte CLI Docs