[gem-devtools] Clean dup code

mantou132 · Dec 3, 2023 · 65cd9eb · 65cd9eb
1 parent c2a2709
commit 65cd9eb
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 60 deletions.
diff --git a/packages/gem-devtools/src/common.ts b/packages/gem-devtools/src/common.ts
@@ -1,6 +1,9 @@
 import { devtools } from 'webextension-polyfill';
 
 import { configureStore } from './store';
+import { preload } from './scripts/preload';
+
+const preloadSource = preload.toString();
 
 /**
  * execution script in page
@@ -14,7 +17,7 @@ export async function execution<Func extends (...rest: any) => any>(
 ): Promise<ReturnType<Func>> {
   const source = func.toString();
   const [data, errorInfo] = await devtools.inspectedWindow.eval(
-    `(${source}).apply(null, ${JSON.stringify(args)})`,
+    `(${preloadSource})();(${source}).apply(null, ${JSON.stringify(args)})`,
     // Firefox not support frameURL: undefined
     JSON.parse(
       JSON.stringify({

diff --git a/packages/gem-devtools/src/scripts/dom-stat.ts b/packages/gem-devtools/src/scripts/dom-stat.ts
@@ -14,10 +14,9 @@ export function getDomStat(data: PanelStore): PanelStore {
 
   currentElementsMap.clear();
   let n = 0;
-  const temp: Element[] = [document.documentElement];
-  while (!!temp.length) {
+
+  window.__GEM_DEVTOOLS__PRELOAD__.traverseDom((element) => {
     const id = String(++n);
-    const element = temp.pop()!;
     const tag = element.tagName.toLowerCase();
     const tagAndId = [tag, id].join();
 
@@ -34,11 +33,7 @@ export function getDomStat(data: PanelStore): PanelStore {
       gemElements.push(tagAndId);
       usedDefinedGemElements.add(tag);
     }
-
-    if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
-    if (element.firstElementChild) temp.push(element.firstElementChild);
-    if (element.nextElementSibling) temp.push(element.nextElementSibling);
-  }
+  });
 
   return {
     ...data,

diff --git a/packages/gem-devtools/src/scripts/get-all-frame.ts b/packages/gem-devtools/src/scripts/get-all-frame.ts
@@ -1,20 +1,12 @@
 export function getAllFrames() {
-  const result = [];
-
-  // 同 dom-stat 迭代
-  const temp: Element[] = [document.documentElement];
-  while (!!temp.length) {
-    const element = temp.pop()!;
+  const result: string[] = [];
 
+  window.__GEM_DEVTOOLS__PRELOAD__.traverseDom((element) => {
     if (element instanceof HTMLIFrameElement) {
       const frameURL = element.src;
       if (frameURL) result.push(frameURL);
     }
-
-    if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
-    if (element.firstElementChild) temp.push(element.firstElementChild);
-    if (element.nextElementSibling) temp.push(element.nextElementSibling);
-  }
+  });
 
   return result;
 }
diff --git a/packages/gem-devtools/src/scripts/inspect-value.ts b/packages/gem-devtools/src/scripts/inspect-value.ts
@@ -1,28 +1,9 @@
 import type { Path } from '../store';
 
-// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/eval#helpers
-declare let $0: any;
 declare function inspect(arg: any): void;
 
 export const inspectValue = (path: Path, token: string) => {
-  // [["shadowRoot", ""], "querySelector", "[ref=child-ref]"]
-  // 只有 constructor 函数会当成对象读取
-  const value = path.reduce((p, c, index) => {
-    if (typeof p === 'function' && path[index - 1] !== 'constructor') {
-      if (Array.isArray(c)) {
-        return p(...c);
-      } else {
-        return p(c);
-      }
-    } else {
-      if (Array.isArray(c)) {
-        return c.reduce((pp, cc) => pp || (cc === '' ? p : p[cc]), undefined);
-      } else {
-        const value = p[c];
-        return typeof value === 'function' && c !== 'constructor' ? value.bind(p) : value;
-      }
-    }
-  }, $0);
+  const value = window.__GEM_DEVTOOLS__PRELOAD__.readProp(path);
   if (value instanceof Element) {
     let element = value;
     if (element instanceof HTMLSlotElement) {

diff --git a/packages/gem-devtools/src/scripts/preload.ts b/packages/gem-devtools/src/scripts/preload.ts
@@ -0,0 +1,50 @@
+import type { Path } from '../store';
+
+type DevToolsHookPreload = {
+  readProp: (path: Path) => any;
+  traverseDom: (callback: (element: Element) => void) => void;
+};
+declare global {
+  interface Window {
+    __GEM_DEVTOOLS__PRELOAD__: DevToolsHookPreload;
+  }
+}
+
+// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/eval#helpers
+declare let $0: any;
+
+export function preload() {
+  window.__GEM_DEVTOOLS__PRELOAD__ = {
+    // [["shadowRoot", ""], "querySelector", "[ref=child-ref]"]
+    // 只有 constructor 函数会当成对象读取
+    readProp(path) {
+      return path.reduce((p, c, index) => {
+        if (typeof p === 'function' && path[index - 1] !== 'constructor') {
+          if (Array.isArray(c)) {
+            return p(...c);
+          } else {
+            return p(c);
+          }
+        } else {
+          if (Array.isArray(c)) {
+            return c.reduce((pp, cc) => pp || (cc === '' ? p : p[cc]), undefined);
+          } else {
+            const value = p[c];
+            return typeof value === 'function' && c !== 'constructor' ? value.bind(p) : value;
+          }
+        }
+      }, $0);
+    },
+    traverseDom(callback) {
+      // 同 dom-stat 迭代
+      const temp: Element[] = [document.documentElement];
+      while (!!temp.length) {
+        const element = temp.pop()!;
+        callback(element);
+        if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
+        if (element.firstElementChild) temp.push(element.firstElementChild);
+        if (element.nextElementSibling) temp.push(element.nextElementSibling);
+      }
+    },
+  };
+}
diff --git a/packages/gem-devtools/src/scripts/set-value.ts b/packages/gem-devtools/src/scripts/set-value.ts
@@ -1,28 +1,9 @@
 import { Path } from '../store';
 
-// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/eval#helpers
-declare let $0: any;
-
 export const setValue = (path: Path, value: string | number | boolean | null) => {
   const key = String(path.pop());
 
-  // 同 inspect-value
-  const obj = path.reduce((p, c, index) => {
-    if (typeof p === 'function' && path[index - 1] !== 'constructor') {
-      if (Array.isArray(c)) {
-        return p(...c);
-      } else {
-        return p(c);
-      }
-    } else {
-      if (Array.isArray(c)) {
-        return c.reduce((pp, cc) => pp || (cc === '' ? p : p[cc]), undefined);
-      } else {
-        const value = p[c];
-        return typeof value === 'function' && c !== 'constructor' ? value.bind(p) : value;
-      }
-    }
-  }, $0);
+  const obj = window.__GEM_DEVTOOLS__PRELOAD__.readProp(path);
 
   obj[key] = value;
 };