docs: enable contextIsolation in fiddles (#39613)

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