feat(build/serve): Remove need for custom vue-cli-service

Author: nklayman

__tests__/commands.spec.js

@@ -3,13 +3,10 @@ const testWithSpectron = pluginIndex.testWithSpectron
 const Config = require('webpack-chain')
 const webpack = require('webpack')
 const builder = require('electron-builder')
-const buildRenderer = require('@vue/cli-service/lib/commands/build').build
-const serve = require('@vue/cli-service/lib/commands/serve').serve
 const fs = require('fs-extra')
 const execa = require('execa')
 const portfinder = require('portfinder')
 const Application = require('spectron').Application
-// const {command} = require('yargs')
 const mockYargsParse = jest.fn()
 const mockYargsCommand = jest.fn(() => ({ parse: mockYargsParse }))
 jest.mock('yargs', () => ({ command: mockYargsCommand }))
@@ -34,6 +31,13 @@ jest.mock('spectron', () => ({
     client: { waitUntilWindowLoaded: mockWait }
   }))
 }))
+const chainWebpack = jest.fn()
+const serviceRun = jest.fn(
+  () =>
+    new Promise(resolve => {
+      resolve({ url: 'serveUrl' })
+    })
+)
 console.log = jest.fn()
 
 beforeEach(() => {
@@ -54,7 +58,11 @@ const runCommand = async (command, options = {}, args = {}, rawArgs = []) => {
     registerCommand: jest.fn().mockImplementation((name, options, command) => {
       commands[name] = command
     }),
-    resolve: jest.fn(path => 'projectPath/' + path)
+    resolve: jest.fn(path => 'projectPath/' + path),
+    chainWebpack,
+    service: {
+      run: serviceRun
+    }
   }
   pluginIndex(api, options)
 
@@ -110,8 +118,8 @@ describe('build:electron', () => {
     const mainConfig = webpack.mock.calls[0][0]
     //   Main config output is correct
     expect(mainConfig.output.path).toBe('projectPath/output/bundled')
-    //   Render build output is correct
-    expect(buildRenderer.mock.calls[0][0].dest).toBe('output/bundled')
+
+    expect(serviceRun.mock.calls[0][1].dest).toBe('output/bundled')
     //   Electron-builder output is correct
     expect(builder.build.mock.calls[0][0].config.directories.output).toBe(
       'output'
@@ -145,12 +153,13 @@ describe('build:electron', () => {
         }
       }
     })
-    const rendererConfig = buildRenderer.mock.calls[0][3].toConfig()
+    const config = new Config()
+    chainWebpack.mock.calls[0][0](config)
     // Custom node key is passed through
-    expect(rendererConfig.node.test).toBe('expected')
+    expect(config.toConfig().node.test).toBe('expected')
   })
 
-  test('Custom main process webpack config is used if provided', async () => {
+  test('Custom Electron Builder config is used if provided', async () => {
     await runCommand('build:electron', {
       pluginOptions: {
         electronBuilder: {
@@ -304,9 +313,10 @@ describe('serve:electron', () => {
         }
       }
     })
-    const rendererConfig = serve.mock.calls[0][3].toConfig()
+    const config = new Config()
+    chainWebpack.mock.calls[0][0](config)
     // Custom node key is passed through
-    expect(rendererConfig.node.test).toBe('expected')
+    expect(config.toConfig().node.test).toBe('expected')
   })
 
   test('If --debug argument is passed, electron is not launched, main process is not minified, and source maps are enabled', async () => {

docs/guide/configuration.md

@@ -14,13 +14,13 @@ They can be placed under the `builderOptions` key in vue-cli-plugin-electron-bui
 // vue.config.js
 
 module.exports = {
-    pluginOptions: {
-        electronBuilder: {
-            builderOptions: {
-                // options placed here will be merged with default configuration and passed to electron-builder
-            }
-        }
+  pluginOptions: {
+    electronBuilder: {
+      builderOptions: {
+        // options placed here will be merged with default configuration and passed to electron-builder
+      }
     }
+  }
 }
 ```
 
@@ -30,39 +30,37 @@ All CLI arguments passed to `build:electron` will be forwarded to electron-build
 
 ## Webpack configuration
 
-Your regular config is used for bundling the renderer process (your app). To modify the webpack config for the electron main process only, use the `chainWebpackMainProcess` function under vue-cli-plugin-electron-builder's plugin options in `vue.config.js`. Use `chainWebpackRendererProcess` customize your app's webpack config for Electron builds only. To learn more about webpack chaining, see [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain). The function should take a config argument, modify it through webpack-chain, and then return it.
+Your regular config is extended and used for bundling the renderer process (your app). To modify your webpack config for Electron builds only, use the `chainWebpackRendererProcess` function. To modify the webpack config for the [Electron main process](https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes) only, use the `chainWebpackMainProcess` function under VCP Electron Builder's plugin options in `vue.config.js`. To learn more about webpack chaining, see [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain). These functions work similarly to the [`chainWebpack`](https://cli.vuejs.org/config/#chainwebpack) option provided by Vue CLI.
 
 **Note: Do NOT change the webpack output directory for the main process! See changing output directory below for more info. To change the entry point for the main process, use the `mainProcessFile` key, DO NOT modify it in through chaining.**
 
 ```javascript
 // vue.config.js
 
 module.exports = {
-    configureWebpack: {
-        // Configuration applied to all builds
-    },
-    pluginOptions: {
-        electronBuilder: {
-            chainWebpackMainProcess: config => {
-                // Chain webpack config for electron main process only
-            },
-            chainWebpackRendererProcess: config => {
-                // Chain webpack config for electron renderer process only
-                // The following example will set IS_ELECTRON to true in your app
-                config.plugin('define').tap(args => {
-                    args[0]['IS_ELECTRON'] = true
-                    return args
-                })
-                // If you do not return the config property, your app may break!
-                return config
-            },
-            // Use this to change the entrypoint of your app's main process
-            mainProcessFile: 'src/myBackgroundFile.js',
-            // Provide an array of files that, when changed, will recompile the main process and restart Electron
-            // Your main process file will be added by default
-            mainProcessWatch: ['src/myFile1', 'src/myFile2']
-        }
+  configureWebpack: {
+    // Configuration applied to all builds
+  },
+  pluginOptions: {
+    electronBuilder: {
+      chainWebpackMainProcess: config => {
+        // Chain webpack config for electron main process only
+      },
+      chainWebpackRendererProcess: config => {
+        // Chain webpack config for electron renderer process only
+        // The following example will set IS_ELECTRON to true in your app
+        config.plugin('define').tap(args => {
+          args[0]['IS_ELECTRON'] = true
+          return args
+        })
+      },
+      // Use this to change the entrypoint of your app's main process
+      mainProcessFile: 'src/myBackgroundFile.js',
+      // Provide an array of files that, when changed, will recompile the main process and restart Electron
+      // Your main process file will be added by default
+      mainProcessWatch: ['src/myFile1', 'src/myFile2']
     }
+  }
 }
 ```
 
@@ -76,11 +74,11 @@ If you don't want your files outputted into dist_electron, you can choose a cust
 // vue.config.js
 
 module.exports = {
-    pluginOptions: {
-        electronBuilder: {
-            outputDir: 'electron-builder-output-dir'
-        }
+  pluginOptions: {
+    electronBuilder: {
+      outputDir: 'electron-builder-output-dir'
     }
+  }
 }
 ```
 
@@ -92,13 +90,13 @@ Typescript support is automatic and requires no configuration, just add the `@vu
 // vue.config.js
 
 module.exports = {
-    pluginOptions: {
-        electronBuilder: {
-            // option: default // description
-            disableMainProcessTypescript: false, // Manually disable typescript plugin for main process. Enable if you want to use regular js for the main process (src/background.js by default).
-            mainProcessTypeChecking: false // Manually enable type checking during webpck bundling for background file.
-        }
+  pluginOptions: {
+    electronBuilder: {
+      // option: default // description
+      disableMainProcessTypescript: false, // Manually disable typescript plugin for main process. Enable if you want to use regular js for the main process (src/background.js by default).
+      mainProcessTypeChecking: false // Manually enable type checking during webpck bundling for background file.
     }
+  }
 }
 ```
 

docs/guide/guide.md

@@ -10,8 +10,8 @@ sidebarDepth: 2
 
 In the renderer process, static assets work similarly to a regular app. Read Vue CLI's documentation [here](https://cli.vuejs.org/guide/html-and-static-assets.html) before continuing. However, there are a few changes made:
 
--   The `__static` global variable is added. It provides a path to your public directory in both development and production. Use this to read/write files in your app's public directory.
--   In production, the `process.env.BASE_URL` is replaced with the path to your app's files.
+- The `__static` global variable is added. It provides a path to your public directory in both development and production. Use this to read/write files in your app's public directory.
+- In production, the `process.env.BASE_URL` is replaced with the path to your app's files.
 
 **Note: `__static` is not available in regular build/serve. It should only be used in electron to read/write files on disk. To import a file (img, script, etc...) and not have it be transpiled by webpack, use the `process.env.BASE_URL` instead.**
 
@@ -61,6 +61,30 @@ console.log(fileContents)
 ├── ...
 ```
 
+## Using Native Dependencies
+
+To use native deps in Electron, you will need to find the path to the main file (`.node`) relative to `node_modules` for that dep. Once you have found it, set `vue.config.js` (replace `YOUR_DEP` with the name of the native dep and `YOUR_DEP_PATH` with the path to the main file) to:
+
+```javascript
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      chainWebpackRendererProcess: config => {
+        config.module
+          .rule('node-loader')
+          .test(/\.node$/)
+          .use('node')
+          .loader('node-loader')
+        config.resolve.alias.set('YOUR_DEP', 'YOUR_DEP_PATH')
+        return config
+      }
+    }
+  }
+}
+```
+
+For example, if you were using SQlite3, `YOUR_DEP_PATH` would be `sqlite3/lib/binding/electron-v2.0-YOUR_PLATFORM_HERE-x64/node_sqlite3.node`
+
 ## How it works
 
 ### Build command

docs/guide/testingAndDebugging.md

@@ -34,15 +34,15 @@ vue-cli-plugin-electron-builder exports a `testWithSpectron` function. This func
 const { testWithSpectron } = require('vue-cli-plugin-electron-builder')
 
 test('a window is created', async () => {
-    const { stdout, url, stopServe, app } = await testWithSpectron()
-    // stdout is the log of serve:electron
-    console.log(`serve:electron returned: ${stdout}`)
-    // url is the url for the dev server created with serve:electron
-    console.log(`the dev server url is: ${url}`)
-    // app is a spectron instance. It is attached to the dev server, launched, and waited for to load.
-    expect(await app.client.getWindowCount()).toBe(1)
-    // Before your tests end, make sure to stop the dev server and spectron
-    await stopServe()
+  const { stdout, url, stopServe, app } = await testWithSpectron()
+  // stdout is the log of serve:electron
+  console.log(`serve:electron returned: ${stdout}`)
+  // url is the url for the dev server created with serve:electron
+  console.log(`the dev server url is: ${url}`)
+  // app is a spectron instance. It is attached to the dev server, launched, and waited for to load.
+  expect(await app.client.getWindowCount()).toBe(1)
+  // Before your tests end, make sure to stop the dev server and spectron
+  await stopServe()
 })
 ```