API to render and manipulate extensions of type AsyncPanel. This API works similar to the Panel API. The only difference is the behavior of onAction attribute function.

You should use dynamic imports syntax inside the onAction function to defer loading the panel module. The onAction function must return a Promise instance.

The AsyncPanel extension can be used to defer loading of the panel JavaScript module until the extension is initialized by the product runtime.

Signature

1
2
type LifecycleCallback = (container: HTMLElement) => void;

interface AsyncPanelApi {
    onMount: (callback: LifecycleCallback) => AsyncPanelApi;

    onUnmount: (callback: LifecycleCallback) => AsyncPanelApi;
}

onMount()

Provides a container to render custom content in it.

Callback Parameters

Name	Type	Description
container	`HTMLElement`	HTML element to be used as a container to render custom content.

onUnmount()

Allows to set a cleanup callback to be called when the provided container is about to be deleted.

Callback Parameters

Name	Type	Description
container	`HTMLElement`	HTML element that was provided to render custom content in it. It's important to unmount any React component you've mounted in there to avoid keeping the component alive when the container is destroyed.

Usage example

`my-extension.ts`

1
2
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';
import { ExampleContext } from './types';

// Dynamic module loader
const panelModuleLoader = () => {
    return import('./panel-module.ts');
};

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default AsyncPanelExtension.factory<ExampleContext>((pluginAPI, context) => {
    return {
        onAction: panelModuleLoader,
    };
});

`panel-module.ts`

1
2
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';
import { ExampleContext } from './types';

function getPanelContent() {
    return `
        <h4>Cool panel</h4>
        <p>This is some cool content generated with JS</p>
    `;
}

export default function initAsyncPanel(
  panelApi: AsyncPanelExtension.Api,
  context: ExampleContext
) {
    panelApi.onMount(container => {
        container.innerHTML = getPanelContent();
    });
}

`types.ts`

1
2
export interface ExampleContext {
    label: string;
}