How to create a separated dialog like Alipay's Mini Program Studio?

[mister-teddy]

We are developing another Mini Program Studio, and Alipay is our ideal result. When you first open the Studio, a separated window (which is not VS Code) popup to let you login and create new projects,... I wonder if there is any existing ContributionPoint or Component that I can easily extends to implement this feature? Or I would need to edit the electron main code to create another BrowserWindow (in the case how could I use the DI system and React)?

Thank you very much for your support!

[bytemain]

Yes, you need write some code in the electron main process to control the welcome page.

first of all, let's see this code example: https://github.com/opensumi/ide-electron/blob/main/src/main/launch.ts#L49)

inside this class, it will initialize the di system, so you can use this injector

I can use a pseudo code to explain:

class MyAlipayMiniProgramStudio {
  start() {
    const app = new ElectronMainApp(xxxxxx);
    this.injector = app.injector;
    this.webcomeWindow = this.injector.get(WelcomeWindow)
    this.welcomeWindow.show()
  }
}

As for the content of this independent window, just like any other normal electron app,

create a BrowserWindow, then loadURL, ...

[mister-teddy]

Thank you for your snippet 🙏

[yantze]

A project similar to this has been opened https://github.com/opensumi/app-desktop

Screen.Recording.2022-07-12.at.20.56.00.mov

[mister-teddy]

Thank you very much! If only I know about this project earlier 😅