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 for pages using `+page.js` or `+page.server.js`: ```js // src/routes/blog/[slug]/+page.js export function load({ params }) { return { post: { title: `Title for ${params.slug} goes here`, content: `Content for ${params.slug} goes here` } }; } ``` ```svelte{data.post.title}
{@html data.post.content}
```
## Layout Data
Load data for layouts using `+layout.js` or `+layout.server.js`:
```js
// src/routes/blog/[slug]/+layout.server.js
export async function load() {
return {
posts: await db.getPostSummaries()
};
}
```
```svelte
{data.post.title}
{@html data.post.content}
{#if next}
Next post: {next.title}
{/if} ``` ## Universal vs Server Load Functions **Server load functions** (`+page.server.js`, `+layout.server.js`): - Always run on the server - Can access database, filesystem, private env vars - Must return serializable data - Have access to `cookies`, `locals`, etc. **Universal load functions** (`+page.js`, `+layout.js`): - Run on server during SSR, then in browser - Useful for fetching from external APIs - Can return non-serializable data (like component constructors) - Receive data from server load functions via the `data` property ## Making Fetch Requests Use the provided `fetch` function for enhanced features: ```js // src/routes/items/[id]/+page.js export async function load({ fetch, params }) { const res = await fetch(`/api/items/${params.id}`); const item = await res.json(); return { item }; } ``` ## Headers and Cookies Set response headers: ```js export async function load({ fetch, setHeaders }) { const response = await fetch(url); setHeaders({ age: response.headers.get('age'), 'cache-control': response.headers.get('cache-control') }); return response.json(); } ``` Access cookies in server load functions: ```js export async function load({ cookies }) { const sessionid = cookies.get('sessionid'); return { user: await db.getUser(sessionid) }; } ``` ## Using Parent Data Access data from parent load functions: ```js export async function load({ parent }) { const { a } = await parent(); return { b: a + 1 }; } ``` ## Errors and Redirects Throw errors: ```js import { error } from '@sveltejs/kit'; export function load({ locals }) { if (!locals.user) { error(401, 'not logged in'); } } ``` Redirect users: ```js import { redirect } from '@sveltejs/kit'; export function load({ locals }) { if (!locals.user) { redirect(307, '/login'); } } ``` ## Streaming with Promises Server load functions can stream promises as they resolve: ```js export async function load({ params }) { return { comments: loadComments(params.slug), post: await loadPost(params.slug) }; } ``` ```svelte{data.post.title}
{@html data.post.content}
{#await data.comments}
Loading comments...
{:then comments}
{#each comments as comment}
{comment.content}
{/each} {:catch error}error loading comments: {error.message}
{/await} ``` ## Rerunning Load Functions Load functions rerun when: - Referenced params or URL properties change - A parent load function reran and `await parent()` was called - A dependency was invalidated with `invalidate(url)` or `invalidateAll()` Manually invalidate load functions: ```js // In load function export async function load({ fetch, depends }) { depends('app:random'); // ... } // In component import { invalidate } from '$app/navigation'; function rerunLoadFunction() { invalidate('app:random'); } ``` ## Dependency Tracking Exclude from dependency tracking with `untrack`: ```js export async function load({ untrack, url }) { if (untrack(() => url.pathname === '/')) { return { message: 'Welcome!' }; } } ``` ## 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 /** @satisfies {import('./$types').Actions} */ export const actions = { default: async (event) => { // TODO log the user in } }; ``` Use it with a simple form: ```svelte ``` From other pages, specify the action path: ```html ``` ## Named Actions Multiple actions in one page: ```js /// file: src/routes/login/+page.server.js /** @satisfies {import('./$types').Actions} */ export const actions = { login: async (event) => { // TODO log the user in }, register: async (event) => { // TODO register the user } }; ``` Invoke with query parameter: ```svelte ``` Use `formaction` for multiple actions in one form: ```svelte ``` > Note: Can't mix default and named actions ## Action Implementation ```js import * as db from '$lib/server/db'; /** @satisfies {import('./$types').Actions} */ 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 component: ```svelte {#if form?.success}Successfully logged in! Welcome back, {data.user.name}
{/if} ``` ### Validation Errors Return errors with the `fail` function: ```js import { fail } from '@sveltejs/kit'; /** @satisfies {import('./$types').Actions} */ 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 } }; ``` Handle errors in the component: ```svelte ``` ### Redirects ```js import { fail, redirect } from '@sveltejs/kit'; /** @satisfies {import('./$types').Actions} */ export const actions = { login: async ({ cookies, request, url }) => { // validation 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. If you modify cookies in an action, update `event.locals` too: ```js /// file: src/routes/account/+page.server.js /** @satisfies {import('./$types').Actions} */ export const actions = { logout: async (event) => { event.cookies.delete('sessionid', { path: '/' }); event.locals.user = null; } }; ``` ## Progressive Enhancement ### use:enhance Basic enhancement: ```svelte ``` Default behavior: - Updates `form` property and `page.form` (only for same-page actions) - Resets the form - Invalidates all data on success - Handles redirects and errors - Resets focus ### Customizing use:enhance ```svelte ``` To target `+page.server.js` actions with fetch: ```js const response = await fetch(this.action, { method: 'POST', body: data, headers: { 'x-sveltekit-action': 'true' } }); ``` ## GET Forms For forms that don't need to POST data: ```html ``` These navigate like `` elements and support the same data attributes for controlling router behavior. ## 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, renders on server first - **Client-Side Rendering (CSR)**: Hydrates server-rendered HTML - **Prerendering**: Generates static HTML at build time Options can be set in `+page.js`, `+page.server.js`, `+layout.js`, or `+layout.server.js`. Child pages override parent layouts. ## Page Options ### prerender Generate static HTML at build time: ```js /// file: +page.js/+page.server.js/+server.js export const prerender = true; // Enable for this route export const prerender = false; // Disable for this route export const prerender = 'auto'; // Prerender but keep in SSR manifest ``` **When to use prerendering**: - Content must be the same for all users - No need for `url.searchParams` during prerendering - Pages with [actions](form-actions) cannot be prerendered **Route conflicts**: Use file extensions for server routes to avoid conflicts: ``` src/routes/foo.json/+server.js // Creates foo.json src/routes/foo/bar.json/+server.js // Creates foo/bar.json ``` ### entries For dynamic routes that need prerendering: ```js /// file: src/routes/blog/[slug]/+page.server.js /** @type {import('./$types').EntryGenerator} */ export function entries() { return [ { slug: 'hello-world' }, { slug: 'another-blog-post' } ]; } export const prerender = true; ``` ### ssr Disable server-side rendering: ```js /// file: +page.js export const ssr = false; // Creates empty shell page, renders only on client ``` ### csr Disable client-side rendering: ```js /// file: +page.js export const csr = false; // No JavaScript sent to client, links cause full page navigation ``` Enable CSR only during development: ```js /// file: +page.js import { dev } from '$app/environment'; export const csr = dev; ``` ### trailingSlash Control URL trailing slashes: ```js /// file: src/routes/+layout.js export const trailingSlash = 'always'; // '/about/' format // Options: 'never' (default), 'always', 'ignore' ``` ### config Platform-specific configuration for adapters: ```js /// file: src/routes/+page.js /** @type {import('some-adapter').Config} */ export const config = { runtime: 'edge' }; ``` Config objects merge at the top level but not deeper levels. ## Best Practices - Use prerendering for static content - Use SSR for dynamic, SEO-important pages - Use CSR-only (SPA mode) for admin sections - Avoid ignoring trailing slashes (harmful for SEO) - Keep browser-only code in component files, not in page option files ## 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! let user; // Shared by all users export function load() { return { user }; } export const actions = { default: async ({ request }) => { const data = await request.formData(); user = { // BAD: exposes one user's data to others name: data.get('name'), secret: data.get('secret') }; } } ``` Instead, authenticate users with cookies and store data in databases. ### No Side-Effects in Load Load functions should be pure: ```js // NEVER DO THIS! import { user } from '$lib/user'; export async function load({ fetch }) { const response = await fetch('/api/user'); user.set(await response.json()); // BAD: shared state } ``` 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 tree state: ```svelte ``` ```svelteWelcome {user().name}
``` > Pass functions to `setContext` to maintain reactivity across boundaries. ## Component State Preservation SvelteKit reuses components during navigation. Make values reactive to handle updates: ```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: `{ "message": "Internal Error" }` Use `handleError` hook for custom error handling (reporting, custom responses). ## Error Responses Error handling depends on context: - In `handle` or `+server.js`: Returns fallback error page or JSON - In `load` functions: Renders nearest `+error.svelte` component Custom fallback error page (`src/error.html`): ```htmlMy custom error page
Status: %sveltekit.status%
Message: %sveltekit.error.message%
``` ## Type Safety Customize error shape with TypeScript: ```ts declare global { namespace App { interface Error { code: string; id: string; } } } export {}; ``` ## docs/kit/30-advanced/30-link-options.md # Link Options in SvelteKit SvelteKit uses standard `` elements for navigation between routes. When clicking a link within your app, SvelteKit imports the code and calls necessary `load` functions to fetch data. ## data-sveltekit-preload-data Controls when data preloading begins: - `"hover"` - starts on mouse hover or mobile `touchstart` - `"tap"` - starts on `touchstart` or `mousedown` Default setup in `app.html`: ```html%sveltekit.body%
```
For time-sensitive data:
```html
Get current stonk values
```
Preloading is skipped if `navigator.connection.saveData` is `true`.
## data-sveltekit-preload-code
Controls when code preloading begins:
- `"eager"` - preloads immediately
- `"viewport"` - preloads when link enters viewport
- `"hover"` - preloads on hover
- `"tap"` - preloads on tap/click
`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 scrolling to top after navigation:
```html
Path
```
## Disabling Options
Use `"false"` to disable options within a parent element:
```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 fetch 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:
- **Session IDs**: Stored in database, revokable, 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 SvelteKit-specific auth implementation
- Add to project: `npx sv create` (new) or `npx sv add lucia` (existing)
- SvelteKit-specific guides preferred over generic JS auth libraries
## docs/kit/40-best-practices/06-icons.md
# Icons
## CSS
Use Iconify for CSS-based icons:
- Access [many icon sets](https://icon-sets.iconify.design/)
- Include via [CSS](https://iconify.design/docs/usage/css/)
- Use with [Tailwind CSS plugin](https://iconify.design/docs/usage/css/tailwind/) or [UnoCSS plugin](https://iconify.design/docs/usage/css/unocss/)
Advantage: No need to import each icon into `.svelte` files.
## Svelte
Many [icon libraries](https://www.sveltesociety.dev/packages?category=icons) are available.
⚠️ **Best Practice**: Avoid libraries with one `.svelte` file per icon - they slow down [Vite's dependency optimization](https://vite.dev/guide/dep-pre-bundling.html), especially when imported via both umbrella and subpath imports.
## 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, and prevents layout shift.
#### 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
Your Page Title
```
Common pattern: Return SEO data from page `load` functions, use in root layout.
### Sitemaps
Create a dynamic sitemap with a server endpoint:
```js
/// file: 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
/// file: svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
inlineStyleThreshold: Infinity
}
};
export default config;
```
2. Disable CSR:
```js
/// file: src/routes/+layout.server.js
export const csr = false;
```
3. Add `amp` to `app.html`:
```html
...
```
4. Transform HTML with hooks:
```js
/// file: src/hooks.server.js
import * as amp from '@sveltejs/amp';
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
let buffer = '';
return await resolve(event, {
transformPageChunk: ({ html, done }) => {
buffer += html;
if (done) return amp.transform(buffer);
}
});
}
```
5. Optimize CSS (optional):
```js
/// file: 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')
.replace(/`;
});
css = dropcss({ css, html: markup }).css;
return markup.replace('', `${css}`);
}
}
});
}
```
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.