Use Theia-- create an extended package

Previous: Use Theia-- build your own IDE

Creating Theia Expansion Pack

　　In this example, we will add a menu item "Say hello" to display a notice "Hello world!". This article will guide you through all the necessary steps.

Theia architecture

　　Theia application of so-called extended package ( Extensions configuration). An extension package provides a set of specific functions of widgets, and the command processing program. Theia packet itself provides some extensions, such as editors, terminal, like the project view. Each expansion of their respective packages npm package.

　　Theia contribution defines a number of interfaces that allow expansion pack to add functionality to the various parts of the application. Simply search by name * Contribution can find these interfaces. Expansion pack to achieve the specific functions of these interfaces contribution. In this example, we will achieve CommandContribution and menuContribution . It may also be extended by a variety of packages and Theia between application services and managers to interact.

　　In Theia, all things are by dependency injection ( the Dependency Injection connecting) manner. An extended package defines one or more modules dependency injection. The binding and dependency injection modules that implement the interface contribution place, they are listed in the extension package package.json file. Distal extension can be used, for example, a UI extended, the rear end may be, for example, to provide language services. When the application starts, all of these modules are combined together to configure the respective front and rear ends of a global dependency injection containers. Then multiple implants way of these particular types of contributions collected at runtime.

Requirements

　　You need to install the node 10 version (Translator: in fact the latest stable version of the node can):

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
nvm install 10

　　And yarn:

npm install -g yarn

　　Also you need to make sure python 2.x has been installed by python --version to check.

Project structure

　　We will create a file called theia-hello-world-extension of monorepo (a warehouse containing more npm package), which includes three packages: the Hello-world-Extension , Browser-App and Electron-App . That is our first expansion pack, the latter two are running our expansion pack Theia application in the browser and electron mode. Here we use yarn instead of npm install, because it can be constructed structure monorepo warehouse in the workspace. In our example, each workspace contains their own npm package. Common dependencies of the packets through the yarn is "hoisted" to their common root directory. In addition, we will also use lerna across the workspace to run the script.

　　In order to simplify the settings on each warehouse, we have created a code generator to help us to quickly generate scaffold project. It also generates a hello-world example, run the following command:

npm install -g yo generator-theia-extension
mkdir theia-hello-world-extension
cd theia-hello-world-extension
yo theia-extension hello-world-extension

　　We look at the generated code. Root directory package.json file defines the workspaces, dependencies lerna and some scripts to the browser or local electron component package.

{
  "private": true,
  "scripts": {
    "prepare": "lerna run prepare",
    "rebuild:browser": "theia rebuild:browser",
    "rebuild:electron": "theia rebuild:electron"
  },
  "devDependencies": {
    "lerna": "2.4.0"
  },
  "workspaces": [
    "hello-world-extension", "browser-app", "electron-app"
  ]
}

　　Also generated lerna.json file used to configure Lerna :

{
  "lerna": "2.4.0",
  "version": "0.1.0",
  "useWorkspaces": true,
  "npmClient": "yarn",
  "command": {
    "run": {
      "stream": true
    }
  }
}

Achieve expansion pack

　　Then look hello-world-extension directory in our expansion pack generated code. We from package.json beginning of the file, which defines the metadata packet of (new) dependencies Theia core packages, scripts and the development of dependency, as well as theia-extensions.

　　The keywords theia-extension is important: it allows the applications to recognize and Theia from npm install Theia extension package.

{
  "name": "hello-world-extension",
  "keywords": [
    "theia-extension"
  ],
  "version": "0.1.0",
  "files": [
    "lib",
    "src"
  ],
  "dependencies": {
    "@theia/core": "latest"
  },
  "devDependencies": {
    "rimraf": "latest",
    "typescript": "latest"
  },
  "scripts": {
    "prepare": "yarn run clean && yarn run build",
    "clean": "rimraf lib",
    "build": "tsc",
    "watch": "tsc -w"
  },
  "theiaExtensions": [
    {
      "frontend": "lib/browser/hello-world-frontend-module"
    }
  ]
}

