You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page. You don't need to know Svelte to understand the rest of this guide, but it will help. If you'd like to learn more, check out [the Svelte tutorial](https://svelte.dev/tutorial).
19
+
In short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page. You don't need to know Svelte to understand the rest of this guide, but it will help. If you'd like to learn more, check out [the Svelte tutorial](/tutorial).
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ The first command will scaffold a new project in the `my-app` directory asking y
15
15
16
16
There are two basic concepts:
17
17
18
-
- Each page of your app is a [Svelte](https://svelte.dev) component
18
+
- Each page of your app is a [Svelte](../svelte) component
19
19
- You create pages by adding files to the `src/routes` directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over
20
20
21
21
Try editing the files to get a feel for how everything works.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -384,7 +384,7 @@ In turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `Layo
384
384
385
385
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`.
386
386
387
-
You can read more about omitting `$types` in our [blog post](https://svelte.dev/blog/zero-config-type-safety) about it.
387
+
You can read more about omitting `$types` in our [blog post](/blog/zero-config-type-safety) about it.
388
388
389
389
## Other files
390
390
@@ -394,6 +394,6 @@ If components and modules are needed by multiple routes, it's a good idea to put
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+7-7
Original file line number
Diff line number
Diff line change
@@ -34,7 +34,7 @@ export function load({ params }) {
34
34
35
35
Thanks to the generated `$types` module, we get full type safety.
36
36
37
-
A `load` function in a `+page.js` file runs both on the server and in the browser (unless combined with `export const ssr = false`, in which case it will [only run in the browser](https://kit.svelte.dev/docs/page-options#ssr)). If your `load` function should _always_ run on the server (because it uses private environment variables, for example, or accesses a database) then it would go in a `+page.server.js` instead.
37
+
A `load` function in a `+page.js` file runs both on the server and in the browser (unless combined with `export const ssr = false`, in which case it will [only run in the browser](page-options#ssr)). If your `load` function should _always_ run on the server (because it uses private environment variables, for example, or accesses a database) then it would go in a `+page.server.js` instead.
38
38
39
39
A more realistic version of your blog post's `load` function, that only runs on the server and pulls data from a database, might look like this:
40
40
@@ -120,8 +120,8 @@ Data returned from layout `load` functions is available to child `+layout.svelte
120
120
121
121
+++ // we can access `data.posts` because it's returned from
122
122
// the parent layout `load` function
123
-
$: index = data.posts.findIndex(post => post.slug === $page.params.slug);
124
-
$: next = data.posts[index - 1];+++
123
+
let index = $derived(data.posts.findIndex(post => post.slug === $page.params.slug));
124
+
let next = $derived(data.posts[index - 1];)+++
125
125
</script>
126
126
127
127
<h1>{data.post.title}</h1>
@@ -675,7 +675,7 @@ To summarize, a `load` function will rerun in the following situations:
675
675
676
676
`params` and `url` can change in response to a `<a href="..">` link click, a [`<form>` interaction](form-actions#GET-vs-POST), a [`goto`]($app-navigation#goto) invocation, or a [`redirect`](@sveltejs-kit#redirect).
677
677
678
-
Note that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`]($app-navigation#afterNavigate) callback, and/or wrap your component in a [`{#key ...}`](https://svelte.dev/docs#template-syntax-key) block.
678
+
Note that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`]($app-navigation#afterNavigate) callback, and/or wrap your component in a [`{#key ...}`](../svelte/key) block.
679
679
680
680
## Implications for authentication
681
681
@@ -693,6 +693,6 @@ Putting an auth guard in `+layout.server.js` requires all child pages to call `a
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -82,7 +82,7 @@ If you're not using SSR, then there's no risk of accidentally exposing one user'
82
82
83
83
## Using stores with context
84
84
85
-
You might wonder how we're able to use `$page.data` and other [app stores]($app-stores) if we can't use our own stores. The answer is that app stores on the server use Svelte's [context API](https://learn.svelte.dev/tutorial/context-api) — the store is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own stores:
85
+
You might wonder how we're able to use `$page.data` and other [app stores]($app-stores) if we can't use our own stores. The answer is that app stores on the server use Svelte's [context API](/tutorial/svelte/context-api) — the store is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own stores:
86
86
87
87
```svelte
88
88
<!--- file: src/routes/+layout.svelte --->
@@ -143,16 +143,16 @@ When you navigate around your application, SvelteKit reuses existing layout and
143
143
144
144
...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the layout, page and any other components within to be destroyed and recreated. Instead the `data` prop (and by extension `data.title` and `data.content`) will update (as it would with any other Svelte component) and, because the code isn't rerunning, lifecycle methods like `onMount` and `onDestroy` won't rerun and `estimatedReadingTime` won't be recalculated.
145
145
146
-
Instead, we need to make the value [_reactive_](https://learn.svelte.dev/tutorial/reactive-assignments):
146
+
Instead, we need to make the value [_reactive_](/tutorial/svelte/state):
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ When you create a new SvelteKit project with `npx sv create`, it installs [`adap
9
9
-[`@sveltejs/adapter-vercel`](adapter-vercel) for [Vercel](https://vercel.com/)
10
10
-[`svelte-adapter-azure-swa`](https://github.com/geoffrich/svelte-adapter-azure-swa) for [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)
11
11
-[`svelte-kit-sst`](https://github.com/sst/sst/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)
12
-
-[`@sveltejs/adapter-node`](https://kit.svelte.dev/docs/adapter-node) for [Google Cloud Run](https://cloud.google.com/run)
12
+
-[`@sveltejs/adapter-node`](adapter-node) for [Google Cloud Run](https://cloud.google.com/run)
13
13
14
14
It's recommended to install the appropriate adapter to your `devDependencies` once you've settled on a target environment, since this will add the adapter to your lockfile and slightly improve install times on CI.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -108,11 +108,11 @@ For testing the build, you should use [wrangler](https://developers.cloudflare.c
108
108
109
109
## Notes
110
110
111
-
Functions contained in the `/functions` directory at the project's root will _not_ be included in the deployment, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). Functions should be implemented as [server endpoints](https://kit.svelte.dev/docs/routing#server) in your SvelteKit app.
111
+
Functions contained in the `/functions` directory at the project's root will _not_ be included in the deployment, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). Functions should be implemented as [server endpoints](routing#server) in your SvelteKit app.
112
112
113
113
The `_headers` and `_redirects` files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
114
114
115
-
However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](https://kit.svelte.dev/docs/routing#server) or with the [`handle`](https://kit.svelte.dev/docs/hooks#Server-hooks-handle) hook.
115
+
However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.
116
116
117
117
## Troubleshooting
118
118
@@ -122,4 +122,4 @@ You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit s
122
122
123
123
### Accessing the file system
124
124
125
-
You can't use `fs` in Cloudflare Workers — you must [prerender](https://kit.svelte.dev/docs/page-options#prerender) the routes in question.
125
+
You can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -80,7 +80,7 @@ During compilation, redirect rules are automatically appended to your `_redirect
80
80
### Netlify Forms
81
81
82
82
1. Create your Netlify HTML form as described [here](https://docs.netlify.com/forms/setup/#html-forms), e.g. as `/routes/contact/+page.svelte`. (Don't forget to add the hidden `form-name` input element!)
83
-
2. Netlify's build bot parses your HTML files at deploy time, which means your form must be [prerendered](https://kit.svelte.dev/docs/page-options#prerender) as HTML. You can either add `export const prerender = true` to your `contact.svelte` to prerender just that page or set the `kit.prerender.force: true` option to prerender all pages.
83
+
2. Netlify's build bot parses your HTML files at deploy time, which means your form must be [prerendered](page-options#prerender) as HTML. You can either add `export const prerender = true` to your `contact.svelte` to prerender just that page or set the `kit.prerender.force: true` option to prerender all pages.
84
84
3. If your Netlify form has a [custom success message](https://docs.netlify.com/forms/setup/#success-messages) like `<form netlify ... action="/success">` then ensure the corresponding `/routes/success/+page.svelte` exists and is prerendered.
85
85
86
86
### Netlify Functions
@@ -115,4 +115,4 @@ You can't use `fs` in edge deployments.
115
115
116
116
You _can_ use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the `read` function from `$app/server` to access your files. `read` does not work inside edge deployments (this may change in future).
117
117
118
-
Alternatively, you can [prerender](https://kit.svelte.dev/docs/page-options#prerender) the routes in question.
118
+
Alternatively, you can [prerender](page-options#prerender) the routes in question.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -161,7 +161,7 @@ Cookie-based skew protection comes with one caveat: if a user has multiple versi
161
161
162
162
### Vercel functions
163
163
164
-
If you have Vercel functions contained in the `api` directory at the project's root, any requests for `/api/*` will _not_ be handled by SvelteKit. You should implement these as [API routes](https://kit.svelte.dev/docs/routing#server) in your SvelteKit app instead, unless you need to use a non-JavaScript language in which case you will need to ensure that you don't have any `/api/*` routes in your SvelteKit app.
164
+
If you have Vercel functions contained in the `api` directory at the project's root, any requests for `/api/*` will _not_ be handled by SvelteKit. You should implement these as [API routes](routing#server) in your SvelteKit app instead, unless you need to use a non-JavaScript language in which case you will need to ensure that you don't have any `/api/*` routes in your SvelteKit app.
0 commit comments