Developing an example with preload/modifying template

[aw1875]

Originally posted this here as issue #344, so I wanted to move it to a better place (suggested by @alexis-piquet).

---

First off I wanted to say thank you for creating this as it's been super helpful for me with quite a few projects! I wanted to ask this question as it's something that I find quite useful and feel it may be useful for others as well. I was looking at trying to create an example project that utilizes electron's preload functionality for complete context isolation. I originally came across #259 which was super helpful when I had this issue. However, I noticed that if I wanted to create an example it would only be for the renderer side of things. I didn't want to create a PR with this change yet as it could be a fairly substantial change to most projects and not everyone might find it necessary. So for the time being I'd like to outline my proposal to get your input.

My proposal

To start, following this comment we would set up the nextron.config.js file and next.config.js files appropriately (dependent on if the project is typescript or javascript).

Then, we'd flip our webPreferences in the create-window helper so that nodeIntegrations is false and contextIsolation is true.

Next, we'd have a preload file located at ./main/preload.(ts|js) that could look something like this as an example:

import { contextBridge, ipcRenderer } from 'electron';

export const Main = {
  /**
   * Use this function to send messages via IPC communication
   */
  send: (channel: string, data?: any) => {
    const validChannels: string[] = [];

    if (validChannels.includes(channel)) ipcRenderer.send(channel, data);
  },

  /**
   * Use this function to send multiple pieces of data via IPC communication
   */
  sendMultiple: (channel: string, ...data: any[]) => {
    const validChannels: string[] = [];

    if (validChannels.includes(channel)) ipcRenderer.send(channel, ...data);
  },

  /**
   * Use this function to invoke functions with return callback
   */
  invoke: async (channel: string, data?: any) => {
    const validInvokeChannels: string[] = [];

    if (validInvokeChannels.includes(channel))
      return await ipcRenderer.invoke(channel, data);
  },

  /**
   * Use this function as an easier way to listen to events
   */
  on: (channel: string, callback: Function) =>
    ipcRenderer.on(channel, (_, data) => callback(data)),

  /**
   * Use this function to clean up event listeners
   */
  off: (channel: string, callback: Function) =>
    ipcRenderer.removeListener(channel, (_, data) => callback(data)),
};

contextBridge.exposeInMainWorld('Main', Main);

Of course, we'd want to show how to utilize the preload file by modifying ./background/main.(ts|js) to do so:

const MAIN_WINDOW_PRELOAD_ENTRY = path.join(__dirname, 'preload.js');
...

  const mainWindow = createWindow('main', {
    width: 1000,
    height: 600,
    webPreferences: {
        preload: MAIN_WINDOW_PRELOAD_ENTRY
    }
  });

And lastly, for typescript, we could expose the types for the window and modify the tsconfig(s) so that they are recognized. For example ./@types/preload.d.ts:

import { Main } from '../main/preload';

declare global {
    interface Window {
        Main: typeof Main;
    }
}

and our ./renderer/tsconfig.json:

  "include": [
    ... other includes
    "../@types/**.ts"
  ],

Optionally, we could also introduce an example function (either in the background file or a separate file) for registering our listeners such as:

const registerListeners = () => {
    ipcMain.on('ping', () => mainWindow.webContents.send('pong'));
}

Again, I'd love to hear if this is something I'd be able to work on adding but either way look forward to hearing your thoughts.

[hockyy]

I wonder whats the difference between setting up the preload through webpack and the mainwindow

[hockyy]

https://github.com/irg1008/nextron-template this repo uses webpack and next with SWR to avoid SSR window not rendered when using webpack

[hockyy]

electron 22++ equipped with next js needs this in some cases