@modern-js/plugin-devtools 0.0.0-next-20240516080418 → 0.0.0-next-20240522073546

package/dist/cli.d.ts

@@ -1,6 +1,6 @@
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
 import { ClientDefinition } from '@modern-js/devtools-kit/node';
-import { DevtoolsPluginOptions } from './config';
+import { DevtoolsPluginOptions } from './options';
 export type { DevtoolsPluginOptions };
 export type DevtoolsPlugin = CliPlugin<AppTools> & {
     setClientDefinition: (def: ClientDefinition) => void;

package/dist/cli.js

@@ -35,14 +35,27 @@ module.exports = __toCommonJS(cli_exports);
 var import_http = __toESM(require("http"));
 var import_path = __toESM(require("path"));
 var import_assert = __toESM(require("assert"));
+var import_url = require("url");
+var import_lodash = __toESM(require("@modern-js/utils/lodash"));
 var import_utils = require("@modern-js/utils");
-var import_serve_static = __toESM(require("serve-static"));
+var import_hono = require("hono");
+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");
-var import_config = require("./config");
+var import_valtio = require("valtio");
+var import_options = require("./options");
 var import_rpc = require("./rpc");
 var import_socket = require("./utils/socket");
+var import_config = require("./utils/config");
 const devtoolsPlugin = (inlineOptions = {}) => {
-  const ctx = (0, import_config.resolveContext)(inlineOptions);
+  const ctx = (0, import_valtio.proxy)((0, import_options.resolveContext)(inlineOptions));
+  let watcher = null;
+  const closeWatcher = () => {
+    if (!watcher)
+      return;
+    watcher.close();
+    watcher = null;
+  };
   return {
     name: "@modern-js/plugin-devtools",
     usePlugins: [],
@@ -59,15 +72,39 @@ const devtoolsPlugin = (inlineOptions = {}) => {
       });
       const rpc = await (0, import_rpc.setupClientConnection)({
         api,
-        server: socketServer,
-        def: ctx.def
+        ctx,
+        server: socketServer
       });
       return {
-        prepare: rpc.hooks.prepare,
+        async prepare() {
+          await rpc.hooks.prepare();
+          const appConfig = api.useConfigContext();
+          const appCtx = api.useAppContext();
+          const { devtools: options = {} } = appConfig;
+          (0, import_options.updateContext)(ctx, options);
+          const watcher2 = import_utils.chokidar.watch((0, import_config.getConfigFilenames)(), {
+            cwd: appCtx.appDirectory,
+            ignorePermissionErrors: true
+          });
+          const refreshStoragePreset = async () => {
+            const configs = await (0, import_config.loadConfigFiles)(appCtx.appDirectory);
+            if (!configs)
+              return;
+            ctx.storagePresets = [];
+            (0, import_options.updateContext)(ctx, ...configs);
+          };
+          watcher2.on("add", refreshStoragePreset);
+          watcher2.on("change", refreshStoragePreset);
+          watcher2.on("unlink", refreshStoragePreset);
+        },
         modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
         beforeRestart() {
+          closeWatcher();
           return new Promise((resolve, reject) => httpServer.instance.close((err) => err ? reject(err) : resolve()));
         },
+        beforeExit() {
+          closeWatcher();
+        },
         modifyServerRoutes({ routes }) {
           routes.push({
             urlPath: "/sw-proxy.js",
@@ -79,13 +116,18 @@ const devtoolsPlugin = (inlineOptions = {}) => {
             routes
           };
         },
-        config() {
-          var _api_useConfigContext_devtools;
-          const config = (_api_useConfigContext_devtools = api.useConfigContext().devtools) !== null && _api_useConfigContext_devtools !== void 0 ? _api_useConfigContext_devtools : {};
-          Object.assign(ctx, (0, import_config.resolveContext)(ctx, config));
+        async config() {
           import_utils.logger.info(`${ctx.def.name.formalName} DevTools is enabled`);
           const swProxyEntry = require.resolve("@modern-js/devtools-client/sw-proxy");
-          const serializedOptions = JSON.stringify(ctx);
+          const clientOptions = import_lodash.default.pick(ctx, [
+            "def",
+            "endpoint",
+            "dataSource"
+          ]);
+          Object.assign(clientOptions, {
+            __keep: true
+          });
+          const serializedOptions = JSON.stringify(clientOptions);
           const tags = [
             {
               tag: "script",
@@ -140,11 +182,20 @@ const devtoolsPlugin = (inlineOptions = {}) => {
               devServer: {
                 proxy: {
                   [import_node.ROUTE_BASENAME]: {
-                    target: `http://localhost:${httpServer.port}`,
+                    target: `http://127.0.0.1:${httpServer.port}`,
                     pathRewrite: {
                       [`^${import_node.ROUTE_BASENAME}`]: ""
                     },
-                    ws: true
+                    ws: true,
+                    onProxyReq(proxyReq, req) {
+                      const addrInfo = req.socket.address();
+                      if ("address" in addrInfo) {
+                        const { address } = addrInfo;
+                        proxyReq.setHeader("X-Forwarded-For", address);
+                      } else {
+                        proxyReq.removeHeader("X-Forwarded-For");
+                      }
+                    }
                   }
                 }
               }
@@ -157,24 +208,71 @@ const devtoolsPlugin = (inlineOptions = {}) => {
 };
 var cli_default = devtoolsPlugin;
 const setupHttpServer = async () => {
+  const app = new import_hono.Hono();
   const port = await (0, import_utils.getPort)(8782, {
     slient: true
   });
   const clientServeDir = import_path.default.resolve(require.resolve("@modern-js/devtools-client/package.json"), "../dist");
-  const serveMiddleware = (0, import_serve_static.default)(clientServeDir);
-  const instance = import_http.default.createServer((req, res) => {
-    const usePageNotFound = () => {
-      res.write("404");
-      res.statusCode = 404;
-      res.end();
-    };
-    const useMainRoute = () => {
-      req.url = "/html/client/index.html";
-      serveMiddleware(req, res, usePageNotFound);
-    };
-    serveMiddleware(req, res, useMainRoute);
+  const handleCookieApi = async (c) => {
+    const raw = c.req.header("Cookie");
+    const { parse } = await import("cookie-es");
+    const cookies = raw ? parse(raw) : {};
+    const body = await c.req.json().catch(() => null);
+    if (body === null || body === void 0 ? void 0 : body.setCookies) {
+      const { setCookies } = body;
+      (0, import_assert.default)(typeof setCookies === "object", "setCookies should be object");
+      for (const [k, v] of Object.entries(setCookies)) {
+        (0, import_assert.default)(typeof v === "string");
+        const expires = new Date(Date.now() + 30 * 24 * 36e5).toUTCString();
+        cookies[k] = v;
+        c.header("Set-Cookie", `${k}=${v}; Expires=${expires}; Path=/`, {
+          append: true
+        });
+      }
+    }
+    return c.json({
+      cookies
+    });
+  };
+  app.get("/api/cookies", handleCookieApi);
+  app.post("/api/cookies", handleCookieApi);
+  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(), clientServeDir)
+    })
+  );
+  app.get(":filename{.+\\.hot-update\\.\\w+$}", async (c) => {
+    if (process.env.NODE_ENV !== "development") {
+      return c.text("Not found", 404);
+    }
+    const filename = c.req.param("filename");
+    const target = new import_url.URL(filename, "http://127.0.0.1:8780");
+    const { body, headers, status } = await fetch(target.href);
+    const newResp = c.newResponse(body, {
+      headers,
+      status
+    });
+    if (newResp.headers.get("content-encoding") === "gzip") {
+      newResp.headers.delete("content-encoding");
+    }
+    return newResp;
+  });
+  app.get("*", async (c) => {
+    const filename = import_path.default.resolve(clientServeDir, "html/client/index.html");
+    const content = await import_utils.fs.readFile(filename, "utf-8");
+    return c.html(content);
+  });
+  const instance = (0, import_node_server.serve)({
+    fetch: app.fetch,
+    port,
+    hostname: "127.0.0.1",
+    serverOptions: {
+      allowHTTP1: true
+    }
   });
-  instance.listen(port);
+  (0, import_assert.default)(instance instanceof import_http.default.Server, "instance should be http.Server");
   return {
     instance,
     port

package/dist/options.d.ts

@@ -0,0 +1,8 @@
+import { DevtoolsContext } from '@modern-js/devtools-kit/node';
+export interface DevtoolsPluginOptions {
+    enable?: boolean;
+    endpoint?: string;
+    dataSource?: string;
+}
+export declare const resolveContext: (...sources: Partial<DevtoolsContext>[]) => DevtoolsContext;
+export declare const updateContext: (context: DevtoolsContext, ...sources: Partial<DevtoolsContext>[]) => void;

package/dist/{config.js → options.js}

@@ -16,22 +16,21 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var config_exports = {};
-__export(config_exports, {
-  resolveContext: () => resolveContext
+var options_exports = {};
+__export(options_exports, {
+  resolveContext: () => resolveContext,
+  updateContext: () => updateContext
 });
-module.exports = __toCommonJS(config_exports);
+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,
-    def: new import_node.ClientDefinition()
+    def: new import_node.ClientDefinition(),
+    storagePresets: []
   };
-  Object.assign(ret, {
-    __keep: true
-  });
   for (const opts of sources) {
     var _opts_enable;
     ret.enable = (_opts_enable = opts.enable) !== null && _opts_enable !== void 0 ? _opts_enable : ret.enable;
@@ -41,10 +40,15 @@ const resolveContext = (...sources) => {
     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);
   }
   return ret;
 };
+const updateContext = (context, ...sources) => {
+  Object.assign(context, resolveContext(context, ...sources));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  resolveContext
+  resolveContext,
+  updateContext
 });

package/dist/rpc/index.d.ts

@@ -1,11 +1,11 @@
-import { ClientDefinition, type ClientFunctions, type ServerFunctions } from '@modern-js/devtools-kit/node';
+import { type ClientFunctions, type ServerFunctions, DevtoolsContext } from '@modern-js/devtools-kit/node';
 import type { RsbuildPlugin } from '@modern-js/uni-builder';
 import { CliPluginAPI, InjectedHooks } from '../types';
 import { SocketServer } from '../utils/socket';
 export interface SetupClientConnectionOptions {
     api: CliPluginAPI;
     server: SocketServer;
-    def: ClientDefinition;
+    ctx: DevtoolsContext;
 }
 export declare const setupClientConnection: (options: SetupClientConnectionOptions) => Promise<{
     client: import("birpc").BirpcReturn<ClientFunctions, ServerFunctions>;

package/dist/rpc/index.js

@@ -31,15 +31,96 @@ __export(rpc_exports, {
   setupClientConnection: () => setupClientConnection
 });
 module.exports = __toCommonJS(rpc_exports);
-var import_lodash = __toESM(require("@modern-js/utils/lodash"));
+var import_path = __toESM(require("path"));
+var import_buffer = require("buffer");
 var import_node = require("@modern-js/devtools-kit/node");
+var import_lodash = __toESM(require("@modern-js/utils/lodash"));
 var import_birpc = require("birpc");
 var flatted = __toESM(require("flatted"));
-var import_p_defer = __toESM(require("p-defer"));
+var import_valtio = require("valtio");
+var import_utils = require("@modern-js/utils");
 var import_module = require("../utils/module");
+var import_state = require("../state");
+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 setupClientConnection = async (options) => {
-  const { api, server, def } = options;
-  const _fileSystemRoutesMap = {};
+  const { api, server, ctx } = options;
   let handleMessage = null;
   const onceConnection = new Promise((resolve) => {
     server.on("connection", (ws) => {
@@ -47,151 +128,106 @@ const setupClientConnection = async (options) => {
       ws.on("message", (data, isBinary) => handleMessage === null || handleMessage === void 0 ? void 0 : handleMessage(data, isBinary));
     });
   });
-  const deferred = {
-    prepare: (0, import_p_defer.default)(),
-    builder: {
-      context: (0, import_p_defer.default)(),
-      config: {
-        resolved: (0, import_p_defer.default)(),
-        transformed: (0, import_p_defer.default)()
-      }
-    },
-    bundler: {
-      config: {
-        resolved: (0, import_p_defer.default)(),
-        transformed: (0, import_p_defer.default)()
+  if ("resolve" in import_state.$resolvers.context) {
+    import_state.$resolvers.context.resolve(ctx);
+  }
+  import_state.$state.context = ctx;
+  (0, import_valtio.subscribe)(import_state.$state, (ops) => {
+    clientConn.applyStateOperations.asEvent(ops);
+  });
+  const validateSafeToOpen = (filename) => {
+    const { appDirectory } = api.useAppContext();
+    const resolved = import_path.default.resolve(appDirectory, filename);
+    for (const preset of ctx.storagePresets) {
+      if (import_path.default.resolve(appDirectory, preset.filename) === resolved) {
+        return true;
       }
-    },
-    compileTimeCost: (0, import_p_defer.default)()
+    }
+    return false;
   };
   const serverFunctions = {
-    async getFrameworkConfig() {
-      await deferred.prepare.promise;
-      return api.useConfigContext();
-    },
-    async getTransformedFrameworkConfig() {
-      await deferred.prepare.promise;
-      return api.useResolvedConfigContext();
-    },
-    async getBuilderConfig() {
-      return deferred.builder.config.resolved.promise;
-    },
-    async getTransformedBuilderConfig() {
-      return deferred.builder.config.transformed.promise;
-    },
-    async getBundlerConfigs() {
-      return deferred.bundler.config.resolved.promise;
+    echo(content) {
+      return content;
     },
-    async getTransformedBundlerConfigs() {
-      return deferred.bundler.config.transformed.promise;
+    async pullExportedState() {
+      (0, import_node.extractSettledOperations)(import_state.$state).then((ops) => {
+        clientConn.applyStateOperations.asEvent(ops);
+      });
+      return import_state.$state;
     },
-    async getAppContext() {
-      await deferred.prepare.promise;
-      const ctx = {
-        ...api.useAppContext()
+    async createTemporaryStoragePreset() {
+      var _config;
+      const appCtx = api.useAppContext();
+      const basename = `${ctx.def.name.shortName}.runtime.json`;
+      const filename = import_path.default.resolve(appCtx.appDirectory, basename);
+      const id = (0, import_utils.nanoid)();
+      const name = `New Preset ${id.slice(0, 6)}`;
+      const config = {};
+      if (await import_utils.fs.pathExists(filename)) {
+        Object.assign(config, await import_utils.fs.readJSON(filename));
+      }
+      const newPreset = {
+        name,
+        id,
+        cookie: {},
+        localStorage: {},
+        sessionStorage: {}
       };
-      return import_lodash.default.omit(ctx, [
-        "builder",
-        "serverInternalPlugins"
-      ]);
-    },
-    async getFileSystemRoutes(entryName) {
-      var _fileSystemRoutesMap_entryName;
-      return (_fileSystemRoutesMap_entryName = _fileSystemRoutesMap[entryName]) !== null && _fileSystemRoutesMap_entryName !== void 0 ? _fileSystemRoutesMap_entryName : [];
-    },
-    async getBuilderContext() {
-      const ctx = await deferred.builder.context.promise;
-      return ctx;
+      (_config = config).storagePresets || (_config.storagePresets = []);
+      config.storagePresets.push(newPreset);
+      await import_utils.fs.outputJSON(filename, config, {
+        spaces: 2
+      });
+      return newPreset;
     },
-    async getDependencies() {
-      const ctx = await deferred.builder.context.promise;
-      const ret = {};
-      const resolveExprs = {
-        react: [
-          ctx.rootPath,
-          "react/package.json"
-        ],
-        "@modern-js/app-tools": [
-          ctx.rootPath,
-          "@modern-js/app-tools/package.json"
-        ],
-        "@edenx/app-tools": [
-          ctx.rootPath,
-          "@edenx/app-tools/package.json"
-        ],
-        webpack: [
-          ctx.rootPath,
-          "@modern-js/app-tools",
-          "@modern-js/uni-builder",
-          "@rsbuild/webpack",
-          "webpack/package.json"
-        ],
-        "@rspack/core": [
-          ctx.rootPath,
-          "@modern-js/uni-builder",
-          "@rsbuild/core",
-          "@rspack/core/package.json"
-        ],
-        "@rsdoctor/rspack-plugin": [
-          ctx.rootPath,
-          "@rsdoctor/rspack-plugin/package.json"
-        ],
-        "@rsdoctor/webpack-plugin": [
-          ctx.rootPath,
-          "@rsdoctor/webpack-plugin/package.json"
-        ],
-        "@web-doctor/webpack-plugin": [
-          ctx.rootPath,
-          "@web-doctor/webpack-plugin/package.json"
-        ],
-        "@web-doctor/rspack-plugin": [
-          ctx.rootPath,
-          "@web-doctor/rspack-plugin/package.json"
-        ],
-        "@web-doctor/webpack-plugin(builder)": [
-          ctx.rootPath,
-          "@edenx/builder-plugin-web-doctor",
-          "@web-doctor/webpack-plugin/package.json"
-        ],
-        "@web-doctor/rspack-plugin(builder)": [
-          ctx.rootPath,
-          "@edenx/builder-plugin-web-doctor",
-          "@web-doctor/rspack-plugin/package.json"
-        ],
-        "@rsdoctor/core": [
-          ctx.rootPath,
-          "@rsdoctor/core/package.json"
-        ]
-      };
-      for (const [name, expr] of Object.entries(resolveExprs)) {
-        try {
-          ret[name] = (0, import_module.requireModule)(expr).version;
-        } catch {
-        }
+    async pasteStoragePreset(target) {
+      var _config;
+      const { default: clipboardy } = await import("clipboardy");
+      const raw = clipboardy.readSync();
+      const HEAD = `data:application/json;base64,`;
+      if (!raw.startsWith(HEAD)) {
+        throw new Error("Failed to parse data URL");
       }
-      return ret;
-    },
-    async getCompileTimeCost() {
-      return deferred.compileTimeCost.promise;
-    },
-    async getClientDefinition() {
-      return def;
-    },
-    async getDoctorOverview() {
-      const ctx = api.useAppContext();
-      const manifestPath = await (0, import_node.findManifest)(ctx.distDirectory);
-      const json = await (0, import_node.parseManifest)(require(manifestPath));
-      const data = {
-        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
-      };
-      return data;
+      const encoded = raw.slice(HEAD.length);
+      const preset = JSON.parse(import_buffer.Buffer.from(encoded, "base64").toString("utf-8"));
+      if (typeof preset !== "object" || preset === null) {
+        throw new Error("Failed to parse data URL");
+      }
+      if (typeof preset.name !== "string") {
+        throw new Error("Failed to parse data URL");
+      }
+      const appCtx = api.useAppContext();
+      const filename = import_path.default.resolve(appCtx.appDirectory, target.filename);
+      const config = {};
+      if (await import_utils.fs.pathExists(filename)) {
+        Object.assign(config, await import_utils.fs.readJSON(filename));
+      }
+      (_config = config).storagePresets || (_config.storagePresets = []);
+      const diff = import_lodash.default.pick(preset, [
+        "cookie",
+        "localStorage",
+        "sessionStorage"
+      ]);
+      const matched = import_lodash.default.find(config.storagePresets, {
+        id: target.id
+      });
+      if (matched) {
+        import_lodash.default.merge(matched, diff);
+      } else {
+        config.storagePresets.push(preset);
+      }
+      await import_utils.fs.outputJSON(filename, config, {
+        spaces: 2
+      });
     },
-    echo(content) {
-      return content;
+    async open(filename) {
+      const name = import_path.default.resolve(api.useAppContext().appDirectory, filename);
+      const validated = validateSafeToOpen(name);
+      if (!validated) {
+        throw new Error("Failed to validate the file.");
+      }
+      const { default: open } = await import("open");
+      await open(name);
     }
   };
   const clientRpcOptions = {
@@ -199,16 +235,27 @@ const setupClientConnection = async (options) => {
     on: (cb) => handleMessage = cb,
     serialize: (v) => flatted.stringify([
       v
-    ]),
-    deserialize: (v) => flatted.parse(v.toString())[0]
+    ], import_node.replacer),
+    deserialize: (v) => {
+      const msg = flatted.parse(v.toString(), import_node.reviver)[0];
+      return msg;
+    }
   };
   const clientConn = (0, import_birpc.createBirpc)(serverFunctions, clientRpcOptions);
   const hooks = {
     prepare() {
-      deferred.prepare.resolve();
+      const frameworkContext = {
+        ...api.useAppContext(),
+        builder: null,
+        serverInternalPlugins: null
+      };
+      import_state.$resolvers.framework.context.resolve(frameworkContext);
+      import_state.$resolvers.framework.config.resolved.resolve(api.useConfigContext());
+      import_state.$resolvers.framework.config.transformed.resolve(api.useResolvedConfigContext());
+      getDoctorOverview(frameworkContext).then((doctor) => import_state.$resolvers.doctor.resolve(doctor)).catch(() => import_state.$resolvers.doctor.resolve(void 0));
     },
     modifyFileSystemRoutes({ entrypoint, routes }) {
-      _fileSystemRoutesMap[entrypoint.entryName] = import_lodash.default.cloneDeep(routes);
+      import_state.$state.fileSystemRoutes[entrypoint.entryName] = import_lodash.default.cloneDeep(routes);
       return {
         entrypoint,
         routes
@@ -218,17 +265,20 @@ const setupClientConnection = async (options) => {
   const builderPlugin = {
     name: "builder-plugin-devtools",
     setup(api2) {
-      deferred.builder.context.resolve(import_lodash.default.cloneDeep(api2.context));
+      import_state.$resolvers.builder.context.resolve(api2.context);
+      resolveDependencies(api2.context.rootPath).then((deps) => {
+        import_state.$state.dependencies = deps;
+      });
       api2.modifyBundlerChain(() => {
-        deferred.builder.config.resolved.resolve(import_lodash.default.cloneDeep(api2.getRsbuildConfig()));
-        deferred.builder.config.transformed.resolve(import_lodash.default.cloneDeep(api2.getNormalizedConfig()));
+        import_state.$resolvers.builder.config.resolved.resolve(import_lodash.default.cloneDeep(api2.getRsbuildConfig()));
+        import_state.$resolvers.builder.config.transformed.resolve(import_lodash.default.cloneDeep(api2.getNormalizedConfig()));
       });
       const expectBundlerNum = import_lodash.default.castArray(api2.context.targets).length;
       const bundlerConfigs = [];
       const handleBundlerConfig = (config) => {
         bundlerConfigs.push(config);
         if (bundlerConfigs.length >= expectBundlerNum) {
-          deferred.bundler.config.resolved.resolve(import_lodash.default.cloneDeep(bundlerConfigs));
+          import_state.$state.bundler.configs.resolved = import_lodash.default.cloneDeep(bundlerConfigs);
         }
       };
       if (api2.context.bundlerType === "webpack") {
@@ -241,17 +291,21 @@ const setupClientConnection = async (options) => {
         });
       }
       api2.onBeforeCreateCompiler(({ bundlerConfigs: bundlerConfigs2 }) => {
-        deferred.bundler.config.transformed.resolve(import_lodash.default.cloneDeep(bundlerConfigs2));
+        import_state.$resolvers.bundler.configs.transformed.resolve(import_lodash.default.cloneDeep(bundlerConfigs2));
       });
       let buildStartedAt = NaN;
       api2.onAfterCreateCompiler(() => {
         buildStartedAt = Date.now();
       });
       api2.onDevCompileDone(() => {
-        deferred.compileTimeCost.resolve(Date.now() - buildStartedAt);
+        import_state.$resolvers.performance.resolve({
+          compileDuration: Date.now() - buildStartedAt
+        });
       });
       api2.onAfterBuild(() => {
-        deferred.compileTimeCost.resolve(Date.now() - buildStartedAt);
+        import_state.$resolvers.performance.resolve({
+          compileDuration: Date.now() - buildStartedAt
+        });
       });
     }
   };

package/dist/state.d.ts

@@ -0,0 +1,4 @@
+import { ServerExportedStateResolvers } from '@modern-js/devtools-kit/node';
+export declare const $serverExportedState: import("@modern-js/devtools-kit/node").ServerExportedStateResult;
+export declare const $resolvers: ServerExportedStateResolvers;
+export declare const $state: import("@modern-js/devtools-kit/node").ServerExportedState;

package/dist/state.js

@@ -0,0 +1,36 @@
+"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 state_exports = {};
+__export(state_exports, {
+  $resolvers: () => $resolvers,
+  $serverExportedState: () => $serverExportedState,
+  $state: () => $state
+});
+module.exports = __toCommonJS(state_exports);
+var import_valtio = require("valtio");
+var import_node = require("@modern-js/devtools-kit/node");
+const $serverExportedState = (0, import_node.createServerExportedState)();
+const $resolvers = $serverExportedState.resolvers;
+const $state = (0, import_valtio.proxy)($serverExportedState.state);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  $resolvers,
+  $serverExportedState,
+  $state
+});

package/dist/types/common.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 common_exports = {};
+module.exports = __toCommonJS(common_exports);

package/dist/types/config.d.ts

@@ -0,0 +1,4 @@
+import { StoragePresetWithIdent } from '@modern-js/devtools-kit/node';
+export interface DevtoolsConfig {
+    storagePresets?: StoragePresetWithIdent[];
+}

package/dist/types/config.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 config_exports = {};
+module.exports = __toCommonJS(config_exports);

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './common';
+export type * from './config';

package/dist/utils/config.d.ts

@@ -0,0 +1,8 @@
+import { DevtoolsContext, StoragePresetContext } from '@modern-js/devtools-kit';
+export declare function getConfigFilenames(dir?: string): string[];
+/** Resolve all config files from target directory upward to the root path. */
+export declare function resolveConfigFiles(dir?: string): Promise<string[]>;
+export declare function loadConfigFile(filename: string): Promise<{
+    storagePresets: StoragePresetContext[];
+} | null>;
+export declare function loadConfigFiles(dir?: string): Promise<Partial<DevtoolsContext>[] | null>;

package/dist/utils/config.js

@@ -0,0 +1,112 @@
+"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 config_exports = {};
+__export(config_exports, {
+  getConfigFilenames: () => getConfigFilenames,
+  loadConfigFile: () => loadConfigFile,
+  loadConfigFiles: () => loadConfigFiles,
+  resolveConfigFiles: () => resolveConfigFiles
+});
+module.exports = __toCommonJS(config_exports);
+var import_path = __toESM(require("path"));
+var import_fs_extra = __toESM(require("@modern-js/utils/fs-extra"));
+var import_utils = require("@modern-js/utils");
+const CONFIG_FILENAME = "modern.runtime.json";
+function getConfigFilenames(dir = process.cwd()) {
+  const files = [];
+  let curr = dir;
+  while (import_path.default.dirname(curr) !== curr) {
+    files.push(import_path.default.join(curr, CONFIG_FILENAME));
+    curr = import_path.default.dirname(curr);
+  }
+  return files;
+}
+async function resolveConfigFiles(dir = process.cwd()) {
+  const files = getConfigFilenames(dir);
+  const ret = [];
+  await Promise.all(files.map(async (file) => await import_fs_extra.default.pathExists(file) && ret.push(file)));
+  return ret;
+}
+async function loadConfigFile(filename) {
+  const storagePresets = [];
+  try {
+    const config = await import_fs_extra.default.readJSON(filename);
+    config.storagePresets && storagePresets.push(...config.storagePresets);
+  } catch (e) {
+    import_utils.logger.error(e);
+    return null;
+  }
+  const presets = [];
+  let _validated = true;
+  for (const preset of storagePresets) {
+    if (typeof preset.id !== "string") {
+      preset.id = (0, import_utils.nanoid)();
+      _validated = false;
+    }
+    presets.push(preset);
+  }
+  if (!_validated) {
+    await import_fs_extra.default.outputJSON(filename, {
+      storagePresets: presets
+    }, {
+      spaces: 2
+    });
+    return null;
+  }
+  const ret = [];
+  for (const preset of presets) {
+    ret.push({
+      ...preset,
+      filename
+    });
+  }
+  return {
+    storagePresets: ret
+  };
+}
+async function loadConfigFiles(dir = process.cwd()) {
+  const filenames = await resolveConfigFiles(dir);
+  const resolved = await Promise.all(filenames.map(loadConfigFile));
+  const ret = [];
+  for (const config of resolved) {
+    if (config) {
+      ret.push(config);
+    } else {
+      return null;
+    }
+  }
+  return ret;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getConfigFilenames,
+  loadConfigFile,
+  loadConfigFiles,
+  resolveConfigFiles
+});

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-20240516080418",
+  "version": "0.0.0-next-20240522073546",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -43,34 +43,38 @@
     }
   },
   "dependencies": {
+    "@hono/node-server": "^1.8.2",
     "birpc": "0.2.13",
+    "clipboardy": "^4.0.0",
+    "cookie-es": "^1.0.0",
     "flatted": "^3.2.9",
-    "serve-static": "^1.14.1",
+    "hono": "^3.12.2",
+    "open": "^10.1.0",
     "p-defer": "^3.0.0",
-    "ws": "^8.13.0",
     "ufo": "^1.3.0",
-    "@modern-js/devtools-kit": "0.0.0-next-20240516080418",
-    "@modern-js/utils": "0.0.0-next-20240516080418",
-    "@modern-js/devtools-client": "0.0.0-next-20240516080418"
+    "valtio": "^1.11.1",
+    "ws": "^8.13.0",
+    "@modern-js/devtools-client": "0.0.0-next-20240522073546",
+    "@modern-js/devtools-kit": "0.0.0-next-20240522073546",
+    "@modern-js/utils": "0.0.0-next-20240522073546"
   },
   "devDependencies": {
-    "@types/serve-static": "^1.13.10",
     "@swc/helpers": "0.5.3",
     "@types/node": "^14",
     "@types/ws": "^8.5.5",
     "type-fest": "^4.1.0",
     "typescript": "^5",
-    "@modern-js/app-tools": "0.0.0-next-20240516080418",
-    "@modern-js/core": "0.0.0-next-20240516080418",
-    "@modern-js/runtime": "0.0.0-next-20240516080418",
-    "@modern-js/module-tools": "0.0.0-next-20240516080418",
-    "@modern-js/server-core": "0.0.0-next-20240516080418",
-    "@modern-js/uni-builder": "0.0.0-next-20240516080418",
-    "@modern-js/types": "0.0.0-next-20240516080418",
-    "@scripts/build": "0.0.0-next-20240516080418"
+    "@modern-js/app-tools": "0.0.0-next-20240522073546",
+    "@modern-js/core": "0.0.0-next-20240522073546",
+    "@modern-js/module-tools": "0.0.0-next-20240522073546",
+    "@modern-js/runtime": "0.0.0-next-20240522073546",
+    "@modern-js/server-core": "0.0.0-next-20240522073546",
+    "@modern-js/types": "0.0.0-next-20240522073546",
+    "@modern-js/uni-builder": "0.0.0-next-20240522073546",
+    "@scripts/build": "0.0.0-next-20240522073546"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "0.0.0-next-20240516080418"
+    "@modern-js/runtime": "0.0.0-next-20240522073546"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {

package/dist/config.d.ts

@@ -1,11 +0,0 @@
-import { ClientDefinition } from '@modern-js/devtools-kit/node';
-import type { RequiredDeep } from 'type-fest';
-export interface DevtoolsPluginOptions {
-    enable?: boolean;
-    endpoint?: string;
-    dataSource?: string;
-}
-export interface DevtoolsContext extends RequiredDeep<DevtoolsPluginOptions> {
-    def: ClientDefinition;
-}
-export declare const resolveContext: (...sources: Partial<DevtoolsContext>[]) => DevtoolsContext;