Skip to content

Commit 52b805d

Browse files
Rich-Harrisgithub-actions[bot]
authored andcommitted
sync kit docs
1 parent e4cdbe6 commit 52b805d

14 files changed

+245
-91
lines changed

Diff for: apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md

+28-6
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ Pages can receive data from `load` functions via the `data` prop.
4343
```svelte
4444
<!--- file: src/routes/blog/[slug]/+page.svelte --->
4545
<script>
46-
/** @type {{ data: import('./$types').PageData }} */
46+
/** @type {import('./$types').PageProps} */
4747
let { data } = $props();
4848
</script>
4949
@@ -52,7 +52,9 @@ Pages can receive data from `load` functions via the `data` prop.
5252
```
5353

5454
> [!LEGACY]
55-
> In Svelte 4, you'd use `export let data` instead
55+
> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` property manually with `PageData` instead, see [$types](#\$types).
56+
>
57+
> In Svelte 4, you'd use `export let data` instead.
5658
5759
> [!NOTE] SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
5860
@@ -213,7 +215,7 @@ We can create a layout that only applies to pages below `/settings` (while inher
213215
```svelte
214216
<!--- file: src/routes/settings/+layout.svelte --->
215217
<script>
216-
/** @type {{ data: import('./$types').LayoutData, children: import('svelte').Snippet }} */
218+
/** @type {import('./$types').LayoutProps} */
217219
let { data, children } = $props();
218220
</script>
219221
@@ -228,6 +230,9 @@ We can create a layout that only applies to pages below `/settings` (while inher
228230
{@render children()}
229231
```
230232

233+
> [!LEGACY]
234+
> `LayoutProps` was added in 2.16.0. In earlier versions, you had to [type the properties manually instead](#\$types).
235+
231236
You can see how `data` is populated by looking at the `+layout.js` example in the next section just below.
232237

233238
By default, each layout inherits the layout above it. Sometimes that isn't what you want - in this case, [advanced layouts](advanced-routing#Advanced-layouts) can help you.
@@ -256,7 +261,7 @@ Data returned from a layout's `load` function is also available to all its child
256261
```svelte
257262
<!--- file: src/routes/settings/profile/+page.svelte --->
258263
<script>
259-
/** @type {{ data: import('./$types').PageData }} */
264+
/** @type {import('./$types').PageProps} */
260265
let { data } = $props();
261266
262267
console.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]
@@ -389,16 +394,33 @@ export async function fallback({ request }) {
389394
390395
Throughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.
391396
392-
For example, annotating `let { data } = $props()` with `PageData` (or `LayoutData`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
397+
For example, annotating `let { data } = $props()` with `PageProps` (or `LayoutProps`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
393398
394399
```svelte
395400
<!--- file: src/routes/blog/[slug]/+page.svelte --->
396401
<script>
397-
/** @type {{ data: import('./$types').PageData }} */
402+
/** @type {import('./$types').PageProps} */
398403
let { data } = $props();
399404
</script>
400405
```
401406
407+
> [!NOTE]
408+
> The `PageProps` and `LayoutProps` types, added in 2.16.0, are a shortcut for typing the `data` prop as `PageData` or `LayoutData`, as well as other props, such as `form` for pages, or `children` for layouts. In earlier versions, you had to type these properties manually. For example, for a page:
409+
>
410+
> ```js
411+
> /// file: +page.svelte
412+
> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
413+
> let { data, form } = $props();
414+
> ```
415+
>
416+
> Or, for a layout:
417+
>
418+
> ```js
419+
> /// file: +layout.svelte
420+
> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */
421+
> let { data, children } = $props();
422+
> ```
423+
402424
In turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `LayoutLoad` or `LayoutServerLoad` (for `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` respectively) ensures that `params` and the return value are correctly typed.
403425
404426
If you're using VS Code or any IDE that supports the language server protocol and TypeScript plugins then you can omit these types _entirely_! Svelte's IDE tooling will insert the correct types for you, so you'll get type checking without writing them yourself. It also works with our command line tool `svelte-check`.

Diff for: apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md

+22-7
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function load({ params }) {
2525
```svelte
2626
<!--- file: src/routes/blog/[slug]/+page.svelte --->
2727
<script>
28-
/** @type {{ data: import('./$types').PageData }} */
28+
/** @type {import('./$types').PageProps} */
2929
let { data } = $props();
3030
</script>
3131
@@ -34,7 +34,14 @@ export function load({ params }) {
3434
```
3535

3636
> [!LEGACY]
37-
> In Svelte 4, you'd use `export let data` instead
37+
> Before version 2.16.0, the props of a page and layout had to be typed individually:
38+
> ```js
39+
> /// file: +page.svelte
40+
> /** @type {{ data: import('./$types').PageData }} */
41+
> let { data } = $props();
42+
> ```
43+
>
44+
> In Svelte 4, you'd use `export let data` instead.
3845
3946
Thanks to the generated `$types` module, we get full type safety.
4047
@@ -89,7 +96,7 @@ export async function load() {
8996
```svelte
9097
<!--- file: src/routes/blog/[slug]/+layout.svelte --->
9198
<script>
92-
/** @type {{ data: import('./$types').LayoutData, children: Snippet }} */
99+
/** @type {import('./$types').LayoutProps} */
93100
let { data, children } = $props();
94101
</script>
95102
@@ -112,14 +119,22 @@ export async function load() {
112119
</aside>
113120
```
114121

122+
> [!LEGACY]
123+
> `LayoutProps` was added in 2.16.0. In earlier versions, properties had to be typed individually:
124+
> ```js
125+
> /// file: +layout.svelte
126+
> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */
127+
> let { data, children } = $props();
128+
> ```
129+
115130
Data returned from layout `load` functions is available to child `+layout.svelte` components and the `+page.svelte` component as well as the layout that it 'belongs' to.
116131
117132
```svelte
118133
/// file: src/routes/blog/[slug]/+page.svelte
119134
<script>
120135
+++import { page } from '$app/state';+++
121136
122-
/** @type {{ data: import('./$types').PageData }} */
137+
/** @type {import('./$types').PageProps} */
123138
let { data } = $props();
124139
125140
+++ // we can access `data.posts` because it's returned from
@@ -373,7 +388,7 @@ export async function load({ parent }) {
373388
```svelte
374389
<!--- file: src/routes/abc/+page.svelte --->
375390
<script>
376-
/** @type {{ data: import('./$types').PageData }} */
391+
/** @type {import('./$types').PageProps} */
377392
let { data } = $props();
378393
</script>
379394
@@ -512,7 +527,7 @@ This is useful for creating skeleton loading states, for example:
512527
```svelte
513528
<!--- file: src/routes/blog/[slug]/+page.svelte --->
514529
<script>
515-
/** @type {{ data: import('./$types').PageData }} */
530+
/** @type {import('./$types').PageProps} */
516531
let { data } = $props();
517532
</script>
518533
@@ -653,7 +668,7 @@ export async function load({ fetch, depends }) {
653668
<script>
654669
import { invalidate, invalidateAll } from '$app/navigation';
655670
656-
/** @type {{ data: import('./$types').PageData }} */
671+
/** @type {import('./$types').PageProps} */
657672
let { data } = $props();
658673
659674
function rerunLoadFunction() {

Diff for: apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md

+12-5
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export const actions = {
141141
```svelte
142142
<!--- file: src/routes/login/+page.svelte --->
143143
<script>
144-
/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
144+
/** @type {import('./$types').PageProps} */
145145
let { data, form } = $props();
146146
</script>
147147

@@ -153,7 +153,14 @@ export const actions = {
153153
```
154154
155155
> [!LEGACY]
156-
> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties
156+
> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` and `form` properties individually:
157+
> ```js
158+
> /// file: +page.svelte
159+
> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
160+
> let { data, form } = $props();
161+
> ```
162+
>
163+
> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties.
157164
158165
### Validation errors
159166
@@ -340,7 +347,7 @@ The easiest way to progressively enhance a form is to add the `use:enhance` acti
340347
<script>
341348
+++import { enhance } from '$app/forms';+++
342349

343-
/** @type {{ form: import('./$types').ActionData }} */
350+
/** @type {import('./$types').PageProps} */
344351
let { form } = $props();
345352
</script>
346353

@@ -391,7 +398,7 @@ If you return a callback, you may need to reproduce part of the default `use:enh
391398
<script>
392399
import { enhance, +++applyAction+++ } from '$app/forms';
393400

394-
/** @type {{ form: import('./$types').ActionData }} */
401+
/** @type {import('./$types').PageProps} */
395402
let { form } = $props();
396403
</script>
397404

@@ -428,7 +435,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
428435
import { invalidateAll, goto } from '$app/navigation';
429436
import { applyAction, deserialize } from '$app/forms';
430437

431-
/** @type {{ form: import('./$types').ActionData }} */
438+
/** @type {import('./$types').PageProps} */
432439
let { form } = $props();
433440

434441
/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */

Diff for: apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ You might wonder how we're able to use `page.data` and other [app state]($app-st
9090
<script>
9191
import { setContext } from 'svelte';
9292
93-
/** @type {{ data: import('./$types').LayoutData }} */
93+
/** @type {import('./$types').LayoutProps} */
9494
let { data } = $props();
9595
9696
// Pass a function referencing our state
@@ -127,7 +127,7 @@ When you navigate around your application, SvelteKit reuses existing layout and
127127
```svelte
128128
<!--- file: src/routes/blog/[slug]/+page.svelte --->
129129
<script>
130-
/** @type {{ data: import('./$types').PageData }} */
130+
/** @type {import('./$types').PageProps} */
131131
let { data } = $props();
132132
133133
// THIS CODE IS BUGGY!
@@ -150,7 +150,7 @@ Instead, we need to make the value [_reactive_](/tutorial/svelte/state):
150150
```svelte
151151
/// file: src/routes/blog/[slug]/+page.svelte
152152
<script>
153-
/** @type {{ data: import('./$types').PageData }} */
153+
/** @type {import('./$types').PageProps} */
154154
let { data } = $props();
155155
156156
+++ let wordCount = $derived(data.content.split(' ').length);

Diff for: apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@ export async function POST({ request, platform }) {
8383

8484
> [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
8585
86-
To include type declarations for your bindings, reference them in your `src/app.d.ts`:
86+
To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
8787

8888
```ts
8989
/// file: src/app.d.ts
90-
import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
90+
+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++
9191

9292
declare global {
9393
namespace App {
@@ -121,7 +121,7 @@ However, they will have no effect on responses dynamically rendered by SvelteKit
121121

122122
### Further reading
123123

124-
You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site).
124+
You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site).
125125

126126
### Accessing the file system
127127

Diff for: apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,11 @@ export async function POST({ request, platform }) {
104104

105105
> [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
106106
107-
To include type declarations for your bindings, reference them in your `src/app.d.ts`:
107+
To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
108108

109109
```ts
110110
/// file: src/app.d.ts
111-
import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
111+
+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++
112112

113113
declare global {
114114
namespace App {

Diff for: apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md

+34-12
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ export default {
9292

9393
Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/incremental-static-regeneration) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.
9494

95+
> Use ISR only on routes where every visitor should see the same content (much like when you prerender). If there's anything user-specific happening (like session cookies), they should happen on the client via JavaScript only to not leak sensitive information across visits
96+
9597
To add ISR to a route, include the `isr` property in your `config` object:
9698

9799
```js
@@ -100,24 +102,44 @@ import { BYPASS_TOKEN } from '$env/static/private';
100102

101103
export const config = {
102104
isr: {
103-
// Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function.
104-
// Setting the value to `false` means it will never expire.
105105
expiration: 60,
106-
107-
// Random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset
108-
// with a __prerender_bypass=<token> cookie.
109-
//
110-
// Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
111106
bypassToken: BYPASS_TOKEN,
112-
113-
// List of valid query parameters. Other parameters (such as utm tracking codes) will be ignored,
114-
// ensuring that they do not result in content being regenerated unnecessarily
115107
allowQuery: ['search']
116108
}
117109
};
118110
```
119111

120-
The `expiration` property is required; all others are optional.
112+
> Using ISR on a route with `export const prerender = true` will have no effect, since the route is prerendered at build time
113+
114+
The `expiration` property is required; all others are optional. The properties are discussed in more detail below.
115+
116+
### expiration
117+
118+
The expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to `false` means it will never expire. In that case, you likely want to define a bypass token to re-generate on demand.
119+
120+
### bypassToken
121+
122+
A random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset with a `__prerender_bypass=<token>` cookie.
123+
124+
Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
125+
126+
Note that the `BYPASS_TOKEN` string must be at least 32 characters long. You could generate one using the JavaScript console like so:
127+
128+
```console
129+
btoa(Math.random().toString()).substring(0,32);
130+
```
131+
132+
Set this string as an environment variable on Vercel by logging in and going to your project then Settings > Environment Variables. For "Key" put `BYPASS_TOKEN` and for "value" use the string generated above, then hit "Save".
133+
134+
To get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so:
135+
136+
```console
137+
$ vercel env pull .env.development.local
138+
```
139+
140+
### allowQuery
141+
142+
A list of valid query parameters that contribute to the cache key. Other parameters (such as utm tracking codes) will be ignored, ensuring that they do not result in content being re-generated unnecessarily. By default, query parameters are ignored.
121143

122144
> Pages that are [prerendered](page-options#prerender) will ignore ISR configuration.
123145
@@ -141,7 +163,7 @@ export function load() {
141163
```svelte
142164
<!--- file: +layout.svelte --->
143165
<script>
144-
/** @type {{ data: import('./$types').LayoutServerData }} */
166+
/** @type {import('./$types').LayoutProps} */
145167
let { data } = $props();
146168
</script>
147169

Diff for: apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ export async function handle({ event, resolve }) {
4040
4141
If unimplemented, defaults to `({ event, resolve }) => resolve(event)`.
4242

43+
During prerendering, SvelteKit crawls your pages for links and renders each route it finds. Rendering the route invokes the `handle` function (and all other route dependencies, like `load`). If you need to exclude some code from running during this phase, check that the app is not [`building`]($app-environment#building) beforehand.
44+
4345
### locals
4446

4547
To add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below.

0 commit comments

Comments
 (0)