javascript - Is it possible to externalize Electron menu template code?

Question

I have an Electron app with 3 windows and each window has a different menu. The menu template code for each menu is quite long and I would like to externalize it. So far nothing I have tried works.

I've tried different ways to "modularize" it but got lots of errors. The approach below works to set up the menu, but none of the functions referenced in the menu work (e.g. quitApplication).

Is what I am trying to do not possible or am I just "doing it wrong"?

var test = require("./app/js/menuTest.js");
var tm = new test();    
var menuTemplate = tm.getMenu();
myWindow = Menu.buildFromTemplate(menuTemplate);

---

menuTest.js

function testMenu() {
 this.getMenu = function () {
        var menuTemplate = [
            {
                label: global.productData.appName,
                submenu: [
                    { label: 'About ' + global.productData.appName, click: () => { showAboutWindow() } },

                    { type: 'separator' },
                    { role: 'hide' },
                    { role: 'hideothers' },
                    { role: 'unhide' },
                    { type: 'separator' },
                    { label: 'Quit', click: () => { quitApplication() }, accelerator: 'CmdOrCtrl+q' }
                ]
         // code deleted for clarity
        return menuTemplate;
    }
}
module.exports = testMenu;

Answer 1

From how I understand your question, you want to move the template code out of your main process script, but keep the functions in there.

This can be achieved by moving the menu structure object into a separate module. The module exports a function that takes an object with references to the functions you want to call in the menu.

I believe this does not add significant complexity and "externalizes" just the menu template code.

menu1.js:

module.exports = function(actions) {
    return [
        {
            label: "Foo",
            submenu: [
                { label: "Bar", click: actions.bar },
                { label: "About", click: actions.about }
            ]
        }
    ];
}

main.js:

const {app,BrowserWindow,Menu} = require("electron");

const actions = {
    bar: function () {
        console.log("bar");
    },
    about: function () {
        console.log("about");
    }
};

const menu1_template = require("./menu1.js")(actions);
const menu1 = Menu.buildFromTemplate(menu1_template);
Menu.setApplicationMenu(menu1);

let mainWindow;

app.on("ready", function() {
    mainWindow = new BrowserWindow();
});