fix(serve): Kill Electron process gracefully during development (#110)

I refactored the code to give 2 seconds to the child process to handle exiting by itself when we restart it, on SIGINT/SIGTERM and when Ctrl+C is used on Windows.

Fixes #108

Author: Desuuuu

__tests__/commands.spec.js

@@ -11,6 +11,7 @@ const { chainWebpack } = require('../lib/webpackConfig')
 // #endregion
 
 // #region Mocks
+process.env.IS_TEST = true
 const mockYargsParse = jest.fn()
 const mockYargsCommand = jest.fn(() => ({ parse: mockYargsParse }))
 jest.mock('yargs', () => ({ command: mockYargsCommand }))
@@ -25,10 +26,14 @@ jest.mock('electron-builder/out/cli/install-app-deps.js', () => ({
 }))
 jest.mock('../lib/webpackConfig.js')
 const mockPipe = jest.fn()
+const childEvents = {}
 const mockExeca = {
-  on: jest.fn(),
+  on: jest.fn((eventName, cb) => {
+    childEvents[eventName] = cb
+  }),
   removeAllListeners: jest.fn(),
   kill: jest.fn(),
+  send: jest.fn(),
   stdout: {
     pipe: jest.fn(() => ({ pipe: mockPipe }))
   },
@@ -384,6 +389,7 @@ describe('electron:serve', () => {
 
     // Mock change of background file
     watchCb()
+    childEvents.exit()
 
     expect(execa).toHaveBeenCalledTimes(2)
     expect(execa.mock.calls[0][1]).toEqual([
@@ -442,17 +448,18 @@ describe('electron:serve', () => {
     // Proper file is watched
     expect(fs.watchFile.mock.calls[0][0]).toBe('projectPath/customBackground')
     // Child has not yet been killed or unwatched
-    expect(mockExeca.kill).not.toBeCalled()
+    expect(mockExeca.send).not.toBeCalled()
     expect(mockExeca.removeAllListeners).not.toBeCalled()
     // Main process was bundled and Electron was launched initially
     expect(webpack).toHaveBeenCalledTimes(1)
     expect(execa).toHaveBeenCalledTimes(1)
 
     // Mock change of background file
     watchCb()
+    childEvents.exit()
     // Electron was killed and listeners removed
-    expect(mockExeca.kill).toHaveBeenCalledTimes(1)
-    expect(mockExeca.removeAllListeners).toHaveBeenCalledTimes(1)
+    expect(mockExeca.send).toHaveBeenCalledTimes(1)
+    expect(mockExeca.send).toHaveBeenCalledWith('graceful-exit')
     // Process did not exit on Electron close
     expect(process.exit).not.toBeCalled()
     // Main process file was recompiled
@@ -484,17 +491,18 @@ describe('electron:serve', () => {
     expect(fs.watchFile.mock.calls[0][0]).toBe('projectPath/customBackground')
     expect(fs.watchFile.mock.calls[1][0]).toBe('projectPath/listFile')
     // Child has not yet been killed or unwatched
-    expect(mockExeca.kill).not.toBeCalled()
+    expect(mockExeca.send).not.toBeCalled()
     expect(mockExeca.removeAllListeners).not.toBeCalled()
     // Main process was bundled and Electron was launched initially
     expect(webpack).toHaveBeenCalledTimes(1)
     expect(execa).toHaveBeenCalledTimes(1)
 
     // Mock change of listed file
     watchCb['projectPath/listFile']()
+    childEvents.exit()
     // Electron was killed and listeners removed
-    expect(mockExeca.kill).toHaveBeenCalledTimes(1)
-    expect(mockExeca.removeAllListeners).toHaveBeenCalledTimes(1)
+    expect(mockExeca.send).toHaveBeenCalledTimes(1)
+    expect(mockExeca.send).toHaveBeenCalledWith('graceful-exit')
     // Process did not exit on Electron close
     expect(process.exit).not.toBeCalled()
     // Main process file was recompiled
@@ -504,9 +512,10 @@ describe('electron:serve', () => {
 
     // Mock change of background file
     watchCb['projectPath/customBackground']()
+    childEvents.exit()
     // Electron was killed and listeners removed
-    expect(mockExeca.kill).toHaveBeenCalledTimes(2)
-    expect(mockExeca.removeAllListeners).toHaveBeenCalledTimes(2)
+    expect(mockExeca.send).toHaveBeenCalledTimes(2)
+    expect(mockExeca.send).toHaveBeenCalledWith('graceful-exit')
     // Process did not exit on Electron close
     expect(process.exit).not.toBeCalled()
     // Main process file was recompiled

generator/template/src/background.js

@@ -59,3 +59,12 @@ app.on('ready', async () => {
   }
   createWindow()
 })
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  process.on('message', data => {
+    if (data === 'graceful-exit') {
+      app.quit()
+    }
+  })
+}

index.js

@@ -4,6 +4,7 @@ const Config = require('webpack-chain')
 const merge = require('lodash.merge')
 const fs = require('fs-extra')
 const path = require('path')
+const readline = require('readline')
 const {
   log,
   done,
@@ -216,17 +217,9 @@ module.exports = (api, options) => {
 
       // Copy package.json so electron can detect app's name
       fs.copySync(api.resolve('./package.json'), `${outputDir}/package.json`)
-      // Electron process
-      let child
+
       // Function to bundle main process and start Electron
       const startElectron = () => {
-        if (child) {
-          // Prevent self exit on Electron process death
-          child.removeAllListeners()
-          // Kill old Electron process
-          child.kill()
-        }
-
         if (bundleMainProcess) {
           //   Build the main process
           const bundle = bundleMain({
@@ -266,13 +259,74 @@ module.exports = (api, options) => {
           launchElectron()
         }
       }
+
+      // Electron process
+      let child
+      // Auto restart flag
+      let childRestartOnExit = 0
+      // Graceful exit timeout
+      let childExitTimeout
+      // Function to kill Electron process
+      const killElectron = () => {
+        if (!child) {
+          return
+        }
+
+        // Attempt to kill gracefully
+        child.send('graceful-exit')
+
+        // Kill after 2 seconds if unsuccessful
+        childExitTimeout = setTimeout(() => {
+          if (child) {
+            child.kill()
+          }
+        }, 2000)
+      }
+
       // Initial start of Electron
       startElectron()
       // Restart on main process file change
       mainProcessWatch.forEach(file => {
-        fs.watchFile(api.resolve(file), startElectron)
+        fs.watchFile(api.resolve(file), () => {
+          // Never restart after SIGINT
+          if (childRestartOnExit < 0) {
+            return
+          }
+
+          // Set auto restart flag
+          childRestartOnExit = 1
+
+          killElectron()
+        })
       })
 
+      // Attempt to kill gracefully on SIGINT and SIGTERM
+      const signalHandler = () => {
+        if (!child) {
+          process.exit(0)
+        }
+
+        // Prevent future restarts
+        childRestartOnExit = -1
+
+        killElectron()
+      }
+
+      if (!process.env.IS_TEST) process.on('SIGINT', signalHandler)
+      if (!process.env.IS_TEST) process.on('SIGTERM', signalHandler)
+
+      // Handle Ctrl+C on Windows
+      if (process.platform === 'win32' && !process.env.IS_TEST) {
+        readline
+          .createInterface({
+            input: process.stdin,
+            output: process.stdout
+          })
+          .on('SIGINT', () => {
+            process.emit('SIGINT')
+          })
+      }
+
       function launchElectron () {
         if (args.debug) {
           console.log(info)
@@ -302,6 +356,10 @@ module.exports = (api, options) => {
           } else {
             info('Launching Electron...')
           }
+
+          // Disable Electron process auto restart
+          childRestartOnExit = 0
+
           child = execa(
             require('electron'),
             [
@@ -316,7 +374,8 @@ module.exports = (api, options) => {
                 ...process.env,
                 // Disable electron security warnings
                 ELECTRON_DISABLE_SECURITY_WARNINGS: true
-              }
+              },
+              stdio: [null, null, null, 'ipc']
             }
           )
 
@@ -335,8 +394,18 @@ module.exports = (api, options) => {
           }
 
           child.on('exit', () => {
-            //   Exit when electron is closed
-            process.exit(0)
+            child = null
+
+            if (childExitTimeout) {
+              clearTimeout(childExitTimeout)
+              childExitTimeout = null
+            }
+
+            if (childRestartOnExit > 0) {
+              startElectron()
+            } else {
+              process.exit(0)
+            }
           })
         }
       }