　　The last property theiaExtensions , which lists some JavaScript modules, the contribution derived DI extended package defined in the module. In this example, we only provide a front-end functions (a command line and a menu item). Similarly, you can also define the contribution of the back-end, such as the definition of a language service of language contribution.

　　In the front-end module, we derive a default object, InversifyJS of ContainerModule , which bind a command contribution and a menu contribution.

export default new ContainerModule(bind => {
    // add your contribution bindings here
    bind(CommandContribution).to(HelloWorldCommandContribution);
    bind(MenuContribution).to(HelloWorldMenuContribution);
});

　　Command is defined as a simple data structure, which contains the id and label. id included in the command handlers registered contribution that implement the function command. Code generator has added a command and a processing program for displaying a "Hello World!" Message.

export const HelloWorldCommand = {
    id: 'HelloWorld.command',
    label: "Shows a message"
};

@injectable()
export class HelloWorldCommandContribution implements CommandContribution {

    constructor(
        @inject(MessageService) private readonly messageService: MessageService,
    ) { }

    registerCommands(registry: CommandRegistry): void {
        registry.registerCommand(HelloWorldCommand, {
            execute: () => this.messageService.info('Hello World!')
        });
    }
}
...

　　Notice how we use the constructor @inject to get MessageService and how to use it later in the handler. That's dependency injection elegant place: the client, we do not care about these dependencies from where, and does not care about their life cycle.

　　To be able to access the UI layer, we need to implement menuContribution , add a Search edit menu in the menu bar / Replace section.

...
@injectable()
export class HelloWorldMenuContribution implements MenuContribution {

    registerMenus(menus: MenuModelRegistry): void {
        menus.registerMenuAction(CommonMenus.EDIT_FIND, {
                commandId: HelloWorldCommand.id,
                label: 'Say Hello'
            });
    }
}

In the browser run Expansion Pack

　　Now take a look at how our expansion pack works. To this end, the generator in the browser-app create a directory in a package.json file, which defines Theia browser application that contains several expansion pack, which contains our the Hello-world-Extension . Other files in the directory are the remaining yarn by the build process theia-cli tool automatically generates, as defined in section scripts.

{
  "name": "browser-app",
  "version": "0.1.0",
  "dependencies": {
    "@theia/core": "latest",
    "@theia/filesystem": "latest",
    "@theia/workspace": "latest",
    "@theia/preferences": "latest",
    "@theia/navigator": "latest",
    "@theia/process": "latest",
    "@theia/terminal": "latest",
    "@theia/editor": "latest",
    "@theia/languages": "latest",
    "@theia/markers": "latest",
    "@theia/monaco": "latest",
    "@theia/typescript": "latest",
    "@theia/messages": "latest",
    "hello-world-extension": "0.1.0"
  },
  "devDependencies": {
    "@theia/cli": "latest"
  },
  "scripts": {
    "prepare": "theia build",
    "start": "theia start",
    "watch": "theia build --watch"
  },
  "theia": {
    "target": "browser"
  }
}

　　Now part of the need to build and run all the applications are ready to run it, enter the following command:

cd browser-app
yarn start <path to workspace>

　　Then enter in the browser HTTP: // localhost: 3000 , choose Edit> Say Hello in your application that opens, you will see "Hello World!" Message pops up.

In Electron run Expansion Pack

　　Electron application package.json browser application is similar, in addition to name and target different attributes.

{
  "name": "electron-app",
  ...
  "theia": {
    "target": "electron"
  }
}

　　Before you run electron application, you need to rebuild some of the local modules:

yarn rebuild:electron
cd electron-app
yarn start <path to workspace>

Deployment Expansion Pack

　　If you want to open your expansion pack, we recommend that you publish it to npm. You can call the directory extension package in the yarn publish to complete, of course, the premise is that you need a valid account.

 

Original Address: https://theia-ide.org/docs/authoring_extensions