@modern-js/plugin-devtools 2.46.1 → 2.47.1

package/dist/cli.d.ts

@@ -1,5 +1,9 @@
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
-import { DevtoolsPluginOptions, DevtoolsPluginInlineOptions } from './config';
-export type { DevtoolsPluginOptions, DevtoolsPluginInlineOptions };
-export declare const devtoolsPlugin: (inlineOptions?: DevtoolsPluginInlineOptions) => CliPlugin<AppTools>;
+import { ClientDefinition } from '@modern-js/devtools-kit/node';
+import { DevtoolsPluginOptions } from './config';
+export type { DevtoolsPluginOptions };
+export type DevtoolsPlugin = CliPlugin<AppTools> & {
+    setClientDefinition: (def: ClientDefinition) => void;
+};
+export declare const devtoolsPlugin: (inlineOptions?: DevtoolsPluginOptions) => DevtoolsPlugin;
 export default devtoolsPlugin;

package/dist/cli.js

@@ -34,95 +34,127 @@ __export(cli_exports, {
 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_utils = require("@modern-js/utils");
 var import_serve_static = __toESM(require("serve-static"));
-var import_devtools_kit = require("@modern-js/devtools-kit");
-var import_ufo = require("ufo");
+var import_node = require("@modern-js/devtools-kit/node");
 var import_config = require("./config");
 var import_rpc = require("./rpc");
 var import_socket = require("./utils/socket");
-const devtoolsPlugin = (inlineOptions = {}) => ({
-  name: "@modern-js/plugin-devtools",
-  usePlugins: [],
-  setup: async (api) => {
-    const ctx = (0, import_config.resolveContext)(inlineOptions);
-    if (!ctx.enable) {
-      return {};
-    }
-    const httpServer = await setupHttpServer();
-    const socketServer = new import_socket.SocketServer({
-      server: httpServer.instance,
-      path: "/rpc"
-    });
-    const rpc = await (0, import_rpc.setupClientConnection)({
-      api,
-      server: socketServer
-    });
-    return {
-      prepare: rpc.hooks.prepare,
-      modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
-      beforeRestart() {
-        return new Promise((resolve, reject) => httpServer.instance.close((err) => err ? reject(err) : resolve()));
-      },
-      modifyServerRoutes({ routes }) {
-        routes.push({
-          urlPath: "/sw-proxy.js",
-          isSPA: true,
-          isSSR: false,
-          entryPath: "public/sw-proxy.js"
-        });
-        return {
-          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), {
-          __keep: true
-        });
-        import_utils.logger.info(`${ctx.def.name.formalName} Devtools is enabled`);
-        const runtimeEntry = require.resolve("@modern-js/devtools-client/mount");
-        const swProxyEntry = require.resolve("@modern-js/devtools-client/sw-proxy");
-        return {
-          builderPlugins: [
-            rpc.builderPlugin
-          ],
-          source: {
-            preEntry: [
-              (0, import_ufo.withQuery)(runtimeEntry, ctx)
+const devtoolsPlugin = (inlineOptions = {}) => {
+  const ctx = (0, import_config.resolveContext)(inlineOptions);
+  return {
+    name: "@modern-js/plugin-devtools",
+    usePlugins: [],
+    setClientDefinition(def) {
+      Object.assign(ctx.def, def);
+    },
+    async setup(api) {
+      if (!ctx.enable)
+        return {};
+      const httpServer = await setupHttpServer();
+      const socketServer = new import_socket.SocketServer({
+        server: httpServer.instance,
+        path: "/rpc"
+      });
+      const rpc = await (0, import_rpc.setupClientConnection)({
+        api,
+        server: socketServer,
+        def: ctx.def
+      });
+      return {
+        prepare: rpc.hooks.prepare,
+        modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
+        beforeRestart() {
+          return new Promise((resolve, reject) => httpServer.instance.close((err) => err ? reject(err) : resolve()));
+        },
+        modifyServerRoutes({ routes }) {
+          routes.push({
+            urlPath: "/sw-proxy.js",
+            isSPA: true,
+            isSSR: false,
+            entryPath: "public/sw-proxy.js"
+          });
+          return {
+            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));
+          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 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("")
+          });
+          return {
+            builderPlugins: [
+              rpc.builderPlugin
             ],
-            include: [
-              runtimeEntry
-            ]
-          },
-          output: {
-            copy: [
-              {
-                from: swProxyEntry,
-                to: "public"
-              }
-            ]
-          },
-          html: {},
-          tools: {
-            devServer: {
-              proxy: {
-                [import_devtools_kit.ROUTE_BASENAME]: {
-                  target: `http://localhost:${httpServer.port}`,
-                  pathRewrite: {
-                    [`^${import_devtools_kit.ROUTE_BASENAME}`]: ""
-                  },
-                  ws: true
+            source: {},
+            output: {
+              copy: [
+                {
+                  from: swProxyEntry,
+                  to: "public"
+                }
+              ]
+            },
+            html: {
+              tags
+            },
+            tools: {
+              devServer: {
+                proxy: {
+                  [import_node.ROUTE_BASENAME]: {
+                    target: `http://localhost:${httpServer.port}`,
+                    pathRewrite: {
+                      [`^${import_node.ROUTE_BASENAME}`]: ""
+                    },
+                    ws: true
+                  }
                 }
               }
             }
-          }
-        };
-      }
-    };
-  }
-});
+          };
+        }
+      };
+    }
+  };
+};
 var cli_default = devtoolsPlugin;
 const setupHttpServer = async () => {
   const port = await (0, import_utils.getPort)(8782, {

package/dist/config.d.ts

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

package/dist/config.js

@@ -18,21 +18,20 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var config_exports = {};
 __export(config_exports, {
-  getDefaultOptions: () => getDefaultOptions,
   resolveContext: () => resolveContext
 });
 module.exports = __toCommonJS(config_exports);
-var import_devtools_kit = require("@modern-js/devtools-kit");
-const getDefaultOptions = () => ({
-  def: new import_devtools_kit.ClientDefinition()
-});
+var import_node = require("@modern-js/devtools-kit/node");
 const resolveContext = (...sources) => {
   const ret = {
     enable: process.env.NODE_ENV === "development",
-    dataSource: `${import_devtools_kit.ROUTE_BASENAME}/rpc`,
-    endpoint: import_devtools_kit.ROUTE_BASENAME,
-    def: new import_devtools_kit.ClientDefinition()
+    dataSource: `${import_node.ROUTE_BASENAME}/rpc`,
+    endpoint: import_node.ROUTE_BASENAME,
+    def: new import_node.ClientDefinition()
   };
+  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;
@@ -40,25 +39,12 @@ const resolveContext = (...sources) => {
     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;
-    if (opts.def) {
-      if (opts.def.announcement) {
-        Object.assign(ret.def.announcement, opts.def.announcement);
-      }
-      if (opts.def.assets) {
-        Object.assign(ret.def.assets, opts.def.assets);
-      }
-      if (opts.def.name) {
-        Object.assign(ret.def.name, opts.def.name);
-      }
-      if (opts.def.packages) {
-        Object.assign(ret.def.packages, opts.def.packages);
-      }
-    }
+    var _opts_def;
+    ret.def = (_opts_def = opts.def) !== null && _opts_def !== void 0 ? _opts_def : ret.def;
   }
   return ret;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getDefaultOptions,
   resolveContext
 });

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { devtoolsPlugin, default } from './cli';
-export type { DevtoolsPluginOptions, DevtoolsPluginInlineOptions } from './cli';
+export type { DevtoolsPluginOptions } from './cli';

package/dist/rpc/index.d.ts

@@ -1,15 +1,14 @@
-import { ClientDefinition, type ClientFunctions, type ServerFunctions } from '@modern-js/devtools-kit';
-import type { PartialDeep } from 'type-fest';
+import { ClientDefinition, type ClientFunctions, type ServerFunctions } 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;
 }
 export declare const setupClientConnection: (options: SetupClientConnectionOptions) => Promise<{
     client: import("birpc").BirpcReturn<ClientFunctions, ServerFunctions>;
     hooks: InjectedHooks;
     builderPlugin: RsbuildPlugin;
-    setDefinition: (definition: PartialDeep<ClientDefinition>) => void;
 }>;

package/dist/rpc/index.js

@@ -32,16 +32,13 @@ __export(rpc_exports, {
 });
 module.exports = __toCommonJS(rpc_exports);
 var import_lodash = __toESM(require("@modern-js/utils/lodash"));
-var import_devtools_kit = require("@modern-js/devtools-kit");
+var import_node = require("@modern-js/devtools-kit/node");
 var import_birpc = require("birpc");
+var flatted = __toESM(require("flatted"));
 var import_p_defer = __toESM(require("p-defer"));
 var import_module = require("../utils/module");
 const setupClientConnection = async (options) => {
-  const { api, server } = options;
-  let def = {};
-  const setDefinition = (definition) => {
-    def = definition;
-  };
+  const { api, server, def } = options;
   const _fileSystemRoutesMap = {};
   let handleMessage = null;
   const onceConnection = new Promise((resolve) => {
@@ -134,6 +131,36 @@ const setupClientConnection = async (options) => {
           "@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)) {
@@ -148,12 +175,20 @@ const setupClientConnection = async (options) => {
       return deferred.compileTimeCost.promise;
     },
     async getClientDefinition() {
-      const ret = new import_devtools_kit.ClientDefinition();
-      Object.assign(ret.name, def.name);
-      Object.assign(ret.packages, def.packages);
-      Object.assign(ret.assets, def.assets);
-      Object.assign(ret.announcement, def.announcement);
-      return ret;
+      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;
     },
     echo(content) {
       return content;
@@ -162,8 +197,10 @@ const setupClientConnection = async (options) => {
   const clientRpcOptions = {
     post: (data) => onceConnection.then(() => server.clients.forEach((ws) => ws.send(data))),
     on: (cb) => handleMessage = cb,
-    serialize: (v) => JSON.stringify(v),
-    deserialize: (v) => JSON.parse(v.toString())
+    serialize: (v) => flatted.stringify([
+      v
+    ]),
+    deserialize: (v) => flatted.parse(v.toString())[0]
   };
   const clientConn = (0, import_birpc.createBirpc)(serverFunctions, clientRpcOptions);
   const hooks = {
@@ -186,15 +223,23 @@ const setupClientConnection = async (options) => {
         deferred.builder.config.resolved.resolve(import_lodash.default.cloneDeep(api2.getRsbuildConfig()));
         deferred.builder.config.transformed.resolve(import_lodash.default.cloneDeep(api2.getNormalizedConfig()));
       });
-      const modifyBundlerConfig = api2.context.bundlerType === "webpack" ? api2.modifyWebpackConfig : api2.modifyRspackConfig;
       const expectBundlerNum = import_lodash.default.castArray(api2.context.targets).length;
       const bundlerConfigs = [];
-      modifyBundlerConfig((config) => {
+      const handleBundlerConfig = (config) => {
         bundlerConfigs.push(config);
         if (bundlerConfigs.length >= expectBundlerNum) {
           deferred.bundler.config.resolved.resolve(import_lodash.default.cloneDeep(bundlerConfigs));
         }
-      });
+      };
+      if (api2.context.bundlerType === "webpack") {
+        api2.modifyWebpackConfig((config) => {
+          handleBundlerConfig(config);
+        });
+      } else {
+        api2.modifyRspackConfig((config) => {
+          handleBundlerConfig(config);
+        });
+      }
       api2.onBeforeCreateCompiler(({ bundlerConfigs: bundlerConfigs2 }) => {
         deferred.bundler.config.transformed.resolve(import_lodash.default.cloneDeep(bundlerConfigs2));
       });
@@ -213,8 +258,7 @@ const setupClientConnection = async (options) => {
   return {
     client: clientConn,
     hooks,
-    builderPlugin,
-    setDefinition
+    builderPlugin
   };
 };
 // Annotate the CommonJS export names for ESM import in node:

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.46.1",
+  "version": "2.47.1",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -28,26 +28,30 @@
         "jsnext:source": "./src/index.ts",
         "require": "./dist/index.js"
       },
-      "default": "./dist/index.js"
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
     "./cli": {
       "jsnext:source": "./src/cli.ts",
-      "default": "./dist/cli.js"
+      "default": "./dist/cli.js",
+      "types": "./dist/cli.d.ts"
     },
     "./runtime": {
       "jsnext:source": "./src/runtime.ts",
-      "default": "./dist/runtime.js"
+      "default": "./dist/runtime.js",
+      "types": "./dist/runtime.d.ts"
     }
   },
   "dependencies": {
     "birpc": "0.2.13",
+    "flatted": "^3.2.9",
     "serve-static": "^1.14.1",
     "p-defer": "^3.0.0",
     "ws": "^8.13.0",
     "ufo": "^1.3.0",
-    "@modern-js/devtools-kit": "2.46.1",
-    "@modern-js/devtools-client": "2.46.1",
-    "@modern-js/utils": "2.46.1"
+    "@modern-js/devtools-kit": "2.47.1",
+    "@modern-js/devtools-client": "2.47.1",
+    "@modern-js/utils": "2.47.1"
   },
   "devDependencies": {
     "@types/serve-static": "^1.13.10",
@@ -56,17 +60,17 @@
     "@types/ws": "^8.5.5",
     "type-fest": "^4.1.0",
     "typescript": "^5",
-    "@modern-js/app-tools": "2.46.1",
-    "@modern-js/core": "2.46.1",
-    "@modern-js/module-tools": "2.46.1",
-    "@modern-js/runtime": "2.46.1",
-    "@modern-js/types": "2.46.1",
-    "@modern-js/server-core": "2.46.1",
-    "@modern-js/uni-builder": "2.46.1",
-    "@scripts/build": "2.46.1"
+    "@modern-js/app-tools": "2.47.1",
+    "@modern-js/core": "2.47.1",
+    "@modern-js/module-tools": "2.47.1",
+    "@modern-js/runtime": "2.47.1",
+    "@modern-js/types": "2.47.1",
+    "@modern-js/server-core": "2.47.1",
+    "@modern-js/uni-builder": "2.47.1",
+    "@scripts/build": "2.47.1"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "^2.46.1"
+    "@modern-js/runtime": "^2.47.1"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {