New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@atlassian/clientside-extensions-docs

Package Overview
Dependencies
Maintainers
26
Versions
167
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlassian/clientside-extensions-docs - npm Package Compare versions

Comparing version 0.4.0-0 to 0.4.0-1

18

content/server/framework/clientside-extensions/guides/introduction/discovering-extension-points.md

@@ -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",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc