feat(chrome-devtools): add inspector

Author: 2heal1

.changeset/few-dolls-mix.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/devtools': patch
+---
+
+feat(chrome-devtools): add inspector

packages/chrome-devtools/manifest.json

@@ -17,6 +17,7 @@
         "static/js/post-message.js",
         "static/js/post-message-start.js",
         "static/js/fast-refresh.js",
+        "static/js/inspector-plugin.js",
         "static/js/snapshot-plugin.js"
       ],
       "matches": ["<all_urls>"]
@@ -35,7 +36,11 @@
     },
     {
       "matches": ["<all_urls>"],
-      "js": ["static/js/fast-refresh.js", "static/js/snapshot-plugin.js"],
+      "js": [
+        "static/js/fast-refresh.js",
+        "static/js/snapshot-plugin.js",
+        "static/js/inspector-plugin.js"
+      ],
       "world": "MAIN",
       "run_at": "document_start"
     }

packages/chrome-devtools/modern.config.ts

@@ -9,6 +9,8 @@ export default defineConfig({
     },
   },
   output: {
+    injectStyles: process.env.INSPECTOR ? true : false,
+    cleanDistPath: process.env.INSPECTOR ? true : false,
     disableInlineRuntimeChunk: true,
     disableFilenameHash: true,
     disableMinimize: true,
@@ -20,6 +22,16 @@ export default defineConfig({
   },
   tools: {
     webpack: (config: Record<string, any>) => {
+      if (process.env.INSPECTOR) {
+        config.entry = {
+          'inspector-plugin': './src/utils/chrome/inspector-plugin.ts',
+        };
+        config.externals = {
+          react: '_mfReact',
+        };
+        return config;
+      }
+
       if (process.env.E2ETEST) {
         config.entry.worker = './src/worker/index.ts';
       }

packages/chrome-devtools/package.json

@@ -12,7 +12,7 @@
     "storybook": "storybook dev -p 6006",
     "reset": "npx rimraf ./**/node_modules",
     "dev": "modern dev",
-    "build": "modern build && node postpack.js",
+    "build": " INSPECTOR=true modern build && modern build && node postpack.js",
     "build:debug": "DEBUG=true modern build && node postpack.js",
     "build:lib": "rm -rf dist && modern-module build -c modern.lib.config.ts",
     "release": "npm publish --tag canary",

packages/chrome-devtools/src/component/Form/index.tsx

@@ -44,7 +44,9 @@ interface FormProps {
   setFormStatus: React.Dispatch<SetStateAction<FormItemStatus[]>>;
   validateForm: any;
   enableHMR: string;
+  enableInspector: string;
   onHMRChange: (on: boolean) => void;
+  onInspectorChange: (on: boolean) => void;
 }
 const FormComponent = (props: FormProps & RootComponentProps) => {
   const {
@@ -54,7 +56,9 @@ const FormComponent = (props: FormProps & RootComponentProps) => {
     setFormStatus,
     validateForm,
     enableHMR,
+    enableInspector,
     onHMRChange,
+    onInspectorChange,
     versionList,
     setVersionList,
     getVersion,
@@ -185,6 +189,10 @@ const FormComponent = (props: FormProps & RootComponentProps) => {
     onHMRChange(on);
   };
 
+  const inspectorChange = (on: boolean) => {
+    onInspectorChange(on);
+  };
+
   const onKeyChange = async (key: string, index: number) => {
     const version = await getVersion?.(key);
     if (version) {
@@ -229,6 +237,13 @@ const FormComponent = (props: FormProps & RootComponentProps) => {
                 onChange={hmrChange}
                 className={styles.switch}
               />
+              <Switch
+                checked={enableInspector === 'enable'}
+                checkedText={'Enable Inspector'}
+                uncheckedText={'Disable Inspector'}
+                onChange={inspectorChange}
+                className={styles.switch}
+              />
             </div>
           </div>
 

packages/chrome-devtools/src/component/Layout/index.tsx

@@ -33,6 +33,8 @@ import {
   __ENABLE_FAST_REFRESH__,
   BROWSER_ENV_KEY,
   __FEDERATION_DEVTOOLS__,
+  ENABLEINSPECTOR,
+  __ENABLE_INSPECTOR__,
 } from '../../template/constant';
 interface FormItemType {
   key: string;
@@ -66,6 +68,7 @@ const Layout = (
   const [snapshot, setSnapshot] = useState(moduleInfo);
   const [form] = Form.useForm();
   const [enableHMR, setEnalbeHMR] = useState('disable');
+  const [enableInspector, setEnalbeInspector] = useState('disable');
 
   const { run } = useDebounceFn(
     async (formData) => {
@@ -159,6 +162,12 @@ const Layout = (
         onHMRChange(enable);
       }
     });
+    chrome.storage.sync.get([ENABLEINSPECTOR]).then((data) => {
+      const enable = data[ENABLEINSPECTOR];
+      if (typeof enable === 'boolean') {
+        onHMRChange(enable);
+      }
+    });
   }, []);
 
   useEffect(() => {
@@ -200,6 +209,19 @@ const Layout = (
     injectScript(reloadPage, false);
   };
 
+  const onInspectorChange = (on: boolean) => {
+    setEnalbeInspector(on ? 'enable' : 'disable');
+    chrome.storage.sync.set({
+      [ENABLEINSPECTOR]: on,
+    });
+    if (on) {
+      mergeStorage(__FEDERATION_DEVTOOLS__, __ENABLE_INSPECTOR__, on);
+    } else {
+      removeStorageKey(__FEDERATION_DEVTOOLS__, __ENABLE_INSPECTOR__);
+    }
+    injectScript(reloadPage, false);
+  };
+
   return (
     <>
       <Form
@@ -215,6 +237,8 @@ const Layout = (
           validateForm={() => validateForm(form)}
           enableHMR={enableHMR}
           onHMRChange={onHMRChange}
+          enableInspector={enableInspector}
+          onInspectorChange={onInspectorChange}
           versionList={versionList}
           setVersionList={setVersionList}
           getVersion={getVersion}

packages/chrome-devtools/src/template/constant.ts

@@ -1,6 +1,7 @@
 export const FormID = 'FormID';
 
 export const ENABLEHMR = 'enableHMR';
+export const ENABLEINSPECTOR = 'enableInspector';
 
 export const proxyFormField = 'proxyFormField';
 
@@ -51,6 +52,7 @@ export const statusInfo: Record<
 };
 
 export const __ENABLE_FAST_REFRESH__ = 'enableFastRefresh';
+export const __ENABLE_INSPECTOR__ = 'enableInspector';
 
 export const BROWSER_ENV_KEY = 'MF_ENV';
 

packages/chrome-devtools/src/utils/chrome/ComponentInspector.css

@@ -0,0 +1,86 @@
+.component-inspector {
+  position: relative;
+  display: inline-block;
+}
+
+.inspector-info {
+  position: fixed;
+  z-index: 1000;
+  background: #1a1a1a;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.inspector-overlay {
+  position: fixed;
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 999;
+  background:
+    linear-gradient(90deg, #3b82f6 0%, #ec4899 50%, #3b82f6 100%) 0 0,
+    linear-gradient(90deg, #3b82f6 0%, #ec4899 50%, #3b82f6 100%) 0 100%,
+    linear-gradient(0deg, #3b82f6 0%, #ec4899 50%, #3b82f6 100%) 0 0,
+    linear-gradient(0deg, #3b82f6 0%, #ec4899 50%, #3b82f6 100%) 100% 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  background-size:
+    200% 3px,
+    200% 3px,
+    3px 200%,
+    3px 200%; /* 将边框从 2px 加粗到 3px */
+  animation: borderRotate 4s linear infinite;
+}
+
+@keyframes borderRotate {
+  0% {
+    background-position:
+      0% 0,
+      0% 100%,
+      0 0%,
+      100% 0%;
+  }
+  100% {
+    background-position:
+      200% 0,
+      -200% 100%,
+      0 -200%,
+      100% 200%;
+  }
+}
+.mf-tag {
+  color: #646cff;
+  font-weight: 500;
+  position: relative;
+  padding-left: 16px;
+}
+
+.mf-tag::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  background-image: url('https://module-federation.io/svg.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.divider {
+  color: #4a4a4a;
+}
+
+.gradient-text {
+  background: linear-gradient(90deg, #60a5fa, #ec4899);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 500;
+}

packages/chrome-devtools/src/utils/chrome/ComponentInspector.tsx

@@ -0,0 +1,85 @@
+import type React from 'react';
+import './ComponentInspector.css';
+
+interface InspectorInfo {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export const wrapComponent = ({
+  react,
+  CustomComponent,
+  componentName,
+  mfName,
+}: {
+  react: typeof React;
+  CustomComponent: React.ComponentType;
+  componentName: string;
+  mfName: string;
+}) => {
+  const ComponentInspector: React.FC<{
+    children: React.ReactNode;
+    componentName: string;
+    mfName: string;
+  }> = ({ children, componentName, mfName }) => {
+    const [inspectorInfo, setInspectorInfo] =
+      react.useState<InspectorInfo | null>(null);
+
+    const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      setInspectorInfo({
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+      });
+    };
+
+    const handleMouseLeave = () => {
+      setInspectorInfo(null);
+    };
+
+    return (
+      <div
+        className="component-inspector"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {children}
+        {inspectorInfo && (
+          <>
+            <div
+              className="inspector-info"
+              style={{
+                top: `${inspectorInfo.top - 30}px`,
+                left: `${inspectorInfo.left}px`,
+                width: `${inspectorInfo.width}px`,
+              }}
+            >
+              <span className="mf-tag">{mfName}</span>
+              <span className="divider">|</span>
+              <span className="gradient-text">{componentName}</span>
+            </div>
+            <div
+              className="inspector-overlay"
+              style={{
+                top: `${inspectorInfo.top}px`,
+                left: `${inspectorInfo.left}px`,
+                width: `${inspectorInfo.width}px`,
+                height: `${inspectorInfo.height}px`,
+              }}
+            />
+          </>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <ComponentInspector componentName={componentName} mfName={mfName}>
+      <CustomComponent />
+    </ComponentInspector>
+  );
+};