How Theia new a extension package with command? Command "yo theia-extension hello-world-extension" would new a project

[original thread by Guoyuanqiang]

I don’t entirely understand the question. Are you asking about how to create a new Theia extension?

Using the yeoman generator would be one convenient way.

[Guoyuanqiang]

Yes. Just like in theia project, it has many packages in folder packages, how to create it.

Creating an extension is explained here https://www.theia-ide.org/doc/Authoring_Extensions.html

Please have a look if plug-ins would fit your use case as well. https://www.theia-ide.org/doc/Authoring_Plugins.html

[Guoyuanqiang]

Yes. I had read docs before. When I create another package, it waring me rewrite the first package.

[Guoyuanqiang]

I mean that these folders are not what I want.

[Guoyuanqiang]

If you want to write multiple extensions, add them in the workspaces section of the root package.json. The browser-app and the electron-app are there to make it easy for you to run your extensions. If you don’t need them, delete them and remove the entries in workspaces. You may want to learn about yarn workspaces https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/

[Guoyuanqiang]

Thank you!

[Ashraf Cheraa]

what about the backend module? how to use it?

I have a plugin with only the front-end module, and I want to add a backend one, I’ve checked other extensions’ code but I still can’t make mine work, any tips?

Hello @ccheraa,

a backend module location should be declared in an extension’s package.json in the same way as for frontend module. Here’s an example in Tasks extension https://github.com/theia-ide/theia/blob/master/packages/task/package.json#L21

[Ashraf Cheraa]

Thank you @artem-z for your reply, I was doing this, but apparently that was not the problem, what I’m trying to do is to inject a service from the backend in the frontend I have:

node/backend-module.ts

bind(MyServiceNode).toSelf().inSingletonScope();
bind(MyService).toService(MyServiceNode);

common/myservice.ts

export const MyService = Symbol('MyService');
export interface MyService extends Disposable {
  test: () => string;
}

node/myservice.ts

export class MyServiceNode implements PebbleFiles {
  dispose() {}
  test() {
    return 'Test result';
  }
}

and on the frontend:

@inject(MyService) protected readonly myService?: MyService;

and I get this error:

Error: No matching bindings found for serviceIdentifier: Symbol(MyService)

@ccheraa Where is the error from? My guess is from your browser?

If you want to have some frontend/backend communication, you need to setup a JSON-RPC-Handler on the backend, and a JSON-RPC-Proxy in the frontend.

Common part of the protocol FE/BE: https://github.com/theia-ide/theia/blob/master/packages/workspace/src/common/workspace-protocol.ts#L17-L40

Backend Module: https://github.com/theia-ide/theia/blob/master/packages/workspace/src/node/workspace-backend-module.ts#L29-L33

Frontend Module: https://github.com/theia-ide/theia/blob/master/packages/workspace/src/browser/workspace-frontend-module.ts#L51-L54

The frontend and the backend are actually two very different processes/applications, so binding something in one doesn’t transit to the other, you have to use our communication utilities to do RPC.

Also note that every function defined in the common folder must be a promise. Calls will go through the wire, you should expect asynchronicity.

(only for functions part of some interface for FE/BE communication, of course)

[Ashraf Cheraa]

Thank you @paul-marechal

that’s exactly what I was looking for

hi , i have an error Yarn start the theia browser-app broken with node error [ERR_INVALID_SYNC_FORK_INPUT] ,could u spare some time to have a look at it ?