Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/short-feet-admire.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': minor
---

feat: add has function to createContext
3 changes: 2 additions & 1 deletion documentation/docs/06-runtime/02-context.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Context

Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling').

By creating a `[get, set]` pair of functions with `createContext`, you can set the context in a parent component and get it in a child component:
By creating a `[get, set, has]` triplet of functions with `createContext`, you can set the context in a parent component and get it in a child component:

<!-- codeblock:start {"title":"Context","selected":"context.ts"} -->
```svelte
Expand Down Expand Up @@ -51,6 +51,7 @@ interface User {
name: string;
}

// hasUserContext isn't needed here so it's not defined
export const [getUserContext, setUserContext] = createContext<User>();
```
<!-- codeblock:end -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ Certain lifecycle methods can only be used during component initialisation. To f
Context was not set in a parent component
```

The [`createContext()`](svelte#createContext) utility returns a `[get, set]` pair of functions. `get` will throw an error if `set` was not used to set the context in a parent component.
The [`createContext()`](svelte#createContext) utility returns a `[get, set, has]` triplet of functions. `get` will throw an error if `set` was not used to set the context in a parent component.

### snippet_without_render_tag

Expand Down
2 changes: 1 addition & 1 deletion packages/svelte/messages/shared-errors/errors.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ Certain lifecycle methods can only be used during component initialisation. To f

> Context was not set in a parent component

The [`createContext()`](svelte#createContext) utility returns a `[get, set]` pair of functions. `get` will throw an error if `set` was not used to set the context in a parent component.
The [`createContext()`](svelte#createContext) utility returns a `[get, set, has]` triplet of functions. `get` will throw an error if `set` was not used to set the context in a parent component.

## snippet_without_render_tag

Expand Down
7 changes: 4 additions & 3 deletions packages/svelte/src/internal/client/context.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,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.
* Returns a `[get, set, has]` triplet 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]}
* @returns {[() => T, (context: T) => T, () => boolean]}
* @since 5.40.0
*/
export function createContext() {
Expand All @@ -89,7 +89,8 @@ export function createContext() {

return getContext(key);
},
(context) => setContext(key, context)
(context) => setContext(key, context),
() => hasContext(key)
];
}

Expand Down
5 changes: 3 additions & 2 deletions packages/svelte/src/internal/server/context.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function set_ssr_context(v) {

/**
* @template T
* @returns {[() => T, (context: T) => T]}
* @returns {[() => T, (context: T) => T, () => boolean]}
* @since 5.40.0
*/
export function createContext() {
Expand All @@ -26,7 +26,8 @@ export function createContext() {

return getContext(key);
},
(context) => setContext(key, context)
(context) => setContext(key, context),
() => hasContext(key)
];
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script>
import { get } from './main.svelte';
import { get, has } from './main.svelte';

const message = get();
</script>

<h1>{message}</h1>
{#if has()}
<h2>it's me</h2>
{/if}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { test } from '../../test';

export default test({
ssrHtml: `<div></div>`,
html: `<div><h1>hello</h1></div>`,
html: `<div><h1>hello</h1><h2>it's me</h2></div>`,

test() {}
});
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
import Child from './Child.svelte';

/** @type {ReturnType<typeof createContext<string>>} */
const [get, set] = createContext();
const [get, set, has] = createContext();

export { get };
export { get, has };

function Wrapper(Component) {
return (...args) => {
Expand All @@ -15,6 +15,8 @@
}
</script>

<div {@attach (target) => {
mount(Wrapper(Child), { target });
}}></div>
<div
{@attach (target) => {
mount(Wrapper(Child), { target });
}}
></div>
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script>
import { get } from './main.svelte';
import { get, has } from './main.svelte';

const message = get();
</script>

<h1>{message}</h1>
{#if has()}
<h2>it's me</h2>
{/if}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { test } from '../../test';

export default test({
html: `<h1>hello</h1>`
html: `<h1>hello</h1><h2>it's me</h2>`
});
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
import { createContext } from 'svelte';

/** @type {ReturnType<typeof createContext<string>>} */
const [get, set] = createContext();
const [get, set, has] = createContext();

export { get };
export { get, has };
</script>

<script>
Expand Down
4 changes: 2 additions & 2 deletions packages/svelte/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -492,13 +492,13 @@ declare module 'svelte' {
*/
export function fork(fn: () => void): Fork;
/**
* Returns a `[get, set]` pair of functions for working with context in a type-safe way.
* Returns a `[get, set, has]` triplet 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>(): [() => T, (context: T) => T];
export function createContext<T>(): [() => T, (context: T) => T, () => boolean];
/**
* Retrieves the context that belongs to the closest parent component with the specified `key`.
* Must be called during component initialisation.
Expand Down