If I want use two or more package in theia with antd,it means more antd?

one package one antd?whether I should install antd in every package?And what’s the diff between shell.activateWidget and shell.revealWidget, now I can’t understand

[original thread by oyo]

@oyosc you can take a look at the API documentation if you’re having trouble understanding methods:

  • revealWidget: Reveal a widget in the application shell. This makes the widget visible, but does not activate it.

  • activateWidget: Activate a widget in the application shell. This makes the widget visible and usually also assigns focus to it.

Can you clarify what you mean by antd?

[oyo]

@vince-fugnitto thx, I want use more packages with antd ui,so in one package must install one antd?And I find some interesting thing,when I use the registry.registerCommand method to call GettingStartedWidget’s method, and init method of GettingStartedWidget use async/await grammar, when I click the command with registry.registerCommand , theia will execute init method first, and when execute to the code of “this.applicationInfo = await this.appServer.getApplicationInfo()”, it will jump to registry.registerCommand’s execute method that “execute: async uris => …”, and later back to the init method, get the result of this.applicationInfo, and continue execute

registry.registerCommand({ id: NewWorkspaceCommands.CHECK_LINT.id }, this.newMultiUriAwareCommandHandler({
            execute: async uris => {
                console.log(uris);
                const widget = await this.openView({ activate: false });
                widget.updatepath(uris.toString());
            }
        }));
@postConstruct()
    protected async init(): Promise<void> {
        this.id = GettingStartedWidget.ID;
        this.title.label = GettingStartedWidget.LABEL;
        this.title.caption = GettingStartedWidget.LABEL;
        this.title.iconClass = 'debug-tab-icon';
        this.title.closable = true;
        this.applicationInfo = await this.appServer.getApplicationInfo();
        this.recentWorkspaces = await this.workspaceService.recentWorkspaces();
        this.stat = await this.fileSystem.getCurrentUserHome();
        this.home = this.stat ? new URI(this.stat.uri).path.toString() : undefined;
        this.update();
    };

I don’t know what antd is, are you referring to Ant? https://ant.design/

[oyo]

@vince-fugnitto yes

I’m not familiar with Ant, but like any dependency that you want to use in your extension it needs to be declared in your package.json: https://ant.design/docs/react/introduce#Using-npm-or-yarn

[oyo]

@vince-fugnitto Not this problem, I just want know if I use any UI like Ant in package, whether I need install it in every package that I create?

In general I like that each of my packages describe explicitly their dependencies (so I know what’s included and at which version range). It also makes things clearer. However, if you add ant in package A, and package B depends on A, then it ant should also be available.

[oyo]

@vince-fugnitto You mean that I can install ant in theia’s root directory with global installation?

Are you modifying the Theia repository directly to build an IDE? I’d advise against that. I mean that any new extension that you are creating can include ant as a dependency so you can use it. If you’re looking to modify all of Theia with ant then that is quite a large task.

[oyo]

Thx, can You tell me the reason of another question?

Sure, what’s your question?

[oyo]

@vince-fugnitto I find some interesting thing,when I use the registry.registerCommand method to call GettingStartedWidget’s method, and init method of GettingStartedWidget use async/await grammar, when I click the command with registry.registerCommand , theia will execute init method first, and when execute to the code of “this.applicationInfo = await this.appServer.getApplicationInfo()”, it will jump to registry.registerCommand’s execute method that “execute: async uris => …”, and later back to the init method, get the result of this.applicationInfo, and continue execute

registry.registerCommand({ id: NewWorkspaceCommands.CHECK_LINT.id }, this.newMultiUriAwareCommandHandler({
            execute: async uris => {
                console.log(uris);
                const widget = await this.openView({ activate: false });
                widget.updatepath(uris.toString());
            }
        }));
@postConstruct()
    protected async init(): Promise<void> {
        this.id = GettingStartedWidget.ID;
        this.title.label = GettingStartedWidget.LABEL;
        this.title.caption = GettingStartedWidget.LABEL;
        this.title.iconClass = 'debug-tab-icon';
        this.title.closable = true;
        this.applicationInfo = await this.appServer.getApplicationInfo();
        this.recentWorkspaces = await this.workspaceService.recentWorkspaces();
        this.stat = await this.fileSystem.getCurrentUserHome();
        this.home = this.stat ? new URI(this.stat.uri).path.toString() : undefined;
        this.update();
    };

@oyosc I’m sorry but what exactly is the question?
As far as I know, when we are calling the getting-started command, we are triggering the openView which must await for the view to be successfully created (init) before it can actually be displayed. Only then does the remainder of the command complete.