feat(chrome-devtools): add inspector

.changeset/few-dolls-mix.md

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

packages/chrome-devtools/demos/inspector.css

@@ -0,0 +1,123 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
+  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.container-box {
+  min-height: 100vh;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+
+.landing-page {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.header {
+  display: flex;
+  margin: 4rem 0 4rem;
+  align-items: center;
+  font-size: 4rem;
+  font-weight: 600;
+}
+
+.name {
+  color: #4ecaff;
+}
+
+.description {
+  text-align: center;
+  line-height: 1.5;
+  font-size: 1.3rem;
+  color: #1b3a42;
+  margin-bottom: 5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 0.6rem 0.9rem;
+  font-size: 1.05rem;
+  font-family:
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1100px;
+  margin-top: 3rem;
+}
+
+.card {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100px;
+  color: inherit;
+  text-decoration: none;
+  transition: 0.15s ease;
+  width: 45%;
+}
+
+.card:hover,
+.card:focus {
+  transform: scale(1.05);
+}
+
+.card h2 {
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.card p {
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-top: 1rem;
+}
+
+.arrow-right {
+  width: 1.3rem;
+  margin-left: 0.5rem;
+  margin-top: 3px;
+}

packages/chrome-devtools/demos/inspector.tsx

@@ -0,0 +1,159 @@
+import { Helmet } from '@modern-js/runtime/head';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './inspector.css';
+import { wrapComponent } from '../src/utils/chrome/ComponentInspector';
+
+const Header = () => {
+  return (
+    <div className="header">
+      Welcome to
+      <img
+        className="logo"
+        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
+        alt="Modern.js Logo"
+      />
+      <p className="name">Modern.js</p>
+    </div>
+  );
+};
+
+const Footer = () => {
+  return (
+    <div className="footer">
+      <a
+        href="https://modernjs.dev/guides/get-started/introduction.html"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="card"
+      >
+        <h2>
+          Guide
+          <img
+            className="arrow-right"
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            alt="Guide"
+          />
+        </h2>
+        <p>Follow the guides to use all features of Modern.js.</p>
+      </a>
+      <a
+        href="https://modernjs.dev/tutorials/foundations/introduction.html"
+        target="_blank"
+        className="card"
+        rel="noreferrer"
+      >
+        <h2>
+          Tutorials
+          <img
+            className="arrow-right"
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            alt="Tutorials"
+          />
+        </h2>
+        <p>Learn to use Modern.js to create your first application.</p>
+      </a>
+      <a
+        href="https://modernjs.dev/configure/app/usage.html"
+        target="_blank"
+        className="card"
+        rel="noreferrer"
+      >
+        <h2>
+          Config
+          <img
+            className="arrow-right"
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            alt="Config"
+          />
+        </h2>
+        <p>Find all configuration options provided by Modern.js.</p>
+      </a>
+      <a
+        href="https://github.com/web-infra-dev/modern.js"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="card"
+      >
+        <h2>
+          Github
+          <img
+            className="arrow-right"
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+            alt="Github"
+          />
+        </h2>
+        <p>View the source code of Github, feel free to contribute.</p>
+      </a>
+    </div>
+  );
+};
+
+const Description = () => {
+  return (
+    <p className="description">
+      Get started by editing <code className="code">src/routes/page.tsx</code>
+    </p>
+  );
+};
+
+function MyComponent() {
+  return <div>Hello</div>;
+}
+console.log(222, MyComponent.name);
+
+class MyClassComponent extends React.Component {
+  render() {
+    return <div>Hello</div>;
+  }
+}
+
+console.log(222, MyClassComponent.name);
+
+const Index = () => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+
+    <div className="landing-page">
+      {wrapComponent({
+        react: React,
+        CustomComponent: Header,
+        componentName: Header.name,
+        mfName: 'provider1',
+      })}
+
+      {wrapComponent({
+        react: React,
+        CustomComponent: Description,
+        componentName: Description.name,
+        mfName: 'provider2',
+        versionOrEntry: '1.2.3',
+      })}
+
+      {wrapComponent({
+        react: React,
+        CustomComponent: Footer,
+        componentName: Footer.name,
+        mfName: 'provider3',
+      })}
+    </div>
+  </div>
+);
+
+export default Index;
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <Index />
+    </React.StrictMode>,
+  );
+}

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';
       }
@@ -32,6 +44,10 @@ export default defineConfig({
         './src/utils/chrome/post-message-listener.ts';
       config.entry['post-message-start'] =
         './src/utils/chrome/post-message-start.ts';
+
+      if (process.env.TEST_INSPECTOR) {
+        config.entry = './demos/inspector.tsx';
+      }
       return config;
     },
   },

packages/chrome-devtools/modern.lib.config.ts

@@ -6,5 +6,6 @@ export default defineConfig({
   buildConfig: {
     input: ['src', '!src/index.tsx'],
     tsconfig: 'tsconfig.lib.json',
+    minify: false,
   },
 });

packages/chrome-devtools/package.json

@@ -12,7 +12,8 @@
     "storybook": "storybook dev -p 6006",
     "reset": "npx rimraf ./**/node_modules",
     "dev": "modern-app dev",
-    "build": "modern-app build && node postpack.js",
+    "dev:inspector": "TEST_INSPECTOR=true modern-app dev",
+    "build": " INSPECTOR=true modern-app build && modern-app build && node postpack.js",
     "build:debug": "DEBUG=true modern-app build && node postpack.js",
     "build:lib": "rm -rf dist && modern-module build -c modern.lib.config.ts",
     "release": "npm publish --tag canary",
@@ -61,7 +62,8 @@
     "dagre": "^0.8.5",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
-    "reactflow": "11.11.4"
+    "reactflow": "11.11.4",
+    "react-toastify": "11.0.5"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.54.6",

packages/chrome-devtools/project.json

@@ -29,6 +29,18 @@
         }
       ]
     },
+    "dev:inspector": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run dev:inspector --prefix packages/chrome-devtools"]
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ]
+    },
     "test": {
       "executor": "nx:run-commands",
       "options": {