itsMapleLeaf/remix-electron

💡 Feature Request Idea: help beginner electron users get started on good path with this Main script

cliffordfajardo opened this issue · 1 comments

cliffordfajardo commented

Describe the bug

Scenario

As a user who is new to electron, I want to make sure I am getting started on the right path to success when coding my electron app. The desktop/main.js the entry point of the electron app in my experience can get messy and can easily become a place where lots of logic is placed there, its easy to create lots of top level variable there and create a mess, if one is not careful.

Proposed Solution

Create a file called electron-main which encapsulates the bootstrapping of the electron application into a Javascript class. The advantage of this is that we could now test the bootstrapping portions of our application like.

// FILENAME: electron-main.ts
// NOTE: this the code needs some tweaking, this is a high level idea

import { BrowserWindow } from 'electron';
export default class Main {
    static mainWindow: Electron.BrowserWindow;
    static application: Electron.App;
    static BrowserWindow;
    private static onWindowAllClosed() {
        if (process.platform !== 'darwin') {
            Main.application.quit();
        }
    }

    private static onClose() {
        // Dereference the window object. 
        Main.mainWindow = null;
    }

    private static onReady() {
        Main.mainWindow = new Main.BrowserWindow({ width: 800, height: 600 });
        Main.mainWindow
            .loadURL('file://' + __dirname + '/index.html');
        Main.mainWindow.on('closed', Main.onClose);
    }
    
     // NOTE: we could use a constructor() instead 
     // Also code can be updated to follow the single pattern beter
    static main(app: Electron.App, browserWindow: typeof BrowserWindow) {
        // we pass the Electron.App object and the  
        // Electron.BrowserWindow into this function 
        // so this class has no dependencies. This 
        // makes the code easier to write tests for 
        Main.BrowserWindow = browserWindow;
        Main.application = app;
        Main.application.on('window-all-closed', Main.onWindowAllClosed);
        Main.application.on('ready', Main.onReady);
    }
}
// FILENAME: electron-app.ts
import { app, BrowserWindow } from 'electron';
import Main from './Main';

Main.main(app, BrowserWindow);

Credits

itsMapleLeaf commented

The rationale for this is a good one, but I don't think this is particularly needed. With Remix, with the ability to use Electron APIs in loaders and actions, a lot of your code is going to be in the app folder, and not on the Electron side, so there's less need for an enforced sort of architecture there.

I also don't believe a class full of static methods is a great approach for this. It's functionally no different than a plain function, or a module with top-level function exports, and my electron apps have scaled fine with a collection of functions split across multiple files.

I'll keep this open in case there are other opinions on how main.js can be organized better, but for now, marking as wontfix

  • 👍1