Best strategy for multiple extensions development for theia IDE

[umairsair]

I am looking for good development environment like I used to have for eclipse;

1. Import all plugins in workspace
2. Define target platform.
3. Create launch config and include all workspace plugins and simply launch it
4. Make any change to code, its immediately reflected in the running instance

Now I have theia browser app and want to develop multiple extensions for it, ideally the vscode extensions. But for development, if they are compiled as theia plugins, thats also fine. And now if I make any changes to my extensions, they immediately gets reflected in running browser app, or a reload of open browser app is also fine.

Do we have any such development environment setup guide? Or any direction that I can look into for such a development environment and contribute back to community?

[msujew]

Hey @umairsair,

And now if I make any changes to my extensions, they immediately gets reflected in running browser app, or a reload of open browser app is also fine.

As for the changes being immediately reflected in your app: What you're looking for is called hot reloading in the browser development work. However, Theia does not support that currently. See for example #2436 which discusses this in brief detail.

However, Theia already supports that use case when you simply reload the browser app. You just need to run a watcher that recompiles your extension/plugin code on every change. Reloading the app in the browser will then automatically reload with the newly integrated changes. We have an example app that contains a few scripts that already do that:

theia/examples/browser/package.json

Lines 109 to 111 in ab0ce56

	"watch": "concurrently --kill-others -n tsc,bundle -c red,yellow \"tsc -b -w --preserveWatchOutput\" \"npm run -s watch:bundle\"",
	"watch:bundle": "theia build --watch --mode development",
	"watch:compile": "tsc -b -w"

[msujew]

It should, the question is whether you're passing enough -- to ensure that the argument is actually passed to the actual theia start call.

[umairsair]

I am in https://github.com/eclipse-theia/theia-ide repo and running yarn browser start --hostname 0.0.0.0 --port 3000 --mode development --ignore-certificate-errors --hosted-plugin-inspect=9339

[msujew]

I'm not working too much with the repo. I would recommend you to start the Launch Browser Backend launch config, which already configures this option. After connecting to a frontend, you can then start the Attach to Plugin Host config. Note that the plugin host is only available after a frontend is created.

[umairsair]

yup! thats the other option. And interesting thing is that launch doesn't use browser start, instead it uses ${workspaceFolder}/applications/browser/lib/backend/main.js. I'll see how is it different.

[msujew]

Well, in the end theia start does that as well.

[fayakun-it-consulting]

@umairsair We have already started a thread concerning exactly what you suggest in this discussion : #16001

It looks like a lot of what is in #2436 is also relate to that discussion.

[fayakun-it-consulting]

@umairsair The best option available at the moment for your Eclipse kind of dynamic service runtime is a project called Pandino. It is the only solution available to my knowledge for the OSGi style feature for the point #4 you mentioned. But Theia at the moment doesn't provide dynamic UI swapping because there's no such mechanism at the moment. I invite you to check Pandino.

https://github.com/BlackBeltTechnology/pandino

[umairsair]

Thanks @fayakun-it-consulting for the input.

I am working on building a theia based IDE, so I would love to know if something can be useful in context of theia.

[msujew]

@umairsair Please take @fayakun-it-consulting advice with a grain of salt. They have very little experience working/building with Theia. Integrating a solution such as Pandino is likely not a good idea for someone who is unfamiliar with the framework. I don't assume it will work as intended in downstream apps anyway, since a lot of code in the framework assumes that every contribution etc. is already available at startup of the app.

It is the only solution available to my knowledge for the OSGi style feature for the point #4 you mentioned.

As outlined in #16033 (reply in thread), hot module replacement can be done without integration of tools such as Pandino.