Contribute to Explorer by adding a Treeview with a Theia Extension

#1

Hi,
I’m new to Theia but I’m used to write Eclipse plugins.
I understood the differences about Theia Extensions and VS Code Extensions (isolation, API …). Theia plugins will probably be deprecated to focus on VS Code Extensions.
Theia Extensions seems more powerful and I think it’s good to write them in order to build a personalized Theia IDE.
My first goal is to display a Treeview in the Explorer view, mapped to a remote HTTP API.
My Google friend tells me about this doc for VS Code extension-guides/tree-view and it almost works.
I want to do the same with Theia Extensions and I’ve searched one day without finding a start of a solution.
I read and understood Theia code but it doesn’t look use contribution mechanism and I can’t find samples.
Inside navigator-widget-factory.ts I found hard references of default widgets:

const openEditorsWidget = await this.widgetManager.getOrCreateWidget(OpenEditorsWidget.ID);
const navigatorWidget = await this.widgetManager.getOrCreateWidget(FILE_NAVIGATOR_ID);

I’m lost between a clear API that I cannot use in Theia Extensions and the Theia source code as “doc” but not so modular.
I hope I miss something.

1 Like
#2

Hi,

Do you want to replace the content displayed in the Explorer view or just contribute more content to it?

#3

I want to contribute, exactly like the VS Code tutorial.

#4

Ok so if you’re using the Theia extensions API, you can rebind NavigatorWidgetFactory and provide your own implementation that extends it and overrides the createWidget function to add your custom widget.

@injectable()
export class CustomNavigatorWidgetFactory extends NavigatorWidgetFactory {
    override async createWidget(): Promise<ViewContainer> {
        const viewContainer = await super.createWidget();
        const customWidget = await this.widgetManager.getOrCreateWidget(MyCustomWidget.ID);
        customWidget.title.label = "My Custom Widget";
        viewContainer.addWidget(customWidget);
        return viewContainer;
    }
}

Then somewhere in your inversify module:

rebind(NavigatorWidgetFactory).to(CustomNavigatorWidgetFactory).inSingletonScope();

For example I get:

image
image346×801 9.4 KB

1 Like
#5

Thank you for your reply, I’ll play with it right now.

There’s something intermediate between the big picture + the hello-world sample of the Theia website and the source code to understood where to investigate, what is good or wrong and a more technical philosophy about tunning Theia with extensions?

Regards

#6

Not that I know of. I’ve been working on a project heavily customizing Theia for about 3 years (only using extensions) and I mostly read the source code of Theia to figure it out (code base is easy to navigate) and you can almost rebind everything to customize it.