Use Contribution Point

In module development, You may need to deal with contribution points on a regular basis. In OpenSumi we implement a contribution point mechanism for many key logics. For more details, you can see contribution points.

To register our TodoList list on the left Explorer panel, we need to use the MainLayoutContribution to register the panel.

Create a Front View

First, the following code shows a simple front-end presentation component:

import * as React from 'react';
import * as styles from './todo.module.less';

export const Todo = () => {
  return <h1 className={styles.name}>Hello world</h1>;
};

Create a Contribution Point

To create thetodo.contribution.ts file, you can use the onDidRender contribution points to register our Todo panel in the OpenSumi rendering phase, see:

import { Autowired } from '@opensumi/di';
import { Domain, localize } from '@opensumi/ide-core-browser';
import { EXPLORER_CONTAINER_ID } from '@opensumi/ide-explorer/lib/browser/explorer-contribution';
import {
  MainLayoutContribution,
  IMainLayoutService
} from '@opensumi/ide-main-layout';
import { Todo } from './todo.view';

@Domain(MainLayoutContribution)
export class TodoContribution implements MainLayoutContribution {
  @Autowired(IMainLayoutService)
  private mainLayoutService: IMainLayoutService;

  onDidRender() {
    this.mainLayoutService.collectViewComponent(
      {
        component: Todo,
        collapsed: false,
        id: 'todo-view',
        name: 'Todo'
      },
      EXPLORER_CONTAINER_ID
    );
  }
}

The preceding code registers our Todo component in the Explorer panel view during the rendering phase of OpenSumi, when we use the service capability provided by IMainLayoutService .

At the same time, we need to show a declaration of the reference to contribution point file in the module entry file, as follows:

import { Provider, Injectable } from '@opensumi/di';
import { BrowserModule } from '@opensumi/ide-core-browser';
import { TodoContribution } from './todo.contribution';

@Injectable()
export class TodoListModule extends BrowserModule {
  providers: Provider[] = [TodoContribution];
}

Results Preview

Hello World

In the next section, we will learn how to further present our TodoList list information.