fix(preload): preload sometimes fails to execute the code inside corr…

…ectly (#362)

1. remove DOMNodeInserted,  because in some uncertain situations (may berelated to computer configuration), this methods will not be triggered
2. add rxjs

src/main-app/package.json

@@ -73,6 +73,7 @@
   "dependencies": {
     "agora-electron-sdk": "education290",
     "jquery": "^3.5.1",
+    "rxjs": "^6.6.6",
     "ts-enum-util": "^4.0.2"
   },
   "license": "MIT"

src/main-app/src/preload.ts

@@ -1,27 +1,36 @@
-setImmediate(() => {
-    const fixJQueryHosts = ["open.weixin.qq.com"];
+const { ipcRenderer } = require("electron");
 
-    document.addEventListener("DOMNodeInserted", function DOMNodeInserted() {
-        if (!window || !location.protocol) {
-            return;
-        }
+/**
+ * cannot be used here DOMContentLoaded or DOMNodeInserted
+ * because in some uncertain situations (may be related to computer configuration), these two methods will not be triggered
+ */
 
-        if (fixJQueryHosts.includes(location.host) && !window.$) {
-            window.$ = window.jQuery = require("jquery");
-        }
+/**
+ * this method will only be triggered on the main page
+ * see: WindowManager.ts
+ */
+ipcRenderer.once("inject-agora-electron-sdk-addon", () => {
+    window.AgoraRtcEngine = require("agora-electron-sdk").default;
 
-        if (
-            (location.protocol === "file:" &&
-                location.pathname.endsWith("static/render/index.html")) ||
-            location.hostname === "localhost" ||
-            location.hostname === "127.0.0.1"
-        ) {
-            window.AgoraRtcEngine = require("agora-electron-sdk").default;
+    window.rtcEngine = new window.AgoraRtcEngine();
+    window.rtcEngine.initialize(process.env.AGORA_APP_ID);
+});
 
-            window.rtcEngine = new window.AgoraRtcEngine();
-            window.rtcEngine.initialize(process.env.AGORA_APP_ID);
-        }
+// delay sending event. prevent the main process from being too late listen for this event
+setTimeout(() => {
+    ipcRenderer.send("preload-load");
+}, 0);
 
-        document.removeEventListener("DOMNodeInserted", DOMNodeInserted);
-    });
+// because DOMContentLoaded and DOMNodeInserted cannot be used, a new method is adopted to solve the problem of jQuery import failure
+Object.defineProperties(window, {
+    $: {
+        get() {
+            return require("jquery");
+        },
+    },
+    jQuery: {
+        get() {
+            return require("jquery");
+        },
+    },
 });

src/main-app/src/utils/WindowManager.ts

@@ -1,7 +1,9 @@
-import { BrowserWindow, BrowserWindowConstructorOptions } from "electron";
+import { BrowserWindow, BrowserWindowConstructorOptions, ipcMain, IpcMainEvent } from "electron";
 import { windowHookClose, windowReadyToShow } from "./WindowEvent";
 import runtime from "./Runtime";
 import { constants } from "types-pkg";
+import { Subject, zip } from "rxjs";
+import { ignoreElements, mergeMap } from "rxjs/operators";
 
 const defaultWindowOptions: Pick<WindowOptions, "disableClose" | "isOpenDevTools"> = {
     disableClose: false,
@@ -71,7 +73,7 @@ export class WindowManager {
     }
 
     public createMainWindow(): CustomSingleWindow {
-        return this.createWindow(
+        const win = this.createWindow(
             {
                 url: runtime.startURL,
                 name: constants.WindowsName.Main,
@@ -82,6 +84,32 @@ export class WindowManager {
                 height: 668,
             },
         );
+
+        const domReady = new Subject<string>();
+        const preloadLoad = new Subject<IpcMainEvent>();
+
+        win.window.webContents.on("dom-ready", () => {
+            domReady.next("");
+        });
+
+        ipcMain.on("preload-load", event => {
+            preloadLoad.next(event);
+        });
+
+        // use the zip operator to solve the problem of not sending xx event after refreshing the page
+        // don’t worry about sending multiple times, because once is used in preload.ts
+        // link: https://www.learnrxjs.io/learn-rxjs/operators/combination/zip
+        zip(domReady, preloadLoad)
+            .pipe(
+                mergeMap(([, event]) => {
+                    event.sender.send("inject-agora-electron-sdk-addon");
+                    return [];
+                }),
+                ignoreElements(),
+            )
+            .subscribe();
+
+        return win;
     }
 }
 

yarn.lock

@@ -11047,6 +11047,13 @@ rxjs@^6.6.3:
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^6.6.6:
+  version "6.6.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.6.tgz#14d8417aa5a07c5e633995b525e1e3c0dec03b70"
+  integrity sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"