docs: remove references to remote from docs (#25416)

docs/fiddles/windows/manage-windows/create-frameless-window/main.js

@@ -1,23 +1,20 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron')
 
-let mainWindow = null
+ipcMain.on('create-frameless-window', (event, {url}) => {
+  const win = new BrowserWindow({ frame: false })
+  win.loadURL(url)
+})
 
 function createWindow () {
-  const windowOptions = {
+  const mainWindow = new BrowserWindow({
     width: 600,
     height: 400,
     title: 'Create a frameless window',
     webPreferences: {
       nodeIntegration: true
     }
-  }
-
-  mainWindow = new BrowserWindow(windowOptions)
-  mainWindow.loadFile('index.html')
-
-  mainWindow.on('closed', () => {
-    mainWindow = null
   })
+  mainWindow.loadFile('index.html')
 }
 
 app.whenReady().then(() => {

docs/fiddles/windows/manage-windows/create-frameless-window/renderer.js

@@ -1,12 +1,8 @@
-const { BrowserWindow } = require('electron').remote
+const { ipcRenderer } = require('electron')
 
 const newWindowBtn = document.getElementById('frameless-window')
 
-newWindowBtn.addEventListener('click', (event) => {
-  let win = new BrowserWindow({ frame: false })
-
-  win.on('close', () => { win = null })
-
-  win.loadURL('data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>')
-  win.show()
+newWindowBtn.addEventListener('click', () => {
+  const url = 'data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>'
+  ipcRenderer.send('create-frameless-window', { url })
 })

docs/fiddles/windows/manage-windows/frameless-window/main.js

@@ -1,13 +1,14 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow } = require('electron')
 
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
+ipcMain.on('create-frameless-window', (event, {url}) => {
+  const win = new BrowserWindow({ frame: false })
+  win.loadURL(url)
+})
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({
+  const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
@@ -17,17 +18,6 @@ function createWindow () {
 
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/windows/manage-windows/frameless-window/renderer.js

@@ -1,25 +1,8 @@
-const { BrowserWindow } = require('electron').remote
-const shell = require('electron').shell
+const { ipcRenderer } = require('electron')
 
-const framelessWindowBtn = document.getElementById('frameless-window')
+const newWindowBtn = document.getElementById('frameless-window')
 
-const links = document.querySelectorAll('a[href]')
-
-framelessWindowBtn.addEventListener('click', (event) => {
-  const modalPath = 'https://electronjs.org'
-  let win = new BrowserWindow({ frame: false })
-
-  win.on('close', () => { win = null })
-  win.loadURL(modalPath)
-  win.show()
-})
-
-Array.prototype.forEach.call(links, (link) => {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
+newWindowBtn.addEventListener('click', () => {
+  const url = 'data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>'
+  ipcRenderer.send('create-frameless-window', { url })
 })

docs/fiddles/windows/manage-windows/manage-window-state/main.js

@@ -1,9 +1,20 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron')
 
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
+ipcMain.on('create-demo-window', (event) => {
+  const win = new BrowserWindow({ width: 400, height: 275 })
+
+  function updateReply() {
+    event.sender.send('bounds-changed', {
+      size: win.getSize(),
+      position: win.getPosition()
+    })
+  }
+
+  win.on('resize', updateReply)
+  win.on('move', updateReply)
+  win.loadURL('https://electronjs.org')
+})
 
 function createWindow () {
   // Create the browser window.
@@ -17,17 +28,6 @@ function createWindow () {
 
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/windows/manage-windows/manage-window-state/renderer.js

@@ -1,27 +1,17 @@
-const { BrowserWindow } = require('electron').remote
-const shell = require('electron').shell
+const { shell, ipcRenderer } = require('electron')
 
 const manageWindowBtn = document.getElementById('manage-window')
 
 const links = document.querySelectorAll('a[href]')
 
-let win
+ipcRenderer.on('bounds-changed', (event, bounds) => {
+  const manageWindowReply = document.getElementById('manage-window-reply')
+  const message = `Size: ${bounds.size} Position: ${bounds.position}`
+  manageWindowReply.textContent = message
+})
 
 manageWindowBtn.addEventListener('click', (event) => {
-  const modalPath = 'https://electronjs.org'
-  win = new BrowserWindow({ width: 400, height: 275 })
-
-  win.on('resize', updateReply)
-  win.on('move', updateReply)
-  win.on('close', () => { win = null })
-  win.loadURL(modalPath)
-  win.show()
-
-  function updateReply () {
-    const manageWindowReply = document.getElementById('manage-window-reply')
-    const message = `Size: ${win.getSize()} Position: ${win.getPosition()}`
-    manageWindowReply.innerText = message
-  }
+  ipcRenderer.send('create-demo-window')
 })
 
 Array.prototype.forEach.call(links, (link) => {

docs/fiddles/windows/manage-windows/new-window/index.html

@@ -7,7 +7,7 @@
   <h2>Create a new window</h2>
   <h3>Supports: Win, macOS, Linux <span>|</span> Process: Main</h3>
   <button id="new-window">View Demo</button>
-  <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app. This main process module can be used from the renderer process with the <code>remote</code> module, as is shown in this demo.</p>
+  <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app.</p>
   <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a id="browser-window-link" href="">documentation<span>(opens in new window)</span></a>
 <div>
             <h2>ProTip</h2>

docs/fiddles/windows/manage-windows/new-window/main.js

@@ -1,13 +1,14 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron')
 
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
+ipcMain.on('new-window', (event, { url, width, height }) => {
+  const win = new BrowserWindow({ width, height })
+  win.loadURL(url)
+})
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({
+  const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
@@ -17,17 +18,6 @@ function createWindow () {
 
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/windows/manage-windows/new-window/renderer.js

@@ -1,16 +1,11 @@
-const { BrowserWindow } = require('electron').remote
-const { shell } = require('electron').remote
+const { shell, ipcRenderer } = require('electron')
 
 const newWindowBtn = document.getElementById('new-window')
 const link = document.getElementById('browser-window-link')
 
 newWindowBtn.addEventListener('click', (event) => {
-
-  let win = new BrowserWindow({ width: 400, height: 320 })
-
-  win.on('close', () => { win = null })
-  win.loadURL('https://electronjs.org')
-  win.show()
+  const url = 'https://electronjs.org'
+  ipcRenderer.send('new-window', { url, width: 400, height: 320 });
 })
 
 link.addEventListener('click', (e) => {

docs/fiddles/windows/manage-windows/window-events/main.js

@@ -1,13 +1,9 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
+const { app, BrowserWindow, ipcMain } = require('electron')
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({
+  const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
@@ -18,15 +14,27 @@ function createWindow () {
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
 
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
+  let demoWindow
+  ipcMain.on('show-demo-window', () => {
+    if (demoWindow) {
+      demoWindow.focus()
+      return
+    }
+    demoWindow = new BrowserWindow({ width: 600, height: 400 })
+    demoWindow.loadURL('https://electronjs.org')
+    demoWindow.on('close', () => {
+      mainWindow.webContents.send('window-close')
+    })
+    demoWindow.on('focus', () => {
+      mainWindow.webContents.send('window-focus')
+    })
+    demoWindow.on('blur', () => {
+      mainWindow.webContents.send('window-blur')
+    })
+  })
 
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
+  ipcMain.on('focus-demo-window', () => {
+    if (demoWindow) demoWindow.focus()
   })
 }
 

docs/fiddles/windows/manage-windows/window-events/renderer.js

@@ -1,42 +1,33 @@
-const { BrowserWindow } = require('electron').remote
-const shell = require('electron').shell
+const { shell, ipcRenderer } = require('electron')
 
 const listenToWindowBtn = document.getElementById('listen-to-window')
 const focusModalBtn = document.getElementById('focus-on-modal-window')
 
-const links = document.querySelectorAll('a[href]')
+const hideFocusBtn = () => {
+  focusModalBtn.classList.add('disappear')
+  focusModalBtn.classList.remove('smooth-appear')
+  focusModalBtn.removeEventListener('click', focusWindow)
+}
 
-let win
+const showFocusBtn = (btn) => {
+  focusModalBtn.classList.add('smooth-appear')
+  focusModalBtn.classList.remove('disappear')
+  focusModalBtn.addEventListener('click', focusWindow)
+}
+const focusWindow = () => {
+  ipcRenderer.send('focus-demo-window')
+}
+
+ipcRenderer.on('window-focus', hideFocusBtn)
+ipcRenderer.on('window-close', hideFocusBtn)
+ipcRenderer.on('window-blur', showFocusBtn)
 
 listenToWindowBtn.addEventListener('click', () => {
-  const modalPath = 'https://electronjs.org'
-  win = new BrowserWindow({ width: 600, height: 400 })
-
-  const hideFocusBtn = () => {
-    focusModalBtn.classList.add('disappear')
-    focusModalBtn.classList.remove('smooth-appear')
-    focusModalBtn.removeEventListener('click', clickHandler)
-  }
-
-  const showFocusBtn = (btn) => {
-    if (!win) return
-    focusModalBtn.classList.add('smooth-appear')
-    focusModalBtn.classList.remove('disappear')
-    focusModalBtn.addEventListener('click', clickHandler)
-  }
-
-  win.on('focus', hideFocusBtn)
-  win.on('blur', showFocusBtn)
-  win.on('close', () => {
-    hideFocusBtn()
-    win = null
-  })
-  win.loadURL(modalPath)
-  win.show()
-
-  const clickHandler = () => { win.focus() }
+  ipcRenderer.send('show-demo-window')
 })
 
+const links = document.querySelectorAll('a[href]')
+
 Array.prototype.forEach.call(links, (link) => {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {