refactor: bundle the browser and renderer process electron code (#18553)

* refactor: bundle the browser and renderer process electron code

* Bundles browser/init and renderer/init
  * Improves load performance of main process by ~40%
  * Improves load performance of renderer process by ~30%
* Prevents users from importing our "requiring" our internal logic such
as ipc-main-internal.  This makes those message buses safer as they are
less accessible, there is still some more work to be done though to lock
down those buses completely.
* The electron.asar file now only contains 2 files, as a future
improvement maybe we can use atom_natives to ship these two files
embedded in the binary
* This also removes our dependency on browserify which had some strange
edge cases that caused us to have to hack around require-order and
stopped us using certain ES6/7 features we should have been able to use
(async / await in some files in the sandboxed renderer init script)

TLDR: Things are faster and better :)

* fix: I really do not want to talk about it

* chore: add performance improvements from debugging

* fix: resolve the provided path so webpack thinks it is absolute

* chore: fixup per PR review

* fix: use webpacks ProvidePlugin to keep global, process and Buffer alive after deletion from global scope for use in internal code

* fix: bundle worker/init as well to make node-in-workers work

* chore: update wording as per feedback

* chore: make the timers hack work when yarn is not used

lib/browser/api/app.ts

@@ -1,6 +1,6 @@
 import * as path from 'path'
 
-import * as electron from 'electron'
+import { deprecate, Menu } from 'electron'
 import { EventEmitter } from 'events'
 
 const bindings = process.electronBinding('app')
@@ -10,8 +10,6 @@ const { app, App } = bindings
 // Only one app object permitted.
 export default app
 
-const { deprecate, Menu } = electron
-
 let dockMenu: Electron.Menu | null = null
 
 // App is an EventEmitter.

lib/browser/api/exports/electron.js

@@ -10,11 +10,6 @@ common.defineProperties(exports)
 for (const module of moduleList) {
   Object.defineProperty(exports, module.name, {
     enumerable: !module.private,
-    get: common.memoizedGetter(() => {
-      const value = require(`@electron/internal/browser/api/${module.file}.js`)
-      // Handle Typescript modules with an "export default X" statement
-      if (value.__esModule) return value.default
-      return value
-    })
+    get: common.handleESModule(module.loader)
   })
 }

lib/browser/api/module-keys.js

@@ -0,0 +1,51 @@
+'use strict'
+
+// TODO: Figure out a way to not duplicate this information between here and module-list
+// It is currently duplicated as module-list "require"s all the browser API file and the
+// remote module in the renderer process depends on that file.  As a result webpack
+// includes all the browser API files in the renderer process as well and we want to avoid that
+
+const features = process.electronBinding('features')
+
+// Browser side modules, please sort alphabetically.
+module.exports = [
+  { name: 'app' },
+  { name: 'autoUpdater' },
+  { name: 'BrowserView' },
+  { name: 'BrowserWindow' },
+  { name: 'contentTracing' },
+  { name: 'crashReporter' },
+  { name: 'dialog' },
+  { name: 'globalShortcut' },
+  { name: 'ipcMain' },
+  { name: 'inAppPurchase' },
+  { name: 'Menu' },
+  { name: 'MenuItem' },
+  { name: 'net' },
+  { name: 'netLog' },
+  { name: 'Notification' },
+  { name: 'powerMonitor' },
+  { name: 'powerSaveBlocker' },
+  { name: 'protocol' },
+  { name: 'screen' },
+  { name: 'session' },
+  { name: 'systemPreferences' },
+  { name: 'TopLevelWindow' },
+  { name: 'TouchBar' },
+  { name: 'Tray' },
+  { name: 'View' },
+  { name: 'webContents' },
+  { name: 'WebContentsView' }
+]
+
+if (features.isViewApiEnabled()) {
+  module.exports.push(
+    { name: 'BoxLayout' },
+    { name: 'Button' },
+    { name: 'LabelButton' },
+    { name: 'LayoutManager' },
+    { name: 'MdTextButton' },
+    { name: 'ResizeArea' },
+    { name: 'TextField' }
+  )
+}

lib/browser/api/module-list.js

@@ -1,46 +1,48 @@
 'use strict'
 
