The Changelog 332: A UI framework without the framework – Listen on Changelog.com
diff --git a/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md b/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md index 6456397a41..1eceb756e9 100644 --- a/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md +++ b/apps/svelte.dev/content/blog/2019-04-15-setting-up-your-editor.md @@ -2,7 +2,7 @@ title: Setting up your editor description: Instructions for configuring linting and syntax highlighting author: Rich Harris -authorURL: https://twitter.com/Rich_Harris +authorURL: https://bsky.app/profile/rich-harris.dev draft: true --- diff --git a/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md b/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md index c0ad2add2b..7682c06646 100644 --- a/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md +++ b/apps/svelte.dev/content/blog/2019-04-16-svelte-for-new-developers.md @@ -2,14 +2,14 @@ title: Svelte for new developers description: Never used Node.js or the command line? No problem author: Rich Harris -authorURL: https://twitter.com/Rich_Harris +authorURL: https://bsky.app/profile/rich-harris.dev --- This short guide is designed to help you — someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling — get up and running. If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people. -If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat). +If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](/chat). ## First things first diff --git a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md index 27a8e88c8c..edb8796d45 100644 --- a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md +++ b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md @@ -2,7 +2,7 @@ title: Write less code description: The most important metric you're not paying attention to author: Rich Harris -authorURL: https://twitter.com/Rich_Harris +authorURL: https://bsky.app/profile/rich-harris.dev --- All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. @@ -110,7 +110,7 @@ It's unusual for the difference to be _quite_ so obvious — in my experience, a ### Top-level elements -In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `` tags and will no longer format languages which are not supported by Prettier, like SASS, Pug or Stylus.
## Coming up
@@ -56,8 +56,8 @@ For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.
## Svelte Showcase
-- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
-- [GitHub Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
+- [This CustomMenu example](/playground/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
+- [GitHub Tetris](/playground/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
- [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives
- [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte!
@@ -72,7 +72,7 @@ For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.
- [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) brings "nearly native" pan-and-zoom to images on desktop and mobile
- [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) is a Material component library for Svelte with over 50 components
- [svelte-undoable](https://github.com/macfja/svelte-undoable) makes it easy to introduce undo and redo functionality using `bind:`
-- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
+- [This Tilt component](/playground/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
### Lots of examples of how use JS tech came out this month:
diff --git a/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
index 93ae099c7d..8700e116e7 100644
--- a/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
+++ b/apps/svelte.dev/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
@@ -10,8 +10,8 @@ Welcome back to the "What's new in Svelte" series! This month, we're covering ne
## New features & impactful bug fixes
1. Destructuring Promises now works as expected by using the `{#await}` syntax
- (**3.29.3**, [Example](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
-2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
+ (**3.29.3**, [Example](/playground/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
+2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](/playground/29959e70103f4868a6525c0734934936?version=3.29.3))
3. Better typings for the `get` function in `svelte/store` and on lifecycle hooks (**3.29.1**)
### What's going on in Sapper?
diff --git a/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
index a89181fc6a..ccf01fb642 100644
--- a/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
+++ b/apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
@@ -2,7 +2,7 @@
title: What's the deal with SvelteKit?
description: We're rethinking how to build Svelte apps. Here's what you need to know
author: Rich Harris
-authorURL: https://twitter.com/rich_harris
+authorURL: https://bsky.app/profile/rich-harris.dev
---
@@ -91,4 +91,4 @@ Keep your eyes peeled for announcements about when we'll launch the public beta
## Where can I learn more?
-Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](https://svelte.dev/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
+Follow [svelte.dev](https://bsky.app/profile/svelte.dev) and [sveltesociety.dev](https://bsky.app/profile/sveltesociety.dev) on BlueSky, and visit [svelte.dev/chat](/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
diff --git a/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
index 0da3abf848..2cdb968cd2 100644
--- a/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
+++ b/apps/svelte.dev/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
@@ -9,10 +9,10 @@ It's the last "What's new in Svelte" of the year and there's lots to celebrate!
## New features & impactful bug fixes
-1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and `slot` components now support spread props: `` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](/tutorial/svelte/svelte-element) for more info (**3.47.0**)!
+- The `` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://v4.svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](/tutorial/svelte/svelte-element) for more info (**3.47.0**)!
## Language Tools updates
diff --git a/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
index b78a7ad962..17c270f359 100644
--- a/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
+++ b/apps/svelte.dev/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
@@ -11,8 +11,8 @@ Let's dive in!
## What's new in Svelte
-- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
-- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
+- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://v4.svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
+- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://v4.svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
- Lots of bug fixes across ``, animations and various DOM elements. Check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3480) for a deeper dive!
## What's new in SvelteKit
diff --git a/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md b/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
index 7ff272f3f8..be53ed623a 100644
--- a/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
+++ b/apps/svelte.dev/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
@@ -91,8 +91,8 @@ _To Read_
- [sveltekit-flash-message](https://www.npmjs.com/package/sveltekit-flash-message) is a Sveltekit library that passes temporary data to the next request, usually from endpoints
- [svelte-particles](https://github.com/matteobruni/tsparticles#svelte) is a lightweight TypeScript library for creating particles
- [svelte-claps](https://github.com/bufgix/svelte-claps) adds clap button (like Medium) to any page for your SvelteKit apps
-- [Neon Flicker](https://svelte.dev/repl/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style
-- [ComboBox](https://svelte.dev/repl/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items
+- [Neon Flicker](/playground/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style
+- [ComboBox](/playground/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items
- [@svelte-put](https://github.com/vnphanquang/svelte-put) is useful svelte stuff to put in your projects
- [vite-plugin-svelte-bridge](https://github.com/joshnuss/vite-plugin-svelte-bridge) lets you write Svelte components and use them from React & Vue
diff --git a/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md b/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
index 1bae198e78..75e8b7ca0d 100644
--- a/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
+++ b/apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
@@ -25,9 +25,9 @@ There's also a _huge_ showcase to cover... so let's jump in!
## Svelte changes
- New accessibility warnings, `a11y-click-events-have-key-events` and `a11y-no-noninteractive-tabindex`, will now warn when your components lack required key events or tabindex. While `a11y-role-has-required-aria-props` will no longer warn when elements match their semantic role (**3.51.0**)
-- `--style-props` are now supported on `` and ` random number: {data.number}
- + ``` ### When do load functions rerun? @@ -691,6 +714,74 @@ To prevent data waterfalls and preserve layout `load` caches: Putting an auth guard in `+layout.server.js` requires all child pages to call `await parent()` before protected code. Unless every child page depends on returned data from `await parent()`, the other options will be more performant. +## Using `getRequestEvent` + +When running server `load` functions, the `event` object passed to the function as an argument can also be retrieved with [`getRequestEvent`]($app-server#getRequestEvent). This allows shared logic (such as authentication guards) to access information about the current request without it needing to be passed around. + +For example, you might have a function that requires users to be logged in, and redirects them to `/login` if not: + +```js +/// file: src/lib/server/auth.js +// @filename: ambient.d.ts +interface User { + name: string; +} + +declare namespace App { + interface Locals { + user?: User; + } +} + +// @filename: index.ts +// ---cut--- +import { redirect } from '@sveltejs/kit'; +import { getRequestEvent } from '$app/server'; + +export function requireLogin() { + const { locals, url } = getRequestEvent(); + + // assume `locals.user` is populated in `handle` + if (!locals.user) { + const redirectTo = url.pathname + url.search; + const params = new URLSearchParams({ redirectTo }); + + redirect(307, `/login?${params}`); + } + + return locals.user; +} +``` + +Now, you can call `requireLogin` in any `load` function (or [form action](form-actions), for example) to guarantee that the user is logged in: + +```js +/// file: +page.server.js +// @filename: ambient.d.ts + +declare module '$lib/server/auth' { + interface User { + name: string; + } + + export function requireLogin(): User; +} + +// @filename: index.ts +// ---cut--- +import { requireLogin } from '$lib/server/auth'; + +export function load() { + const user = requireLogin(); + + // `user` is guaranteed to be a user object here, because otherwise + // `requireLogin` would throw a redirect and we wouldn't get here + return { + message: `hello ${user.name}!` + }; +} +``` + ## Further reading - [Tutorial: Loading data](/tutorial/kit/page-data) diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md index deb4ef73ab..c0ae9dbf84 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md @@ -1,4 +1,5 @@ --- +NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: Form actions --- @@ -102,7 +103,7 @@ As well as the `action` attribute, we can use the `formaction` attribute on a bu ## Anatomy of an action -Each action receives a `RequestEvent` object, allowing you to read the data with `request.formData()`. After processing the request (for example, logging the user in by setting a cookie), the action can respond with data that will be available through the `form` property on the corresponding page and through `$page.form` app-wide until the next update. +Each action receives a `RequestEvent` object, allowing you to read the data with `request.formData()`. After processing the request (for example, logging the user in by setting a cookie), the action can respond with data that will be available through the `form` property on the corresponding page and through `page.form` app-wide until the next update. ```js /// file: src/routes/login/+page.server.js @@ -140,11 +141,8 @@ export const actions = { ```svelte {#if form?.success} @@ -154,9 +152,19 @@ export const actions = { {/if} ``` +> [!LEGACY] +> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` and `form` properties individually: +> ```js +> /// file: +page.svelte +> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */ +> let { data, form } = $props(); +> ``` +> +> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties. + ### Validation errors -If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`: +If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `page.status` and the data through `form`: ```js /// file: src/routes/login/+page.server.js @@ -195,7 +203,7 @@ export const actions = { }; ``` -> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password. +> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password. ```svelte /// file: src/routes/login/+page.svelte @@ -339,20 +347,20 @@ The easiest way to progressively enhance a form is to add the `use:enhance` acti ``` @@ -487,7 +493,7 @@ Form actions are the preferred way to send data to the server, since they can be } - + ``` ```js diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md index 030ccc5934..080dd074c2 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md @@ -1,12 +1,13 @@ --- +NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: Page options --- -By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [**hydration**](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [**router**](routing) that takes over subsequent navigations. +By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [_hydration_](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [_router_](routing) that takes over subsequent navigations. You can control each of these on a page-by-page basis by exporting options from [`+page.js`](routing#page-page.js) or [`+page.server.js`](routing#page-page.server.js), or for groups of pages using a shared [`+layout.js`](routing#layout-layout.js) or [`+layout.server.js`](routing#layout-layout.server.js). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered. -You can mix and match these options in different areas of your app. For example you could prerender your marketing page for maximum speed, server-render your dynamic pages for SEO and accessibility and turn your admin section into an SPA by rendering it on the client only. This makes SvelteKit very versatile. +You can mix and match these options in different areas of your app. For example, you could prerender your marketing page for maximum speed, server-render your dynamic pages for SEO and accessibility and turn your admin section into an SPA by rendering it on the client only. This makes SvelteKit very versatile. ## prerender @@ -31,7 +32,7 @@ Routes with `prerender = true` will be excluded from manifests used for dynamic export const prerender = 'auto'; ``` -> [!NOTE] If your entire app is suitable for prerendering, you can use [`adapter-static`](https://github.com/sveltejs/kit/tree/main/packages/adapter-static), which will output files suitable for use with any static webserver. +> [!NOTE] If your entire app is suitable for prerendering, you can use [`adapter-static`](adapter-static), which will output files suitable for use with any static webserver. The prerenderer will start at the root of your app and generate files for any prerenderable pages or `+server.js` routes it finds. Each page is scanned for `` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an [`entries`](#entries) function from your dynamic route. @@ -127,6 +128,8 @@ export const ssr = false; If you add `export const ssr = false` to your root `+layout.js`, your entire app will only be rendered on the client — which essentially means you turn your app into an SPA. +> [!NOTE] If all your page options are boolean or string literal values, SvelteKit will evaluate them statically. If not, it will import your `+page.js` or `+layout.js` file on the server (both at build time, and at runtime if your app isn't fully static) so it can evaluate the options. In the second case, browser-only code must not run when the module is loaded. In practice, this means you should import browser-only code in your `+page.svelte` or `+layout.svelte` file instead. + ## csr Ordinarily, SvelteKit [hydrates](glossary#Hydration) your server-rendered HTML into an interactive client-side-rendered (CSR) page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can disable CSR: diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md index f993f59ca6..ff49f1d6ff 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md @@ -1,4 +1,5 @@ --- +NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: State management --- @@ -40,7 +41,7 @@ Instead, you should _authenticate_ the user using [`cookies`](load#Cookies) and ## No side-effects in load -For the same reason, your `load` functions should be _pure_ — no side-effects (except maybe the occasional `console.log(...)`). For example, you might be tempted to write to a store inside a `load` function so that you can use the store value in your components: +For the same reason, your `load` functions should be _pure_ — no side-effects (except maybe the occasional `console.log(...)`). For example, you might be tempted to write to a store or global state inside a `load` function so that you can use the value in your components: ```js /// file: +page.js @@ -76,29 +77,25 @@ export async function load({ fetch }) { } ``` -...and pass it around to the components that need it, or use [`$page.data`](load#$page.data). +...and pass it around to the components that need it, or use [`page.data`](load#page.data). If you're not using SSR, then there's no risk of accidentally exposing one user's data to another. But you should still avoid side-effects in your `load` functions — your application will be much easier to reason about without them. -## Using stores with context +## Using state and stores with context -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: +You might wonder how we're able to use `page.data` and other [app state]($app-state) (or [app stores]($app-stores)) if we can't use global state. The answer is that app state and app stores on the server use Svelte's [context API](/tutorial/svelte/context-api) — the state (or 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 state: ```svelte ``` @@ -111,10 +108,15 @@ You might wonder how we're able to use `$page.data` and other [app stores]($app- const user = getContext('user'); -Welcome {$user.name}
+Welcome {user().name}
``` -Updating the value of a context-based store in deeper-level pages or components while the page is being rendered via SSR will not affect the value in the parent component because it has already been rendered by the time the store value is updated. In contrast, on the client (when CSR is enabled, which is the default) the value will be propagated and components, pages, and layouts higher in the hierarchy will react to the new value. Therefore, to avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up. +> [!NOTE] We're passing a function into `setContext` to keep reactivity across boundaries. Read more about it [here](/docs/svelte/$state#Passing-state-into-functions) + +> [!LEGACY] +> You also use stores from `svelte/store` for this, but when using Svelte 5 it is recommended to make use of universal reactivity instead. + +Updating the value of context-based state in deeper-level pages or components while the page is being rendered via SSR will not affect the value in the parent component because it has already been rendered by the time the state value is updated. In contrast, on the client (when CSR is enabled, which is the default) the value will be propagated and components, pages, and layouts higher in the hierarchy will react to the new value. Therefore, to avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up. If you're not using SSR (and can guarantee that you won't need to use SSR in future) then you can safely keep state in a shared module, without using the context API. @@ -125,8 +127,8 @@ When you navigate around your application, SvelteKit reuses existing layout and ```svelte ``` @@ -161,14 +163,18 @@ Instead, we need to make the value [_reactive_](/tutorial/svelte/state): Reusing components like this means that things like sidebar scroll state are preserved, and you can easily animate between changing values. In the case that you do need to completely destroy and remount a component on navigation, you can use this pattern: ```svelte -{#key $page.url.pathname} + + +{#key page.url.pathname}