@module-federation/devtools 0.0.0-next-20250925034616 → 0.0.0-perf-devtools-20260106124142

package/dist/lib/utils/chrome/post-message-start.js

@@ -1,9 +1,17 @@
 "use strict";
-var _a;
+var _a, _b;
 const moduleInfo = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.moduleInfo;
 window.postMessage(
   {
-    moduleInfo
+    moduleInfo,
+    share: JSON.parse(
+      JSON.stringify((_b = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _b.__SHARE__, (_key, value) => {
+        if (typeof value === "function") {
+          return "Function";
+        }
+        return value;
+      })
+    )
   },
   "*"
 );

package/dist/lib/utils/chrome/storage.js

@@ -38,6 +38,7 @@ var __async = (__this, __arguments, generator) => {
 };
 var storage_exports = {};
 __export(storage_exports, {
+  getStorageValue: () => getStorageValue,
   mergeStorage: () => mergeStorage,
   removeStorage: () => removeStorage,
   removeStorageKey: () => removeStorageKey,
@@ -58,8 +59,12 @@ const removeStorage = (...args) => __async(void 0, null, function* () {
 const setStorage = (...args) => __async(void 0, null, function* () {
   return (0, import_index.injectScript)(import_sdk.setLocalStorage, false, ...args);
 });
+const getStorageValue = (...args) => __async(void 0, null, function* () {
+  return (0, import_index.injectScript)(import_sdk.getLocalStorage, false, ...args);
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getStorageValue,
   mergeStorage,
   removeStorage,
   removeStorageKey,

package/dist/lib/utils/sdk/graph.js

@@ -88,8 +88,8 @@ class DependencyGraph {
     if (!remotesInfo) {
       return;
     }
-    Object.keys(remotesInfo).forEach((dep) => {
-      const { matchedVersion } = remotesInfo[dep];
+    Object.entries(remotesInfo).forEach(([dep, remoteInfo]) => {
+      const { matchedVersion } = remoteInfo;
       let childId = dep;
       if (matchedVersion && matchedVersion !== "") {
         childId = `${childId}:${matchedVersion}`;
@@ -130,7 +130,7 @@ class DependencyGraph {
       type
     });
   }
-  run(targetGraph, target = this.initTarget, type, id = this.initTarget) {
+  run(targetGraph, target = this.initTarget, type, id = this.initTarget, depth = 0, maxDepth = Infinity) {
     var _a;
     if (!targetGraph || !((_a = Object.keys(targetGraph)) == null ? void 0 : _a.length)) {
       return;
@@ -154,12 +154,17 @@ class DependencyGraph {
       targetGraph[targetWithoutType] || targetGraph[target] || {}
     );
     graphChilden.forEach((dep) => {
+      if (depth + 1 > maxDepth) {
+        return;
+      }
       this.addEdge(id + dep, id, id + dep);
       this.run(
         targetGraph[targetWithoutType] || targetGraph[target],
         dep,
         type,
-        id + dep
+        id + dep,
+        depth + 1,
+        maxDepth
       );
     });
   }
@@ -170,6 +175,22 @@ class DependencyGraph {
     const color = `rgba(${r},${g},${b},0.8)`;
     return color;
   }
+  calculateDepth(target = this.initTarget, visited = /* @__PURE__ */ new Set()) {
+    if (visited.has(target)) {
+      return 0;
+    }
+    visited.add(target);
+    const children = this.graph[target] ? Object.keys(this.graph[target]) : [];
+    if (children.length === 0) {
+      visited.delete(target);
+      return 0;
+    }
+    const maxChildDepth = Math.max(
+      ...children.map((child) => this.calculateDepth(child, visited))
+    );
+    visited.delete(target);
+    return 1 + maxChildDepth;
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/lib/utils/sdk/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var sdk_exports = {};
 __export(sdk_exports, {
   definePropertyGlobalVal: () => definePropertyGlobalVal,
+  getLocalStorage: () => getLocalStorage,
   getUnpkgUrl: () => getUnpkgUrl,
   isObject: () => isObject,
   mergeLocalStorage: () => mergeLocalStorage,
@@ -34,6 +35,14 @@ __reExport(sdk_exports, require("./graph"), module.exports);
 const setLocalStorage = (key, value) => {
   localStorage.setItem(key, value);
 };
+const getLocalStorage = (key) => {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    console.warn("[MF Devtools] getLocalStorage failed", error);
+    return null;
+  }
+};
 const removeLocalStorage = (key) => {
   const data = localStorage.getItem(key);
   if (data) {
@@ -83,6 +92,7 @@ const definePropertyGlobalVal = (target, key, val) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   definePropertyGlobalVal,
+  getLocalStorage,
   getUnpkgUrl,
   isObject,
   mergeLocalStorage,

package/dist/lib/worker/index.js

@@ -1,2 +1,157 @@
 "use strict";
-console.log("Module Federation Worker");
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var import_messages = require("../utils/chrome/messages");
+const SIDE_PANEL_PATH = "html/main/index.html";
+const getSidePanel = () => chrome == null ? void 0 : chrome.sidePanel;
+const resolveTabId = (tabId) => __async(exports, null, function* () {
+  if (typeof tabId === "number") {
+    return tabId;
+  }
+  const [activeTab] = yield chrome.tabs.query({
+    active: true,
+    lastFocusedWindow: true
+  });
+  return activeTab == null ? void 0 : activeTab.id;
+});
+const broadcastActiveTab = (tabId) => {
+  try {
+    chrome.runtime.sendMessage({
+      type: import_messages.MESSAGE_ACTIVE_TAB_CHANGED,
+      tabId
+    });
+  } catch (error) {
+    console.warn(
+      "[Module Federation Devtools] Failed to broadcast active tab",
+      error
+    );
+  }
+};
+const openSidePanel = (tabId) => __async(exports, null, function* () {
+  const sidePanel = getSidePanel();
+  if (!sidePanel) {
+    throw new Error("sidePanel api not available");
+  }
+  const targetTabId = yield resolveTabId(tabId);
+  if (typeof targetTabId !== "number") {
+    throw new Error("No active tab available");
+  }
+  yield sidePanel.setOptions({
+    tabId: targetTabId,
+    path: SIDE_PANEL_PATH,
+    enabled: true
+  });
+  if (sidePanel.open) {
+    yield sidePanel.open({ tabId: targetTabId });
+  }
+  broadcastActiveTab(targetTabId);
+  if (sidePanel.getOptions) {
+    try {
+      const options = yield sidePanel.getOptions({ tabId: targetTabId });
+      broadcastActiveTab(targetTabId);
+      return options;
+    } catch (error) {
+      console.warn("[Module Federation Devtools] getOptions failed", error);
+    }
+  }
+  return {
+    path: SIDE_PANEL_PATH,
+    enabled: true
+  };
+});
+chrome.runtime.onInstalled.addListener(() => {
+  const sidePanel = getSidePanel();
+  if (sidePanel == null ? void 0 : sidePanel.setPanelBehavior) {
+    sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch((error) => {
+      console.warn(
+        "[Module Federation Devtools] setPanelBehavior failed",
+        error
+      );
+    });
+  }
+});
+chrome.action.onClicked.addListener((tab) => __async(exports, null, function* () {
+  try {
+    yield openSidePanel(tab.id);
+  } catch (error) {
+    console.warn(
+      "[Module Federation Devtools] Failed to open side panel",
+      error
+    );
+  }
+}));
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if ((message == null ? void 0 : message.type) === import_messages.MESSAGE_OPEN_SIDE_PANEL) {
+    openSidePanel(message.tabId).then((options) => sendResponse({ ok: true, options })).catch(
+      (error) => sendResponse({ ok: false, message: String(error) })
+    );
+    return true;
+  }
+  return void 0;
+});
+chrome.tabs.onActivated.addListener((activeInfo) => __async(exports, null, function* () {
+  const tabId = activeInfo == null ? void 0 : activeInfo.tabId;
+  if (typeof tabId !== "number") {
+    return;
+  }
+  try {
+    broadcastActiveTab(tabId);
+  } catch (error) {
+    console.warn(
+      "[Module Federation Devtools] Failed to handle tab activation",
+      error
+    );
+  }
+}));
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.status !== "complete") {
+    return;
+  }
+  if (tab == null ? void 0 : tab.active) {
+    try {
+      broadcastActiveTab(tabId);
+    } catch (error) {
+      console.warn(
+        "[Module Federation Devtools] Failed to handle tab update",
+        error
+      );
+    }
+  }
+});
+chrome.tabs.onRemoved.addListener((tabId) => __async(exports, null, function* () {
+  try {
+    const FormID = "FormID";
+    const data = yield chrome.storage.sync.get(FormID);
+    const storeData = data[FormID];
+    if (storeData == null ? void 0 : storeData[String(tabId)]) {
+      delete storeData[String(tabId)];
+      yield chrome.storage.sync.set({
+        [FormID]: storeData
+      });
+    }
+  } catch (error) {
+    console.warn(
+      "[Module Federation Devtools] Failed to handle tab removal",
+      error
+    );
+  }
+}));
+console.log("Module Federation Worker ready");

package/dist/types/src/App.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './init';
 import { RootComponentProps } from './utils';
 import '@arco-design/web-react/dist/css/arco.css';

package/dist/types/src/component/{Graph → DependencyGraph}/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 import 'reactflow/dist/style.css';
 declare const Graph: (props: {

package/dist/types/src/component/{GraphItem → DependencyGraphItem}/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import 'reactflow/dist/style.css';
 declare const GraphItem: (props: {
     data: {

package/dist/types/src/component/Form/index.d.ts

@@ -13,6 +13,8 @@ interface FormProps {
     validateForm: any;
     enableHMR: string;
     onHMRChange: (on: boolean) => void;
+    enableClip: boolean;
+    onClipChange: (on: boolean) => void;
     headerSlot?: ReactNode;
 }
 declare const FormComponent: (props: FormProps & RootComponentProps) => import("react").JSX.Element;

package/dist/types/src/component/Layout/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 import type { Federation } from '@module-federation/runtime';
 import { RootComponentProps } from '../../utils';

package/dist/types/src/component/ModuleInfo/index.d.ts

@@ -0,0 +1,8 @@
+import type { GlobalModuleInfo } from '@module-federation/sdk';
+interface HomeProps {
+    moduleInfo: GlobalModuleInfo;
+    selectedModuleId: string | null;
+    onSelectModule: (moduleId: string) => void;
+}
+declare const Home: (props: HomeProps) => import("react").JSX.Element;
+export default Home;

package/dist/types/src/component/SharedDepsExplorer/FocusResultDisplay.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LoadedStatus } from './share-utils';
+interface FocusResult {
+    packageName: string;
+    version: string;
+    status: LoadedStatus;
+    providers: string[];
+}
+interface FocusResultDisplayProps {
+    focusResult: FocusResult | null;
+    hasData: boolean;
+    loadedStatusLabel: (status: LoadedStatus) => string;
+}
+declare const FocusResultDisplay: React.FC<FocusResultDisplayProps>;
+export default FocusResultDisplay;

package/dist/types/src/component/SharedDepsExplorer/index.d.ts

@@ -0,0 +1,6 @@
+import type { GlobalShareScopeMap } from '@module-federation/runtime/types';
+interface SharedDepsExplorerProps {
+    shareData?: GlobalShareScopeMap;
+}
+declare function SharedDepsExplorer({ shareData: shareDataProp, }: SharedDepsExplorerProps): import("react").JSX.Element;
+export default SharedDepsExplorer;

package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts

@@ -0,0 +1,44 @@
+import { GlobalShareScopeMap, Shared, SharedConfig } from '@module-federation/runtime/types';
+export type LoadedStatus = 'loaded' | 'loading' | 'not-loaded';
+export type ReuseStatus = boolean;
+export interface ShareStats {
+    totalProviders: number;
+    totalScopes: number;
+    totalPackages: number;
+    totalVersions: number;
+    loadedCount: number;
+    reusedCount: number;
+}
+export interface NormalizedSharedVersion {
+    id: string;
+    provider: string;
+    scope: string;
+    packageName: string;
+    version: string;
+    from: string;
+    useIn: string[];
+    shareConfig: SharedConfig;
+    strategy?: string;
+    loaded?: boolean;
+    loading?: unknown;
+    loadedStatus: LoadedStatus;
+    reuseStatus: ReuseStatus;
+}
+export declare function computeLoadedStatus(entry: Shared): LoadedStatus;
+export declare function computeReuseStatus(entry: Shared): ReuseStatus;
+export declare function normalizeShareData(raw: GlobalShareScopeMap | null | undefined): NormalizedSharedVersion[];
+export declare function computeShareStats(versions: NormalizedSharedVersion[]): ShareStats;
+export declare function groupByProviderScopePackage(versions: NormalizedSharedVersion[]): Record<string, Record<string, Record<string, NormalizedSharedVersion[]>>>;
+export declare function getFilterOptions(versions: NormalizedSharedVersion[]): {
+    providers: string[];
+    scopes: string[];
+    packages: string[];
+    versions: string[];
+};
+export declare function findPackageProvider(versions: NormalizedSharedVersion[], packageName: string, version?: string): {
+    packageName: string;
+    version: string;
+    providers: string[];
+    status: LoadedStatus;
+} | null;
+export declare function getReusedVersions(versions: NormalizedSharedVersion[]): NormalizedSharedVersion[];

package/dist/types/src/index.d.ts

@@ -1 +1,2 @@
-export {};
+import '@arco-design/web-react/es/_util/react-19-adapter';
+import './index.css';

package/dist/types/src/init.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="chrome" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 declare global {
     interface Window {

package/dist/types/src/template/constant.d.ts

@@ -1,5 +1,6 @@
 export declare const FormID = "FormID";
 export declare const ENABLEHMR = "enableHMR";
+export declare const ENABLE_CLIP = "enableClip";
 export declare const proxyFormField = "proxyFormField";
 export declare const defaultDataItem: {
     key: string;
@@ -7,11 +8,7 @@ export declare const defaultDataItem: {
     checked: boolean;
 };
 export declare const defaultModuleData: {
-    proxyFormField: {
-        key: string;
-        value: string;
-        checked: boolean;
-    }[];
+    proxyFormField: never[];
 };
 export declare const statusInfo: Record<string, {
     status: string;
@@ -19,5 +16,6 @@ export declare const statusInfo: Record<string, {
     color: string;
 }>;
 export declare const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+export declare const __EAGER_SHARE__ = "eagerShare";
 export declare const BROWSER_ENV_KEY = "MF_ENV";
 export declare const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";

package/dist/types/src/utils/chrome/index.d.ts

@@ -1,16 +1,18 @@
-/// <reference types="chrome" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 export * from './storage';
 export declare const injectPostMessage: (postMessageUrl: string) => void;
 export declare const TabInfo: {
     currentTabId: number;
 };
+export declare const setTargetTab: (tab?: chrome.tabs.Tab | null) => void;
+export declare const syncActiveTab: (tabId?: number) => Promise<chrome.tabs.Tab | undefined>;
 export declare function getCurrentTabId(): number;
 export declare function getInspectWindowTabId(): Promise<unknown>;
-export declare const getGlobalModuleInfo: (callback: React.Dispatch<React.SetStateAction<GlobalModuleInfo>>) => Promise<void>;
+export declare const refreshModuleInfo: () => Promise<void>;
+export declare const getGlobalModuleInfo: (callback: (moduleInfo: GlobalModuleInfo) => void) => Promise<() => void>;
 export declare const getTabs: (queryOptions?: {}) => Promise<chrome.tabs.Tab[]>;
 export declare const getScope: () => Promise<string>;
-export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<void>;
+export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<any>;
 export declare const getUrl: (file: string) => string;
 export declare const injectToast: (toastUtilUrl: string, e2eFlag: string) => void;
 export declare const setChromeStorage: (formData: Record<string, any>) => void;

package/dist/types/src/utils/chrome/messages.d.ts

@@ -0,0 +1,2 @@
+export declare const MESSAGE_OPEN_SIDE_PANEL = "mf-devtools/open-side-panel";
+export declare const MESSAGE_ACTIVE_TAB_CHANGED = "mf-devtools/active-tab-changed";

package/dist/types/src/utils/chrome/storage.d.ts

@@ -1,4 +1,5 @@
-export declare const mergeStorage: (...args: any[]) => Promise<void>;
-export declare const removeStorageKey: (...args: any[]) => Promise<void>;
-export declare const removeStorage: (...args: any[]) => Promise<void>;
-export declare const setStorage: (...args: any[]) => Promise<void>;
+export declare const mergeStorage: (...args: any[]) => Promise<any>;
+export declare const removeStorageKey: (...args: any[]) => Promise<any>;
+export declare const removeStorage: (...args: any[]) => Promise<any>;
+export declare const setStorage: (...args: any[]) => Promise<any>;
+export declare const getStorageValue: (...args: any[]) => Promise<any>;

package/dist/types/src/utils/sdk/graph.d.ts

@@ -40,6 +40,7 @@ export declare class DependencyGraph {
     createGraph(target?: string): void;
     addNode(id: string, type: string, x: number, y: number, nodeData: NodeCustomData): void;
     addEdge(id: string, source: string, target: string, type?: Edge): void;
-    run(targetGraph: any, target: string | undefined, type: string, id?: string): void;
+    run(targetGraph: any, target: string | undefined, type: string, id?: string, depth?: number, maxDepth?: number): void;
     identify(): string;
+    calculateDepth(target?: string, visited?: Set<string>): number;
 }

package/dist/types/src/utils/sdk/index.d.ts

@@ -1,5 +1,6 @@
 export * from './graph';
 export declare const setLocalStorage: (key: string, value: any) => void;
+export declare const getLocalStorage: (key: string) => string | null;
 export declare const removeLocalStorage: (key: string) => void;
 export declare const mergeLocalStorage: (target: string, key: string, value: any) => void;
 export declare const removeLocalStorageKey: (target: string, key: string) => void;

package/dist/types/src/utils/types/common.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { GlobalModuleInfo } from '@module-federation/sdk';
 import { getModuleInfo } from '../index';
 export interface FormItemStatus {
     keyStatus: boolean;
@@ -14,5 +15,8 @@ export interface RootComponentProps {
     handleProxyAddress?: (address: string) => string;
     customValueValidate?: (schema: string) => boolean;
     headerSlot?: ReactNode;
+    onModuleInfoChange?: (moduleInfo: GlobalModuleInfo) => void;
+    onModuleInfoReset?: () => void;
+    tabId?: number;
 }
 export {};

package/dist/types/src/worker/index.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/devtools",
-  "version": "0.0.0-next-20250925034616",
+  "version": "0.0.0-perf-devtools-20260106124142",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -37,35 +37,39 @@
     "access": "public"
   },
   "dependencies": {
-    "@arco-design/web-react": "^2.64.1",
-    "@modern-js/runtime": "2.68.2",
+    "@modern-js/runtime": "2.69.3",
+    "@arco-design/web-react": "2.66.7",
     "ahooks": "^3.7.10",
     "dagre": "^0.8.5",
-    "react": "~18.3.1",
-    "react-dom": "~18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "reactflow": "11.11.4",
-    "@module-federation/sdk": "0.0.0-next-20250925034616"
+    "echarts": "^6.0.0",
+    "lucide-react": "^0.364.0",
+    "tailwindcss-animate": "^1.0.7",
+    "echarts-for-react": "^3.0.5",
+    "@module-federation/sdk": "0.0.0-perf-devtools-20260106124142"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.68.2",
+    "@modern-js/app-tools": "2.69.3",
+    "@modern-js/plugin-tailwindcss": "2.69.3",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/module-tools": "2.68.2",
-    "@modern-js/storybook": "2.68.2",
-    "@modern-js/tsconfig": "2.68.2",
+    "@modern-js/module-tools": "2.69.3",
+    "@modern-js/storybook": "2.69.3",
+    "@modern-js/tsconfig": "2.69.3",
     "@playwright/test": "1.49.1",
     "@types/chrome": "^0.0.272",
     "@types/dagre": "^0.7.52",
     "@types/jest": "~29.2.4",
     "@types/node": "~20.12.12",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "lint-staged": "~13.1.0",
     "prettier": "~3.3.3",
     "rimraf": "~6.0.1",
-    "typescript": "~5.0.4",
     "vitest": "1.2.2",
-    "@module-federation/runtime": "0.0.0-next-20250925034616"
+    "@module-federation/runtime": "0.0.0-perf-devtools-20260106124142"
   },
   "scripts": {
     "build:storybook": "storybook build",