@modern-js/plugin-devtools 0.0.0-nightly-20240617170645 → 0.0.0-nightly-20240619170730

package/dist/cli.js

@@ -46,6 +46,9 @@ var import_watcher = require("./plugins/watcher");
 var import_service_worker = require("./plugins/service-worker");
 var import_html = require("./plugins/html");
 var import_rpc = require("./plugins/rpc");
+var import_cleanup = require("./plugins/cleanup");
+var import_settle = require("./plugins/settle");
+var import_manifest = require("./plugins/manifest");
 const BUILTIN_PLUGINS = [
   import_debug.pluginDebug,
   import_watcher.pluginWatcher,
@@ -54,7 +57,11 @@ const BUILTIN_PLUGINS = [
   // --- //
   import_state.pluginState,
   import_http.pluginHttp,
-  import_rpc.pluginRpc
+  import_rpc.pluginRpc,
+  import_settle.pluginSettleState,
+  import_manifest.pluginManifest,
+  // --- //
+  import_cleanup.pluginCleanup
 ];
 const devtoolsPlugin = (inlineOptions = {}) => {
   const ctx = (0, import_valtio.proxy)((0, import_options.resolveContext)(inlineOptions));
@@ -64,6 +71,7 @@ const devtoolsPlugin = (inlineOptions = {}) => {
   const api = {
     builderHooks: (0, import_hookable.createHooks)(),
     frameworkHooks: (0, import_hookable.createHooks)(),
+    hooks: (0, import_hookable.createHooks)(),
     setupBuilder: () => setupBuilder.promise,
     setupFramework: () => setupFramework.promise,
     get context() {
@@ -73,12 +81,10 @@ const devtoolsPlugin = (inlineOptions = {}) => {
       return _sharedVars;
     }
   };
-  const cleanup = () => {
+  api.hooks.hook("cleanup", () => {
     setupBuilder.reject(new Error("Devtools Plugin is disabled"));
     setupFramework.reject(new Error("Devtools Plugin is disabled"));
-    api.builderHooks.removeAllHooks();
-    api.frameworkHooks.removeAllHooks();
-  };
+  });
   for (const plugin of BUILTIN_PLUGINS) {
     plugin.setup(api);
   }
@@ -109,15 +115,15 @@ const devtoolsPlugin = (inlineOptions = {}) => {
         },
         async beforeRestart() {
           await api.frameworkHooks.callHook("beforeRestart");
-          cleanup();
         },
         beforeExit() {
           api.frameworkHooks.callHookWith((hooks) => hooks.forEach((hook) => hook()), "beforeExit");
-          cleanup();
+        },
+        async afterDev(params) {
+          await api.frameworkHooks.callHook("afterDev", params);
         },
         async afterBuild(params) {
           api.frameworkHooks.callHook("afterBuild", params);
-          cleanup();
         },
         async config() {
           import_utils.logger.info(`${ctx.def.name.formalName} DevTools is enabled`);

package/dist/options.js

@@ -25,19 +25,13 @@ module.exports = __toCommonJS(options_exports);
 var import_node = require("@modern-js/devtools-kit/node");
 const resolveContext = (...sources) => {
   const ret = {
-    enable: process.env.NODE_ENV === "development",
-    dataSource: `${import_node.ROUTE_BASENAME}/rpc`,
-    endpoint: import_node.ROUTE_BASENAME,
+    enable: true,
     def: new import_node.ClientDefinition(),
     storagePresets: []
   };
   for (const opts of sources) {
     var _opts_enable;
     ret.enable = (_opts_enable = opts.enable) !== null && _opts_enable !== void 0 ? _opts_enable : ret.enable;
-    var _opts_dataSource;
-    ret.dataSource = (_opts_dataSource = opts.dataSource) !== null && _opts_dataSource !== void 0 ? _opts_dataSource : ret.dataSource;
-    var _opts_endpoint;
-    ret.endpoint = (_opts_endpoint = opts.endpoint) !== null && _opts_endpoint !== void 0 ? _opts_endpoint : ret.endpoint;
     var _opts_def;
     ret.def = (_opts_def = opts.def) !== null && _opts_def !== void 0 ? _opts_def : ret.def;
     opts.storagePresets && ret.storagePresets.push(...opts.storagePresets);

package/dist/plugins/cleanup.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from '../types';
+export declare const pluginCleanup: Plugin;

package/dist/plugins/cleanup.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var cleanup_exports = {};
+__export(cleanup_exports, {
+  pluginCleanup: () => pluginCleanup
+});
+module.exports = __toCommonJS(cleanup_exports);
+const pluginCleanup = {
+  async setup(api) {
+    let _done = false;
+    const cleanup = async () => {
+      !_done && await api.hooks.callHook("cleanup");
+      _done = true;
+    };
+    api.frameworkHooks.hook("beforeExit", cleanup);
+    api.frameworkHooks.hook("beforeRestart", cleanup);
+    api.frameworkHooks.hook("afterBuild", cleanup);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pluginCleanup
+});

package/dist/plugins/debug.js

@@ -31,11 +31,14 @@ const pluginDebug = {
     logger.debug("setup framework api");
     await api.setupBuilder();
     logger.debug("setup builder api");
-    api.frameworkHooks.afterEach((e) => {
+    api.builderHooks.beforeEach((e) => {
+      logger.debug("after builder hook:", e.name);
+    });
+    api.frameworkHooks.beforeEach((e) => {
       logger.debug("after framework hook:", e.name);
     });
-    api.builderHooks.afterEach((e) => {
-      logger.debug("after builder hook:", e.name);
+    api.hooks.beforeEach((e) => {
+      logger.debug("after hook:", e.name);
     });
   }
 };

package/dist/plugins/html.js

@@ -31,65 +31,24 @@ __export(html_exports, {
   pluginHtml: () => pluginHtml
 });
 module.exports = __toCommonJS(html_exports);
-var import_assert = __toESM(require("assert"));
-var import_lodash = __toESM(require("@modern-js/utils/lodash"));
 const pluginHtml = {
   async setup(api) {
-    api.frameworkHooks.hook("modifyServerRoutes", ({ routes }) => {
-      routes.push({
-        urlPath: "/sw-proxy.js",
-        isSPA: true,
-        isSSR: false,
-        entryPath: "public/sw-proxy.js"
-      });
-    });
     api.frameworkHooks.hook("config", async () => {
-      const clientOptions = import_lodash.default.pick(api.context, [
-        "def",
-        "endpoint",
-        "dataSource"
-      ]);
+      const clientOptions = {
+        def: api.context.def,
+        src: "/__devtools"
+      };
       Object.assign(clientOptions, {
         __keep: true
       });
-      const serializedOptions = JSON.stringify(clientOptions);
-      const tags = [
-        {
-          tag: "script",
-          children: `window.__MODERN_JS_DEVTOOLS_OPTIONS__ = ${serializedOptions};`,
-          head: true,
-          append: false
-        }
-      ];
-      const styles = [];
-      const manifest = require("@modern-js/devtools-client/manifest");
-      for (const src of manifest.routeAssets.mount.assets) {
-        (0, import_assert.default)(typeof src === "string");
-        if (src.endsWith(".js")) {
-          tags.push({
-            tag: "script",
-            attrs: {
-              src
-            },
-            head: true,
-            append: false
-          });
-        } else if (src.endsWith(".css")) {
-          styles.push(src);
-        }
-      }
-      tags.push({
-        tag: "template",
-        attrs: {
-          id: "_modern_js_devtools_styles"
-        },
-        append: true,
-        head: false,
-        children: styles.map((src) => `<link rel="stylesheet" href="${src}">`).join("")
-      });
       const config = {
-        html: {
-          tags
+        source: {
+          preEntry: [
+            require.resolve("../runtime")
+          ],
+          globalVars: {
+            "process.env.__USE_MODERNJS_DEVTOOLS__": "/__devtools/manifest"
+          }
         }
       };
       return config;

package/dist/plugins/http.js

@@ -41,8 +41,7 @@ var import_node_server = require("@hono/node-server");
 var import_serve_static = require("@hono/node-server/serve-static");
 var import_node = require("@modern-js/devtools-kit/node");
 const CLIENT_SERVE_DIR = import_path.default.resolve(require.resolve("@modern-js/devtools-client/package.json"), "../dist");
-const app = new import_hono.Hono();
-app.all("/api/cookies", async (c) => {
+const cookiesServiceHandler = async (c) => {
   const raw = c.req.header("Cookie");
   const { parse } = await import("cookie-es");
   const cookies = raw ? parse(raw) : {};
@@ -62,15 +61,8 @@ app.all("/api/cookies", async (c) => {
   return c.json({
     cookies
   });
-});
-app.use(
-  "/static/*",
-  // Workaround for https://github.com/honojs/node-server/blob/dd0e0cd160b0b8f18abbcb28c5f5c39b72105d98/src/serve-static.ts#L56
-  (0, import_serve_static.serveStatic)({
-    root: import_path.default.relative(process.cwd(), CLIENT_SERVE_DIR)
-  })
-);
-app.get(":filename{.+\\.hot-update\\.\\w+$}", async (c) => {
+};
+const hotUpdateHandler = async (c) => {
   if (process.env.NODE_ENV !== "development") {
     return c.text("Not found", 404);
   }
@@ -85,16 +77,33 @@ app.get(":filename{.+\\.hot-update\\.\\w+$}", async (c) => {
     newResp.headers.delete("content-encoding");
   }
   return newResp;
-});
-app.get("*", async (c) => {
+};
+const fallbackHtmlHandler = async (c) => {
   const filename = import_path.default.resolve(CLIENT_SERVE_DIR, "html/client/index.html");
   const content = await import_utils.fs.readFile(filename, "utf-8");
   return c.html(content);
-});
+};
 const pluginHttp = {
   async setup(api) {
     if (process.env.NODE_ENV === "production")
       return;
+    const app = new import_hono.Hono();
+    app.all("/api/cookies", cookiesServiceHandler);
+    app.use(
+      "/static/*",
+      // Workaround for https://github.com/honojs/node-server/blob/dd0e0cd160b0b8f18abbcb28c5f5c39b72105d98/src/serve-static.ts#L56
+      (0, import_serve_static.serveStatic)({
+        root: import_path.default.relative(process.cwd(), CLIENT_SERVE_DIR)
+      })
+    );
+    app.get(":filename{.+\\.hot-update\\.\\w+$}", hotUpdateHandler);
+    app.get("/manifest", async (c) => {
+      const json = await api.vars.useManifestJson;
+      return c.newResponse(json, 200, {
+        "Content-Type": "application/json"
+      });
+    });
+    app.get("*", fallbackHtmlHandler);
     const server = (0, import_node_server.createAdaptorServer)({
       fetch: app.fetch,
       hostname: "127.0.0.1",
@@ -135,14 +144,9 @@ const pluginHttp = {
         }
       };
     });
-    let _open = true;
-    const cleanup = () => {
-      _open && server.close();
-      _open = false;
-    };
-    api.frameworkHooks.hook("beforeExit", cleanup);
-    api.frameworkHooks.hook("beforeRestart", cleanup);
-    api.frameworkHooks.hook("afterBuild", cleanup);
+    api.hooks.hook("cleanup", () => {
+      server.close();
+    });
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/plugins/manifest.d.ts

@@ -0,0 +1,11 @@
+import { type ServerManifest } from '@modern-js/devtools-kit/node';
+import { Plugin } from '../types';
+declare global {
+    interface DevtoolsPluginVars {
+        manifest?: ServerManifest;
+        manifestJson?: string;
+        useManifest: Promise<ServerManifest>;
+        useManifestJson: Promise<string>;
+    }
+}
+export declare const pluginManifest: Plugin;

package/dist/plugins/manifest.js

@@ -0,0 +1,77 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var manifest_exports = {};
+__export(manifest_exports, {
+  pluginManifest: () => pluginManifest
+});
+module.exports = __toCommonJS(manifest_exports);
+var import_path = __toESM(require("path"));
+var import_node = require("@modern-js/devtools-kit/node");
+var import_utils = require("@modern-js/utils");
+var import_p_defer = __toESM(require("p-defer"));
+const pluginManifest = {
+  async setup(api) {
+    const deferredManifest = (0, import_p_defer.default)();
+    const deferredManifestJson = (0, import_p_defer.default)();
+    api.vars.useManifest = deferredManifest.promise;
+    api.vars.useManifestJson = deferredManifestJson.promise;
+    api.hooks.hook("settleState", async () => {
+      const routesManifestName = require.resolve("@modern-js/devtools-client/manifest");
+      const routesManifest = await import_utils.fs.readJSON(routesManifestName);
+      const manifest = {
+        ...api.vars.state,
+        client: "/__devtools",
+        websocket: "/__devtools/rpc",
+        routeAssets: routesManifest.routeAssets
+      };
+      api.vars.manifest = manifest;
+      deferredManifest.resolve(manifest);
+      const stringified = JSON.stringify(manifest, (0, import_node.replacer)());
+      api.vars.manifestJson = stringified;
+      deferredManifestJson.resolve(stringified);
+    });
+    const frameworkApi = await api.setupFramework();
+    const outputManifest = async () => {
+      const { nodeModulesDirectory } = frameworkApi.useAppContext();
+      const name = `.cache/devtools/manifest-${(0, import_utils.nanoid)(6)}.json`;
+      const resolvedName = import_path.default.resolve(nodeModulesDirectory, name);
+      const json = await api.vars.useManifestJson;
+      await import_utils.fs.outputFile(resolvedName, json, "utf-8");
+      if (process.env.NODE_ENV === "production") {
+        import_utils.logger.info(`${api.context.def.name.formalName} DevTools output manifest to node_modules/${name}`);
+      }
+    };
+    api.frameworkHooks.hook("afterDev", outputManifest);
+    api.frameworkHooks.hook("afterBuild", outputManifest);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pluginManifest
+});

package/dist/plugins/rpc.js

@@ -31,7 +31,6 @@ __export(rpc_exports, {
   pluginRpc: () => pluginRpc
 });
 module.exports = __toCommonJS(rpc_exports);
-var import_assert = __toESM(require("assert"));
 var import_buffer = require("buffer");
 var import_path = __toESM(require("path"));
 var import_node = require("@modern-js/devtools-kit/node");
@@ -40,90 +39,12 @@ var import_lodash = __toESM(require("@modern-js/utils/lodash"));
 var import_birpc = require("birpc");
 var flatted = __toESM(require("flatted"));
 var import_valtio = require("valtio");
-var import_module = require("../utils/module");
 var import_socket = require("../utils/socket");
-const resolveDependencies = async (rootPath) => {
-  const ret = {};
-  const resolveExprs = {
-    react: [
-      rootPath,
-      "react/package.json"
-    ],
-    "@modern-js/app-tools": [
-      rootPath,
-      "@modern-js/app-tools/package.json"
-    ],
-    "@edenx/app-tools": [
-      rootPath,
-      "@edenx/app-tools/package.json"
-    ],
-    webpack: [
-      rootPath,
-      "@modern-js/app-tools",
-      "@modern-js/uni-builder",
-      "@rsbuild/webpack",
-      "webpack/package.json"
-    ],
-    "@rspack/core": [
-      rootPath,
-      "@modern-js/uni-builder",
-      "@rsbuild/core",
-      "@rspack/core/package.json"
-    ],
-    "@rsdoctor/rspack-plugin": [
-      rootPath,
-      "@rsdoctor/rspack-plugin/package.json"
-    ],
-    "@rsdoctor/webpack-plugin": [
-      rootPath,
-      "@rsdoctor/webpack-plugin/package.json"
-    ],
-    "@web-doctor/webpack-plugin": [
-      rootPath,
-      "@web-doctor/webpack-plugin/package.json"
-    ],
-    "@web-doctor/rspack-plugin": [
-      rootPath,
-      "@web-doctor/rspack-plugin/package.json"
-    ],
-    "@web-doctor/webpack-plugin(builder)": [
-      rootPath,
-      "@edenx/builder-plugin-web-doctor",
-      "@web-doctor/webpack-plugin/package.json"
-    ],
-    "@web-doctor/rspack-plugin(builder)": [
-      rootPath,
-      "@edenx/builder-plugin-web-doctor",
-      "@web-doctor/rspack-plugin/package.json"
-    ],
-    "@rsdoctor/core": [
-      rootPath,
-      "@rsdoctor/core/package.json"
-    ]
-  };
-  for (const [name, expr] of Object.entries(resolveExprs)) {
-    try {
-      ret[name] = (0, import_module.requireModule)(expr).version;
-    } catch {
-    }
-  }
-  return ret;
-};
-const getDoctorOverview = async (ctx) => {
-  const manifestPath = await (0, import_node.findManifest)(ctx.distDirectory);
-  const json = await (0, import_node.parseManifest)(require(manifestPath));
-  return {
-    numModules: json.data.moduleGraph.modules.length,
-    numChunks: json.data.chunkGraph.chunks.length,
-    numPackages: json.data.packageGraph.packages.length,
-    summary: json.data.summary,
-    errors: json.data.errors
-  };
-};
 const pluginRpc = {
   async setup(api) {
     const httpServer = api.vars.http;
-    (0, import_assert.default)(httpServer, "http server is required for rpc plugin");
+    if (!httpServer)
+      return;
     const server = new import_socket.SocketServer({
       server: httpServer,
       path: "/rpc"
@@ -135,86 +56,7 @@ const pluginRpc = {
         ws.on("message", (data, isBinary) => handleMessage === null || handleMessage === void 0 ? void 0 : handleMessage(data, isBinary));
       });
     });
-    if ("resolve" in api.vars.resolver.context) {
-      api.vars.resolver.context.resolve(api.context);
-    }
-    api.vars.state.context = api.context;
-    api.frameworkHooks.hook("modifyFileSystemRoutes", ({ entrypoint, routes }) => {
-      api.vars.state.fileSystemRoutes[entrypoint.entryName] = import_lodash.default.cloneDeep(routes);
-    });
-    const builderApi = await api.setupBuilder();
-    api.vars.resolver.builder.context.resolve(builderApi.context);
-    resolveDependencies(builderApi.context.rootPath).then((deps) => {
-      api.vars.state.dependencies = deps;
-    });
-    api.builderHooks.hook("modifyBundlerChain", () => {
-      api.vars.resolver.builder.config.resolved.resolve(import_lodash.default.cloneDeep(builderApi.getRsbuildConfig()));
-      api.vars.resolver.builder.config.transformed.resolve(import_lodash.default.cloneDeep(builderApi.getNormalizedConfig()));
-    });
-    const expectBundlerNum = import_lodash.default.castArray(builderApi.context.targets).length;
-    const bundlerConfigs = [];
-    const handleBundlerConfig = (config) => {
-      bundlerConfigs.push(config);
-      if (bundlerConfigs.length >= expectBundlerNum) {
-        api.vars.state.bundler.configs.resolved = import_lodash.default.cloneDeep(bundlerConfigs);
-      }
-    };
-    if (builderApi.context.bundlerType === "webpack") {
-      api.builderHooks.hook("modifyWebpackConfig", (config) => {
-        handleBundlerConfig(config);
-      });
-    } else {
-      api.builderHooks.hook("modifyRspackConfig", (config) => {
-        handleBundlerConfig(config);
-      });
-    }
-    api.builderHooks.hook("onBeforeCreateCompiler", ({ bundlerConfigs: bundlerConfigs2 }) => {
-      api.vars.resolver.bundler.configs.transformed.resolve(import_lodash.default.cloneDeep(bundlerConfigs2));
-    });
-    let buildStartedAt = NaN;
-    api.builderHooks.hook("onAfterCreateCompiler", () => {
-      buildStartedAt = Date.now();
-    });
-    api.builderHooks.hook("onDevCompileDone", () => {
-      api.vars.resolver.performance.resolve({
-        compileDuration: Date.now() - buildStartedAt
-      });
-    });
-    api.builderHooks.hook("onAfterBuild", () => {
-      api.vars.resolver.performance.resolve({
-        compileDuration: Date.now() - buildStartedAt
-      });
-    });
-    let _pendingCompiler = 0;
-    const resolveRsdoctorManifest = async () => {
-      _pendingCompiler -= 1;
-      if (_pendingCompiler === 0) {
-        try {
-          const doctor = await getDoctorOverview(await api.vars.state.framework.context);
-          api.vars.resolver.doctor.resolve(doctor);
-        } catch (err) {
-          api.vars.resolver.doctor.resolve(void 0);
-        }
-      }
-    };
-    api.frameworkHooks.hook("afterCreateCompiler", ({ compiler }) => {
-      if (!compiler)
-        return;
-      _pendingCompiler += 1;
-      compiler.hooks.done.tap({
-        name: "@modern-js/plugin-devtools",
-        stage: 4e3
-      }, () => resolveRsdoctorManifest());
-    });
     const frameworkApi = await api.setupFramework();
-    const frameworkContext = {
-      ...frameworkApi.useAppContext(),
-      builder: null,
-      serverInternalPlugins: null
-    };
-    api.vars.resolver.framework.context.resolve(frameworkContext);
-    api.vars.resolver.framework.config.resolved.resolve(frameworkApi.useConfigContext());
-    api.vars.resolver.framework.config.transformed.resolve(frameworkApi.useResolvedConfigContext());
     const validateSafeToOpen = (filename) => {
       const { appDirectory } = frameworkApi.useAppContext();
       const resolved = import_path.default.resolve(appDirectory, filename);
@@ -230,10 +72,12 @@ const pluginRpc = {
         return content;
       },
       async pullExportedState() {
-        (0, import_node.extractSettledOperations)(api.vars.state).then((ops) => {
-          clientConn.applyStateOperations.asEvent(ops);
-        });
-        return api.vars.state;
+        try {
+          return api.vars.state;
+        } catch (e) {
+          console.error(e);
+          throw e;
+        }
       },
       async createTemporaryStoragePreset() {
         var _config;
@@ -315,10 +159,15 @@ const pluginRpc = {
       on: (cb) => handleMessage = cb,
       serialize: (v) => flatted.stringify([
         v
-      ], import_node.replacer),
+      ], (0, import_node.replacer)()),
       deserialize: (v) => {
-        const msg = flatted.parse(v.toString(), import_node.reviver)[0];
+        const msg = flatted.parse(v.toString(), (0, import_node.reviver)())[0];
         return msg;
+      },
+      onError(error, functionName, args) {
+        const stringifiedArgs = args.map((arg) => JSON.stringify(arg)).join(", ");
+        console.error(new Error(`DevTools failed to execute RPC function: ${functionName}(${stringifiedArgs})`));
+        console.error(error);
       }
     };
     const clientConn = (0, import_birpc.createBirpc)(serverFunctions, clientRpcOptions);

package/dist/plugins/settle.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from '../types';
+export declare const pluginSettleState: Plugin;

package/dist/plugins/settle.js

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var settle_exports = {};
+__export(settle_exports, {
+  pluginSettleState: () => pluginSettleState
+});
+module.exports = __toCommonJS(settle_exports);
+const pluginSettleState = {
+  async setup(api) {
+    let _pendingCompiler = 0;
+    const handleSettle = async () => {
+      _pendingCompiler -= 1;
+      if (_pendingCompiler === 0) {
+        await api.hooks.callHook("settleState");
+      }
+    };
+    const handleDone = (compiler) => {
+      if ("compilers" in compiler) {
+        compiler.compilers.forEach(handleDone);
+      } else {
+        _pendingCompiler += 1;
+        compiler.hooks.done.tapPromise({
+          name: "@modern-js/plugin-devtools",
+          stage: 4e3
+        }, () => handleSettle());
+      }
+    };
+    api.frameworkHooks.hook("afterCreateCompiler", ({ compiler }) => {
+      compiler && handleDone(compiler);
+    });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pluginSettleState
+});

package/dist/plugins/state.d.ts

@@ -1,9 +1,8 @@
-import { ServerExportedState, ServerExportedStateResolvers } from '@modern-js/devtools-kit/node';
+import { ServerState } from '@modern-js/devtools-kit/node';
 import { Plugin } from '../types';
 declare global {
     interface DevtoolsPluginVars {
-        state: ServerExportedState;
-        resolver: ServerExportedStateResolvers;
+        state: ServerState;
     }
 }
 export declare const pluginState: Plugin;

package/dist/plugins/state.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var state_exports = {};
 __export(state_exports, {
@@ -22,12 +32,166 @@ __export(state_exports, {
 });
 module.exports = __toCommonJS(state_exports);
 var import_node = require("@modern-js/devtools-kit/node");
+var import_lodash = __toESM(require("@modern-js/utils/lodash"));
 var import_valtio = require("valtio");
+var import_module = require("../utils/module");
+const resolveDependencies = async (rootPath) => {
+  const ret = {};
+  const resolveExprs = {
+    react: [
+      rootPath,
+      "react/package.json"
+    ],
+    "@modern-js/app-tools": [
+      rootPath,
+      "@modern-js/app-tools/package.json"
+    ],
+    "@edenx/app-tools": [
+      rootPath,
+      "@edenx/app-tools/package.json"
+    ],
+    webpack: [
+      rootPath,
+      "@modern-js/app-tools",
+      "@modern-js/uni-builder",
+      "@rsbuild/webpack",
+      "webpack/package.json"
+    ],
+    "@rspack/core": [
+      rootPath,
+      "@modern-js/uni-builder",
+      "@rsbuild/core",
+      "@rspack/core/package.json"
+    ],
+    "@rsdoctor/rspack-plugin": [
+      rootPath,
+      "@rsdoctor/rspack-plugin/package.json"
+    ],
+    "@rsdoctor/webpack-plugin": [
+      rootPath,
+      "@rsdoctor/webpack-plugin/package.json"
+    ],
+    "@web-doctor/webpack-plugin": [
+      rootPath,
+      "@web-doctor/webpack-plugin/package.json"
+    ],
+    "@web-doctor/rspack-plugin": [
+      rootPath,
+      "@web-doctor/rspack-plugin/package.json"
+    ],
+    "@web-doctor/webpack-plugin(builder)": [
+      rootPath,
+      "@edenx/builder-plugin-web-doctor",
+      "@web-doctor/webpack-plugin/package.json"
+    ],
+    "@web-doctor/rspack-plugin(builder)": [
+      rootPath,
+      "@edenx/builder-plugin-web-doctor",
+      "@web-doctor/rspack-plugin/package.json"
+    ],
+    "@rsdoctor/core": [
+      rootPath,
+      "@rsdoctor/core/package.json"
+    ]
+  };
+  for (const [name, expr] of Object.entries(resolveExprs)) {
+    try {
+      ret[name] = (0, import_module.requireModule)(expr).version;
+    } catch {
+    }
+  }
+  return ret;
+};
+const getDoctorOverview = async (ctx) => {
+  const manifestPath = await (0, import_node.findManifest)(ctx.distDirectory);
+  const json = await (0, import_node.parseManifest)(require(manifestPath));
+  return {
+    numModules: json.data.moduleGraph.modules.length,
+    numChunks: json.data.chunkGraph.chunks.length,
+    numPackages: json.data.packageGraph.packages.length,
+    summary: json.data.summary,
+    errors: json.data.errors
+  };
+};
 const pluginState = {
   async setup(api) {
-    const $serverExportedState = (0, import_node.createServerExportedState)();
-    api.vars.state = (0, import_valtio.proxy)($serverExportedState.state);
-    api.vars.resolver = $serverExportedState.resolvers;
+    api.vars.state = (0, import_valtio.proxy)({
+      framework: {
+        config: {}
+      },
+      builder: {
+        config: {}
+      },
+      bundler: {
+        configs: {}
+      },
+      context: api.context,
+      dependencies: {},
+      fileSystemRoutes: {}
+    });
+    api.frameworkHooks.hook("modifyFileSystemRoutes", ({ entrypoint, routes }) => {
+      api.vars.state.fileSystemRoutes[entrypoint.entryName] = import_lodash.default.cloneDeep(routes);
+    });
+    const builderApi = await api.setupBuilder();
+    api.vars.state.builder.context = builderApi.context;
+    resolveDependencies(builderApi.context.rootPath).then((deps) => {
+      api.vars.state.dependencies = deps;
+    });
+    api.builderHooks.hook("modifyBundlerChain", () => {
+      api.vars.state.builder.config = {
+        resolved: import_lodash.default.cloneDeep(builderApi.getRsbuildConfig()),
+        transformed: import_lodash.default.cloneDeep(builderApi.getNormalizedConfig())
+      };
+    });
+    const expectBundlerNum = import_lodash.default.castArray(builderApi.context.targets).length;
+    const bundlerConfigs = [];
+    const handleBundlerConfig = (config) => {
+      bundlerConfigs.push(config);
+      if (bundlerConfigs.length >= expectBundlerNum) {
+        api.vars.state.bundler.configs.resolved = import_lodash.default.cloneDeep(bundlerConfigs);
+      }
+    };
+    if (builderApi.context.bundlerType === "webpack") {
+      api.builderHooks.hook("modifyWebpackConfig", handleBundlerConfig);
+    } else {
+      api.builderHooks.hook("modifyRspackConfig", handleBundlerConfig);
+    }
+    api.builderHooks.hook("onBeforeCreateCompiler", ({ bundlerConfigs: bundlerConfigs2 }) => {
+      api.vars.state.bundler.configs.transformed = import_lodash.default.cloneDeep(bundlerConfigs2);
+    });
+    let buildStartedAt = NaN;
+    api.builderHooks.hook("onAfterCreateCompiler", () => {
+      buildStartedAt = Date.now();
+    });
+    api.builderHooks.hook("onDevCompileDone", () => {
+      api.vars.state.performance = {
+        compileDuration: Date.now() - buildStartedAt
+      };
+    });
+    api.builderHooks.hook("onAfterBuild", () => {
+      api.vars.state.performance = {
+        compileDuration: Date.now() - buildStartedAt
+      };
+    });
+    api.hooks.hook("settleState", async () => {
+      try {
+        api.vars.state.doctor = await getDoctorOverview(frameworkContext);
+      } catch (err) {
+      }
+    });
+    const frameworkApi = await api.setupFramework();
+    const frameworkContext = {
+      ...frameworkApi.useAppContext(),
+      builder: null,
+      serverInternalPlugins: null
+    };
+    api.vars.state.framework = {
+      context: frameworkContext,
+      config: {
+        resolved: frameworkApi.useConfigContext(),
+        transformed: frameworkApi.useResolvedConfigContext()
+      }
+    };
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/plugins/watcher.js

@@ -43,14 +43,9 @@ const pluginWatcher = {
     watcher.on("add", refreshStoragePreset);
     watcher.on("change", refreshStoragePreset);
     watcher.on("unlink", refreshStoragePreset);
-    let _open = true;
-    const cleanup = () => {
-      _open && watcher.close();
-      _open = false;
-    };
-    api.frameworkHooks.hook("beforeExit", cleanup);
-    api.frameworkHooks.hook("beforeRestart", cleanup);
-    api.frameworkHooks.hook("afterBuild", cleanup);
+    api.hooks.hook("cleanup", () => {
+      watcher.close();
+    });
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/runtime.d.ts

@@ -0,0 +1,2 @@
+/// <reference lib="dom" />
+export {};

package/dist/runtime.js

@@ -0,0 +1,62 @@
+"use strict";
+var import_runtime = require("@modern-js/devtools-kit/runtime");
+const fetchSync = (url, body) => {
+  const xhr = new XMLHttpRequest();
+  xhr.open("GET", url, false);
+  xhr.send(body);
+  return {
+    text() {
+      return xhr.responseText;
+    },
+    json(reviver2) {
+      return JSON.parse(xhr.responseText, reviver2);
+    },
+    blob() {
+      return new Blob([
+        xhr.response
+      ]);
+    }
+  };
+};
+const importScript = (url) => {
+  const script = document.createElement("script");
+  script.setAttribute("src", url);
+  document.head.appendChild(script);
+};
+const importStyle = (url, parent = document.head) => {
+  const link = document.createElement("link");
+  link.setAttribute("rel", "stylesheet");
+  link.setAttribute("href", url.toString());
+  parent.appendChild(link);
+};
+const GLOBAL_MANIFEST = "window.__modern_js_devtools_manifest";
+const setup = () => {
+  var _document_cookie_match;
+  const injectedManifestUrl = process.env.__USE_MODERNJS_DEVTOOLS__;
+  const cookieManifestUrl = (_document_cookie_match = document.cookie.match(/use_modernjs_devtools=([^;]+)/)) === null || _document_cookie_match === void 0 ? void 0 : _document_cookie_match[1];
+  const devtoolsUrl = cookieManifestUrl || injectedManifestUrl;
+  if (!devtoolsUrl)
+    return;
+  const manifest = fetchSync(devtoolsUrl).json((0, import_runtime.reviver)());
+  manifest.source = devtoolsUrl;
+  const template = document.createElement("template");
+  template.id = "_modern_js_devtools_styles";
+  document.body.appendChild(template);
+  const setupScript = document.createElement("script");
+  setupScript.textContent = `${GLOBAL_MANIFEST} = ${JSON.stringify(manifest)};`;
+  document.head.appendChild(setupScript);
+  for (const src of manifest.routeAssets.mount.assets) {
+    if (src.endsWith(".js")) {
+      importScript(src);
+    } else if (src.endsWith(".css")) {
+      importStyle(src, template.content);
+    }
+  }
+};
+try {
+  setup();
+} catch (e) {
+  const err = new Error("Failed to setup Modern.js DevTools.");
+  err.cause = e;
+  console.error(err);
+}

package/dist/types/common.d.ts

@@ -23,7 +23,7 @@ export type BufferLike = string | Buffer | DataView | number | ArrayBufferView |
 export type CleanHooks<T> = {
     [K in keyof T]: T[K] extends (...args: [...infer Params]) => any ? (...args: [...Params]) => void : never;
 };
-export type $FrameworkHooks = CleanHooks<Pick<ToThreads<BaseHooks<any> & AppToolsHooks<any>>, 'prepare' | 'modifyFileSystemRoutes' | 'modifyServerRoutes' | 'afterCreateCompiler' | 'beforeRestart' | 'beforeExit' | 'afterBuild'>>;
+export type $FrameworkHooks = CleanHooks<Pick<ToThreads<BaseHooks<any> & AppToolsHooks<any>>, 'prepare' | 'modifyFileSystemRoutes' | 'modifyServerRoutes' | 'afterCreateCompiler' | 'afterDev' | 'beforeRestart' | 'beforeExit' | 'afterBuild'>>;
 export interface FrameworkHooks extends $FrameworkHooks {
     config: () => void;
 }
@@ -33,13 +33,18 @@ type UnwrapBuilderHooks<T> = {
 export type $BuilderHooks = UnwrapBuilderHooks<Pick<RsbuildPluginAPI, 'modifyBundlerChain' | 'modifyWebpackConfig' | 'modifyRspackConfig' | 'onBeforeCreateCompiler' | 'onAfterCreateCompiler' | 'onDevCompileDone' | 'onAfterBuild' | 'onExit'>>;
 export interface BuilderHooks extends $BuilderHooks {
 }
+export interface DevtoolsHooks {
+    cleanup: () => Promise<void> | void;
+    settleState: () => Promise<void> | void;
+}
 declare global {
     interface DevtoolsPluginVars extends Record<string, unknown> {
     }
 }
 export interface PluginApi {
-    frameworkHooks: Hookable<FrameworkHooks>;
     builderHooks: Hookable<BuilderHooks>;
+    frameworkHooks: Hookable<FrameworkHooks>;
+    hooks: Hookable<DevtoolsHooks>;
     setupFramework: () => Promise<CliPluginAPI>;
     setupBuilder: () => Promise<RsbuildPluginAPI>;
     context: DevtoolsContext;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-nightly-20240617170645",
+  "version": "0.0.0-nightly-20240619170730",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -55,9 +55,9 @@
     "valtio": "^1.11.1",
     "ws": "^8.13.0",
     "hookable": "^5.5.3",
-    "@modern-js/devtools-kit": "0.0.0-nightly-20240617170645",
-    "@modern-js/utils": "0.0.0-nightly-20240617170645",
-    "@modern-js/devtools-client": "0.0.0-nightly-20240617170645"
+    "@modern-js/devtools-client": "0.0.0-nightly-20240619170730",
+    "@modern-js/devtools-kit": "0.0.0-nightly-20240619170730",
+    "@modern-js/utils": "0.0.0-nightly-20240619170730"
   },
   "devDependencies": {
     "@swc/helpers": "0.5.3",
@@ -65,18 +65,18 @@
     "@types/ws": "^8.5.5",
     "type-fest": "^4.1.0",
     "typescript": "^5",
-    "@rsbuild/core": "0.7.8",
-    "@modern-js/app-tools": "0.0.0-nightly-20240617170645",
-    "@modern-js/core": "0.0.0-nightly-20240617170645",
-    "@modern-js/module-tools": "0.0.0-nightly-20240617170645",
-    "@modern-js/runtime": "0.0.0-nightly-20240617170645",
-    "@modern-js/types": "0.0.0-nightly-20240617170645",
-    "@modern-js/server-core": "0.0.0-nightly-20240617170645",
-    "@modern-js/uni-builder": "0.0.0-nightly-20240617170645",
-    "@scripts/build": "0.0.0-nightly-20240617170645"
+    "@rsbuild/core": "0.7.9",
+    "@modern-js/app-tools": "0.0.0-nightly-20240619170730",
+    "@modern-js/core": "0.0.0-nightly-20240619170730",
+    "@modern-js/module-tools": "0.0.0-nightly-20240619170730",
+    "@modern-js/runtime": "0.0.0-nightly-20240619170730",
+    "@modern-js/server-core": "0.0.0-nightly-20240619170730",
+    "@modern-js/types": "0.0.0-nightly-20240619170730",
+    "@modern-js/uni-builder": "0.0.0-nightly-20240619170730",
+    "@scripts/build": "0.0.0-nightly-20240619170730"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "0.0.0-nightly-20240617170645"
+    "@modern-js/runtime": "0.0.0-nightly-20240619170730"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {