Svelte Development Standards

Official Documentation

Untuk dokumentasi lengkap, kunjungi:

• Svelte Documentation
• SvelteKit Documentation

Local Environment Setup

Setup lengkap environment development SvelteKit monorepo (Turborepo, pnpm, Svelte 5 runes, shadcn-svelte, Drizzle, Better Auth) → svelte-local-env|SvelteKit Local Environment Setup

Project Layout

Svelte 5 Runes

Gunakan runes untuk reactivity:

<script>
    let count = $state(0);
    let doubled = $derived(count * 2);

    $effect(() => {
        console.log(`Count is now ${count}`);
    });
</script>

<button onclick={() => count++}>
    Clicks: {count} (doubled: {doubled})
</button>

Component Patterns

• Props: Jangan pakai spread props kecuali perlu.
• Events: Gunakan callback props, bukan createEventDispatcher.
• Snippets: Gunakan snippets (Svelte 5) untuk komposisi:

{#snippet icon()}
    <Icon name="check" />
{/snippet}

<Button>{@render icon()}</Button>

State Management

Gunakan Svelte stores untuk global state, $state untuk local.

// stores/auth.ts
import { writable } from 'svelte/store';

export const user = writable<User | null>(null);

// Component
<script>
    import { user } from '$lib/stores/auth';
</script>

<p>Hello {$user?.name}</p>

Testing

Gunakan Vitest untuk unit test, Playwright untuk E2E.

// Component test
import { render, screen } from "@testing-library/svelte";
import Counter from "./Counter.svelte";

test("increment button", async () => {
  render(Counter);
  const button = screen.getByRole("button");
  await fireEvent.click(button);
  expect(button).toHaveTextContent("1");
});

Tailwind

SvelteKit + Tailwind CSS setup:

/* app.css */
@import "tailwindcss";

Utility-first, jangan bikin custom CSS kecuali perlu.

API Loading

Gunakan TanStack Query (atau SvelteKit +page.server.ts + +page.ts):

// +page.ts
export const load = async ({ fetch }) => {
  const res = await fetch("/api/users");
  return { users: await res.json() };
};

Form Actions

SvelteKit menggunakan Form Actions untuk mutasi data tanpa JS (Progressive Enhancement):

<!-- +page.svelte -->
<form method="POST" action="?/login">
    <input name="email" type="email" />
    <input name="password" type="password" />
    <button type="submit">Login</button>
</form>

// +page.server.ts
export const actions = {
  login: async ({ request }) => {
    const data = await request.formData();
    const email = data.get("email");
    // validasi dan auth
    return { success: true };
  },
};

Environment Variables

SvelteKit memisahkan env vars menjadi statis/dinamis dan public/private:

// Private (Hanya bisa diakses di server)
import { DATABASE_URL } from "$env/static/private";
import { env } from "$env/dynamic/private";

// Public (Bisa diakses di client & server)
import { PUBLIC_API_URL } from "$env/static/public";
import { env } from "$env/dynamic/public";

Selalu prioritaskan $env/static kecuali nilainya berubah saat runtime (misal: Docker deployment).

SSR & SSG (Rendering)

SvelteKit me-render SSR secara default. Untuk mengubah konfigurasi per-halaman:

// +page.ts atau +layout.ts
export const ssr = true; // false untuk SPA mode
export const prerender = true; // true untuk SSG (Static Site Generation)
export const csr = true; // false untuk disable client-side JS

Deployment (Adapters)

Gunakan adapters untuk men-deploy aplikasi SvelteKit. Untuk Node.js / Docker (VPS):

pnpm add -D @sveltejs/adapter-node

Ubah di svelte.config.js:

import adapter from "@sveltejs/adapter-node";

export default {
  kit: {
    adapter: adapter(),
  },
};