docs: enable contextIsolation in fiddles (#39613)

docs/fiddles/system/system-app-user-information/app-information/index.html

@@ -18,9 +18,6 @@
         </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/system/system-app-user-information/app-information/main.js

@@ -1,4 +1,5 @@
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -10,8 +11,7 @@ function createWindow () {
     height: 400,
     title: 'Get app information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/system/system-app-user-information/app-information/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  getAppPath: () => ipcRenderer.invoke('get-app-path')
+})

docs/fiddles/system/system-app-user-information/app-information/renderer.js

@@ -1,9 +1,7 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const appInfoBtn = document.getElementById('app-info')
 
 appInfoBtn.addEventListener('click', async () => {
-  const path = await ipcRenderer.invoke('get-app-path')
+  const path = await window.electronAPI.getAppPath()
   const message = `This app is located at: ${path}`
   document.getElementById('got-app-info').innerHTML = message
 })

docs/fiddles/system/system-information/get-version-information/index.html

@@ -20,7 +20,5 @@
       </div>
     </div>
   </body>
-  <script>
-    require('./renderer.js')
-  </script>
+  <script src="renderer.js"></script>
 </html>

docs/fiddles/system/system-information/get-version-information/main.js

@@ -1,4 +1,5 @@
 const { app, BrowserWindow, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -8,8 +9,7 @@ function createWindow () {
     height: 400,
     title: 'Get version information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/system/system-information/get-version-information/preload.js

@@ -0,0 +1,3 @@
+const { contextBridge } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronVersion', process.versions.electron)

docs/fiddles/system/system-information/get-version-information/renderer.js

@@ -1,8 +1,6 @@
 const versionInfoBtn = document.getElementById('version-info')
 
-const electronVersion = process.versions.electron
-
 versionInfoBtn.addEventListener('click', () => {
-  const message = `This app is using Electron version: ${electronVersion}`
+  const message = `This app is using Electron version: ${window.electronVersion}`
   document.getElementById('got-version-info').innerHTML = message
 })