Skip to content

Commit 7e90e40

Browse files
committed
feat: Add definitions for new SvelteKit features and update existing documentation
- Introduced `$env/dynamic/private` and `$env/dynamic/public` for runtime environment variables. - Added `$env/static/private` and `$env/static/public` for build-time environment variables. - Enhanced `$state` documentation with notes on deep reactivity and raw state. - Created definitions for layout modules: `+layout.server.ts`, `+layout.svelte`, and `+layout.ts`. - Added page modules definitions: `+page.server.ts`, `+page.svelte`, and `+page.ts`. - Introduced server route module definition: `+server.ts`. - Added definitions for actions, cookies, and dependency management. - Documented new features like error handling, JSON responses, and hooks. - Added definitions for remote functions, layout groups, and parameter matchers. - Updated lifecycle equivalents and migration patterns for Svelte 5. - Introduced optional and rest parameters in routing. - Added setHeaders helper for managing HTTP response headers.
1 parent 972fcdb commit 7e90e40

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1215
-105
lines changed

definitions/$app.forms.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# $app/forms Definition
2+
3+
**Definition:** Client helpers for progressive form enhancement and
4+
action results.
5+
6+
**Syntax:**
7+
`import { enhance, applyAction, deserialize } from '$app/forms'`
8+
9+
**Functions:**
10+
11+
- `enhance(form, submit?)` — use:enhance or programmatic; optional
12+
callback per submit
13+
- `applyAction(result)` — apply an `ActionResult` to the current page
14+
- `deserialize(text)` — parse ActionResult from a fetch response
15+
16+
## Example
17+
18+
```svelte
19+
<script>
20+
import { enhance } from '$app/forms';
21+
</script>
22+
23+
<form method="POST" use:enhance>
24+
<!-- ... -->
25+
</form>
26+
```
27+
28+
## Related
29+
30+
- `enhance`, `actions`, `fail`

definitions/$app.navigation.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# $app/navigation Definition
2+
3+
**Definition:** Client utilities for navigation and invalidation.
4+
5+
**Syntax:**
6+
`import { goto, invalidate, invalidateAll, beforeNavigate, afterNavigate, onNavigate, preloadData, preloadCode, refreshAll, pushState, replaceState, disableScrollHandling } from '$app/navigation'`
7+
8+
**Functions:**
9+
10+
- `goto(href, opts?)` — programmatic navigation
11+
- `invalidate(urlOrPredicate)` — re-run `load` for resources
12+
- `invalidateAll()` — re-run all active `load` functions
13+
- `beforeNavigate(cb)` / `afterNavigate(cb)` — navigation lifecycle
14+
(call during component init)
15+
- `onNavigate(cb)` — pre-navigation hook (call during component init);
16+
can await before completing and return cleanup
17+
- `preloadData(href)` — preload route code and run load
18+
- `preloadCode(pathname)` — preload route modules only
19+
- `refreshAll({ includeLoadFunctions? })` — refresh remote functions
20+
and optionally rerun load
21+
- `pushState(url, state)` / `replaceState(url, state)` — shallow
22+
routing state
23+
- `disableScrollHandling()` — disable router scroll handling for the
24+
update
25+
26+
## Example
27+
28+
```ts
29+
import { goto, invalidate } from '$app/navigation';
30+
await goto('/dashboard');
31+
await invalidate((url) => url.pathname.startsWith('/api'));
32+
```
33+
34+
## Related
35+
36+
- `$app/stores`, `$app/forms`

definitions/$app.paths.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# $app/paths Definition
2+
3+
**Definition:** Helpers for base/assets paths and resolving URLs or
4+
route IDs respecting `config.kit.paths`.
5+
6+
**Syntax:** `import { asset, resolve } from '$app/paths'`
7+
8+
**API:**
9+
10+
- `asset(file)` — resolve URL for assets in `static/` honoring
11+
`paths.assets` (2.26+)
12+
- `resolve(pathOrRoute, params?)` — resolve pathname or route ID with
13+
params honoring base path (2.26+)
14+
- Deprecated: `assets`, `base`, `resolveRoute`
15+
16+
## Example
17+
18+
```svelte
19+
<script>
20+
import { asset, resolve } from '$app/paths';
21+
const img = asset('/logo.png');
22+
const url = resolve('/blog/[slug]', { slug: 'hello-world' });
23+
</script>
24+
25+
<img src={img} alt="logo" />
26+
<a href={url}>Post</a>
27+
```
28+
29+
## Related
30+
31+
- `configuration#paths`, `$app/navigation`

definitions/$app.server.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# $app/server Definition
2+
3+
**Definition:** Server-only utilities for remote functions and server
4+
helpers: `getRequestEvent`, `read`, and creators for `query`, `form`,
5+
`command`, `prerender` (experimental ≥2.27).
6+
7+
**Syntax:**
8+
`import { getRequestEvent, read, query, form, command, prerender } from '$app/server'`
9+
10+
**API:**
11+
12+
- `getRequestEvent()` — current RequestEvent (sync in environments
13+
without AsyncLocalStorage)
14+
- `read(asset)` — read imported asset contents as a Response
15+
- `query/schema` — create server query (supports validation, batch,
16+
`.refresh()/.set()`)
17+
- `form` — create spreadable form object with progressive enhancement
18+
- `command` — create server mutation callable from code (not during
19+
render)
20+
- `prerender` — create build-time data function (with `inputs`,
21+
`dynamic`)
22+
23+
## Example
24+
25+
```ts
26+
import { getRequestEvent, query } from '$app/server';
27+
28+
export const me = query(async () => {
29+
const { cookies, locals } = getRequestEvent();
30+
return await locals.userFrom(cookies.get('sessionid'));
31+
});
32+
```
33+
34+
## Related
35+
36+
- `remote-functions`, `hooks.server.handleValidationError`

