Merge pull request #16 from HuolalaTech/feat/lazy-sync-page-and-storage

lazily sync `page & storage` data until receive `refresh` event message from debugger
HuolalaTech · Oct 24, 2023 · f2a7d66 · f2a7d66
2 parents 5fe0e6d + 9588225
commit f2a7d66
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 50 deletions.
diff --git a/src/plugins/page.ts b/src/plugins/page.ts
@@ -12,10 +12,6 @@ export default class PagePlugin implements PageSpyPlugin {
     if (PagePlugin.hasInitd) return;
     PagePlugin.hasInitd = true;
 
-    window.addEventListener('load', () => {
-      const msg = PagePlugin.collectHtml();
-      SocketStore.broadcastMessage(msg);
-    });
     SocketStore.addListener(DEBUG_MESSAGE_TYPE.REFRESH, ({ source }, reply) => {
       const { data } = source;
       if (data === 'page') {

diff --git a/src/plugins/storage.ts b/src/plugins/storage.ts
@@ -13,14 +13,29 @@ export class StoragePlugin implements PageSpyPlugin {
     if (StoragePlugin.hasInitd) return;
     StoragePlugin.hasInitd = true;
 
-    StoragePlugin.takeLocalStorage();
-    StoragePlugin.takeSessionStorage();
-    StoragePlugin.takeCookie();
-
     StoragePlugin.listenRefreshEvent();
     StoragePlugin.initStorageProxy();
   }
 
+  private static listenRefreshEvent() {
+    socketStore.addListener(DEBUG_MESSAGE_TYPE.REFRESH, ({ source }) => {
+      const { data } = source;
+      switch (data) {
+        case 'localStorage':
+          StoragePlugin.takeLocalStorage();
+          break;
+        case 'sessionStorage':
+          StoragePlugin.takeSessionStorage();
+          break;
+        case 'cookie':
+          StoragePlugin.takeCookie();
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
   private static takeLocalStorage() {
     const local = { ...localStorage };
     Object.keys(local).forEach((name) => {
@@ -55,21 +70,6 @@ export class StoragePlugin implements PageSpyPlugin {
           StoragePlugin.sendStorageItem(data);
         });
       });
-      window.cookieStore.addEventListener('change', (e) => {
-        const { changed, deleted } = e as CookieChangeEvent;
-        if (changed.length > 0) {
-          changed.forEach((cookie) => {
-            const data = StoragePlugin.formatCookieInfo(cookie, 'set');
-            StoragePlugin.sendStorageItem(data);
-          });
-        }
-        if (deleted.length > 0) {
-          deleted.forEach((cookie) => {
-            const data = StoragePlugin.formatCookieInfo(cookie, 'remove');
-            StoragePlugin.sendStorageItem(data);
-          });
-        }
-      });
     } else {
       document.cookie.split('; ').forEach((item) => {
         const [name, value] = item.split('=');
@@ -83,25 +83,6 @@ export class StoragePlugin implements PageSpyPlugin {
     }
   }
 
-  private static listenRefreshEvent() {
-    socketStore.addListener(DEBUG_MESSAGE_TYPE.REFRESH, ({ source }) => {
-      const { data } = source;
-      switch (data) {
-        case 'localStorage':
-          StoragePlugin.takeLocalStorage();
-          break;
-        case 'sessionStorage':
-          StoragePlugin.takeSessionStorage();
-          break;
-        case 'cookie':
-          StoragePlugin.takeCookie();
-          break;
-        default:
-          break;
-      }
-    });
-  }
-
   private static formatCookieInfo(
     cookie: CookieStoreValue,
     action: SpyStorage.ActionType = 'get',
@@ -119,7 +100,8 @@ export class StoragePlugin implements PageSpyPlugin {
 
   private static sendStorageItem(info: Omit<SpyStorage.DataItem, 'id'>) {
     const data = makeMessage(DEBUG_MESSAGE_TYPE.STORAGE, info);
-    socketStore.broadcastMessage(data);
+    // The user wouldn't want to get the stale data, so here we set the 2nd parameter to true.
+    socketStore.broadcastMessage(data, true);
   }
 
   private static initStorageProxy() {
@@ -149,6 +131,24 @@ export class StoragePlugin implements PageSpyPlugin {
         value: String(value),
       });
     };
+
+    if (window.cookieStore) {
+      window.cookieStore.addEventListener('change', (e) => {
+        const { changed, deleted } = e as CookieChangeEvent;
+        if (changed.length > 0) {
+          changed.forEach((cookie) => {
+            const data = StoragePlugin.formatCookieInfo(cookie, 'set');
+            StoragePlugin.sendStorageItem(data);
+          });
+        }
+        if (deleted.length > 0) {
+          deleted.forEach((cookie) => {
+            const data = StoragePlugin.formatCookieInfo(cookie, 'remove');
+            StoragePlugin.sendStorageItem(data);
+          });
+        }
+      });
+    }
   }
 
   private static getStorageType(ins: Storage): SpyStorage.DataType {

diff --git a/tests/plugins/page.test.ts b/tests/plugins/page.test.ts
@@ -10,7 +10,7 @@ describe('Page plugin', () => {
 
     new PagePlugin().onCreated();
     window.dispatchEvent(new Event('load'));
-    expect(trigger).toHaveBeenCalledTimes(1);
+    expect(trigger).toHaveBeenCalledTimes(0);
 
     // @ts-ignore
     socket.dispatchEvent(DEBUG_MESSAGE_TYPE.REFRESH, {
@@ -21,6 +21,6 @@ describe('Page plugin', () => {
       from: '',
       to: '',
     } as any);
-    expect(trigger).toHaveBeenCalledTimes(2);
+    expect(trigger).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/tests/plugins/storage.test.ts b/tests/plugins/storage.test.ts
@@ -17,18 +17,18 @@ describe('Storage plugin', () => {
     new StoragePlugin().onCreated();
     await cookieStore.set('1', '1');
     await cookieStore.set('2', '2');
-    expect(trigger).toHaveBeenCalledTimes(3);
+    expect(trigger).toHaveBeenCalledTimes(2);
     await cookieStore.delete('1');
     await cookieStore.delete('2');
-    expect(trigger).toHaveBeenCalledTimes(5);
+    expect(trigger).toHaveBeenCalledTimes(4);
     localStorage.setItem('1', '1');
     sessionStorage.setItem('2', '2');
-    expect(trigger).toHaveBeenCalledTimes(7);
+    expect(trigger).toHaveBeenCalledTimes(6);
     localStorage.removeItem('1');
     sessionStorage.removeItem('2');
-    expect(trigger).toHaveBeenCalledTimes(9);
+    expect(trigger).toHaveBeenCalledTimes(8);
     localStorage.clear();
     sessionStorage.clear();
-    expect(trigger).toHaveBeenCalledTimes(11);
+    expect(trigger).toHaveBeenCalledTimes(10);
   });
 });