feat(template): add a default preload script (#2722)

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 this.copyTemplateFile(path.join(directory, 'src'), 'preload.ts');
     });
   }
 }

packages/template/typescript-webpack/test/TypeScriptWebpackTemplate_spec.ts

@@ -14,7 +14,7 @@ describe('TypeScriptWebpackTemplate', () => {
     await template.initializeTemplate(dir, {});
   });
 
-  it('should copy the appropriate template files', async () => {
+  context('template files are copied to project', () => {
     const expectedFiles = [
       'tsconfig.json',
       '.eslintrc.json',
@@ -24,10 +24,12 @@ describe('TypeScriptWebpackTemplate', () => {
       'webpack.plugins.js',
       path.join('src', 'index.ts'),
       path.join('src', 'renderer.ts'),
+      path.join('src', 'preload.ts'),
     ];
-
     for (const filename of expectedFiles) {
-      await testUtils.expectProjectPathExists(dir, filename, 'file');
+      it(`${filename} should exist`, async () => {
+        await testUtils.expectProjectPathExists(dir, filename, 'file');
+      });
     }
   });
 

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/typescript-webpack/tmpl/preload.ts

@@ -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/src/TypeScriptTemplate.ts

@@ -32,6 +32,8 @@ class TypeScriptTemplate extends BaseTemplate {
       // Remove index.js and replace with index.ts
       await fs.remove(filePath('index.js'));
       await this.copyTemplateFile(path.join(directory, 'src'), 'index.ts');
+
+      await this.copyTemplateFile(path.join(directory, 'src'), 'preload.ts');
     });
   }
 }

packages/template/typescript/test/TypeScriptTemplate_spec.ts

@@ -15,10 +15,12 @@ describe('TypeScriptTemplate', () => {
     await template.initializeTemplate(dir);
   });
 
-  it('should copy the appropriate template files', async () => {
-    const expectedFiles = ['.eslintrc.json', 'tsconfig.json'];
+  context('template files are copied to project', () => {
+    const expectedFiles = ['.eslintrc.json', 'tsconfig.json', path.join('src', 'preload.ts')];
     for (const filename of expectedFiles) {
-      await testUtils.expectProjectPathExists(dir, filename, 'file');
+      it(`${filename} should exist`, async () => {
+        await testUtils.expectProjectPathExists(dir, filename, 'file');
+      });
     }
   });
 

packages/template/typescript/tmpl/index.ts

@@ -12,6 +12,9 @@ const createWindow = (): void => {
   const mainWindow = new BrowserWindow({
     height: 600,
     width: 800,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
   });
 
   // and load the index.html of the app.

packages/template/typescript/tmpl/preload.ts

@@ -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/webpack/package.json

@@ -8,7 +8,7 @@
   "main": "dist/WebpackTemplate.js",
   "typings": "dist/WebpackTemplate.d.ts",
   "scripts": {
-    "test": "echo No Tests"
+    "test": "mocha --config ../../../.mocharc.js test/**/*_spec.ts"
   },
   "engines": {
     "node": ">= 12.13.0"

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')

packages/template/webpack/test/WebpackTemplate_spec.ts

@@ -15,17 +15,27 @@ describe('WebpackTemplate', () => {
     await template.initializeTemplate(dir, {});
   });
 
-  it('should copy the appropriate template files', async () => {
-    const expectedFiles = ['webpack.main.config.js', 'webpack.renderer.config.js', 'webpack.rules.js', path.join('src', 'renderer.js')];
+  context('template files are copied to project', () => {
+    const expectedFiles = [
+      'webpack.main.config.js',
+      'webpack.renderer.config.js',
+      'webpack.rules.js',
+      path.join('src', 'renderer.js'),
+      path.join('src', 'preload.js'),
+    ];
     for (const filename of expectedFiles) {
-      await testUtils.expectProjectPathExists(dir, filename, 'file');
+      it(`${filename} should exist`, async () => {
+        await testUtils.expectProjectPathExists(dir, filename, 'file');
+      });
     }
   });
 
   it('should move and rewrite the main process file', async () => {
     await testUtils.expectProjectPathNotExists(dir, path.join('src', 'index.js'), 'file');
     await testUtils.expectProjectPathExists(dir, path.join('src', 'main.js'), 'file');
-    expect((await fs.readFile(path.join(dir, 'src', 'main.js'))).toString()).to.match(/MAIN_WINDOW_WEBPACK_ENTRY/);
+    const mainFile = (await fs.readFile(path.join(dir, 'src', 'main.js'))).toString();
+    expect(mainFile).to.match(/MAIN_WINDOW_WEBPACK_ENTRY/);
+    expect(mainFile).to.match(/MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY/);
   });
 
   it('should remove the stylesheet link from the HTML file', async () => {

packages/template/webpack/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