feat(template): add a default preload script

packages/template/base/src/BaseTemplate.ts

@@ -40,7 +40,7 @@ export class BaseTemplate implements ForgeTemplate {
       await fs.mkdirs(path.resolve(directory, 'src'));
       const rootFiles = ['_gitignore'];
       if (copyCIFiles) rootFiles.push(...['_travis.yml', '_appveyor.yml']);
-      const srcFiles = ['index.css', 'index.js', 'index.html'];
+      const srcFiles = ['index.css', 'index.js', 'index.html', 'preload.js'];
 
       for (const file of rootFiles) {
         await this.copy(path.resolve(tmplDir, file), path.resolve(directory, file.replace(/^_/, '.')));

packages/template/base/tmpl/index.js

@@ -2,8 +2,8 @@ const { app, BrowserWindow } = require('electron');
 const path = require('path');
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
+// eslint-disable-next-line global-require
 if (require('electron-squirrel-startup')) {
-  // eslint-disable-line global-require
   app.quit();
 }
 
@@ -12,6 +12,9 @@ const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
   });
 
   // and load the index.html of the app.

packages/template/base/tmpl/preload.js

@@ -0,0 +1,2 @@
+// See the Electron documentation for details on how to use preload scripts:
+// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts

packages/template/typescript-webpack/src/TypeScriptWebpackTemplate.ts

@@ -63,6 +63,7 @@ class TypeScriptWebpackTemplate extends BaseTemplate {
       await this.copyTemplateFile(path.join(directory, 'src'), 'index.ts');
 
       await this.copyTemplateFile(path.join(directory, 'src'), 'renderer.ts');
+      await fs.rename(filePath('preload.js'), filePath('preload.ts'));
     });
   }
 }

packages/template/typescript-webpack/tmpl/index.ts

@@ -1,8 +1,9 @@
 import { app, BrowserWindow } from 'electron';
-// This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
+// This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
+declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) {
@@ -15,6 +16,9 @@ const createWindow = (): void => {
   const mainWindow = new BrowserWindow({
     height: 600,
     width: 800,
+    webPreferences: {
+      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+    },
   });
 
   // and load the index.html of the app.

packages/template/webpack/src/WebpackTemplate.ts

@@ -25,6 +25,9 @@ class WebpackTemplate extends BaseTemplate {
                 html: './src/index.html',
                 js: './src/renderer.js',
                 name: 'main_window',
+                preload: {
+                  js: './src/preload.js',
+                },
               },
             ],
           },
@@ -39,11 +42,13 @@ class WebpackTemplate extends BaseTemplate {
       await this.copyTemplateFile(directory, 'webpack.renderer.config.js');
       await this.copyTemplateFile(directory, 'webpack.rules.js');
       await this.copyTemplateFile(path.join(directory, 'src'), 'renderer.js');
+      await this.copyTemplateFile(path.join(directory, 'src'), 'preload.js');
 
       await this.updateFileByLine(
         path.resolve(directory, 'src', 'index.js'),
         (line) => {
           if (line.includes('mainWindow.loadFile')) return '  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);';
+          if (line.includes('preload: ')) return '      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,';
           return line;
         },
         path.resolve(directory, 'src', 'main.js')