Merge pull request #35 from micro-zoe/environment

Dynamically retrieve global variables and add a link to the official documentation
micro-zoe · Dec 19, 2023 · ed14bbd · ed14bbd
2 parents 753f0c3 + 491a4b7
commit ed14bbd
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 36 deletions.
diff --git a/src/pages/devtools/components/micro-app-env/index.module.less b/src/pages/devtools/components/micro-app-env/index.module.less
@@ -19,3 +19,9 @@
     text-align: left;
   }
 }
+
+.detailIcon {
+  margin-left: 5px;
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/src/pages/devtools/components/micro-app-env/index.tsx b/src/pages/devtools/components/micro-app-env/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { MICRO_APP_ENV_LIST } from '../../config';
+import { MICRO_APP_ENV_INFO } from '../../config';
 import { DevToolsInfo } from '../../types';
 
 import styles from './index.module.less';
@@ -21,35 +21,50 @@ const MicroAppEnv: React.FC<MicroAppEnvProps> = (props) => {
       },
     );
   }, []);
+  if (!props.info.currentMicroApp?.env) {
+    return null;
+  }
+
+  const showDetailIcon = (link: string) => (
+    <a href={link || 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env'} className={styles.detailIcon} target="blank">
+      <svg viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
+        <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" />
+      </svg>
+    </a>
+  );
 
   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 => (
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Value</th>
+            <th>Describe</th>
+          </tr>
+        </thead>
+        <tbody>
           <tr>
             <td>
-              <div>{ p.name }</div>
-            </td>
-            <td>
-              <div
-                style={{
-                  width: '1200px',
-                  overflow: 'hidden',
-                }}
-              >
-                { p.name === '__MICRO_APP_VERSION__'
-                  ? JSON.stringify(devInfo)
-                  : JSON.stringify(props.info.currentMicroApp?.env?.[p.name]) || 'undefined' }
-              </div>
+              <div>__MICRO_APP_VERSION__</div>
             </td>
-            <td>{ p.describe }</td>
+            <td>{ JSON.stringify(devInfo) }</td>
+            <td>微前端版本号</td>
           </tr>
-        )) }
+          { Object.keys(props.info.currentMicroApp?.env).map(p => (
+            <tr key={p}>
+              <td width="20%">
+                <div>
+                  { p }
+                  { showDetailIcon(MICRO_APP_ENV_INFO[p]?.url) }
+                </div>
+              </td>
+              <td>{ JSON.stringify(props.info.currentMicroApp?.env[p]) || 'undefined' }</td>
+              <td width="30%">{ MICRO_APP_ENV_INFO[p]?.describe }</td>
+            </tr>
+          )) }
+        </tbody>
       </table>
       <div />
     </div>

diff --git a/src/pages/devtools/config/index.ts b/src/pages/devtools/config/index.ts
@@ -5,10 +5,25 @@ export const HEADER_TAB_LIST = [
   { name: 'ROUTE_MATCH', label: 'Route' },
 ];
 
-export const MICRO_APP_ENV_LIST: { name: string; describe: string;eval: string }[] = [
-  { name: '__MICRO_APP_ENVIRONMENT__', describe: '判断应用是否在微前端环境中', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_ENVIRONMENT__||window.__MICRO_APP_ENVIRONMENT__' },
-  { name: '__MICRO_APP_VERSION__', describe: '微前端版本号', eval: 'document.querySelector("micro-app")?.version' },
-  { name: '__MICRO_APP_NAME__', describe: '应用名称', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_NAME__||window.__MICRO_APP_NAME__' },
-  { name: '__MICRO_APP_PUBLIC_PATH__', describe: '子应用的静态资源前缀', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_PUBLIC_PATH__||window.__MICRO_APP_PUBLIC_PATH__' },
-  { name: '__MICRO_APP_BASE_ROUTE__', describe: '子应用的基础路由', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_ENVIRONMENT__||window.__MICRO_APP_ENVIRONMENT__' },
-];
+export const MICRO_APP_ENV_INFO = {
+  __MICRO_APP_ENVIRONMENT__: {
+    describe: '判断应用是否在微前端环境中',
+    url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_environment__',
+  },
+  __MICRO_APP_NAME__: {
+    describe: '应用名称',
+    url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_name__',
+  },
+  __MICRO_APP_PUBLIC_PATH__: {
+    describe: '子应用的静态资源前缀',
+    url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_public_path__',
+  },
+  __MICRO_APP_BASE_URL__: {
+    describe: '子应用的基础网址',
+    url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_base_route__',
+  },
+  __MICRO_APP_BASE_ROUTE__: {
+    describe: '子应用的基础路由',
+    url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_base_route__',
+  },
+};
diff --git a/src/pages/devtools/dev-open.tsx b/src/pages/devtools/dev-open.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 
-import { decodeJSON } from '@/utils/json';
-
 import Communicate from './components/communicate';
 import Console from './components/console-log';
 import HeaderTabs from './components/header-tabs';
 import MicroAppEnv from './components/micro-app-env';
 import Route from './components/route-match';
-import { HEADER_TAB_LIST, MICRO_APP_ENV_LIST } from './config';
-import { DevToolsInfo, DevToolsMicroAppInfo } from './types';
+import { HEADER_TAB_LIST } from './config';
+import { DevToolsInfo } from './types';
 
 import styles from './index.module.less';
 

diff --git a/src/pages/devtools/index.tsx b/src/pages/devtools/index.tsx
@@ -8,12 +8,12 @@ import HeaderTabs from './components/header-tabs';
 import MicroAppEnv from './components/micro-app-env';
 import Route from './components/route-match';
 import ViewApp from './components/view-app';
-import { HEADER_TAB_LIST, MICRO_APP_ENV_LIST } from './config';
+import { HEADER_TAB_LIST } from './config';
 import { DevToolsInfo, DevToolsMicroAppInfo } from './types';
 
 import styles from './index.module.less';
 
-interface DevToolsPageProps {}
+interface DevToolsPageProps { }
 
 interface DevToolsPageState {
   activeTab: string;
@@ -28,7 +28,17 @@ class DevToolsPage extends React.PureComponent<DevToolsPageProps, DevToolsPageSt
 
   private updateInfo() {
     chrome.devtools.inspectedWindow.eval(
-      `JSON.stringify({${MICRO_APP_ENV_LIST.map(p => `[${JSON.stringify(p.name)}]: ${p.eval}`).join(',')}})`,
+      `JSON.stringify(function (){
+        const thisWindow = window.__MICRO_APP_PROXY_WINDOW__ || window;
+        const allKey = JSON.stringify(Object.keys(thisWindow));
+        let microAppInfo = {};
+        for (let el of JSON.parse(allKey)){
+          if (el.indexOf('__MICRO_APP') > -1){
+            microAppInfo[el] = thisWindow[el];
+          }
+        }
+        return microAppInfo;
+      }())`,
       (res: string) => {
         const env = decodeJSON<DevToolsMicroAppInfo['env']>(res);
         if (env) {