docs: enable contextIsolation in fiddles (#39613)

docs/fiddles/native-ui/dialogs/error-dialog/index.html

@@ -73,9 +73,6 @@ ipcMain.on('open-error-dialog', (event) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/error-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // 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.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/native-ui/dialogs/error-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openErrorDialog: () => ipcRenderer.send('open-error-dialog')
+})

docs/fiddles/native-ui/dialogs/error-dialog/renderer.js

@@ -1,7 +1,5 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const errorBtn = document.getElementById('error-dialog')
 
-errorBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-error-dialog')
+errorBtn.addEventListener('click', () => {
+  window.electronAPI.openErrorDialog()
 })

docs/fiddles/native-ui/dialogs/information-dialog/index.html

@@ -96,9 +96,6 @@ ipcMain.on('open-information-dialog', (event) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/information-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // 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.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,16 +59,14 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-information-dialog', event => {
+ipcMain.handle('open-information-dialog', async () => {
   const options = {
     type: 'info',
     title: 'Information',
     message: "This is an information dialog. Isn't it nice?",
     buttons: ['Yes', 'No']
   }
-  dialog.showMessageBox(options, index => {
-    event.sender.send('information-dialog-selection', index)
-  })
+  return (await dialog.showMessageBox(options)).response
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/information-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openInformationDialog: () => ipcRenderer.invoke('open-information-dialog')
+})

docs/fiddles/native-ui/dialogs/information-dialog/renderer.js

@@ -1,14 +1,7 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const informationBtn = document.getElementById('information-dialog')
 
-informationBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-information-dialog')
-})
-
-ipcRenderer.on('information-dialog-selection', (event, index) => {
-  let message = 'You selected '
-  if (index === 0) message += 'yes.'
-  else message += 'no.'
+informationBtn.addEventListener('click', async () => {
+  const index = await window.electronAPI.openInformationDialog()
+  const message = `You selected: ${index === 0 ? 'yes' : 'no'}`
   document.getElementById('info-selection').innerHTML = message
 })

docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html

@@ -100,9 +100,6 @@ ipc.on('open-file-dialog-sheet', function (event) {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // 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.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,17 +59,11 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-file-dialog', event => {
-  dialog.showOpenDialog(
-    {
-      properties: ['openFile', 'openDirectory']
-    },
-    files => {
-      if (files) {
-        event.sender.send('selected-directory', files)
-      }
-    }
-  )
+ipcMain.handle('open-file-dialog', async () => {
+  const options = {
+    properties: ['openFile', 'openDirectory']
+  }
+  return (await dialog.showOpenDialog(options)).filePaths
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/open-file-or-directory/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openFileDialog: () => ipcRenderer.invoke('open-file-dialog')
+})

docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js

@@ -1,11 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const selectDirBtn = document.getElementById('select-directory')
 
-selectDirBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-file-dialog')
-})
-
-ipcRenderer.on('selected-directory', (event, path) => {
+selectDirBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.openFileDialog()
   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
 })

docs/fiddles/native-ui/dialogs/save-dialog/index.html

@@ -83,9 +83,6 @@ ipcMain.on('save-dialog', (event) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/dialogs/save-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // 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.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,14 +59,12 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('save-dialog', event => {
+ipcMain.handle('save-dialog', async () => {
   const options = {
     title: 'Save an Image',
     filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]
   }
-  dialog.showSaveDialog(options, filename => {
-    event.sender.send('saved-file', filename)
-  })
+  return (await dialog.showSaveDialog(options)).filePath
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/save-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  saveDialog: () => ipcRenderer.invoke('save-dialog')
+})

docs/fiddles/native-ui/dialogs/save-dialog/renderer.js

@@ -1,12 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const saveBtn = document.getElementById('save-dialog')
 
-saveBtn.addEventListener('click', event => {
-  ipcRenderer.send('save-dialog')
-})
-
-ipcRenderer.on('saved-file', (event, path) => {
-  if (!path) path = 'No path'
+saveBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.saveDialog()
   document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
 })

docs/fiddles/native-ui/drag-and-drop/index.html

@@ -68,9 +68,6 @@ ipcMain.on('ondragstart', (event, filepath) => {
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/drag-and-drop/main.js

@@ -1,5 +1,7 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, nativeImage, shell } = require('electron/main')
+const path = require('node:path')
+
 // 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
@@ -10,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -58,7 +59,8 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('ondragstart', (event, filepath) => {
+ipcMain.on('ondragstart', (event) => {
+  const filepath = path.join(__dirname, 'renderer.js')
   const icon = nativeImage.createFromDataURL('data:image/png;base64,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')
 
   event.sender.startDrag({

docs/fiddles/native-ui/drag-and-drop/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  dragStart: () => ipcRenderer.send('ondragstart')
+})

docs/fiddles/native-ui/drag-and-drop/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const dragFileLink = document.getElementById('drag-file-link')
 
 dragFileLink.addEventListener('dragstart', event => {
   event.preventDefault()
-  ipcRenderer.send('ondragstart', __filename)
+  window.electronAPI.dragStart()
 })

docs/fiddles/native-ui/external-links-file-manager/index.html

@@ -95,10 +95,6 @@ for (const link of links) {
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/external-links-file-manager/main.js

@@ -1,5 +1,15 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, shell } = require('electron/main')
+const { app, BrowserWindow, shell, ipcMain } = require('electron/main')
+const path = require('node:path')
+const os = require('node:os')
+
+ipcMain.on('open-home-dir', () => {
+  shell.showItemInFolder(os.homedir())
+})
+
+ipcMain.on('open-external', (event, url) => {
+  shell.openExternal(url)
+})
 
 // 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.
@@ -11,8 +21,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/native-ui/external-links-file-manager/preload.js

@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openHomeDir: () => ipcRenderer.send('open-home-dir'),
+  openExternal: (url) => ipcRenderer.send('open-external', url)
+})

docs/fiddles/native-ui/external-links-file-manager/renderer.js

@@ -1,13 +1,10 @@
-const { shell } = require('electron/renderer')
-const os = require('node:os')
-
 const exLinksBtn = document.getElementById('open-ex-links')
 const fileManagerBtn = document.getElementById('open-file-manager')
 
 fileManagerBtn.addEventListener('click', (event) => {
-  shell.showItemInFolder(os.homedir())
+  window.electronAPI.openHomeDir()
 })
 
 exLinksBtn.addEventListener('click', (event) => {
-  shell.openExternal('https://electronjs.org')
+  window.electronAPI.openExternal('https://electronjs.org')
 })

docs/fiddles/native-ui/notifications/index.html

@@ -59,9 +59,6 @@
       </div>
     </div>
 
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/native-ui/notifications/main.js

@@ -9,11 +9,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   // and load the index.html of the app.