How can a MenuItem be separated into its own module in Electron? - menu

Question

New to Electron and building menus I'm trying to see if I can separate a MenuItem to prevent an enormous file but I'm having issues. For example I've separated the menu code outside of main.js and I moved menu in a renderer directory within a Menu directory. I can call the Menu from main.js with:
let mainMenu = Menu.buildFromTemplate(require('./renderer/Menus/mainMenu'))
mainMenu.js:
module.exports = [
{
label: 'Foo',
id: 'itemFoo',
submenu: [
{label: 'Enter Foo'},
{label: 'Exit Foo'}
]
},
{
label: 'Bar',
id: 'itemBar',
submenu: [
{label: 'Enter Bar'},
{label: 'Exit Bar'}
]
}
]
and it works but could each menu item be separated further into their own file and what would be the proper way to do that?
I've tried to take mainMenu.js and code it as:
const foo = require('./itemFoo')
module.exports = [
{foo},
{
label: 'Bar',
id: 'itemBar',
submenu: [
{label: 'Enter Bar'},
{label: 'Exit Bar'}
]
}
]
itemFoo.js:
module.exports = [
{
label: 'Foo',
id: 'itemFoo',
submenu: [
{label: 'Enter Foo'},
{label: 'Exit Foo'}
]
}
]
but I get an error:
TypeError: Invalid template for MenuItem: must have at least one of
label, role or type
Can a menu item in Electron be isolated into it's own module and if so how to do it? I didn't see this mentioned when searching [electron] menuitem or under the documentation

Answer 1

I figured out what I was doing wrong. I was writing the Menu Items incorrectly. It should be:
main.js:
const { Menu } = require('electron')
let mainMenu = Menu.buildFromTemplate(require('./renderer/Menus/mainMenu'))
app.on('ready', () => {
mainWindow.createWindow(),
Menu.setApplicationMenu(mainMenu)
})
mainMenu.js:
const foo = require('./itemFoo')
const bar = require('./itemBar')
module.exports = [
foo,
bar
]
itemBar.js:
module.exports = {
label: 'Foo',
id: 'itemFoo',
submenu: [
{label: 'Enter Foo'},
{label: 'Exit Foo'}
]
}
itemFoo.js:
module.exports = {
label: 'Bar',
id: 'itemBar',
submenu: [
{label: 'Enter Bar'},
{label: 'Exit Bar'}
]
}
That will allow me to have each main menu item in its own file and clear main.js.

Answer 2

This should work (untested though):
main process:
let mainMenuTemplate =
[
require('./renderer/Menus/itemFoo'),
require('./renderer/Menus/itemBar')
];
let mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
itemFoo.js:
module.exports =
{
label: 'Foo',
id: 'itemFoo',
submenu: [
{label: 'Enter Foo'},
{label: 'Exit Foo'}
]
};
itemBar.js:
module.exports =
{
label: 'Bar',
id: 'itemBar',
submenu: [
{label: 'Enter Bar'},
{label: 'Exit Bar'}
]
};
Note: an intermediate mainMenu.js file is probably unnecessary then...