Skip to content

Commit 81f4c3d

Browse files
Apply suggestions from code review
Co-authored-by: Richard Jackson <jacksorjacksor@pm.me>
1 parent 2d8f223 commit 81f4c3d

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

16/umbraco-cms/customizing/foundation/context-api/consume-a-context.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ description: >-
66
# Consume a Context
77
There are two ways to consume a context: get a __one-time reference__ to the context, or get a __subscription__ for handling context changes. The Context API is a flexible system where contexts can get disconnected or replaced. A subscription allows for the handling of these changes. However, subscriptions use more resources. They are typically consumed in the constructor, a time when the computer is already processing a lot. Which way to go depends on your use case.
88

9-
A one-time reference is great for fire-and-forget events. The key here is that the context is not needed on initialization, but is only needed when a specific criteria is met. For instance, events that occur after user interaction or when a specific function is called. In that case, you just need to get a context, do something and forget about the context after that.
9+
A one-time reference approach is suitable for fire-and-forget events. The key here is that the context is not needed on initialization, but is only needed when a specific criteria is met. For instance, events that occur after user interaction or when a specific function is called. In that case, you need to get a context, do something and forget about the context after that.
1010

11-
If you need a context during initialization and you hold on to the context by putting it into a variable, you should always use a subscription. Otherwise you risk holding on to a context that could be disconnected or replaced without you knowing.
11+
If you need a context during initialization which is then set as a variable, you should always use a subscription. Otherwise you risk holding on to a context that could be disconnected or replaced without you knowing.
1212

1313
## Consuming contexts in an element
1414
An [Umbraco Element](../umbraco-element/) is **any web component** that extends `UmbLitElement` or uses the `UmbElementMixin` to wrap its base class. Whether you're building with Lit, vanilla JavaScript, or any other web component framework, you can make it an Umbraco Element. This gives it full access to the Context API.
@@ -21,7 +21,7 @@ Umbraco Elements provide two methods for consuming contexts:
2121
Both methods accept a Context Token (or string alias) to identify which context to consume.
2222

2323
### Get as one-time reference
24-
The first example uses Lit and that is the way Umbraco builds their elements. If you don't want to use Lit, there is also an example using vanilla Javascript. Both examples don't have any TypeScript specific code. You can use them in either a JavaScript or TypeScript file.
24+
The first example uses Lit and that is the way Umbraco builds their elements. If you don't want to use Lit, there is also an example using vanilla JavaScript. Both examples don't have any TypeScript specific code. You can use them in either a JavaScript or TypeScript file.
2525

2626
{% tabs %}
2727
{% tab title="Lit element" %}
@@ -128,9 +128,9 @@ customElements.define('example-element', ExampleElement);
128128
When you're dealing with a subscription, it's good practice to consume the context in the constructor for the following reasons:
129129
130130
* The constructor runs once when the element is created. This ensures your context subscription is set up before the element connects to the DOM. This guarantees you won't miss any context updates that occur during the element's initialization.
131-
* Context consumers created in the constructor are automatically connected when the element enters the DOM (`connectedCallback`). They are disconnected when it's removed (`disconnectedCallback`). You don't need to manually manage this lifecycleUmbraco's controller system handles it for you.
131+
* Context consumers created in the constructor are automatically connected when the element enters the DOM (`connectedCallback`). They are disconnected when it's removed (`disconnectedCallback`). You don't need to manually manage this lifecycle as Umbraco's controller system handles it for you.
132132
* By establishing context subscriptions in the constructor, your element's state is consistent from the moment it's created. This prevents race conditions where the element might render or perform actions before its required contexts are available.
133-
* Creating context consumers in the constructor is more efficient. This is more efficient than creating them in lifecycle methods that can be called multiple times. For example, `connectedCallback` fires every time the element is added to the DOM.
133+
* Creating context consumers in the constructor is more efficient than creating them in lifecycle methods that are called multiple times. For example, `connectedCallback` fires every time the element is added to the DOM.
134134
135135
The first example uses Lit and that is the way Umbraco builds their elements. If you don't want to use Lit, there is also an HTML element example. Both examples don't have any TypeScript specific code. You can use them in either a JavaScript or TypeScript file.
136136
@@ -140,8 +140,8 @@ The first example uses Lit and that is the way Umbraco builds their elements. If
140140
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
141141
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
142142

143-
//The example element extends the UmbLitElement (which is the same as UmbElementMixin(LitElement))
144-
//This gives us all the helpers we need to get or consume contexts
143+
// The example element extends the UmbLitElement (which is the same as UmbElementMixin(LitElement))
144+
// This gives us all the helpers we need to get or consume contexts
145145
export default class ExampleElement extends UmbLitElement {
146146
#workspaceContext;
147147

@@ -220,7 +220,7 @@ import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
220220
export default class ExampleService extends UmbControllerBase {
221221
async showNotification(notificationText) {
222222

223-
//We try to get an instance of the context
223+
// We try to get an instance of the context
224224
const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
225225
if (!notificationContext) {
226226
throw new Error('Notification context not found!');
@@ -233,7 +233,7 @@ export default class ExampleService extends UmbControllerBase {
233233
}
234234
});
235235

236-
//The notification is sent, now forget the context
236+
// The notification is sent, now forget the context
237237
}
238238
}
239239
```

0 commit comments

Comments
 (0)