definitions/$app.state.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# $app/state Definition
2+
3+
**Definition:** Read-only state module providing `page`, `navigating`,
4+
and `updated` for reactive routing and version info. Supersedes
5+
`$app/stores` in Kit ≥2.12.
6+
7+
**Syntax:** `import { page, navigating, updated } from '$app/state'`
8+
9+
**API:**
10+
11+
- `page` — reactive object for `url`, `params`, `data`, `form`,
12+
`route`, `status`, `error`
13+
- `navigating` — navigation info (`from`, `to`, `type`, `delta`, null
14+
on server or idle)
15+
- `updated` — object with `current: boolean` and
16+
`check(): Promise<boolean>`
17+
18+
Note: `$app/state` values update reactively only via runes (e.g.
19+
`$derived`).
20+
21+
## Example
22+
23+
```svelte
24+
<script>
25+
import { page, navigating, updated } from '$app/state';
26+
const path = $derived(page.url.pathname);
27+
</script>
28+
29+
<h1>{path}</h1>
30+
{#if navigating?.to}
31+
<p>Navigating…</p>
32+
{/if}
33+
```
34+
35+
## Related
36+
37+
- `$app/navigation`, `$app/stores`

definitions/$app.stores.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# $app/stores Definition
2+
3+
**Definition:** Client-accessible Svelte stores reflecting navigation
4+
state.
5+
6+
Note: Deprecated in SvelteKit 2.12+ in favor of `$app/state` (use
7+
identical APIs via runes). Existing apps may still use `$app/stores`.
8+
9+
**Syntax:** `import { page, navigating, updated } from '$app/stores'`
10+
11+
**Stores:**
12+
13+
- `page``Readable<Page>` with params, route, data
14+
- `navigating``Readable<Navigating | null>`
15+
- `updated``Readable<boolean> & { check(): Promise<boolean> }`
16+
17+
## Example
18+
19+
```svelte
20+
<script>
21+
import { page, navigating, updated } from '$app/stores';
22+
$: title = $page.url.pathname;
23+
</script>
24+
<h1>{title}</h1>
25+
{#if $navigating}<p>Loading…</p>{/if}
26+
```
27+
28+
## Related
29+
30+
- `$app/state`, `$app/navigation`, `load`

definitions/$derived.by.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,28 @@ const validation = $derived.by(() => {
6262
errors,
6363
};
6464
});
65+
66+
// Override a derived temporarily (e.g., optimistic UI)
67+
let likes = $derived(post.likes);
68+
async function like() {
69+
likes += 1; // override
70+
try {
71+
await sendLike();
72+
} catch {
73+
likes -= 1; // rollback on error
74+
}
75+
}
76+
77+
// Destructuring: each piece remains reactive
78+
let { a, b } = $derived(getPair()); // roughly equivalent to $derived(getPair().a) and ...b
79+
80+
// Dependency control
81+
let total2 = $derived.by(() => {
82+
// anything read synchronously is a dependency
83+
return items.reduce((s, n) => s + n, 0);
84+
});
85+
86+
// To exempt values from tracking, use untrack(...)
6587
```
6688

6789
## Related
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# $env/dynamic/private Definition
2+
3+
**Definition:** Runtime (dynamic) private environment variables
4+
available on the server. Excludes variables with `publicPrefix` and
5+
includes those with `privatePrefix` (if configured).
6+
7+
**Syntax:** `import { env } from '$env/dynamic/private'`
8+
9+
**Notes:**
10+
11+
- Server-only; cannot be imported in client code.
12+
- In dev, includes vars from `.env`; in prod, depends on adapter.
13+
14+
## Example
15+
16+
```ts
17+
import { env } from '$env/dynamic/private';
18+
const secret = env.SECRET_API_KEY;
19+
```
20+
21+
## Related
22+
23+
- `$env/static/private`, `$env/dynamic/public`

definitions/$env.dynamic.public.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# $env/dynamic/public Definition
2+
3+
**Definition:** Runtime (dynamic) public environment variables safe
4+
for client usage. Includes only variables with `publicPrefix` (default
5+
`PUBLIC_`).
6+
7+
**Syntax:** `import { env } from '$env/dynamic/public'`
8+
9+
**Notes:**
10+
11+
- Public dynamic vars are sent from server to client; prefer
12+
`$env/static/public` when possible.
13+
14+
## Example
15+
16+
```ts
17+
import { env } from '$env/dynamic/public';
18+
const base = env.PUBLIC_BASE_URL;
19+
```
20+
21+
## Related
22+
23+
- `$env/static/public`, `$env/dynamic/private`

definitions/$env.static.private.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# $env/static/private Definition
2+
3+
**Definition:** Build-time (static) private environment variables
4+
injected by Vite from `.env` and `process.env`. Excludes
5+
`publicPrefix` and includes `privatePrefix` (if configured).
6+
7+
**Syntax:** `import { NAME } from '$env/static/private'`
8+
9+
**Notes:**
10+
11+
- Values are statically replaced at build time; enables dead code
12+
elimination.
13+
- Declare all referenced variables (even if empty) to avoid undefined
14+
at build.
15+
16+
## Example
17+
18+
```ts
19+
import { API_KEY } from '$env/static/private';
20+
```
21+
22+
## Related
23+
24+
- `$env/dynamic/private`, `$env/static/public`

0 commit comments

Comments
 (0)