Merge pull request #10 from micro-zoe/feat/micro-app-version

fix: micro-app-version-fix
micro-zoe · Oct 19, 2023 · 53741ee · 53741ee
2 parents fccd1df + 931c32e
commit 53741ee
Showing 1 changed file with 40 additions and 23 deletions.
diff --git a/src/pages/devtools/components/micro-app-env/index.tsx b/src/pages/devtools/components/micro-app-env/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { MICRO_APP_ENV_LIST } from '../../config';
 import { DevToolsInfo } from '../../types';
@@ -9,34 +9,51 @@ interface MicroAppEnvProps {
   info: DevToolsInfo;
 }
 
-const MicroAppEnv: React.FC<MicroAppEnvProps> = props => (
-  <div className={styles.container}>
-    <table className={styles.table}>
-      <tr>
-        <th>Name</th>
-        <th>Value</th>
-        <th>Describe</th>
-      </tr>
-      {
-        MICRO_APP_ENV_LIST.map(p => (
+const MicroAppEnv: React.FC<MicroAppEnvProps> = (props) => {
+  const [devInfo, setDevInfo] = React.useState({});
+  useEffect(() => {
+    chrome.devtools.inspectedWindow.eval(
+      'document.querySelector("micro-app")?.version',
+      (res: string) => {
+        if (res) {
+          setDevInfo(res);
+        }
+      },
+    );
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <table className={styles.table}>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+          <th>Describe</th>
+        </tr>
+        { MICRO_APP_ENV_LIST.map(p => (
           <tr>
-            <td><div>{ p.name }</div></td>
             <td>
-              <div style={{
-                width: '1200px',
-                overflow: 'hidden',
-              }}
+              <div>{ p.name }</div>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: '1200px',
+                  overflow: 'hidden',
+                }}
               >
-                { JSON.stringify(props.info.currentMicroApp?.env?.[p.name]) ?? 'undefined' }
-
+                { p.name === '__MICRO_APP_VERSION__'
+                  ? JSON.stringify(devInfo)
+                  : JSON.stringify(props.info.currentMicroApp?.env?.[p.name]) || 'undefined' }
               </div>
             </td>
             <td>{ p.describe }</td>
           </tr>
-        ))
-      }
-    </table>
-  </div>
-);
+        )) }
+      </table>
+      <div />
+    </div>
+  );
+};
 
 export default MicroAppEnv;