The First Extension

In Molecule, all custom functions are done using Extension. Next, let us quickly learn how to write an extended application based on the molecule-demo project.

tip

All the codes are based on the molecule-demo project in Quick Start.

A simple scene

As shown in the figure, we display series of code files in the FolderTree of Explorer. When the file is clicked by the mouse, it will be opened in the Editor on the right.

Molecule has some UI modules such as Explorer，FolderTree，Editor built in by default. To achieve the functions in the above figure, these requirements can be quickly achieved through the API provided by it, and developers do not need to care too much about the construction of the UI.

Implementation

First, we create a new extensions folder under src, then create a theFirstExtension directory, and add the default module index.ts, as follows:

src/extensions
├── index.ts
└── theFirstExtension
    ├── folderTreeController.ts // folderTree
    ├── index.ts

Create Extension Object

We create a new class called FirstExtension in index.ts, which implements the class IExtension interface:

src/extensions/theFirstExtension/index.ts

import { IExtension } from '@dtinsight/molecule/esm/model/extension';
import { IExtensionService } from '@dtinsight/molecule/esm/services';
import * as folderTreeController from './folderTreeController';

export class FirstExtension implements IExtension {
    id: string = 'TheFirstExtension';
    name: string = 'The First Extension';

    activate(extensionCtx: IExtensionService): void {
        folderTreeController.initFolderTree();
        folderTreeController.handleSelectFolderTree();
    }

    dispose(extensionCtx: IExtensionService): void {
        throw new Error('Method not implemented.');
    }
}

The code snippet above shows that the class FirstExtension includes a method named activate that will be running when the program is activated. We write the initialization logic of the extension in this method;dispose is normally used to cancel extension programme and do some recycling operations. Importing folderTreeController including methods called initFolderTree and handleSelectFolderTree is used to process the data initialization and event monitoring of FolderTree.

info

For more details about the Extension, please refer to Guides.

Write control logic

Let's have a look at the specific implementation logic of the folderTreeController module:

• initFolderTree： Responsible for obtaining the data of FolderTree, and rendering the data to the FolderTree component after success
• handleSelectFolderTree： Responsible for handling the onSelectFile event of FolderTree, after selecting the file, open it in Editor

/src/extensions/theFirstExtension/folderTreeController.ts

import molecule from '@dtinsight/molecule';
import { IFolderTreeNodeProps } from '@dtinsight/molecule/esm/model';
import { transformToEditorTab } from '../../common';

import { cloneDeep } from 'lodash';
import API from '../../api';

export async function initFolderTree() {
    const res = await API.getFolderTree();
    if (res.message === 'success') {
        const folderTreeData = cloneDeep(res.data);
        molecule.folderTree.add(folderTreeData);
    }
}

export function handleSelectFolderTree() {
    molecule.folderTree.onSelectFile((file: IFolderTreeNodeProps) => {
        molecule.editor.open(transformToEditorTab(file));
    });
}

After fetching the data of FolderTree successfully through API.getFolderTree ,we use the molecule.folderTree.add method to add and display data to the [FolderTree] component; next, monitor the selected file through the molecule.folderTree.onSelectFile method; finally,open the file through the molecule.editor.open method.

caution

Pay more attention: In reality, the data type returned by API.getFolderTree is not IFolderTreeNodeProps type, we often need to go through a conversion method. The mock data of the API.getFolderTree function in the example can be View. The transformToEditorTab in the handleSelectFolderTree method is a transformation method, which mainly converts file to IEditorTab type.

Use extension

After defining class FirstExtension, it is used with MoleculeProvider. Here we export all extension objects that need to be loaded in extensions/index.ts by default:

/src/extensions/index.ts

import { IExtension } from '@dtinsight/molecule/esm/model';
import { FirstExtension } from './theFirstExtension';

const extensions: IExtension[] = [new FirstExtension()];

export default extensions;

Import the FirstExtension object and instantiate it, and finally use extensions to export all extension object instances.

/src/app.tsx

import extensions from './extensions';

<MoleculeProvider extensions={extensions}>
    <Workbench />
</MoleculeProvider>;

Finally, introduce extensions and pass in the extensions property of MoleculeProvider.

info

The above example is just a very simple application scenario. If you want to achieve a richer extension to Workbench, you can refer to Workbench Extension Guide ).

Otherwise,Extension is the quite important concept in Molecule. Through it, we can extend many core modules such as ColorTheme, Workbench, i18n, Settings, Keybinding, QuickAccess

Complete Example

Please view the complete source code of First Extension