How to have a running dummy Theia instance without any extensions

[as-shura]

Is it possible to get a blueprint project or any other way to run Theia in my development environment in such a way that the menu is removed, with also all the default component on the left side like file explorer, git, debug, etc...

I would like to also the toolbar to be the main thing at the top covering the complete upper part.

I also want to implement something like a drag&drop wysiwyg droppable component where I can get the components from the right side in a component list.

Is there any documentation guiding through the process of such a basic setup.

Thank you for your feedback.

[msujew]

@as-shura You can just remove all @theia/* dependencies in your project except for @theia/cli and @theia/core. It might make the application a bit unusable though, since you cannot open any files, given that @theia/workspace, @theia/editor and @theia/monaco are missing. For the @theia/toolbar package, you'll automatically include a few other Theia dependencies, see here. You can still include those, and unregister their contributions if you like though. It's a bit of effort, but doable.

Counter Question: What for do you need Theia without any features? Seems to me like you want a normal webapp with a monaco editor?

[as-shura]

Well I was thinking about porting an open source Webflow towards Theia. Maybe you can give me a good advice how to architect a wysiwyg HTML editor.

What is monaco? I want to replace the source editing window by a drag&drop visual component.

[as-shura]

I don't think that monaco has a plugin system like OSGi in Theia's case.

[msujew]

What is monaco?

Monaco is the editor powering both vscode and Theia.

Maybe you can give me a good advice how to architect a wysiwyg HTML editor.

What are you trying to do exactly? Your question is very vague. As for the actual editor, there are tons of libraries available, see for example quill. Do you want to build an IDE like platform or a typical webapp? Web or Desktop?

I don't think that monaco has a plugin system like OSGi in Theia's case.

Are you talking about plugin systems or dependency injection? Anyway, since you're looking for a WYSIWYG editor, monaco isn't the right choice for you.

[as-shura]

What I am trying to do is something like this but fully customizable. With the architecture approach of Theia which is well inspired by Eclipse IDE. Could you provide documentation locations or knowledge which is important to gather for the architecture.

https://www.vvveb.com/vvvebjs/editor.html

[msujew]

I don't think you will get very far with this idea if you're trying to use Theia. Some of the main concerns are:

1. Theia is not multi-tenant compatible (no web-IDE is). Meaning, you need a dedicated server instance for each user. That's what my question on IDE like platform vs webapp was getting at. You're building a webapp not an IDE.
2. I wouldn't say that Theia's architecture is inspired by Eclipse IDE. It's an extensible IDE, but that's where most of its commonalities end. The extensibility doesn't even come via a plugin mechanism, but via compile-time dependency injection.
3. You will likely hit a lot of roadblocks trying to modify Theia to your needs. Note that Theia isn't the only framework in the JavaScript space using DI mechanisms, take a look at web application frameworks such as nest.js and next.js. These will help you a lot farther than Theia will.

[as-shura]

@as-shura You can just remove all @theia/* dependencies in your project except for @theia/cli and @theia/core. It might make the application a bit unusable though, since you cannot open any files, given that @theia/workspace, @theia/editor and @theia/monaco are missing. For the @theia/toolbar package, you'll automatically include a few other Theia dependencies, see here. You can still include those, and unregister their contributions if you like though. It's a bit of effort, but doable.

Counter Question: What for do you need Theia without any features? Seems to me like you want a normal webapp with a monaco editor?

How can I disable and enable the default extensions ?

[msujew]

You'll need to implement a FilterContribution to disable the contributions from specific extensions. Otherwise they're always enabled.

[as-shura]

1. Theia is not multi-tenant compatible (no web-IDE is). Meaning, you need a dedicated server instance for each user. That's what my question on IDE like platform vs webapp was getting at. You're building a webapp not an IDE.

I don't think you will get very far with this idea if you're trying to use Theia. Some of the main concerns are:

1. Theia is not multi-tenant compatible (no web-IDE is). Meaning, you need a dedicated server instance for each user. That's what my question on IDE like platform vs webapp was getting at. You're building a webapp not an IDE.
2. I wouldn't say that Theia's architecture is inspired by Eclipse IDE. It's an extensible IDE, but that's where most of its commonalities end. The extensibility doesn't even come via a plugin mechanism, but via compile-time dependency injection.
3. You will likely hit a lot of roadblocks trying to modify Theia to your needs. Note that Theia isn't the only framework in the JavaScript space using DI mechanisms, take a look at web application frameworks such as nest.js and next.js. These will help you a lot farther than Theia will.

1. Theia is not multi-tenant compatible (no web-IDE is). Meaning, you need a dedicated server instance for each user. That's what my question on IDE like platform vs webapp was getting at. You're building a webapp not an IDE.

Well I would like to build the Web App as an IDE but only the Site renderer will be a separate component. All the other parts will be part of the IDE and the Code Editor will be replaced by the Renderer.

[msujew]

Alright, I won't try to dissuade you from using Theia any further. To your questions:

in such a way that the menu is removed

You can set the default value for the window.menuBarVisibility preference to compact, so that it gets rendered in the vertical side panel. I wouldn't recommend to completely remove it, as it makes some parts of the application difficult to access.

I would like to also the toolbar to be the main thing at the top covering the complete upper part.

The advice above should accomplish what you're trying to do.

Is there any documentation guiding through the process of such a basic setup.

Not really, there is documentation on setting up Theia projects and so on, but we don't provide documentation for dedicated use cases. Given that Theia can be used in various contexts, we only provide general guides/documentation.

I would generally recommend to make yourself familiar with the codebase, as that'll make it easier to build your own tool on top of Theia.