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

lib/browser/crash-reporter-init.js

@@ -2,14 +2,15 @@
 
 const { app } = require('electron')
 const cp = require('child_process')
-const os = require('os')
 const path = require('path')
 
 const getTempDirectory = function () {
   try {
     return app.getPath('temp')
   } catch {
-    return os.tmpdir()
+    // Delibrately laze-load the os module, this file is on the hot
+    // path when booting Electron and os takes between 5 - 8ms to load and we do not need it yet
+    return require('os').tmpdir()
   }
 }
 

lib/browser/init.ts

@@ -16,11 +16,6 @@ require('../common/reset-search-paths')
 // Import common settings.
 require('@electron/internal/common/init')
 
-const globalPaths = Module.globalPaths
-
-// Expose public APIs.
-globalPaths.push(path.join(__dirname, 'api', 'exports'))
-
 if (process.platform === 'win32') {
   // Redirect node's console to use our own implementations, since node can not
   // handle console output when running as GUI program.
@@ -112,7 +107,7 @@ if (process.resourcesPath) {
   for (packagePath of searchPaths) {
     try {
       packagePath = path.join(process.resourcesPath, packagePath)
-      packageJson = require(path.join(packagePath, 'package.json'))
+      packageJson = __non_webpack_require__(path.join(packagePath, 'package.json')) // eslint-disable-line
       break
     } catch {
       continue
@@ -194,7 +189,7 @@ app.on('window-all-closed', () => {
 
 Promise.all([
   import('@electron/internal/browser/default-menu'),
-  app.whenReady
+  app.whenReady()
 ]).then(([{ setDefaultApplicationMenu }]) => {
   // Create default menu
   setDefaultApplicationMenu()

lib/common/api/exports/electron.js

@@ -2,6 +2,12 @@
 
 const moduleList = require('@electron/internal/common/api/module-list')
 
+exports.handleESModule = (loader) => () => {
+  const value = loader()
+  if (value.__esModule) return value.default
+  return value
+}
+
 exports.memoizedGetter = (getter) => {
   /*
    * It's ok to leak this value as it would be leaked by the global
@@ -24,12 +30,7 @@ exports.defineProperties = function (targetExports) {
   for (const module of moduleList) {
     descriptors[module.name] = {
       enumerable: !module.private,
-      get: exports.memoizedGetter(() => {
-        const value = require(`@electron/internal/common/api/${module.file}.js`)
-        // Handle Typescript modules with an "export default X" statement
-        if (value.__esModule) return value.default
-        return value
-      })
+      get: exports.handleESModule(module.loader)
     }
   }
   return Object.defineProperties(targetExports, descriptors)

lib/common/api/module-list.js

@@ -2,10 +2,10 @@
 
 // Common modules, please sort alphabetically
 module.exports = [
-  { name: 'clipboard', file: 'clipboard' },
-  { name: 'nativeImage', file: 'native-image' },
-  { name: 'shell', file: 'shell' },
+  { name: 'clipboard', loader: () => require('./clipboard') },
+  { name: 'nativeImage', loader: () => require('./native-image') },
+  { name: 'shell', loader: () => require('./shell') },
   // The internal modules, invisible unless you know their names.
-  { name: 'deprecate', file: 'deprecate', private: true },
-  { name: 'isPromise', file: 'is-promise', private: true }
+  { name: 'deprecate', loader: () => require('./deprecate'), private: true },
+  { name: 'isPromise', loader: () => require('./is-promise'), private: true }
 ]

lib/common/reset-search-paths.ts

@@ -5,9 +5,11 @@ const Module = require('module')
 // Clear Node's global search paths.
 Module.globalPaths.length = 0
 
-// Clear current and parent(init.js)'s search paths.
-module.paths = []
-module.parent!.paths = []
+// Clear current bundles search paths.
+const currentNodeModule = Module._cache[__filename]
+if (currentNodeModule) {
+  currentNodeModule.paths = []
+}
 
 // Prevent Node from adding paths outside this app to search paths.
 const resourcesPathWithTrailingSlash = process.resourcesPath + path.sep
@@ -25,19 +27,21 @@ Module._nodeModulePaths = function (from: string) {
   }
 }
 
-const BASE_INTERNAL_PATH = path.resolve(__dirname, '..')
-const INTERNAL_MODULE_PREFIX = '@electron/internal/'
+// Make a fake Electron module that we will insert into the module cache
+const electronModule = new Module('electron', null)
+electronModule.id = 'electron'
+electronModule.loaded = true
+electronModule.filename = 'electron'
+Object.defineProperty(electronModule, 'exports', {
+  get: () => require('electron')
+})
+
+Module._cache['electron'] = electronModule
 
-// Patch Module._resolveFilename to always require the Electron API when
-// require('electron') is done.
-const electronPath = path.join(__dirname, '..', process.type!, 'api', 'exports', 'electron.js')
 const originalResolveFilename = Module._resolveFilename
 Module._resolveFilename = function (request: string, parent: NodeModule, isMain: boolean) {
   if (request === 'electron') {
-    return electronPath
-  } else if (request.startsWith(INTERNAL_MODULE_PREFIX) && request.length > INTERNAL_MODULE_PREFIX.length) {
-    const slicedRequest = request.slice(INTERNAL_MODULE_PREFIX.length)
-    return path.resolve(BASE_INTERNAL_PATH, `${slicedRequest}${slicedRequest.endsWith('.js') ? '' : '.js'}`)
+    return 'electron'
   } else {
     return originalResolveFilename(request, parent, isMain)
   }

lib/content_script/init.js

@@ -12,7 +12,7 @@ const v8Util = process.electronBinding('v8_util')
 // "ipc-internal" hidden value
 v8Util.setHiddenValue(global, 'ipc-internal', v8Util.getHiddenValue(isolatedWorld, 'ipc-internal'))
 
-// The process object created by browserify is not an event emitter, fix it so
+// The process object created by webpack is not an event emitter, fix it so
 // the API is more compatible with non-sandboxed renderers.
 for (const prop of Object.keys(EventEmitter.prototype)) {
   if (process.hasOwnProperty(prop)) {

lib/renderer/api/exports/electron.js

@@ -6,23 +6,9 @@ const moduleList = require('@electron/internal/renderer/api/module-list')
 // Import common modules.
 common.defineProperties(exports)
 
-for (const {
-  name,
-  file,
-  enabled = true,
-  private: isPrivate = false
-} of moduleList) {
-  if (!enabled) {
-    continue
-  }
-
-  Object.defineProperty(exports, name, {
-    enumerable: !isPrivate,
-    get: common.memoizedGetter(() => {
-      const value = require(`@electron/internal/renderer/api/${file}.js`)
-      // Handle Typescript modules with an "export default X" statement
-      if (value.__esModule) return value.default
-      return value
-    })
+for (const module of moduleList) {
+  Object.defineProperty(exports, module.name, {
+    enumerable: !module.private,
+    get: common.handleESModule(module.loader)
   })
 }

lib/renderer/api/module-list.js

@@ -8,13 +8,15 @@ const enableRemoteModule = v8Util.getHiddenValue(global, 'enableRemoteModule')
 // Renderer side modules, please sort alphabetically.
 // A module is `enabled` if there is no explicit condition defined.
 module.exports = [
-  { name: 'crashReporter', file: 'crash-reporter', enabled: true },
-  {
-    name: 'desktopCapturer',
-    file: 'desktop-capturer',
-    enabled: features.isDesktopCapturerEnabled()
-  },
-  { name: 'ipcRenderer', file: 'ipc-renderer' },
-  { name: 'remote', file: 'remote', enabled: enableRemoteModule },
-  { name: 'webFrame', file: 'web-frame' }
+  { name: 'crashReporter', loader: () => require('./crash-reporter') },
+  { name: 'ipcRenderer', loader: () => require('./ipc-renderer') },
+  { name: 'webFrame', loader: () => require('./web-frame') }
 ]
+
+if (features.isDesktopCapturerEnabled()) {
+  module.exports.push({ name: 'desktopCapturer', loader: () => require('./desktop-capturer') })
+}
+
+if (enableRemoteModule) {
+  module.exports.push({ name: 'remote', loader: () => require('./remote') })
+}

lib/renderer/api/remote.js

@@ -350,7 +350,7 @@ const addBuiltinProperty = (name) => {
 
 const browserModules =
   require('@electron/internal/common/api/module-list').concat(
-    require('@electron/internal/browser/api/module-list'))
+    require('@electron/internal/browser/api/module-keys'))
 
 // And add a helper receiver for each one.
 browserModules

lib/renderer/init.ts

@@ -14,6 +14,10 @@ const Module = require('module')
 // code, which does not work with this hack. However by modifying the
 // "Module.wrapper" we can force Node to use the old code path to wrap module
 // code with JavaScript.
+//
+// Note 3: We provide the equivilant extra variables internally through the
+// webpack ProvidePlugin in webpack.config.base.js.  If you add any extra
+// variables to this wrapper please ensure to update that plugin as well.
 Module.wrapper = [
   '(function (exports, require, module, __filename, __dirname, process, global, Buffer) { ' +
   // By running the code in a new closure, it would be possible for the module
@@ -33,11 +37,6 @@ require('../common/reset-search-paths')
 // Import common settings.
 require('@electron/internal/common/init')
 
-const globalPaths = Module.globalPaths
-
-// Expose public APIs.
-globalPaths.push(path.join(__dirname, 'api', 'exports'))
-
 // The global variable will be used by ipc for event dispatching
 const v8Util = process.electronBinding('v8_util')
 
@@ -129,8 +128,8 @@ if (contextIsolation) {
 
 if (nodeIntegration) {
   // Export node bindings to global.
-  global.require = require
-  global.module = module
+  global.require = __non_webpack_require__ // eslint-disable-line
+  global.module = Module._cache[__filename]
 
   // Set the __filename to the path of html file if it is file: protocol.
   if (window.location.protocol === 'file:') {
@@ -140,7 +139,7 @@ if (nodeIntegration) {
     if (process.platform === 'win32') {
       if (pathname[0] === '/') pathname = pathname.substr(1)
 
-      const isWindowsNetworkSharePath = location.hostname.length > 0 && globalPaths[0].startsWith('\\')
+      const isWindowsNetworkSharePath = location.hostname.length > 0 && __filename.startsWith('\\')
       if (isWindowsNetworkSharePath) {
         pathname = `//${location.host}/${pathname}`
       }
@@ -150,17 +149,17 @@ if (nodeIntegration) {
     global.__dirname = path.dirname(global.__filename)
 
     // Set module's filename so relative require can work as expected.
-    module.filename = global.__filename
+    global.module.filename = global.__filename
 
     // Also search for module under the html file.
-    module.paths = module.paths.concat(Module._nodeModulePaths(global.__dirname))
+    global.module.paths = global.module.paths.concat(Module._nodeModulePaths(global.__dirname))
   } else {
     global.__filename = __filename
     global.__dirname = __dirname
 
     if (appPath) {
       // Search for module under the app directory
-      module.paths = module.paths.concat(Module._nodeModulePaths(appPath))
+      global.module.paths = global.module.paths.concat(Module._nodeModulePaths(appPath))
     }
   }
 
@@ -204,7 +203,7 @@ for (const preloadScript of preloadScripts) {
     if (!isParentDir(getAppPath(), fs.realpathSync(preloadScript))) {
       throw new Error('Preload scripts outside of app path are not allowed')
     }
-    require(preloadScript)
+    __non_webpack_require__(preloadScript)  // eslint-disable-line
   } catch (error) {
     console.error(`Unable to load preload script: ${preloadScript}`)
     console.error(`${error}`)

lib/renderer/security-warnings.ts

@@ -3,6 +3,8 @@ import { invokeSync } from '@electron/internal/renderer/ipc-renderer-internal-ut
 
 let shouldLog: boolean | null = null
 
+const { platform, execPath, env } = process
+
 /**
  * This method checks if a security message should be logged.
  * It does so by determining whether we're running as Electron,
@@ -16,8 +18,6 @@ const shouldLogSecurityWarnings = function (): boolean {
     return shouldLog
   }
 
-  const { platform, execPath, env } = process
-
   switch (platform) {
     case 'darwin':
       shouldLog = execPath.endsWith('MacOS/Electron') ||

lib/renderer/webpack-provider.ts

@@ -0,0 +1,18 @@
+// This file provides the global, process and Buffer variables to internal
+// Electron code once they have been deleted from the global scope.
+//
+// It does this through the ProvidePlugin in the webpack.config.base.js file
+// Check out the Module.wrapper override in renderer/init.ts for more
+// information on how this works and why we need it
+
+// Rip global off of window (which is also global) so that webpack doesn't
+// auto replace it with a looped reference to this file
+const _global = (self as any || window as any).global as NodeJS.Global
+const process = _global.process
+const Buffer = _global.Buffer
+
+export {
+  _global,
+  process,
+  Buffer
+}

lib/sandboxed_renderer/init.js

@@ -8,7 +8,7 @@ const { EventEmitter } = events
 process.electronBinding = require('@electron/internal/common/electron-binding-setup').electronBindingSetup(binding.get, 'renderer')
 
 const v8Util = process.electronBinding('v8_util')
-// Expose browserify Buffer as a hidden value. This is used by C++ code to
+// Expose Buffer shim as a hidden value. This is used by C++ code to
 // deserialize Buffer instances sent from browser process.
 v8Util.setHiddenValue(global, 'Buffer', Buffer)
 // The `lib/renderer/api/ipc-renderer.js` module looks for the ipc object in the
@@ -17,7 +17,7 @@ v8Util.setHiddenValue(global, 'ipc', new EventEmitter())
 // The `lib/renderer/ipc-renderer-internal.js` module looks for the ipc object in the
 // "ipc-internal" hidden value
 v8Util.setHiddenValue(global, 'ipc-internal', new EventEmitter())
-// The process object created by browserify is not an event emitter, fix it so
+// The process object created by webpack is not an event emitter, fix it so
 // the API is more compatible with non-sandboxed renderers.
 for (const prop of Object.keys(EventEmitter.prototype)) {
   if (process.hasOwnProperty(prop)) {
@@ -143,20 +143,8 @@ const errorUtils = require('@electron/internal/common/error-utils')
 //
 // - `require`: The `preloadRequire` function
 // - `process`: The `preloadProcess` object
-// - `Buffer`: Browserify `Buffer` implementation
-// - `global`: The window object, which is aliased to `global` by browserify.
-//
-// Browserify bundles can make use of an external require function as explained
-// in https://github.com/substack/node-browserify#multiple-bundles, so electron
-// apps can use multi-module preload scripts in sandboxed renderers.
-//
-// For example, the user can create a bundle with:
-//
-//     $ browserify -x electron preload.js > renderer.js
-//
-// and any `require('electron')` calls in `preload.js` will work as expected
-// since browserify won't try to include `electron` in the bundle, falling back
-// to the `preloadRequire` function above.
+// - `Buffer`: Shim of `Buffer` implementation
+// - `global`: The window object, which is aliased to `global` by webpack.
 function runPreloadScript (preloadSrc) {
   const preloadWrapperSrc = `(function(require, process, Buffer, global, setImmediate, clearImmediate, exports) {
   ${preloadSrc}

lib/worker/init.js

@@ -13,12 +13,9 @@ require('../common/reset-search-paths')
 // Import common settings.
 require('@electron/internal/common/init')
 
-// Expose public APIs.
-Module.globalPaths.push(path.join(__dirname, 'api', 'exports'))
-
 // Export node bindings to global.
-global.require = require
-global.module = module
+global.require = __non_webpack_require__ // eslint-disable-line
+global.module = Module._cache[__filename]
 
 // Set the __filename to the path of html file if it is file: protocol.
 if (self.location.protocol === 'file:') {
@@ -27,10 +24,10 @@ if (self.location.protocol === 'file:') {
   global.__dirname = path.dirname(global.__filename)
 
   // Set module's filename so relative require can work as expected.
-  module.filename = global.__filename
+  global.module.filename = global.__filename
 
   // Also search for module under the html file.
-  module.paths = module.paths.concat(Module._nodeModulePaths(global.__dirname))
+  global.module.paths = global.module.paths.concat(Module._nodeModulePaths(global.__dirname))
 } else {
   global.__filename = __filename
   global.__dirname = __dirname