add support for custom Vue modes

Author: nklayman

__tests__/commands.spec.js

@@ -170,6 +170,26 @@ describe('build:electron', () => {
       'projectPath/dist_electron/bundled/css/fonts'
     )
   })
+
+  test('--mode argument takes precedence over other options', async () => {
+    await runCommand(
+      'build:electron',
+      { pluginOptions: { electronBuilder: { buildMode: 'production' } } },
+      { headless: true, mode: 'development' }
+    )
+
+    // Development mode is used
+    expect(buildRenderer.mock.calls[0][0].mode).toBe('development')
+  })
+
+  test('buildMode sets Vue mode if provided', async () => {
+    await runCommand('build:electron', {
+      pluginOptions: { electronBuilder: { buildMode: 'development' } }
+    })
+
+    // Development mode is used
+    expect(buildRenderer.mock.calls[0][0].mode).toBe('development')
+  })
 })
 
 describe('serve:electron', () => {
@@ -269,21 +289,40 @@ describe('serve:electron', () => {
     // Electron is not launched
     expect(execa).not.toBeCalled()
   })
-  test('If --healdess argument is passed, serve:electron is launched in production mode', async () => {
-    await runCommand('serve:electron', {}, { headless: true })
+  test('If --headless argument is passed, serve:electron is launched in production mode', async () => {
+    await runCommand(
+      'serve:electron',
+      {
+        // It should take precedence over plugin options
+        pluginOptions: { electronBuilder: { serveMode: 'production' } }
+      },
+      { headless: true }
+    )
 
     // Production mode is used
     expect(serve.mock.calls[0][0].mode).toBe('production')
     // Electron is not launched
     expect(execa).not.toBeCalled()
   })
-  test('If --forceDev argument is passed, serve:electron is launched in dev mode', async () => {
-    await runCommand('serve:electron', {}, { headless: true, forceDev: true })
 
-    // Production mode is used
+  test('--mode argument takes precedence over other options', async () => {
+    await runCommand(
+      'serve:electron',
+      { pluginOptions: { electronBuilder: { serveMode: 'production' } } },
+      { headless: true, mode: 'development' }
+    )
+
+    // Development mode is used
     expect(serve.mock.calls[0][0].mode).toBe('development')
-    // Electron is not launched
-    expect(execa).not.toBeCalled()
+  })
+
+  test('serveMode sets Vue mode if provided', async () => {
+    await runCommand('serve:electron', {
+      pluginOptions: { electronBuilder: { serveMode: 'production' } }
+    })
+
+    // Development mode is used
+    expect(serve.mock.calls[0][0].mode).toBe('production')
   })
 })
 
@@ -349,7 +388,11 @@ describe('testWithSpectron', async () => {
   })
   test('launches dev server in dev mode if forceDev argument is provided', async () => {
     await runSpectron({ forceDev: true })
-    expect(execa.mock.calls[0][1]).toContain('--forceDev')
+
+    // Mode argument was set to development
+    expect(
+      execa.mock.calls[0][1].join(' ').indexOf('--mode development')
+    ).not.toBe(-1)
   })
   test('returns stdout of command', async () => {
     const { stdout } = await runSpectron({}, { customLog: 'shouldBeInLog' })

index.js

@@ -36,6 +36,7 @@ module.exports = (api, options) => {
       const buildRenderer = require('@vue/cli-service/lib/commands/build').build
       const fs = require('fs-extra')
       const builder = require('electron-builder')
+      const mode = args.mode || pluginOptions.buildMode
       const yargs = require('yargs')
       //   Import the yargs options from electron-builder
       const configureBuildCommand = require('electron-builder/out/builder')
@@ -76,7 +77,9 @@ module.exports = (api, options) => {
         // Make sure files are outputted to proper directory
         dest: outputDir + '/bundled',
         // Enable modern mode
-        modern: true
+        modern: true,
+        // Apply mode if provided
+        ...(mode ? { mode } : {})
       }
       const mainConfig = new Config()
       //   Configure main process webpack config
@@ -191,6 +194,12 @@ module.exports = (api, options) => {
     args => {
       const execa = require('execa')
       const serve = require('@vue/cli-service/lib/commands/serve').serve
+      // --mode > headless > pluginOptions > defaults
+      const mode =
+        args.mode ||
+        (args.headless ? 'production' : null) ||
+        pluginOptions.serveMode
+      console.log(mode)
       const rendererConfig = api.resolveChainableWebpackConfig()
       //   Configure renderer process to work properly with electron
       rendererConfig
@@ -248,8 +257,8 @@ module.exports = (api, options) => {
           _: [],
           // Use dashboard if called from ui
           dashboard: args.dashboard,
-          // Serve in development mode if launched in headless mode
-          mode: args.headless && !args.forceDev ? 'production' : 'development'
+          // Apply mode if provided
+          ...(mode ? { mode } : {})
         },
         api,
         options,

lib/testWithSpectron.js

@@ -13,7 +13,11 @@ module.exports = (options = {}) =>
     // Launch serve:electron in headless mode
     const child = execa(
       require.resolve('@vue/cli-service/bin/vue-cli-service'),
-      ['serve:electron', '--headless', options.forceDev ? '--forceDev' : 'true']
+      [
+        'serve:electron',
+        '--headless',
+        ...(options.forceDev ? ['--mode', 'development'] : [])
+      ]
     )
     // Exit if serve:electron throws an error
     child.on('error', err => {