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/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
+}