docs: use electron/main & electron/renderer imports in fiddles (#39666)

docs/fiddles/features/dark-mode/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
+const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {

docs/fiddles/features/dark-mode/preload.js

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('darkMode', {
   toggle: () => ipcRenderer.invoke('dark-mode:toggle'),

docs/fiddles/features/drag-and-drop/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron/main')
 const path = require('node:path')
 const fs = require('node:fs')
 const https = require('node:https')

docs/fiddles/features/drag-and-drop/preload.js

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

docs/fiddles/features/keyboard-shortcuts/global/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, globalShortcut } = require('electron')
+const { app, BrowserWindow, globalShortcut } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({

docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 app.whenReady().then(() => {
   const win = new BrowserWindow({ width: 800, height: 600 })

docs/fiddles/features/keyboard-shortcuts/local/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, MenuItem } = require('electron')
+const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({

docs/fiddles/features/keyboard-shortcuts/web-apis/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   // Create the browser window.

docs/fiddles/features/macos-dock-menu/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu } = require('electron')
+const { app, BrowserWindow, Menu } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({

docs/fiddles/features/notifications/main/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Notification } = require('electron')
+const { app, BrowserWindow, Notification } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({

docs/fiddles/features/notifications/renderer/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const win = new BrowserWindow({

docs/fiddles/features/offscreen-rendering/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
 const path = require('node:path')
 

docs/fiddles/features/online-detection/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const onlineStatusWindow = new BrowserWindow({

docs/fiddles/features/progress-bar/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 let progressInterval
 

docs/fiddles/features/recent-documents/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
 const path = require('node:path')
 

docs/fiddles/features/represented-file/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const os = require('node:os')
 
 function createWindow () {

docs/fiddles/features/web-bluetooth/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron/main')
 const path = require('node:path')
 
 let bluetoothPinCallback

docs/fiddles/features/web-bluetooth/preload.js

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
   cancelBluetoothRequest: (callback) => ipcRenderer.send('cancel-bluetooth-request', callback),

docs/fiddles/features/web-hid/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({

docs/fiddles/features/web-serial/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({

docs/fiddles/features/web-usb/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({

docs/fiddles/ipc/pattern-1/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {

docs/fiddles/ipc/pattern-1/preload.js

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
   setTitle: (title) => ipcRenderer.send('set-title', title)

docs/fiddles/ipc/pattern-2/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog } = require('electron/main')
 const path = require('node:path')
 
 async function handleFileOpen () {

docs/fiddles/ipc/pattern-2/preload.js

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

docs/fiddles/ipc/pattern-3/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, ipcMain } = require('electron')
+const { app, BrowserWindow, Menu, ipcMain } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {

docs/fiddles/ipc/pattern-3/preload.js

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
   handleCounter: (callback) => ipcRenderer.on('update-counter', callback)

docs/fiddles/ipc/webview-new-window/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {

docs/fiddles/ipc/webview-new-window/preload.js

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 const webview = document.getElementById('webview')
 ipcRenderer.on('webview-new-window', (e, webContentsId, details) => {
   console.log('webview-new-window', webContentsId, details)

docs/fiddles/media/screenshot/take-screenshot/main.js

@@ -1,4 +1,4 @@
-const { BrowserWindow, app, screen, ipcMain, desktopCapturer } = require('electron')
+const { BrowserWindow, app, screen, ipcMain, desktopCapturer } = require('electron/main')
 
 let mainWindow = null
 

docs/fiddles/media/screenshot/take-screenshot/renderer.js

@@ -1,4 +1,4 @@
-const { shell, ipcRenderer } = require('electron')
+const { shell, ipcRenderer } = require('electron/renderer')
 
 const fs = require('node:fs').promises
 const os = require('node:os')

docs/fiddles/menus/customize-menus/main.js

@@ -6,8 +6,9 @@ const {
   ipcMain,
   app,
   shell,
-  dialog
+  dialog,
-} = require('electron')
+  autoUpdater
+} = require('electron/main')
 
 const menu = new Menu()
 menu.append(new MenuItem({ label: 'Hello' }))
@@ -185,7 +186,7 @@ function addUpdateMenuItems (items, position) {
       visible: false,
       key: 'checkForUpdate',
       click: () => {
-        require('electron').autoUpdater.checkForUpdates()
+        autoUpdater.checkForUpdates()
       }
     },
     {
@@ -194,7 +195,7 @@ function addUpdateMenuItems (items, position) {
       visible: false,
       key: 'restartToUpdate',
       click: () => {
-        require('electron').autoUpdater.quitAndInstall()
+        autoUpdater.quitAndInstall()
       }
     }
   ]

docs/fiddles/menus/customize-menus/renderer.js

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 // Tell main process to show the menu when demo button is clicked
 const contextMenuBtn = document.getElementById('context-menu')

docs/fiddles/menus/shortcuts/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, globalShortcut, dialog, shell } = require('electron')
+const { app, BrowserWindow, globalShortcut, dialog, shell } = require('electron/main')
 
 // 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.

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
 
 // 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.

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const errorBtn = document.getElementById('error-dialog')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
 
 // 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.

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const informationBtn = document.getElementById('information-dialog')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
 
 // 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.

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const selectDirBtn = document.getElementById('select-directory')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
 
 // 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.

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const saveBtn = document.getElementById('save-dialog')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, nativeImage, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, nativeImage, shell } = require('electron/main')
 // 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

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const dragFileLink = document.getElementById('drag-file-link')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell } = require('electron/main')
 
 // 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.

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

@@ -1,4 +1,4 @@
-const { shell } = require('electron')
+const { shell } = require('electron/renderer')
 const os = require('node:os')
 
 const exLinksBtn = document.getElementById('open-ex-links')

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell } = require('electron/main')
 
 // 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.

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

@@ -1,4 +1,4 @@
-const { app, Tray, Menu, nativeImage } = require('electron')
+const { app, Tray, Menu, nativeImage } = require('electron/main')
 
 let tray
 

docs/fiddles/quick-start/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const path = require('node:path')
 
 function createWindow () {

docs/fiddles/screen/fit-screen/main.js

@@ -3,14 +3,11 @@
 // For more info, see:
 // https://www.electronjs.org/docs/latest/api/screen
 
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, screen } = require('electron/main')
 
 let mainWindow = null
 
 app.whenReady().then(() => {
-  // We cannot require the screen module until the app is ready.
-  const { screen } = require('electron')
-
   // Create a window that fills the screen's available work area.
   const primaryDisplay = screen.getPrimaryDisplay()
   const { width, height } = primaryDisplay.workAreaSize

docs/fiddles/system/clipboard/copy/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, clipboard } = require('electron')
+const { app, BrowserWindow, ipcMain, clipboard } = require('electron/main')
 const path = require('node:path')
 
 let mainWindow = null

docs/fiddles/system/clipboard/copy/preload.js

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('clipboard', {
   writeText: (text) => ipcRenderer.invoke('clipboard:writeText', text)

docs/fiddles/system/clipboard/paste/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, clipboard } = require('electron')
+const { app, BrowserWindow, ipcMain, clipboard } = require('electron/main')
 const path = require('node:path')
 
 let mainWindow = null

docs/fiddles/system/clipboard/paste/preload.js

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('clipboard', {
   readText: () => ipcRenderer.invoke('clipboard:readText'),

docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, shell, dialog } = require('electron/main')
 const path = require('node:path')
 
 let mainWindow

docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/preload.js

@@ -1,11 +1,5 @@
-// All of the Node.js APIs are available in the preload process.
+const { contextBridge, ipcRenderer } = require('electron/renderer')
-// It has the same sandbox as a Chrome extension.
-const { contextBridge, ipcRenderer } = require('electron')
 
-// Set up context bridge between the renderer process and the main process
+contextBridge.exposeInMainWorld('shell', {
-contextBridge.exposeInMainWorld(
-  'shell',
-  {
   open: () => ipcRenderer.send('shell:open')
-  }
+})
-)

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

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
 
 let mainWindow = null
 

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const appInfoBtn = document.getElementById('app-info')
 

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

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell } = require('electron/main')
 
 let mainWindow = null
 

docs/fiddles/tutorial-first-app/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 
 const createWindow = () => {
   const win = new BrowserWindow({

docs/fiddles/tutorial-preload/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron/main')
 const path = require('node:path')
 
 const createWindow = () => {

docs/fiddles/tutorial-preload/preload.js

@@ -1,4 +1,4 @@
-const { contextBridge } = require('electron')
+const { contextBridge } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('versions', {
   node: () => process.versions.node,

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
 
 ipcMain.on('create-frameless-window', (event, { url }) => {
   const win = new BrowserWindow({ frame: false })

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const newWindowBtn = document.getElementById('frameless-window')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
 
 ipcMain.on('create-demo-window', (event) => {
   const win = new BrowserWindow({ width: 400, height: 275 })

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const manageWindowBtn = document.getElementById('manage-window')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
 
 ipcMain.on('new-window', (event, { url, width, height }) => {
   const win = new BrowserWindow({ width, height })

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const newWindowBtn = document.getElementById('new-window')
 

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

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
 
 function createWindow () {
   // Create the browser window.

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron/renderer')
 
 const listenToWindowBtn = document.getElementById('listen-to-window')
 const focusModalBtn = document.getElementById('focus-on-modal-window')