feat(generator): add support for electron v6

Author: nklayman

__tests__/generator.spec.js

@@ -33,13 +33,15 @@ beforeEach(() => {
   // Reset mock status
   jest.clearAllMocks()
 })
+const runGenerator = () =>
+  generator(mockApi, { electronBuilder: { electronVersion: '^5.0.0' } })
 
 describe('.gitignore', () => {
   test('extends gitignore if it exists', () => {
     // Mock existence of .gitignore
     fs.existsSync = jest.fn(path => path === 'apiResolve_./.gitignore')
     // Run the generator with mock api
-    generator(mockApi)
+    runGenerator()
     // Run the onCreateComplete callback
     completionCb()
     // New .gitignore should have been written
@@ -53,7 +55,7 @@ describe('.gitignore', () => {
     // Mock lack of .gitignore
     fs.existsSync = jest.fn(path => !(path === 'apiResolve_./.gitignore'))
     // Run the generator with mock api
-    generator(mockApi)
+    runGenerator()
     // Run the onCreateComplete callback
     completionCb()
     // New .gitignore should not have been read from or written
@@ -88,7 +90,7 @@ describe('.gitignore', () => {
       // Mock existence of .gitignore
       fs.existsSync = jest.fn(path => path === 'apiResolve_./.gitignore')
       // Run the generator with mock api
-      generator(mockApi)
+      runGenerator()
       // Run the onCreateComplete callback
       completionCb()
       // New .gitignore should not have been written
@@ -113,7 +115,7 @@ describe('background.js', () => {
       )
       // Mock existence of background file
       fs.existsSync.mockImplementation(path => path === `apiResolve_./${file}`)
-      generator(mockApi)
+      runGenerator()
       completionCb()
       expect(mockApi.render).not.toBeCalled()
     }
@@ -141,7 +143,7 @@ describe('background.js', () => {
       // return mock content
       return background
     })
-    generator(mockApi)
+    runGenerator()
     completionCb()
     expect(fs.writeFileSync).toBeCalledWith(
       'apiResolve_./src/background.ts',
@@ -152,7 +154,7 @@ describe('background.js', () => {
 
 describe.each(['postinstall', 'postuninstall'])('package.json (%s)', script => {
   test(`Adds electron-builder install-app-deps to ${script}`, () => {
-    generator(mockApi)
+    runGenerator()
     completionCb()
     expect(pkg.scripts[script]).toBe('electron-builder install-app-deps')
   })
@@ -169,7 +171,7 @@ describe.each(['postinstall', 'postuninstall'])('package.json (%s)', script => {
       return 'existing_content'
     })
 
-    generator(mockApi)
+    runGenerator()
     completionCb()
 
     expect(pkg.scripts[script]).toBe(
@@ -193,7 +195,7 @@ describe.each(['postinstall', 'postuninstall'])('package.json (%s)', script => {
       return 'existing_content'
     })
 
-    generator(mockApi)
+    runGenerator()
     completionCb()
 
     expect(pkg.scripts[script]).toBe(

generator/index.js

@@ -1,5 +1,6 @@
 const fs = require('fs')
 const semver = require('semver')
+const { warn } = require('@vue/cli-shared-utils')
 
 module.exports = (api, options = {}) => {
   if (!options.electronBuilder) options.electronBuilder = {}
@@ -11,14 +12,25 @@ module.exports = (api, options = {}) => {
     fs.existsSync(api.resolve(`./src/background.ts`)) ||
     fs.existsSync(api.resolve(`./src/background.js`))
 
+  const devtoolsExtensionsBroken = semver.gte(
+    (electronVersion || pkg.devDependencies.electron).replace('^', ''),
+    '6.0.0'
+  )
+  if (devtoolsExtensionsBroken) {
+    warn('Devtools extensions are broken in Electron 6.0.0 and greater')
+    warn(
+      'Vue Devtools have been disabled, see the comments in your background file for more info'
+    )
+  }
   if (!hasBackground) {
     // If user does not have a background file it should be created
     api.render('./templates/base', {
       // Scheme registration changed in Electron 5.0.0
       newSchemeRegistrationFunction: semver.gte(
         (electronVersion || pkg.devDependencies.electron).replace('^', ''),
         '5.0.0'
-      )
+      ),
+      devtoolsExtensionsBroken
     })
   }
   // Add tests

generator/templates/base/src/background.js

@@ -59,11 +59,22 @@ app.on('activate', () => {
 app.on('ready', async () => {
   if (isDevelopment && !process.env.IS_TEST) {
     // Install Vue Devtools
-    try {
-      await installVueDevtools()
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
-    }
+    <% if (devtoolsExtensionsBroken) { %>// Devtools extensions are broken in Electron 6.0.0 and greater
+    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
+    // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
+    // If you are not using Windows 10 dark mode, you may uncomment these lines
+    // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
+    // try {
+    //   await installVueDevtools()
+    // } catch (e) {
+    //   console.error('Vue Devtools failed to install:', e.toString())
+    // }
+<% } else { %>try {
+  await installVueDevtools()
+} catch (e) {
+  console.error('Vue Devtools failed to install:', e.toString())
+}
+<% } %>
   }
   createWindow()
 })

prompts.js

@@ -5,13 +5,8 @@ module.exports = [
     name: 'electronBuilder.electronVersion',
     type: 'list',
     message: 'Choose Electron Version',
-    default: '^5.0.0',
+    default: '^6.0.0',
     choices: [
-      {
-        name: '^3.0.0',
-        value: '^3.0.0',
-        short: '^3.0.0'
-      },
       {
         name: '^4.0.0',
         value: '^4.0.0',
@@ -21,6 +16,11 @@ module.exports = [
         name: '^5.0.0',
         value: '^5.0.0',
         short: '^5.0.0'
+      },
+      {
+        name: '^6.0.0',
+        value: '^6.0.0',
+        short: '^6.0.0'
       }
     ],
     when: () => {