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}`
 })