How can I quickly add my own Theia extension in the theia-ide project?

[NO-MAP]

I noticed that there are already three extensions under the theia-ide/theia-extensions directory: launcher, product, and updater.
How can I quickly add my own extension under this directory? Is there any shortcut command to generate the basic component content?
Using yo theia-extension generates other unrelated files.

[msujew]

Hey @NO-MAP,

in the end, all a Theia compile-time extension really is, is an npm package with a package.json that contains a theiaExtensions entry:

theia/packages/toolbar/package.json

Lines 44 to 48 in b89f0f8

	"theiaExtensions": [
	{
	"frontend": "lib/browser/toolbar-frontend-module"
	}
	],

Each entry should point towards a file that exports an inversify ContainerModule. If you want to create an additional extension, you can just do copy and paste from an existing extension.

[NO-MAP]

Thank you very much for your response. I have another question. In the current Theia IDE development environment, I am working in the applications/browser directory (the package.json scripts are as follows):

  "scripts": {
    "clean": "theia clean && rimraf node_modules",
    "build": "yarn -s rebuild && theia build --app-target=\"browser\" --mode development",
    "build:prod": "yarn -s rebuild && theia build --app-target=\"browser\"",
    "rebuild": "theia rebuild:browser --cacheRoot ../..",
    "start": "theia start --plugins=local-dir:../../plugins",
    "watch": "concurrently --kill-others -n tsc,build -c red,yellow \"tsc -b -w --preserveWatchOutput\" \"yarn -s watch:bundle\"",
    "update:theia": "ts-node ../../scripts/update-theia-version.ts",
    "update:next": "ts-node ../../scripts/update-theia-version.ts next"
  }

After making changes during development, I always have to manually run yarn build followed by yarn start to see the updated application. I noticed there is a watch command, but it doesn’t seem to work in practice. The command yarn -s watch:bundle does not exist. What should I do to streamline the development process? I look forward to your reply.

[msujew]

The watch script probably has been incorrectly copied from our example application. See:

theia/examples/browser/package.json

Lines 111 to 113 in b89f0f8

	"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"

However, I'm not really involved in the theia-ide repo, so I'm not really sure how to correctly fix that. It might be enough to add the missing watch:bundle script from the code above.

After making changes during development, I always have to manually run yarn build followed by yarn start to see the updated application.

Note that Theia does not feature a hot-reload. However, if you only change some of the frontend code, it is enough to just reload the browser tab, instead of restarting the whole application.