diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md b/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md index d860285bd5..7fd2f227cf 100644 --- a/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md +++ b/apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md @@ -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: diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md index 7686567b69..6798ded623 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md @@ -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. diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md index 2c43548ae3..08d877549c 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md @@ -7,7 +7,7 @@ title: Remote functions

Available since 2.27

-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. @@ -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 @@ -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));

{post.title}

@@ -161,7 +161,7 @@ Any query can be updated via its `refresh` method: ``` -> [!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 @@ -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}`); @@ -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: diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md index 6f018fbefd..6493ea7328 100644 --- a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md +++ b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md @@ -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` @@ -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'; @@ -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. diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md index b850f3b79d..17733ce3b8 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md @@ -151,7 +151,7 @@ Checks whether this is an error thrown by `error`. ```dts function isHttpError( e: unknown, - status?: T | undefined + status?: T ): e is HttpError_1 & { status: T extends undefined ? never : T; }; @@ -182,10 +182,7 @@ Create a JSON `Response` object from the supplied data.
```dts -function json( - data: any, - init?: ResponseInit | undefined -): Response; +function json(data: any, init?: ResponseInit): Response; ```
@@ -268,10 +265,7 @@ Create a `Response` object from the supplied body.
```dts -function text( - body: string, - init?: ResponseInit | undefined -): Response; +function text(body: string, init?: ResponseInit): Response; ```
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md index 57163c4dcc..d51669c4ab 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md @@ -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; ``` @@ -259,11 +257,9 @@ Returns a `Promise` that resolves when the page is subsequently updated. ```dts function refreshAll({ includeLoadFunctions -}?: - | { - includeLoadFunctions?: boolean; - } - | undefined): Promise; +}?: { + includeLoadFunctions?: boolean; +}): Promise; ``` diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md index 21b0aedefc..187cf69904 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md @@ -57,7 +57,7 @@ function command( validate: Schema, fn: (arg: StandardSchemaV1.InferOutput) => Output ): RemoteCommand< - StandardSchemaV1.InferOutput, + StandardSchemaV1.InferInput, Output >; ``` @@ -171,13 +171,13 @@ function prerender( options?: | { inputs?: RemotePrerenderInputsGenerator< - StandardSchemaV1.InferOutput + StandardSchemaV1.InferInput >; dynamic?: boolean; } | undefined ): RemotePrerenderFunction< - StandardSchemaV1.InferOutput, + StandardSchemaV1.InferInput, Output >; ``` @@ -228,7 +228,7 @@ function query( arg: StandardSchemaV1.InferOutput ) => MaybePromise ): RemoteQueryFunction< - StandardSchemaV1.InferOutput, + StandardSchemaV1.InferInput, Output >; ``` diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-types.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-types.md index 465e50d791..2ca2eb8096 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-types.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-types.md @@ -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`.
```dts -type Pathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {}; +type ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {}; ```