Extension & Plugin Confusion

Hello,

I already have a package.json etc. i have files.

my-ide/
├── browser_app/
├── electron_app/
├── package.json
└── lerna.json

I create a core folder in the root directory and I want the extensions and plugins in the core folder to be added to the IDE during production.

Here is how I updated the package.json file in my root directory:

"workspaces": [
  "browser-app",
  "electron-app",
  "core/*"
]

I create extension like this: yo theia-extension

I choose the Empty one. Many files are created, I delete them all, only custom-preferences remain.

after:
Screenshot 2021-09-02 13.08.50

custom-preferences-contribution.ts

import { injectable } from '@theia/core/shared/inversify';
import { PreferenceConfigurations } from '@theia/core/lib/browser/preferences/preference-configurations';

export const CustomPreferenceConfiguration = Symbol('CustomPreferenceConfiguration');

@injectable()
export class CustomPreferenceConfigurations extends PreferenceConfigurations {

    getPaths(): string[] {
        return ['.my-ide']
    }

}

custom-preferences-frontend-module.ts


import { ContainerModule } from 'inversify';
import { CustomPreferenceConfigurations } from './custom-preferences-contribution';
import { bindContributionProvider } from '@theia/core/lib/common/contribution-provider';
import { PreferenceConfigurations } from '@theia/core/lib/browser/preferences/preference-configurations';

export default new ContainerModule((bind, unbind, isBound, rebind) => {
    bindContributionProvider.bind(bind, CustomPreferenceConfigurations);
    bind(CustomPreferenceConfigurations).toSelf().inSingletonScope();
    rebind(PreferenceConfigurations).to(CustomPreferenceConfigurations).inSingletonScope();
});

after:

yarn prepare
yarn start:browser

The program continues to create the .theia folder.

I just found out that if I run yo theia-extension --standalone the electron and web folders are not created.

@myFree.1 thank you for the discussion :+1:

When you start your example, do you see your changes as part of the sources (verified through the dev-console), do you see your extension in the about dialog? I wanted to confirm that your extension is actually part of your application in the end.

I just found out that if I run yo theia-extension --standalone the electron and web folders are not created.

That should be the purpose of the --standalone option as described in the help:

-s,   --standalone     # Generate only the extension, no root project, browser app or electron app. Skips install after generation.  Default: false

I actually got my source code from here: How to change ~/.theia folder to ~/.customtheia folder

@myFree.1 I mean do you see your changes when you run your application, are you able to identify that your sources are actually loaded?

For example, if I make a change to workspace-service.ts I can verify if my changes are actually present by inspecting the sources through the dev-console:

The program continues to create the .theia folder.

@myFree.1 can you clarify what you mean when you say it creates the .theia folder?

My plugin was not visible, I solved it, now it appears but I get this error:

index.js:58 Failed to start the frontend application.
index.js:60 TypeError: Class constructor PreferenceConfigurations cannot be invoked without 'new'
    at new CustomPreferenceConfigurations (custom-preferences-contribution.ts:7)

Like the theia-blueprint which changes the configuration folder from .theia to .theia-blueprint.

@myFree.1 you’ll need to target ES2017 if you haven’t already done so:

I updated my browser-app/webpack.config.js file:

const config = require('./gen-webpack.config.js');

config.module.rules.push({
    test: /\.js$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [['@babel/preset-env', { targets: { chrome: '58', ie: '11' } }]],
        }
    }
});

module.exports = config;

Now I get a different error:

Uncaught ReferenceError: regeneratorRuntime is not defined

@myFree.1 I’ve never seen that error, you’ll likely need to look online for a solution but it’s probably related to babel.

It’s a bit hard to help with all your issues and errors as we only get a small picture of what’s going on, if you have additional issues with your extension you can try adding it to a public repository (ex: github) where we can take a look :slight_smile:

1 Like

I messed up my project a bit. I messed around with files for solutions. For now, a scratch build will be fine for me. I have a few new concepts to learn.

Thank you for your help.