From ec99d7bc4c57e130183f48e10e5b2f37fb173c97 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 14 Oct 2025 19:02:16 -0400 Subject: [PATCH 1/2] fix docs (#16953) --- documentation/docs/02-runes/03-$derived.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md index 308693d19c..d3e46eb22d 100644 --- a/documentation/docs/02-runes/03-$derived.md +++ b/documentation/docs/02-runes/03-$derived.md @@ -86,7 +86,8 @@ Derived expressions are recalculated when their dependencies change, but you can Unlike `$state`, which converts objects and arrays to [deeply reactive proxies]($state#Deep-state), `$derived` values are left as-is. For example, [in a case like this](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)... ```js -let items = $state([...]); +// @errors: 7005 +let items = $state([ /*...*/ ]); let index = $state(0); let selected = $derived(items[index]); From d6d13ced086f5ddb617db2bcd524b2417dd5eb14 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 14 Oct 2025 20:45:29 -0400 Subject: [PATCH 2/2] docs: improve createContext documentation (#16952) * docs: improve createContext documentation * update context page * bump --- documentation/docs/06-runtime/02-context.md | 21 ++++++------------- .../svelte/src/internal/client/context.js | 8 +++++++ .../svelte/src/internal/server/context.js | 1 + packages/svelte/types/index.d.ts | 10 ++++++++- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md index f395de421c..0dfb996164 100644 --- a/documentation/docs/06-runtime/02-context.md +++ b/documentation/docs/06-runtime/02-context.md @@ -83,27 +83,18 @@ Svelte will warn you if you get it wrong. ## Type-safe context -A useful pattern is to wrap the calls to `setContext` and `getContext` inside helper functions that let you preserve type safety: +As an alternative to using `setContext` and `getContext` directly, you can use them via `createContext`. This gives you type safety and makes it unnecessary to use a key: -```js -/// file: context.js +```ts +/// file: context.ts // @filename: ambient.d.ts interface User {} -// @filename: index.js +// @filename: index.ts // ---cut--- -import { getContext, setContext } from 'svelte'; - -const key = {}; - -/** @param {User} user */ -export function setUserContext(user) { - setContext(key, user); -} +import { createContext } from 'svelte'; -export function getUserContext() { - return /** @type {User} */ (getContext(key)); -} +export const [getUserContext, setUserContext] = createContext(); ``` ## Replacing global state diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js index ea63072a37..751a35321a 100644 --- a/packages/svelte/src/internal/client/context.js +++ b/packages/svelte/src/internal/client/context.js @@ -71,8 +71,12 @@ export function set_dev_current_component_function(fn) { /** * Returns a `[get, set]` pair of functions for working with context in a type-safe way. + * + * `get` will throw an error if no parent component called `set`. + * * @template T * @returns {[() => T, (context: T) => T]} + * @since 5.40.0 */ export function createContext() { const key = {}; @@ -93,6 +97,8 @@ export function createContext() { * Retrieves the context that belongs to the closest parent component with the specified `key`. * Must be called during component initialisation. * + * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative. + * * @template T * @param {any} key * @returns {T} @@ -110,6 +116,8 @@ export function getContext(key) { * * Like lifecycle functions, this must be called during component initialisation. * + * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative. + * * @template T * @param {any} key * @param {T} context diff --git a/packages/svelte/src/internal/server/context.js b/packages/svelte/src/internal/server/context.js index 1813bfbf78..7779da4c1d 100644 --- a/packages/svelte/src/internal/server/context.js +++ b/packages/svelte/src/internal/server/context.js @@ -13,6 +13,7 @@ export function set_ssr_context(v) { /** * @template T * @returns {[() => T, (context: T) => T]} + * @since 5.40.0 */ export function createContext() { const key = {}; diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 58e3285e4a..a9938fe924 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -450,12 +450,18 @@ declare module 'svelte' { type NotFunction = T extends Function ? never : T; /** * Returns a `[get, set]` pair of functions for working with context in a type-safe way. - * */ + * + * `get` will throw an error if no parent component called `set`. + * + * @since 5.40.0 + */ export function createContext(): [() => T, (context: T) => T]; /** * Retrieves the context that belongs to the closest parent component with the specified `key`. * Must be called during component initialisation. * + * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative. + * * */ export function getContext(key: any): T; /** @@ -465,6 +471,8 @@ declare module 'svelte' { * * Like lifecycle functions, this must be called during component initialisation. * + * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative. + * * */ export function setContext(key: any, context: T): T; /**