feat: add support for bundling preload files, fixes #613

nklayman · nklayman · commit dfde39cd1f0f · 2020-05-22T18:41:46.000-07:00
diff --git a/__tests__/commands.spec.js b/__tests__/commands.spec.js
@@ -391,6 +391,53 @@ describe('electron:build', () => {
       'customDist'
     )
   })
+
+  test('Preload file is bundled if set', async () => {
+    const mockRun = jest
+      .fn()
+      .mockImplementation((cb) => cb(undefined, { hasErrors: () => false }))
+    webpack.mockReturnValue({run: mockRun})
+    await runCommand('electron:build', {
+      pluginOptions: {
+        electronBuilder: {
+          preload: 'preloadFile'
+        }
+      }
+    })
+    // Both main process and preload file should have been built
+    expect(webpack).toBeCalledTimes(2)
+    const preloadWebpackCall = webpack.mock.calls[1][0]
+    expect(preloadWebpackCall.target).toBe('electron-preload')
+    expect(preloadWebpackCall.entry).toEqual({preload: ['projectPath/preloadFile']})
+    // Make sure preload bundle has been run
+    expect(mockRun).toHaveBeenCalledTimes(2)
+    webpack.mockClear()
+  })
+
+  test('Multiple preload files can be bundled', async () => {
+    const mockRun = jest
+      .fn()
+      .mockImplementation((cb) => cb(undefined, { hasErrors: () => false }))
+    webpack.mockReturnValue({run: mockRun})
+    await runCommand('electron:build', {
+      pluginOptions: {
+        electronBuilder: {
+          preload: {firstPreload: 'preload1', secondPreload: 'preload2'}
+        }
+      }
+    })
+    // Both main process and preload file should have been built
+    expect(webpack).toBeCalledTimes(2)
+    const preloadWebpackCall = webpack.mock.calls[1][0]
+    expect(preloadWebpackCall.target).toBe('electron-preload')
+    expect(preloadWebpackCall.entry).toEqual({
+      firstPreload: ['projectPath/preload1'],
+      secondPreload: ['projectPath/preload2']
+    })
+    // Make sure preload bundle has been run
+    expect(mockRun).toHaveBeenCalledTimes(2)
+    webpack.mockClear()
+  })
 })
 
 describe('electron:serve', () => {
@@ -557,7 +604,7 @@ describe('electron:serve', () => {
     })
 
     // Proper file is watched
-    expect(chokidar.watch.mock.calls[0][0]).toBe('projectPath/customBackground')
+    expect(chokidar.watch.mock.calls[0][0]).toEqual(['projectPath/customBackground'])
     // Child has not yet been killed or unwatched
     expect(mockExeca.send).not.toBeCalled()
     expect(mockExeca.kill).not.toBeCalled()
@@ -596,11 +643,13 @@ describe('electron:serve', () => {
     // So we can make sure it wasn't called
     jest.spyOn(process, 'exit')
     let watchCb = {}
-    chokidar.watch.mockImplementation(file => {
+    chokidar.watch.mockImplementation(files => {
       return {
         on: (type, cb) => {
-          // Set callback to be called later
-          watchCb[file] = cb
+          files.forEach(file => {
+            // Set callback to be called later
+            watchCb[file] = cb
+          })
         }
       }
     })
@@ -616,8 +665,7 @@ describe('electron:serve', () => {
     })
 
     // Proper file is watched
-    expect(chokidar.watch.mock.calls[0][0]).toBe('projectPath/customBackground')
-    expect(chokidar.watch.mock.calls[1][0]).toBe('projectPath/listFile')
+    expect(chokidar.watch.mock.calls[0][0]).toEqual(['projectPath/customBackground', 'projectPath/listFile'])
     // Child has not yet been killed or unwatched
     expect(mockExeca.send).not.toBeCalled()
     expect(mockExeca.kill).not.toBeCalled()
@@ -676,6 +724,20 @@ describe('electron:serve', () => {
     expect(execa).toHaveBeenCalledTimes(3)
   })
 
+  test('Preload file is watched for changes', async () => {
+    await runCommand('electron:serve', {
+      pluginOptions: {
+        electronBuilder: {
+          // Set preload file
+          preload: 'preloadFile'
+        }
+      }
+    })
+
+    // Proper file is watched
+    expect(chokidar.watch.mock.calls[0][0]).toContain('projectPath/preloadFile')
+  })
+
   test('Junk output is stripped from electron child process', async () => {
     await runCommand('electron:serve')
 
@@ -785,6 +847,53 @@ describe('electron:serve', () => {
     const args = execa.mock.calls[0][1]
     expect(args).toContain('--expected')
   })
+
+  test('Preload file is bundled if set', async () => {
+    const mockRun = jest
+      .fn()
+      .mockImplementation((cb) => cb(undefined, { hasErrors: () => false }))
+    webpack.mockReturnValue({run: mockRun})
+    await runCommand('electron:build', {
+      pluginOptions: {
+        electronBuilder: {
+          preload: 'preloadFile'
+        }
+      }
+    })
+    // Both main process and preload file should have been built
+    expect(webpack).toBeCalledTimes(2)
+    const preloadWebpackCall = webpack.mock.calls[1][0]
+    expect(preloadWebpackCall.target).toBe('electron-preload')
+    expect(preloadWebpackCall.entry).toEqual({preload: ['projectPath/preloadFile']})
+    // Make sure preload bundle has been run
+    expect(mockRun).toHaveBeenCalledTimes(2)
+    webpack.mockClear()
+  })
+
+  test('Multiple preload files can be bundled', async () => {
+    const mockRun = jest
+      .fn()
+      .mockImplementation((cb) => cb(undefined, { hasErrors: () => false }))
+    webpack.mockReturnValue({run: mockRun})
+    await runCommand('electron:build', {
+      pluginOptions: {
+        electronBuilder: {
+          preload: {firstPreload: 'preload1', secondPreload: 'preload2'}
+        }
+      }
+    })
+    // Both main process and preload file should have been built
+    expect(webpack).toBeCalledTimes(2)
+    const preloadWebpackCall = webpack.mock.calls[1][0]
+    expect(preloadWebpackCall.target).toBe('electron-preload')
+    expect(preloadWebpackCall.entry).toEqual({
+      firstPreload: ['projectPath/preload1'],
+      secondPreload: ['projectPath/preload2']
+    })
+    // Make sure preload bundle has been run
+    expect(mockRun).toHaveBeenCalledTimes(2)
+    webpack.mockClear()
+  })
 })
 
 describe('Custom webpack chain', () => {
diff --git a/docs/guide/guide.md b/docs/guide/guide.md
@@ -74,6 +74,37 @@ console.log(fileContents)
 </script>
 ```
 
+## Preload Files
+
+Preload files allow you to execute JS with [Node integration](/guide/configuration.html#node-integration) in the context of your Vue App (shared `window` variable). Create a preload file and update your `vue.config.js` as so:
+
+```js
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      preload: 'src/preload.js',
+      // Or, for multiple preload files:
+      preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
+    }
+  }
+}
+```
+
+Then, update the `new BrowserWindow` call in your main process file (`src/background.(js|ts)` by default) to include the preload option:
+
+```diff
+win = new BrowserWindow({
+  width: 800,
+  height: 600,
+  webPreferences: {
+    // Use pluginOptions.nodeIntegration, leave this alone
+    // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#node-integration for more info
+    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
++   preload: path.join(__dirname, 'preload.js')
+  }
+})
+```
+
 ## Folder Structure
 
 ```
diff --git a/index.js b/index.js
@@ -16,6 +16,7 @@ const {
 } = require('@vue/cli-shared-utils')
 const formatStats = require('@vue/cli-service/lib/commands/build/formatStats')
 const { chainWebpack, getExternals } = require('./lib/webpackConfig')
+const webpackMerge = require('webpack-merge')
 
 module.exports = (api, options) => {
   // If plugin options are provided in vue.config.js, those will be used. Otherwise it is empty object
@@ -162,7 +163,7 @@ module.exports = (api, options) => {
 
           if (bundleMainProcess) {
             //   Build the main process into the renderer process output dir
-            const bundle = bundleMain({
+            const { mainBundle, preloadBundle } = bundleMain({
               mode: 'build',
               api,
               args,
@@ -173,7 +174,7 @@ module.exports = (api, options) => {
               usesTypescript
             })
             logWithSpinner('Bundling main process...')
-            bundle.run((err, stats) => {
+            mainBundle.run((err, stats) => {
               stopSpinner(false)
               if (err) {
                 return reject(err)
@@ -188,7 +189,28 @@ module.exports = (api, options) => {
               )
               log(formatStats(stats, targetDirShort, api))
 
-              buildApp()
+              if (preloadBundle) {
+                logWithSpinner('Bundling preload files...')
+                preloadBundle.run((err, stats) => {
+                  stopSpinner(false)
+                  if (err) {
+                    return reject(err)
+                  }
+                  if (stats.hasErrors()) {
+                    // eslint-disable-next-line prefer-promise-reject-errors
+                    return reject(`Build failed with errors.`)
+                  }
+                  const targetDirShort = path.relative(
+                    api.service.context,
+                    `${outputDir}/bundled`
+                  )
+                  log(formatStats(stats, targetDirShort, api))
+
+                  buildApp()
+                })
+              } else {
+                buildApp()
+              }
             })
           } else {
             info(
@@ -240,9 +262,11 @@ module.exports = (api, options) => {
       // Use custom config for webpack
       process.env.IS_ELECTRON = true
       const execa = require('execa')
+      let preload = pluginOptions.preload || {}
       const mainProcessWatch = [
         mainProcessFile,
-        ...(pluginOptions.mainProcessWatch || [])
+        ...(pluginOptions.mainProcessWatch || []),
+        ...(typeof preload === 'string' ? [preload] : Object.values(preload))
       ]
       const mainProcessArgs = pluginOptions.mainProcessArgs || []
 
@@ -267,7 +291,7 @@ module.exports = (api, options) => {
         queuedBuilds++
         if (bundleMainProcess) {
           //   Build the main process
-          const bundle = bundleMain({
+          const { mainBundle, preloadBundle } = bundleMain({
             mode: 'serve',
             api,
             args,
@@ -279,7 +303,7 @@ module.exports = (api, options) => {
             server
           })
           logWithSpinner('Bundling main process...')
-          bundle.run((err, stats) => {
+          mainBundle.run((err, stats) => {
             stopSpinner(false)
             if (err) {
               throw err
@@ -290,7 +314,24 @@ module.exports = (api, options) => {
             }
             const targetDirShort = path.relative(api.service.context, outputDir)
             log(formatStats(stats, targetDirShort, api))
-            launchElectron()
+
+            if (preloadBundle) {
+              preloadBundle.run((err, stats) => {
+                stopSpinner(false)
+                if (err) {
+                  throw err
+                }
+                if (stats.hasErrors()) {
+                  error(`Build failed with errors.`)
+                  process.exit(1)
+                }
+                const targetDirShort = path.relative(api.service.context, outputDir)
+                log(formatStats(stats, targetDirShort, api))
+                launchElectron()
+              })
+            } else {
+              launchElectron()
+            }
           })
         } else {
           info(
@@ -342,13 +383,11 @@ module.exports = (api, options) => {
       startElectron()
       // Restart on main process file change
       const chokidar = require('chokidar')
-      mainProcessWatch.forEach(file => {
-        chokidar.watch(api.resolve(file)).on('all', () => {
-          // This function gets triggered on first launch
-          if (firstBundleCompleted) {
-            startElectron()
-          }
-        })
+      chokidar.watch(mainProcessWatch.map(file => api.resolve(file))).on('all', () => {
+        // This function gets triggered on first launch
+        if (firstBundleCompleted) {
+          startElectron()
+        }
       })
 
       // Attempt to kill gracefully on SIGINT and SIGTERM
@@ -529,7 +568,6 @@ function bundleMain({
   const config = new Config()
   config
     .mode(NODE_ENV)
-    .target('electron-main')
     .node.set('__dirname', false)
     .set('__filename', false)
   // Set externals
@@ -579,9 +617,7 @@ function bundleMain({
       }
     ])
   }
-  config
-    .entry(isBuild ? 'background' : 'index')
-    .add(api.resolve(mainProcessFile))
+
   const {
     transformer,
     formatter
@@ -606,7 +642,35 @@ function bundleMain({
       .options({ transpileOnly: !mainProcessTypeChecking })
   }
   mainProcessChain(config)
-  return webpack(config.toConfig())
+
+  // Create mainConfig and preloadConfig and set unique configuration
+  let mainConfig = new Config()
+  let preloadConfig = new Config()
+
+  mainConfig.target('electron-main')
+  mainConfig
+    .entry(isBuild ? 'background' : 'index')
+    .add(api.resolve(mainProcessFile))
+
+  preloadConfig.target('electron-preload')
+  let preload = pluginOptions.preload
+  if (preload) {
+    // Add preload files if they are set in pluginOptions
+    if (typeof preload === 'string') {
+      preload = { preload }
+    }
+    Object.keys(preload).forEach((k) => {
+      preloadConfig.entry(k).add(api.resolve(preload[k]))
+    })
+  }
+
+  mainConfig = webpackMerge(config.toConfig(), mainConfig.toConfig())
+  preloadConfig = webpackMerge(config.toConfig(), preloadConfig.toConfig())
+
+  return {
+    mainBundle: webpack(mainConfig),
+    preloadBundle: preload ? webpack(preloadConfig) : undefined
+  }
 }
 
 module.exports.defaultModes = {
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "unzip-crx": "^0.2.0",
     "webpack": "^4.18.0",
     "webpack-chain": "^6.0.0",
+    "webpack-merge": "^4.2.2",
     "yargs": "^14.0.0"
   },
   "devDependencies": {
