From 636e2c5db08b0f027f972667f5752e5127069dae Mon Sep 17 00:00:00 2001 From: Mark Lee Date: Sat, 12 Feb 2022 20:22:07 -0800 Subject: [PATCH] feat(template): add a default preload script (#2722) --- packages/template/base/src/BaseTemplate.ts | 2 +- packages/template/base/tmpl/index.js | 5 ++++- packages/template/base/tmpl/preload.js | 2 ++ .../src/TypeScriptWebpackTemplate.ts | 1 + .../test/TypeScriptWebpackTemplate_spec.ts | 8 +++++--- .../template/typescript-webpack/tmpl/index.ts | 6 +++++- .../typescript-webpack/tmpl/preload.ts | 2 ++ .../typescript/src/TypeScriptTemplate.ts | 2 ++ .../typescript/test/TypeScriptTemplate_spec.ts | 8 +++++--- packages/template/typescript/tmpl/index.ts | 3 +++ packages/template/typescript/tmpl/preload.ts | 2 ++ packages/template/webpack/package.json | 2 +- .../template/webpack/src/WebpackTemplate.ts | 5 +++++ .../webpack/test/WebpackTemplate_spec.ts | 18 ++++++++++++++---- packages/template/webpack/tmpl/preload.js | 2 ++ 15 files changed, 54 insertions(+), 14 deletions(-) create mode 100644 packages/template/base/tmpl/preload.js create mode 100644 packages/template/typescript-webpack/tmpl/preload.ts create mode 100644 packages/template/typescript/tmpl/preload.ts create mode 100644 packages/template/webpack/tmpl/preload.js diff --git a/packages/template/base/src/BaseTemplate.ts b/packages/template/base/src/BaseTemplate.ts index 3ef176b053..1700fe84bf 100644 --- a/packages/template/base/src/BaseTemplate.ts +++ b/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(/^_/, '.'))); diff --git a/packages/template/base/tmpl/index.js b/packages/template/base/tmpl/index.js index 37bb6b87a0..fb003a215c 100644 --- a/packages/template/base/tmpl/index.js +++ b/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. diff --git a/packages/template/base/tmpl/preload.js b/packages/template/base/tmpl/preload.js new file mode 100644 index 0000000000..5e9d369cc9 --- /dev/null +++ b/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 diff --git a/packages/template/typescript-webpack/src/TypeScriptWebpackTemplate.ts b/packages/template/typescript-webpack/src/TypeScriptWebpackTemplate.ts index 16080abec7..9ead33dcbd 100644 --- a/packages/template/typescript-webpack/src/TypeScriptWebpackTemplate.ts +++ b/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'); }); } } diff --git a/packages/template/typescript-webpack/test/TypeScriptWebpackTemplate_spec.ts b/packages/template/typescript-webpack/test/TypeScriptWebpackTemplate_spec.ts index 0bb4831993..3ec8264cac 100644 --- a/packages/template/typescript-webpack/test/TypeScriptWebpackTemplate_spec.ts +++ b/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'); + }); } }); diff --git a/packages/template/typescript-webpack/tmpl/index.ts b/packages/template/typescript-webpack/tmpl/index.ts index 99fa399c48..d8b5e02226 100644 --- a/packages/template/typescript-webpack/tmpl/index.ts +++ b/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. diff --git a/packages/template/typescript-webpack/tmpl/preload.ts b/packages/template/typescript-webpack/tmpl/preload.ts new file mode 100644 index 0000000000..5e9d369cc9 --- /dev/null +++ b/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 diff --git a/packages/template/typescript/src/TypeScriptTemplate.ts b/packages/template/typescript/src/TypeScriptTemplate.ts index b5a5cf3352..9ef2ee9429 100644 --- a/packages/template/typescript/src/TypeScriptTemplate.ts +++ b/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'); }); } } diff --git a/packages/template/typescript/test/TypeScriptTemplate_spec.ts b/packages/template/typescript/test/TypeScriptTemplate_spec.ts index d65e4bc742..9789a1c46b 100644 --- a/packages/template/typescript/test/TypeScriptTemplate_spec.ts +++ b/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'); + }); } }); diff --git a/packages/template/typescript/tmpl/index.ts b/packages/template/typescript/tmpl/index.ts index 7917fef886..d5aa95acab 100644 --- a/packages/template/typescript/tmpl/index.ts +++ b/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. diff --git a/packages/template/typescript/tmpl/preload.ts b/packages/template/typescript/tmpl/preload.ts new file mode 100644 index 0000000000..5e9d369cc9 --- /dev/null +++ b/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 diff --git a/packages/template/webpack/package.json b/packages/template/webpack/package.json index 8138b63ae3..760fba088e 100644 --- a/packages/template/webpack/package.json +++ b/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" diff --git a/packages/template/webpack/src/WebpackTemplate.ts b/packages/template/webpack/src/WebpackTemplate.ts index 70b949a521..f834913307 100644 --- a/packages/template/webpack/src/WebpackTemplate.ts +++ b/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') diff --git a/packages/template/webpack/test/WebpackTemplate_spec.ts b/packages/template/webpack/test/WebpackTemplate_spec.ts index af7d91b1aa..e326b03630 100644 --- a/packages/template/webpack/test/WebpackTemplate_spec.ts +++ b/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 () => { diff --git a/packages/template/webpack/tmpl/preload.js b/packages/template/webpack/tmpl/preload.js new file mode 100644 index 0000000000..5e9d369cc9 --- /dev/null +++ b/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