feat: remove need to manually call monitorRenderer (#271)

* feat: remove need to manually call `monitorRenderer`

* docs: update install instructions

* docs: correct devtron import to use `@electron/devtron`

* docs: remove `app.whenReady()` install example from README

Author: hitarth-gg

README.md

@@ -16,26 +16,11 @@
 - In your Electron app's `main.js` (or other relevant file) add the following code to load Devtron:
 
 ```js
-// main.js
+//main.js
 const { devtron } = require('@electron/devtron');
 // or import { devtron } from '@electron/devtron'
 
-// function createWindow() {...}
-
-app.whenReady().then(() => {
-  devtron.install();
-  // ...
-});
-```
-
-- In your Electron app's `preload.js` (or other relevant file) add the following code to load Devtron:
-
-```js
-// preload.js
-const { monitorRenderer } = require('@electron/devtron/monitorRenderer');
-// or import { monitorRenderer } from '@electron/devtron/monitorRenderer'
-
-monitorRenderer();
+devtron.install(); // call this function at the top of your file
 ```
 
 If Devtron is installed correctly, it should appear as a tab in the Developer Tools of your Electron app.

package.json

@@ -8,15 +8,15 @@
       "require": "./dist/cjs/index.cjs",
       "types": "./dist/types/index.d.ts"
     },
-    "./monitorRenderer": {
-      "import": "./dist/mjs/electron-renderer-tracker.mjs",
-      "require": "./dist/cjs/electron-renderer-tracker.cjs",
-      "types": "./dist/types/lib/electron-renderer-tracker.d.ts"
-    },
     "./service-worker-preload": {
       "import": "./dist/mjs/service-worker-preload.mjs",
       "require": "./dist/cjs/service-worker-preload.cjs",
       "types": "./dist/types/lib/service-worker-preload.d.ts"
+    },
+    "./renderer-preload": {
+      "import": "./dist/mjs/renderer-preload.mjs",
+      "require": "./dist/cjs/renderer-preload.cjs",
+      "types": "./dist/types/lib/renderer-preload.d.ts"
     }
   },
   "scripts": {

src/index.ts

@@ -116,16 +116,27 @@ async function install() {
     try {
       // register service worker preload script
       const dirname = __dirname; // __dirname is replaced with import.meta.url in ESM builds using webpack
-      const filePath = createRequire(dirname).resolve('@electron/devtron/service-worker-preload');
+      const serviceWorkerPreloadPath = createRequire(dirname).resolve(
+        '@electron/devtron/service-worker-preload',
+      );
+      const rendererPreloadPath = createRequire(dirname).resolve(
+        '@electron/devtron/renderer-preload',
+      );
 
       ses.registerPreloadScript({
-        filePath,
+        filePath: serviceWorkerPreloadPath,
         type: 'service-worker',
-        id: 'devtron-preload',
+        id: 'devtron-sw-preload',
+      });
+
+      ses.registerPreloadScript({
+        filePath: rendererPreloadPath,
+        type: 'frame',
+        id: 'devtron-renderer-preload',
       });
 
       // load extension
-      const extensionPath = path.resolve(filePath, '..', '..', 'extension');
+      const extensionPath = path.resolve(serviceWorkerPreloadPath, '..', '..', 'extension');
       devtron = await ses.extensions.loadExtension(extensionPath, { allowFileAccess: true });
       await startServiceWorker(ses, devtron);
       console.log('Devtron loaded successfully');

src/lib/renderer-preload.ts

@@ -0,0 +1,3 @@
+import { monitorRenderer } from './electron-renderer-tracker';
+
+monitorRenderer();

webpack.node.config.ts

@@ -3,7 +3,7 @@ import { DefinePlugin, type Configuration } from 'webpack';
 
 const entryPoints = {
   index: './src/index.ts',
-  'electron-renderer-tracker': './src/lib/electron-renderer-tracker.ts',
+  'renderer-preload': './src/lib/renderer-preload.ts',
   'service-worker-preload': './src/lib/service-worker-preload.ts',
 };