Hello and welcome to my site!
About my site ``` Receive data from load functions: ```svelte{data.title}
{@html data.content}
```
### +page.js
Load data for pages:
```js
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
if (params.slug === 'hello-world') {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
};
}
error(404, 'Not found');
}
```
Configure page behavior with exports:
- `export const prerender = true|false|'auto'`
- `export const ssr = true|false`
- `export const csr = true|false`
### +page.server.js
Server-only load functions:
```js
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
const post = await getPostFromDatabase(params.slug);
if (post) {
return post;
}
error(404, 'Not found');
}
```
Also supports form actions.
## +error
Custom error pages:
```svelte
{page.status}: {page.error.message}
``` SvelteKit walks up the tree to find the closest error boundary. ## +layout ### +layout.svelte Shared UI elements across multiple pages: ```svelte {@render children()} ``` Layouts can be nested: ```svelteSettings
{@render children()} ``` ### +layout.js Load data for layouts: ```js /** @type {import('./$types').LayoutLoad} */ export function load() { return { sections: [ { slug: 'profile', title: 'Profile' }, { slug: 'notifications', title: 'Notifications' } ] }; } ``` ### +layout.server.js Server-only layout data loading. ## +server API routes with HTTP verb handlers: ```js import { error } from '@sveltejs/kit'; /** @type {import('./$types').RequestHandler} */ export function GET({ url }) { const min = Number(url.searchParams.get('min') ?? '0'); const max = Number(url.searchParams.get('max') ?? '1'); const d = max - min; if (isNaN(d) || d < 0) { error(400, 'min and max must be numbers, and min must be less than max'); } const random = min + Math.random() * d; return new Response(String(random)); } ``` Handling POST requests: ```js import { json } from '@sveltejs/kit'; /** @type {import('./$types').RequestHandler} */ export async function POST({ request }) { const { a, b } = await request.json(); return json(a + b); } ``` Fallback handler for unhandled methods: ```js /** @type {import('./$types').RequestHandler} */ export async function fallback({ request }) { return text(`I caught your ${request.method} request!`); } ``` Content negotiation: SvelteKit determines whether to serve a page or API response based on the `accept` header. ## $types TypeScript definitions for route files: - `PageProps`/`LayoutProps` - For component props - `PageLoad`/`PageServerLoad`/`LayoutLoad`/`LayoutServerLoad` - For load functions - `RequestHandler` - For server endpoints ## docs/kit/20-core-concepts/20-load.md # Loading Data in SvelteKit ## Page Data Load data with `+page.js` (universal) or `+page.server.js` (server-only): ```js /// file: src/routes/blog/[slug]/+page.server.js /** @type {import('./$types').PageServerLoad} */ export async function load({ params }) { return { post: await db.getPost(params.slug) }; } ``` ```svelte{data.post.title}
{@html data.post.content}
```
## Layout Data
Layout data is available to child layouts and pages:
```js
/// file: src/routes/blog/[slug]/+layout.server.js
/** @type {import('./$types').LayoutServerLoad} */
export async function load() {
return {
posts: await db.getPostSummaries()
};
}
```
```svelte
{comment.content}
{/each} {:catch error}Error: {error.message}
{/await} ``` ## Rerunning Load Functions Load functions rerun when: - Referenced `params` or `url` properties change - Parent load function reruns (if using `await parent()`) - Manually invalidated with `invalidate()` or `invalidateAll()` ### Manual Invalidation ```js /** @type {import('./$types').PageLoad} */ export async function load({ fetch, depends }) { depends('app:random'); const response = await fetch('https://api.example.com/random-number'); return { number: await response.json() }; } ``` ```svelte ``` ## Using getRequestEvent Access request event in shared server code: ```js // src/lib/server/auth.js import { redirect } from '@sveltejs/kit'; import { getRequestEvent } from '$app/server'; export function requireLogin() { const { locals, url } = getRequestEvent(); if (!locals.user) { redirect(307, `/login?${new URLSearchParams({ redirectTo: url.pathname + url.search })}`); } return locals.user; } ``` ## docs/kit/20-core-concepts/30-form-actions.md # Svelte Form Actions ## Default Actions Define a default action in `+page.server.js`: ```js /// file: src/routes/login/+page.server.js export const actions = { default: async (event) => { // TODO log the user in } }; ``` Use it with a simple form: ```svelte ``` Target actions from other pages: ```html ``` ## Named Actions Multiple actions in one page: ```js export const actions = { login: async (event) => { // TODO log the user in }, register: async (event) => { // TODO register the user } }; ``` Invoke with query parameter: ```svelte ``` ## Action Anatomy Actions receive a `RequestEvent` and can return data: ```js import * as db from '$lib/server/db'; export const actions = { login: async ({ cookies, request }) => { const data = await request.formData(); const email = data.get('email'); const password = data.get('password'); const user = await db.getUser(email); cookies.set('sessionid', await db.createSession(user), { path: '/' }); return { success: true }; } }; ``` Access returned data in the page: ```svelte {#if form?.success}Successfully logged in! Welcome back, {data.user.name}
{/if} ``` ### Validation Errors Return validation errors with the `fail` function: ```js import { fail } from '@sveltejs/kit'; export const actions = { login: async ({ cookies, request }) => { const data = await request.formData(); const email = data.get('email'); const password = data.get('password'); if (!email) { return fail(400, { email, missing: true }); } const user = await db.getUser(email); if (!user || user.password !== db.hash(password)) { return fail(400, { email, incorrect: true }); } // Success case } }; ``` Display errors in the form: ```svelte ``` ### Redirects Redirect after an action: ```js import { fail, redirect } from '@sveltejs/kit'; export const actions = { login: async ({ cookies, request, url }) => { // Authentication logic if (url.searchParams.has('redirectTo')) { redirect(303, url.searchParams.get('redirectTo')); } return { success: true }; } }; ``` ## Loading Data After an action runs, the page's `load` functions run again. Update `event.locals` when setting cookies: ```js // In action event.cookies.delete('sessionid', { path: '/' }); event.locals.user = null; ``` ## Progressive Enhancement ### use:enhance Basic enhancement: ```svelte ``` To target actions in `+page.server.js` explicitly: ```js const response = await fetch(this.action, { method: 'POST', body: data, headers: { 'x-sveltekit-action': 'true' } }); ``` ## GET vs POST For non-data-modifying forms, use `method="GET"`: ```html ``` This navigates to `/search?q=...` using client-side routing without invoking an action. ## docs/kit/20-core-concepts/40-page-options.md # Svelte 5 Page Options ## Core Concepts ### Rendering Modes SvelteKit supports three rendering strategies: - **Server-Side Rendering (SSR)**: Default mode - renders on server first, then hydrates in browser - **Client-Side Rendering (CSR)**: Interactive components rendered in browser - **Prerendering**: Generate static HTML at build time Options can be set in `+page.js`, `+page.server.js`, `+layout.js`, or `+layout.server.js`. Child layouts/pages override parent settings. ## Page Options ### prerender ```js // Static generation at build time export const prerender = true; // Enable prerendering for this route export const prerender = false; // Disable prerendering export const prerender = 'auto'; // Prerender but keep in SSR manifest ``` **Notes:** - Prerendering crawls your app starting from the root - Routes with `prerender = true` are excluded from SSR manifests - For fully static sites, use `adapter-static` - During prerendering, `building` from `$app/environment` is `true` **When not to prerender:** - When users need different content (authentication, personalization) - Pages with form actions - Pages that access `url.searchParams` during prerendering **Route conflicts:** - Use file extensions for server routes (`foo.json` instead of `foo`) - Pages are written as `foo/index.html` instead of `foo` ### entries For dynamic routes that should be prerendered: ```js // src/routes/blog/[slug]/+page.server.js export function entries() { return [ { slug: 'hello-world' }, { slug: 'another-blog-post' } ]; } export const prerender = true; ``` Can be async to fetch data from CMS/database. ### ssr ```js export const ssr = false; // Disable server-side rendering ``` Renders empty shell page instead of full HTML. Useful for browser-only code but generally not recommended. ### csr ```js export const csr = false; // Disable client-side rendering ``` When disabled: - No JavaScript is sent to client - Page works with HTML/CSS only - No form progressive enhancement - Links cause full-page navigation - HMR is disabled For development-only CSR: ```js import { dev } from '$app/environment'; export const csr = dev; ``` ### trailingSlash ```js export const trailingSlash = 'never'; // Default - redirects /about/ to /about export const trailingSlash = 'always'; // Redirects /about to /about/ export const trailingSlash = 'ignore'; // Treats both forms as valid ``` Affects prerendering output: `always` creates `about/index.html`, otherwise creates `about.html`. ### config Platform-specific configuration for adapters: ```js /** @type {import('some-adapter').Config} */ export const config = { runtime: 'edge' }; ``` Config objects merge at top level but not deeper levels. ## docs/kit/20-core-concepts/50-state-management.md # Svelte 5 State Management ## Server State Guidelines ### Avoid Shared State on Server Servers are stateless and shared by multiple users. Never store user data in shared variables: ```js // NEVER DO THIS - shared variable exposes data between users let user; export function load() { return { user }; } export const actions = { default: async ({ request }) => { const data = await request.formData(); user = { name: data.get('name') }; // BAD: shared between users } } ``` Instead, authenticate users with cookies and store data in databases. ### No Side-Effects in Load Load functions should be pure: ```js // NEVER DO THIS - modifies global state import { user } from '$lib/user'; export async function load({ fetch }) { const response = await fetch('/api/user'); user.set(await response.json()); // BAD: affects all users } ``` Instead, return the data: ```js export async function load({ fetch }) { const response = await fetch('/api/user'); return { user: await response.json() }; } ``` ## Using Context for State Use Svelte's context API for component-scoped state: ```svelte ``` ```svelteWelcome {user().name}
``` ## Component State Preservation Components are reused during navigation. Reactive values must be properly declared: ```svelte ``` Correct approach: ```svelte ``` To force component remounting on navigation: ```svelte {#key page.url.pathname}{page.error.message}
``` Shorthand for simple errors: ```js error(404, 'Not found'); // Same as error(404, { message: 'Not found' }) ``` Add custom properties: ```js error(404, { message: 'Not found', code: 'NOT_FOUND' }); ``` ## Unexpected Errors Unexpected errors are any other exceptions. For security, their details aren't exposed to users. Default error shape for users: ```json { "message": "Internal Error" } ``` Use `handleError` hook for custom error handling (reporting, custom responses). ## Error Responses Error handling depends on context: 1. Errors in `handle` or `+server.js`: Returns fallback error page or JSON 2. Errors in `load` functions: Renders nearest `+error.svelte` component 3. Errors in root `+layout.js/+layout.server.js`: Uses fallback error page ### Custom Fallback Error Page Create `src/error.html`: ```htmlMy custom error page
Status: %sveltekit.status%
Message: %sveltekit.error.message%
``` ## Type Safety Customize error shape in TypeScript: ```ts declare global { namespace App { interface Error { code: string; id: string; } } } export {}; ``` ## docs/kit/30-advanced/30-link-options.md # SvelteKit Link Options ## Navigation Basics SvelteKit uses standard `` elements for navigation between routes. When clicking a link within your app, SvelteKit: - Imports the code for the new page - Calls necessary `load` functions - Updates the UI without a full page reload ## data-sveltekit-preload-data Controls when data loading begins: ```html%sveltekit.body%
Get current stonk values
```
- `"hover"`: Preloads on mouse hover or touchstart
- `"tap"`: Preloads on mousedown or touchstart
Preloading is skipped if `navigator.connection.saveData` is true.
## data-sveltekit-preload-code
Controls when code loading begins:
- `"eager"`: Preloads immediately
- `"viewport"`: Preloads when link enters viewport
- `"hover"`: Preloads on hover
- `"tap"`: Preloads on tap/click
Note: `viewport` and `eager` only apply to links present in DOM immediately after navigation.
## data-sveltekit-reload
Forces full-page navigation:
```html
Path
```
Links with `rel="external"` behave the same and are ignored during prerendering.
## data-sveltekit-replacestate
Replaces current history entry instead of creating a new one:
```html
Path
```
## data-sveltekit-keepfocus
Maintains focus on the current element after navigation:
```html
```
Avoid using on links for accessibility reasons. Only use on elements that exist after navigation.
## data-sveltekit-noscroll
Prevents automatic scrolling after navigation:
```html
Path
```
## Disabling Options
Disable options by setting value to `"false"`:
```html
```
Conditional application:
```svelte
```
## docs/kit/30-advanced/40-service-workers.md
# Service Workers in SvelteKit
Service workers act as proxy servers for network requests, enabling offline support and faster navigation through precaching.
## Basic Setup
SvelteKit automatically registers `src/service-worker.js` (or `src/service-worker/index.js`).
```js
// Manual registration (if you disable automatic registration)
if ('serviceWorker' in navigator) {
addEventListener('load', function () {
navigator.serviceWorker.register('./path/to/service-worker.js');
});
}
```
## Inside the Service Worker
Access the `$service-worker` module for paths to assets, build files, and prerendered pages.
```js
/// history.back()} />
{/if}
```
## API
- `pushState(url, state)` - Creates new history entry
- `replaceState(url, state)` - Updates current history entry
- Access state via `page.state` from `$app/state`
- Make state type-safe with `App.PageState` interface in `src/app.d.ts`
## Loading Data for Shallow Routes
Use `preloadData` to load data for components without navigation:
```svelte
{#each data.thumbnails as thumbnail}
{
if (innerWidth < 640 || e.shiftKey || e.metaKey || e.ctrlKey) return;
e.preventDefault();
const { href } = e.currentTarget;
const result = await preloadData(href);
if (result.type === 'loaded' && result.status === 200) {
pushState(href, { selected: result.data });
} else {
goto(href);
}
}}
>
{/each}
{#if page.state.selected}
history.back()}>
{/if}
```
## Caveats
- During SSR, `page.state` is always an empty object
- State is lost on page reload
- Requires JavaScript to work
## docs/kit/40-best-practices/03-auth.md
# Auth
## Sessions vs tokens
- **Authentication**: Verify user identity via credentials
- **Authorization**: Determine allowed actions
Two main approaches after initial authentication:
- **Session IDs**: Stored in database, revocable, requires DB query per request
- **JWT**: No DB check, can't be immediately revoked, better latency, less DB load
## Integration points
Check auth cookies in server hooks and store user info in `locals`:
```js
// hooks.server.js
export async function handle({ event, resolve }) {
const session = event.cookies.get('session');
if (session) {
const user = await getUser(session);
if (user) {
event.locals.user = user;
}
}
return resolve(event);
}
```
## Guides
[Lucia](https://lucia-auth.com/) provides session-based auth for SvelteKit:
- Add to new project: `npx sv create`
- Add to existing project: `npx sv add lucia`
SvelteKit-specific auth guides are recommended over generic JS auth libraries to avoid including multiple web frameworks.
## docs/kit/40-best-practices/06-icons.md
# Icons
## CSS
Use CSS for icons via Iconify, which supports [many icon sets](https://icon-sets.iconify.design/) through [CSS inclusion](https://iconify.design/docs/usage/css/). Works with frameworks via [Tailwind CSS plugin](https://iconify.design/docs/usage/css/tailwind/) or [UnoCSS plugin](https://iconify.design/docs/usage/css/unocss/). No need to import icons into `.svelte` files.
## Svelte
Many [icon libraries for Svelte](https://www.sveltesociety.dev/packages?category=icons) exist. Avoid libraries with thousands of individual `.svelte` files per icon as they slow down [Vite's dependency optimization](https://vite.dev/guide/dep-pre-bundling.html), especially when using both umbrella and subpath imports (see [vite-plugin-svelte FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies)).
## docs/kit/40-best-practices/07-images.md
# Svelte 5 Images Guide
## Image Optimization Approaches
### Vite's Built-in Handling
Vite automatically processes imported assets, adding hashes for caching and inlining small assets.
```svelte
```
### @sveltejs/enhanced-img
A plugin that creates optimized formats (avif/webp), multiple sizes, sets intrinsic dimensions, and strips EXIF data.
#### Setup
```bash
npm install --save-dev @sveltejs/enhanced-img
```
```js
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
enhancedImages(),
sveltekit()
]
});
```
#### Basic Usage
```svelte
Page Title
```
Common pattern: Return SEO data from page `load` functions, use in root layout.
### Sitemaps
Create dynamic sitemap with a server endpoint:
```js
// src/routes/sitemap.xml/+server.js
export async function GET() {
return new Response(
`
`.trim(),
{
headers: {
'Content-Type': 'application/xml'
}
}
);
}
```
### AMP Support
1. Configure `svelte.config.js`:
```js
// svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// since isn't
// allowed, inline all styles
inlineStyleThreshold: Infinity
}
};
export default config;
```
2. Disable CSR:
```js
// src/routes/+layout.server.js
export const csr = false;
```
3. Add `amp` to `app.html`:
```html
...
```
4. Transform HTML with hooks:
```js
// src/hooks.server.js
import * as amp from '@sveltejs/amp';
import dropcss from 'dropcss';
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
let buffer = '';
return await resolve(event, {
transformPageChunk: ({ html, done }) => {
buffer += html;
if (done) {
let css = '';
const markup = amp
.transform(buffer)
.replace('⚡', 'amp') // dropcss can't handle this character
.replace(/`;
});
css = dropcss({ css, html: markup }).css;
return markup.replace('', `${css}`);
}
}
});
}
```
Consider validating transformed HTML with `amphtml-validator` in the `handle` hook (only for prerendered pages).
Instructions for LLMs: Always use Svelte 5 runes and Svelte 5 syntax. Runes do not need to be imported, they are globals. $state() runes are always declared using `let`, never with `const`. When passing a function to $derived, you must always use $derived.by(() => ...). Error boundaries can only catch errors during component rendering and at the top level of an $effect inside the error boundary. Error boundaries do not catch errors in onclick or other event handlers.