Update with-electron example (#4386)

Electron recommends to disable nodeIntegration in BrowserViews.
This PR follows this recommendation and updates the example accordingly.

 Changes:

- disable nodeIntegration
- update dependencies

examples/with-electron/main/index.js

@@ -13,7 +13,11 @@ app.on('ready', async () => {
 
   const mainWindow = new BrowserWindow({
     width: 800,
-    height: 600
+    height: 600,
+    webPreferences: {
+      nodeIntegration: false,
+      preload: join(__dirname, 'preload.js')
+    }
   })
 
   const url = isDev

examples/with-electron/main/preload.js

@@ -0,0 +1,7 @@
+const { ipcRenderer } = require('electron')
+
+// Since we disabled nodeIntegration we can reintroduce
+// needed node functionality here
+process.once('loaded', () => {
+  global.ipcRenderer = ipcRenderer
+})

examples/with-electron/package.json

@@ -18,14 +18,14 @@
     ]
   },
   "devDependencies": {
-    "electron": "^1.6.11",
-    "electron-builder": "^19.19.1",
+    "electron": "^2.0.0",
+    "electron-builder": "^20.13.4",
     "next": "latest",
     "react": "^16.1.1",
     "react-dom": "^16.1.1"
   },
   "dependencies": {
     "electron-is-dev": "0.3.0",
-    "electron-next": "3.0.8"
+    "electron-next": "3.1.4"
   }
 }

examples/with-electron/renderer/next.config.js

@@ -1,8 +1,4 @@
 module.exports = {
-  webpack (config, { dev }) {
-    config.target = 'electron-renderer'
-    return config
-  },
   exportPathMap () {
     // Let Next.js know where to find the entry page
     // when it's exporting the static bundle for the use

examples/with-electron/renderer/pages/start.js

@@ -1,5 +1,4 @@
 import { Component } from 'react'
-import { ipcRenderer } from 'electron'
 
 export default class extends Component {
   state = {
@@ -9,12 +8,12 @@ export default class extends Component {
 
   componentDidMount () {
     // start listening the channel message
-    ipcRenderer.on('message', this.handleMessage)
+    global.ipcRenderer.on('message', this.handleMessage)
   }
 
   componentWillUnmount () {
     // stop listening the channel message
-    ipcRenderer.removeListener('message', this.handleMessage)
+    global.ipcRenderer.removeListener('message', this.handleMessage)
   }
 
   handleMessage = (event, message) => {
@@ -28,7 +27,7 @@ export default class extends Component {
 
   handleSubmit = event => {
     event.preventDefault()
-    ipcRenderer.send('message', this.state.input)
+    global.ipcRenderer.send('message', this.state.input)
     this.setState({ message: null })
   }