Skip to content

Sync kit docs #1454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 6, 2025
Merged

Sync kit docs #1454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ The easiest way to start building a SvelteKit app is to run `npx sv create`:
```sh
npx sv create my-app
cd my-app
npm install
npm run dev
```

The first command will scaffold a new project in the `my-app` directory asking you if you'd like to set up some basic tooling such as TypeScript. See [integrations](./integrations) for pointers on setting up additional tooling. The subsequent commands will then install its dependencies and start a server on [localhost:5173](http://localhost:5173).
The first command will scaffold a new project in the `my-app` directory asking if you'd like to set up some basic tooling such as TypeScript. See [the CLI docs](/docs/cli/overview) for information about these options and [the integrations page](./integrations) for pointers on setting up additional tooling. `npm run dev` will then start the development server on [localhost:5173](http://localhost:5173) - make sure you install dependencies before running this if you didn't do so during project creation.

There are two basic concepts:

Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ Conceptually, they're the same thing, but there are some important differences t

Server `load` functions _always_ run on the server.

By default, universal `load` functions run on the server during SSR when the user first visits your page. They will then run again during hydration, reusing any responses from [fetch requests](#Making-fetch-requests). All subsequent invocations of universal `load` functions happen in the browser. You can customize the behavior through [page options](page-options). If you disable [server side rendering](page-options#ssr), you'll get an SPA and universal `load` functions _always_ run on the client.
By default, universal `load` functions run on the server during SSR when the user first visits your page. They will then run again during hydration, reusing any responses from [fetch requests](#Making-fetch-requests). All subsequent invocations of universal `load` functions happen in the browser. You can customize the behavior through [page options](page-options). If you disable [server-side rendering](page-options#ssr), you'll get an SPA and universal `load` functions _always_ run on the client.

If a route contains both universal and server `load` functions, the server `load` runs first.

Expand Down
12 changes: 6 additions & 6 deletions apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ title: Remote functions
<p>Available since 2.27</p>
</blockquote>

Remote functions are a tool for type-safe communication between client and server. They can be _called_ anywhere in your app, but always _run_ on the server, and as such can safely access [server-only modules](server-only-modules) containing things like environment variables and database clients.
Remote functions are a tool for type-safe communication between client and server. They can be _called_ anywhere in your app, but always _run_ on the server, meaning they can safely access [server-only modules](server-only-modules) containing things like environment variables and database clients.

Combined with Svelte's experimental support for [`await`](/docs/svelte/await-expressions), it allows you to load and manipulate data directly inside your components.

Expand All @@ -26,7 +26,7 @@ export default {

## Overview

Remote functions are exported from a `.remote.js` or `.remote.ts` file, and come in four flavours: `query`, `form`, `command` and `prerender`. On the client, the exported functions are transformed to `fetch` wrappers that invoke their counterparts on the server via a generated HTTP endpoint.
Remote functions are exported from a `.remote.js` or `.remote.ts` file, and come in four flavours: `query`, `form`, `command` and `prerender`. On the client, the exported functions are transformed to `fetch` wrappers that invoke their counterparts on the server via a generated HTTP endpoint. Remote files must be placed in the `lib` or `routes` directory.

## query

Expand Down Expand Up @@ -114,7 +114,7 @@ Query functions can accept an argument, such as the `slug` of an individual post

let { params } = $props();

const post = getPost(params.slug);
const post = $derived(await getPost(params.slug));
</script>

<h1>{post.title}</h1>
Expand Down Expand Up @@ -161,7 +161,7 @@ Any query can be updated via its `refresh` method:
</button>
```

> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. As such, you don't need a reference like `const posts = getPosts()` in order to refresh the query.
> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. This means you don't need a reference like `const posts = getPosts()` in order to refresh the query.

## form

Expand Down Expand Up @@ -271,7 +271,7 @@ export const createPost = form(async (data) => {

// Refresh `getPosts()` on the server, and send
// the data back with the result of `createPost`
+++getPosts().refresh();+++
+++await getPosts().refresh();+++

// Redirect to the newly created page
redirect(303, `/blog/${slug}`);
Expand Down Expand Up @@ -657,7 +657,7 @@ export const getPost = prerender(
);
```

> [!NOTE] Svelte does not yet support asynchronous server-side rendering, and as such it's likely that you're only calling remote functions from the browser, rather than during prerendering. Because of this you will need to use `inputs`, for now. We're actively working on this roadblock.
> [!NOTE] Svelte does not yet support asynchronous server-side rendering, so it's likely that you're only calling remote functions from the browser, rather than during prerendering. Because of this, you will need to use `inputs`, for now. We're actively working on this roadblock.

By default, prerender functions are excluded from your server bundle, which means that you cannot call them with any arguments that were _not_ prerendered. You can set `dynamic: true` to change this behaviour:

Expand Down
6 changes: 3 additions & 3 deletions apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ This inconsistency is fixed in version 2. Paths are either always relative or al

## Server fetches are not trackable anymore

Previously it was possible to track URLs from `fetch`es on the server in order to rerun load functions. This poses a possible security risk (private URLs leaking), and as such it was behind the `dangerZone.trackServerFetches` setting, which is now removed.
Previously it was possible to track URLs from `fetch`es on the server in order to rerun load functions. This poses a possible security risk (private URLs leaking), and for this reason it was behind the `dangerZone.trackServerFetches` setting, which is now removed.

## `preloadCode` arguments must be prefixed with `base`

Expand All @@ -105,7 +105,7 @@ Additionally, `preloadCode` now takes a single argument rather than _n_ argument

SvelteKit 1 included a function called `resolvePath` which allows you to resolve a route ID (like `/blog/[slug]`) and a set of parameters (like `{ slug: 'hello' }`) to a pathname. Unfortunately the return value didn't include the `base` path, limiting its usefulness in cases where `base` was set.

As such, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.
For this reason, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.

```js
---import { resolvePath } from '@sveltejs/kit';
Expand All @@ -128,7 +128,7 @@ SvelteKit 2 cleans this up by calling `handleError` hooks with two new propertie

The `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _run time_ environment variables, as opposed to the _build time_ environment variables exposed by `$env/static/public` and `$env/static/private`.

During prerendering in SvelteKit 1, they are one and the same. As such, prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.
During prerendering in SvelteKit 1, they are one and the same. This means that prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.

Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `/_app/env.js`) instead of reading them from the server-rendered HTML.

Expand Down
12 changes: 3 additions & 9 deletions apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ Checks whether this is an error thrown by `error`.
```dts
function isHttpError<T extends number>(
e: unknown,
status?: T | undefined
status?: T
): e is HttpError_1 & {
status: T extends undefined ? never : T;
};
Expand Down Expand Up @@ -182,10 +182,7 @@ Create a JSON `Response` object from the supplied data.
<div class="ts-block">

```dts
function json(
data: any,
init?: ResponseInit | undefined
): Response;
function json(data: any, init?: ResponseInit): Response;
```

</div>
Expand Down Expand Up @@ -268,10 +265,7 @@ Create a `Response` object from the supplied body.
<div class="ts-block">

```dts
function text(
body: string,
init?: ResponseInit | undefined
): Response;
function text(body: string, init?: ResponseInit): Response;
```

</div>
Expand Down
30 changes: 13 additions & 17 deletions apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,16 @@ For external URLs, use `window.location = url` instead of calling `goto(url)`.
```dts
function goto(
url: string | URL,
opts?:
| {
replaceState?: boolean | undefined;
noScroll?: boolean | undefined;
keepFocus?: boolean | undefined;
invalidateAll?: boolean | undefined;
invalidate?:
| (string | URL | ((url: URL) => boolean))[]
| undefined;
state?: App.PageState | undefined;
}
| undefined
opts?: {
replaceState?: boolean | undefined;
noScroll?: boolean | undefined;
keepFocus?: boolean | undefined;
invalidateAll?: boolean | undefined;
invalidate?:
| (string | URL | ((url: URL) => boolean))[]
| undefined;
state?: App.PageState | undefined;
}
): Promise<void>;
```

Expand Down Expand Up @@ -259,11 +257,9 @@ Returns a `Promise` that resolves when the page is subsequently updated.
```dts
function refreshAll({
includeLoadFunctions
}?:
| {
includeLoadFunctions?: boolean;
}
| undefined): Promise<void>;
}?: {
includeLoadFunctions?: boolean;
}): Promise<void>;
```

</div>
Expand Down
8 changes: 4 additions & 4 deletions apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ function command<Schema extends StandardSchemaV1, Output>(
validate: Schema,
fn: (arg: StandardSchemaV1.InferOutput<Schema>) => Output
): RemoteCommand<
StandardSchemaV1.InferOutput<Schema>,
StandardSchemaV1.InferInput<Schema>,
Output
>;
```
Expand Down Expand Up @@ -171,13 +171,13 @@ function prerender<Schema extends StandardSchemaV1, Output>(
options?:
| {
inputs?: RemotePrerenderInputsGenerator<
StandardSchemaV1.InferOutput<Schema>
StandardSchemaV1.InferInput<Schema>
>;
dynamic?: boolean;
}
| undefined
): RemotePrerenderFunction<
StandardSchemaV1.InferOutput<Schema>,
StandardSchemaV1.InferInput<Schema>,
Output
>;
```
Expand Down Expand Up @@ -228,7 +228,7 @@ function query<Schema extends StandardSchemaV1, Output>(
arg: StandardSchemaV1.InferOutput<Schema>
) => MaybePromise<Output>
): RemoteQueryFunction<
StandardSchemaV1.InferOutput<Schema>,
StandardSchemaV1.InferInput<Schema>,
Output
>;
```
Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/content/docs/kit/98-reference/20-$app-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@ type Pathname = '/' | '/my-route' | `/my-other-route/${string}` & {};

## ResolvedPathname

`Pathname`, but possibly prefixed with a [base path](https://svelte.dev/docs/kit/configuration#paths). Used for `page.url.pathname`.
Similar to `Pathname`, but possibly prefixed with a [base path](https://svelte.dev/docs/kit/configuration#paths). Used for `page.url.pathname`.

<div class="ts-block">

```dts
type Pathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {};
type ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {};
```

</div>
Expand Down