+// TODO: Updating this file also required updating the module-keys file
+
 const features = process.electronBinding('features')
 
 // Browser side modules, please sort alphabetically.
 module.exports = [
-  { name: 'app', file: 'app' },
-  { name: 'autoUpdater', file: 'auto-updater' },
-  { name: 'BrowserView', file: 'browser-view' },
-  { name: 'BrowserWindow', file: 'browser-window' },
-  { name: 'contentTracing', file: 'content-tracing' },
-  { name: 'crashReporter', file: 'crash-reporter' },
-  { name: 'dialog', file: 'dialog' },
-  { name: 'globalShortcut', file: 'global-shortcut' },
-  { name: 'ipcMain', file: 'ipc-main' },
-  { name: 'inAppPurchase', file: 'in-app-purchase' },
-  { name: 'Menu', file: 'menu' },
-  { name: 'MenuItem', file: 'menu-item' },
-  { name: 'net', file: 'net' },
-  { name: 'netLog', file: 'net-log' },
-  { name: 'Notification', file: 'notification' },
-  { name: 'powerMonitor', file: 'power-monitor' },
-  { name: 'powerSaveBlocker', file: 'power-save-blocker' },
-  { name: 'protocol', file: 'protocol' },
-  { name: 'screen', file: 'screen' },
-  { name: 'session', file: 'session' },
-  { name: 'systemPreferences', file: 'system-preferences' },
-  { name: 'TopLevelWindow', file: 'top-level-window' },
-  { name: 'TouchBar', file: 'touch-bar' },
-  { name: 'Tray', file: 'tray' },
-  { name: 'View', file: 'view' },
-  { name: 'webContents', file: 'web-contents' },
-  { name: 'WebContentsView', file: 'web-contents-view' }
+  { name: 'app', loader: () => require('./app') },
+  { name: 'autoUpdater', loader: () => require('./auto-updater') },
+  { name: 'BrowserView', loader: () => require('./browser-view') },
+  { name: 'BrowserWindow', loader: () => require('./browser-window') },
+  { name: 'contentTracing', loader: () => require('./content-tracing') },
+  { name: 'crashReporter', loader: () => require('./crash-reporter') },
+  { name: 'dialog', loader: () => require('./dialog') },
+  { name: 'globalShortcut', loader: () => require('./global-shortcut') },
+  { name: 'ipcMain', loader: () => require('./ipc-main') },
+  { name: 'inAppPurchase', loader: () => require('./in-app-purchase') },
+  { name: 'Menu', loader: () => require('./menu') },
+  { name: 'MenuItem', loader: () => require('./menu-item') },
+  { name: 'net', loader: () => require('./net') },
+  { name: 'netLog', loader: () => require('./net-log') },
+  { name: 'Notification', loader: () => require('./notification') },
+  { name: 'powerMonitor', loader: () => require('./power-monitor') },
+  { name: 'powerSaveBlocker', loader: () => require('./power-save-blocker') },
+  { name: 'protocol', loader: () => require('./protocol') },
+  { name: 'screen', loader: () => require('./screen') },
+  { name: 'session', loader: () => require('./session') },
+  { name: 'systemPreferences', loader: () => require('./system-preferences') },
+  { name: 'TopLevelWindow', loader: () => require('./top-level-window') },
+  { name: 'TouchBar', loader: () => require('./touch-bar') },
+  { name: 'Tray', loader: () => require('./tray') },
+  { name: 'View', loader: () => require('./view') },
+  { name: 'webContents', loader: () => require('./web-contents') },
+  { name: 'WebContentsView', loader: () => require('./web-contents-view') }
 ]
 
 if (features.isViewApiEnabled()) {
   module.exports.push(
-    { name: 'BoxLayout', file: 'views/box-layout' },
-    { name: 'Button', file: 'views/button' },
-    { name: 'LabelButton', file: 'views/label-button' },
-    { name: 'LayoutManager', file: 'views/layout-manager' },
-    { name: 'MdTextButton', file: 'views/md-text-button' },
-    { name: 'ResizeArea', file: 'views/resize-area' },
-    { name: 'TextField', file: 'views/text-field' }
+    { name: 'BoxLayout', loader: () => require('./views/box-layout') },
+    { name: 'Button', loader: () => require('./views/button') },
+    { name: 'LabelButton', loader: () => require('./views/label-button') },
+    { name: 'LayoutManager', loader: () => require('./views/layout-manager') },
+    { name: 'MdTextButton', loader: () => require('./views/md-text-button') },
+    { name: 'ResizeArea', loader: () => require('./views/resize-area') },
+    { name: 'TextField', loader: () => require('./views/text-field') }
   )
 }