@atlassian/clientside-extensions-docs
Advanced tools
Comparing version 0.4.0-0 to 0.4.0-1
@@ -20,14 +20,14 @@ --- | ||
- Discover all the possible types of extensions you can render in an extension point. | ||
- Check all the attributes and values you can use to influence how the product render your extensions. | ||
- Check all the attributes and values you can use to influence how the product renders your extensions. | ||
## Revealing extension points in the page | ||
Client-side Extensions (CSE) comes with some developer tools baked in to help you reveal all extensions points in the page called. | ||
Client-side Extensions (CSE) comes with some developer tools baked in to help you reveal all extensions points in the page. | ||
To activate it, you need to go to a page that you know is using CSE and set a query parameters in the URL called `?clientside-extensions`: | ||
To activate it, you need to go to a page that you know is using CSE and set the query parameter `?clientside-extensions` in the URL. | ||
1. Navigate to the PR you created for testing CSE (e.g: http://localhost:7990/bitbucket/projects/PROJECT_1/repos/rep_1/pull-requests/1/) | ||
2. In the URL bar, add the query parameters `?clientside-extensions`. | ||
2. Add this query parameter to the URL: `?clientside-extensions`. | ||
You should see a glowing blue dot in the places where extension points are available. | ||
You should see a glowing blue circle icon in the places where extension points are available. | ||
@@ -43,3 +43,3 @@ ![Pull Request screenshot with discovery extension points revealed](/server/framework/clientside-extensions/images/revealing-extension-points.png) | ||
You now can see: | ||
You should be able to see: | ||
@@ -49,3 +49,3 @@ - The name of the extension point. | ||
- The attributes that are supported, and how they affect the way the product will render your extension. | ||
- The shape of the context object your extensions will receive from the product. | ||
- The shape of the context object your extension will receive from the product. | ||
@@ -63,4 +63,4 @@ {{% note %}} | ||
- How to reveal extension points in a page. | ||
- How to discover all the extension types, attributes supported and context provided in an extension point. | ||
- How to discover all extension types, supported attributes, and context provided for your extension point. | ||
Next, you're going to learn how you can interact with products [using the extensions API](/server/framework/clientside-extensions/guides/introduction/using-extension-api) | ||
Next, you’re going to lear how to interact with products [using the extensions API](/server/framework/clientside-extensions/guides/introduction/using-extension-api) |
--- | ||
title: Using Extension API - Client-side Extensions | ||
title: Using the Extensions API - Client-side Extensions | ||
platform: server | ||
@@ -10,3 +10,3 @@ product: clientside-extensions | ||
# Using Extensions API | ||
# Using the Extensions API | ||
@@ -19,4 +19,4 @@ {{% note %}} | ||
- Request Client-side Extension runtime to update your extension attributes. | ||
- Execute your clean-up code when your extensions removed from the page. | ||
- Request the Client-side Extensions runtime to update your extension attributes. | ||
- Execute the cleanup code when your extension is removed from the page. | ||
- Use the context provided by products. | ||
@@ -26,9 +26,10 @@ | ||
Client-side Extensions (CSE) runtime provides an API to interact with products. Your extensions will receive it as the | ||
The Client-side Extensions (CSE) runtime provides an API to interact with products. Your extensions will receive it as the | ||
first parameter of your extension factory. For more info, see [Extensions API](/server/framework/clientside-extensions/reference/api/extension-api/). | ||
In the `/src/my-app/extensions/first-extension.js` file: | ||
To use the Extensions API: | ||
1. Declare that your extension factory will receive an `extensionAPI` object as the first parameter. | ||
2. Use `console.log(extensionAPI)` to explore the methods you have available. | ||
1. Edit the `/src/my-app/extensions/first-extension.js` file. | ||
2. Declare that your extension factory will receive an `extensionAPI` object as the first parameter. | ||
3. Use `console.log(extensionAPI)` to explore the methods you have available. | ||
@@ -58,12 +59,10 @@ ```js | ||
In the majority of cases, you’d like to create extensions that do more than just alert messages. For example, you might want | ||
In the majority of cases, you'd like to create extensions that do more than just alert messages. For example, you might want | ||
to create an extension that tracks how many times someone clicked it and updates its label after every click. | ||
To do so, you can use ‘updateAttributes’ to choose a set of attributes to update. The CSE runtime will notify the product about | ||
To do so, you can use `updateAttributes` to choose a set of attributes to update. The CSE runtime will notify the product about | ||
your changes and schedule a re-render of your extension with the new information. | ||
{{% note %}} | ||
It’s important to understand that ‘updateAttributes’ is **scheduling** a re-render instead of rendering your extension right away. | ||
This is to avoid performance issues with multiple extensions rendering at the same time. | ||
It's important to understand that `updateAttributes` is **scheduling** a re-render instead of rendering your extension right away. This is to avoid performance issues with multiple extensions rendering at the same time. | ||
{{% /note %}} | ||
@@ -73,3 +72,3 @@ | ||
Change the logic of your Button extension to keep track of the number of times clicked, and show it to the user. | ||
Now, change the logic of your Button extension to keep track of the number of times clicked and show it to the user. | ||
@@ -110,16 +109,14 @@ In the `/src/my-app/extensions/first-extension.js` file: | ||
{{% tip %}} | ||
You don’t need to set all attributes again, just the ones you want to update. | ||
You don't need to set all attributes again, just the ones you want to update. | ||
{{% /tip %}} | ||
## Avoiding memory leaks with ‘onCleanup’ | ||
## onCleanup | ||
There might be cases where your extension needs to listen to an event, or subscribe to a stream of information. In those cases, | ||
it's a good practice to detach from events or unsubscribe when the extension is removed from the page in order to avoid memory leaks. | ||
If your extension needs to listen to an event or subscribe to a stream of information, it’s a good practice to clear these connections once the extension is removed from the page. This will help you avoid memory leaks. | ||
To do so, CSE provides an API called `onCleanup`, that you can use to specify the clean up logic to be executed for your extensions. | ||
You can do it by using `onCleanup` - an API that lets you specify the cleanup logic to be executed for your extension. | ||
### Update the label of your extension every 3 seconds | ||
### Update the label of your extension | ||
Let's take for example that you want to update your label every 3 seconds. You implement a timer that changes the label, and | ||
then clear this timer when your extension is destroyed. | ||
Now, make the label update very 3 seconds. You will implement a timer that updates the label, and then clear the time when your extension is removed. | ||
@@ -129,4 +126,4 @@ In the `/src/my-app/extensions/first-extension.js` file: | ||
1. Create a timer that updates the label of your extension every 3 seconds. | ||
2. Declare the clean-up logic to clear the timer when the extension is deleted from the page. | ||
3. Add some `console.log` statements for debugging the update of attributes and the clean-up logic. | ||
2. Declare the cleanup logic to clear the timer when the extension is deleted from the page. | ||
3. Add some `console.log` statements for debugging the update of attributes and the cleanup logic. | ||
@@ -174,9 +171,6 @@ ```js | ||
Refresh your pull request and you should see the label of your extension changing every 3 seconds. To tests that the timer is being cleared, | ||
navigate to the diff tab of the pull request, and you should notice that the timer stopped logging `interval executed...`. | ||
After refreshing your pull request, the extension’s label should be changing every 3 seconds. To check if the timer is being cleared, open the `diff` tab. The timer should stop logging `interval executed…`. | ||
{{% tip %}} | ||
If you want to test what happens if you don't have your clean-up logic, delete the `onCleanup` execution and repeat the test. | ||
You should see that, even if you navigate to another page and your extension is not visible, the interval is still running. | ||
To see what happens if you don’t have the cleanup logic, delete the `onCleanup` execution, and repeat the test. Now, even if you navigate to another page and your extension isn’t visible, the interval should still be running. | ||
{{% /tip %}} | ||
@@ -186,11 +180,8 @@ | ||
So far, you've been using your own local state for your extension. CSE also let products share part of their state with extensions. | ||
This state is called **Context**. | ||
So far, you've been using your local state for the extension, but CSE also lets products share part of their state with extensions. This state is called `context`, and it needs to be provided as the second argument in your extension factory. | ||
This context is provided as second argument to your extension factory, and you can consume it as follow: | ||
In the `/src/my-app/extensions/first-extension.js` file: | ||
1. Declare a second parameter for your extension factory called `context`. | ||
2. Use `console.log` to preview what context is BBS extension point sharing with your extension. | ||
1. Declare the second parameter for your extension factory called `context`. | ||
2. Use `console.log` to preview what context is shared with your extension by the Bitbucket extension point. | ||
@@ -218,6 +209,5 @@ ```js | ||
Refresh your pull request, and you should see an object in the console with all the information that BBS is sharing with | ||
your extension. | ||
After refreshing your pull request, you should see an object in the console that contains all the information being shared with your extension. | ||
The value of context can be different depending on the page and extension point you are creating your extension for. | ||
The value of `context` can be different depending on the page and the extension point you're creating your extension for. | ||
@@ -234,5 +224,5 @@ {{% tip %}} | ||
- How to communicate to products when the attributes of your extension changes. | ||
- How to execute clean-up code if needed. | ||
- That products can share information about the location where your extension is rendered in the form of context. | ||
- How to execute the cleanup code if needed. | ||
- How products are using context to share information about the location where your extension is rendered. | ||
Next, you will learn how to create extension with [custom HTML content](/server/framework/clientside-extensions/guides/introduction/custom-HTML-content) | ||
Next, you will learn how to create an extension with [custom HTML content](/server/framework/clientside-extensions/guides/introduction/custom-HTML-content) |
{ | ||
"name": "@atlassian/clientside-extensions-docs", | ||
"version": "0.4.0-0", | ||
"version": "0.4.0-1", | ||
"description": "Holds the official documentation for Altassian Server client-side extensions API.", | ||
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause", |
594146