How to add an extension to theia-blueprint via yo theia-extension -s?

[scharf]

After some painful hours of experimenting, I found out how to add an extension to theia-blueprint using the generator-theia-extension.

Goal: Add the Widget example to theia-blueprint

Create a standalone Theia extension using the Widget example inside the theia-extensions folder:

cd theia-extensions
yo theia-extension --standalone # Choose 'Widget' and name it `my-widget`

For the next step to work, you must change the name of the extension in theia-extensions/my-widget/package.json to something like theia-ide-my-widget-ext (matching the pattern theia-ide-.*ext), otherwise it will not be picked up by the yarn build:dev command.

Add the new theia-ide-my-widget-ext to the dependencies in applications/browser/package.json.

Then run:

cd ..
yarn && yarn build:dev
yarn browser start

After running this, I encountered the following error:

Error: Cannot apply @injectable decorator multiple times.
        at injectable.js:6:1
        at DecorateConstructor (Reflect.js:541:1)
        at Reflect.decorate (Reflect.js:130:1)
        at _decorate (decorator-utils.js:72:1)
        at decorate (decorator-utils.js:85:1)
        at ../../theia-extensions/my-widget/node_modules/@theia/core/lib/browser/widgets/widget.js (widget.ts:28:9)
        at _webpack_require_ (bundle.js:411736:42)
        at ../../theia-extensions/my-widget/node_modules/@theia/core/lib/browser/widgets/alert-message.js (alert-message.tsx:18:1)
        at _webpack_require_ (bundle.js:411736:42)
        at ../../theia-extensions/my-widget/lib/browser/my-widget-widget.js (my-widget-widget.tsx:3:1)

To resolve this, I added the following dependencies to theia-extensions/my-widget/package.json:

"dependencies": {
  "@theia/core": "1.52.0",
  "@theia/getting-started": "1.52.0",
  "@theia/vsx-registry": "1.52.0",
  "@theia/workspace": "1.52.0",
  "inversify": "^6.0.1"
}

I think it would make sense to add more examples to theia-blueprint or adjust the documentation to include these steps.

The goal is to add an extension inside a clone of the theia-blueprint and distribute it via the browser Docker image.

Is this the right approach?

If this is the correct approach, I would propose adding it to the theia-blueprint documentation. (I could contribute if needed.)